Support dark theme and bugfix docson

mpds-io · Apr 29, 2024 · f871572 · f871572
1 parent 1dc7b9b
commit f871572
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -99,16 +99,19 @@
 #landing_box{width:590px;margin:0 auto;height:170px;padding:20px 0;}
 #logo_l{float:left;width:230px;margin-left:15px;font-size:3em;text-align:right;padding-top:38px;letter-spacing:24px;color:#555;font-weight:normal;}
 #logo{float:left;width:140px;height:130px;background:url(https://tutorial.mpds.io/mpds.png) center center no-repeat;background-size:85%;}
+body.darkmode--activated #logo{filter:invert(100%);}
 #logo a{display:block;width:100%;height:100%;border:0;}
 #logo_r{float:left;width:175px;margin-left:15px;font-size:1.2em;line-height:1.3em;text-align:left;font-weight:normal;padding-top:42px;color:#555;}
 #motto{clear:both;width:100%;height:33px;text-align:left;padding-top:20px;padding-left:80px;letter-spacing:0.5px;font-size:0.95em;color:#333;}
 #motto a{text-decoration:none;color:#333;border-bottom:1px solid #333;}
 
+div.darkmode-layer{z-index:9999;}
+
 /* FOOTER */
 /* HEIGHT 32px */
 
-#footer{width:100%;height:24px;padding-top:8px;text-align:center;font-size:0.85em;color:#888;background:#f6f6f6;border-top:1px solid #888;}
-#footer a{text-decoration:none;color:#888;border-bottom:1px solid #888;}
+#footer{width:100%;height:24px;padding-top:8px;text-align:center;font-size:0.85em;color:#333;background:#f6f6f6;border-top:1px solid #333;}
+#footer a, #footer span{text-decoration:none;color:#333;border-bottom:1px solid #333;cursor:pointer;}
 
 /* MEDIA-QUERIES */
 
@@ -489,14 +492,15 @@
 <script type="text/javascript" src="https://developer.mpds.io/webassets/js/jquery.min.js"></script>
 <script type="text/javascript" src="https://developer.mpds.io/webassets/js/highlight.min.js"></script>
 <script type="text/javascript" src="https://developer.mpds.io/webassets/js/jquery.nearest.min.js"></script>
+<script type="text/javascript" src="https://developer.mpds.io/webassets/js/darkmode.js"></script>
 <script type="text/javascript" src="https://developer.mpds.io/webassets/js/require.min.js"></script>
 <script type="text/javascript">
-if (!window.console) window.console = {log: function(){}, error: function(){}};
+"use strict";
 
 function load_custom_schema(addr, el){
     $.get(addr).done(function(schema){
         for (var type in schema.definitions){
-            if (type == "input_query")
+            if (type == "input_query" || type == "chemical_elements")
                 continue;
             try {
                 docson.doc("schema_" + type, schema.definitions[type]);
@@ -599,9 +603,35 @@
             window.location.href = 'https://mpds.io/#' + url;
         }
     });
-});
 
-hljs.initHighlightingOnLoad();
+    window.darkmode = new Darkmode({saveInCookies: false});
+    document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';
+
+    // theme switcher
+    document.getElementById('darkmode_trigger').onclick = function(){
+        window.darkmode.toggle();
+        document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';
+        document.getElementById('comms').contentWindow.postMessage(JSON.stringify({darkmode: window.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 !== window.darkmode.isActivated()) window.darkmode.toggle();
+            document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';
+        }
+        //}
+    });
+
+    hljs.initHighlightingOnLoad();
+});
 </script>
 </head>
 <body class="sky">
@@ -1353,12 +1383,15 @@ <h3 id="Visualizations">&sect;2.6. Visualizations</h3>
 
     <div id="logo_bg"></div>
 
-    <div id="footer">Created by <a href="http://paulingfile.com" target="_blank">Material Phases Data System</a> and <a href="https://tilde.pro" target="_blank">Tilde Materials Informatics</a>.</div>
+    <div id="footer">Created by <a href="https://mpds.io" target="_blank">Materials Platform for Data Science</a> and <a href="https://tilde.pro" target="_blank">Tilde MI</a>. Dark mode is <span id="darkmode_trigger"></span>.</div>
 
     <div class="github-fork-ribbon-wrapper right">
         <div class="github-fork-ribbon">
             <a href="https://github.com/mpds-io/mpds-api" target="_top">See on GitHub</a>
         </div>
     </div>
+
+    <!-- CROSS-SITE COMMS -->
+    <iframe id="comms" src="https://absolidix.com/comms.html" style="width:0;height:0;border:none;position:absolute;"></iframe>
 </body>
 </html>