2018-05-11 05:41:51 +00:00
|
|
|
{{template "header.html" . }}
|
|
|
|
<div class="colstack panel_stack">
|
2018-06-06 00:21:22 +00:00
|
|
|
{{template "panel_menu.html" . }}
|
2018-05-11 05:41:51 +00:00
|
|
|
<main class="colstack_right">
|
|
|
|
<div class="colstack_item colstack_head">
|
|
|
|
<div class="rowitem"><h1>{{lang "panel_themes_menus_head"}}</h1></div>
|
|
|
|
</div>
|
2018-05-13 06:56:59 +00:00
|
|
|
<div id="panel_menu_item_holder" class="colstack_item rowlist">
|
2018-05-11 05:41:51 +00:00
|
|
|
{{range .ItemList}}
|
2018-05-13 06:56:59 +00:00
|
|
|
<div class="panel_menu_item rowitem panel_compactrow editable_parent" data-miid="{{.ID}}">
|
2018-05-11 05:41:51 +00:00
|
|
|
<a href="/panel/themes/menus/item/edit/{{.ID}}" class="editable_block panel_upshift">{{.Name}}</a>
|
2018-05-13 06:56:59 +00:00
|
|
|
<span class="panel_buttons">
|
|
|
|
<a href="/panel/themes/menus/item/edit/{{.ID}}" class="panel_tag panel_right_button edit_button" aria-label="{{lang "panel_themes_menus_item_edit_button_aria"}}"></a>
|
|
|
|
<a href="/panel/themes/menus/item/delete/submit/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button delete_button" aria-label="{{lang "panel_themes_menus_item_delete_button_aria"}}"></a>
|
|
|
|
</span>
|
|
|
|
</div>{{end}}
|
|
|
|
</div>
|
|
|
|
<div class="colstack_item rowlist panel_submitrow">
|
|
|
|
<div class="rowitem"><button id="panel_menu_items_order_button" class="formbutton">Update</button></div>
|
|
|
|
</div>
|
|
|
|
<div class="colstack_item colstack_head">
|
|
|
|
<div class="rowitem"><h1>{{lang "panel_themes_menus_create_head"}}</h1></div>
|
|
|
|
</div>
|
|
|
|
<form action="/panel/themes/menus/item/create/submit/?session={{.CurrentUser.Session}}" method="post">
|
|
|
|
<input name="mid" value="{{.MenuID}}" type="hidden" />
|
|
|
|
<div id="panel_themes_menu_item_create" class="colstack_item">
|
|
|
|
{{/** TODO: Let an admin move a menu item from one menu to another? **/}}
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_name"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-name" type="text" placeholder="{{lang "panel_themes_menus_name_placeholder"}}" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_htmlid"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-htmlid" type="text" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_cssclass"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-cssclass" type="text" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_position"}}</a></div>
|
|
|
|
<div class="formitem">
|
|
|
|
<select name="item-position">
|
|
|
|
<option selected value="left">left</option>
|
|
|
|
<option value="right">right</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_path"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-path" type="text" value="/" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_aria"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-aria" type="text" placeholder="{{lang "panel_themes_menus_aria_placeholder"}}" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_tooltip"}}</a></div>
|
|
|
|
<div class="formitem"><input name="item-tooltip" type="text" placeholder="{{lang "panel_themes_menus_tooltip_placeholder"}}" /></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem formlabel"><a>{{lang "panel_themes_menus_permissions"}}</a></div>
|
|
|
|
<div class="formitem"><select name="item-permissions">
|
|
|
|
<option selected value="everyone">{{lang "panel_themes_menus_everyone" }}</option>
|
|
|
|
<option value="guest-only">{{lang "panel_themes_menus_guestonly"}}</option>
|
|
|
|
<option value="member-only">{{lang "panel_themes_menus_memberonly"}}</option>
|
|
|
|
<option value="supermod-only">{{lang "panel_themes_menus_supermodonly"}}</option>
|
|
|
|
<option value="admin-only">{{lang "panel_themes_menus_adminonly"}}</option>
|
|
|
|
</select></div>
|
|
|
|
</div>
|
|
|
|
<div class="formrow">
|
|
|
|
<div class="formitem"><button name="panel-button" class="formbutton">{{lang "panel_themes_menus_create_button"}}</button></div>
|
2018-05-11 05:41:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-05-13 06:56:59 +00:00
|
|
|
</form>
|
2018-05-11 05:41:51 +00:00
|
|
|
</main>
|
|
|
|
</div>
|
2018-05-13 06:56:59 +00:00
|
|
|
<script type="text/javascript">
|
|
|
|
var menuItems = {};
|
|
|
|
let items = document.getElementsByClassName("panel_menu_item");
|
|
|
|
//console.log("items: ", items);
|
|
|
|
for(let i = 0; item = items[i];i++) {
|
|
|
|
let miid = item.getAttribute("data-miid");
|
|
|
|
//console.log("miid: ", miid);
|
|
|
|
menuItems[i] = miid;
|
|
|
|
}
|
|
|
|
Sortable.create(document.getElementById("panel_menu_item_holder"), {
|
|
|
|
sort: true,
|
|
|
|
onEnd: (evt) => {
|
|
|
|
console.log("pre menuItems: ", menuItems)
|
|
|
|
console.log("evt: ", evt)
|
|
|
|
let oldMiid = menuItems[evt.newIndex];
|
|
|
|
menuItems[evt.oldIndex] = oldMiid;
|
|
|
|
let newMiid = evt.item.getAttribute("data-miid");
|
|
|
|
console.log("newMiid: ", newMiid)
|
|
|
|
menuItems[evt.newIndex] = newMiid;
|
|
|
|
console.log("post menuItems: ", menuItems)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
document.getElementById("panel_menu_items_order_button").addEventListener("click", () => {
|
|
|
|
let req = new XMLHttpRequest();
|
|
|
|
if(!req) {
|
|
|
|
console.log("Failed to create request");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
req.onreadystatechange = () => {
|
|
|
|
try {
|
|
|
|
if(req.readyState!==XMLHttpRequest.DONE) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// TODO: Signal the error with a notice
|
|
|
|
if(req.status===200) {
|
|
|
|
let resp = JSON.parse(req.responseText);
|
|
|
|
console.log("resp: ", resp);
|
|
|
|
if(resp.success==1) {
|
|
|
|
// TODO: Have a successfully updated notice
|
|
|
|
console.log("success");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch(ex) {
|
|
|
|
console.error("exception: ", ex)
|
|
|
|
}
|
|
|
|
console.trace();
|
|
|
|
}
|
|
|
|
// ? - Is encodeURIComponent the right function for this?
|
|
|
|
req.open("POST","/panel/themes/menus/item/order/edit/submit/{{.MenuID}}?session=" + encodeURIComponent(session));
|
|
|
|
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
|
|
|
let items = "";
|
|
|
|
for(let i = 0; item = menuItems[i];i++) {
|
|
|
|
items += item+",";
|
|
|
|
}
|
|
|
|
if(items.length > 0) {
|
|
|
|
items = items.slice(0,-1);
|
|
|
|
}
|
|
|
|
req.send("js=1&items={"+items+"}");
|
|
|
|
});
|
|
|
|
</script>
|
2018-05-11 05:41:51 +00:00
|
|
|
{{template "footer.html" . }}
|