feat: long button toggle predicate function

contributing.md

@@ -1552,8 +1552,9 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 >   - `onClick: (evt: MouseEvent | KeyboardEvent) => void` - Function to call when the button is clicked or interacted with
 >   - `toggle: true` - Set to true to make the button act as a toggle button  
 >     In addition, there are these props:
->     - `onInteraction: (state: boolean, evt: MouseEvent | KeyboardEvent) => void` - Function to call when the button is interacted with
+>     - `onToggle: (state: boolean, evt: MouseEvent | KeyboardEvent) => void` - Function to call when the button is interacted with
 >     - `toggleInitialState?: boolean` - The initial value of the toggle button (optional, defaults to false)
+>     - `togglePredicate?: (event: MouseEvent | KeyboardEvent) => boolean` - Gets called every toggle attempt to determine if the state should swap and `onToggle` should be called
 > 
 > <details><summary><b>Example <i>(click to expand)</i></b></summary>
 > 
@@ -1567,12 +1568,28 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 >   iconPosition: "right",
 > });
 > 
+> // button:
+> const longBtn = unsafeWindow.BYTM.createLongBtn({
+>   resourceName: "icon-upload",
+>   onClick(evt: MouseEvent | KeyboardEvent) {
+>     console.log("The button was clicked");
+>   },
+>   text: "Upload",
+>   title: "Click to upload a file",
+> });
+> 
 > // toggle:
 > const toggleBtn = unsafeWindow.BYTM.createLongBtn({
 >   resourceName: "icon-globe",
 >   toggle: true,
->   onInteraction(state: boolean, event: MouseEvent | KeyboardEvent) {
->     console.log(`The button was toggled to ${state}`);
+>   toggleInitialState: true,
+>   togglePredicate: (evt) => {
+>     // don't toggle if shift is pressed and instead do something special
+>     evt.shiftKey && doSomething(evt);
+>     return !evt.shiftKey;
+>   },
+>   onToggle(state: boolean, evt: MouseEvent | KeyboardEvent) {
+>     console.log(`The button was toggled ${state ? "on" : "off"}`);
 >   },
 >   text: "Toggle",
 >   title: "Click to toggle something",

dist/BetterYTM.css

@@ -1383,6 +1383,10 @@ hr {
   border: 1px solid #999;
 }
 
+.bytm-generic-btn.long:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 .bytm-generic-btn.long .bytm-generic-btn-img.left {
   margin-right: 8px;
 }
@@ -1812,7 +1816,7 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   margin-left: 10px;
 }
 
-/* more specificity to override the default styles */
+/* add more specificity to override the default styles */
 
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn {
   margin-right: 8px;
@@ -1828,10 +1832,14 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   margin-left: 8px;
 }
 
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
   border-color: rgba(255, 255, 255, 0.2);

src/components/longButton.ts

@@ -35,6 +35,8 @@ type LongBtnOptions = {
     toggleInitialState?: boolean;
     /** Callback function to execute when the button is toggled */
     onToggle: (enabled: boolean, event: MouseEvent | KeyboardEvent) => void;
+    /** Predicate function to determine if the button should be toggled on click */
+    togglePredicate?: (event: MouseEvent | KeyboardEvent) => boolean;
   }
 );
 
@@ -75,8 +77,10 @@ export async function createLongBtn({
   onInteraction(btnElem, (evt) => {
     if("onClick" in rest && rest.onClick)
       rest.onClick(evt);
-    if("toggle" in rest && rest.toggle && "onToggle" in rest && rest.onToggle)
-      rest.onToggle(btnElem.classList.toggle("toggled"), evt);
+    if("toggle" in rest && rest.toggle && "onToggle" in rest && rest.onToggle) {
+      if((rest.togglePredicate ?? (() => true))(evt))
+        rest.onToggle(btnElem.classList.toggle("toggled"), evt);
+    }
   });
 
   btnElem.classList.add("bytm-generic-btn", "long");

src/features/input.css

@@ -78,7 +78,7 @@
   margin-left: 10px;
 }
 
-/* more specificity to override the default styles */
+/* add more specificity to override the default styles */
 
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn {
   margin-right: 8px;
@@ -94,10 +94,14 @@
   margin-left: 8px;
 }
 
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
 .bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
   border-color: rgba(255, 255, 255, 0.2);

src/features/input.ts

@@ -341,16 +341,14 @@ async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, c
     title: t(`auto_like_button_tooltip${chan?.enabled ? "_enabled" : "_disabled"}`),
     toggle: true,
     toggleInitialState: chan?.enabled ?? false,
-    async onToggle(toggled, evt) {
+    togglePredicate(e) {
+      e.shiftKey && getAutoLikeDialog().then((dlg) => dlg.open());
+      return !e.shiftKey;
+    },
+    async onToggle(toggled) {
       try {
         await autoLikeStore.loadData();
 
-        if(evt.shiftKey) {
-          buttonEl.classList.toggle("toggled");
-          getAutoLikeDialog().then((dlg) => dlg.open());
-          return;
-        }
-
         buttonEl.title = buttonEl.ariaLabel = t(`auto_like_button_tooltip${toggled ? "_enabled" : "_disabled"}`);
 
         const chanId = buttonEl.dataset.channelId ?? channelId;

src/features/layout.css

@@ -72,6 +72,10 @@
   border: 1px solid #999;
 }
 
+.bytm-generic-btn.long:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 .bytm-generic-btn.long .bytm-generic-btn-img.left {
   margin-right: 8px;
 }