Color shift slider, close buttons, fix mouse end

js/proximity.js

@@ -248,7 +248,7 @@ function easeInOutCirc (t, b, c, d) {
 }
 /* eslint-enable no-unused-vars */
 
-/* UTILITY FUNCTIONS */
+/* TOGGLE FUNCTIONS */
 
 function toggleHelp () {
     var help, controls;
@@ -338,6 +338,8 @@ function toggleLines () {
     linesCheckbox.checked = drawLines;
 }
 
+/* UTILITY FUNCTIONS */
+
 function randomInt (min, max) {
     // inclusive of min and max
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -579,6 +581,14 @@ function randomizeCycles (points, cycleDuration) {
     return points;
 }
 
+function synchronizeCycles (points, cycleDuration) {
+    /* Assigns every point the same cycle start (0) */
+    for (var i = 0; i < points.original.length; i++) {
+        points.target[i][3] = 0;
+    }
+    return points;
+}
+
 /* DRAW FUNCTIONS */
 
 function drawPolygon (polygon, points, counter, tweeningFns) {
@@ -849,12 +859,10 @@ window.onload = function () {
     });
 
     window.addEventListener('touchend', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
     });
 
     window.addEventListener('touchcancel', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
     });
 
@@ -875,21 +883,18 @@ window.onload = function () {
     });
 
     window.addEventListener('mouseup', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
     });
 
     window.addEventListener('mouseleave', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
     });
 
     document.addEventListener('mouseleave', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
@@ -949,6 +954,19 @@ window.onload = function () {
         toggleControls();
     }, false);
 
+    document.getElementById('close-help').addEventListener('click', function () {
+        toggleHelp();
+    }, false);
+
+    document.getElementById('close-controls').addEventListener('click', function () {
+        toggleControls();
+    }, false);
+
+    document.getElementById('synchronize-cycles').addEventListener('click', function () {
+        synchronizeCycles(polygonPoints, cycleDuration);
+        return false;
+    }, false);
+
     document.getElementById('randomize-cycles').addEventListener('click', function () {
         randomizeCycles(polygonPoints, cycleDuration);
         return false;
@@ -1005,6 +1023,19 @@ window.onload = function () {
         lineSize = parseInt(this.value, 10);
     });
 
+    var colorShiftRange, colorShiftInput;
+    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
+    colorShiftRange.value = disconnectedColorShiftAmt;
+    colorShiftRange.addEventListener('input', function (e) {
+        disconnectedColorShiftAmt = parseInt(this.value, 10);
+    });
+
+    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
+    colorShiftRange.value = disconnectedColorShiftAmt;
+    colorShiftRange.addEventListener('input', function (e) {
+        disconnectedColorShiftAmt = parseInt(this.value, 10);
+    });
+
 
     debugCheckbox.addEventListener('change', function (e) {
         toggleDebug();