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

Convert tagsmisc and sources scripts to TypeScript

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,12 +12,13 @@ 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();
@@ -22,5 +26,3 @@ function imageSourcesCreator() {
     }
   });
 }
-
-export { imageSourcesCreator };

assets/js/tagsmisc.js

@@ -1,56 +0,0 @@
-/**
- * Tags Misc
- */
-
-import { $$ } from './utils/dom';
-import store from './utils/store';
-import { initTagDropdown } from './tags';
-import { setupTagsInput, reloadTagsInput } from './tagsinput';
-
-function tagInputButtons({target}) {
-  const actions = {
-    save(tagInput) {
-      store.set('tag_input', tagInput.value);
-    },
-    load(tagInput) {
-      // 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) {
-      tagInput.value = '';
-      reloadTagsInput(tagInput);
-    },
-  };
-
-  for (const action in actions) {
-    if (target.matches(`#tagsinput-${action}`)) actions[action](document.getElementById('image_tag_input'));
-  }
-}
-
-function setupTags() {
-  $$('.js-tag-block').forEach(el => {
-    setupTagsInput(el);
-    el.classList.remove('js-tag-block');
-  });
-}
-
-function updateTagSauce({target, detail}) {
-  const tagSauce = document.querySelector('.js-tagsauce');
-
-  if (target.matches('#tags-form')) {
-    detail.text().then(text => {
-      tagSauce.outerHTML = text;
-      setupTags();
-      initTagDropdown();
-    });
-  }
-}
-
-function setupTagEvents() {
-  setupTags();
-  document.addEventListener('fetchcomplete', updateTagSauce);
-  document.addEventListener('click', tagInputButtons);
-}
-
-export { setupTagEvents };

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;
+  }
+}