From e5c01801d3cfb349b0e6613a9976c2ac980ec794 Mon Sep 17 00:00:00 2001 From: William Toohey Date: Mon, 4 Jan 2016 22:46:00 +1000 Subject: [PATCH] Use bind() instead of that = this --- js/HuesCore.js | 42 +++++------ js/HuesSettings.js | 33 ++++----- js/HuesUI.js | 67 ++++++++--------- js/ResourceManager.js | 165 ++++++++++++++++++------------------------ js/ResourcePack.js | 69 ++++++++---------- js/SoundManager.js | 69 +++++++++--------- 6 files changed, 198 insertions(+), 247 deletions(-) diff --git a/js/HuesCore.js b/js/HuesCore.js index 8483772..86f3999 100644 --- a/js/HuesCore.js +++ b/js/HuesCore.js @@ -108,12 +108,11 @@ function HuesCore(defaults) { settingsupdated : [] }; - var that = this; window.onerror = function(msg, url, line, col, error) { - that.error(msg); + this.error(msg); // Get more info in console return false; - }; + }.bind(this); console.log("0x40 Hues - start your engines!"); this.colours = this.oldColours; @@ -129,8 +128,8 @@ function HuesCore(defaults) { return; } setInterval(function() { - that.loopCheck(); - }, 1000); + this.loopCheck(); + }.bind(this), 1000); this.renderer = new HuesCanvas("waifu", this.soundManager.context, this); this.visualiser = document.createElement("canvas"); @@ -148,18 +147,18 @@ function HuesCore(defaults) { this.resourceManager.addAll(defaults.respacks, function() { document.getElementById("preloadHelper").classList.add("loaded"); if(defaults.firstImage) { - that.setImageByName(defaults.firstImage); + this.setImageByName(defaults.firstImage); } else { - that.setImage(0); + this.setImage(0); } if(defaults.autoplay) { if(defaults.firstSong) { - that.setSongByName(defaults.firstSong); + this.setSongByName(defaults.firstSong); } else { - that.setSong(0); + this.setSong(0); } } - }, function(progress) { + }.bind(this), function(progress) { var prog = document.getElementById("preMain"); var scale = Math.floor(progress * defaults.preloadMax); var padding = defaults.preloadMax.toString(defaults.preloadBase).length; @@ -182,8 +181,8 @@ function HuesCore(defaults) { return true; } var key = e.keyCode || e.which; - return that.keyHandler(key); - }; + return this.keyHandler(key); + }.bind(this); this.animationLoop(); } @@ -258,8 +257,7 @@ HuesCore.prototype.updateVisualiser = function() { } HuesCore.prototype.animationLoop = function() { - var that = this; - requestAnimationFrame(function() {that.animationLoop();}); + requestAnimationFrame(this.animationLoop.bind(this)); if(!this.soundManager.playing) { this.callEventListeners("frame"); return; @@ -349,12 +347,11 @@ HuesCore.prototype.setSong = function(index) { } } this.setInvert(false); - var that = this; this.soundManager.playSong(this.currentSong, this.doBuildup, function() { - that.resetAudio(); - that.fillBuildup(); - that.callEventListeners("songstarted"); - }); + this.resetAudio(); + this.fillBuildup(); + this.callEventListeners("songstarted"); + }.bind(this)); }; HuesCore.prototype.fillBuildup = function() { @@ -417,7 +414,6 @@ HuesCore.prototype.onLoop = function() { HuesCore.prototype.doAutoSong = function() { var func = null; - var that = this; if(localStorage["autoSongShuffle"] == "on") { func = this.randomSong; } else { @@ -425,10 +421,10 @@ HuesCore.prototype.doAutoSong = function() { } if(localStorage["autoSongFadeout"] == "on") { this.soundManager.fadeOut(function() { - func.call(that); - }); + func.call(this); + }.bind(this)); } else { - func.call(that); + func.call(this); } } diff --git a/js/HuesSettings.js b/js/HuesSettings.js index 20a7760..f123b67 100644 --- a/js/HuesSettings.js +++ b/js/HuesSettings.js @@ -215,8 +215,9 @@ function HuesSettings(defaults) { } // because we still care about the main window - var that = this; - document.getElementById("closeButton").onclick = function() {that.hide();}; + document.getElementById("closeButton").onclick = function() { + this.hide(); + }.bind(this); if(!this.defaults.noUI) { this.initUI(); } @@ -265,8 +266,6 @@ HuesSettings.prototype.showInfo = function() { HuesSettings.prototype.initUI = function() { var doc = this.root.ownerDocument; - var that = this; - // To order things nicely for(var cat in this.settingsCategories) { if(this.settingsCategories.hasOwnProperty(cat)) { @@ -294,9 +293,9 @@ HuesSettings.prototype.initUI = function() { if(localStorage[setName] == option) { checkbox.checked = true; } - checkbox.onclick = function() { - that.set(this.name, this.value); - }; + checkbox.onclick = function(self) { + self.set(this.name, this.value); + }.bind(checkbox, this); buttonContainer.appendChild(checkbox); // So we can style this nicely var label = doc.createElement("label"); @@ -317,18 +316,16 @@ HuesSettings.prototype.initUI = function() { input.value = localStorage[option.variable]; // TODO: support more than just positive ints when the need arises if(option.inputType == "int") { - input.oninput = (function(variable) { - return function() { - this.value = this.value.replace(/\D/g,''); - if(this.value == "" || this.value < 1) { - this.value = ""; - return; - } - localStorage[variable] = this.value; - that.updateConditionals(); - that.core.settingsUpdated(); + input.oninput = (function(self, variable) { + this.value = this.value.replace(/\D/g,''); + if(this.value == "" || this.value < 1) { + this.value = ""; + return; } - })(option.variable); + localStorage[variable] = this.value; + self.updateConditionals(); + self.core.settingsUpdated(); + }.bind(input, this, option.variable)); } input.autofocus = false; buttonContainer.appendChild(input); diff --git a/js/HuesUI.js b/js/HuesUI.js index 12f3b48..cd9f9c5 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -76,8 +76,6 @@ HuesUI.prototype.addCoreCallback = function(name, func) { } HuesUI.prototype.initUI = function() { - var that = this; - // Major info, image, song names var imageName = document.createElement("div"); this.imageName = imageName; @@ -99,28 +97,28 @@ HuesUI.prototype.initUI = function() { // Prev/next controls var imagePrev = document.createElement("div"); imagePrev.textContent = "<"; - imagePrev.onclick = function() {that.core.previousImage();}; + imagePrev.onclick = function() {this.core.previousImage();}.bind(this); this.imagePrev = imagePrev; var imageNext = document.createElement("div"); imageNext.textContent = ">"; - imageNext.onclick = function() {that.core.nextImage();}; + imageNext.onclick = function() {this.core.nextImage();}.bind(this); this.imageNext = imageNext; var songPrev = document.createElement("div"); songPrev.textContent = "<"; this.songPrev = songPrev; - songPrev.onclick = function() {that.core.previousSong();}; + songPrev.onclick = function() {this.core.previousSong();}.bind(this); var songNext = document.createElement("div"); songNext.textContent = ">"; - songNext.onclick = function() {that.core.nextSong();}; + songNext.onclick = function() {this.core.nextSong();}.bind(this); this.songNext = songNext; var songList = document.createElement("div"); songList.textContent = "SONGS"; - songList.onclick = function() {that.core.toggleSongList();}; + songList.onclick = function() {this.core.toggleSongList();}.bind(this); this.songList = songList; var imageList = document.createElement("div"); imageList.textContent = "IMAGES"; - imageList.onclick = function() {that.core.toggleImageList();}; + imageList.onclick = function() {this.core.toggleImageList();}.bind(this); this.imageList = imageList; // Beat timer, x and y blur, millis timer @@ -140,14 +138,14 @@ HuesUI.prototype.initUI = function() { this.settingsToggle = document.createElement("div"); this.settingsToggle.innerHTML = ''; this.settingsToggle.onclick = function() { - that.core.settings.toggle(); - }; + this.core.settings.toggle(); + }.bind(this); this.hideToggle = document.createElement("div"); this.hideToggle.innerHTML = "▼"; this.hideToggle.onclick = function() { - that.toggleHide(); - }; + this.toggleHide(); + }.bind(this); this.listContainer = document.createElement("div"); this.visualiserContainer = document.createElement("div"); @@ -284,8 +282,6 @@ RetroUI.prototype.constructor = RetroUI; RetroUI.prototype.initUI = function() { HuesUI.prototype.initUI.call(this); - var that = this; - var container = document.createElement("div"); container.className = "hues-r-container"; this.root.appendChild(container); @@ -318,11 +314,15 @@ RetroUI.prototype.initUI = function() { var imageMode = document.createElement("div"); this.imageModeManual = document.createElement("div"); this.imageModeManual.textContent = "NORMAL"; - this.imageModeManual.onclick = function() {that.core.setIsFullAuto(false);}; + this.imageModeManual.onclick = function() { + 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() {that.core.setIsFullAuto(true);}; + this.imageModeAuto.onclick = function() { + this.core.setIsFullAuto(true); + }.bind(this); this.imageModeAuto.className = "hues-r-automode hues-r-button"; imageMode.appendChild(this.imageModeManual); imageMode.appendChild(this.imageModeAuto); @@ -356,8 +356,8 @@ RetroUI.prototype.initUI = function() { this.hideRestore.className = "hues-r-hiderestore"; this.hideRestore.innerHTML = "▲"; this.hideRestore.onclick = function() { - that.toggleHide(); - }; + this.toggleHide(); + }.bind(this); this.root.appendChild(this.hideRestore); this.listContainer.className = "hues-r-listcontainer"; @@ -490,7 +490,7 @@ WeedUI.prototype.beat = function(beats, index) { beatCenter.style.transform = transform; beatCenter.textContent = beats[0].toUpperCase(); this.root.appendChild(beatCenter); - window.setTimeout(this.getRemoveBeat(beatCenter), 1500); + window.setTimeout(this.removeBeat.bind(this, beatCenter), 1500); } }; @@ -498,11 +498,8 @@ WeedUI.prototype.round10 = function(num) { return Math.round(num * 10) / 10; }; -WeedUI.prototype.getRemoveBeat = function(element) { - var that = this; - return function() { - that.root.removeChild(element); - }; +WeedUI.prototype.removeBeat = function(element) { + this.root.removeChild(element); }; function ModernUI() { @@ -532,8 +529,6 @@ ModernUI.prototype.constructor = ModernUI; ModernUI.prototype.initUI = function() { HuesUI.prototype.initUI.call(this); - var that = this; - this.imageName.className = "hues-m-imagename"; this.songName.className = "hues-m-songtitle"; @@ -572,8 +567,8 @@ ModernUI.prototype.initUI = function() { label.textContent = "VOL"; label.className = "hues-m-vol-label"; label.onclick = function() { - that.core.soundManager.toggleMute(); - }; + this.core.soundManager.toggleMute(); + }.bind(this); volBar.appendChild(label); this.volLabel = label; @@ -581,8 +576,8 @@ ModernUI.prototype.initUI = function() { this.infoToggle.innerHTML = '?'; this.infoToggle.className = "hues-m-question"; this.infoToggle.onclick = function() { - that.core.settings.showInfo(); - }; + this.core.settings.showInfo(); + }.bind(this); volCluster.appendChild(this.infoToggle); var input = document.createElement("input"); @@ -593,8 +588,8 @@ ModernUI.prototype.initUI = function() { volBar.appendChild(input); this.volInput = input; input.oninput = function() { - that.core.soundManager.setVolume(parseFloat(input.value)); - }; + this.core.soundManager.setVolume(parseFloat(input.value)); + }.bind(this); var rightBox = document.createElement("div"); rightBox.className = "hues-m-rightbox"; @@ -614,7 +609,7 @@ ModernUI.prototype.initUI = function() { this.songShuffle = document.createElement("div"); this.songShuffle.innerHTML = ''; this.songShuffle.className = "hues-m-actbutton"; - this.songShuffle.onclick = function() {that.core.randomSong();}; + this.songShuffle.onclick = function() {this.core.randomSong();}.bind(this); songs.appendChild(this.songList); songControls.appendChild(this.songPrev); songControls.appendChild(this.songShuffle); @@ -633,7 +628,7 @@ ModernUI.prototype.initUI = function() { this.imageMode = document.createElement("div"); this.imageMode.innerHTML = "▶"; // PLAY this.imageMode.className = "hues-m-actbutton"; - this.imageMode.onclick = function() {that.core.toggleFullAuto();}; + this.imageMode.onclick = function() {this.core.toggleFullAuto();}.bind(this); this.imagePrev.className = "hues-m-prevbutton"; this.imageNext.className = "hues-m-nextbutton"; images.appendChild(this.imageList); @@ -682,8 +677,8 @@ ModernUI.prototype.initUI = function() { this.hideRestore = document.createElement("div"); this.hideRestore.className = "hues-m-hiderestore"; this.hideRestore.onclick = function() { - that.toggleHide(); - }; + this.toggleHide(); + }.bind(this); this.root.appendChild(this.hideRestore); this.listContainer.className = "hues-m-listcontainer"; diff --git a/js/ResourceManager.js b/js/ResourceManager.js index dab454a..08c7202 100644 --- a/js/ResourceManager.js +++ b/js/ResourceManager.js @@ -80,7 +80,6 @@ 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, callback, progressCallback) { - var that = this; this.toLoad += urls.length; if(progressCallback) { this.progressCallback = progressCallback; @@ -93,31 +92,26 @@ Resources.prototype.addAll = function(urls, callback, progressCallback) { var r = new Respack(); this.rToLoad.push(r); r.loadFromURL(urls[i], function() { - that.toLoad--; - if(that.toLoad <= 0) { + this.toLoad--; + if(this.toLoad <= 0) { // could use a while() and shift(), but it'd be slower - for(var i = 0; i < that.rToLoad.length; i++) { - that.addPack(that.rToLoad[i]); + for(var i = 0; i < this.rToLoad.length; i++) { + this.addPack(this.rToLoad[i]); } - that.rToLoad = []; - if(that.loadFinishCallback) { - that.loadFinishCallback(); - that.loadFinishCallback = null; + this.rToLoad = []; + if(this.loadFinishCallback) { + this.loadFinishCallback(); + this.loadFinishCallback = null; } - that.progressCallback = null; + this.progressCallback = null; } - }, this.createProgCallback(i)); + }.bind(this), function(index, progress, pack) { + this.progressState[index] = progress; + this.updateProgress(pack); + }.bind(this, i)); } }; -Resources.prototype.createProgCallback = function(i) { - var that = this; - return function(progress, pack) { - that.progressState[i] = progress; - that.updateProgress(pack); - }; -}; - Resources.prototype.updateProgress = function(pack) { var total = 0; for(var i = 0; i < this.progressState.length; i++) { @@ -129,19 +123,20 @@ Resources.prototype.updateProgress = function(pack) { Resources.prototype.addPack = function(pack) { console.log("Added", pack.name, "to respacks"); - var that = this; var id = this.resourcePacks.length; this.resourcePacks.push(pack); this.addResourcesToArrays(pack); this.rebuildEnabled(); this.updateTotals(); + var self = this; this.appendListItem("respacks", pack.name, "res" + id, this.packsView.respackList, function() { pack.enabled = this.checked; - that.rebuildEnabled(); - }, - this.selectPackCallback(id) + self.rebuildEnabled(); + }, function(id) { + this.selectPack(id); + }.bind(this, id) ); }; @@ -193,31 +188,21 @@ Resources.prototype.rebuildEnabled = function() { } for(var i = 0; i < this.enabledSongs.length; i++) { var song = this.enabledSongs[i]; - this.appendSimpleListItem(song.title, songList, this.playSongCallback(i)); + this.appendSimpleListItem(song.title, songList, function(index) { + this.core.setSong(index); + }.bind(this, i)); } for(var i = 0; i < this.enabledImages.length; i++) { var image = this.enabledImages[i]; - this.appendSimpleListItem(image.name, imageList, this.selectImageCallback(i)); + this.appendSimpleListItem(image.name, imageList, function(index) { + this.core.setImage(index); + this.core.setIsFullAuto(false); + }.bind(this, i)); } } this.updateTotals(); }; -Resources.prototype.playSongCallback = function(index) { - var that = this; - return function() { - that.core.setSong(index); - }; -}; - -Resources.prototype.selectImageCallback = function(index) { - var that = this; - return function() { - that.core.setImage(index); - that.core.setIsFullAuto(false); - }; -}; - Resources.prototype.removePack = function(pack) { var index = this.resourcePacks.indexOf(pack); if (index != -1) { @@ -249,7 +234,6 @@ Resources.prototype.loadLocal = function() { }; Resources.prototype.parseLocalQueue = function(recursing) { - var that = this; // avoid race conditions if(this.currentlyParsing && !recursing) { return; @@ -259,12 +243,12 @@ Resources.prototype.parseLocalQueue = function(recursing) { var r = new Respack(); r.loadBlob(this.fileParseQueue.shift(), function() { - that.addPack(r); - that.localComplete(); - that.parseLocalQueue(true); - }, - function(progress, respack) {that.localProgress(progress, respack);}, - function() {that.parseLocalQueue(true);}); + 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)); } else { console.log("Local respack parsing complete"); this.currentlyParsing = false; @@ -294,7 +278,6 @@ Resources.prototype.localComplete = function(progress) { Resources.prototype.initUI = function() { this.root = document.getElementById("huesResources"); - var that = this; var packsContainer = document.createElement("div"); packsContainer.className = "res-packscontainer"; @@ -318,7 +301,7 @@ Resources.prototype.initUI = function() { remoteList.className = "res-list"; remoteList.id = "res-remotelist"; this.appendSimpleListItem("Click to load the list", remoteList, - function() {that.loadRemotes();}); + function() {this.loadRemotes();}.bind(this)); this.packsView.remoteList = remoteList; } else { packList.className += " noremotes"; @@ -329,11 +312,11 @@ Resources.prototype.initUI = function() { var loadRemote = document.createElement("div"); loadRemote.className = "res-button hidden"; loadRemote.textContent = "LOAD REMOTE"; - loadRemote.onclick = function() {that.loadCurrentRemote();}; + loadRemote.onclick = function() {this.loadCurrentRemote();}.bind(this); var loadLocal = document.createElement("div"); loadLocal.className = "res-button"; loadLocal.textContent = "LOAD ZIPS"; - loadLocal.onclick = function() {that.fileInput.click();}; + loadLocal.onclick = function() {this.fileInput.click();}.bind(this); buttons.appendChild(loadLocal); buttons.appendChild(loadRemote); this.packsView.loadRemote = loadRemote; @@ -342,7 +325,7 @@ Resources.prototype.initUI = function() { this.fileInput.type ="file"; this.fileInput.accept="application/zip"; this.fileInput.multiple = true; - this.fileInput.onchange = function() {that.loadLocal();}; + this.fileInput.onchange = function() {this.loadLocal();}.bind(this); var progressContainer = document.createElement("div"); progressContainer.id = "res-progress-container"; @@ -448,15 +431,15 @@ Resources.prototype.initUI = function() { var enableAll = document.createElement("div"); enableAll.textContent = "ENABLE ALL"; enableAll.className = "res-button"; - enableAll.onclick = function() {that.enableAll();}; + enableAll.onclick = function() {this.enableAll();}.bind(this); var invert = document.createElement("div"); invert.textContent = "INVERT"; invert.className = "res-button"; - invert.onclick = function() {that.invert();}; + invert.onclick = function() {this.invert();}.bind(this); var disableAll = document.createElement("div"); disableAll.textContent = "DISABLE ALL"; disableAll.className = "res-button"; - disableAll.onclick = function() {that.disableAll();}; + disableAll.onclick = function() {this.disableAll();}.bind(this); packButtons.appendChild(enableAll); packButtons.appendChild(invert); packButtons.appendChild(disableAll); @@ -590,7 +573,7 @@ Resources.prototype.selectPack = function(id) { var song = pack.songs[i]; this.appendListItem("songs", song.title, "song" + i, songList, this.selectResourceCallback(song), - this.clickResourceCallback(song, true), + this.clickResourceCallback.bind(this, song, true), song.enabled); } @@ -598,40 +581,32 @@ Resources.prototype.selectPack = function(id) { var image = pack.images[i]; this.appendListItem("images", image.name, "image" + i, imageList, this.selectResourceCallback(image), - this.clickResourceCallback(image, false), + this.clickResourceCallback.bind(this, image, false), image.enabled); } }; -Resources.prototype.selectPackCallback = function(id) { - var that = this; - return function() {that.selectPack(id);}; -}; - Resources.prototype.selectResourceCallback = function(res) { - var that = this; + var self = this; return function() { res.enabled = this.checked; - that.rebuildEnabled(); + self.rebuildEnabled(); }; }; Resources.prototype.clickResourceCallback = function(res, isSong) { - var that = this; - return function() { - if(!res.enabled) { - res.enabled = true; - that.rebuildEnabled(); - // rebuild display - that.selectPack(that.resourcePacks.indexOf(that.packView.pack)); - } - if(isSong) { - that.core.setSong(that.enabledSongs.indexOf(res)); - } else { - that.core.setImage(that.enabledImages.indexOf(res)); - that.core.setIsFullAuto(false); - } - }; + if(!res.enabled) { + res.enabled = true; + this.rebuildEnabled(); + // rebuild display + this.selectPack(this.resourcePacks.indexOf(this.packView.pack)); + } + if(isSong) { + this.core.setSong(this.enabledSongs.indexOf(res)); + } else { + this.core.setImage(this.enabledImages.indexOf(res)); + this.core.setIsFullAuto(false); + } }; Resources.prototype.getEnabledTabContents = function() { @@ -707,7 +682,6 @@ Resources.prototype.appendListItem = function(name, value, id, root, oncheck, on }; Resources.prototype.loadRemotes = function() { - var that = this; var remoteList = this.packsView.remoteList; while(remoteList.firstElementChild) { remoteList.removeChild(remoteList.firstElementChild); @@ -721,13 +695,13 @@ Resources.prototype.loadRemotes = function() { if(!req.response) { req.onerror(); } - that.remotes = req.response; - that.populateRemotes(); - }; + this.remotes = req.response; + this.populateRemotes(); + }.bind(this); req.onerror = function() { item.textContent = "Could not load list! Click to try again"; - item.onclick = function() {that.loadRemotes();}; - }; + item.onclick = function() {this.loadRemotes();}.bind(this); + }.bind(this); req.send(); }; @@ -739,15 +713,12 @@ Resources.prototype.populateRemotes = function() { for(var i = 0; i < this.remotes.length; i++) { this.remotes[i].loaded = false; this.appendSimpleListItem(this.remotes[i].name, remoteList, - this.getRemoteCallback(i)); + function(index) { + this.selectRemotePack(index); + }.bind(this, i)); } }; -Resources.prototype.getRemoteCallback = function(index) { - var that = this; - return function() {that.selectRemotePack(index);}; -}; - Resources.prototype.selectRemotePack = function(id) { var pack = this.remotes[id]; this.packView.pack = pack; @@ -796,7 +767,6 @@ Resources.prototype.selectRemotePack = function(id) { Resources.prototype.loadCurrentRemote = function() { var pack = this.packView.pack; - var that = this; // Not actually a remote, ignore. How did you press this :< if(pack.loaded === undefined || pack.loaded) { @@ -805,11 +775,14 @@ Resources.prototype.loadCurrentRemote = function() { // TODO Error checking on failure pack.loaded = true; - that.packsView.loadRemote.className = "res-button loaded"; - that.packsView.loadRemote.textContent = "LOADING"; + this.packsView.loadRemote.className = "res-button loaded"; + this.packsView.loadRemote.textContent = "LOADING"; this.addAll([pack.url], function() { - that.remoteComplete(); - }, function(progress, respack) {that.remoteProgress(progress, respack);} + this.remoteComplete(); + }.bind(this), + function(progress, respack) { + this.remoteProgress(progress, respack); + }.bind(this) ); }; diff --git a/js/ResourcePack.js b/js/ResourcePack.js index c71eba8..b935037 100644 --- a/js/ResourcePack.js +++ b/js/ResourcePack.js @@ -75,51 +75,48 @@ Respack.prototype.updateProgress = function() { }; Respack.prototype.loadFromURL = function(url, callback, progress) { - var that = this; - this.loadedFromURL = true; var req = new XMLHttpRequest(); req.open('GET', url, true); req.responseType = 'blob'; req.onload = function() { - that.loadBlob(req.response, callback, progress); - }; + this.loadBlob(req.response, callback, progress); + }.bind(this); req.onerror = function() { console.log("Could not load respack at URL", url); }; req.onprogress = function(event) { if (event.lengthComputable) { - that.size = event.total; - that.downloaded = event.loaded; + this.size = event.total; + this.downloaded = event.loaded; var percent = event.loaded / event.total; if(progress) { - progress(percent / 2, that); // because of processing too + progress(percent / 2, this); // because of processing too } } else { // Unable to compute progress information since the total size is unknown } - }; + }.bind(this); req.send(); }; Respack.prototype.loadBlob = function(blob, callback, progress, errorCallback) { this._completionCallback = callback; this.progressCallback = progress; - var that = this; this.size = blob.size; this.file = new zip.fs.FS(); this.file.importBlob(blob, function() { // success - that.parseWholeZip(); - }, + this.parseWholeZip(); + }.bind(this), function(error) { // failure console.log("Error loading respack :", error.toString()); - that.file = null; + this.file = null; if(errorCallback) { errorCallback(error.toString()); } - } + }.bind(this) ); }; @@ -179,16 +176,14 @@ Respack.prototype.parseImage = function(file) { }; Respack.prototype.parseXML = function() { - var that = this; - if (this._infoFile) { this._infoFile.getText(function(text) { text = text.replace(/&/g, '&'); text = text.replace(/&/g, '&'); - that.parseInfoFile(text); - that._infoFile = null; - that.parseXML(); - }); + this.parseInfoFile(text); + this._infoFile = null; + this.parseXML(); + }.bind(this)); return; } if (this.songs.length > 0) { @@ -197,12 +192,12 @@ Respack.prototype.parseXML = function() { //XML parser will complain about a bare '&', but some respacks use & text = text.replace(/&/g, '&'); text = text.replace(/&/g, '&'); - that.parseSongFile(text); + this.parseSongFile(text); // Go to next in series - that._songFile = null; - that._songFileParsed = true; - that.parseXML(); - }); + this._songFile = null; + this._songFileParsed = true; + this.parseXML(); + }.bind(this)); return; } else if(!this._songFileParsed) { console.log("!!!", "Got songs but no songs.xml!"); @@ -213,10 +208,10 @@ Respack.prototype.parseXML = function() { this._imageFile.getText(function(text) { text = text.replace(/&/g, '&'); text = text.replace(/&/g, '&'); - that.parseImageFile(text); - that._imageFile = null; - that.parseXML(); - }); + this.parseImageFile(text); + this._imageFile = null; + this.parseXML(); + }.bind(this)); return; } @@ -415,7 +410,6 @@ Respack.prototype.getImage = function(name) { }; Respack.prototype.parseSongQueue = function() { - var that = this; var songFile = this.songQueue.shift(); var name = songFile.name.replace(this.audioExtensions, ""); @@ -449,14 +443,14 @@ Respack.prototype.parseSongQueue = function() { songFile.getBlob(mime, function(sound) { // Because blobs are crap var fr = new FileReader(); - fr.onload = function() { + fr.onload = function(self) { newSong.sound = this.result; - that.filesLoaded++; - that.updateProgress(); - that.tryFinish(); - }; + self.filesLoaded++; + self.updateProgress(); + self.tryFinish(); + }.bind(fr, this); fr.readAsArrayBuffer(sound); - }); + }.bind(this)); this.songs.push(newSong); } }; @@ -500,7 +494,6 @@ Respack.prototype.parseImageQueue = function() { }; Respack.prototype.imageLoadStart = function(imgFile, imageObj) { - var that = this; var extension = imgFile.name.split('.').pop().toLowerCase(); var mime = ""; switch(extension) { @@ -518,8 +511,8 @@ Respack.prototype.imageLoadStart = function(imgFile, imageObj) { mime = "application/octet-stream"; } imgFile.getData64URI(mime, function(image) { - that.imageLoadComplete(image, imageObj); - }); + this.imageLoadComplete(image, imageObj); + }.bind(this)); }; Respack.prototype.imageLoadComplete = function(imageBmp, imageObj) { diff --git a/js/SoundManager.js b/js/SoundManager.js index 1204d34..49f9600 100644 --- a/js/SoundManager.js +++ b/js/SoundManager.js @@ -83,24 +83,22 @@ function SoundManager(core) { return; } - var that = this; window.addEventListener('touchend', function() { // create empty buffer - var buffer = that.context.createBuffer(1, 1, 22050); - var source = that.context.createBufferSource(); + var buffer = this.context.createBuffer(1, 1, 22050); + var source = this.context.createBufferSource(); source.buffer = buffer; // connect to output (your speakers) - source.connect( that.context.destination); + source.connect( this.context.destination); // play the file source.start(0); - }, false); + }.bind(this), false); } SoundManager.prototype.playSong = function(song, playBuild, callback) { - var that = this; if(this.song == song) { return; } @@ -120,50 +118,50 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) { this.loadBuffer(song, function() { // To prevent race condition if you press "next" twice fast - if(song == that.song) { + if(song == this.song) { // more racing than the Melbourne Cup try { - that.bufSource.stop(0); + this.bufSource.stop(0); } catch(err) {} - that.bufSource = that.context.createBufferSource(); - that.bufSource.buffer = that.buffer; - that.bufSource.loop = true; - that.bufSource.loopStart = that.loopStart; - that.bufSource.loopEnd = that.buffer.duration; - that.bufSource.connect(that.gainNode); + this.bufSource = this.context.createBufferSource(); + this.bufSource.buffer = this.buffer; + this.bufSource.loop = true; + this.bufSource.loopStart = this.loopStart; + this.bufSource.loopEnd = this.buffer.duration; + this.bufSource.connect(this.gainNode); // This fixes sync issues on Firefox and slow machines. - if(that.context.suspend && that.context.resume) { - that.context.suspend().then(function() { + if(this.context.suspend && this.context.resume) { + this.context.suspend().then(function() { if(playBuild) { // mobile webkit requires offset, even if 0 - that.bufSource.start(0); - that.startTime = that.context.currentTime + that.loopStart; + this.bufSource.start(0); + this.startTime = this.context.currentTime + this.loopStart; } else { - that.bufSource.start(0, that.loopStart); - that.startTime = that.context.currentTime; + this.bufSource.start(0, this.loopStart); + this.startTime = this.context.currentTime; } - that.context.resume().then(function() { - that.playing = true; + this.context.resume().then(function() { + this.playing = true; if(callback) callback(); - }); - }); + }.bind(this)); + }.bind(this)); } else { if(playBuild) { // mobile webkit requires offset, even if 0 - that.bufSource.start(0); - that.startTime = that.context.currentTime + that.loopStart; + this.bufSource.start(0); + this.startTime = this.context.currentTime + this.loopStart; } else { - that.bufSource.start(0, that.loopStart); - that.startTime = that.context.currentTime; + this.bufSource.start(0, this.loopStart); + this.startTime = this.context.currentTime; } - that.playing = true; + this.playing = true; if(callback) callback(); } } - }); + }.bind(this)); }; SoundManager.prototype.stop = function() { @@ -223,7 +221,6 @@ SoundManager.prototype.loadAudioFile = function(song, isBuild) { /* decodeAudioData nukes our original MP3 array, but we want to keep it around for memory saving purposes, so we must duplicate it locally here */ SoundManager.prototype.getAudioCallback = function(song, isBuild) { - var that = this; var current = isBuild ? song.buildup : song.sound; var copy = current.slice(0); return function(buffer) { @@ -234,16 +231,16 @@ SoundManager.prototype.getAudioCallback = function(song, isBuild) { song.sound = copy; } // race condition prevention - if(that.song != song) { + if(this.song != song) { return; } if(isBuild) { - that.tmpBuild = that.trimMP3(buffer, song.forceTrim, song.noTrim); + this.tmpBuild = this.trimMP3(buffer, song.forceTrim, song.noTrim); } else { - that.tmpBuffer = that.trimMP3(buffer, song.forceTrim, song.noTrim); + this.tmpBuffer = this.trimMP3(buffer, song.forceTrim, song.noTrim); } - that.onSongLoad(song); - }; + this.onSongLoad(song); + }.bind(this); }; SoundManager.prototype.onSongLoad = function(song) {