Monorepo structure, remove Gulp, new build process (#2116)

preview/js/demo-theme.js

@@ -0,0 +1,28 @@
+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+
+const themeStorageKey = "tablerTheme"
+const defaultTheme = "light"
+let selectedTheme
+
+// https://stackoverflow.com/a/901144
+const params = new Proxy(new URLSearchParams(window.location.search), {
+	get: (searchParams, prop) => searchParams.get(prop),
+})
+
+if (!!params.theme) {
+	localStorage.setItem(themeStorageKey, params.theme)
+	selectedTheme = params.theme
+} else {
+	const storedTheme = localStorage.getItem(themeStorageKey)
+	selectedTheme = storedTheme ? storedTheme : defaultTheme
+}
+
+if (selectedTheme === 'dark') {
+	document.body.setAttribute("data-bs-theme", selectedTheme)
+} else {
+	document.body.removeAttribute("data-bs-theme")
+}

preview/js/demo.js

@@ -0,0 +1,83 @@
+// Setting items
+const items = {
+	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
+	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
+	"container-layout": {
+		localStorage: "tablerContainerLayout",
+		default: "boxed",
+	},
+}
+
+// Theme config
+const config = {}
+for (const [key, params] of Object.entries(items)) {
+	const lsParams = localStorage.getItem(params.localStorage)
+	config[key] = lsParams ? lsParams : params.default
+}
+
+// Parse url params
+const parseUrl = () => {
+	const search = window.location.search.substring(1)
+	const params = search.split("&")
+
+	for (let i = 0; i < params.length; i++) {
+		const arr = params[i].split("=")
+		const key = arr[0]
+		const value = arr[1]
+
+		if (!!items[key]) {
+			// Save to localStorage
+			localStorage.setItem(items[key].localStorage, value)
+
+			// Update local variables
+			config[key] = value
+		}
+	}
+}
+
+// Toggle form controls
+const toggleFormControls = (form) => {
+	for (const [key, params] of Object.entries(items)) {
+		const elem = form.querySelector(
+			`[name="settings-${key}"][value="${config[key]}"]`,
+		)
+
+		if (elem) {
+			elem.checked = true
+		}
+	}
+}
+
+// Submit form
+const submitForm = (form) => {
+	// Save data to localStorage
+	for (const [key, params] of Object.entries(items)) {
+		// Save to localStorage
+		const value = form.querySelector(`[name="settings-${key}"]:checked`).value
+		localStorage.setItem(params.localStorage, value)
+
+		// Update local variables
+		config[key] = value
+	}
+
+	window.dispatchEvent(new Event("resize"))
+
+	new bootstrap.Offcanvas(form).hide()
+}
+
+// Parse url
+parseUrl()
+
+// Elements
+const form = document.querySelector("#offcanvasSettings")
+
+// Toggle form controls
+if (form) {
+	form.addEventListener("submit", function (e) {
+		e.preventDefault()
+
+		submitForm(form)
+	})
+
+	toggleFormControls(form)
+}