|
| 1 | +/* globals Toaster, THEME */ |
| 2 | + |
| 3 | +/** |
| 4 | + * Gets a value indicating if start view transition is supported. |
| 5 | + * @return {boolean} true if supported. |
| 6 | + */ |
| 7 | +function supportTransition() { |
| 8 | + 'use strict'; |
| 9 | + return document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| 10 | +} |
| 11 | + |
| 12 | +/** |
| 13 | + * Gets the preferred theme. |
| 14 | + * @return {string} the preferred theme. |
| 15 | + */ |
| 16 | +function getPreferredTheme() { |
| 17 | + 'use strict'; |
| 18 | + return window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME.DARK : THEME.LIGHT; |
| 19 | +} |
| 20 | + |
| 21 | +/** |
| 22 | + * Handle theme input change. |
| 23 | + */ |
| 24 | +function initThemeInput() { |
| 25 | + 'use strict'; |
| 26 | + $('.dropdown-theme-entry').on('click', function (e) { |
| 27 | + e.preventDefault(); |
| 28 | + // get values |
| 29 | + const $this = $(this); |
| 30 | + const path = document.body.dataset.cookiePath || '/'; |
| 31 | + const oldTheme = window.Cookie.getValue(THEME.KEY, THEME.AUTO); |
| 32 | + let theme = $this.data('value'); |
| 33 | + |
| 34 | + // update cookie |
| 35 | + if (!theme || theme === THEME.AUTO) { |
| 36 | + theme = getPreferredTheme(); |
| 37 | + window.Cookie.clearValue(THEME.KEY, path); |
| 38 | + } else { |
| 39 | + window.Cookie.setValue(THEME.KEY, theme, path); |
| 40 | + } |
| 41 | + |
| 42 | + // same theme? |
| 43 | + if (oldTheme === theme) { |
| 44 | + return; |
| 45 | + } |
| 46 | + |
| 47 | + // apply theme |
| 48 | + const callback = () => { |
| 49 | + document.documentElement.setAttribute(THEME.ATTRIBUTE, theme); |
| 50 | + }; |
| 51 | + if (supportTransition()) { |
| 52 | + document.startViewTransition(callback); |
| 53 | + } else { |
| 54 | + callback(); |
| 55 | + } |
| 56 | + |
| 57 | + // update checked theme and icon |
| 58 | + $('.dropdown-theme-entry').removeClass('dropdown-item-checked-right'); |
| 59 | + $('.btn-theme-dropdown i').attr('class', $this.data('icon')); |
| 60 | + $this.addClass('dropdown-item-checked-right'); |
| 61 | + |
| 62 | + // update other theme switchers |
| 63 | + $('.theme-switcher:not(.dropdown-theme-dialog) .theme-text') |
| 64 | + .text($this.text()) |
| 65 | + $('.theme-switcher:not(.dropdown-theme-dialog) .theme-icon') |
| 66 | + .attr('class', $this.data('icon')); |
| 67 | + |
| 68 | + // show success message |
| 69 | + const title = $('.btn-theme-dropdown').data('title'); |
| 70 | + const message = $this.data('success'); |
| 71 | + Toaster.success(message, title); |
| 72 | + }); |
| 73 | +} |
| 74 | + |
| 75 | +/** |
| 76 | + * Handle theme changed event. |
| 77 | + */ |
| 78 | +function initThemeChanged() { |
| 79 | + 'use strict'; |
| 80 | + $('body').on(THEME.EVENT, '.theme-switcher', function (e, theme) { |
| 81 | + $('.dropdown-theme-entry').each(function () { |
| 82 | + const $this = $(this); |
| 83 | + if ($this.data('value') === theme) { |
| 84 | + $this.addClass('dropdown-item-checked-right'); |
| 85 | + $('.btn-theme-dropdown i').attr('class', $this.data('icon')); |
| 86 | + } else { |
| 87 | + $this.removeClass('dropdown-item-checked-right'); |
| 88 | + } |
| 89 | + }) |
| 90 | + }); |
| 91 | +} |
| 92 | + |
| 93 | +function initThemeButtons() { |
| 94 | + 'use strict'; |
| 95 | + initThemeInput(); |
| 96 | + initThemeChanged(); |
| 97 | +} |
0 commit comments