From 5603cc00644551cd0046903d20ce2f2a4031e1aa Mon Sep 17 00:00:00 2001 From: Elkorol Date: Thu, 22 Feb 2024 19:14:55 +0000 Subject: [PATCH 1/2] Added Plugin --- plugins/scenesPageRememberStates/README.MD | 5 + .../scenePageRememberStates.js | 101 ++++++++++++++++++ .../scenePageRememberStates.yml | 9 ++ 3 files changed, 115 insertions(+) create mode 100644 plugins/scenesPageRememberStates/README.MD create mode 100644 plugins/scenesPageRememberStates/scenePageRememberStates.js create mode 100644 plugins/scenesPageRememberStates/scenePageRememberStates.yml diff --git a/plugins/scenesPageRememberStates/README.MD b/plugins/scenesPageRememberStates/README.MD new file mode 100644 index 00000000..a906052b --- /dev/null +++ b/plugins/scenesPageRememberStates/README.MD @@ -0,0 +1,5 @@ +# Scene Page Remember States + +This plugin uses local storage to rememebr what is the current active nav tab of the scenes' detail panel, and upon any page load activate the last remembered active nav tab. + +It also rembers the active collapsed state of the divider button and upon page load if it's true, it will automatically collapse the divider. diff --git a/plugins/scenesPageRememberStates/scenePageRememberStates.js b/plugins/scenesPageRememberStates/scenePageRememberStates.js new file mode 100644 index 00000000..2ff7b360 --- /dev/null +++ b/plugins/scenesPageRememberStates/scenePageRememberStates.js @@ -0,0 +1,101 @@ +(async function waitForStash() { + while (!window.stash) { + await new Promise((resolve) => setTimeout(resolve, 100)); + } + + function handlePageDivider() { + waitForElementClass("scene-tabs order-xl-first order-last", function () { + const pageDivider = document + .querySelector(".scene-divider.d-none.d-xl-block") + .querySelector("button"); + + let isActive = localStorage.getItem("scene-page-divider"); + if (isActive === null) { + localStorage.setItem("scene-page-divider", "false"); + isActive = false; + } else { + isActive = isActive === "true"; + } + + if (isActive === true) { + pageDivider.click(); + } + + pageDivider.addEventListener("click", function () { + isActive = !isActive; + localStorage.setItem("scene-page-divider", isActive.toString()); + }); + }); + } + + function nav() { + waitForElementClass("mr-auto nav nav-tabs", function () { + const navMenuItems = [ + { name: "Details", key: "scene-details-panel" }, + { name: "Queue", key: "scene-queue-panel" }, + { name: "Markers", key: "scene-markers-panel" }, + { name: "Filters", key: "scene-filters-panel" }, + { name: "File Info", key: "scene-file-info-panel" }, + { name: "Edit", key: "scene-edit-panel" }, + ]; + + const detailsNav = document.getElementsByClassName( + "mr-auto nav nav-tabs" + )[0]; + const hrefs = detailsNav.getElementsByTagName("a"); + + // Check local storage for entries + let activeKey = localStorage.getItem("detailsNavActive"); + + // If no entry found, create default entry + if (!activeKey) { + navMenuItems.forEach((item) => { + if (item.name === "Details") { + localStorage.setItem("detailsNavActive", item.key); + } + }); + activeKey = "scene-details-panel"; + } + + // Remove active class from all hrefs + Array.from(hrefs).forEach((href) => { + href.classList.remove("active"); + }); + + // Add active class to the one that matches activeKey + Array.from(hrefs).forEach((href) => { + if (href.dataset.rbEventKey === activeKey) { + href.classList.add("active"); + } + }); + + // Simulate click on active tab + const activeTab = detailsNav.querySelector( + `a[data-rb-event-key="${activeKey}"]` + ); + activeTab.click(); + + // Add event listeners + Array.from(hrefs).forEach((href) => { + href.addEventListener("click", function () { + // Remove active class from all hrefs + Array.from(hrefs).forEach((href) => { + href.classList.remove("active"); + }); + + // Add active class to the clicked href + this.classList.add("active"); + + // Store active key in local storage + const newActiveKey = this.dataset.rbEventKey; + localStorage.setItem("detailsNavActive", newActiveKey); + }); + }); + }); + } + + function main() { + nav(), handlePageDivider(); + } + stash.addEventListener("stash:page:scene", main()); +})(); diff --git a/plugins/scenesPageRememberStates/scenePageRememberStates.yml b/plugins/scenesPageRememberStates/scenePageRememberStates.yml new file mode 100644 index 00000000..6198e7de --- /dev/null +++ b/plugins/scenesPageRememberStates/scenePageRememberStates.yml @@ -0,0 +1,9 @@ +name: Scene Page Remember States +description: Uses local storage to remember the state of the scene page detail panel nav bar and activate it on page load. Remembers collapse state of the divider. +url: +version: 0.1 +ui: + requires: + - stashUserscriptLibrary + javascript: + - scenePageRememberStates.js \ No newline at end of file From b01a1366978dcf5598d166953b9f7c54e635afc8 Mon Sep 17 00:00:00 2001 From: Elkorol Date: Thu, 22 Feb 2024 19:20:36 +0000 Subject: [PATCH 2/2] Ran format --- plugins/scenesPageRememberStates/scenePageRememberStates.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scenesPageRememberStates/scenePageRememberStates.yml b/plugins/scenesPageRememberStates/scenePageRememberStates.yml index 6198e7de..a039ef15 100644 --- a/plugins/scenesPageRememberStates/scenePageRememberStates.yml +++ b/plugins/scenesPageRememberStates/scenePageRememberStates.yml @@ -6,4 +6,4 @@ ui: requires: - stashUserscriptLibrary javascript: - - scenePageRememberStates.js \ No newline at end of file + - scenePageRememberStates.js