multi browser themes

abc91199 · Feb 3, 2015 · cf778bf · cf778bf
1 parent f91d8d0
commit cf778bf
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 210 deletions.
diff --git a/demo.html b/demo.html
@@ -1,9 +1,23 @@
 <!doctype html>
 <html>
 <head>
+    <script>
+        function getParameterByName(name) {
+            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+                results = regex.exec(location.search);
+            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+        }
+        var theme = getParameterByName("theme") || "excel";
+        var fileref = document.createElement("link");
+        fileref.setAttribute("rel", "stylesheet");
+        fileref.setAttribute("type", "text/css");
+        fileref.setAttribute("shim-shadowdom", ' ');
+        fileref.setAttribute("href", 'themes/' + theme + '.css');
+        document.getElementsByTagName("head")[0].appendChild(fileref);
+    </script>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>fin-hypergrid Demo</title>
-<link rel="stylesheet" href="themes/excel.css" shim-shadowdom="">
   <script src="../webcomponentsjs/webcomponents.js"></script>
   <script src="../accountingjs/accounting.min.js"></script>
   <link rel="import" href="../paper-tabs/paper-tabs.html">
@@ -98,7 +112,7 @@
                 <core-menu class="menu" style="width:140px;margin: 0px;">
 
                     <template is="auto-binding" id="themeDropDown" repeat="{{themes}}">
-                      <paper-item onclick="selectTheme(this.innerText)">{{}}</paper-item>
+                      <paper-item onclick="selectTheme(this)">{{}}</paper-item>
                     </template>
 
                 </core-menu>
@@ -128,7 +142,7 @@ <h3>fin-hypergrid-behavior-in-memory
           </div>
           <core-splitter direction="up"></core-splitter>
           <div flex class="rel">
-            <fin-hypergrid class="abs">
+            <fin-hypergrid class="abs" id="in-memory-example">
                 <fin-hypergrid-behavior-in-memory></fin-hypergrid-behavior-in-memory>
                 <fin-hypergrid-excel></fin-hypergrid-excel>
             </fin-hypergrid>
@@ -215,24 +229,18 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
 
   var updateThemes = function() {
     var renderers = Array.prototype.slice.call(document.querySelectorAll('fin-hypergrid'));
-    renderers.forEach(function(each){
-        each.themeChangedNotification();
-    });
-    setTimeout(function() {
-        document.body.classList.remove('rotateHalf');
-    },50)
+    //only need to tickle one as it's a global theme
+    if (renderers.length > 0) {
+        renderers[0].themeChangedNotification();
+    }
   }
 
-    function selectTheme(themeName) {
-      document.body.classList.add('rotateHalf');
-      setTimeout(function() {
-          var fileref = document.createElement("link");
-          fileref.setAttribute("rel", "stylesheet");
-          fileref.setAttribute("type", "text/css");
-          fileref.setAttribute("href", 'themes/' + themeName + '.css');
-          document.getElementsByTagName("head")[0].appendChild(fileref);
-          fileref.onload = updateThemes;
-      },200);
+    function selectTheme(selection) {
+        var themeName = selection.innerText || selection.textContent;
+        themeName = themeName.trim();
+        setTimeout(function(){
+            document.location = document.location.origin + "/?theme=" + themeName;
+        },50);
     };
 
     //some general setup
@@ -507,6 +515,50 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
         button.innerText = description;
     }
 
+    function dumpTheme() {
+        var pb = document.createElement('paper-button');
+        pb.style.display = 'none';
+        pb.setAttribute('disabled', true);
+        document.body.appendChild(pb);
+
+        var section = document.createElement('section');
+        section.style.display = 'none';
+        section.setAttribute('hero', true);
+        document.body.appendChild(section);
+
+        var p = window.getComputedStyle(pb);
+        var h = window.getComputedStyle(document.querySelector('html'));
+        var d = (h.flex || '0 0 0').split(' ');
+        var s = window.getComputedStyle(section);
+        console.log('fixed', p['background-color']);
+        console.log('lineColor', p['color']);
+        console.log('color', h['color']);
+        console.log('font-family', h['font-family']);
+        console.log('backgroundColor', s['background-color']);
+
+        pb.setAttribute('disabled', false);
+        pb.setAttribute('secondary', true);
+        pb.setAttribute('raised', true);
+
+        console.log('backgroundSelColor', p['background-color']);
+
+
+        pb.setAttribute('secondary', false);
+        pb.setAttribute('info', true);
+
+        console.log('fixedRowFGSelColor', p['color']);
+        console.log('fixedRowBGSelColor', p['background-color']);
+
+        document.body.removeChild(pb);
+        document.body.removeChild(section);
+    }
+    var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+        console.log(mutation.type);
+    });
+    var target = document.querySelector('html');
+    observer.observe(target, { attributes: true, childList: true, characterData: true });
+});
   </script>
 
 </body>

diff --git a/features/fin-hypergrid-feature-column-moving.html b/features/fin-hypergrid-feature-column-moving.html
@@ -219,8 +219,8 @@
             style.boxShadow = '2px 2px 2px #888888';
             style.width = columnWidth + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
             style.height = colHeight + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
-            style.borderTop = '1px solid ' + grid.renderer.theme.lineColor;
-            style.backgroundColor = grid.renderer.theme.backgroundColor;
+            style.borderTop = '1px solid ' + grid.renderer.resolveProperty('lineColor');
+            style.backgroundColor = grid.renderer.resolveProperty('backgroundColor');
 
             var startX = grid.renderer.renderedColumnWidths[columnIndex + numFixedColumns];
             startX = startX * hdpiRatio;
@@ -271,8 +271,8 @@
             style.opacity = 0.85;
             style.boxShadow = '5px 5px 5px #888888';
             //style.zIndex = 100;
-            style.borderTop = '1px solid ' + grid.renderer.theme.lineColor;
-            style.backgroundColor = grid.renderer.theme.backgroundColor;
+            style.borderTop = '1px solid ' + grid.renderer.resolveProperty('lineColor');
+            style.backgroundColor = grid.renderer.resolveProperty('backgroundColor');
 
             d.setAttribute('width', Math.round(columnWidth * hdpiRatio) + 'px');
             d.setAttribute('height', Math.round(colHeight * hdpiRatio) + 'px');

diff --git a/fin-hypergrid-constants.html b/fin-hypergrid-constants.html
@@ -21,8 +21,9 @@
         backgroundColor: '#FFFFFF',
         foregroundSelColor: '#010126',
         backgroundSelColor: '#B7DBFF',
-        fixedColBGColor: '#DFE3E8',
-        fixedRowBGColor: '#DFE3E8',
+        fixedRowBackgroundColor: '#DFE3E8',
+        fixedColumnBackgroundColor: '#DFE3E8',
+        topLeftBackgroundColor: '#DFE3E8',
         fixedColFGSelColor: '#010126',
         fixedRowFGSelColor: '#010126',
         fixedColBGSelColor: '#FFDC61',
@@ -32,7 +33,6 @@
         cellPadding: 5,
         rowHeight: 20,
         columnWidth: 100,
-        topLeftHeaderBGColor: '#DFE3E8',
         repaintIntervalRate: 15,
         lineColor: '#C7C7C7',
         gridLinesH: true,