start conversion to ES6 (finally)

app/components/gui/blink1ColorPicker.js

@@ -17,7 +17,8 @@ var Blink1Service = require('../../server/blink1Service');
 
 // var ColorPicker = require('react-color');
 
-var HtmlColorChart = require('./htmlColorChart');
+// var HtmlColorChart = require('./htmlColorChart');
+import HtmlColorChart from './htmlColorChart';
 var tinycolor = require('tinycolor2');
 
 

app/components/gui/htmlColorChart.js

@@ -3,115 +3,112 @@
 
 "use strict";
 
-var React = require('react');
+import React, { Component } from 'react';
 
-var htmlcolors = require('./htmlColorsList');
+let htmlcolors = require('./htmlColorsList');
 
 // var colorChartPng = require('../../images/colorChart.png');
-var cw = 12; // cell width
-var ch = 13;  // cell height
+const cw = 12; // cell width
+const ch = 13;  // cell height
 
 
-var HtmlColorChart = React.createClass({
-    propTypes: {
-        handleClick: React.PropTypes.func,
-        currentColor: React.PropTypes.string
-    },
-    getInitialState: function() {
-        return {
-            down:false, x:0,y:0, color:'#000000'
-        }
-    },
-    // shouldComponentUpdate: function(nextProps, nextState) {
+class HtmlColorChart extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { down:false, x:0,y:0, color:'#000000'};
+    }
+    // don't do this
+    // shouldComponentUpdate(nextProps, nextState) {
     //     if (this.props.color !== nextProps.color) {
     //         return true;
     //     }
     //     return false;
-    // },
-    determineColor: function(x,y) {
-      var c = Math.floor(x/cw);
-      var r = Math.floor(y/ch);
-      var color = htmlcolors[r][c];
+    // }
+    determineColor(x,y) {
+      let c = Math.floor(x/cw);
+      let r = Math.floor(y/ch);
+      let color = htmlcolors[r][c];
       return color;
-    },
-    getXY: function(evt) {
-      var dim = evt.target.getBoundingClientRect();
-      var x = evt.clientX - dim.left;
-      var y = evt.clientY - dim.top;
+    }
+    getXY(evt) {
+      const dim = evt.target.getBoundingClientRect();
+      let x = evt.clientX - dim.left;
+      let y = evt.clientY - dim.top;
       return {x,y};
-    },
-    sendColor: function(evt) {
-        var {x,y} = this.getXY(evt);
-        var color = this.determineColor(x,y);
+    }
+    sendColor(evt) {
+        let {x,y} = this.getXY(evt);
+        let color = this.determineColor(x,y);
         this.setState({x,y,color});
         this.props.handleClick(color);
-    },
-    convertXYtoCR: function(x,y) {
-        var c = Math.floor(x/cw);
-        var r = Math.floor(y/ch);
+    }
+    convertXYtoCR(x,y) {
+        let c = Math.floor(x/cw);
+        let r = Math.floor(y/ch);
         return {c,r};
-    },
-    getXYForColor: function(color) {
-        var x=-1, y=-1;
-        for( var i=0; i< htmlcolors.length; i++ ) {
-            for( var j=0; j< htmlcolors[0].length; j++ ) {
+    }
+    getXYForColor(color) {
+        let x=-1, y=-1;
+        for( let i=0; i< htmlcolors.length; i++ ) {
+            for( let j=0; j< htmlcolors[0].length; j++ ) {
                 if( htmlcolors[i][j] === color ) {
-                    var x = (j*cw), y = (i*ch);
-                    // console.log("match at:",j,i, "=>", (j*cw),(i*ch), "::"); //, self.state.x, self.state.y);
+                    let x = (j*cw), y = (i*ch);
                     return {x,y};
                 }
             }
         }
         return {x,y};
-    },
-
-    handleColorClick: function(evt) {
+    }
+    handleColorClick(evt) {
         this.setState({down:true});
         this.sendColor(evt);
-    },
-    handleColorUp: function() {
+    }
+    handleColorUp() {
         this.setState({down:false});
-    },
-    handleColorMove: function(evt) {
+    }
+    handleColorMove(evt) {
         if( this.state.down ) {
             this.sendColor(evt);
         }
-    },
-    render: function() {
-        var self = this;
+    }
+    render() {
         // find closest color box and make outline for it
-        var createBoxCoords = function(x,y) {
+        let createBoxCoords = (x,y) => {
             if( x === -1 && y===-1 ) {
                 return '';
             }
             x = Math.floor(x/cw) * cw + (cw/2);
             y = Math.floor(y/ch) * ch + (ch/2);
-            var str = '';
+            let str = '';
             str +=  (x-7)+','+(y-7)+' ' +  // top left
                     (x+7)+','+(y-7)+' ' +  // top right
                     (x+7)+','+(y+7)+' ' +  // bottom right
                     (x-7)+','+(y+7)+' ' +
                     (x-7)+','+(y-7);  // top left
             return str;
         }
-        var {x,y} = self.getXYForColor( this.props.currentColor.toUpperCase() );
+        let {x,y} = this.getXYForColor( this.props.currentColor.toUpperCase() );
         // console.log("currColor:",this.props.currentColor, "xy:",x,y);
         return (
-            <div>
               <div style={{position:'relative', display:'inline-block' }} >
                 <img width={600/2} height={390/2} src="images/colorChart.png" alt=""
-                  onMouseDown={this.handleColorClick}
-                  onMouseMove={this.handleColorMove}
-                  onMouseUp  ={this.handleColorUp}
+                  onMouseDown={this.handleColorClick.bind(this)}
+                  onMouseMove={this.handleColorMove.bind(this)}
+                  onMouseUp  ={this.handleColorUp.bind(this)}
                   style={{display:'block', maxWidth:'100%', height:'auto', WebkitUserDrag:'none'}}
                 />
                 <svg width={600/2} height={390/2} style={{position:'absolute',top:0, left:0, pointerEvents:'none'}}>
                   <polyline stroke="#bbb" strokeWidth="4" fill="none" points={createBoxCoords(x,y)} />
                 </svg>
               </div>
-            </div>
         );
     }
-});
+}
+
+HtmlColorChart.propTypes = {
+    handleClick: React.PropTypes.func,
+    currentColor: React.PropTypes.string
+};
 
-module.exports = HtmlColorChart;
+export default HtmlColorChart;
+// module.exports = HtmlColorChart;