Merge branch 'main' of https://github.com/tabler/tabler into dev

gulpfile.js

@@ -285,6 +285,10 @@ gulp.task('js-demo', () => {
 	return compileJs('demo')
 })
 
+gulp.task('js-demo-theme', () => {
+	 return compileJs('demo-theme')
+})
+
 /**
  * Compile JS module files to dist directory
  */
@@ -416,7 +420,7 @@ gulp.task('build-critical', (cb) => {
  */
 gulp.task('watch', (cb) => {
 	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
-	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', 'js-demo'))
+	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', gulp.parallel('js-demo', 'js-demo-theme')))
 	cb()
 })
 
@@ -516,8 +520,8 @@ gulp.task('add-banner', () => {
 
 gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
 
-gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
+gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
 
-gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
+gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
 gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
 gulp.task('build', gulp.series('build-core', 'build-demo'))

src/js/demo-theme.js

@@ -0,0 +1,25 @@
+/**
+ * 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
+}
+
+document.body.classList.remove('theme-dark', 'theme-light');
+document.body.classList.add(`theme-${selectedTheme}`);

src/js/demo.js

@@ -1,6 +1,5 @@
 // Setting items
 const items = {
-	'theme': { localStorage: 'tablerTheme', default: 'light' },
 	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
 	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
 	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
@@ -44,16 +43,6 @@ const toggleFormControls = (form) => {
 	}
 }
 
-// Update body classes
-const updateBodyClasses = () => {
-	document.body.classList.remove('theme-dark', 'theme-light');
-	document.body.classList.add(`theme-${config.theme}`);
-
-	// for (const [key, params] of Object.entries(items)) {
-	// 	document.body.setAttribute(`data-${key}`, config[key]);
-	// }
-}
-
 // Submit form
 const submitForm = (form) => {
 	// Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	// Update body classes
-	updateBodyClasses();
-
 	window.dispatchEvent(new Event('resize'));
 
 	(new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
 // Parse url
 parseUrl()
 
-// Update body classes
-updateBodyClasses();
-
 // Elements
 const form = document.querySelector('#offcanvasSettings')
 

src/pages/_includes/ui/chart-heatmap.html

@@ -8,77 +8,84 @@
 {% capture script %}
 {% assign colors = include.colors | default: 1 %}
 <script>
-	var options = {
+	 // @formatter:off
-		chart: {
+	 document.addEventListener("DOMContentLoaded", function () {
-			height: {{ height | times: 16 }},
+		{% if jekyll.environment == 'development' %}
-			type: "heatmap",
+		window.tabler_chart = window.tabler_chart || {};
-			toolbar: {
-				show: false,
-			},
-		},
-		dataLabels: {
-			enabled: {% if include.labels %}true{% else %}false{% endif %}
-		},
-		{% if include.scale %}
-		plotOptions: {
-			heatmap: {
-				enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
-				colorScale: {
-					ranges: [{
-						from: 0,
-						to: 20,
-						name: "Low",
-						color: "{{ "green" | tabler_color }}"
-					}, {
-						from: 21,
-						to: 50,
-						name: "Medium",
-						color: "{{ "blue" | tabler_color }}"
-					}, {
-						from: 51,
-						to: 75,
-						name: "High",
-						color: "{{ "yellow" | tabler_color }}"
-					}, {
-						from: 76,
-						to: 100,
-						name: "Extreme",
-						color: "{{ "red" | tabler_color }}"
-					}]
-				}
-			}
-		},
-		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
 		{% endif %}
-		series: [
+
-		{% for i in site.months-short limit: 12 %}
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
-			{% assign month-i = forloop.index %}
+			chart: {
-			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },{% endfor %}
+				height: {{ height | times: 16 }},
-		],
+				type: "heatmap",
-		xaxis: {
+				toolbar: {
-			type: "category"
+					show: false,
-		},
+				},
-		legend: {
-			{% if include.legend %}
-			show: true,
-			position: 'bottom',
-			offsetY: 8,
-			markers: {
-				width: 10,
-				height: 10,
-				radius: 100,
 			},
-			itemMargin: {
+			dataLabels: {
-				horizontal: 8,
+				enabled: {% if include.labels %}true{% else %}false{% endif %}
+			},
+			{% if include.scale %}
+			plotOptions: {
+				heatmap: {
+					enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
+					colorScale: {
+						ranges: [{
+							from: 0,
+							to: 20,
+							name: "Low",
+							color: "{{ "green" | tabler_color }}"
+						}, {
+							from: 21,
+							to: 50,
+							name: "Medium",
+							color: "{{ "blue" | tabler_color }}"
+						}, {
+							from: 51,
+							to: 75,
+							name: "High",
+							color: "{{ "yellow" | tabler_color }}"
+						}, {
+							from: 76,
+							to: 100,
+							name: "Extreme",
+							color: "{{ "red" | tabler_color }}"
+						}]
+					}
+	 			}
 			},
 			{% else %}
-			show: false,
+			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
 			{% endif %}
-		},
+			series: [
-	};
+				{% for i in site.months-short limit: 12 %}
-
+				{% assign month-i = forloop.index %}
-	(new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render();
+		  		{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
+				{% endfor %}
+			],
+			xaxis: {
+				type: "category"
+			},
+			legend: {
+				{% if include.legend %}
+				show: true,
+				position: 'bottom',
+				offsetY: 8,
+				markers: {
+					width: 10,
+					height: 10,
+					radius: 100,
+				},
+				itemMargin: {
+					horizontal: 8,
+				},
+				{% else %}
+				show: false,
+				{% endif %}
+			},
+		})).render();
+	 });
+	 // @formatter:on
 </script>
 {% endcapture %}
 

src/pages/_layouts/base.html

@@ -43,6 +43,7 @@
 
 {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
 <body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
+<script src="{{ site.base }}/dist/js/demo-theme{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}"></script>
 
 	{{ content }}