mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Modularise dom.js
This commit is contained in:
Oliver Hamlet
+84
-77
@@ -1,85 +1,92 @@
|
||||
'use strict';
|
||||
function showElement(element) {
|
||||
if (element !== null) {
|
||||
element.classList.toggle('hidden', false);
|
||||
(function exportModule(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
root.loot = root.loot || {};
|
||||
root.loot.dom = factory();
|
||||
}
|
||||
}
|
||||
function getElementInTableRowTemplate(rowTemplateId, elementClass) {
|
||||
const select = document.querySelector('link[rel="import"][href$="editable-table.html"]');
|
||||
if (select) {
|
||||
return select.import.querySelector('#' + rowTemplateId).content.querySelector('.' + elementClass);
|
||||
}
|
||||
return document.querySelector('#' + rowTemplateId).content.querySelector('.' + elementClass);
|
||||
}
|
||||
function hideElement(element) {
|
||||
if (element !== null) {
|
||||
element.classList.toggle('hidden', true);
|
||||
}
|
||||
}
|
||||
/* Call whenever game is changed or game menu / game table are rewritten. */
|
||||
function 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) {
|
||||
if (table.tBodies[0].rows[i].getElementsByClassName('folder').length > 0) {
|
||||
if (table.tBodies[0].rows[i].getElementsByClassName('folder')[0].value === gameFolder) {
|
||||
table.setReadOnly(table.tBodies[0].rows[i], ['delete']);
|
||||
} else {
|
||||
table.setReadOnly(table.tBodies[0].rows[i], ['delete'], false);
|
||||
}(this, () => {
|
||||
return {
|
||||
getElementInTableRowTemplate(rowTemplateId, elementClass) {
|
||||
const select = document.querySelector('link[rel="import"][href$="editable-table.html"]');
|
||||
if (select) {
|
||||
return select.import.querySelector('#' + rowTemplateId).content.querySelector('.' + elementClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Call whenever installedGames is changed or game menu is rewritten. */
|
||||
function updateEnabledGames(installedGames) {
|
||||
/* Update the disabled games in the game menu. */
|
||||
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);
|
||||
gameMenuItems[i].removeEventListener('click', onChangeGame);
|
||||
} else {
|
||||
gameMenuItems[i].removeAttribute('disabled');
|
||||
gameMenuItems[i].addEventListener('click', onChangeGame);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Call whenever settings are changed. */
|
||||
function updateSettingsDialog(settings, installedGames, gameFolder) {
|
||||
const gameSelect = document.getElementById('defaultGameSelect');
|
||||
const gameMenu = document.getElementById('gameMenu');
|
||||
const gameTable = document.getElementById('gameTable');
|
||||
return document.querySelector('#' + rowTemplateId).content.querySelector('.' + elementClass);
|
||||
},
|
||||
|
||||
/* First make sure game listing elements don't have any existing entries. */
|
||||
while (gameSelect.children.length > 1) {
|
||||
gameSelect.removeChild(gameSelect.lastElementChild);
|
||||
}
|
||||
while (gameMenu.firstElementChild) {
|
||||
gameMenu.firstElementChild.removeEventListener('click', onChangeGame);
|
||||
gameMenu.removeChild(gameMenu.firstElementChild);
|
||||
}
|
||||
gameTable.clear();
|
||||
show(elementId) {
|
||||
document.getElementById(elementId).classList.toggle('hidden', false);
|
||||
},
|
||||
|
||||
/* Now fill with new values. */
|
||||
settings.games.forEach((game) => {
|
||||
const menuItem = document.createElement('paper-item');
|
||||
menuItem.setAttribute('value', game.folder);
|
||||
menuItem.setAttribute('noink', '');
|
||||
menuItem.textContent = game.name;
|
||||
gameMenu.appendChild(menuItem);
|
||||
gameSelect.appendChild(menuItem.cloneNode(true));
|
||||
hide(elementId) {
|
||||
document.getElementById(elementId).classList.toggle('hidden', true);
|
||||
},
|
||||
|
||||
const row = gameTable.addRow(game);
|
||||
gameTable.setReadOnly(row, ['name', 'folder', 'type']);
|
||||
});
|
||||
updateSelectedGame(gameFolder) {
|
||||
document.getElementById('gameMenu').value = gameFolder;
|
||||
|
||||
gameSelect.value = settings.game;
|
||||
document.getElementById('languageSelect').value = settings.language;
|
||||
document.getElementById('enableDebugLogging').checked = settings.enableDebugLogging;
|
||||
document.getElementById('updateMasterlist').checked = settings.updateMasterlist;
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateEnabledGames(installedGames);
|
||||
updateSelectedGame(gameFolder);
|
||||
}
|
||||
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);
|
||||
gameMenuItems[i].removeEventListener('click', onChangeGame);
|
||||
} else {
|
||||
gameMenuItems[i].removeAttribute('disabled');
|
||||
gameMenuItems[i].addEventListener('click', onChangeGame);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateSettingsDialog(settings, installedGames, gameFolder) {
|
||||
const gameSelect = document.getElementById('defaultGameSelect');
|
||||
const gameMenu = document.getElementById('gameMenu');
|
||||
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);
|
||||
}
|
||||
while (gameMenu.firstElementChild) {
|
||||
gameMenu.firstElementChild.removeEventListener('click', onChangeGame);
|
||||
gameMenu.removeChild(gameMenu.firstElementChild);
|
||||
}
|
||||
gameTable.clear();
|
||||
|
||||
/* Now fill with new values. */
|
||||
settings.games.forEach((game) => {
|
||||
const menuItem = document.createElement('paper-item');
|
||||
menuItem.setAttribute('value', game.folder);
|
||||
menuItem.setAttribute('noink', '');
|
||||
menuItem.textContent = game.name;
|
||||
gameMenu.appendChild(menuItem);
|
||||
gameSelect.appendChild(menuItem.cloneNode(true));
|
||||
|
||||
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;
|
||||
|
||||
this.updateEnabledGames(installedGames);
|
||||
this.updateSelectedGame(gameFolder);
|
||||
},
|
||||
};
|
||||
}));
|
||||
|
||||
+16
-16
@@ -47,7 +47,7 @@ function onGameMasterlistChange(evt) {
|
||||
document.getElementById('masterlistDate').textContent = evt.detail.date;
|
||||
}
|
||||
function onGameFolderChange(evt) {
|
||||
updateSelectedGame(evt.detail.folder);
|
||||
loot.dom.updateSelectedGame(evt.detail.folder);
|
||||
/* Enable/disable the redate plugins option. */
|
||||
let index = undefined;
|
||||
if (loot.settings && loot.settings.games) {
|
||||
@@ -239,10 +239,10 @@ function onSortPlugins() {
|
||||
|
||||
/* Now hide the masterlist update buttons, and display the accept and
|
||||
cancel sort buttons. */
|
||||
hideElement(document.getElementById('updateMasterlistButton'));
|
||||
hideElement(document.getElementById('sortButton'));
|
||||
showElement(document.getElementById('applySortButton'));
|
||||
showElement(document.getElementById('cancelSortButton'));
|
||||
loot.dom.hide('updateMasterlistButton');
|
||||
loot.dom.hide('sortButton');
|
||||
loot.dom.show('applySortButton');
|
||||
loot.dom.show('cancelSortButton');
|
||||
|
||||
/* Disable changing game. */
|
||||
document.getElementById('gameMenu').setAttribute('disabled', '');
|
||||
@@ -261,10 +261,10 @@ function onApplySort() {
|
||||
|
||||
/* Now show the masterlist update buttons, and hide the accept and
|
||||
cancel sort buttons. */
|
||||
showElement(document.getElementById('updateMasterlistButton'));
|
||||
showElement(document.getElementById('sortButton'));
|
||||
hideElement(document.getElementById('applySortButton'));
|
||||
hideElement(document.getElementById('cancelSortButton'));
|
||||
loot.dom.show('updateMasterlistButton');
|
||||
loot.dom.show('sortButton');
|
||||
loot.dom.hide('applySortButton');
|
||||
loot.dom.hide('cancelSortButton');
|
||||
|
||||
/* Enable changing game. */
|
||||
document.getElementById('gameMenu').removeAttribute('disabled');
|
||||
@@ -280,10 +280,10 @@ function onCancelSort(evt) {
|
||||
|
||||
/* Now show the masterlist update buttons, and hide the accept and
|
||||
cancel sort buttons. */
|
||||
showElement(document.getElementById('updateMasterlistButton'));
|
||||
showElement(document.getElementById('sortButton'));
|
||||
hideElement(document.getElementById('applySortButton'));
|
||||
hideElement(document.getElementById('cancelSortButton'));
|
||||
loot.dom.show('updateMasterlistButton');
|
||||
loot.dom.show('sortButton');
|
||||
loot.dom.hide('applySortButton');
|
||||
loot.dom.hide('cancelSortButton');
|
||||
|
||||
/* Enable changing game. */
|
||||
document.getElementById('gameMenu').removeAttribute('disabled');
|
||||
@@ -434,14 +434,14 @@ function onCloseSettingsDialog(evt) {
|
||||
/* Send the settings back to the C++ side. */
|
||||
loot.query('closeSettings', settings).then(JSON.parse).then((installedGames) => {
|
||||
loot.installedGames = installedGames;
|
||||
updateEnabledGames(installedGames);
|
||||
loot.dom.updateEnabledGames(installedGames);
|
||||
}).catch(handlePromiseError).then(() => {
|
||||
loot.settings = settings;
|
||||
updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
loot.dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
}).catch(handlePromiseError);
|
||||
} else {
|
||||
/* Re-apply the existing settings to the settings dialog elements. */
|
||||
updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
loot.dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
}
|
||||
evt.target.parentElement.close();
|
||||
}
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
// Browser globals
|
||||
root.loot = root.loot || {};
|
||||
root.loot.initialise = factory(root.loot.Dialog,
|
||||
root.loot.dom,
|
||||
root.loot.Filters,
|
||||
root.loot.Game,
|
||||
root.loot.translateStaticText,
|
||||
@@ -37,7 +38,7 @@
|
||||
root.loot.query,
|
||||
root.loot.Translator);
|
||||
}
|
||||
}(this, (Dialog, Filters, Game, translateStaticText, Plugin, query, Translator) => {
|
||||
}(this, (Dialog, dom, Filters, Game, translateStaticText, Plugin, query, Translator) => {
|
||||
function setupEventHandlers() {
|
||||
/* Set up handlers for filters. */
|
||||
document.getElementById('hideVersionNumbers').addEventListener('change', onToggleDisplayCSS);
|
||||
@@ -152,7 +153,7 @@
|
||||
return query('getLanguages').then(JSON.parse).then((result) => {
|
||||
/* Now fill in language options. */
|
||||
const settingsLangSelect = document.getElementById('languageSelect');
|
||||
const messageLangSelect = getElementInTableRowTemplate('messageRow', 'language');
|
||||
const messageLangSelect = dom.getElementInTableRowTemplate('messageRow', 'language');
|
||||
|
||||
result.forEach((language) => {
|
||||
const settingsItem = document.createElement('paper-item');
|
||||
@@ -193,7 +194,7 @@
|
||||
function setGameTypes() {
|
||||
return query('getGameTypes').then(JSON.parse).then((result) => {
|
||||
/* Fill in game row template's game type options. */
|
||||
const select = getElementInTableRowTemplate('gameRow', 'type');
|
||||
const select = dom.getElementInTableRowTemplate('gameRow', 'type');
|
||||
result.forEach((gameType) => {
|
||||
const item = document.createElement('paper-item');
|
||||
item.setAttribute('value', gameType);
|
||||
@@ -208,14 +209,14 @@
|
||||
function setInstalledGames(appData) {
|
||||
return query('getInstalledGames').then(JSON.parse).then((installedGames) => {
|
||||
appData.installedGames = installedGames;
|
||||
updateEnabledGames(installedGames);
|
||||
dom.updateEnabledGames(installedGames);
|
||||
});
|
||||
}
|
||||
|
||||
function setSettings(appData) {
|
||||
return query('getSettings').then(JSON.parse).then((result) => {
|
||||
appData.settings = result;
|
||||
updateSettingsDialog(appData.settings, appData.installedGames, appData.game.folder);
|
||||
dom.updateSettingsDialog(appData.settings, appData.installedGames, appData.game.folder);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -263,7 +264,7 @@
|
||||
loot.filters = new Filters(loot.l10n);
|
||||
translateStaticText(loot.l10n);
|
||||
/* Also need to update the settings UI. */
|
||||
updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
|
||||
}).then(() => {
|
||||
return displayInitErrors();
|
||||
}).then((result) => {
|
||||
|
||||
Reference in New Issue
Block a user