fixed a persistence issue

FlorianFe · Jul 27, 2020 · 9035df3 · 9035df3
1 parent c15cf23
commit 9035df3
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 27 deletions.
diff --git a/periodic-table/periodic-table-content/periodic-table-content.html b/periodic-table/periodic-table-content/periodic-table-content.html
@@ -110,6 +110,7 @@
       id="settings-dialog"
       language="{{language}}"
       temperature-indicator="{{temperatureIndicator}}"
+      display="{{display}}"
     ></settings-dialog>
 
     <div class="align-right">

diff --git a/periodic-table/periodic-table-content/periodic-table-content.js b/periodic-table/periodic-table-content/periodic-table-content.js
@@ -15,7 +15,12 @@ class PeriodicTableContent extends Polymer.Element
         value: "h"
       },
       language: String,
-      temperatureIndicator: String
+      temperatureIndicator: String,
+      display:
+      {
+        type: String,
+        notify: true
+      }
     }
   }
 

diff --git a/periodic-table/periodic-table-content/settings-dialog/settings-dialog.js b/periodic-table/periodic-table-content/settings-dialog/settings-dialog.js
@@ -146,31 +146,9 @@ class SettingsDialog extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior
            shell.openExternal(event.target.href);
       });
     });
-
-    this.shadowRoot.querySelector('.display-selection').addEventListener('selected-changed', () => 
-    {
-      updateCSSVariables();
-    });
-
-    updateCSSVariables();
   }
 
-  updateCSSVariables()
-  {
-    if(this.display == 'light')
-    {
-      document.documentElement.style.setProperty('--primary-color', '#888');
-      document.documentElement.style.setProperty('--secondary-color', '#000');
-      document.documentElement.style.setProperty('--background-color', '#fff');
-    }
-
-    if(this.display == 'dark')
-    {
-      document.documentElement.style.setProperty('--primary-color', '#eee');
-      document.documentElement.style.setProperty('--secondary-color', '#fff');
-      document.documentElement.style.setProperty('--background-color', '#333');
-    }
-  }
+
 
   open()
   {

diff --git a/periodic-table/periodic-table.html b/periodic-table/periodic-table.html
@@ -61,12 +61,11 @@ <h1>Elements</h1>
         </div>
       </div>
       <div id="periodic-table-content-container">
-        <periodic-table-content></periodic-table-content>
+        <periodic-table-content display="{{display}}"></periodic-table-content>
       </div>
       <div></div>
     </iron-pages>
-
-
+
   </template>
 
   <!-- Loads JavaScript -->

diff --git a/periodic-table/periodic-table.js b/periodic-table/periodic-table.js
@@ -10,6 +10,15 @@ class PeriodicTable extends Polymer.Element
       {
         type: Number,
         value: 0
+      },
+      display:
+      {
+        type: String,
+        observer(newValue, oldValue) {
+
+          console.log(newValue);
+          this._updateCSSVariables();
+        }
       }
     }
   }
@@ -84,6 +93,23 @@ class PeriodicTable extends Polymer.Element
     return symbols[Math.floor(Math.random() * symbols.length)];
   }
 
+  _updateCSSVariables()
+  {
+    if(this.display == 'light')
+    {
+      document.documentElement.style.setProperty('--primary-color', '#888');
+      document.documentElement.style.setProperty('--secondary-color', '#000');
+      document.documentElement.style.setProperty('--background-color', '#fff');
+    }
+
+    if(this.display == 'dark')
+    {
+      document.documentElement.style.setProperty('--primary-color', '#eee');
+      document.documentElement.style.setProperty('--secondary-color', '#fff');
+      document.documentElement.style.setProperty('--background-color', '#333');
+    }
+  }
+
   _importHref(href)
   {
     return new Promise((resolve, reject) =>