From 792d5b9e02b42982e3e9aa3f9be7b008a1a855c6 Mon Sep 17 00:00:00 2001
From: Scott Schiller <spam@schillmania.com>
Date: Sun, 28 May 2017 20:26:35 -0700
Subject: [PATCH] `eslint --fix` and friends.

---
 demo/cassette-tape/script/cassette-tape-ui.js | 180 ++++++++----------
 1 file changed, 83 insertions(+), 97 deletions(-)

diff --git a/demo/cassette-tape/script/cassette-tape-ui.js b/demo/cassette-tape/script/cassette-tape-ui.js
index 3978b518..fc9ea21f 100644
--- a/demo/cassette-tape/script/cassette-tape-ui.js
+++ b/demo/cassette-tape/script/cassette-tape-ui.js
@@ -42,8 +42,8 @@ var CanvasImage = function(canvas, image) {
   this.element = canvas || document.createElement('canvas');
   // IE 10 complains if 'auto' is used for style.width|height.
 
-  this.element.style.width = width+'px';
-  this.element.style.height = height+'px';
+  this.element.style.width = width + 'px';
+  this.element.style.height = height + 'px';
   this.element.width = width;
   this.element.height = height;
   this.context = this.element.getContext('2d');
@@ -66,8 +66,8 @@ CanvasImage.prototype = {
         this.context.drawImage(this.element, x, y);
         // Add an extra layer, prevents it from rendering lines
         // on top of the images (does makes it slower though)
-        if (x>=0 && y>=0) {
-          this.context.drawImage(this.element, -(x-1), -(y-1));
+        if (x >= 0 && y >= 0) {
+          this.context.drawImage(this.element, -(x - 1), -(y - 1));
         }
       }
     }
@@ -259,24 +259,16 @@ function TapeUI(oOptions) {
   var dom = {};
 
   var spoolWidth = 91;
-
   var borderMaxWidth = 76;
-
-  var reelBoxWidth = 234;
-
   var tapeWidth = 480;
-  var tapeHeight = parseInt(tapeWidth/1.6, 10);
-
-  var blurCanvas;
+  var tapeHeight = parseInt(tapeWidth / 1.6, 10);
 
   var maskCanvas;
   var maskCanvasLoaded;
-  var maskContext;
+  // var maskContext;
   var maskImage;
   var maskVisible;
 
-  var context;
-
   function getBackgroundURL(node) {
 
     var url;
@@ -303,7 +295,7 @@ function TapeUI(oOptions) {
 
     url = url.replace('url(', '').replace(')', '');
 
-    url = url.replace(/\'/g, '').replace(/\"/g, '');
+    url = url.replace(/'/g, '').replace(/"/g, '');
 
     return url;
 
@@ -434,7 +426,7 @@ function TapeUI(oOptions) {
         callback();
       }
 
-    }
+    };
 
     image.src = url;
 
@@ -450,16 +442,16 @@ function TapeUI(oOptions) {
     }
 
     var screenX = window.innerWidth,
-        screenX2 = parseInt(screenX/2, 10),
+        screenX2 = parseInt(screenX / 2, 10),
         screenY = window.innerHeight,
-        screenY2 = parseInt(screenY/2, 10),
+        screenY2 = parseInt(screenY / 2, 10),
         x, y,
         node = dom.node,
         blurNode = dom.blurNode;
 
     if (node) {
-      x = parseInt(screenX2 - (tapeWidth/2), 10);
-      y = parseInt(screenY2 - (tapeHeight/2), 10);
+      x = parseInt(screenX2 - (tapeWidth / 2), 10);
+      y = parseInt(screenY2 - (tapeHeight / 2), 10);
       node.style.left = x + 'px';
       node.style.top = y + 'px';
       if (blurNode) {
@@ -467,12 +459,12 @@ function TapeUI(oOptions) {
         blurNode.style.marginTop = -y + 'px';
       }
     }
- 
+
   }
 
   var readyCompleteTimer = null;
 
-  function readyComplete(loader) {
+  function readyComplete(/*loader*/) {
 
     utils.css.add(dom.node, css.ready);
     utils.css.add(dom.node, css.dropin);
@@ -517,7 +509,7 @@ function TapeUI(oOptions) {
 
   }
 
-  function init() {
+  function initTapeUI() {
 
     var i, j;
 
@@ -531,7 +523,7 @@ function TapeUI(oOptions) {
       label: oOptions.node.querySelectorAll('div.label'),
       maskImages: oOptions.node.querySelectorAll('.image-mask'),
       blurNode: oOptions.node.querySelectorAll('.blur-image')
-    }
+    };
 
     if (dom.canvas && dom.canvas.length) {
       dom.canvas = dom.canvas[0];
@@ -545,7 +537,7 @@ function TapeUI(oOptions) {
 
     // images needing masking?
     if (dom.maskImages) {
-      for (i=0, j=dom.maskImages.length; i<j; i++) {
+      for (i = 0, j = dom.maskImages.length; i < j; i++) {
         createMaskedImage(dom.maskImages[i]);
       }
     }
@@ -578,7 +570,7 @@ function TapeUI(oOptions) {
     // limit to between 0 and 1
     size = Math.min(1, Math.max(0, size));
 
-    var borderWidth = Math.floor(borderMaxWidth*size);
+    var borderWidth = Math.floor(borderMaxWidth * size);
 
     var margin;
 
@@ -588,7 +580,7 @@ function TapeUI(oOptions) {
 
       reel.style.borderWidth = borderWidth + 'px';
 
-      margin = -(Math.floor(spoolWidth/2) + borderWidth) + 'px';
+      margin = -(Math.floor(spoolWidth / 2) + borderWidth) + 'px';
 
       reel.style.marginLeft = margin;
 
@@ -604,7 +596,7 @@ function TapeUI(oOptions) {
 
   function deg2rad(degrees) {
 
-    return (Math.PI/180)*degrees;
+    return (Math.PI / 180) * degrees;
 
   }
 
@@ -628,20 +620,20 @@ function TapeUI(oOptions) {
     var bottomTapeOffset = scaleHeight(0.998);
 
     var leftReel = {
-      left: Math.floor(scaleWidth(0.29) - (spoolWidth/2) - leftReelRadius) + 4,
+      left: Math.floor(scaleWidth(0.29) - (spoolWidth / 2) - leftReelRadius) + 4,
       top: scaleHeight(0.42)
     };
 
     var guideRadius = 16;
 
     var rightReel = {
-      left: Math.floor(scaleWidth(0.71) + (spoolWidth/2) + rightReelRadius) - 3,
+      left: Math.floor(scaleWidth(0.71) + (spoolWidth / 2) + rightReelRadius) - 3,
       top: scaleHeight(0.42)
     };
 
     var leftGuide = {
       left: scaleWidth(0.11) - guideRadius,
-      top: bottomTapeOffset - guideRadius*2
+      top: bottomTapeOffset - (guideRadius * 2)
     };
 
     var rightGuide = {
@@ -666,7 +658,7 @@ function TapeUI(oOptions) {
 
     if (!forceUpdate && tapeCache.leftReel.left === leftReel.left && tapeCache.rightReel.left === rightReel.left) {
       // no change since last time.
-      return false;
+      return;
     }
 
     // otherwise, update everything.
@@ -686,7 +678,7 @@ function TapeUI(oOptions) {
     context.moveTo(bottomMidPoint.left, bottomMidPoint.top);
 
     // -> left guide
-    context.lineTo(bottomLeftPoint.from[0] + guideRadius, bottomLeftPoint.from[1] + guideRadius*2);
+    context.lineTo(bottomLeftPoint.from[0] + guideRadius, bottomLeftPoint.from[1] + (guideRadius * 2));
 
     // arc
     context.arc(bottomLeftPoint.from[0] + guideRadius, bottomLeftPoint.from[1] + guideRadius, guideRadius, deg2rad(90), deg2rad(180), false);
@@ -738,7 +730,7 @@ function TapeUI(oOptions) {
 
   }
 
-  function setReelSpeed(reel, speed) {
+  function setReelSpeed(/*reel, speed*/) {
 
     // base speed plus a given amount based on speed (multiplier?)
 
@@ -749,7 +741,7 @@ function TapeUI(oOptions) {
     var newFrames = 0;
 
     setReelSpeed(dom.reels[0], progress);
-    newFrames += setReelSize(0, dom.reels[0], 1-progress);
+    newFrames += setReelSize(0, dom.reels[0], 1 - progress);
     newFrames += setReelSize(1, dom.reels[1], progress);
 
     return newFrames;
@@ -803,18 +795,18 @@ function TapeUI(oOptions) {
       });
     },
     dom: dom,
-    init: init,
+    init: initTapeUI,
     setProgress: setProgress,
     start: start,
     stop: stop
-    
+
   };
 
 }
 
 function resetTapeUIs() {
 
-  for (var i=tapeUIs.length; i--;) {
+  for (var i = tapeUIs.length; i--;) {
     tapeUIs[i].setProgress(0);
   }
 
@@ -824,11 +816,11 @@ dragHandler = (function() {
 
   var css,
       data,
-      dom,
       events;
 
   function findPos(obj) {
-    var curleft = curtop = 0;
+    var curleft = 0;
+    var curtop = 0;
     if (obj.offsetParent) {
       do {
         curleft += obj.offsetLeft;
@@ -875,7 +867,7 @@ dragHandler = (function() {
         return true;
       }
       // additional safety check
-      if (clickTarget && clickTarget.tagName == 'INPUT') {
+      if (clickTarget && clickTarget.tagName === 'INPUT') {
         ignoreNextClick = true;
         return true;
       }
@@ -925,15 +917,8 @@ dragHandler = (function() {
       e.preventDefault();
       return false;
     }
-    
-  };
 
-  function updateLastXY() {
-    var target = data.dragTarget.node;
-    var xy = findPos(target);
-    data.dragTarget.lastX = xy[0];
-    data.dragTarget.lastY = xy[1];
-  }
+  };
 
   function addEvents() {
     if (data.dragTarget && data.dragTarget.node) {
@@ -941,7 +926,7 @@ dragHandler = (function() {
     }
   }
 
-  function init() {
+  function initDragHandler() {
     data.dragTarget.node = document.querySelector('.tape.draggable');
     data.dragTarget.blurNode = document.querySelector('.tape.draggable .blur-image');
     addEvents();
@@ -949,16 +934,14 @@ dragHandler = (function() {
 
   return {
     data: data,
-    init: init
-  }
+    init: initDragHandler
+  };
 
 }());
 
 function ControlHandler(tapeUIDOM, soundObject) {
 
-  var soundObject;
-
-  var css, dom, events, eventMap, soundOK;
+  var dom, events, eventMap, soundOK;
 
   // percentage to jump with each click of the rewind / fast-forward buttons
   var rewind_ffwd_offset = 0.033;
@@ -974,12 +957,13 @@ function ControlHandler(tapeUIDOM, soundObject) {
   events = {
     mousedown: function(e) {
       // need <a>
-      var target = e.target,
-          className = e.target.className;
+      var className = e.target.className;
       if (soundOK && typeof eventMap[className] !== 'undefined') {
         eventMap[className](e);
-        return events.stopEvent(e);
+        events.stopEvent(e);
+        return false;
       }
+      return true;
     },
     stopEvent: function(e) {
       e.preventDefault();
@@ -989,40 +973,42 @@ function ControlHandler(tapeUIDOM, soundObject) {
       // simple/dumb: just toggle the playstate of the tape.
       if (ignoreNextClick) {
         ignoreNextClick = false;
-        return events.stopEvent(e);
+        events.stopEvent(e);
+        return false;
       }
-      var target = e.target,
-          className = e.target.className;
-      if (typeof eventMap[className] == 'undefined') {
+      var className = e.target.className;
+      if (typeof eventMap[className] === 'undefined') {
         soundObject.togglePause();
       } else {
-        return events.mousedown(e);
+        events.mousedown(e);
+        return false;
       }
+      return true;
     }
   };
 
   eventMap = {
-    'play': function(e) {
+    play: function() {
       soundObject.play();
     },
-    'rew': function() {
+    rew: function() {
       // rewind
-      var newPosition = Math.max(0, soundObject.position - soundObject.duration * rewind_ffwd_offset);
+      var newPosition = Math.max(0, soundObject.position - (soundObject.duration * rewind_ffwd_offset));
       if (soundObject.duration) {
         soundObject.setPosition(newPosition);
         // if not playing, force update?
-        tapeUIs[0].setProgress(newPosition/soundObject.duration);
+        tapeUIs[0].setProgress(newPosition / soundObject.duration);
       }
     },
-    'ffwd': function() {
+    ffwd: function() {
       // fast-forward
       var newPosition;
       if (soundObject.duration) {
-        newPosition = Math.min(soundObject.duration, soundObject.position + soundObject.duration * rewind_ffwd_offset);
+        newPosition = Math.min(soundObject.duration, soundObject.position + (soundObject.duration * rewind_ffwd_offset));
         soundObject.setPosition(newPosition);
       }
     },
-    'stop': function() {
+    stop: function() {
       // equivalent to digital pause
       soundObject.pause();
     }
@@ -1033,7 +1019,7 @@ function ControlHandler(tapeUIDOM, soundObject) {
     utils.events.add(tapeUIDOM.node, 'click', events.click);
   }
 
-  function init() {
+  function initControlHandler() {
     soundOK = soundManager.ok();
     dom.o = tapeUIDOM.node.querySelector('.controls');
     dom.play = dom.o.querySelector('.play');
@@ -1043,7 +1029,7 @@ function ControlHandler(tapeUIDOM, soundObject) {
     addEvents();
   }
 
-  init();
+  initControlHandler();
 
 }
 
@@ -1053,22 +1039,22 @@ function init() {
 
   if (!hasCanvas) {
     // assume a crap browser (e.g., IE 8.)
-    return false;
+    return;
   }
 
   var tapes,
-      i, s;
+      j, s;
 
   dragHandler.init();
 
   function genericStart() {
-    for (var i=tapeUIs.length; i--;) {
+    for (var i = tapeUIs.length; i--;) {
       tapeUIs[i].start();
     }
   }
 
   function genericStop() {
-    for (var i=tapeUIs.length; i--;) {
+    for (var i = tapeUIs.length; i--;) {
       tapeUIs[i].stop();
     }
   }
@@ -1080,9 +1066,9 @@ function init() {
       url: 'http://freshly-ground.com/data/audio/sm2/Chill With Schill (Summer 2012 Session Excerpt).mp3',
       multiShot: false,
       whileplaying: function() {
-        for (var i=tapeUIs.length; i--;) {
+        for (var i = tapeUIs.length; i--;) {
           // console.log(this.position, this.durationEstimate);
-          tapeUIs[i].setProgress(this.position/this.durationEstimate);
+          tapeUIs[i].setProgress(this.position / this.durationEstimate);
         }
       },
       onplay: genericStart,
@@ -1095,12 +1081,12 @@ function init() {
 
   tapes = document.querySelectorAll('div.tape');
 
-  for (i=tapes.length; i--;) {
+  for (j = tapes.length; j--;) {
     tapeUIs.push(new TapeUI({
-      node: tapes[i],
+      node: tapes[j],
       sound: s
     }));
-    tapeUIs[tapeUIs.length-1].init();
+    tapeUIs[tapeUIs.length - 1].init();
   }
 
   resetTapeUIs();
@@ -1123,33 +1109,33 @@ function delayInit() {
 utils = (function() {
 
   var addEventHandler = (typeof window.addEventListener !== 'undefined' ? function(o, evtName, evtHandler) {
-    return o.addEventListener(evtName,evtHandler,false);
+    return o.addEventListener(evtName, evtHandler, false);
   } : function(o, evtName, evtHandler) {
-    o.attachEvent('on'+evtName,evtHandler);
+    o.attachEvent('on' + evtName, evtHandler);
   });
 
   var removeEventHandler = (typeof window.removeEventListener !== 'undefined' ? function(o, evtName, evtHandler) {
-    return o.removeEventListener(evtName,evtHandler,false);
+    return o.removeEventListener(evtName, evtHandler, false);
   } : function(o, evtName, evtHandler) {
-    return o.detachEvent('on'+evtName,evtHandler);
+    return o.detachEvent('on' + evtName, evtHandler);
   });
 
-  var classContains = function(o,cStr) {
-    return (typeof(o.className)!=='undefined'?o.className.match(new RegExp('(\s|^)'+cStr+'(\s|$)')):false);
+  var classContains = function(o, cStr) {
+    return (typeof (o.className) !== 'undefined' ? o.className.match(new RegExp('(^)' + cStr + '($)')) : false);
   };
 
-  var addClass = function(o,cStr) {
-    if (!o || !cStr || classContains(o,cStr)) {
-      return false;
+  var addClass = function(o, cStr) {
+    if (!o || !cStr || classContains(o, cStr)) {
+      return;
     }
-    o.className = (o.className?o.className+' ':'')+cStr;
+    o.className = (o.className ? o.className + ' ' : '') + cStr;
   };
 
-  var removeClass = function(o,cStr) {
-    if (!o || !cStr || classContains(o,cStr)) {
-      return false;
+  var removeClass = function(o, cStr) {
+    if (!o || !cStr || classContains(o, cStr)) {
+      return;
     }
-    o.className = o.className.replace(new RegExp('( '+cStr+')|('+cStr+')','g'),'');
+    o.className = o.className.replace(new RegExp('( ' + cStr + ')|(' + cStr + ')', 'g'), '');
   };
 
   return {
@@ -1162,7 +1148,7 @@ utils = (function() {
       add: addEventHandler,
       remove: removeEventHandler
     }
-  }
+  };
 
 }());
 
@@ -1179,4 +1165,4 @@ soundManager.setup({
 // interface
 window.tapeUIs = tapeUIs;
 
-}(window));
\ No newline at end of file
+}(window));