diff --git a/js/font.js b/js/font.js index e9744df0..65e36ec6 100644 --- a/js/font.js +++ b/js/font.js @@ -1,78 +1,63 @@ // Manage rendering text from this skin's text.bmp file -define({ +define([], function(){ + var Font = function() { - // Fill a node with a
containing character
s - setNodeToString: function(node, string) { - var stringElement = this._stringNode(string); - node.innerHTML = ''; - node.appendChild(stringElement); - }, + // Fill a node with a
containing character
s + this.setNodeToString = function(node, string) { + var stringElement = document.createElement('div'); + for (var i = 0, len = string.length; i < len; i++) { + var char = string[i].toLowerCase(); + stringElement.appendChild(this.characterNode(char)); + } + node.innerHTML = ''; + node.appendChild(stringElement); + }; - // Get a
containing char - characterNode: function(char) { - return this.displayCharacterInNode(char, document.createElement('div')); - }, + // Get a
containing char + this.characterNode = function(char) { + return this.displayCharacterInNode(char, document.createElement('div')); + }; - // Style/populate a
to display a character - displayCharacterInNode: function(character, node) { - var position = this._getCharPosition(character); - var row = position[0]; - var column = position[1]; - var verticalOffset = row * 6; - var horizontalOffset = column * 5; + // Style/populate a
to display a character + this.displayCharacterInNode = function(character, node) { + var position = this._fontLookup[character] || this._fontLookup[' ']; + var verticalOffset = position[0] * 6; + var horizontalOffset = position[1] * 5; - var x = '-' + horizontalOffset + 'px'; - var y = '-' + verticalOffset + 'px'; - node.style.backgroundPosition = x + ' ' + y; - node.classList.add('character'); + var x = '-' + horizontalOffset + 'px'; + var y = '-' + verticalOffset + 'px'; + node.style.backgroundPosition = x + ' ' + y; + node.classList.add('character'); - node.innerHTML = character; - return node; - }, + node.innerHTML = character; + return node; + }; - // Get a
containing a digit - digitNode: function(digit) { - var div = document.createElement('div'); - div.classList.add('digit'); - div.classList.add('digit-' + digit); - return div; - }, + // Get a
containing a digit + this.digitNode = function(digit) { + var div = document.createElement('div'); + div.classList.add('digit'); + div.classList.add('digit-' + digit); + return div; + }; - - // Get a
containing character
s - _stringNode: function(string) { - var parentDiv = document.createElement('div'); - for (var i = 0, len = string.length; i < len; i++) { - var char = string[i].toLowerCase(); - parentDiv.appendChild(this.characterNode(char)); - } - return parentDiv; - }, - - // Find the background offsets for a given character - _getCharPosition: function(char) { - var position = this._fontLookup[char]; - if (!position) { - return this._fontLookup[' ']; - } - return position; - }, - - /* TODO: There are too many " " and "_" characters */ - _fontLookup: { - 'a': [0, 0], 'b': [0, 1], 'c': [0, 2], 'd': [0, 3], 'e': [0, 4], 'f': [0, 5], - 'g': [0, 6], 'h': [0, 7], 'i': [0, 8], 'j': [0, 9], 'k': [0, 10], - 'l': [0, 11], 'm': [0, 12], 'n': [0, 13], 'o': [0, 14], 'p': [0, 15], - 'q': [0, 16], 'r': [0, 17], 's': [0, 18], 't': [0, 19], 'u': [0, 20], - 'v': [0, 21], 'w': [0, 22], 'x': [0, 23], 'y': [0, 24], 'z': [0, 25], - '"': [0, 26], '@': [0, 27], '0': [1, 0], '1': [1, 1], - '2': [1, 2], '3': [1, 3], '4': [1, 4], '5': [1, 5], '6': [1, 6], '7': [1, 7], - '8': [1, 8], '9': [1, 9], '_': [1, 11], ':': [1, 12], - '(': [1, 13], ')': [1, 14], '-': [1, 15], "'": [1, 16], '!': [1, 17], - '+': [1, 19], '\\': [1, 20], '/': [1, 21], '[': [1, 22], - ']': [1, 23], '^': [1, 24], '&': [1, 25], '%': [1, 26], '.': [1, 27], - '=': [1, 28], '$': [1, 29], '#': [1, 30], 'Å': [2, 0], 'Ö': [2, 1], - 'Ä': [2, 2], '?': [2, 3], '*': [2, 4], ' ': [2, 5], '<': [1, 22], - '>': [1, 23], '{': [1, 22], '}': [1, 23] - } + /* TODO: There are too many " " and "_" characters */ + this._fontLookup = { + 'a': [0, 0], 'b': [0, 1], 'c': [0, 2], 'd': [0, 3], 'e': [0, 4], 'f': [0, 5], + 'g': [0, 6], 'h': [0, 7], 'i': [0, 8], 'j': [0, 9], 'k': [0, 10], + 'l': [0, 11], 'm': [0, 12], 'n': [0, 13], 'o': [0, 14], 'p': [0, 15], + 'q': [0, 16], 'r': [0, 17], 's': [0, 18], 't': [0, 19], 'u': [0, 20], + 'v': [0, 21], 'w': [0, 22], 'x': [0, 23], 'y': [0, 24], 'z': [0, 25], + '"': [0, 26], '@': [0, 27], '0': [1, 0], '1': [1, 1], + '2': [1, 2], '3': [1, 3], '4': [1, 4], '5': [1, 5], '6': [1, 6], '7': [1, 7], + '8': [1, 8], '9': [1, 9], '_': [1, 11], ':': [1, 12], + '(': [1, 13], ')': [1, 14], '-': [1, 15], "'": [1, 16], '!': [1, 17], + '+': [1, 19], '\\': [1, 20], '/': [1, 21], '[': [1, 22], + ']': [1, 23], '^': [1, 24], '&': [1, 25], '%': [1, 26], '.': [1, 27], + '=': [1, 28], '$': [1, 29], '#': [1, 30], 'Å': [2, 0], 'Ö': [2, 1], + 'Ä': [2, 2], '?': [2, 3], '*': [2, 4], ' ': [2, 5], '<': [1, 22], + '>': [1, 23], '{': [1, 22], '}': [1, 23] + }; + }; + return Font; }); diff --git a/js/main-window.js b/js/main-window.js index a4a5675d..bdf234c5 100644 --- a/js/main-window.js +++ b/js/main-window.js @@ -43,7 +43,7 @@ define([ this.handle = document.getElementById('title-bar'); this.body = this.nodes.window; - this.textDisplay = MultiDisplay.init(Font, this.nodes.songTitle); + this.textDisplay = new MultiDisplay(this.nodes.songTitle); this.textDisplay.addRegister('songTitle'); this.textDisplay.addRegister('position'); this.textDisplay.addRegister('volume'); diff --git a/js/multi-display.js b/js/multi-display.js index b8e0e8c7..95b9ad67 100644 --- a/js/multi-display.js +++ b/js/multi-display.js @@ -1,14 +1,13 @@ // Single line text display that can animate and hold multiple registers -define({ - node: null, // The DOM node of the display - registers: {}, - init: function(font, node) { - this.font = font; +define(['font'], function(Font) { + var MultiDisplay = function(node) { + this.font = new Font(); this.node = node; + this.registers = {}; this._marqueeLoop(); - return this; - }, - addRegister: function(key) { + }; + + MultiDisplay.prototype.addRegister = function(key) { // Create element node var register = document.createElement('div'); register.style.display = 'none'; @@ -19,28 +18,29 @@ define({ text: '', marquee: false }; - }, - setRegisterText: function(register, text) { - // Set text of register + }; + + // Set text of register + MultiDisplay.prototype.setRegisterText = function(register, text) { this.font.setNodeToString(this.registers[register].node, text); - }, - hideAllRegisters: function() { + }; + + MultiDisplay.prototype.showRegister = function(showKey) { for (var key in this.registers) { - this.registers[key].node.style.display = 'none'; + var display = (key === showKey) ? 'block' : 'none'; + this.registers[key].node.style.display = display; } - }, - showRegister: function(key) { - this.hideAllRegisters(); - // Show the one register - this.registers[key].node.style.display = 'block'; - }, - startRegisterMarquee: function(key) { + }; + + MultiDisplay.prototype.startRegisterMarquee = function(key) { this.registers[key].marquee = true; - }, - pauseRegisterMarquee: function(key) { + }; + + MultiDisplay.prototype.pauseRegisterMarquee = function(key) { this.registers[key].marquee = false; - }, - _marqueeLoop: function() { + }; + + MultiDisplay.prototype._marqueeLoop = function() { var self = this; setTimeout(function() { for (var key in self.registers) { @@ -57,5 +57,7 @@ define({ } self._marqueeLoop(); }, 220); - } + }; + + return MultiDisplay; }); diff --git a/js/skin.js b/js/skin.js index 143824bf..669367b6 100644 --- a/js/skin.js +++ b/js/skin.js @@ -11,7 +11,7 @@ define([ JSZip ) { return { - font: Font, + font: new Font(), init: function(visualizerNode, analyser) { this._createNewStyleNode(); this.visualizer = Visualizer.init(visualizerNode, analyser);