refactor: styles page client-side code

src/client/src/ts/guild/styles.ts

@@ -1,23 +1,16 @@
-import $ from "jquery";
+import { formatTimestamp, genHexString } from "../main";
+import HSDropdown from "preline/dist/dropdown";
+import HSSelect, { ISelectOptions } from "preline/dist/select";
+import HSOverlay, { IOverlayOptions } from "preline/dist/overlay";
+import HSDataTable, { IDataTableOptions } from "preline/dist/datatable";
+import { Api, AjaxSettings, ConfigColumnDefs } from "datatables.net-dt";
 import "datatables.net-select-dt";
-import HSDropdown from "@preline/dropdown";
-import HSOverlay, { IOverlayOptions } from "@preline/overlay";
-import HSSelect, { ISelectOptions, ISingleOption } from "@preline/select";
-import HSDataTable, { IDataTableOptions } from "@preline/datatable";
-import DataTable, { Api, ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
-import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
-import { formatTimestamp, genHexString } from "../../../src/ts/main";
 import prisma from "../../../../../generated/prisma";
 
 declare let guildId: string;
 declare const textMutators: { [key: string]: string };
 
 // #region DataTable
-//
-
-// Fix dependency bugs with preline
-(window as any).DataTable = DataTable;
-(window as any).$hsDataTableCollection = [];
 
 const emptyTableHtml: string = `
     <div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
@@ -44,7 +37,6 @@ const emptyTableHtml: string = `
     </div>
 `;
 
-
 const columnDefs: ConfigColumnDefs[] = [
     // Select checkbox column
     {
@@ -285,10 +277,20 @@ const tableOptions: IDataTableOptions = {
     }
 };
 
-const table: HSDataTable = new HSDataTable(
+let table: HSDataTable;
-    $("#table").get(0) as HTMLElement,
+
-    tableOptions
+window.addEventListener("preline:ready", () => {
-);
+    const tableEl = $("#table").get(0);
+
+    if (HSDataTable.getInstance(tableEl, true)) return;
+
+    table = new HSDataTable(tableEl, tableOptions);
+
+    (table as any).dataTable
+        .on("select", onTableSelectChange)
+        .on("deselect", onTableSelectChange)
+        .on("draw", onTableSelectChange);
+});
 
 const onTableSelectChange = () => {
     const selectedRowsCount = (table as any).dataTable.rows({ selected: true }).count();
@@ -299,15 +301,11 @@ const onTableSelectChange = () => {
     selectedRowsCount === 0 ? $elem.hide() : $elem.show();
 };
 
-(table as any).dataTable
-    .on("select", onTableSelectChange)
-    .on("deselect", onTableSelectChange)
-    .on("draw", onTableSelectChange);
-
 $("#selectAllBox").on("change", function() {
+    const dt: Api = (table as any).dataTable;
     (this as HTMLInputElement).checked
-        ? (table as any).dataTable.rows().select()
+        ? dt.rows().select()
-        : (table as any).dataTable.rows().deselect();
+        : dt.rows().deselect();
 });
 
 $("#deleteRowsBtn").on("click", async () => {
@@ -332,23 +330,7 @@ $("#deleteRowsBtn").on("click", async () => {
 
 // #endregion
 
-
+// #region Table Paging Select
-// #region Page Size Select
-// https://preline.co/plugins/html/advanced-select.html
-
-(window as any).$hsSelectCollection = [];
-(window as any)["FloatingUIDOM"] = {
-    computePosition: computePosition,
-    autoUpdate: autoUpdate,
-    offset: offset
-};
-
-// Close on click.
-window.addEventListener('click', (evt) => {
-    const evtTarget = evt.target;
-
-    HSSelect.closeCurrentlyOpened(evtTarget as HTMLElement);
-});
 
 const pageSelectOptions: ISelectOptions = {
     toggleTag: '<button type="button" aria-expanded="false"></button>',
@@ -368,29 +350,47 @@ const pageSelectOptions: ISelectOptions = {
     dropdownVerticalFixedPlacement: null
 };
 
-const pageSizeSelect: HSSelect = new HSSelect(
+window.addEventListener("preline:ready", () => {
-    $("#selectPageSize-js").get(0) as HTMLElement,
+    const selectEl = $("#selectPageSize-js").get(0);
-    pageSelectOptions
+    if (!HSSelect.getInstance(selectEl, true)) {
-);
+        new HSSelect(selectEl, pageSelectOptions);
+    }
+});
 
 // #endregion
 
-
 // #region Edit Modal
 
-(window as any).$hsOverlayCollection = [];
+const closeEditModal = () => { editModal.close() };
 
-const editModalOptions: IOverlayOptions = {};
+const openEditModal = async (id: number | undefined) => {
+    $("#editForm").removeClass("submitted");
+    editModal.open();
 
-const editModal: HSOverlay = new HSOverlay(
+    id === undefined
-    $("#editModal").get(0) as HTMLElement,
+        ? clearEditModalData()
-    editModalOptions
+        : loadEditModalData(id);
-);
+};
 
 $(document).on("click", ".open-edit-modal-js", async event => {
     await openEditModal($(event.target).data("id"));
 });
 
+const editModalOptions: IOverlayOptions = {};
+
+let editModal: HSOverlay;
+
+window.addEventListener("preline:ready", () => {
+    const modalEl = $("#editModal").get(0);
+    if (!HSOverlay.getInstance(modalEl, true)) {
+        editModal = new HSOverlay(modalEl, editModalOptions);
+    }
+});
+
+// #endregion
+
+// #region Edit Form
+
 const clearEditModalData = () => {
     $(editModal.el).removeData("id");
 
@@ -426,93 +426,19 @@ const loadEditModalData = async (id: number) => {
     $("#formShowThumbnail").prop("checked", style.show_thumbnail);
     $("#formShowFooter").prop("checked", style.show_footer);
     $("#formShowTimestamp").prop("checked", style.show_timestamp);
-}
-
-const openEditModal = async (id: number | undefined) => {
-    $("#editForm").removeClass("submitted");
-    editModal.open();
-
-    id === undefined
-        ? clearEditModalData()
-        : loadEditModalData(id);
 };
 
-const closeEditModal = () => {
-    editModal.close();
-};
-
-const mutatorSelectOptions: ISelectOptions = {
-    toggleTag: '<button type="button" aria-expanded="false"><span data-title></span></button>',
-    optionTemplate: `
-        <div class="flex justify-between items-center w-full">
-            <span data-title></span>
-            <span class="hidden hs-selected:block">
-                <svg class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500" xmlns="http:.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-            </span>
-        </div>`,
-    toggleClasses: "cj-select-toggle select-input",
-    optionClasses: "cj-select-option",
-    dropdownClasses: "cj-select-dropdown",
-    wrapperClasses: "peer",
-    dropdownSpace: 10,
-    dropdownScope: "parent",
-    dropdownPlacement: "top",
-    dropdownVerticalFixedPlacement: null
-};
-
-const titleMutatorSelect = new HSSelect(
-    $("#formTitleMutator").get(0),
-    mutatorSelectOptions
-);
-
-// Add options to title mutator select
-titleMutatorSelect.addOption({ title: "None", val: "" });
-Object.entries(textMutators).forEach(([key, description]) => {
-    titleMutatorSelect.addOption({
-        title: description,
-        val: key
-    } as ISingleOption)
-});
-
-const descriptionMutatorSelect = new HSSelect(
-    $("#formDescriptionMutator").get(0),
-    mutatorSelectOptions
-);
-
-// Add options to description mutator select
-descriptionMutatorSelect.addOption({ title: "None", val: "" });
-Object.entries(textMutators).forEach(([key, description]) => {
-    descriptionMutatorSelect.addOption({
-        title: description,
-        val: key
-    } as ISingleOption)
-});
-
-const colourPicker = $("#formColour") as JQuery<HTMLInputElement>;
-const colourTextInput = $("#formColourInput") as JQuery<HTMLInputElement>;
-const colourRandomBtn = $("#formColourRandomBtn") as JQuery<HTMLButtonElement>;
-
-const updateColourInput = (value: string) => {
-    value = "#" + value.replace(/[^A-F0-9]/gi, '')
-        .toUpperCase()
-        .slice(0, 6)
-        .padEnd(6, "0");
-
-    colourPicker.val(value);
-    colourTextInput.val(value);
-};
-
-colourPicker.on("change", _ => updateColourInput(colourPicker.val()));
-colourTextInput.on("change", _ => updateColourInput(colourTextInput.val()));
-colourRandomBtn.on("click", _ => updateColourInput(genHexString(6)));
-
 $("#editForm").on("submit", async event => {
     event.preventDefault();
 
     const form = $(event.target).get(0) as HTMLFormElement;
     $(form).addClass("submitted");
 
-    if (!form.checkValidity()) return;
+    const validity = form.checkValidity();
+    if (!validity) {
+        console.debug(`Submit form invalid: ${validity}`);
+        return;
+    };
 
     let method = "post";
     const data = $(event.target).serializeArray();
@@ -539,4 +465,66 @@ $("#editForm").on("submit", async event => {
     });
 });
 
+const mutatorSelectOptions: ISelectOptions = {
+    toggleTag: '<button type="button" aria-expanded="false"><span data-title></span></button>',
+    optionTemplate: `
+        <div class="flex justify-between items-center w-full">
+            <span data-title></span>
+            <span class="hidden hs-selected:block">
+                <svg class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500" xmlns="http:.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+            </span>
+        </div>`,
+    toggleClasses: "cj-select-toggle select-input",
+    optionClasses: "cj-select-option",
+    dropdownClasses: "cj-select-dropdown",
+    wrapperClasses: "peer",
+    dropdownSpace: 10,
+    dropdownScope: "parent",
+    dropdownPlacement: "top",
+    dropdownVerticalFixedPlacement: null
+};
+
+let titleMutatorSelect: HSSelect;
+let descriptionMutatorSelect: HSSelect;
+
+window.addEventListener("preline:ready", () => {
+    const exists = (element: HTMLElement) => HSSelect.getInstance(element, true);
+
+    const titleEl = $("#formTitleMutator").get(0);
+    const descEl = $("#formDescriptionMutator").get(0);
+
+    if (exists(titleEl) || exists(descEl)) return;
+
+    titleMutatorSelect = new HSSelect(titleEl, mutatorSelectOptions);
+    titleMutatorSelect.addOption({ title: "None", val: "" });
+
+    descriptionMutatorSelect = new HSSelect(descEl, mutatorSelectOptions);
+    descriptionMutatorSelect.addOption({ title: "None", val: "" });
+
+    Object.entries(textMutators).forEach(([key, description]) => {
+        const option = {title: description, val: key};
+        titleMutatorSelect.addOption(option);
+        descriptionMutatorSelect.addOption(option);
+    });
+});
+
+const colourPicker = $("#formColour") as JQuery<HTMLInputElement>;
+const colourTextInput = $("#formColourInput") as JQuery<HTMLInputElement>;
+const colourRandomBtn = $("#formColourRandomBtn") as JQuery<HTMLButtonElement>;
+
+const updateColourInput = (value: string) => {
+    value = "#" + value.replace(/[^A-F0-9]/gi, '')
+        .toUpperCase()
+        .slice(0, 6)
+        .padEnd(6, "0");
+
+    colourPicker.val(value);
+    colourTextInput.val(value);
+};
+
+colourPicker.on("change", _ => updateColourInput(colourPicker.val()));
+colourTextInput.on("change", _ => updateColourInput(colourTextInput.val()));
+colourRandomBtn.on("click", _ => updateColourInput(genHexString(6)));
+
+
 // #endregion