the-graph-nav: Move style calculation out of Polymer element

mich31 · Jan 6, 2017 · 9488fcb · 9488fcb
1 parent 9b17ae1
commit 9488fcb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/the-graph-nav/the-graph-nav.html b/the-graph-nav/the-graph-nav.html
@@ -119,17 +119,11 @@
         this.scale = this.editor.scale;
       },
       editorThemeChanged: function () {
-        if (this.editor.theme === "dark") {
-          this.viewBoxBorder =  "hsla(190, 100%, 80%, 0.4)";
-          this.viewBoxBorder2 = "hsla( 10,  60%, 32%, 0.3)";
-          this.outsideFill = "hsla(0, 0%, 0%, 0.4)";
-          this.backgroundColor = "hsla(0, 0%, 0%, 0.9)";
-        } else {
-          this.viewBoxBorder =  "hsla(190, 100%, 20%, 0.8)";
-          this.viewBoxBorder2 = "hsla( 10,  60%, 80%, 0.8)";
-          this.outsideFill = "hsla(0, 0%, 100%, 0.4)";
-          this.backgroundColor = "hsla(0, 0%, 100%, 0.9)";
-        }
+        var style = TheGraph.nav.calculateStyleFromTheme(this.theme);
+        this.backgroundColor = style.backgroundColor;
+        this.viewBoxBorder = style.viewBoxBorder;
+        this.viewBoxBorder2 = style.viewBoxBorder2;
+        this.outsideFill = style.outsideFill;
         this.style.backgroundColor = this.backgroundColor;
         // Redraw rectangle
         this.viewrectangleChanged();

diff --git a/the-graph-nav/the-graph-nav.js b/the-graph-nav/the-graph-nav.js
@@ -1,4 +1,20 @@
 
+function calculateStyleFromTheme(theme) {
+  var style = {};
+  if (theme === "dark") {
+    style.viewBoxBorder =  "hsla(190, 100%, 80%, 0.4)";
+    style.viewBoxBorder2 = "hsla( 10,  60%, 32%, 0.3)";
+    style.outsideFill = "hsla(0, 0%, 0%, 0.4)";
+    style.backgroundColor = "hsla(0, 0%, 0%, 0.9)";
+  } else {
+    style.viewBoxBorder =  "hsla(190, 100%, 20%, 0.8)";
+    style.viewBoxBorder2 = "hsla( 10,  60%, 80%, 0.8)";
+    style.outsideFill = "hsla(0, 0%, 100%, 0.4)";
+    style.backgroundColor = "hsla(0, 0%, 100%, 0.9)";
+  }
+  return style;
+}
+
 function renderViewRectangle(context, viewrect, props) {
 
   context.clearRect(0, 0, props.width, props.height);
@@ -71,5 +87,6 @@ function renderViewRectangle(context, viewrect, props) {
 }
 
 module.exports = {
-  render: renderViewRectangle
+  render: renderViewRectangle,
+  calculateStyleFromTheme: calculateStyleFromTheme,
 };