286 lines
8.1 KiB
HTML
286 lines
8.1 KiB
HTML
<form class="sortable" action="/editmenu" method="POST" id="menuEdit">
|
|
<input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}">
|
|
<div id="Menu" class="list">
|
|
|
|
{% for item in menu.keys() %}
|
|
{% if menu[item] is mapping %}
|
|
|
|
<div class="entry submenu n1" id="{{item}}" style="padding-bottom: 30px;">
|
|
<button class="btn btn-outline-dark"> {{ item }} </button>
|
|
<div class="list" id="{{item}}" name="{{ item }}">
|
|
|
|
{% for subitem in menu[item].keys() %}
|
|
<div class="entry n1" id="{{item}}§§{{subitem}}" name="{{subitem}}">
|
|
<button class="btn"> {{subitem}}</button>
|
|
<input class="input-menu" id="{{item}}§§{{subitem}}" name="{{item}}§§{{subitem}}" value="{{menu[item][subitem]}}">
|
|
<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="entry" id="{{ item }}">
|
|
<button class="btn"> {{ item }}</button>
|
|
<input class="input-menu" id="{{item }}" name="{{item}}" value="{{menu[item]}}">
|
|
<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
<button class="btn btn-outline-success" onclick="openForm()">+</button>
|
|
<hr>
|
|
<button class="btn btn-success" type="submit" form="menuEdit"> Enregistrer </button>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<div class="form-popup" id="myForm" style="display: none;">
|
|
<form class="form-container">
|
|
<h3>Nouvelle entrée</h3><br>
|
|
|
|
<label for="nom"><b>Nom</b></label>
|
|
<input type="text" placeholder="Nom" id="newEntry_name" required="">
|
|
<input type="checkbox" id="submenu" onclick="disableLink()" value="Cette entré est un sous-menu"><br>
|
|
<label for="link"><b>Lien</b></label>
|
|
<input type="text" placeholder="un lien ou nom d'un bloc" id="newEntry_link">
|
|
<button type="button" onclick="addEntry()" class="btn">Ajouter</button>
|
|
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script src="/static/vendors/Sortable/Sortable.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var elements = document.getElementsByClassName('list');
|
|
|
|
for (var i = 0; i < elements.length; i++) {
|
|
|
|
new Sortable(elements[i], {
|
|
group: 'shared',
|
|
animation: 150,
|
|
invertSwap: true,
|
|
fallbackOnBody: true,
|
|
swapThreshold: 0.65,
|
|
onAdd: function (evt) {
|
|
var itemEl = evt.item;
|
|
console.log(itemEl.parentElement.id);
|
|
parentid = itemEl.parentElement.id;
|
|
if ( parentid === "Menu" ){
|
|
itemEl.setAttribute("id", itemEl.getAttribute("name"));
|
|
for (child of itemEl.children){
|
|
nodeName= child.nodeName;
|
|
if ( nodeName === "INPUT"){
|
|
child.setAttribute("name", itemEl.getAttribute("name"));
|
|
child.setAttribute("id", itemEl.getAttribute("name"));
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
|
|
for (child of itemEl.children){
|
|
nodeName= child.nodeName;
|
|
if ( nodeName === "INPUT"){
|
|
console.log(child.nodeName);
|
|
child.setAttribute("name", itemEl.id);
|
|
child.setAttribute("id", itemEl.id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
document.ondrop = function(event) {
|
|
event.preventDefault();
|
|
|
|
var menu_entry = document.getElementsByClassName('input-menu');
|
|
|
|
for (var i = 0; i < menu_entry.length; i++) {
|
|
parentElement = menu_entry[i].parentElement;
|
|
menu_entry[i].setAttribute("name", parentElement.id);
|
|
menu_entry[i].setAttribute("id", parentElement.id);
|
|
}
|
|
}
|
|
|
|
function deleteItem(e){
|
|
e.parentElement.remove()
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<!-- Add entry to menu-->
|
|
<style>
|
|
|
|
.entry {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
/* The popup form - hidden by default */
|
|
.form-popup {
|
|
display: none;
|
|
position: fixed;
|
|
top: 20%;
|
|
right: 50%;
|
|
opacity: 1;
|
|
background-color: white;
|
|
border: 3px solid #f1f1f1;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Add styles to the form container */
|
|
.form-container {
|
|
max-width: 300px;
|
|
padding:0;
|
|
text-align:center;
|
|
}
|
|
|
|
/* Full-width input fields */
|
|
.form-container input[type=text], .form-container{
|
|
width: 100%;
|
|
padding: 15px;
|
|
margin: 5px 0 22px 0;
|
|
border: none;
|
|
background: #fff;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* When the inputs get focus, do something */
|
|
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
|
|
background-color: #ddd;
|
|
outline: 1px;
|
|
}
|
|
|
|
/* Set a style for the submit/login button */
|
|
.form-container .btn {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
padding: 20px 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-align :center;
|
|
width: 40%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Add a red background color to the cancel button */
|
|
.form-container .cancel {
|
|
background-color: red;
|
|
}
|
|
|
|
/* Add some hover effects to buttons */
|
|
.form-container .btn:hover, .open-button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
function disableLink() {
|
|
document.getElementById("newEntry_link").setAttribute("disabled", true);
|
|
}
|
|
|
|
function openForm() {
|
|
document.getElementById("myForm").style.display = "block";
|
|
}
|
|
|
|
function closeForm() {
|
|
document.getElementById("myForm").style.display = "none";
|
|
}
|
|
|
|
function addEntry()
|
|
{
|
|
var menu = document.getElementById("Menu");
|
|
var entry_name = document.getElementById("newEntry_name").value;
|
|
var entry_link = document.getElementById("newEntry_link").value;
|
|
|
|
|
|
// Create menu button
|
|
new_entry_btn = document.createElement("button");
|
|
new_entry_btn.setAttribute("class", "btn");
|
|
text_button = document.createTextNode(entry_name);
|
|
new_entry_btn.appendChild(text_button);
|
|
|
|
new_menu_entry = document.createElement("div");
|
|
new_menu_entry.setAttribute("class", "entry");
|
|
new_menu_entry.setAttribute("id", entry_name);
|
|
|
|
submenu_check = document.getElementById("submenu").checked;
|
|
|
|
if ( submenu_check )
|
|
{
|
|
new_entry_btn.setAttribute("class", "btn btn-outline-dark");
|
|
new_menu_entry.setAttribute("class", "entry submenu n1");
|
|
|
|
new_submenu = document.createElement("div");
|
|
new_submenu.setAttribute("class", "list");
|
|
new_submenu.setAttribute("id", entry_name);
|
|
|
|
new Sortable(new_submenu, {
|
|
group: 'shared',
|
|
animation: 150,
|
|
invertSwap: true,
|
|
fallbackOnBody: true,
|
|
swapThreshold: 0.65,
|
|
onAdd: function (evt) {
|
|
var itemEl = evt.item;
|
|
console.log(itemEl.parentElement.id);
|
|
parentid = itemEl.parentElement.id;
|
|
if ( parentid === "Menu" ){
|
|
itemEl.setAttribute("id", itemEl.getAttribute("name"));
|
|
for (child of itemEl.children){
|
|
nodeName= child.nodeName;
|
|
if ( nodeName === "INPUT"){
|
|
child.setAttribute("name", itemEl.getAttribute("name"));
|
|
child.setAttribute("id", itemEl.getAttribute("name"));
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
|
|
for (child of itemEl.children){
|
|
nodeName= child.nodeName;
|
|
if ( nodeName === "INPUT"){
|
|
console.log(child.nodeName);
|
|
child.setAttribute("name", itemEl.id);
|
|
child.setAttribute("id", itemEl.id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
new_menu_entry.appendChild(new_entry_btn);
|
|
new_menu_entry.appendChild(new_submenu);
|
|
}
|
|
else
|
|
{
|
|
// Create input
|
|
new_entry_input = document.createElement("input");
|
|
text_link = document.createTextNode(entry_link);
|
|
new_entry_input.setAttribute("id", entry_name);
|
|
new_entry_input.setAttribute("name", entry_name);
|
|
new_entry_input.setAttribute("class", "input-menu");
|
|
new_entry_input.setAttribute("value", text_link.textContent);
|
|
|
|
// Create menu entry
|
|
|
|
new_menu_entry.appendChild(new_entry_btn);
|
|
new_menu_entry.appendChild(new_entry_input);
|
|
|
|
}
|
|
|
|
menu.appendChild(new_menu_entry);
|
|
document.getElementById("myForm").style.display = "none";
|
|
}
|
|
</script>
|