userstuff: initial commit HEAD main

Userscripts and userstyles. Extension/platform-agnostic.
At the moment we're using the macOS 'Userscripts' app
(from the app store), which we've configured to point to
a folder in iCloud Documents, 'Userscripts Folder'.

'Userscripts Folder' is flat and each file is hardlinked
with the appropriate placement in userstuff, though we
haven't checked if the Userscripts app breaks hardlinks
or not.

1 files changed, 152 insertions, 0 deletions

diff --git a/userstuff/e621/Search their favorites!.user.js b/userstuff/e621/Search their favorites!.user.js
new file mode 100644
index 0000000..e34f4ee
--- /dev/null
+++ b/userstuff/e621/Search their favorites!.user.js
@@ -0,0 +1,152 @@
+// ==UserScript==
+// @name        Search their favorites!
+// @description This is your new file, start writing code
+// @match       https://e621.net/posts/*/favorites
+// ==/UserScript==
+
+const settings = {
+  normalHoverInfoDelay: 400,
+  fastHoveringInfoDelay: 150,
+  endFastHoveringDelay: 500,
+
+  focusInfoDelay: 750,
+
+  hideTooltipDelay: 500,
+};
+
+const state = {
+  hoverTimeout: null,
+  focusTimeout: null,
+
+  fastHovering: false,
+  endFastHoveringTimeout: false,
+  
+  showing: false,
+  justHidden: false,
+  
+  row: null,
+};
+
+const thumb = document.querySelector('#a-index .thumbnail');
+
+const container = document.createElement('div');
+
+const tagLabel = document.createElement('label');
+const tagInput = document.createElement('input');
+tagLabel.appendChild(document.createTextNode('Search these tags: '));
+tagLabel.appendChild(tagInput);
+container.appendChild(tagLabel);
+
+let hoverTimeout = null;
+for (const a of document.querySelectorAll('#a-index td a[href^="/favorites"]')) {
+  a.addEventListener('mouseover', event => {
+    const hoverTimeoutDelay =
+          (state.fastHovering
+           ? settings.fastHoveringInfoDelay
+           : settings.normalHoverInfoDelay);
+
+    state.hoverTimeout = setTimeout(() => {
+      state.hoverTimeout = null;
+      state.fastHovering = true;
+      show(a);
+    }, hoverTimeoutDelay);
+
+    if (state.endFastHoveringTimeout) {
+      clearTimeout(state.endFastHoveringTimeout);
+      state.endFastHoveringTimeout = null;
+    }
+
+    if (state.hideTimeout) {
+      clearTimeout(state.hideTimeout);
+      state.hideTimeout = null;
+    }
+  });
+  
+  a.addEventListener('mouseleave', event => {
+    if (state.hoverTimeout) {
+      clearTimeout(state.hoverTimeout);
+      state.hoverTimeout = null;
+    }
+
+    if (state.fastHovering && !state.endFastHoveringTimeout) {
+      state.endFastHoveringTimeout = setTimeout(() => {
+        state.endFastHoveringTimeout = null;
+        state.fastHovering = false;
+      }, settings.endFastHoveringDelay);
+    }
+  });
+  
+  a.closest('tr').addEventListener('mouseleave', event => {
+    if (state.showing && !state.hideTimeout) {
+      state.hideTimeout = setTimeout(() => {
+        state.hideTimeout = null;
+        hide();
+      }, settings.hideTooltipDelay);
+    }
+  });
+  
+  a.addEventListener('focus', event => {
+    state.focusTimeout = setTimeout(() => {
+      state.focusTimeout = null;
+      show(a);
+    }, settings.focusInfoDelay);
+
+    if (state.justHidden) {
+      clearTimeout(state.focusTimeout);
+      state.focusTimeout = null;
+      show(a);
+    }
+  })
+}
+
+function show(a) {
+  hide();
+  
+  const tr = document.createElement('tr');
+  const td = document.createElement('td');
+  const aa = document.createElement('a');
+  aa.href = '#';
+  aa.appendChild(document.createTextNode('Hiya'));
+  td.appendChild(aa);
+  tr.appendChild(td);
+
+  state.showing = true;
+  state.row = tr;
+  
+  tr.addEventListener('mouseenter', event => {
+    if (state.hideTimeout) {
+      clearTimeout(state.hideTimeout);
+      state.hideTimeout = null;
+    }
+  });
+  
+  tr.addEventListener('focusin', event => {
+    if (state.hideTimeout) {
+      clearTimeout(state.hideTimeout);
+      state.hideTimeout = null;
+    }
+  });
+  
+  tr.addEventListener('focusout', event => {
+    hide();
+  });
+  
+  a.closest('tr').after(tr);
+}
+
+function hide() {
+  if (!state.showing) return;
+  if (!state.row) return;
+
+  state.row.remove();
+
+  state.showing = false;
+  state.row = null;
+
+  state.justHidden = true;
+  setTimeout(() => {
+    state.justHiden = false;
+  });
+}
+
+thumb.after(container);