Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
codecalm
2022-08-31 21:45:02 +02:00
parent 459460de78 e738cc47bd
commit 1dc4fc16aa
5 changed files with 106 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
gulpfile.js
View File

@@ -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'))

25
src/js/demo-theme.js Normal file
View File

@@ -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}`);

17
src/js/demo.js
View File

@@ -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')

139
src/pages/_includes/ui/chart-heatmap.html
View File

@@ -8,77 +8,84 @@
{% capture script %}
{% assign colors = include.colors | default: 1 %}
<script>
var options = {
chart: {
height: {{ height | times: 16 }},
type: "heatmap",
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 %}],
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
series: [
{% for i in site.months-short limit: 12 %}
{% assign month-i = forloop.index %}
{ 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,
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
height: {{ height | times: 16 }},
type: "heatmap",
toolbar: {
show: false,
},
},
itemMargin: {
horizontal: 8,
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 %}
show: false,
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
{% endif %}
},
};
(new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render();
series: [
{% for i in site.months-short limit: 12 %}
{% assign month-i = forloop.index %}
{ 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 %}

1
src/pages/_layouts/base.html
View File

@@ -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 }}