diff --git a/src/client/src/ts/guild/styles.ts b/src/client/src/ts/guild/styles.ts index ec94924..15d1e05 100644 --- a/src/client/src/ts/guild/styles.ts +++ b/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 = `
@@ -44,7 +37,6 @@ const emptyTableHtml: string = `
`; - const columnDefs: ConfigColumnDefs[] = [ // Select checkbox column { @@ -285,10 +277,20 @@ const tableOptions: IDataTableOptions = { } }; -const table: HSDataTable = new HSDataTable( - $("#table").get(0) as HTMLElement, - tableOptions -); +let table: HSDataTable; + +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() - : (table as any).dataTable.rows().deselect(); + ? dt.rows().select() + : dt.rows().deselect(); }); $("#deleteRowsBtn").on("click", async () => { @@ -332,23 +330,7 @@ $("#deleteRowsBtn").on("click", async () => { // #endregion - -// #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); -}); +// #region Table Paging Select const pageSelectOptions: ISelectOptions = { toggleTag: '', @@ -368,29 +350,47 @@ const pageSelectOptions: ISelectOptions = { dropdownVerticalFixedPlacement: null }; -const pageSizeSelect: HSSelect = new HSSelect( - $("#selectPageSize-js").get(0) as HTMLElement, - pageSelectOptions -); +window.addEventListener("preline:ready", () => { + const selectEl = $("#selectPageSize-js").get(0); + 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( - $("#editModal").get(0) as HTMLElement, - editModalOptions -); + id === undefined + ? clearEditModalData() + : 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: '', - optionTemplate: ` -
- - -
`, - 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; -const colourTextInput = $("#formColourInput") as JQuery; -const colourRandomBtn = $("#formColourRandomBtn") as JQuery; - -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: '', + optionTemplate: ` +
+ + +
`, + 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; +const colourTextInput = $("#formColourInput") as JQuery; +const colourRandomBtn = $("#formColourRandomBtn") as JQuery; + +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 \ No newline at end of file