← All changes | assets/js/admin-settings.js +117 -0 1.11.1 → 2.1.0 View file →

		@@ -13,4 +13,121 @@
13	13	// On change
14	14	guestCheckout.on("change", toggleEnforceLogin);
15	15	});
16	16	// * ----- Disable Enforce Login based on Guest Checkout Setting ----- * //
	17	+
	18	+/**
	19	+ * Settings rail.
	20	+ *
	21	+ * One level: the rail picks a section (`?cat=`) and its panel is shown. The
	22	+ * items are real links, so without this file they still work — one page load
	23	+ * per click. This only removes the reload, and keeps three things in step with
	24	+ * what is on screen:
	25	+ *
	26	+ * - the address bar, so a section can be linked and reloaded;
	27	+ * - `_wp_http_referer`, which is what `options.php` redirects back to after a
	28	+ * save, and is rendered once at page load with whatever section was open then;
	29	+ * - `aria-current`, which is how the rail is read out.
	30	+ *
	31	+ * Every panel is in the DOM at all times (a panel that is not rendered is a
	32	+ * field that does not save); switching only toggles which are hidden.
	33	+ */
	34	+(function () {
	35	+ "use strict";
	36	+
	37	+ const form = document.querySelector("[data-subscrpt-settings]");
	38	+
	39	+ if (!form) {
	40	+ return;
	41	+ }
	42	+
	43	+ const catItems = Array.prototype.slice.call(form.querySelectorAll(".wpsubs-vnav__item[data-subscrpt-cat]"));
	44	+ const panels = Array.prototype.slice.call(form.querySelectorAll("[data-subscrpt-panel]"));
	45	+
	46	+ if (!catItems.length) {
	47	+ return;
	48	+ }
	49	+
	50	+ function syncUrl(href) {
	51	+ if (!href || !window.history || !window.history.replaceState) {
	52	+ return;
	53	+ }
	54	+ const url = new URL(href, window.location.origin);
	55	+ window.history.replaceState({}, "", url.toString());
	56	+
	57	+ const referer = form.querySelector('input[name="_wp_http_referer"]');
	58	+ if (referer) {
	59	+ referer.value = url.pathname + url.search;
	60	+ }
	61	+ }
	62	+
	63	+ function activateCat(cat, push) {
	64	+ let href = null;
	65	+
	66	+ catItems.forEach((el) => {
	67	+ const on = el.dataset.subscrptCat === cat;
	68	+ el.classList.toggle("is-active", on);
	69	+ el.setAttribute("aria-current", on ? "page" : "false");
	70	+ if (on) {
	71	+ href = el.href;
	72	+ }
	73	+ });
	74	+
	75	+ // "all" shows every panel; a section shows only its own group cards.
	76	+ panels.forEach((el) => {
	77	+ el.hidden = cat !== "all" && el.dataset.subscrptCat !== cat;
	78	+ });
	79	+
	80	+ if (push) {
	81	+ syncUrl(href);
	82	+ }
	83	+ }
	84	+
	85	+ form.addEventListener("click", function (event) {
	86	+ const catItem = event.target.closest(".wpsubs-vnav__item[data-subscrpt-cat]");
	87	+ if (catItem && form.contains(catItem)) {
	88	+ event.preventDefault();
	89	+ activateCat(catItem.dataset.subscrptCat, true);
	90	+ catItem.focus();
	91	+ }
	92	+ });
	93	+
	94	+ // Arrow-key navigation for the rail.
	95	+ form.addEventListener("keydown", function (event) {
	96	+ const isNav =
	97	+ event.key === "ArrowDown" ||
	98	+ event.key === "ArrowUp" ||
	99	+ event.key === "ArrowLeft" ||
	100	+ event.key === "ArrowRight" ||
	101	+ event.key === "Home" ||
	102	+ event.key === "End";
	103	+ if (!isNav) {
	104	+ return;
	105	+ }
	106	+
	107	+ const catItem = event.target.closest(".wpsubs-vnav__item[data-subscrpt-cat]");
	108	+ if (!catItem || !form.contains(catItem)) {
	109	+ return;
	110	+ }
	111	+
	112	+ const index = catItems.indexOf(catItem);
	113	+ let next = null;
	114	+
	115	+ if (event.key === "ArrowDown" || event.key === "ArrowRight") {
	116	+ next = catItems[(index + 1) % catItems.length];
	117	+ } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
	118	+ next = catItems[(index - 1 + catItems.length) % catItems.length];
	119	+ } else if (event.key === "Home") {
	120	+ next = catItems[0];
	121	+ } else if (event.key === "End") {
	122	+ next = catItems[catItems.length - 1];
	123	+ }
	124	+
	125	+ if (!next || next === catItem) {
	126	+ return;
	127	+ }
	128	+
	129	+ event.preventDefault();
	130	+ activateCat(next.dataset.subscrptCat, true);
	131	+ next.focus();
	132	+ });
	133	+})();