From 9772999605fae1be037b55596873c4e6439e7ada Mon Sep 17 00:00:00 2001 From: William Toohey Date: Tue, 26 Jan 2016 00:53:37 +1000 Subject: [PATCH] Use arrow functions over .bind --- src/js/HuesCore.js | 28 ++++++++++----------- src/js/HuesSettings.js | 4 +-- src/js/HuesUI.js | 52 +++++++++++++++++++-------------------- src/js/ResourceManager.js | 49 +++++++++++++++++------------------- src/js/ResourcePack.js | 48 +++++++++++++++++------------------- src/js/SoundManager.js | 40 +++++++++++++++--------------- 6 files changed, 106 insertions(+), 115 deletions(-) diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index 0567ea6..fab1016 100644 --- a/src/js/HuesCore.js +++ b/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); } diff --git a/src/js/HuesSettings.js b/src/js/HuesSettings.js index 42dfe82..62de940 100644 --- a/src/js/HuesSettings.js +++ b/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(); } diff --git a/src/js/HuesUI.js b/src/js/HuesUI.js index a844cab..9d612ed 100644 --- a/src/js/HuesUI.js +++ b/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 = ''; // 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 = "▼"; - 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 = "▲"; - 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 = ''; // 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 = ""; // 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"; diff --git a/src/js/ResourceManager.js b/src/js/ResourceManager.js index 8d21e69..a8acc4f 100644 --- a/src/js/ResourceManager.js +++ b/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) { diff --git a/src/js/ResourcePack.js b/src/js/ResourcePack.js index 8ce9b44..af074b7 100644 --- a/src/js/ResourcePack.js +++ b/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 & 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) { diff --git a/src/js/SoundManager.js b/src/js/SoundManager.js index db2666f..f415057 100644 --- a/src/js/SoundManager.js +++ b/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() {