Removed unused js [SLE-192]

samuelgfeller · Apr 3, 2024 · f182601 · f182601
1 parent 264d091
commit f182601
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 98 deletions.
diff --git a/public/assets/client/note/client-read-create-note.js b/public/assets/client/note/client-read-create-note.js
@@ -7,7 +7,9 @@ import {
     toggleReadOnlyAndBtnAboveNote
 } from "./client-read-note-event-listener-setup.js?v=0.4.0";
 import {handleFail, removeValidationErrorMessages} from "../../general/ajax/ajax-util/fail-handler.js?v=0.4.0";
-import {initAutoResizingTextareas} from "../../general/page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
+import {
+    initAutoResizingTextareaElements
+} from "../../general/page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
 
 let noteCreationHideCheckMarkTimeout = [];
 
@@ -60,7 +62,7 @@ export function addNewNoteTextarea() {
         // duplicate events like saving but this simply adds event listener to targets textarea
         addTextareaInputEventListener(textarea);
         // Make that newly created textarea resize automatically as well
-        initAutoResizingTextareas();
+        initAutoResizingTextareaElements();
 
         textarea.addEventListener('focusout', removeNewNoteTextareaIfEmpty);
         // Has to be after textarea event listener init

diff --git a/public/assets/client/note/client-read-note-loading.js b/public/assets/client/note/client-read-note-loading.js
@@ -5,7 +5,9 @@ import {
 } from "./client-read-note-loading-placeholder.js?v=0.4.0";
 import {fetchData} from "../../general/ajax/fetch-data.js?v=0.4.0";
 import {initNotesEventListeners} from "./client-read-note-event-listener-setup.js?v=0.4.0";
-import {initAutoResizingTextareas} from "../../general/page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
+import {
+    initAutoResizingTextareaElements
+} from "../../general/page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
 import {scrollToAnchor} from "../../general/page-behaviour/scroll-to-anchor.js?v=0.4.0";
 import {fetchTranslations} from "../../general/ajax/fetch-translation-data.js?v=0.4.0";
 import {__} from "../../general/general-js/functions.js?v=0.4.0";
@@ -39,7 +41,7 @@ export function fetchAndLoadClientNotes(queryParams = new URLSearchParams(), not
             // initAllButtonsAboveNotesEventListeners();
 
             // Manually init autoResizingTextareas to include the loaded notes as it's only done during page load and not afterwards
-            initAutoResizingTextareas();
+            initAutoResizingTextareaElements();
             scrollToAnchor();
         });
 }

diff --git a/public/assets/general/general-js/default.js b/public/assets/general/general-js/default.js
@@ -1,5 +1,5 @@
 import {displayServerSideFlashMessages} from "../page-component/flash-message/flash-message.js?v=0.4.0";
-import {initAutoResizingTextareas} from "../page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
+import {initAutoResizingTextareaElements} from "../page-component/textarea/auto-resizing-textarea.js?v=0.4.0";
 import {scrollToAnchor} from "../page-behaviour/scroll-to-anchor.js?v=0.4.0";
 import {countDownThrottleTimer} from "../../authentication/throttle-timer.js?v=0.4.0";
 
@@ -9,11 +9,14 @@ import {countDownThrottleTimer} from "../../authentication/throttle-timer.js?v=0
 // displayFlashMessage('error', 'This is an error flash message.');
 // DOMContentLoaded faster than load as it doesn't wait on all resources
 
+// "DOMContentLoaded" is fired when the initial HTML document has been completely loaded and parsed,
+// without waiting for stylesheets, images, etc. to finish loading
 window.addEventListener("DOMContentLoaded", function (event) {
-    /** Auto resize textareas */
-    initAutoResizingTextareas();
+    /** Auto resize textarea fields */
+    initAutoResizingTextareaElements();
 });
 
+// "load" is fired when the whole page has loaded, including all dependent resources such as stylesheets, images, etc.
 window.addEventListener("load", function (event) {
     /** Slide in server side flash messages */
     displayServerSideFlashMessages();

diff --git a/public/assets/general/page-component/textarea/auto-resizing-textarea.js b/public/assets/general/page-component/textarea/auto-resizing-textarea.js
@@ -1,20 +1,20 @@
 /**
- * Auto resize all given textareas
+ * Auto resize all given textarea elements with class name auto-resize-textarea
  * Source: https://stackoverflow.com/a/25621277/9013718
  * Known issue: https://stackoverflow.com/q/73475416/9013718
  */
-export function initAutoResizingTextareas() {
+export function initAutoResizingTextareaElements() {
     // Target all textarea fields that have class name auto-resize-textarea
-    let textareas = document.getElementsByClassName("auto-resize-textarea");
-    // Init observer to call resizeTextarea when the dimensions of the textareas change
+    let textareaElements = document.getElementsByClassName("auto-resize-textarea");
+    // Init observer to call resizeTextarea when the dimensions of the textareaElements change
     let observer = new ResizeObserver(entries => {
         for (let entry of entries) {
             // Call function to resize textarea with textarea element as "this" context
             resizeTextarea.call(entry.target);
         }
     });
-    // Loop through textareas and add event listeners as well as other needed css attributes
-    for (const textarea of textareas) {
+    // Loop through textareaElements and add event listeners as well as other needed css attributes
+    for (const textarea of textareaElements) {
         // Initially set height as otherwise the textarea is not high enough on load
         textarea.style.height = textarea.scrollHeight.toString();
         // Hide scrollbar
@@ -29,47 +29,6 @@ export function initAutoResizingTextareas() {
         observer.observe(textarea);
     }
 
-    function resizeTextareaNew() {
-        if (working) {
-            console.log('working');
-            return;
-        }
-        working = true;
-
-        // Textareas have default 2px padding and if not set it returns 0px
-        const style = getComputedStyle(this);
-        const paddingBottom = Number.parseFloat(style.getPropertyValue('padding-bottom'));
-        const paddingTop = Number.parseFloat(style.getPropertyValue('padding-top'));
-        const borderBottom = Number.parseFloat(style.getPropertyValue('border-bottom'));
-        const borderTop = Number.parseFloat(style.getPropertyValue('border-top'));
-        const adjust = borderBottom + borderTop;
-
-        // Reset textarea height to (supposedly) have correct scrollHeight afterwards
-        const scrollHeightBefore = this.scrollHeight;
-        const offsetHeightBefore = this.offsetHeight;
-        const styleHeightBefore = this.style.height;
-        console.log('before', scrollHeightBefore, offsetHeightBefore, styleHeightBefore);
-        this.style.height = "0px";
-
-        const scrollHeightAfter = this.scrollHeight;
-        const offsetHeightAfter = this.offsetHeight;
-        const styleHeightAfter = this.style.height;
-        console.log('after', scrollHeightAfter, offsetHeightAfter, styleHeightAfter);
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                working = false;
-            });
-            // Adapt height of textarea to new scrollHeight and padding
-            if (scrollHeightBefore > offsetHeightBefore) {
-                this.style.height = (scrollHeightBefore + adjust) + "px";
-            } else {
-                this.style.height = (scrollHeightAfter + adjust) + "px";
-            }
-            console.log(scrollHeightBefore > offsetHeightBefore, this.style.height);
-        });
-    }
-
     function resizeTextarea() {
         // Textareas have default 2px padding and if not set it returns 0px
         let padding = window.getComputedStyle(this).getPropertyValue('padding-bottom');
@@ -82,48 +41,4 @@ export function initAutoResizingTextareas() {
         // Adapt height of textarea to new scrollHeight and padding
         this.style.height = (this.scrollHeight + padding) + "px";
     }
-
-    var working = false;
-    function resizeTextareaNew2() {
-        if (working) {
-            console.log('working');
-            return;
-        }
-        working = true;
-
-        // Textareas have default 2px padding and if not set it returns 0px
-        const style = getComputedStyle(this);
-        const paddingBottom = Number.parseFloat(style.getPropertyValue('padding-bottom'));
-        const paddingTop = Number.parseFloat(style.getPropertyValue('padding-top'));
-        const borderBottom = Number.parseFloat(style.getPropertyValue('border-bottom'));
-        const borderTop = Number.parseFloat(style.getPropertyValue('border-top'));
-        const adjust = borderBottom + borderTop;
-        // console.log('Border bottom: '+borderBottom +'  Border top: '+borderTop+ '  padding bottom: '+paddingBottom);
-
-        // Reset textarea height to (supposedly) have correct scrollHeight afterwards
-        const scrollHeightBefore = this.scrollHeight;
-        const offsetHeightBefore = this.offsetHeight;
-        const styleHeightBefore = this.style.height;
-        console.log('before', scrollHeightBefore, offsetHeightBefore, styleHeightBefore);
-        this.style.height = "0px";
-
-        const scrollHeightAfter = this.scrollHeight;
-        const offsetHeightAfter = this.offsetHeight;
-        const styleHeightAfter = this.style.height;
-        console.log('after', scrollHeightAfter, offsetHeightAfter, styleHeightAfter);
-
-        // Adapt height of textarea to new scrollHeight and padding
-        if (scrollHeightBefore > offsetHeightBefore) {
-            this.style.height = (scrollHeightBefore + adjust) + "px";
-        } else {
-            this.style.height = (scrollHeightAfter + adjust) + "px";
-        }
-        console.log(scrollHeightBefore > offsetHeightBefore, this.style.height);
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                working = false;
-            });
-        });
-    }
 }