A notice is now shown when the menu is updated.

Re-added the missing padding above notices in the Control Panel for Nox.
Moved the inline menu item JS to it's own JS file.

Added the panel.themes_menus_items_order_updated phrase.

langs/english.json

@@ -949,6 +949,7 @@
 		"panel_themes_menus_items_edit_button_aria":"Edit menu item",
 		"panel_themes_menus_items_delete_button_aria":"Delete menu item",
 		"panel_themes_menus_items_update_button":"Update Order",
+		"panel.themes_menus_items_order_updated":"The menu has been successfully updated",
 
 		"panel_themes_menus_edit_head":"Menu Editor",
 		"panel_themes_menus_create_head":"Create Menu Item",

public/panel_menu_items.js

@@ -0,0 +1,56 @@
+(() => {
+	addInitHook("end_init", () => {
+
+// TODO: Move this into a JS file to reduce the number of possible problems
+var menuItems = {};
+let items = document.getElementsByClassName("panel_menu_item");
+for(let i = 0; item = items[i]; i++) menuItems[i] = item.getAttribute("data-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);
+				// TODO: Should we move other notices into TmplPhrases like this one?
+				pushNotice(phraseBox["panel"]["panel.themes_menus_items_order_updated"]);
+				if(resp.success==1) return;
+			}
+		} catch(ex) {
+			console.error("exception: ", ex)
+		}
+		console.trace();
+	}
+	// ? - Is encodeURIComponent the right function for this?
+	let spl = document.location.pathname.split("/");
+	req.open("POST","/panel/themes/menus/item/order/edit/submit/"+parseInt(spl[spl.length-1],10)+"?session=" + encodeURIComponent(me.User.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+"}");
+});
+
+});
+})();

routes/panel/themes.go

@@ -99,6 +99,7 @@ func ThemesMenusEdit(w http.ResponseWriter, r *http.Request, user c.User, smid s
 		return c.NoPermissions(w, r, user)
 	}
 	basePage.Header.AddScript("Sortable-1.4.0/Sortable.min.js")
+	basePage.Header.AddScriptAsync("panel_menu_items.js")
 
 	mid, err := strconv.Atoi(smid)
 	if err != nil {

templates/panel_themes_menus_items.html

@@ -80,54 +80,4 @@
 	</form>
 	</main>
 </div>
-<script type="text/javascript">
-// TODO: Move this into a JS file to reduce the number of possible problems
-var menuItems = {};
-let items = document.getElementsByClassName("panel_menu_item");
-for(let i = 0; item = items[i]; i++) menuItems[i] = item.getAttribute("data-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);
-				// TODO: Have a successfully updated notice
-				if(resp.success==1) 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(me.User.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&amp;items={"+items+"}");
-});
-</script>
 {{template "footer.html" . }}

themes/nox/public/panel.css

@@ -92,6 +92,9 @@
 .colstack_head + .colstack_head.colstack_sub_head:not(:first-child) {
 	margin-top: 2px;
 }
+.alert {
+	margin-top: 18px;
+}
 .rowitem {
 	display: flex;
 }