diff options
Diffstat (limited to 'src/utils/plugins/prism-color-scheme.js')
| -rw-r--r-- | src/utils/plugins/prism-color-scheme.js | 246 |
1 files changed, 0 insertions, 246 deletions
diff --git a/src/utils/plugins/prism-color-scheme.js b/src/utils/plugins/prism-color-scheme.js deleted file mode 100644 index 2632dd3..0000000 --- a/src/utils/plugins/prism-color-scheme.js +++ /dev/null @@ -1,246 +0,0 @@ -(function () { - if (typeof Prism === 'undefined' || typeof document === 'undefined') { - return; - } - - if (!Prism.plugins.toolbar) { - console.warn('Color scheme plugin loaded before Toolbar plugin.'); - - return; - } - - /** - * - * @typedef {"dark" | "light" | "system"} Theme - * @typedef {Record<"current", Theme> & Record<"dark" | "light", string>} Settings - */ - - var storage = { - /** - * Get a deserialized value from local storage. - * - * @param {string} key - The local storage key. - * @returns {string | undefined} The value of the given key. - */ - get: function (key) { - var serializedItem = localStorage.getItem(key); - return serializedItem ? JSON.parse(serializedItem) : undefined; - }, - /** - * Set or update a local storage key with a new serialized value. - * - * @param {string} key - The local storage key. - * @param {string} value - The value of the given key. - */ - set: function (key, value) { - var serializedValue = JSON.stringify(value); - localStorage.setItem(key, serializedValue); - }, - }; - - /** - * Check if user has set its color scheme preference. - * - * @returns {boolean} True if user prefers dark color scheme. - */ - function prefersDarkScheme() { - return ( - window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches - ); - } - - /** - * Get the theme that matches the system theme. - * - * @returns {Theme} The theme to use. - */ - function getThemeFromSystem() { - return prefersDarkScheme() ? 'dark' : 'light'; - } - - /** - * Check if the provided string is a valid theme. - * - * @param {string} theme - A theme to check. - * @returns {boolean} True if it is a valid theme. - */ - function isValidTheme(theme) { - return theme === 'dark' || theme === 'light' || theme === 'system'; - } - - /** - * Set the default theme depending on user preferences. - * - * @returns {Theme} The default theme. - */ - function setDefaultTheme() { - var theme = storage.get('prismjs-color-scheme'); - - return theme && isValidTheme(theme) ? theme : 'system'; - } - - /** - * Traverses up the DOM tree to find data attributes that override the - * default plugin settings. - * - * @param {Element} startElement - An element to start from. - * @returns {Settings} The plugin settings. - */ - function getSettings(startElement) { - /** @type Settings */ - var settings = { - current: setDefaultTheme(), - dark: 'Toggle Dark Theme', - light: 'Toggle Light Theme', - }; - var prefix = 'data-prismjs-color-scheme-'; - - for (var key in settings) { - var attr = prefix + key; - var element = startElement; - - while (element && !element.hasAttribute(attr)) { - element = element.parentElement; - } - - if (element) { - settings[key] = element.getAttribute(attr); - } - } - - return settings; - } - - /** - * Retrieve the new theme depending on current theme value. - * - * @param {Theme} currentTheme - The current theme. - * @returns {Theme} The new theme. - */ - function getNewTheme(currentTheme) { - switch (currentTheme) { - case 'light': - return 'dark'; - case 'dark': - return 'light'; - case 'system': - default: - return getNewTheme(getThemeFromSystem()); - } - } - - /** - * Get the button content depending on current theme. - * - * @param {Theme} theme - The current theme. - * @param {Settings} settings - The plugin settings. - * @returns {string} The button text. - */ - function getButtonContent(theme, settings) { - return theme === 'dark' ? settings['light'] : settings['dark']; - } - - /** - * Update the button text depending on the current theme. - * - * @param {HTMLButtonElement} button - The color scheme button. - * @param {Settings} settings - The plugin settings. - */ - function updateButtonText(button, settings) { - var theme = - settings['current'] === 'system' - ? getThemeFromSystem() - : settings['current']; - - button.textContent = getButtonContent(theme, settings); - } - - /** - * Update pre data-prismjs-color-scheme attribute. - * - * @param {HTMLPreElement} pre - The pre element wrapping the code. - * @param {Theme} theme - The current theme. - */ - function updatePreAttribute(pre, theme) { - pre.setAttribute('data-prismjs-color-scheme-current', theme); - } - - /** - * Update pre attribute for all code blocks. - * - * @param {Theme} theme - The new theme. - */ - function switchTheme(theme) { - var allPre = document.querySelectorAll( - 'pre[data-prismjs-color-scheme-current]' - ); - allPre.forEach((pre) => { - updatePreAttribute(pre, theme); - }); - } - - /** - * Set current theme on pre attribute change. - * - * @param {HTMLPreElement} pre - The pre element wrapping the code. - * @param {Settings} settings - The plugin settings. - */ - function listenAttributeChange(pre, settings) { - var observer = new MutationObserver(function (mutations) { - mutations.forEach((record) => { - var mutatedPre = record.target; - var button = mutatedPre.parentElement.querySelector( - '.prism-color-scheme-button' - ); - var newTheme = mutatedPre.getAttribute( - 'data-prismjs-color-scheme-current' - ); - settings['current'] = newTheme; - updateButtonText(button, settings); - }); - }); - observer.observe(pre, { - attributes: true, - attributeFilter: ['data-prismjs-color-scheme-current'], - }); - } - - /** - * Create a color scheme button. - * - * @param {Object<string, any>} env - The environment variables of the hook. - * @returns {HTMLButtonElement} The color scheme button. - */ - function getColorSchemeButton(env) { - var element = env.element; - var pre = element.parentElement; - var settings = getSettings(element); - var themeButton = document.createElement('button'); - themeButton.className = 'prism-color-scheme-button'; - themeButton.setAttribute('type', 'button'); - updateButtonText(themeButton, settings); - updatePreAttribute(pre, settings['current']); - listenAttributeChange(pre, settings); - - themeButton.addEventListener('click', () => { - var newTheme = getNewTheme(settings['current']); - switchTheme(newTheme); - storage.set('prismjs-color-scheme', newTheme); - }); - - window.addEventListener('storage', (e) => { - if (e.key === 'prismjs-color-scheme') { - var newTheme = JSON.parse(e.newValue); - if (isValidTheme(newTheme)) updatePreAttribute(pre, newTheme); - } - }); - - return themeButton; - } - - /** - * Register a new button in Prism toolbar plugin. - */ - Prism.plugins.toolbar.registerButton('color-scheme', getColorSchemeButton); -})(); |
