feat(lib): Inherits the dark/light theme's mode management using css …

…variables and an ODS Charts DEFAULT mode
Orange-OpenSource · Dec 13, 2024 · 9516175 · 9516175
1 parent f5685e4
commit 9516175
Show file tree

Hide file tree

Showing 48 changed files with 1,272 additions and 157 deletions.
diff --git a/docs/assets/color-mode.js b/docs/assets/color-mode.js
@@ -21,10 +21,12 @@
 
   const setTheme = (theme) => {
     if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme);
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    document.querySelectorAll('iframe').forEach((iframe) => {
+      iframe.contentDocument.body.setAttribute('data-bs-theme', theme);
+    });
   };
 
   setTheme(getPreferredTheme());

diff --git a/docs/examples/index.js b/docs/examples/index.js
@@ -35,20 +35,21 @@ async function wait(timer = 0) {
   });
 }
 
-function generateChartDiv(id, direction) {
+function generateChartDiv(id, direction, mode) {
   return `
-  <div class="border border-subtle" style="display: flex; flex-direction: column; height: 100%;">
+  <div class="border ods-charts-context graph-holder"${['dark', 'light'].includes(mode) ? ' data-bs-theme="' + mode + '"' : ''}
+    style="display: flex; flex-direction: column; height: 100%; --bs-border-color: var(--bs-border-color-subtle);">
     <div class="chart_title">
       <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
       <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
     </div>
 
-    <div id="${id}_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: ${direction}; ">
+    <div id="${id}_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: ${direction};">
       <div id="${id}_holder" style="flex-grow: 1; flex-shrink: 1;">
         ${buildChartDiv(id)}
       </div>
       <div id="${id}_legend" style="min-width: 150px;"></div>
-    </div>    
+    </div>
   </div>`;
 }
 
@@ -64,7 +65,7 @@ function generateConfigurator(id) {
     },
     header: {
       begin: (id, itemId) => `<h2 class="accordion-header" id="${itemId}">
-    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
+    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
     data-bs-target="#collapse_${itemId}" aria-expanded="false" aria-controls="collapse_${itemId}">`,
       end: (id, itemId) => `</button>
 </h2>`,
@@ -89,6 +90,7 @@ function generateConfigurator(id) {
             <div class="col-md-4">
               <label for="darkModeInput" class="form-label">Dark mode</label>
               <select class="form-select" aria-label="Dark mode" id="darkModeInput" onchange="changeTheme('${id}')">
+                <option value="default">Default mode</option>
                 <option value="light">White mode</option>
                 <option value="dark">Dark mode</option>
               </select>
@@ -287,6 +289,10 @@ async function displayChart(
     while (!(iframe.contentWindow.boosted && iframe.contentWindow.ODSCharts && iframe.contentWindow.echarts)) {
       await wait(50);
     }
+
+    if (document.querySelector('[data-bs-theme]')) {
+      iframe.contentDocument.body.setAttribute('data-bs-theme', document.querySelector('[data-bs-theme]').getAttribute('data-bs-theme'));
+    }
   }
 
   let iframe = document.querySelector(`#${id} iframe`);
@@ -333,6 +339,12 @@ async function displayChart(
     legendsOrientation = 'horizontal';
   }
 
+  if (['light', 'dark'].includes(themeManager.options.mode)) {
+    iframe.contentDocument.querySelector('.graph-holder').setAttribute('data-bs-theme', themeManager.options.mode);
+  } else {
+    iframe.contentDocument.querySelector('.graph-holder').removeAttribute('data-bs-theme');
+  }
+
   const actualTheme = iframe.contentDocument.getElementById('mainCSS').getAttribute('cssThemeName');
 
   if (actualTheme !== cssThemeName) {
@@ -445,7 +457,11 @@ async function displayChart(
     div = iframe.contentDocument.getElementById(chartId);
   }
 
-  document.getElementById(id + '_html').innerText = generateChartDiv(id, usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column');
+  document.getElementById(id + '_html').innerText = generateChartDiv(
+    id,
+    usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column',
+    themeManager.options.mode
+  );
   document.getElementById(id + '_code').innerText = `///////////////////////////////////////////////////
 // Used data
 ///////////////////////////////////////////////////

diff --git a/docs/use_cases/index.js b/docs/use_cases/index.js
@@ -1,6 +1,5 @@
 var addViewCode = (prefixId = '', htmlId = 'htmlId', codeId = 'codeId') => {
   var htmlElt = document.getElementById(prefixId + htmlId);
-  htmlElt.setAttribute('data-bs-theme', 'light');
   var innitHtmlDoc = htmlElt.innerHTML;
   document.write(`