Merge pull request #280 from philomena-dev/ts-tagsmisc

Convert tagsmisc and sources scripts to TypeScript

assets/js/sources.js → assets/js/sources.ts

@@ -1,4 +1,7 @@
+import { assertNotNull } from './utils/assert';
+import { $ } from './utils/dom';
 import { inputDuplicatorCreator } from './input-duplicator';
+import '../types/ujs';
 
 function setupInputs() {
   inputDuplicatorCreator({
@@ -9,18 +12,17 @@ function setupInputs() {
   });
 }
 
-function imageSourcesCreator() {
+export function imageSourcesCreator() {
   setupInputs();
-  document.addEventListener('fetchcomplete', ({ target, detail }) => {
-    const sourceSauce = document.querySelector('.js-sourcesauce');
 
+  document.addEventListener('fetchcomplete', ({ target, detail }) => {
     if (target.matches('#source-form')) {
+      const sourceSauce = assertNotNull($<HTMLElement>('.js-sourcesauce'));
+
       detail.text().then(text => {
         sourceSauce.outerHTML = text;
         setupInputs();
       });
     }
   });
 }
-
-export { imageSourcesCreator };

assets/js/tagsmisc.ts

@@ -0,0 +1,69 @@
+/**
+ * Tags Misc
+ */
+
+import { assertType, assertNotNull } from './utils/assert';
+import { $, $$ } from './utils/dom';
+import store from './utils/store';
+import { initTagDropdown } from './tags';
+import { setupTagsInput, reloadTagsInput } from './tagsinput';
+import '../types/ujs';
+
+type TagInputActionFunction = (tagInput: HTMLTextAreaElement | null) => void;
+type TagInputActionList = Record<string, TagInputActionFunction>;
+
+function tagInputButtons(event: MouseEvent) {
+  const target = assertType(event.target, HTMLElement);
+
+  const actions: TagInputActionList = {
+    save(tagInput: HTMLTextAreaElement | null) {
+      tagInput && store.set('tag_input', tagInput.value);
+    },
+    load(tagInput: HTMLTextAreaElement | null) {
+      if (!tagInput) { return; }
+
+      // If entry 'tag_input' does not exist, try to use the current list
+      tagInput.value = store.get('tag_input') || tagInput.value;
+      reloadTagsInput(tagInput);
+    },
+    clear(tagInput: HTMLTextAreaElement | null) {
+      if (!tagInput) { return; }
+
+      tagInput.value = '';
+      reloadTagsInput(tagInput);
+    },
+  };
+
+  for (const [ name, action ] of Object.entries(actions)) {
+    if (target && target.matches(`#tagsinput-${name}`)) {
+      action($<HTMLTextAreaElement>('image_tag_input'));
+    }
+  }
+}
+
+function setupTags() {
+  $$<HTMLDivElement>('.js-tag-block').forEach(el => {
+    setupTagsInput(el);
+    el.classList.remove('js-tag-block');
+  });
+}
+
+function updateTagSauce({ target, detail }: FetchcompleteEvent) {
+  if (target.matches('#tags-form')) {
+    const tagSauce = assertNotNull($<HTMLDivElement>('.js-tagsauce'));
+
+    detail.text().then(text => {
+      tagSauce.outerHTML = text;
+      setupTags();
+      initTagDropdown();
+    });
+  }
+}
+
+function setupTagEvents() {
+  setupTags();
+  document.addEventListener('fetchcomplete', updateTagSauce);
+  document.addEventListener('click', tagInputButtons);
+}
+
+export { setupTagEvents };

assets/types/ujs.ts

@@ -0,0 +1,11 @@
+export {};
+
+declare global {
+  interface FetchcompleteEvent extends CustomEvent<Response> {
+    target: HTMLElement,
+  }
+
+  interface GlobalEventHandlersEventMap {
+    fetchcomplete: FetchcompleteEvent;
+  }
+}