They type now? They type now? They type now!

codidact · Oct 27, 2024 · 3fccea5 · 3fccea5
1 parent 3f4a956
commit 3fccea5
Show file tree

Hide file tree

Showing 23 changed files with 362 additions and 85 deletions.
diff --git a/.gitignore b/.gitignore
@@ -60,3 +60,5 @@ dump.rdb
 # Ignore IRB files
 .irbrc
 .irb_history
+
+node_modules
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -18,25 +18,28 @@
 document.addEventListener('DOMContentLoaded', async () => {
   QPixel.DOM.addSelectorListener('click', 'a.flag-dialog-link', (ev) => {
     ev.preventDefault();
-    const flagDialog = ev.target.closest('.post--body').querySelector('.js-flag-box');
+    const tgt = /** @type {HTMLElement} */(ev.target);
+    const flagDialog = tgt.closest('.post--body').querySelector('.js-flag-box');
     flagDialog.classList.toggle('is-active');
   });
 
   QPixel.DOM.addSelectorListener('click', '.close-dialog-link', (ev) => {
     ev.preventDefault();
-    const dialog = ev.target.closest('.post--body').querySelector('.js-close-box');
+    const tgt = /** @type {HTMLElement} */(ev.target);
+    const dialog = tgt.closest('.post--body').querySelector('.js-close-box');
     dialog.classList.toggle('is-active');
   });
 
   QPixel.DOM.addSelectorListener('click', '.show-all-flags-dialog-link', (ev) => {
     ev.preventDefault();
-    const dialog = ev.target.closest('.post--body').querySelector('.js-flags');
+    const tgt = /** @type {HTMLElement} */(ev.target);
+    const dialog = tgt.closest('.post--body').querySelector('.js-flags');
     dialog.classList.toggle('is-active');
   });
 
   QPixel.DOM.addSelectorListener('click', '.flag-resolve', async (ev) => {
     ev.preventDefault();
-    const tgt = ev.target;
+    const tgt = /** @type {HTMLElement} */(ev.target);
     const id = tgt.dataset.flagId;
     const data = {
       result: tgt.dataset.result,
@@ -52,7 +55,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     if (req.status === 200) {
       const res = await req.json();
       if (res.status === 'success') {
-        const flagContainer = tgt.parentNode.parentNode.parentNode;
+        const flagContainer = /** @type {HTMLElement} */(tgt.parentNode.parentNode.parentNode);
         QPixel.DOM.fadeOut(flagContainer, 200);
       }
       else {

diff --git a/app/assets/javascripts/caret.js b/app/assets/javascripts/caret.js
@@ -116,7 +116,7 @@
           } else if (height === targetHeight) {
             style.lineHeight = computed.lineHeight;
           } else {
-            style.lineHeight = 0;
+            style.lineHeight = '0';
           }
         } else {
           style.lineHeight = computed.height;

diff --git a/app/assets/javascripts/categories.js b/app/assets/javascripts/categories.js
@@ -10,7 +10,7 @@ $(() => {
         $caption.find('[data-state="absent"]').hide();
         $caption.find('[data-state="present"]').show();
 
-        $el.find('.js-tag-select').attr('data-tag-set', tagSetId).attr('disabled', false);
+        $el.find('.js-tag-select').attr('data-tag-set', tagSetId.toString()).attr('disabled', 'false');
       });
     }
     else {
@@ -20,7 +20,7 @@ $(() => {
         $caption.find('[data-state="absent"]').show();
         $caption.find('[data-state="present"]').hide();
 
-        $el.find('.js-tag-select').attr('data-tag-set', null).attr('disabled', true);
+        $el.find('.js-tag-select').attr('data-tag-set', null).attr('disabled', 'true');
       });
     }
   });
@@ -66,9 +66,9 @@ $(() => {
     const $tgt = $(ev.target);
     const $widget = $tgt.parents('.widget');
     const categoryId = $tgt.attr('data-category');
-    const postTypeId = parseInt($widget.find('.js-cpt-post-type').val(), 10) || null;
-    const upvoteRep = parseInt($widget.find('.js-cpt-upvote-rep').val(), 10) || 0;
-    const downvoteRep = parseInt($widget.find('.js-cpt-downvote-rep').val(), 10) || 0;
+    const postTypeId = parseInt($widget.find('.js-cpt-post-type').val()?.toString(), 10) || null;
+    const upvoteRep = parseInt($widget.find('.js-cpt-upvote-rep').val()?.toString(), 10) || 0;
+    const downvoteRep = parseInt($widget.find('.js-cpt-downvote-rep').val()?.toString(), 10) || 0;
 
     const resp = await fetch(`/categories/${categoryId}/edit/post-types`, {
       method: 'POST',

diff --git a/app/assets/javascripts/character_count.js b/app/assets/javascripts/character_count.js
@@ -8,6 +8,7 @@ $(() => {
 
   /**
    * Sets the icon to show before the counter, if any
+   * @param {JQuery} el
    * @param {CounterIcon} icon name of the icon to show
    */
   const setCounterIcon = (el, icon) => {
@@ -36,6 +37,7 @@ $(() => {
 
   /**
    * Sets the input's validation state
+   * @param {JQuery} el
    * @param {InputValidationState} state the state to set
    */
   const setInputValidationState = (el, state) => {
@@ -45,11 +47,12 @@ $(() => {
 
   /**
    * Sets the submit button's disabled state
+   * @param {JQuery} el
    * @param {SubmitButtonDisabledState} state the state to set
    */
   const setSubmitButtonDisabledState = (el, state) => {
     const isDisabled = state === 'disabled';
-    el.attr('disabled', isDisabled).toggleClass('is-muted', isDisabled);
+    el.attr('disabled', isDisabled.toString()).toggleClass('is-muted', isDisabled);
   };
 
   $(document).on('keyup change paste', '[data-character-count]', (ev) => {

diff --git a/app/assets/javascripts/closure.js b/app/assets/javascripts/closure.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   QPixel.DOM.addSelectorListener('click', '.js-close-question', async (ev) => {
     ev.preventDefault();
 
-    const self = ev.target;
+    const self = /** @type {HTMLElement} */(ev.target);
     const activeRadio = self.closest('.js-close-box').querySelector("input[type='radio'][name='close-reason']:checked");
 
     if (!activeRadio) {
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         location.reload();
       }
       else {
-        QPixel.createNotification('danger', `<strong>Failed:</strong> ${response.message}`);
+        QPixel.createNotification('danger', `<strong>Failed:</strong> ${res.message}`);
       }
     }
     else {

diff --git a/app/assets/javascripts/donations.js b/app/assets/javascripts/donations.js
@@ -35,8 +35,8 @@ $(() => {
 
   $('.js-dc-amount').on('change', (ev) => {
     const $tgt = $(ev.target);
-    const amount = parseFloat($tgt.val() || '') || 1;
-    const currency = $('.js-dc-currency').val();
+    const amount = parseFloat($tgt.val()?.toString() || '') || 1;
+    const currency = $('.js-dc-currency').val()?.toString();
     const formatter = new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: currency
@@ -51,7 +51,7 @@ $(() => {
     }
 
     const amountInput = $tgt.find('input[name="amount"]');
-    const amount = amountInput.val();
+    const amount = amountInput.val()?.toString();
 
     if (amount === '') {
       failValidation(amountInput, 'Please enter an amount');

diff --git a/app/assets/javascripts/filters.js b/app/assets/javascripts/filters.js
@@ -5,14 +5,14 @@ $(() => {
     const $formFilters = $form.find('.form--filter');
     const $saveButton = $form.find('.filter-save');
     const $isDefaultCheckbox = $form.find('.filter-is-default');
-    const categoryId = $isDefaultCheckbox.val();
+    const categoryId = $isDefaultCheckbox.val()?.toString();
     let defaultFilter = await QPixel.defaultFilter(categoryId);
     const $deleteButton = $form.find('.filter-delete');
 
     // Enables/Disables Save & Delete buttons programatically
     async function computeEnables() {
       const filters = await QPixel.filters();
-      const filterName = $select.val();
+      const filterName = $select.val()?.toString();
 
       // Nothing set
       if (!filterName) {
@@ -112,13 +112,13 @@ $(() => {
     async function saveFilter() {
       if (!$form[0].reportValidity()) { return; }
 
-      const filter = {};
+      const filter = /** @type {Filter} */({});
 
       for (const el of $formFilters) {
         filter[el.dataset.name] = $(el).val();
       }
 
-      await QPixel.setFilter($select.val(), filter, categoryId, $isDefaultCheckbox.prop('checked'));
+      await QPixel.setFilter($select.val()?.toString(), filter, categoryId, $isDefaultCheckbox.prop('checked'));
       defaultFilter = await QPixel.defaultFilter(categoryId);
 
       // Reinitialize to get new options
@@ -136,7 +136,7 @@ $(() => {
 
     $deleteButton?.on('click', async (_evt) => {
       if (confirm(`Are you sure you want to delete ${$select.val()}?`)) {
-        await QPixel.deleteFilter($select.val());
+        await QPixel.deleteFilter($select.val()?.toString());
         // Reinitialize to get new options
         await initializeSelect();
         clear();

diff --git a/app/assets/javascripts/flags.js b/app/assets/javascripts/flags.js
@@ -8,7 +8,7 @@ $(() => {
     let reason = -1;
     if (!isCommentFlag) {
       activeRadio = self.parents('.js-flag-box').find("input[type='radio'][name='flag-reason']:checked");
-      reason = parseInt(activeRadio.val(), 10) || null;
+      reason = parseInt(activeRadio.val()?.toString(), 10) || null;
       requiresDetails = activeRadio.attr('data-requires-details') === 'true';
 
       if (reason === null) {

diff --git a/app/assets/javascripts/keyboard_tools.js b/app/assets/javascripts/keyboard_tools.js
@@ -23,6 +23,9 @@ $(() => {
       is_mod: !!$('.header--item[href="/mod/flags"]').length,
       categories: function () {
         const category_elements = $("a.category-header--tab");
+        /**
+         * @type {Record<string, string>}
+         */
         const return_obj = {};
         category_elements.each(function () {
           return_obj[this.innerText] = this.getAttribute('href');
@@ -48,7 +51,7 @@ $(() => {
           _CodidactKeyboard.selectedItem.focus();
 
           _CodidactKeyboard.selectedItemData = {
-            type: _CodidactKeyboard.selectedItem.getAttribute("data-ckb-item-type"),
+            type: /** @type {SelectedItemType} */(_CodidactKeyboard.selectedItem.getAttribute("data-ckb-item-type")),
             post_id: _CodidactKeyboard.selectedItem.getAttribute("data-ckb-post-id")
           };
         }
@@ -79,7 +82,7 @@ $(() => {
 
     /**
      * Checks common modifier states on a given keyboard event
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      * @returns {boolean}
      */
     const getModifierState = (e) => {
@@ -88,7 +91,7 @@ $(() => {
 
     /**
      * Handles the "home" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function homeMenu(e) {
       const isHelp = e.key === "?";
@@ -177,7 +180,7 @@ $(() => {
 
     /**
      * Handles "goto" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function gotoMenu(e) {
       if (getModifierState(e)) {
@@ -237,7 +240,7 @@ $(() => {
 
     /**
      * Handles the "goto/category" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function categoryMenu(e) {
       if (getModifierState(e)) {
@@ -256,7 +259,7 @@ $(() => {
 
     /**
      * Handles the "goto/category-tags" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function categoryTagsMenu(e) {
       if (getModifierState(e)) {
@@ -274,7 +277,7 @@ $(() => {
 
     /**
      * Handles the "goto/category-edits" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function categorySuggestedEditsMenu(e) {
       if (getModifierState(e)) {
@@ -292,7 +295,7 @@ $(() => {
 
     /**
      * Handles the "tools" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function toolsMenu(e) {
       if (getModifierState(e)) {
@@ -337,7 +340,7 @@ $(() => {
 
     /**
      * Handles the "tools/vote" keyboard state
-     * @param {KeyboardEvent} e
+     * @param {JQuery.KeyboardEventBase} e
      */
     function voteMenu(e) {
       if (getModifierState(e)) {

diff --git a/app/assets/javascripts/posts.js b/app/assets/javascripts/posts.js
@@ -49,7 +49,7 @@ $(() => {
     if (files.length > 0 && files[0].size >= 2000000) {
       $tgt.find('.js-max-size').addClass('has-color-red-700 error-shake');
       const postField = $('.js-post-field');
-      postField.val(postField.val().replace(placeholder, ''));
+      postField.val(postField.val()?.toString().replace(placeholder, ''));
       setTimeout(() => {
         $tgt.find('.js-max-size').removeClass('error-shake');
       }, 1000);
@@ -77,7 +77,7 @@ $(() => {
     $tgt[0].reset();
 
     const $postField = $('.js-post-field');
-    const postText = $postField.val();
+    const postText = $postField.val()?.toString();
     $postField.val(postText.replace(placeholder, `![Image_alt_text](${data.link})`));
     $tgt.parents('.modal').removeClass('is-active');
   });
@@ -88,7 +88,7 @@ $(() => {
     const error = data['error'];
     QPixel.createNotification('danger', error);
     $tgt.parents('.modal').removeClass('is-active');
-    $postField.val($postField.val().replace(placeholder, ''));
+    $postField.val($postField.val()?.toString().replace(placeholder, ''));
   });
 
   $('.js-category-select').select2({
@@ -157,21 +157,21 @@ $(() => {
     const $commentField = $form.find('#edit_comment');
     const $tagNameField = $form.find('#tag_name');
 
-    const bodyText = $bodyField.val();
-    const commentText = $commentField.val();
-    const excerptText = $excerptField.val();
-    const license = $licenseField.val();
+    const bodyText = $bodyField.val()?.toString();
+    const commentText = $commentField.val()?.toString();
+    const excerptText = $excerptField.val()?.toString();
+    const license = $licenseField.val()?.toString();
     const tags = $tagsField.val();
-    const titleText = $titleField.val();
-    const tagName = $tagNameField.val();
+    const titleText = $titleField.val()?.toString();
+    const tagName = $tagNameField.val()?.toString();
 
     /** @type {PostDraft} */
     const draft = {
       body: bodyText,
       comment: commentText,
       excerpt: excerptText,
       license: license,
-      tags: tags,
+      tags: Array.isArray(tags) ? tags: [],
       tag_name: tagName,
       title: titleText,
     };
@@ -319,7 +319,7 @@ $(() => {
 
     // Validation
     if (!isValidated) {
-      const text = $(field).val();
+      const text = $(field).val()?.toString();
       const validated = QPixel.validatePost(text);
       if (validated[0] === true) {
         $tgt.attr('data-validated', 'true');
@@ -355,7 +355,7 @@ $(() => {
       }
 
       setTimeout(() => {
-        $tgt.find('input[type="submit"]').attr('disabled', false);
+        $tgt.find('input[type="submit"]').attr('disabled', 'false');
       }, 1000);
     }
   });
@@ -405,7 +405,7 @@ $(() => {
 
     const $input = $(`#permalink-${postId}-${linkType}`);
 
-    const url = $input.val();
+    const url = $input.val()?.toString();
 
     if (!url) {
       return;

diff --git a/app/assets/javascripts/preferences.js b/app/assets/javascripts/preferences.js
@@ -13,7 +13,7 @@ $(() => {
     await QPixel.setPreference(prefName, value, community);
   });
 
-  $('.item-list--item').find('.badge.is-tag').each(async (i, e) => {
+  $('.item-list--item').find('.badge.is-tag').each(async (_i, e) => {
     const prefValue = await QPixel.preference('favorite_tags', true);
     if (!prefValue) {
       return;

diff --git a/app/assets/javascripts/privileges.js b/app/assets/javascripts/privileges.js
@@ -29,7 +29,7 @@ $(() => {
     const type = $input.data('type');
 
     // incorrect input values will cause rawValue to be NaN
-    const rawValue = parseFloat($input.val())
+    const rawValue = parseFloat($input.val()?.toString())
 
     const value = Number.isNaN(rawValue) ? null : rawValue;