From a82a0a179599064c084699a1a79968f5cb565168 Mon Sep 17 00:00:00 2001 From: octo Date: Sun, 2 Jul 2023 18:17:58 +0300 Subject: [PATCH] Add slide gesture for user sidebar --- js/cs.js | 3 +-- js/sidebars.js | 27 +++++++++++++++++++++++++++ js/subreddit_sidebar.js | 16 ++-------------- js/user.js | 3 +-- js/user_sidebar.js | 4 ++-- 5 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 js/sidebars.js diff --git a/js/cs.js b/js/cs.js index 50fc70c..0c8cd7f 100644 --- a/js/cs.js +++ b/js/cs.js @@ -1,7 +1,6 @@ import "./setPublicPath.js"; import "./general.js"; import "./header.js"; -import "./subreddit_sidebar.js"; -import "./user_sidebar.js"; +import "./sidebars.js"; import "./posts"; console.log("Content script loaded."); diff --git a/js/sidebars.js b/js/sidebars.js new file mode 100644 index 0000000..717dd3b --- /dev/null +++ b/js/sidebars.js @@ -0,0 +1,27 @@ +import setupSubredditSidebar from "./subreddit_sidebar.js"; +import setupUserSidebar from "./user_sidebar.js"; +function setupSidebars() { + const [toggleSub, subSide] = setupSubredditSidebar(); + const [toggleUser, userSide] = setupUserSidebar(); + document.addEventListener("swiped-right", function (e) { + // sidebar.classList.remove("active"); + if (subSide.classList.contains("active")) { + toggleSub(); + return; + } + if (!userSide.classList.contains("active")) { + toggleUser(); + } + }); + document.addEventListener("swiped-left", function (e) { + // sidebar.classList.add("active"); + if (userSide.classList.contains("active")) { + toggleUser(); + return; + } + if (!subSide.classList.contains("active")) { + toggleSub(); + } + }); +} +setupSidebars(); diff --git a/js/subreddit_sidebar.js b/js/subreddit_sidebar.js index c2259a3..42d36a0 100644 --- a/js/subreddit_sidebar.js +++ b/js/subreddit_sidebar.js @@ -1,6 +1,6 @@ import "swiped-events"; import "~/css/subreddit_sidebar.css"; -function setupSidebar() { +export default function setupSidebar() { const sidebar = document.createElement("div"); const sidebarToggle = document.createElement("div"); const actualSidebar = document.querySelector(".side"); @@ -22,18 +22,6 @@ function setupSidebar() { // sidebar.classList.toggle("active"); activeToggle(); }; - document.addEventListener("swiped-right", function (e) { - // sidebar.classList.remove("active"); - if (sidebar.classList.contains("active")) { - activeToggle(); - } - }); - document.addEventListener("swiped-left", function (e) { - // sidebar.classList.add("active"); - if (!sidebar.classList.contains("active")) { - activeToggle(); - } - }); actualSidebar.addEventListener("animationend", () => { console.log("Animation ended", sidebar.classList); if (sidebar.classList.contains("abouttodie")) { @@ -41,5 +29,5 @@ function setupSidebar() { } sidebar.classList.remove("showingup", "abouttodie"); }); + return [activeToggle, sidebar]; } -setupSidebar(); diff --git a/js/user.js b/js/user.js index a4c404c..cdae7f1 100644 --- a/js/user.js +++ b/js/user.js @@ -1,8 +1,7 @@ import "./viewport.js"; import "./general.js"; import "./header.js"; -import "./subreddit_sidebar.js"; -import "./user_sidebar.js"; +import "./sidebars.js"; import "./posts"; console.log("oldlander user.js loaded"); diff --git a/js/user_sidebar.js b/js/user_sidebar.js index 894f850..a8d637b 100644 --- a/js/user_sidebar.js +++ b/js/user_sidebar.js @@ -185,7 +185,7 @@ function moveHeaderItems(actualSidebar) { }; actualSidebar.appendChild(logoutItem); } -function setupSidebar() { +export default function setupSidebar() { document.body.classList.remove("with-listing-chooser"); const sidebar = document.createElement("div"); const old_sidebar = document.getElementById("user_sidebar"); @@ -241,5 +241,5 @@ function setupSidebar() { setupMultireddits(actualSidebar); setupSubreddits(actualSidebar); + return [activeToggle, sidebar]; } -setupSidebar();