From f18260182de3be5a3158ba4dc518e0b75079002d Mon Sep 17 00:00:00 2001 From: samuelgfeller Date: Wed, 3 Apr 2024 17:29:46 +0200 Subject: [PATCH] Removed unused js [SLE-192] --- .../client/note/client-read-create-note.js | 6 +- .../client/note/client-read-note-loading.js | 6 +- public/assets/general/general-js/default.js | 9 +- .../textarea/auto-resizing-textarea.js | 97 ++----------------- 4 files changed, 20 insertions(+), 98 deletions(-) diff --git a/public/assets/client/note/client-read-create-note.js b/public/assets/client/note/client-read-create-note.js index e3eab5cd..77ad8628 100644 --- 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 index 49bc9e74..99785a70 100644 --- 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 index 14595108..ae507043 100644 --- 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 index fdf64623..6f5c3f2c 100644 --- 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; - }); - }); - } } \ No newline at end of file