update to 1.2.1

FlorianFe · Jul 28, 2020 · 864ada0 · 864ada0
1 parent 79bd071
commit 864ada0
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 25 deletions.
diff --git a/bower.json b/bower.json
@@ -11,7 +11,6 @@
     "polymer",
     "electron"
   ],
-  "homepage": "",
   "ignore": [
     "**/.*",
     "node_modules",
@@ -35,6 +34,7 @@
     "app-storage": "^2.0.2",
     "paper-dialog": "PolymerElements/paper-dialog#^2.0.1",
     "web-animations-js": "^2.3.1",
-    "paper-button": "^2.0.0"
+    "paper-button": "^2.0.0",
+    "iron-a11y-keys-behavior": "^2.0.0"
   }
 }
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 
       html
       {
-        user-select: unset; 
+        user-select: none; 
 
         /* definitions */
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Elements",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A periodic table viewer desktop app",
   "main": "main.js",
   "scripts": {

diff --git a/periodic-table/periodic-table-content/chemical-element-page/chemical-element-page.html b/periodic-table/periodic-table-content/chemical-element-page/chemical-element-page.html
@@ -20,7 +20,7 @@
 
         :host
         {
-          font-size: 0.5vw;
+          font-size: 1.1vw;
 
           background-color: var(--background-color);
           color: var(--text-color);
@@ -38,7 +38,7 @@
 
         .element-name
         {
-          font-size: 1vw;
+          font-size: 1.5vw;
         }
 
         .container
@@ -48,10 +48,12 @@
           width: 100%;
         }
 
+
         .value-field
         {
-          user-select: text; 
+           user-select: text; 
         }
+
 
         .item-3x
         {
@@ -62,27 +64,26 @@
         .item-5x
         {
           flex: 5;
-          padding: 2vw;
+          padding: 1.5vw;
         }
 
         table
         {
-          font-size: 0.9vw;
           width: 100%;
           border-spacing: 0.1vw;
         }
 
-        b
-        {
-          font-size: 0.9vw;
-        }
-
         td
         {
           border-width: 0.1vw;
           width: 33%;
         }
 
+        .blank
+        {
+          height: 0.5vw;
+        }
+
         td.indexer
         {
           width: 67%;
@@ -132,8 +133,8 @@
                   <td>&nbsp;</td>
                 </tr>
                 <tr>
-                  <td class="indexer"></td>
-                  <td>&nbsp;</td>
+                  <td class="indexer blank"></td>
+                  <td></td>
                 </tr>
                 <tr>
                   <td class="indexer"><b>[[localize("atomic number")]]</b></td>
@@ -148,8 +149,8 @@
                   <td><span class="value-field">[[element.electronegativity]]</span></td>
                 </tr>
                 <tr>
-                  <td class="indexer"></td>
-                  <td>&nbsp;</td>
+                  <td class="indexer blank"></td>
+                  <td></td>
                 </tr>
                 <tr>
                   <td class="indexer"><b>[[localize("boiling point")]]</b></td>

diff --git a/periodic-table/periodic-table-content/chemical-element/chemical-element.js b/periodic-table/periodic-table-content/chemical-element/chemical-element.js
@@ -17,7 +17,7 @@ class ChemicalElement extends Polymer.Element
 
   static get observers()
   {
-    return ['_onSelectedSymbolChange(selectedSymbol)'];
+    return ['_updateSelectedClass(selectedSymbol)'];
   }
 
   constructor()
@@ -37,9 +37,11 @@ class ChemicalElement extends Polymer.Element
     {
       this.dispatchEvent(new CustomEvent('chemical-element-selected', {detail: {symbol: this.symbol}}));
     });
+
+    this._updateSelectedClass();
   }
 
-  _onSelectedSymbolChange()
+  _updateSelectedClass()
   {
     if(this.selectedSymbol === this.symbol)
     {

diff --git a/periodic-table/periodic-table-content/element-grid/element-grid.js b/periodic-table/periodic-table-content/element-grid/element-grid.js
@@ -0,0 +1,2 @@
+
+module.exports = require('./element-grid.json');
diff --git a/periodic-table/periodic-table-content/element-grid/element-grid.json b/periodic-table/periodic-table-content/element-grid/element-grid.json
@@ -0,0 +1,12 @@
+[
+    [ "h", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "he" ],
+    [ "li", "be", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "b", "c", "n", "o", "f", "ne" ],
+    [ "na", "mg", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "al", "si", "p", "s", "cl", "ar"],
+    [ "k", "ca", "sc", "ti", "v", "cr", "mn", "fe", "co", "ni", "cu", "zn", "ga", "ge", "as", "se", "br", "kr"],
+    [ "rb", "sr", "y", "zr", "nb", "mo", "tc", "ru", "rh", "pd", "ag", "cd", "in", "sn", "sb", "te", "i", "xe"],
+    [ "cs", "ba", "-", "hf", "ta", "w", "re", "os", "ir", "pt", "au", "hg", "tl", "pb", "bi", "po", "at", "rn"],
+    [ "fr", "ra", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
+    [ "-", "-", "-", "la", "ce", "pr", "nd", "pm", "sm", "eu", "gd", "tb", "dy", "ho", "er", "tm", "yb", "lu"],
+    [ "-", "-", "-", "ac", "th", "pa", "u", "np", "pu", "am", "cm", "bk", "cf", "es", "fm", "md", "no", "lr"]
+]
+
diff --git a/periodic-table/periodic-table-content/periodic-table-content.html b/periodic-table/periodic-table-content/periodic-table-content.html
@@ -3,6 +3,7 @@
 
 <!-- Imports Dependencies -->
 
+<link rel="import" href="../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
@@ -116,7 +117,7 @@
     <div class="align-right">
       <iron-icon id="settings-icon" icon="icons:settings"></iron-icon>
     </div>
-
+    
     <div class="table-container">
 
         <div class="item"><div class="index">A I</div></div>

diff --git a/periodic-table/periodic-table-content/periodic-table-content.js b/periodic-table/periodic-table-content/periodic-table-content.js
@@ -1,5 +1,11 @@
 
-class PeriodicTableContent extends Polymer.Element
+const SIZE_X = 18;
+const SIZE_Y = 9;
+
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+class PeriodicTableContent extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element)
 {
   static get is()
   {
@@ -20,10 +26,56 @@ class PeriodicTableContent extends Polymer.Element
       {
         type: String,
         notify: true
+      },
+      keyEventTarget: 
+      {
+        type: Object,
+        value: function() {
+          return document.body;
+        }
       }
     }
   }
 
+  get keyBindings() 
+  {
+    return {
+      'left': '_leftPressed',
+      'right': '_rightPressed',
+      'up': '_upPressed',
+      'down': '_downPressed',
+      'a': '_leftPressed',
+      'd': '_rightPressed',
+      'w': '_upPressed',
+      's': '_downPressed',
+    }
+  }
+
+  _leftPressed(){ this._changeSelectedElementByPosition(-1, 0); }
+  _rightPressed(){ this._changeSelectedElementByPosition(1, 0); }
+  _upPressed(){ this._changeSelectedElementByPosition(0, -1); }
+  _downPressed(){ this._changeSelectedElementByPosition(0, 1); }
+
+  ready()
+  {
+    super.ready();
+
+    this.positionToElementSymbol = require('./periodic-table/periodic-table-content/element-grid/element-grid');
+    this.elementSymbolToPosition = {};
+
+    for(let x=0; x<SIZE_X; x++)
+    for(let y=0; y<SIZE_Y; y++)
+    {
+      const symbol = this.positionToElementSymbol[y][x];
+      if(symbol !== "-")
+      {
+        this.elementSymbolToPosition[symbol] = { x: x, y: y };
+      }
+    }
+
+    console.log(this.elementSymbolToPosition);
+  }
+
   connectedCallback()
   {
     super.connectedCallback();
@@ -60,6 +112,84 @@ class PeriodicTableContent extends Polymer.Element
       this.style.setProperty(key, value);
     });
   }
+
+  _changeSelectedElementByPosition(deltaX, deltaY)
+  {
+    const position = this.elementSymbolToPosition[this.selectedElementSymbol];
+
+    const nextPosition = { 
+      x: clamp(position.x + deltaX, 0, SIZE_X - 1),
+      y: clamp(position.y + deltaY , 0, SIZE_Y - 1)
+    };
+
+    console.log(nextPosition);
+
+    const horizontalBridges = [
+      { left: 'h', right: 'he' },
+      { left: 'be', right: 'b' },
+      { left: 'mg', right: 'al' },
+
+      { left: 'he', right: 'li' },
+      { left: 'ne', right: 'na' },
+      { left: 'ar', right: 'k' },
+      { left: 'kr', right: 'rb' },
+      { left: 'xe', right: 'cs' },
+      { left: 'rn', right: 'fr' },
+
+      { left: 'ba', right: 'la' },
+      { left: 'lu', right: 'hf' },
+      { left: 'ra', right: 'ac' }
+    ];
+
+    if(deltaX === 1)
+    {
+      for(let i=0; i<horizontalBridges.length; i++) 
+      {
+        if(this.selectedElementSymbol === horizontalBridges[i].left)
+        {
+          this.selectedElementSymbol =horizontalBridges[i].right;
+          return;
+        }
+      }
+    }
+
+    if(deltaX === -1)
+    {
+      for(let i=0; i<horizontalBridges.length; i++) 
+      {
+        if(this.selectedElementSymbol === horizontalBridges[i].right)
+        {
+          this.selectedElementSymbol =horizontalBridges[i].left;
+          return;
+        }
+      }
+    }
+
+    if(this.selectedElementSymbol === 'y' && deltaX === 0 && deltaY === 1)
+    {
+      this.selectedElementSymbol = 'la';
+      return;
+    }
+
+    if(this.positionToElementSymbol[nextPosition.y][nextPosition.x] !== "-")
+    {
+      console.log(this.positionToElementSymbol[nextPosition.y][nextPosition.x]);
+      this.selectedElementSymbol = this.positionToElementSymbol[nextPosition.y][nextPosition.x];
+    }
+    else
+    {
+      const afterNextPosition = { 
+        x: clamp(nextPosition.x + deltaX, 0, SIZE_X - 1),
+        y: clamp(nextPosition.y + deltaY , 0, SIZE_Y - 1)
+      };
+
+      if(this.positionToElementSymbol[afterNextPosition.y][afterNextPosition.x] !== "-")
+      {
+        console.log(this.positionToElementSymbol[afterNextPosition.y][afterNextPosition.x]);
+        this.selectedElementSymbol = this.positionToElementSymbol[afterNextPosition.y][afterNextPosition.x];
+      }
+    }
+  }
 }
 
 customElements.define(PeriodicTableContent.is, PeriodicTableContent);
diff --git a/periodic-table/periodic-table.js b/periodic-table/periodic-table.js
@@ -15,8 +15,6 @@ class PeriodicTable extends Polymer.Element
       {
         type: String,
         observer(newValue, oldValue) {
-
-          console.log(newValue);
           this._updateCSSVariables();
         }
       }