Polish dark theme styles, change switcher, add cross-site iframe

mpds-io · Apr 29, 2024 · e83e14b · e83e14b
1 parent a35e573
commit e83e14b
Show file tree

Hide file tree

Showing 11 changed files with 408 additions and 103 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/example_dev.html b/example_dev.html
@@ -5,9 +5,6 @@
 <link rel="stylesheet" type="text/css" href="webassets/ermac.css" />
 </head>
 <body>
-
-
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
 <script type="text/javascript">
 // a very simple env loader
 var to_load = [
@@ -19,6 +16,7 @@
     'src_js/third_party/selectize.js',
     'src_js/third_party/selectize_preserve_on_blur.js',
     'src_js/third_party/optimade_mpds_nlp.js',
+    'src_js/third_party/darkmode.js',
     'src_js/wmsettings.js',
     'src_js/wmcore.js',
     'src_js/sliders.js',
@@ -41,6 +39,5 @@
     head.appendChild(script);
 }
 </script>
-<script src="./script.js"></script>
 </body>
 </html>
diff --git a/example_prod.html b/example_prod.html
@@ -5,9 +5,6 @@
 <link rel="stylesheet" type="text/css" href="webassets/ermac.css" />
 </head>
 <body>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
-    <script src="./script.js"></script>
-
 <script type="text/javascript" src="ermac.min.js"></script>
 </body>
 </html>
diff --git a/labs/.DS_Store b/labs/.DS_Store
diff --git a/script.js b/script.js
diff --git a/src_js/events.js b/src_js/events.js
@@ -1450,7 +1450,7 @@ function register_events(){
         return false;
     });*/
 
-    // Keys press
+    // keys press
     $(document).keydown(function(e){
         var key = window.event ? e.keyCode : e.which;
         if (key == 13){ // ENTER: input must trigger submit button via two parent divs!
@@ -1471,8 +1471,8 @@ function register_events(){
 
     $(window).bind('hashchange', url_redraw_react);
 
+    // execute a command in all the active GUI windows (except the current) e.g. setting a new state
     $(window).bind('storage', function(ev){
-        // This is to execute the command in all the active GUI windows (except the current) e.g. setting a new state
         if (ev.originalEvent.key != wmgui.store_comm_exec_key)
             return;
 
@@ -1503,4 +1503,28 @@ function register_events(){
             wmgui.ptable.subphases_set(state);
         }
     });
+
+    // theme switcher
+    document.getElementById('darkmode_trigger').onclick = function(){
+        wmgui.darkmode.toggle();
+        document.getElementById('darkmode_trigger').innerHTML = wmgui.darkmode.isActivated() ? 'enabled' : 'disabled';
+        document.getElementById('comms').contentWindow.postMessage(JSON.stringify({darkmode: wmgui.darkmode.isActivated() ? 1 : 2}), '*');
+    }
+
+    // cross-site comms
+    window.addEventListener('message', function(message){
+        //if (message.origin === 'https://trusted.com') {
+        var received;
+        try {
+            received = JSON.parse(message.data);
+        } catch (ignore){}
+        var darkmode = received.darkmode;
+        if (darkmode !== undefined){
+            darkmode = (darkmode === 1);
+            if (darkmode !== wmgui.darkmode.isActivated()) wmgui.darkmode.toggle();
+            document.getElementById('darkmode_trigger').innerHTML = wmgui.darkmode.isActivated() ? 'enabled' : 'disabled';
+        }
+        //}
+    });
+    // EOF register_events
 }
diff --git a/src_js/markup.js b/src_js/markup.js
@@ -490,12 +490,12 @@ function register_html(){
     <div id="pd_legend" class="sim_col_ctx">
         <div class="col_title">Color legend</div>
         <ul>
-            <li>liquid or gas <span style="color:#fff;background:#9cf;padding:2px;">blue or violet</span></li>
-            <li>1-phase <span style="color:#fff;background:#d1cde6;padding:2px;">violet</span></li>
-            <li>2-phase <span style="color:#fff;background:#ddd;padding:2px;">gray or white</span></li>
-            <li>3-phase <span style="color:#fff;background:#fc6;padding:2px;">yellow</span></li>
-            <li>4-phase <span style="color:#fff;background:#FCD3C2;padding:2px;">red</span></li>
-            <li>5-phase <span style="color:#fff;background:#CCE7D4;padding:2px;">green</span></li>
+            <li><span style="background:#9cf;">liquid or gas</span></li>
+            <li><span style="background:#d1cde6;">1-phase</span></li>
+            <li><span style="background:#ddd;">2-phase</span></li>
+            <li><span style="background:#fc6;">3-phase</span></li>
+            <li><span style="background:#FCD3C2;">4-phase</span></li>
+            <li><span style="background:#CCE7D4;">5-phase</span></li>
         </ul>
     </div>
 </div>
@@ -837,6 +837,10 @@ function register_html(){
     </div>
 </div>
 
-<div id="footer">Editor-in-Chief: Pierre Villars. Section editors: Karin Cenzual, Ihor Savysyuk, Riccarda Caputo. <a href="https://github.com/mpds-io">Open-source</a> development by <a href="https://tilde.pro" target="_blank">Tilde MI</a>.</div>
+<div id="footer">Editor-in-Chief: P. Villars. Section editors: K. Cenzual, I. Savysyuk, R. Caputo. <a href="https://github.com/mpds-io">Open-source</a> development by <a href="https://tilde.pro" target="_blank">Tilde MI</a>. Dark mode is <span id="darkmode_trigger" style="border-bottom:1px solid #555;cursor:pointer;"></span>.</div>
+
+<!-- CROSS-SITE COMMS -->
+<iframe id="comms" src="https://absolidix.com/comms.html" style="width:0;height:0;border:none;position:absolute;"></iframe>
+<!-- iframe id="comms" src="http://localhost:5000/comms.html" style="width:0;height:0;border:none;position:absolute;"></iframe -->
 `);
 }
diff --git a/src_js/startup.js b/src_js/startup.js
@@ -382,6 +382,9 @@ function satisfy_requirements(){
     $('#engines_a').prop('checked', wmgui.engines == 'a');
     $('#engines_b').prop('checked', wmgui.engines == 'b');
 
+    wmgui.darkmode = new Darkmode({saveInCookies: false});
+    document.getElementById('darkmode_trigger').innerHTML = wmgui.darkmode.isActivated() ? 'enabled' : 'disabled';
+
     //create_floating_slider('density', 42, 'Mg/m<sup>3</sup>', 10, 900, 10);
     // EOF satisfy_requirements
 }