From e64b110405e8f6e03003c6d75865ccdb1a2c9685 Mon Sep 17 00:00:00 2001 From: Oliver Hamlet Date: Fri, 10 Jun 2016 21:20:04 +0100 Subject: [PATCH] Refactor some init code into dom.js Also refactor code within dom.js, so that functions only used internally are not exported. --- src/gui/html/js/dom.js | 224 +++++++++++++++++++++++----------- src/gui/html/js/initialise.js | 108 +++++++--------- 2 files changed, 193 insertions(+), 139 deletions(-) diff --git a/src/gui/html/js/dom.js b/src/gui/html/js/dom.js index 7d74c43a..479f94d3 100644 --- a/src/gui/html/js/dom.js +++ b/src/gui/html/js/dom.js @@ -6,10 +6,10 @@ } else { // Browser globals root.loot = root.loot || {}; - root.loot.DOM = factory(); + root.loot.DOM = factory(root.marked); } -}(this, () => class { - static getElementInTableRowTemplate(rowTemplateId, elementClass) { +}(this, (marked) => { + function getElementInTableRowTemplate(rowTemplateId, elementClass) { const select = document.querySelector('link[rel="import"][href$="editable-table.html"]'); if (select) { return select.import.querySelector(`#${rowTemplateId}`).content @@ -18,45 +18,7 @@ return document.querySelector(`#${rowTemplateId}`).content.querySelector(`.${elementClass}`); } - static show(elementId, showElement = true) { - document.getElementById(elementId).hidden = !showElement; - } - - static enable(elementId, enableElement = true) { - if (enableElement) { - document.getElementById(elementId).removeAttribute('disabled'); - } else { - document.getElementById(elementId).setAttribute('disabled', ''); - } - } - - static updateSelectedGame(gameFolder) { - document.getElementById('gameMenu').value = gameFolder; - - /* Also disable deletion of the game's row in the settings dialog. */ - const table = document.getElementById('gameTable'); - for (let i = 0; i < table.tBodies[0].rows.length; ++i) { - const folderElements = table.tBodies[0].rows[i].getElementsByClassName('folder'); - if (folderElements.length === 1) { - table.setReadOnly(table.tBodies[0].rows[i], - ['delete'], - folderElements[0].value === gameFolder); - } - } - } - - static updateEnabledGames(installedGames) { - const gameMenuItems = document.getElementById('gameMenu').children; - for (let i = 0; i < gameMenuItems.length; ++i) { - if (installedGames.indexOf(gameMenuItems[i].getAttribute('value')) === -1) { - gameMenuItems[i].setAttribute('disabled', true); - } else { - gameMenuItems[i].removeAttribute('disabled'); - } - } - } - - static createGameItem(game) { + function createGameItem(game) { const menuItem = document.createElement('paper-item'); menuItem.setAttribute('value', game.folder); menuItem.textContent = game.name; @@ -64,40 +26,156 @@ return menuItem; } - static setGameMenuItems(games) { - const gameMenu = document.getElementById('gameMenu'); + function createLanguageItem(language) { + const item = document.createElement('paper-item'); + item.setAttribute('value', language.locale); + item.textContent = language.name; - /* First make sure game listing elements don't have any existing entries. */ - while (gameMenu.firstElementChild) { - gameMenu.removeChild(gameMenu.firstElementChild); - } - - games.forEach((game) => { - gameMenu.appendChild(this.createGameItem(game)); - }); + return item; } - static updateSettingsDialog(settings) { - const gameSelect = document.getElementById('defaultGameSelect'); - const gameTable = document.getElementById('gameTable'); + function createMessageItem(message) { + const li = document.createElement('li'); + li.className = 'error'; + /* Use the Marked library for Markdown formatting support. */ + li.innerHTML = marked(message); - /* First make sure game listing elements don't have any existing entries. */ - while (gameSelect.children.length > 1) { - gameSelect.removeChild(gameSelect.lastElementChild); - } - gameTable.clear(); - - /* Now fill with new values. */ - settings.games.forEach((game) => { - gameSelect.appendChild(this.createGameItem(game)); - - const row = gameTable.addRow(game); - gameTable.setReadOnly(row, ['name', 'folder', 'type']); - }); - - gameSelect.value = settings.game; - document.getElementById('languageSelect').value = settings.language; - document.getElementById('enableDebugLogging').checked = settings.enableDebugLogging; - document.getElementById('updateMasterlist').checked = settings.updateMasterlist; + return li; } + + function createGameTypeItem(gameType) { + const item = document.createElement('paper-item'); + item.setAttribute('value', gameType); + item.textContent = gameType; + + return item; + } + + function forceSelectDefaultValue(element) { + element.setAttribute('value', element.firstElementChild.getAttribute('value')); + } + + return class DOM { + static show(elementId, showElement = true) { + document.getElementById(elementId).hidden = !showElement; + } + + static enable(elementOrId, enableElement = true) { + let element = elementOrId; + if (element instanceof String) { + element = document.getElementById('element'); + } + + if (enableElement) { + element.removeAttribute('disabled'); + } else { + element.setAttribute('disabled', ''); + } + } + + static updateSelectedGame(gameFolder) { + document.getElementById('gameMenu').value = gameFolder; + + /* Also disable deletion of the game's row in the settings dialog. */ + const table = document.getElementById('gameTable'); + for (let i = 0; i < table.tBodies[0].rows.length; ++i) { + const folderElements = table.tBodies[0].rows[i].getElementsByClassName('folder'); + if (folderElements.length === 1) { + table.setReadOnly(table.tBodies[0].rows[i], + ['delete'], + folderElements[0].value === gameFolder); + } + } + } + + static updateEnabledGames(installedGames) { + const gameMenuItems = document.getElementById('gameMenu').children; + for (let i = 0; i < gameMenuItems.length; ++i) { + DOM.enable(gameMenuItems[i], + installedGames.indexOf(gameMenuItems[i].getAttribute('value')) === -1); + } + } + + static setGameMenuItems(games) { + const gameMenu = document.getElementById('gameMenu'); + + /* First make sure game listing elements don't have any existing entries. */ + while (gameMenu.firstElementChild) { + gameMenu.removeChild(gameMenu.firstElementChild); + } + + games.forEach((game) => { + gameMenu.appendChild(createGameItem(game)); + }); + } + + static updateSettingsDialog(settings) { + const gameSelect = document.getElementById('defaultGameSelect'); + const gameTable = document.getElementById('gameTable'); + + /* First make sure game listing elements don't have any existing entries. */ + while (gameSelect.children.length > 1) { + gameSelect.removeChild(gameSelect.lastElementChild); + } + gameTable.clear(); + + /* Now fill with new values. */ + settings.games.forEach((game) => { + gameSelect.appendChild(createGameItem(game)); + + const row = gameTable.addRow(game); + gameTable.setReadOnly(row, ['name', 'folder', 'type']); + }); + + gameSelect.value = settings.game; + document.getElementById('languageSelect').value = settings.language; + document.getElementById('enableDebugLogging').checked = settings.enableDebugLogging; + document.getElementById('updateMasterlist').checked = settings.updateMasterlist; + } + + static fillGameTypesList(gameTypes) { + const select = getElementInTableRowTemplate('gameRow', 'type'); + + gameTypes.forEach((gameType) => { + select.appendChild(createGameTypeItem(gameType)); + }); + + forceSelectDefaultValue(select); + select.setAttribute('value', select.firstElementChild.getAttribute('value')); + } + + static fillLanguagesList(languages) { + const settingsLangSelect = document.getElementById('languageSelect'); + const messageLangSelect = getElementInTableRowTemplate('messageRow', 'language'); + + languages.forEach((language) => { + const settingsItem = createLanguageItem(language); + settingsLangSelect.appendChild(settingsItem); + messageLangSelect.appendChild(settingsItem.cloneNode(true)); + }); + + forceSelectDefaultValue(messageLangSelect); + } + + static listInitErrors(errorMessages) { + if (!errorMessages) { + return; + } + const generalMessagesList = document.getElementById('summary').getElementsByTagName('ul')[0]; + + errorMessages.forEach((message) => { + generalMessagesList.appendChild(createMessageItem(message)); + }); + + document.getElementById('filterTotalMessageNo').textContent = errorMessages.length; + document.getElementById('totalMessageNo').textContent = errorMessages.length; + document.getElementById('totalErrorNo').textContent = errorMessages.length; + } + + static setVersion(version) { + document.getElementById('LOOTVersion').textContent = version.release; + document.getElementById('firstTimeLootVersion').textContent = version.release; + document.getElementById('LOOTBuild').textContent = version.build; + } + }; })); diff --git a/src/gui/html/js/initialise.js b/src/gui/html/js/initialise.js index 79a12483..00183792 100644 --- a/src/gui/html/js/initialise.js +++ b/src/gui/html/js/initialise.js @@ -33,12 +33,21 @@ root.loot.DOM, root.loot.Filters, root.loot.Game, + root.loot.handlePromiseError, root.loot.translateStaticText, root.loot.Plugin, root.loot.query, root.loot.Translator); } -}(this, (Dialog, dom, Filters, Game, translateStaticText, Plugin, query, Translator) => { +}(this, (Dialog, + dom, + Filters, + Game, + handlePromiseError, + translateStaticText, + Plugin, + query, + Translator) => { function setupEventHandlers() { /* Set up handlers for filters. */ document.getElementById('hideVersionNumbers').addEventListener('change', onSidebarFilterToggle); @@ -141,70 +150,41 @@ } } + function splitVersion(version) { + const lastPeriodIndex = version.lastIndexOf('.'); + return { + release: version.substring(0, lastPeriodIndex), + build: version.substring(lastPeriodIndex + 1), + }; + } + function setVersion(appData) { - return query('getVersion').then(JSON.parse).then((result) => { - /* The fourth part of the version string is the build number. Trim it. */ - const pos = result.lastIndexOf('.'); - appData.version = result.substring(0, pos); - document.getElementById('LOOTVersion').textContent = appData.version; - document.getElementById('firstTimeLootVersion').textContent = appData.version; - document.getElementById('LOOTBuild').textContent = result.substring(pos + 1); + return query('getVersion').then(JSON.parse).then(splitVersion).then((version) => { + appData.version = version.release; + dom.setVersion(version); }); } function setLanguages() { - return query('getLanguages').then(JSON.parse).then((result) => { - /* Now fill in language options. */ - const settingsLangSelect = document.getElementById('languageSelect'); - const messageLangSelect = dom.getElementInTableRowTemplate('messageRow', 'language'); + return query('getLanguages').then(JSON.parse).then(dom.fillLanguagesList); + } - result.forEach((language) => { - const settingsItem = document.createElement('paper-item'); - settingsItem.setAttribute('value', language.locale); - settingsItem.textContent = language.name; - settingsLangSelect.appendChild(settingsItem); - messageLangSelect.appendChild(settingsItem.cloneNode(true)); - }); - - messageLangSelect.setAttribute('value', messageLangSelect.firstElementChild.getAttribute('value')); + function getInitErrors() { + return query('getInitErrors').then((result) => { + if (JSON.parse(result)) { + throw new Error(result); + } }); } - function displayInitErrors() { - return query('getInitErrors').then(JSON.parse).then((result) => { - if (!result) { - return result; - } - const generalMessagesList = document.getElementById('summary').getElementsByTagName('ul')[0]; - - result.forEach((message) => { - const li = document.createElement('li'); - li.className = 'error'; - /* Use the Marked library for Markdown formatting support. */ - li.innerHTML = window.marked(message); - generalMessagesList.appendChild(li); - }); - - document.getElementById('filterTotalMessageNo').textContent = result.length; - document.getElementById('totalMessageNo').textContent = result.length; - document.getElementById('totalErrorNo').textContent = result.length; - - return result; - }); + function handleInitErrors(error) { + dom.listInitErrors(JSON.parse(error.message)); + Dialog.closeProgress(); + document.getElementById('settingsButton').click(); } function setGameTypes() { - return query('getGameTypes').then(JSON.parse).then((result) => { - /* Fill in game row template's game type options. */ - const select = dom.getElementInTableRowTemplate('gameRow', 'type'); - result.forEach((gameType) => { - const item = document.createElement('paper-item'); - item.setAttribute('value', gameType); - item.textContent = gameType; - select.appendChild(item); - }); - select.setAttribute('value', select.firstElementChild.getAttribute('value')); - }); + return query('getGameTypes').then(JSON.parse).then(dom.fillGameTypesList); } function setInstalledGames(appData) { @@ -268,20 +248,16 @@ translateStaticText(loot.l10n); /* Also need to update the settings UI. */ dom.updateSettingsDialog(loot.settings); - loot.DOM.setGameMenuItems(loot.settings.games); - loot.DOM.updateEnabledGames(loot.installedGames); - loot.DOM.updateSelectedGame(loot.game.folder); - }).then(displayInitErrors).then((result) => { - if (result) { - Dialog.closeProgress(); - document.getElementById('settingsButton').click(); - return Promise.resolve(); - } - return setGameData(loot); - }).then(() => { - if (!loot.settings.lastVersion || loot.settings.lastVersion !== loot.version) { + dom.setGameMenuItems(loot.settings.games); + dom.updateEnabledGames(loot.installedGames); + dom.updateSelectedGame(loot.game.folder); + }).then(getInitErrors) + .then(() => setGameData(loot)) + .catch(handleInitErrors) + .then(() => { + if (loot.settings.lastVersion !== loot.version) { document.getElementById('firstRun').open(); } - }).catch(loot.handlePromiseError); + }).catch(handlePromiseError); }; }));