From e4a0f68ba38f36e0ecb1d39c220001e744a5109a Mon Sep 17 00:00:00 2001 From: Mike Alhayek Date: Fri, 28 Jun 2024 14:54:39 -0700 Subject: [PATCH 1/6] Fix theme manager script --- .../OrchardCore.Themes/Assets.json | 25 +++++- .../js/{theme-manager.js => constants.js} | 0 .../Assets/js/theme-loader.js} | 2 - .../Assets/js/theme-toggler.js} | 0 .../ResourceManagementOptionsConfiguration.cs | 30 ++++--- .../wwwroot/Scripts/theme-head.js | 60 ++++++++++++++ .../wwwroot/Scripts/theme-head.min.js | 1 + .../wwwroot/Scripts/theme-manager.js | 81 ++++++++++--------- .../wwwroot/Scripts/theme-manager.min.js | 2 +- .../wwwroot/Scripts/theme-toggler.js | 50 ++++++++++++ .../wwwroot/Scripts/theme-toggler.min.js | 1 + src/OrchardCore.Themes/TheAdmin/Assets.json | 11 +-- src/OrchardCore.Themes/TheAdmin/Manifest.cs | 9 ++- .../ResourceManagementOptionsConfiguration.cs | 10 +-- .../TheAdmin/wwwroot/js/TheAdmin-main.js | 14 ++++ .../TheAdmin/wwwroot/js/TheAdmin-main.min.js | 2 +- src/OrchardCore.Themes/TheTheme/Manifest.cs | 10 ++- .../TheTheme/Views/Layout.cshtml | 3 +- 18 files changed, 238 insertions(+), 73 deletions(-) rename src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/{theme-manager.js => constants.js} (100%) rename src/{OrchardCore.Themes/TheAdmin/Assets/js/header/theme/themeLoader.js => OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js} (79%) rename src/{OrchardCore.Themes/TheAdmin/Assets/js/header/theme/toggleTheme.js => OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-toggler.js} (100%) create mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js create mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js create mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.js create mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json index 3c15ac19e02..3d8815acf75 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json +++ b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json @@ -7,8 +7,31 @@ }, { "inputs": [ - "Assets/js/theme-manager.js" + "Assets/js/constants.js", + "Assets/js/theme-loader.js" + ], + "watch": [ + "Assets/js/constants.js", + "Assets/js/theme-loader.js" + ], + "output": "wwwroot/Scripts/theme-head.js" + }, + { + "inputs": [ + "Assets/js/theme-toggler.js" + ], + "watch": [ + "Assets/js/theme-toggler.js" ], "output": "wwwroot/Scripts/theme-manager.js" + }, + { + "inputs": [ + "Assets/js/theme-toggler.js" + ], + "watch": [ + "Assets/js/theme-toggler.js" + ], + "output": "wwwroot/Scripts/theme-toggler.js" } ] diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-manager.js b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js similarity index 100% rename from src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-manager.js rename to src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/themeLoader.js b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js similarity index 79% rename from src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/themeLoader.js rename to src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js index f384efca94a..fa28782a978 100644 --- a/src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/themeLoader.js +++ b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js @@ -1,5 +1,3 @@ -// We add some classes to the body tag to restore the sidebar to the state is was before reload. -// That state was saved to localstorage by userPreferencesPersistor.js // We need to apply the classes BEFORE the page is rendered. // That is why we use a MutationObserver instead of document.Ready(). const themeObserver = new MutationObserver(function (mutations) { diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/toggleTheme.js b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-toggler.js similarity index 100% rename from src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/toggleTheme.js rename to src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-toggler.js diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs index b40f6305d00..5e9590aea33 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs @@ -1,28 +1,36 @@ using Microsoft.Extensions.Options; -using OrchardCore.Environment.Shell; using OrchardCore.ResourceManagement; namespace OrchardCore.Themes; public sealed class ResourceManagementOptionsConfiguration : IConfigureOptions { - private readonly ShellSettings _shellSettings; + private static readonly ResourceManifest _manifest; - public ResourceManagementOptionsConfiguration(ShellSettings shellSettings) + static ResourceManagementOptionsConfiguration() { - _shellSettings = shellSettings; - } + _manifest = new ResourceManifest(); - public void Configure(ResourceManagementOptions options) - { - var manifest = new ResourceManifest(); + _manifest + .DefineScript("theme-head") + .SetUrl("~/OrchardCore.Themes/Scripts/theme-head.min.js", "~/OrchardCore.Themes/Scripts/theme-head.js") + .SetVersion("1.0.0"); - manifest + _manifest .DefineScript("theme-manager") - .SetAttribute("data-tenant-name", _shellSettings.Name) .SetUrl("~/OrchardCore.Themes/Scripts/theme-manager.min.js", "~/OrchardCore.Themes/Scripts/theme-manager.js") + .SetDependencies("theme-head") .SetVersion("1.0.0"); - options.ResourceManifests.Add(manifest); + _manifest + .DefineScript("theme-toggler") + .SetUrl("~/OrchardCore.Themes/Scripts/theme-toggler.min.js", "~/OrchardCore.Themes/Scripts/theme-toggler.js") + .SetDependencies("theme-head") + .SetVersion("1.0.0"); + } + + public void Configure(ResourceManagementOptions options) + { + options.ResourceManifests.Add(_manifest); } } diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js new file mode 100644 index 00000000000..07c5035846d --- /dev/null +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js @@ -0,0 +1,60 @@ +/* +** NOTE: This file is generated by Gulp and should not be edited directly! +** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp. +*/ + +var darkThemeName = 'dark'; +var lightThemeName = 'light'; +var tenantName = document.currentScript.dataset.tenantName; +var themeStoreKeySuffix = 'theme'; +var getTenantName = function getTenantName() { + return tenantName || document.documentElement.getAttribute('data-tenant') || 'default'; +}; +var getStoreKeySuffix = function getStoreKeySuffix() { + return themeStoreKeySuffix || 'theme'; +}; +var getStoreKey = function getStoreKey() { + return "".concat(getTenantName(), "-").concat(getStoreKeySuffix()); +}; +var getStoredTheme = function getStoredTheme() { + return localStorage.getItem(getStoreKey()); +}; +var setStoredTheme = function setStoredTheme(theme) { + return localStorage.setItem(getStoreKey(), theme); +}; +var isDarkMedia = function isDarkMedia() { + return window.matchMedia('(prefers-color-scheme: dark)').matches; +}; +var getPreferredTheme = function getPreferredTheme() { + var storedTheme = getStoredTheme(); + if (storedTheme) { + return storedTheme; + } + return isDarkMedia() ? darkThemeName : lightThemeName; +}; +var setTheme = function setTheme(theme) { + if (theme === 'auto') { + document.documentElement.setAttribute('data-bs-theme', isDarkMedia() ? darkThemeName : lightThemeName); + } else { + document.documentElement.setAttribute('data-bs-theme', theme); + } +}; +// We need to apply the classes BEFORE the page is rendered. +// That is why we use a MutationObserver instead of document.Ready(). +var themeObserver = new MutationObserver(function (mutations) { + for (var i = 0; i < mutations.length; i++) { + for (var j = 0; j < mutations[i].addedNodes.length; j++) { + if (mutations[i].addedNodes[j].tagName == 'BODY') { + setTheme(getPreferredTheme()); + + // we're done: + themeObserver.disconnect(); + } + ; + } + } +}); +themeObserver.observe(document.documentElement, { + childList: true, + subtree: true +}); \ No newline at end of file diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js new file mode 100644 index 00000000000..34813ac890f --- /dev/null +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js @@ -0,0 +1 @@ +var darkThemeName="dark",lightThemeName="light",tenantName=document.currentScript.dataset.tenantName,themeStoreKeySuffix="theme",getTenantName=function(){return tenantName||document.documentElement.getAttribute("data-tenant")||"default"},getStoreKeySuffix=function(){return themeStoreKeySuffix||"theme"},getStoreKey=function(){return"".concat(getTenantName(),"-").concat(getStoreKeySuffix())},getStoredTheme=function(){return localStorage.getItem(getStoreKey())},setStoredTheme=function(e){return localStorage.setItem(getStoreKey(),e)},isDarkMedia=function(){return window.matchMedia("(prefers-color-scheme: dark)").matches},getPreferredTheme=function(){var e=getStoredTheme();return e||(isDarkMedia()?darkThemeName:lightThemeName)},setTheme=function(e){"auto"===e?document.documentElement.setAttribute("data-bs-theme",isDarkMedia()?darkThemeName:lightThemeName):document.documentElement.setAttribute("data-bs-theme",e)},themeObserver=new MutationObserver((function(e){for(var t=0;t 1 && arguments[1] !== undefined ? arguments[1] : false; + var themeSwitcher = document.querySelector('#bd-theme'); + if (!themeSwitcher) { + return; + } + var themeSwitcherText = document.querySelector('#bd-theme-text'); + var activeThemeIcon = document.querySelector('.theme-icon-active'); + var btnToActive = document.querySelector("[data-bs-theme-value=\"".concat(theme, "\"]")); + var svgOfActiveBtn = btnToActive.querySelector('.theme-icon'); + btnToActive.classList.add('active'); + btnToActive.setAttribute('aria-pressed', 'true'); + activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML; + var themeSwitcherLabel = "".concat(themeSwitcherText.textContent, " (").concat(btnToActive.dataset.bsThemeValue, ")"); + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel); + var btnsToInactive = document.querySelectorAll("[data-bs-theme-value]:not([data-bs-theme-value=\"".concat(theme, "\"])")); + for (var i = 0; i < btnsToInactive.length; i++) { + btnsToInactive[i].classList.remove('active'); + btnsToInactive[i].setAttribute('aria-pressed', 'false'); + } + if (focus) { + themeSwitcher.focus(); + } + }; + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () { + var storedTheme = getStoredTheme(); + if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) { + setTheme(getPreferredTheme()); + } + }); + window.addEventListener('DOMContentLoaded', function () { + showActiveTheme(getPreferredTheme()); + document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) { + toggle.addEventListener('click', function () { + var theme = toggle.getAttribute('data-bs-theme-value'); + setStoredTheme(theme); + setTheme(theme); + showActiveTheme(theme, true); + }); + }); + }); +})(); \ No newline at end of file diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js index fba3ba924e5..f4537733e23 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js @@ -1 +1 @@ -var darkThemeName="dark",lightThemeName="light",tenantName=document.currentScript.dataset.tenantName,themeStoreKeySuffix="theme",getTenantName=function(){return tenantName||document.documentElement.getAttribute("data-tenant")||"default"},getStoreKeySuffix=function(){return themeStoreKeySuffix||"theme"},getStoreKey=function(){return"".concat(getTenantName(),"-").concat(getStoreKeySuffix())},getStoredTheme=function(){return localStorage.getItem(getStoreKey())},setStoredTheme=function(e){return localStorage.setItem(getStoreKey(),e)},isDarkMedia=function(){return window.matchMedia("(prefers-color-scheme: dark)").matches},getPreferredTheme=function(){var e=getStoredTheme();return e||(isDarkMedia()?darkThemeName:lightThemeName)},setTheme=function(e){"auto"===e?document.documentElement.setAttribute("data-bs-theme",isDarkMedia()?darkThemeName:lightThemeName):document.documentElement.setAttribute("data-bs-theme",e)}; +!function(){"use strict";var e=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=document.querySelector("#bd-theme");if(a){var r=document.querySelector("#bd-theme-text"),n=document.querySelector(".theme-icon-active"),c=document.querySelector('[data-bs-theme-value="'.concat(e,'"]')),o=c.querySelector(".theme-icon");c.classList.add("active"),c.setAttribute("aria-pressed","true"),n.innerHTML=o.innerHTML;var d="".concat(r.textContent," (").concat(c.dataset.bsThemeValue,")");a.setAttribute("aria-label",d);for(var i=document.querySelectorAll('[data-bs-theme-value]:not([data-bs-theme-value="'.concat(e,'"])')),s=0;s 1 && arguments[1] !== undefined ? arguments[1] : false; + var themeSwitcher = document.querySelector('#bd-theme'); + if (!themeSwitcher) { + return; + } + var themeSwitcherText = document.querySelector('#bd-theme-text'); + var activeThemeIcon = document.querySelector('.theme-icon-active'); + var btnToActive = document.querySelector("[data-bs-theme-value=\"".concat(theme, "\"]")); + var svgOfActiveBtn = btnToActive.querySelector('.theme-icon'); + btnToActive.classList.add('active'); + btnToActive.setAttribute('aria-pressed', 'true'); + activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML; + var themeSwitcherLabel = "".concat(themeSwitcherText.textContent, " (").concat(btnToActive.dataset.bsThemeValue, ")"); + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel); + var btnsToInactive = document.querySelectorAll("[data-bs-theme-value]:not([data-bs-theme-value=\"".concat(theme, "\"])")); + for (var i = 0; i < btnsToInactive.length; i++) { + btnsToInactive[i].classList.remove('active'); + btnsToInactive[i].setAttribute('aria-pressed', 'false'); + } + if (focus) { + themeSwitcher.focus(); + } + }; + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () { + var storedTheme = getStoredTheme(); + if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) { + setTheme(getPreferredTheme()); + } + }); + window.addEventListener('DOMContentLoaded', function () { + showActiveTheme(getPreferredTheme()); + document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) { + toggle.addEventListener('click', function () { + var theme = toggle.getAttribute('data-bs-theme-value'); + setStoredTheme(theme); + setTheme(theme); + showActiveTheme(theme, true); + }); + }); + }); +})(); \ No newline at end of file diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js new file mode 100644 index 00000000000..f4537733e23 --- /dev/null +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js @@ -0,0 +1 @@ +!function(){"use strict";var e=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=document.querySelector("#bd-theme");if(a){var r=document.querySelector("#bd-theme-text"),n=document.querySelector(".theme-icon-active"),c=document.querySelector('[data-bs-theme-value="'.concat(e,'"]')),o=c.querySelector(".theme-icon");c.classList.add("active"),c.setAttribute("aria-pressed","true"),n.innerHTML=o.innerHTML;var d="".concat(r.textContent," (").concat(c.dataset.bsThemeValue,")");a.setAttribute("aria-label",d);for(var i=document.querySelectorAll('[data-bs-theme-value]:not([data-bs-theme-value="'.concat(e,'"])')),s=0;s - + @if (Orchard.IsRightToLeft()) { @@ -36,6 +36,7 @@ } + From a2a0061241429f79246242c828ec1bfb5053cfd0 Mon Sep 17 00:00:00 2001 From: Mike Alhayek Date: Sat, 29 Jun 2024 15:32:43 -0700 Subject: [PATCH 2/6] address feedback and cleanup --- .../ResourceManagementOptionsConfiguration.cs | 2 +- .../OrchardCore.Themes/Assets.json | 9 ---- .../OrchardCore.Themes/Assets/js/constants.js | 3 +- .../ResourceManagementOptionsConfiguration.cs | 6 --- .../wwwroot/Scripts/theme-head.js | 3 +- .../wwwroot/Scripts/theme-head.min.js | 2 +- .../wwwroot/Scripts/theme-manager.js | 50 ------------------- .../wwwroot/Scripts/theme-manager.min.js | 1 - .../ResourceManagementOptionsConfiguration.cs | 2 +- .../TheAdmin/Views/Layout-Login.cshtml | 2 +- .../TheAdmin/Views/Layout-TwoFactor.cshtml | 2 +- 11 files changed, 7 insertions(+), 75 deletions(-) delete mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.js delete mode 100644 src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs index 9d762707b56..094a8c7a222 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs @@ -434,7 +434,7 @@ ResourceManifest BuildManifest() manifest .DefineScript("trumbowyg-theme") .SetUrl("~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.min.js", "~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.js") - .SetDependencies("trumbowyg", "theme-manager") + .SetDependencies("trumbowyg", "theme-toggler") .SetVersion("1.0.0"); manifest diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json index 3d8815acf75..64332d83dd8 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json +++ b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json @@ -16,15 +16,6 @@ ], "output": "wwwroot/Scripts/theme-head.js" }, - { - "inputs": [ - "Assets/js/theme-toggler.js" - ], - "watch": [ - "Assets/js/theme-toggler.js" - ], - "output": "wwwroot/Scripts/theme-manager.js" - }, { "inputs": [ "Assets/js/theme-toggler.js" diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js index 258f3d6b8ab..0e7f349cc68 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js +++ b/src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js @@ -1,9 +1,8 @@ const darkThemeName = 'dark'; const lightThemeName = 'light'; -const tenantName = document.currentScript.dataset.tenantName; const themeStoreKeySuffix = 'theme'; -const getTenantName = () => tenantName || document.documentElement.getAttribute('data-tenant') || 'default'; +const getTenantName = () => document.documentElement.getAttribute('data-tenant') || 'default'; const getStoreKeySuffix = () => themeStoreKeySuffix || 'theme'; const getStoreKey = () => `${getTenantName()}-${getStoreKeySuffix()}`; const getStoredTheme = () => localStorage.getItem(getStoreKey()); diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs index 5e9590aea33..0cc64cabba0 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs @@ -16,12 +16,6 @@ static ResourceManagementOptionsConfiguration() .SetUrl("~/OrchardCore.Themes/Scripts/theme-head.min.js", "~/OrchardCore.Themes/Scripts/theme-head.js") .SetVersion("1.0.0"); - _manifest - .DefineScript("theme-manager") - .SetUrl("~/OrchardCore.Themes/Scripts/theme-manager.min.js", "~/OrchardCore.Themes/Scripts/theme-manager.js") - .SetDependencies("theme-head") - .SetVersion("1.0.0"); - _manifest .DefineScript("theme-toggler") .SetUrl("~/OrchardCore.Themes/Scripts/theme-toggler.min.js", "~/OrchardCore.Themes/Scripts/theme-toggler.js") diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js index 07c5035846d..d0f596fdf59 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js @@ -5,10 +5,9 @@ var darkThemeName = 'dark'; var lightThemeName = 'light'; -var tenantName = document.currentScript.dataset.tenantName; var themeStoreKeySuffix = 'theme'; var getTenantName = function getTenantName() { - return tenantName || document.documentElement.getAttribute('data-tenant') || 'default'; + return document.documentElement.getAttribute('data-tenant') || 'default'; }; var getStoreKeySuffix = function getStoreKeySuffix() { return themeStoreKeySuffix || 'theme'; diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js index 34813ac890f..e09c488f962 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js +++ b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.min.js @@ -1 +1 @@ -var darkThemeName="dark",lightThemeName="light",tenantName=document.currentScript.dataset.tenantName,themeStoreKeySuffix="theme",getTenantName=function(){return tenantName||document.documentElement.getAttribute("data-tenant")||"default"},getStoreKeySuffix=function(){return themeStoreKeySuffix||"theme"},getStoreKey=function(){return"".concat(getTenantName(),"-").concat(getStoreKeySuffix())},getStoredTheme=function(){return localStorage.getItem(getStoreKey())},setStoredTheme=function(e){return localStorage.setItem(getStoreKey(),e)},isDarkMedia=function(){return window.matchMedia("(prefers-color-scheme: dark)").matches},getPreferredTheme=function(){var e=getStoredTheme();return e||(isDarkMedia()?darkThemeName:lightThemeName)},setTheme=function(e){"auto"===e?document.documentElement.setAttribute("data-bs-theme",isDarkMedia()?darkThemeName:lightThemeName):document.documentElement.setAttribute("data-bs-theme",e)},themeObserver=new MutationObserver((function(e){for(var t=0;t 1 && arguments[1] !== undefined ? arguments[1] : false; - var themeSwitcher = document.querySelector('#bd-theme'); - if (!themeSwitcher) { - return; - } - var themeSwitcherText = document.querySelector('#bd-theme-text'); - var activeThemeIcon = document.querySelector('.theme-icon-active'); - var btnToActive = document.querySelector("[data-bs-theme-value=\"".concat(theme, "\"]")); - var svgOfActiveBtn = btnToActive.querySelector('.theme-icon'); - btnToActive.classList.add('active'); - btnToActive.setAttribute('aria-pressed', 'true'); - activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML; - var themeSwitcherLabel = "".concat(themeSwitcherText.textContent, " (").concat(btnToActive.dataset.bsThemeValue, ")"); - themeSwitcher.setAttribute('aria-label', themeSwitcherLabel); - var btnsToInactive = document.querySelectorAll("[data-bs-theme-value]:not([data-bs-theme-value=\"".concat(theme, "\"])")); - for (var i = 0; i < btnsToInactive.length; i++) { - btnsToInactive[i].classList.remove('active'); - btnsToInactive[i].setAttribute('aria-pressed', 'false'); - } - if (focus) { - themeSwitcher.focus(); - } - }; - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () { - var storedTheme = getStoredTheme(); - if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) { - setTheme(getPreferredTheme()); - } - }); - window.addEventListener('DOMContentLoaded', function () { - showActiveTheme(getPreferredTheme()); - document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) { - toggle.addEventListener('click', function () { - var theme = toggle.getAttribute('data-bs-theme-value'); - setStoredTheme(theme); - setTheme(theme); - showActiveTheme(theme, true); - }); - }); - }); -})(); \ No newline at end of file diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js deleted file mode 100644 index f4537733e23..00000000000 --- a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(){"use strict";var e=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=document.querySelector("#bd-theme");if(a){var r=document.querySelector("#bd-theme-text"),n=document.querySelector(".theme-icon-active"),c=document.querySelector('[data-bs-theme-value="'.concat(e,'"]')),o=c.querySelector(".theme-icon");c.classList.add("active"),c.setAttribute("aria-pressed","true"),n.innerHTML=o.innerHTML;var d="".concat(r.textContent," (").concat(c.dataset.bsThemeValue,")");a.setAttribute("aria-label",d);for(var i=document.querySelectorAll('[data-bs-theme-value]:not([data-bs-theme-value="'.concat(e,'"])')),s=0;s - + @if (Orchard.IsRightToLeft()) diff --git a/src/OrchardCore.Themes/TheAdmin/Views/Layout-TwoFactor.cshtml b/src/OrchardCore.Themes/TheAdmin/Views/Layout-TwoFactor.cshtml index 27d9e4d4e82..17d077ef88b 100644 --- a/src/OrchardCore.Themes/TheAdmin/Views/Layout-TwoFactor.cshtml +++ b/src/OrchardCore.Themes/TheAdmin/Views/Layout-TwoFactor.cshtml @@ -13,7 +13,7 @@ - + @if (Orchard.IsRightToLeft()) From 729498e0e01fe7e3b328f702f47cc39f14a2a6f2 Mon Sep 17 00:00:00 2001 From: Mike Alhayek Date: Sat, 29 Jun 2024 16:02:35 -0700 Subject: [PATCH 3/6] rename theme-toggler to theme-manager --- .../ResourceManagementOptionsConfiguration.cs | 2 +- src/OrchardCore.Modules/OrchardCore.Themes/Assets.json | 2 +- .../ResourceManagementOptionsConfiguration.cs | 4 ++-- .../wwwroot/Scripts/{theme-toggler.js => theme-manager.js} | 0 .../Scripts/{theme-toggler.min.js => theme-manager.min.js} | 0 .../TheAdmin/ResourceManagementOptionsConfiguration.cs | 2 +- src/OrchardCore.Themes/TheTheme/Views/Layout.cshtml | 2 +- 7 files changed, 6 insertions(+), 6 deletions(-) rename src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/{theme-toggler.js => theme-manager.js} (100%) rename src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/{theme-toggler.min.js => theme-manager.min.js} (100%) diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs index 094a8c7a222..7acdf8b7aa3 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs @@ -434,7 +434,7 @@ ResourceManifest BuildManifest() manifest .DefineScript("trumbowyg-theme") .SetUrl("~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.min.js", "~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.js") - .SetDependencies("trumbowyg", "theme-toggler") + .SetDependencies("trumbowyg", "theme-head") .SetVersion("1.0.0"); manifest diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json index 64332d83dd8..90f543a5c6e 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json +++ b/src/OrchardCore.Modules/OrchardCore.Themes/Assets.json @@ -23,6 +23,6 @@ "watch": [ "Assets/js/theme-toggler.js" ], - "output": "wwwroot/Scripts/theme-toggler.js" + "output": "wwwroot/Scripts/theme-manager.js" } ] diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs index 0cc64cabba0..9665c795f7b 100644 --- a/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs @@ -17,8 +17,8 @@ static ResourceManagementOptionsConfiguration() .SetVersion("1.0.0"); _manifest - .DefineScript("theme-toggler") - .SetUrl("~/OrchardCore.Themes/Scripts/theme-toggler.min.js", "~/OrchardCore.Themes/Scripts/theme-toggler.js") + .DefineScript("theme-manager") + .SetUrl("~/OrchardCore.Themes/Scripts/theme-manager.min.js", "~/OrchardCore.Themes/Scripts/theme-manager.js") .SetDependencies("theme-head") .SetVersion("1.0.0"); } diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.js similarity index 100% rename from src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.js rename to src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.js diff --git a/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js b/src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js similarity index 100% rename from src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.min.js rename to src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js diff --git a/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs index 0f5a6b82494..0c30ff76c26 100644 --- a/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs @@ -13,7 +13,7 @@ static ResourceManagementOptionsConfiguration() _manifest .DefineScript("admin") - .SetDependencies("bootstrap", "admin-main", "theme-toggler", "jQuery") + .SetDependencies("bootstrap", "admin-main", "theme-manager", "jQuery") .SetUrl("~/TheAdmin/js/TheAdmin.min.js", "~/TheAdmin/js/TheAdmin.js") .SetVersion("1.0.0"); diff --git a/src/OrchardCore.Themes/TheTheme/Views/Layout.cshtml b/src/OrchardCore.Themes/TheTheme/Views/Layout.cshtml index a2b89f409e7..da14cf5df9e 100644 --- a/src/OrchardCore.Themes/TheTheme/Views/Layout.cshtml +++ b/src/OrchardCore.Themes/TheTheme/Views/Layout.cshtml @@ -36,7 +36,7 @@ } - + From 330b424940f32e232d5edc3bfd84f4c09f19a119 Mon Sep 17 00:00:00 2001 From: Mike Alhayek Date: Tue, 2 Jul 2024 12:04:00 -0700 Subject: [PATCH 4/6] safer code and fix dependency --- .../Assets/trumbowyg/js/trumbowyg.theme.js | 10 ++++++++-- .../wwwroot/Scripts/trumbowyg/trumbowyg.theme.js | 11 ++++++++--- .../wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js | 2 +- .../ResourceManagementOptionsConfiguration.cs | 2 +- 4 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js b/src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js index fcf681b2a2a..f616685e92a 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js +++ b/src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js @@ -1,6 +1,12 @@ document.addEventListener('DOMContentLoaded', function () { - function setTheme() { - var isDark = getPreferredTheme() == darkThemeName; + const setTheme = () => { + var isDark = false; + + if (typeof getPreferredTheme === 'function') { + isDark = getPreferredTheme() == (darkThemeName || 'dark'); + } else { + isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + } document .querySelectorAll('.trumbowyg') diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js index 0f862b38895..f7306e51ce2 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js +++ b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js @@ -4,12 +4,17 @@ */ document.addEventListener('DOMContentLoaded', function () { - function setTheme() { - var isDark = getPreferredTheme() == darkThemeName; + var setTheme = function setTheme() { + var isDark = false; + if (typeof getPreferredTheme === 'function') { + isDark = getPreferredTheme() == (darkThemeName || 'dark'); + } else { + isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + } document.querySelectorAll('.trumbowyg').forEach(function (element) { return element.parentElement.classList.toggle('trumbowyg-dark', isDark); }); - } + }; var mutationObserver = new MutationObserver(setTheme); mutationObserver.observe(document.documentElement, { attributes: true, diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js index 4d4102d1267..5ade028ecd2 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js +++ b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js @@ -1 +1 @@ -document.addEventListener("DOMContentLoaded",(function(){function e(){var e=getPreferredTheme()==darkThemeName;document.querySelectorAll(".trumbowyg").forEach((function(t){return t.parentElement.classList.toggle("trumbowyg-dark",e)}))}new MutationObserver(e).observe(document.documentElement,{attributes:!0,childList:!0,subtree:!0}),e()})); +document.addEventListener("DOMContentLoaded",(function(){var e=function(){var e=!1;e="function"==typeof getPreferredTheme?getPreferredTheme()==(darkThemeName||"dark"):window.matchMedia("(prefers-color-scheme: dark)").matches,document.querySelectorAll(".trumbowyg").forEach((function(t){return t.parentElement.classList.toggle("trumbowyg-dark",e)}))};new MutationObserver(e).observe(document.documentElement,{attributes:!0,childList:!0,subtree:!0}),e()})); diff --git a/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs b/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs index 0c30ff76c26..2a08b7f89a6 100644 --- a/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs +++ b/src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs @@ -20,7 +20,7 @@ static ResourceManagementOptionsConfiguration() _manifest .DefineScript("admin-main") .SetUrl("~/TheAdmin/js/TheAdmin-main.min.js", "~/TheAdmin/js/TheAdmin-main.js") - .SetDependencies("theme-head") + .SetDependencies("theme-head", "js-cookie") .SetVersion("1.0.0"); _manifest From 8c224722c6c097583d8e48515d41439a6a2a331e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Leh=C3=B3czky?= Date: Wed, 3 Jul 2024 13:36:18 +0200 Subject: [PATCH 5/6] Trumbowyg icons are now loaded even when the Wysiwyg editor type is used --- .../Views/HtmlField-Trumbowyg.Edit.cshtml | 1 - .../Views/HtmlBodyPart-Trumbowyg.Edit.cshtml | 1 - src/OrchardCore.Modules/OrchardCore.Resources/Assets.json | 7 +++++++ .../wwwroot/{Styles => Scripts/trumbowyg}/ui/icons.svg | 2 +- .../OrchardCore.Resources/wwwroot/Scripts/ui/icons.svg | 1 - 5 files changed, 8 insertions(+), 4 deletions(-) rename src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/{Styles => Scripts/trumbowyg}/ui/icons.svg (53%) delete mode 100644 src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/ui/icons.svg diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml index 25e5ce77bb9..5a797238e23 100644 --- a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml +++ b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml @@ -83,5 +83,4 @@ else $(document).trigger('contentpreview:render'); }); }); - $.trumbowyg.svgPath = '@Url.Content("~/OrchardCore.Resources/Styles/ui/icons.svg")'; diff --git a/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Trumbowyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Trumbowyg.Edit.cshtml index cfd6d325680..fa3756762eb 100644 --- a/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Trumbowyg.Edit.cshtml +++ b/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Trumbowyg.Edit.cshtml @@ -76,5 +76,4 @@ else $(document).trigger('contentpreview:render'); }); }); - $.trumbowyg.svgPath = '@Url.Content("~/OrchardCore.Resources/Styles/ui/icons.svg")'; diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/Assets.json b/src/OrchardCore.Modules/OrchardCore.Resources/Assets.json index 6e68adb12c1..edf66392711 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/Assets.json +++ b/src/OrchardCore.Modules/OrchardCore.Resources/Assets.json @@ -184,6 +184,13 @@ ], "output": "wwwroot/Styles/trumbowyg/trumbowyg.css" }, + { + "copy": true, + "inputs": [ + "node_modules/trumbowyg/dist/ui/icons.svg" + ], + "output": "wwwroot/Scripts/trumbowyg/ui/icons.svg" + }, { "generateRTL": true, "inputs": [ diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Styles/ui/icons.svg b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/ui/icons.svg similarity index 53% rename from src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Styles/ui/icons.svg rename to src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/ui/icons.svg index 422409663f4..bc04036c0d5 100644 --- a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Styles/ui/icons.svg +++ b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/ui/icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/ui/icons.svg b/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/ui/icons.svg deleted file mode 100644 index 5c0f4f6495d..00000000000 --- a/src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/ui/icons.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 8b077338464a7cfbff79797dfc74964478a7ad41 Mon Sep 17 00:00:00 2001 From: Mike Alhayek Date: Wed, 3 Jul 2024 08:43:28 -0700 Subject: [PATCH 6/6] Fix theme in Wysiwyg --- .../OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml | 1 + 1 file changed, 1 insertion(+) diff --git a/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml index db4a3b7d97b..f9ea79607ab 100644 --- a/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml +++ b/src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml @@ -13,6 +13,7 @@ + @await DisplayAsync(await New.ShortcodeModal())