gosora/templates/panel_themes_menus_items.html

{{template "header.html" . }}
<div class="colstack panel_stack">
{{template "panel_menu.html" . }}
	<main class="colstack_right">
{{template "panel_before_head.html" . }}
		<div class="colstack_item colstack_head">
			<div class="rowitem">
				<h1>{{lang "panel_themes_menus_items_head"}}</h1>
				<h2 class="hguide">{{lang "panel_hints_reorder"}}</h2>
			</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}}">
				<span class="grip"></span>
				<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_items_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_items_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_items_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">
// 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" . }}