Add theme selector to jQuery playground (#25480)

DevExpress · Aug 31, 2023 · 998aa77 · 998aa77
1 parent 8411ee7
commit 998aa77
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 2 deletions.
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -5,7 +5,16 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" type="text/css" href="../artifacts/css/dx.light.css"/>
+    <script type="text/javascript">
+        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+
+        const link = document.createElement("link");
+        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+    </script>
 
     <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
     <!-- HtmlEditor -->
@@ -30,15 +39,19 @@
     -->
 
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
 <body>
     <div role="main">
         <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
 
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <br />
         <div id="button"></div>
         <script>
-           $(function() {
+            $(function() {
                 $("#button").dxButton({
                     text: 'Click me!',
                     onClick: function() { alert("clicked"); }

diff --git a/packages/devextreme/playground/themeSelector.js b/packages/devextreme/playground/themeSelector.js
@@ -0,0 +1,82 @@
+/* global window */
+/* global document */
+
+const themeKey = 'currentThemeId';
+
+const themeList = [
+    'light',
+    'light.compact',
+
+    'carmine.compact',
+    'carmine',
+
+    'contrast.compact',
+    'contrast',
+
+    'dark.compact',
+    'dark',
+
+    'darkmoon.compact',
+    'darkmoon',
+
+    'darkviolet.compact',
+    'darkviolet',
+
+    'fluent.blue.dark.compact',
+    'fluent.blue.dark',
+    'fluent.blue.light.compact',
+    'fluent.blue.light',
+
+    'greenmist.compact',
+    'greenmist',
+
+    'softblue.compact',
+    'softblue',
+
+    'material.blue.dark.compact',
+    'material.blue.dark',
+    'material.blue.light.compact',
+    'material.blue.light',
+
+    'material.lime.dark.compact',
+    'material.lime.dark',
+    'material.lime.light.compact',
+    'material.lime.light',
+
+    'material.orange.dark.compact',
+    'material.orange.dark',
+    'material.orange.light.compact',
+    'material.orange.light',
+
+    'material.purple.dark.compact',
+    'material.purple.dark',
+    'material.purple.light.compact',
+    'material.purple.light',
+
+    'material.teal.dark.compact',
+    'material.teal.dark',
+    'material.teal.light.compact',
+    'material.teal.light'
+];
+
+const initThemes = (dropDownList) => {
+    themeList.forEach(theme => {
+        const item = document.createElement('option');
+        item.value = theme;
+        item.text = theme;
+
+        dropDownList.add(item);
+    });
+};
+
+window.addEventListener('load', () => {
+    const dropDownList = document.querySelector('#theme-selector');
+
+    dropDownList.addEventListener('change', () => {
+        window.localStorage.setItem(themeKey, dropDownList.value);
+        window.location.reload();
+    });
+
+    initThemes(dropDownList);
+    dropDownList.value = window.localStorage.getItem(themeKey) || themeList[0];
+});