Merge remote-tracking branch 'upstream/master'

assets/js/comment.js

@@ -3,7 +3,6 @@
  */
 
 import { $ } from './utils/dom';
-import { showOwnedComments } from './communications/comment';
 import { filterNode } from './imagesclientside';
 import { fetchHtml } from './utils/requests';
 import { timeAgo } from './timeago';
@@ -131,9 +130,6 @@ function displayComments(container, commentsHtml) {
   // Filter images in the comments
   filterNode(container);
 
-  // Show options on own comments
-  showOwnedComments();
-
 }
 
 function loadComments(event) {
@@ -175,7 +171,6 @@ function setupComments() {
     }
     else {
       filterNode(comments);
-      showOwnedComments();
     }
   }
 

assets/js/duplicate_reports.ts

@@ -0,0 +1,42 @@
+/**
+ * Interactive behavior for duplicate reports.
+ */
+
+import { assertNotNull } from './utils/assert';
+import { $, $$ } from './utils/dom';
+
+export function setupDupeReports() {
+  const onion = $<SVGSVGElement>('.onion-skin__image');
+  const slider = $<HTMLInputElement>('.onion-skin__slider');
+  const swipe = $<SVGSVGElement>('.swipe__image');
+
+  if (swipe) setupSwipe(swipe);
+  if (onion && slider) setupOnionSkin(onion, slider);
+}
+
+function setupSwipe(swipe: SVGSVGElement) {
+  const [ clip, divider ] = $$<SVGRectElement>('#clip rect, #divider', swipe);
+  const { width } = swipe.viewBox.baseVal;
+
+  function moveDivider({ clientX }: MouseEvent) {
+    // Move center to cursor
+    const rect = swipe.getBoundingClientRect();
+    const newX = (clientX - rect.left) * (width / rect.width);
+
+    divider.setAttribute('x', newX.toString());
+    clip.setAttribute('width', newX.toString());
+  }
+
+  swipe.addEventListener('mousemove', moveDivider);
+}
+
+function setupOnionSkin(onion: SVGSVGElement, slider: HTMLInputElement) {
+  const target = assertNotNull($<SVGImageElement>('#target', onion));
+
+  function setOpacity() {
+    target.setAttribute('opacity', slider.value);
+  }
+
+  setOpacity();
+  slider.addEventListener('input', setOpacity);
+}

assets/js/shortcuts.ts

@@ -0,0 +1,74 @@
+/**
+ * Keyboard shortcuts
+ */
+
+import { $ } from './utils/dom';
+
+interface ShortcutKeycodes {
+  [key: string]: () => void
+}
+
+function getHover(): string | null {
+  const thumbBoxHover = $<HTMLDivElement>('.media-box:hover');
+
+  return thumbBoxHover && (thumbBoxHover.dataset.imageId || null);
+}
+
+function openFullView() {
+  const imageHover = $<HTMLDivElement>('[data-uris]:hover');
+
+  if (!imageHover || !imageHover.dataset.uris) return;
+
+  window.location = JSON.parse(imageHover.dataset.uris).full;
+}
+
+function openFullViewNewTab() {
+  const imageHover = $<HTMLDivElement>('[data-uris]:hover');
+
+  if (!imageHover || !imageHover.dataset.uris) return;
+
+  window.open(JSON.parse(imageHover.dataset.uris).full);
+}
+
+function click(selector: string) {
+  const el = $<HTMLElement>(selector);
+
+  if (el) {
+    el.click();
+  }
+}
+
+function isOK(event: KeyboardEvent): boolean {
+  return !event.altKey && !event.ctrlKey && !event.metaKey &&
+         document.activeElement !== null &&
+         document.activeElement.tagName !== 'INPUT' &&
+         document.activeElement.tagName !== 'TEXTAREA';
+}
+
+const keyCodes: ShortcutKeycodes = {
+  KeyJ() { click('.js-prev'); },             // J - go to previous image
+  KeyI() { click('.js-up'); },               // I - go to index page
+  KeyK() { click('.js-next'); },             // K - go to next image
+  KeyR() { click('.js-rand'); },             // R - go to random image
+  KeyS() { click('.js-source-link'); },      // S - go to image source
+  KeyL() { click('.js-tag-sauce-toggle'); }, // L - edit tags
+  KeyO() { openFullView(); },                // O - open original
+  KeyV() { openFullViewNewTab(); },          // V - open original in a new tab
+  KeyF() {                                   // F - favourite image
+    getHover() ? click(`a.interaction--fave[data-image-id="${getHover()}"]`)
+      : click('.block__header a.interaction--fave');
+  },
+  KeyU() {                                   // U - upvote image
+    getHover() ? click(`a.interaction--upvote[data-image-id="${getHover()}"]`)
+      : click('.block__header a.interaction--upvote');
+  },
+};
+
+export function listenForKeys() {
+  document.addEventListener('keydown', (event: KeyboardEvent) => {
+    if (isOK(event) && keyCodes[event.code]) {
+      keyCodes[event.code]();
+      event.preventDefault();
+    }
+  });
+}

assets/js/staffhider.ts

@@ -0,0 +1,13 @@
+/**
+ * StaffHider
+ *
+ * Hide staff elements if enabled in the settings.
+ */
+
+import { $$, hideEl } from './utils/dom';
+
+export function hideStaffTools() {
+  if (window.booru.hideStaffTools === 'true') {
+    $$<HTMLElement>('.js-staff-action').forEach(el => hideEl(el));
+  }
+}

assets/js/when-ready.js

@@ -5,9 +5,6 @@
 
 import { whenReady, $ }            from './utils/dom';
 
-import { showOwnedComments }    from './communications/comment';
-import { showOwnedPosts }       from './communications/post';
-
 import { listenAutocomplete }   from './autocomplete';
 import { loadBooruData }        from './booru';
 import { registerEvents }       from './boorujs';
@@ -40,8 +37,6 @@ import { imageSourcesCreator }  from './sources';
 
 whenReady(() => {
 
-  showOwnedComments();
-  showOwnedPosts();
   loadBooruData();
   listenAutocomplete();
   registerEvents();

assets/test/vitest-setup.ts

@@ -10,6 +10,7 @@ window.booru = {
   csrfToken: 'mockCsrfToken',
   hiddenTag: '/mock-tagblocked.svg',
   hiddenTagList: [],
+  hideStaffTools: 'true',
   ignoredTagList: [],
   imagesWithDownvotingDisabled: [],
   spoilerType: 'off',

assets/types/booru-object.d.ts

@@ -65,6 +65,10 @@ interface BooruObject {
   spoileredFilter: AstMatcher;
   tagsVersion: number;
   interactions: Interaction[];
+  /**
+   * Indicates whether sensitive staff-only info should be hidden or not.
+   */
+  hideStaffTools: string;
 }
 
 declare global {