From 7f15577984a298393493f89845e50a4f73feba65 Mon Sep 17 00:00:00 2001 From: William Toohey Date: Mon, 4 Apr 2016 23:25:00 +1000 Subject: [PATCH] Don't crash when certain UI elements are missing --- src/js/HuesCore.js | 39 ++++++++++++++++++++++++++------------- src/js/HuesSettings.js | 14 +++++++------- src/js/HuesUI.js | 4 ++-- 3 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index 42a37f5..1def27f 100644 --- a/src/js/HuesCore.js +++ b/src/js/HuesCore.js @@ -25,8 +25,21 @@ (function(window, document) { "use strict"; +// Gets an element by ID. If it doesn't exist, return an empty div so you +// don't litter your code with null checks +window.getElemWithFallback = function(elemName) { + let elem = document.getElementById(elemName); + if(!elem) { + console.log("Couldn't find element '" + elemName + "'. Ignoring."); + elem = document.createElement("div"); + } + return elem; +}; + function HuesCore(defaults) { // Yes, we do indeed have Javascript + this.preloadMsg = getElemWithFallback("preMain"); + this.preloadSubMsg = getElemWithFallback("preSub"); this.clearMessage(); // Bunch-o-initialisers this.version = "0x16"; @@ -144,6 +157,8 @@ function HuesCore(defaults) { this.visualiser.id = "visualiser"; this.visualiser.height = "64"; this.vCtx = this.visualiser.getContext("2d"); + + let preloadHelper = getElemWithFallback("preloadHelper"); this.soundManager = new SoundManager(this); @@ -188,20 +203,18 @@ function HuesCore(defaults) { this.animationLoop(); if(defaults.load) { - return this.resourceManager.addAll(defaults.respacks, function(progress) { - let prog = document.getElementById("preMain"); - let helper = document.getElementById("preloadHelper"); - helper.style.backgroundPosition = (100 - progress*100) + "% 0%"; + return this.resourceManager.addAll(defaults.respacks, progress => { + preloadHelper.style.backgroundPosition = (100 - progress*100) + "% 0%"; let scale = Math.floor(progress * defaults.preloadMax); let padding = defaults.preloadMax.toString(defaults.preloadBase).length; - prog.textContent = defaults.preloadPrefix + (Array(padding).join("0")+scale.toString(defaults.preloadBase)).slice(-padding); + this.preloadMsg.textContent = defaults.preloadPrefix + (Array(padding).join("0")+scale.toString(defaults.preloadBase)).slice(-padding); }); } else { - document.getElementById("preloadHelper").style.display = "none"; + preloadHelper.style.display = "none"; return; } }).then(() => { - document.getElementById("preloadHelper").classList.add("loaded"); + preloadHelper.classList.add("loaded"); if(defaults.firstImage) { this.setImageByName(defaults.firstImage); } else { @@ -966,19 +979,19 @@ HuesCore.prototype.keyHandler = function(key) { HuesCore.prototype.error = function(message) { console.log(message); - document.getElementById("preSub").textContent = message; - document.getElementById("preMain").style.color = "#F00"; + this.preloadSubMsg.textContent = message; + this.preloadMsg.style.color = "#F00"; }; HuesCore.prototype.warning = function(message) { console.log(message); - document.getElementById("preSub").innerHTML = message; - document.getElementById("preMain").style.color = "#F93"; + this.preloadSubMsg.innerHTML = message; + this.preloadMsg.style.color = "#F93"; }; HuesCore.prototype.clearMessage = function() { - document.getElementById("preSub").textContent = ""; - document.getElementById("preMain").style.color = ""; + this.preloadSubMsg.textContent = ""; + this.preloadMsg.style.color = ""; }; HuesCore.prototype.oldColours = diff --git a/src/js/HuesSettings.js b/src/js/HuesSettings.js index 9f6bbac..715f8d9 100644 --- a/src/js/HuesSettings.js +++ b/src/js/HuesSettings.js @@ -210,8 +210,8 @@ HuesSettings.prototype.settingsOptions = { function HuesSettings(defaults) { this.core = null; this.hasUI = false; - this.root = document.getElementById("huesSettings"); - this.window = document.getElementById("settingsHelper"); + this.root = getElemWithFallback("huesSettings"); + this.window = getElemWithFallback("settingsHelper"); this.textCallbacks = []; this.visCallbacks = []; @@ -244,7 +244,7 @@ function HuesSettings(defaults) { } // because we still care about the main window - document.getElementById("closeButton").onclick = this.hide.bind(this); + getElemWithFallback("closeButton").onclick = this.hide.bind(this); // we also care about tabs looking nice. let checkListener = function(check) { @@ -296,22 +296,22 @@ HuesSettings.prototype.toggle = function() { HuesSettings.prototype.showRespacks = function() { this.show(); - document.getElementById("tab-resources").click(); + getElemWithFallback("tab-resources").click(); }; HuesSettings.prototype.showEditor = function() { this.show(); - document.getElementById("tab-editor").click(); + getElemWithFallback("tab-editor").click(); }; HuesSettings.prototype.showOptions = function() { this.show(); - document.getElementById("tab-options").click(); + getElemWithFallback("tab-options").click(); }; HuesSettings.prototype.showInfo = function() { this.show(); - document.getElementById("tab-info").click(); + getElemWithFallback("tab-info").click(); }; HuesSettings.prototype.initUI = function() { diff --git a/src/js/HuesUI.js b/src/js/HuesUI.js index da5d023..b49aecf 100644 --- a/src/js/HuesUI.js +++ b/src/js/HuesUI.js @@ -1038,13 +1038,13 @@ HalloweenUI.prototype.beat = function(beats, index) { HalloweenUI.prototype.connectCore = function(core) { ModernUI.prototype.connectCore.call(this, core); - document.getElementById("preloadHelper").classList.add("hues-h-text"); + getElemWithFallback("preloadHelper").classList.add("hues-h-text"); }; HalloweenUI.prototype.disconnect = function() { ModernUI.prototype.disconnect.call(this, core); - document.getElementById("preloadHelper").classList.remove("hues-h-text"); + getElemWithFallback("preloadHelper").classList.remove("hues-h-text"); }; // Positions and angles for the Xmas lights