Use arrow functions over .bind

src/js/HuesCore.js

@@ -112,11 +112,11 @@ function HuesCore(defaults) {
         settingsupdated : []
     };
 
-    window.onerror = function(msg, url, line, col, error) {
+    window.onerror = (msg, url, line, col, error) => {
         this.error(msg);
         // Get more info in console
         return false;
-    }.bind(this);
+    };
     
     var versionString = "v" + (parseInt(this.version)/10).toFixed(1);
     console.log("0x40 Hues " + versionString + " - start your engines!");
@@ -140,10 +140,8 @@ function HuesCore(defaults) {
     this.vCtx = this.visualiser.getContext("2d");
     
     this.soundManager = new SoundManager(this);
-    this.soundManager.init().then(function(response) {
-        setInterval(function() {
-            this.loopCheck();
-        }.bind(this), 1000);
+    this.soundManager.init().then(response => {
+        setInterval(this.loopCheck.bind(this), 1000);
         this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
         this.settings.connectCore(this);
         // Update with merged
@@ -162,7 +160,7 @@ function HuesCore(defaults) {
             document.getElementById("preloadHelper").style.display = "none";
             return;
         }
-    }.bind(this)).then(function(response) {
+    }).then(response => {
         document.getElementById("preloadHelper").classList.add("loaded");
         if(defaults.firstImage) {
             this.setImageByName(defaults.firstImage);
@@ -176,11 +174,11 @@ function HuesCore(defaults) {
                 this.setSong(0);
             }
         }
-    }.bind(this))["catch"](function(error) {
+    }).catch(error => {
         this.error(error);
-    }.bind(this));
+    });
 
-    document.onkeydown = function(e){
+    document.onkeydown = (e) => {
         e = e || window.event;
         if(e.defaultPrevented) {
             return true;
@@ -196,7 +194,7 @@ function HuesCore(defaults) {
         }
         var key = e.keyCode || e.which;
         return this.keyHandler(key);
-    }.bind(this);
+    };
 }
 
 HuesCore.prototype.callEventListeners = function(ev) {
@@ -377,11 +375,11 @@ HuesCore.prototype.setSong = function(index) {
         }
     }
     this.setInvert(false);
-    this.soundManager.playSong(this.currentSong, this.doBuildup, function() {
+    this.soundManager.playSong(this.currentSong, this.doBuildup, () => {
         this.resetAudio();
         this.fillBuildup();
         this.callEventListeners("songstarted");
-    }.bind(this));
+    });
 };
 
 HuesCore.prototype.updateBeatLength = function() {
@@ -470,9 +468,9 @@ HuesCore.prototype.doAutoSong = function() {
         func = this.nextSong;
     }
     if(localStorage["autoSongFadeout"] == "on") {
-        this.soundManager.fadeOut(function() {
+        this.soundManager.fadeOut(() => {
             func.call(this);
-        }.bind(this));
+        });
     } else {
         func.call(this);
     }

src/js/HuesSettings.js

@@ -240,9 +240,7 @@ function HuesSettings(defaults) {
     }
 
     // because we still care about the main window
-    document.getElementById("closeButton").onclick = function() {
-        this.hide();
-    }.bind(this);
+    document.getElementById("closeButton").onclick = this.hide.bind(this);
     if(!this.defaults.noUI) {
         this.initUI();
     }

src/js/HuesUI.js

@@ -100,28 +100,28 @@ HuesUI.prototype.initUI = function() {
     // Prev/next controls
     var imagePrev = document.createElement("div");
     imagePrev.textContent = "<";
-    imagePrev.onclick = function() {this.core.previousImage();}.bind(this);
+    imagePrev.onclick = () => {this.core.previousImage();};
     this.imagePrev = imagePrev;
     var imageNext = document.createElement("div");
     imageNext.textContent = ">";
-    imageNext.onclick = function() {this.core.nextImage();}.bind(this);
+    imageNext.onclick = () =>{this.core.nextImage();};
     this.imageNext = imageNext;
     var songPrev = document.createElement("div");
     songPrev.textContent = "<";
     this.songPrev = songPrev;
-    songPrev.onclick = function() {this.core.previousSong();}.bind(this);
+    songPrev.onclick = () =>{this.core.previousSong();};
     var songNext = document.createElement("div");
     songNext.textContent = ">";
-    songNext.onclick = function() {this.core.nextSong();}.bind(this);
+    songNext.onclick = () =>{this.core.nextSong();};
     this.songNext = songNext;
 
     var songList = document.createElement("div");
     songList.textContent = "SONGS";
-    songList.onclick = function() {this.core.toggleSongList();}.bind(this);
+    songList.onclick = () =>{this.core.toggleSongList();};
     this.songList = songList;
     var imageList = document.createElement("div");
     imageList.textContent = "IMAGES";
-    imageList.onclick = function() {this.core.toggleImageList();}.bind(this);
+    imageList.onclick = () =>{this.core.toggleImageList();};
     this.imageList = imageList;
 
     // Beat timer, x and y blur, millis timer
@@ -141,15 +141,15 @@ HuesUI.prototype.initUI = function() {
     this.settingsToggle = document.createElement("div");
     this.settingsToggle.innerHTML = '&#xe900;'; // COG
     this.settingsToggle.className = 'hues-icon';
-    this.settingsToggle.onclick = function() {
+    this.settingsToggle.onclick = () => {
         this.core.settings.toggle();
-    }.bind(this);
+    };
 
     this.hideToggle = document.createElement("div");
     this.hideToggle.innerHTML = "&#x25BC;";
-    this.hideToggle.onclick = function() {
+    this.hideToggle.onclick = () => {
         this.toggleHide();
-    }.bind(this);
+    };
 
     this.listContainer = document.createElement("div");
     this.visualiserContainer = document.createElement("div");
@@ -322,15 +322,15 @@ RetroUI.prototype.initUI = function() {
     var imageMode = document.createElement("div");
     this.imageModeManual = document.createElement("div");
     this.imageModeManual.textContent = "NORMAL";
-    this.imageModeManual.onclick = function() {
+    this.imageModeManual.onclick = () => {
         this.core.setIsFullAuto(false);
-    }.bind(this);
+    };
     this.imageModeManual.className = "hues-r-manualmode hues-r-button";
     this.imageModeAuto = document.createElement("div");
     this.imageModeAuto.textContent = "FULL AUTO";
-    this.imageModeAuto.onclick = function() {
+    this.imageModeAuto.onclick = () => {
         this.core.setIsFullAuto(true);
-    }.bind(this);
+    };
     this.imageModeAuto.className = "hues-r-automode hues-r-button";
     imageMode.appendChild(this.imageModeManual);
     imageMode.appendChild(this.imageModeAuto);
@@ -363,9 +363,9 @@ RetroUI.prototype.initUI = function() {
     this.hideRestore = document.createElement("div");
     this.hideRestore.className = "hues-r-hiderestore";
     this.hideRestore.innerHTML = "&#x25B2;";
-    this.hideRestore.onclick = function() {
+    this.hideRestore.onclick = () => {
         this.toggleHide();
-    }.bind(this);
+    };
     this.root.appendChild(this.hideRestore);
 
     this.listContainer.className = "hues-r-listcontainer";
@@ -580,18 +580,18 @@ ModernUI.prototype.initUI = function() {
     var label = document.createElement("div");
     label.textContent = "VOL";
     label.className = "hues-m-vol-label";
-    label.onclick = function() {
+    label.onclick = () => {
         this.core.soundManager.toggleMute();
-    }.bind(this);
+    };
     volBar.appendChild(label);
     this.volLabel = label;
 
     this.infoToggle = document.createElement("div");
     this.infoToggle.innerHTML = '?';
     this.infoToggle.className = "hues-m-question";
-    this.infoToggle.onclick = function() {
+    this.infoToggle.onclick = () => {
         this.core.settings.showInfo();
-    }.bind(this);
+    };
     volCluster.appendChild(this.infoToggle);
 
     var input = document.createElement("input");
@@ -601,9 +601,9 @@ ModernUI.prototype.initUI = function() {
     input.step = 0.1;
     volBar.appendChild(input);
     this.volInput = input;
-    input.oninput = function() {
+    input.oninput = () => {
         this.core.soundManager.setVolume(parseFloat(input.value));
-    }.bind(this);
+    };
 
     var rightBox = document.createElement("div");
     rightBox.className = "hues-m-rightbox";
@@ -623,7 +623,7 @@ ModernUI.prototype.initUI = function() {
     this.songShuffle = document.createElement("div");
     this.songShuffle.innerHTML = '&#xe903;'; // SHUFFLE
     this.songShuffle.className = "hues-m-actbutton hues-icon";
-    this.songShuffle.onclick = function() {this.core.randomSong();}.bind(this);
+    this.songShuffle.onclick = () => {this.core.randomSong();};
     songs.appendChild(this.songList);
     songControls.appendChild(this.songPrev);
     songControls.appendChild(this.songShuffle);
@@ -642,7 +642,7 @@ ModernUI.prototype.initUI = function() {
     this.imageMode = document.createElement("div");
     this.imageMode.innerHTML = "&#xe901;"; // PLAY
     this.imageMode.className = "hues-m-actbutton hues-icon";
-    this.imageMode.onclick = function() {this.core.toggleFullAuto();}.bind(this);
+    this.imageMode.onclick = () => {this.core.toggleFullAuto();};
     this.imagePrev.className = "hues-m-prevbutton";
     this.imageNext.className = "hues-m-nextbutton";
     images.appendChild(this.imageList);
@@ -690,9 +690,9 @@ ModernUI.prototype.initUI = function() {
 
     this.hideRestore = document.createElement("div");
     this.hideRestore.className = "hues-m-hiderestore";
-    this.hideRestore.onclick = function() {
+    this.hideRestore.onclick = () => {
         this.toggleHide();
-    }.bind(this);
+    };
     this.root.appendChild(this.hideRestore);
 
     this.listContainer.className = "hues-m-listcontainer";

src/js/ResourceManager.js

@@ -82,7 +82,7 @@ function Resources(core) {
 // Array of URLs to load, and a callback for when we're done
 // Preserves order of URLs being loaded
 Resources.prototype.addAll = function(urls, progressCallback) {
-    return new Promise(function(resolve, reject) {
+    return new Promise((resolve, reject) => {
         this.toLoad += urls.length;
         if(progressCallback) {
             this.progressCallback = progressCallback;
@@ -91,7 +91,7 @@ Resources.prototype.addAll = function(urls, progressCallback) {
         for(var i = 0; i < urls.length; i++) {
             var r = new Respack();
             this.rToLoad.push(r);
-            r.loadFromURL(urls[i], function() {
+            r.loadFromURL(urls[i], () => {
                 this.toLoad--;
                 if(this.toLoad <= 0) {
                     for(var i = 0; i < this.rToLoad.length; i++) {
@@ -101,12 +101,12 @@ Resources.prototype.addAll = function(urls, progressCallback) {
                     this.progressCallback = null;
                     resolve();
                 }
-            }.bind(this), function(index, progress, pack) {
+            }, function(index, progress, pack) {
                 this.progressState[index] = progress;
                 this.updateProgress(pack);
             }.bind(this, i));
         }
-    }.bind(this));
+    });
 };
 
 Resources.prototype.updateProgress = function(pack) {
@@ -239,13 +239,13 @@ Resources.prototype.parseLocalQueue = function(recursing) {
     if(this.fileParseQueue.length) {
         var r = new Respack();
         r.loadBlob(this.fileParseQueue.shift(),
-            function() {
+            () => {
                 this.addPack(r);
                 this.localComplete();
                 this.parseLocalQueue(true);
-            }.bind(this),
-            function(progress, respack) {this.localProgress(progress, respack);}.bind(this),
-            function() {this.parseLocalQueue(true);}.bind(this));
+            },
+            (progress, respack) => {this.localProgress(progress, respack);},
+            () => {this.parseLocalQueue(true);});
     } else {
         console.log("Local respack parsing complete");
         this.currentlyParsing = false;
@@ -298,7 +298,7 @@ Resources.prototype.initUI = function() {
         remoteList.className = "res-list";
         remoteList.id = "res-remotelist";
         this.appendSimpleListItem("Click to load the list", remoteList,
-            function() {this.loadRemotes();}.bind(this));
+            this.loadRemotes.bind(this));
         this.packsView.remoteList = remoteList;
     } else {
         packList.className += " noremotes";
@@ -309,11 +309,11 @@ Resources.prototype.initUI = function() {
     var loadRemote = document.createElement("div");
     loadRemote.className = "hues-button hidden";
     loadRemote.textContent = "LOAD REMOTE";
-    loadRemote.onclick = function() {this.loadCurrentRemote();}.bind(this);
+    loadRemote.onclick = this.loadCurrentRemote.bind(this);
     var loadLocal = document.createElement("div");
     loadLocal.className = "hues-button";
     loadLocal.textContent = "LOAD ZIPS";
-    loadLocal.onclick = function() {this.fileInput.click();}.bind(this);
+    loadLocal.onclick = () => {this.fileInput.click};
     buttons.appendChild(loadLocal);
     buttons.appendChild(loadRemote);
     this.packsView.loadRemote = loadRemote;
@@ -322,7 +322,7 @@ Resources.prototype.initUI = function() {
     this.fileInput.type ="file";
     this.fileInput.accept="application/zip";
     this.fileInput.multiple = true;
-    this.fileInput.onchange = function() {this.loadLocal();}.bind(this);
+    this.fileInput.onchange = this.loadLocal.bind(this);
 
     var progressContainer = document.createElement("div");
     progressContainer.id = "res-progress-container";
@@ -428,15 +428,15 @@ Resources.prototype.initUI = function() {
     var enableAll = document.createElement("div");
     enableAll.textContent = "ENABLE ALL";
     enableAll.className = "hues-button";
-    enableAll.onclick = function() {this.enableAll();}.bind(this);
+    enableAll.onclick = this.enableAll.bind(this);
     var invert = document.createElement("div");
     invert.textContent = "INVERT";
     invert.className = "hues-button";
-    invert.onclick = function() {this.invert();}.bind(this);
+    invert.onclick = this.invert.bind(this);
     var disableAll = document.createElement("div");
     disableAll.textContent = "DISABLE ALL";
     disableAll.className = "hues-button";
-    disableAll.onclick = function() {this.disableAll();}.bind(this);
+    disableAll.onclick = this.disableAll.bind(this);
     packButtons.appendChild(enableAll);
     packButtons.appendChild(invert);
     packButtons.appendChild(disableAll);
@@ -688,17 +688,17 @@ Resources.prototype.loadRemotes = function() {
     var req = new XMLHttpRequest();
     req.open('GET', packsURL, true);
     req.responseType = 'json';
-    req.onload = function() {
+    req.onload = () => {
         if(!req.response) {
             req.onerror();
         }
         this.remotes = req.response;
         this.populateRemotes();
-    }.bind(this);
-    req.onerror = function() {
+    };
+    req.onerror = () => {
         item.textContent = "Could not load list! Click to try again";
-        item.onclick = function() {this.loadRemotes();}.bind(this);
-    }.bind(this);
+        item.onclick = this.loadRemotes.bind(this);
+    };
     req.send();
 };
 
@@ -792,13 +792,10 @@ Resources.prototype.loadCurrentRemote = function() {
     pack.loaded = true;
     this.packsView.loadRemote.className = "hues-button loaded";
     this.packsView.loadRemote.textContent = "LOADING";
-    this.addAll([pack.url], function() {
-            this.remoteComplete();
-        }.bind(this), 
-        function(progress, respack) {
+    this.addAll([pack.url], (progress, respack) => {
             this.remoteProgress(progress, respack);
-        }.bind(this)
-    );
+        }
+    ).then(this.remoteComplete.bind(this));
 };
 
 Resources.prototype.remoteProgress = function(progress, respack) {

src/js/ResourcePack.js

@@ -83,13 +83,13 @@ Respack.prototype.loadFromURL = function(url, callback, progress) {
     var req = new XMLHttpRequest();
     req.open('GET', url, true);
     req.responseType = 'blob';
-    req.onload = function() {
+    req.onload = () => {
         this.loadBlob(req.response, callback, progress);
-    }.bind(this);
+    };
     req.onerror = function() {
         console.log("Could not load respack at URL", url);
     };
-    req.onprogress = function(event) {
+    req.onprogress = event => {
         if (event.lengthComputable) {
             this.size = event.total;
             this.downloaded = event.loaded;
@@ -100,7 +100,7 @@ Respack.prototype.loadFromURL = function(url, callback, progress) {
         } else {
             // Unable to compute progress information since the total size is unknown
         }
-    }.bind(this);
+    };
     req.send();
 };
 
@@ -110,16 +110,14 @@ Respack.prototype.loadBlob = function(blob, callback, progress, errorCallback) {
     this.size = blob.size;
     this.file = new zip.fs.FS();
     this.file.importBlob(blob,
-        function() { // success
-            this.parseWholeZip();
-        }.bind(this),
-        function(error) {   // failure
+        this.parseWholeZip.bind(this),
+        error => {   // failure
             console.log("Error loading respack :", error.toString());
             this.file = null;
             if(errorCallback) {
                 errorCallback(error.toString());
             }
-        }.bind(this)
+        }
     );
 };
 
@@ -180,18 +178,18 @@ Respack.prototype.parseImage = function(file) {
 
 Respack.prototype.parseXML = function() {
     if (this._infoFile) {
-        this._infoFile.getText(function(text) {
+        this._infoFile.getText(text => {
             text = text.replace(/&/g, '&');
             text = text.replace(/&/g, '&');
             this.parseInfoFile(text);
             this._infoFile = null;
             this.parseXML();
-        }.bind(this));
+        });
         return;
     }
     if (this.songs.length > 0) {
         if (this._songFile) {
-            this._songFile.getText(function(text) {
+            this._songFile.getText(text => {
                 //XML parser will complain about a bare '&', but some respacks use &amp
                 text = text.replace(/&/g, '&');
                 text = text.replace(/&/g, '&');
@@ -200,7 +198,7 @@ Respack.prototype.parseXML = function() {
                 this._songFile = null;
                 this._songFileParsed = true;
                 this.parseXML();
-            }.bind(this));
+            });
             return;
         } else if(!this._songFileParsed) {
             console.log("!!!", "Got songs but no songs.xml!");
@@ -208,13 +206,13 @@ Respack.prototype.parseXML = function() {
         }
     }
     if (this.images.length > 0 && this._imageFile) {
-        this._imageFile.getText(function(text) {
+        this._imageFile.getText(text => {
             text = text.replace(/&/g, '&');
             text = text.replace(/&/g, '&');
             this.parseImageFile(text);
             this._imageFile = null;
             this.parseXML();
-        }.bind(this));
+        });
         return;
     }
 
@@ -443,17 +441,17 @@ Respack.prototype.parseSongQueue = function() {
             default:
                 mime = "application/octet-stream";
         }
-        songFile.getBlob(mime, function(sound) {
+        songFile.getBlob(mime, sound => {
             // Because blobs are crap
             var fr = new FileReader();
-            fr.onload = function(self) {
-                newSong.sound = this.result;
-                self.filesLoaded++;
-                self.updateProgress();
-                self.tryFinish();
-            }.bind(fr, this);
+            fr.onload = () => {
+                newSong.sound = fr.result;
+                this.filesLoaded++;
+                this.updateProgress();
+                this.tryFinish();
+            };
             fr.readAsArrayBuffer(sound);
-        }.bind(this));
+        });
         this.songs.push(newSong);
     }
 };
@@ -514,9 +512,9 @@ Respack.prototype.imageLoadStart = function(imgFile, imageObj) {
         default:
             mime = "application/octet-stream";
     }
-    imgFile.getData64URI(mime, function(image) {
+    imgFile.getData64URI(mime, image => {
         this.imageLoadComplete(image, imageObj);
-    }.bind(this));
+    });
 };
 
 Respack.prototype.imageLoadComplete = function(imageBmp, imageObj) {

src/js/SoundManager.js

@@ -66,7 +66,7 @@ function SoundManager(core) {
 
 SoundManager.prototype.init = function() {
     if(!this.initPromise) {
-        this.initPromise = new Promise(function(resolve, reject) {
+        this.initPromise = new Promise((resolve, reject) => {
             // Check Web Audio API Support
             try {
                 // More info at http://caniuse.com/#feat=audio-api
@@ -79,8 +79,8 @@ SoundManager.prototype.init = function() {
                 return;
             }
             resolve();
-        }.bind(this)).then(function(response) {
-            return new Promise(function(resolve, reject) {          
+        }).then(response => {
+            return new Promise((resolve, reject) => {          
                 // Get our MP3 decoder started
                 try {
                     this.mp3Worker = new Worker(this.core.settings.defaults.workersPath + 'mp3-worker.js');
@@ -88,24 +88,24 @@ SoundManager.prototype.init = function() {
                     console.log(e);
                     reject(Error("MP3 Worker cannot be started - correct path set in defaults?"));
                 }
-                var pingListener = function(event) {
+                var pingListener = event => {
                     this.mp3Worker.removeEventListener('message', pingListener);
                     this.mp3Worker.addEventListener('message', this.workerFinished.bind(this), false);
                     resolve();
-                }.bind(this)
+                };
                 this.mp3Worker.addEventListener('message', pingListener, false);
-                this.mp3Worker.addEventListener('error', function() {
+                this.mp3Worker.addEventListener('error', () => {
                     reject(Error("MP3 Worker cannot be started - correct path set in defaults?"));
-                }.bind(this), false);
+                }, false);
                 this.mp3Worker.postMessage({ping:true});
-            }.bind(this))
-        }.bind(this)).then(function(response) {
-            return new Promise(function(resolve, reject) {
+            })
+        }).then(response => {
+            return new Promise((resolve, reject) => {
                 // iOS and other some mobile browsers - unlock the context as
                 // it starts in a suspended state
                 if(this.context.state != "running") {
                     this.core.warning("We're about to load about 10MB of stuff. Tap to begin!");
-                    var unlocker = function() {
+                    var unlocker = () => {
                         // create empty buffer
                         var buffer = this.context.createBuffer(1, 1, 22050);
                         var source =  this.context.createBufferSource();
@@ -121,14 +121,14 @@ SoundManager.prototype.init = function() {
                         window.removeEventListener('click', unlocker);
                         this.core.clearMessage();
                         resolve();
-                    }.bind(this);
+                    };
                     window.addEventListener('touchend', unlocker, false);
                     window.addEventListener('click', unlocker, false);
                 } else {
                     resolve();
                 }
-            }.bind(this))
-        }.bind(this));
+            })
+        });
     }
     return this.initPromise;
 }
@@ -151,7 +151,7 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
         this.setMute(true);
     }
 
-    this.loadBuffer(song, function() {
+    this.loadBuffer(song, () => {
         // To prevent race condition if you press "next" twice fast
         if(song == this.song) {
             // more racing than the Melbourne Cup
@@ -167,7 +167,7 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
 
             // This fixes sync issues on Firefox and slow machines.
             if(this.context.suspend && this.context.resume) {
-                this.context.suspend().then(function() {
+                this.context.suspend().then(() => {
                     if(playBuild) {
                         // mobile webkit requires offset, even if 0
                         this.bufSource.start(0);
@@ -176,12 +176,12 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
                         this.bufSource.start(0, this.loopStart);
                         this.startTime = this.context.currentTime;
                     }
-                    this.context.resume().then(function() {
+                    this.context.resume().then(() => {
                         this.playing = true;
                         if(callback)
                             callback();
-                    }.bind(this));
-                }.bind(this));
+                    });
+                });
             } else {
                 if(playBuild) {
                     // mobile webkit requires offset, even if 0
@@ -196,7 +196,7 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
                     callback();
             }
         }
-    }.bind(this));
+    });
 };
 
 SoundManager.prototype.stop = function() {