« get me outta code hell

dotfiles - Miscellaneous configuration files of my personal use
about summary refs log tree commit diff
path: root/userstuff/e621/Search their favorites!.user.js
diff options
context:
space:
mode:
Diffstat (limited to 'userstuff/e621/Search their favorites!.user.js')
-rw-r--r--userstuff/e621/Search their favorites!.user.js152
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);