← All changes | assets/js/admin-settings.js +156 -0 1.10.0 → 2.4.0 View file →

		@@ -13,4 +13,160 @@
13	13	// On change
14	14	guestCheckout.on("change", toggleEnforceLogin);
15	15	});
16	16	// * ----- Disable Enforce Login based on Guest Checkout Setting ----- * //
	17	+
	18	+// * ----- Show Early Renew fields based on Early Renewal and Visibility Settings ----- * //
	19	+jQuery(document).ready(($) => {
	20	+ const earlyRenew = $("#subscrpt_early_renew");
	21	+ // An adv-select: the value lives in a hidden input that has a name but no id.
	22	+ const visibility = $('input[name="subscrpt_early_renew_visibility"]');
	23	+ const row = (id) => $("#" + id).closest(".wpsubs-settings-field");
	24	+
	25	+ // Each row is preceded by a divider; hide it too, or hidden rows leave empty lines.
	26	+ const showRow = (el, on) => el.add(el.prev(".subscrpt-settings__rule")).toggle(on);
	27	+
	28	+ // Visibility option => the input it needs. "always" needs none.
	29	+ const visibilityFields = {
	30	+ before_days: "subscrpt_early_renew_before_days",
	31	+ day_of_month: "subscrpt_early_renew_day_of_month",
	32	+ cycle_left: "subscrpt_early_renew_cycle_left",
	33	+ };
	34	+
	35	+ function toggleEarlyRenewFields() {
	36	+ const enabled = earlyRenew.is(":checked");
	37	+
	38	+ showRow(visibility.closest(".wpsubs-settings-field"), enabled);
	39	+ $.each(visibilityFields, (option, id) => {
	40	+ showRow(row(id), enabled && visibility.val() === option);
	41	+ });
	42	+ }
	43	+
	44	+ if (!earlyRenew.length || !visibility.length) {
	45	+ return;
	46	+ }
	47	+
	48	+ // Initial state
	49	+ toggleEarlyRenewFields();
	50	+
	51	+ // On change
	52	+ earlyRenew.on("change", toggleEarlyRenewFields);
	53	+ visibility.closest(".wpsubs-adv-select").on("wpsubs:select", toggleEarlyRenewFields);
	54	+});
	55	+// * ----- Show Early Renew fields based on Early Renewal and Visibility Settings ----- * //
	56	+
	57	+/**
	58	+ * Settings rail.
	59	+ *
	60	+ * One level: the rail picks a section (`?cat=`) and its panel is shown. The
	61	+ * items are real links, so without this file they still work — one page load
	62	+ * per click. This only removes the reload, and keeps three things in step with
	63	+ * what is on screen:
	64	+ *
	65	+ * - the address bar, so a section can be linked and reloaded;
	66	+ * - `_wp_http_referer`, which is what `options.php` redirects back to after a
	67	+ * save, and is rendered once at page load with whatever section was open then;
	68	+ * - `aria-current`, which is how the rail is read out.
	69	+ *
	70	+ * Every panel is in the DOM at all times (a panel that is not rendered is a
	71	+ * field that does not save); switching only toggles which are hidden.
	72	+ */
	73	+(function () {
	74	+ "use strict";
	75	+
	76	+ const form = document.querySelector("[data-subscrpt-settings]");
	77	+
	78	+ if (!form) {
	79	+ return;
	80	+ }
	81	+
	82	+ const catItems = Array.prototype.slice.call(form.querySelectorAll(".wpsubs-vnav__item[data-subscrpt-cat]"));
	83	+ const panels = Array.prototype.slice.call(form.querySelectorAll("[data-subscrpt-panel]"));
	84	+
	85	+ if (!catItems.length) {
	86	+ return;
	87	+ }
	88	+
	89	+ function syncUrl(href) {
	90	+ if (!href || !window.history || !window.history.replaceState) {
	91	+ return;
	92	+ }
	93	+ const url = new URL(href, window.location.origin);
	94	+ window.history.replaceState({}, "", url.toString());
	95	+
	96	+ const referer = form.querySelector('input[name="_wp_http_referer"]');
	97	+ if (referer) {
	98	+ referer.value = url.pathname + url.search;
	99	+ }
	100	+ }
	101	+
	102	+ function activateCat(cat, push) {
	103	+ let href = null;
	104	+
	105	+ catItems.forEach((el) => {
	106	+ const on = el.dataset.subscrptCat === cat;
	107	+ el.classList.toggle("is-active", on);
	108	+ el.setAttribute("aria-current", on ? "page" : "false");
	109	+ if (on) {
	110	+ href = el.href;
	111	+ }
	112	+ });
	113	+
	114	+ // "all" shows every panel; a section shows only its own group cards.
	115	+ panels.forEach((el) => {
	116	+ el.hidden = cat !== "all" && el.dataset.subscrptCat !== cat;
	117	+ });
	118	+
	119	+ if (push) {
	120	+ syncUrl(href);
	121	+ }
	122	+ }
	123	+
	124	+ form.addEventListener("click", function (event) {
	125	+ const catItem = event.target.closest(".wpsubs-vnav__item[data-subscrpt-cat]");
	126	+ if (catItem && form.contains(catItem)) {
	127	+ event.preventDefault();
	128	+ activateCat(catItem.dataset.subscrptCat, true);
	129	+ catItem.focus();
	130	+ }
	131	+ });
	132	+
	133	+ // Arrow-key navigation for the rail.
	134	+ form.addEventListener("keydown", function (event) {
	135	+ const isNav =
	136	+ event.key === "ArrowDown" ||
	137	+ event.key === "ArrowUp" ||
	138	+ event.key === "ArrowLeft" ||
	139	+ event.key === "ArrowRight" ||
	140	+ event.key === "Home" ||
	141	+ event.key === "End";
	142	+ if (!isNav) {
	143	+ return;
	144	+ }
	145	+
	146	+ const catItem = event.target.closest(".wpsubs-vnav__item[data-subscrpt-cat]");
	147	+ if (!catItem || !form.contains(catItem)) {
	148	+ return;
	149	+ }
	150	+
	151	+ const index = catItems.indexOf(catItem);
	152	+ let next = null;
	153	+
	154	+ if (event.key === "ArrowDown" || event.key === "ArrowRight") {
	155	+ next = catItems[(index + 1) % catItems.length];
	156	+ } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
	157	+ next = catItems[(index - 1 + catItems.length) % catItems.length];
	158	+ } else if (event.key === "Home") {
	159	+ next = catItems[0];
	160	+ } else if (event.key === "End") {
	161	+ next = catItems[catItems.length - 1];
	162	+ }
	163	+
	164	+ if (!next || next === catItem) {
	165	+ return;
	166	+ }
	167	+
	168	+ event.preventDefault();
	169	+ activateCat(next.dataset.subscrptCat, true);
	170	+ next.focus();
	171	+ });
	172	+})();