{{template "header.html" . }} <div class="colstack panel_stack"> {{template "panel_menu.html" . }} <main class="colstack_right"> <div class="colstack_item colstack_head"> <div class="rowitem"><h1>{{lang "panel_themes_menus_items_head"}}</h1></div> </div> <div id="panel_menu_item_holder" class="colstack_item rowlist"> {{range .ItemList}} <div class="panel_menu_item rowitem panel_compactrow editable_parent" data-miid="{{.ID}}"> <a href="/panel/themes/menus/item/edit/{{.ID}}" class="editable_block panel_upshift">{{.Name}}</a> <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">{{lang "panel_themes_menus_edit_update_button"}}</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 the_form"> {{/** 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> </div> </div> </form> </main> </div> <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> {{template "footer.html" . }}