Move some helper functions into new file

Move the helper functions that only touched the DOM and didn't modify
any JS data to a new dom.js file. They probably won't stay as they are
now, but it's a first step to refactoring them.

I also renamed updateSettingsUI() to updateSettingsDialog() for clarity.

src/gui/html/index.html

@@ -316,6 +316,7 @@
     <script src="../../../bower_components/Jed/jed.js"></script>
     <script src="../../../bower_components/jed-gettext-parser/jedGettextParser.js"></script>
     <script src="js/dialog.js"></script>
+    <script src="js/dom.js"></script>
     <script src="js/events.js"></script>
     <script src="js/filters.js"></script>
     <script src="js/game.js"></script>

src/gui/html/js/dom.js

@@ -0,0 +1,78 @@
+'use strict';
+function showElement(element) {
+  if (element !== null) {
+    element.classList.toggle('hidden', false);
+  }
+}
+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);
+      }
+    }
+  }
+}
+/* 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');
+
+  /* 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;
+
+  updateEnabledGames(installedGames);
+  updateSelectedGame(gameFolder);
+}

src/gui/html/js/events.js

@@ -436,11 +436,11 @@ function onCloseSettingsDialog(evt) {
       setInstalledGames(result);
     }).catch(handlePromiseError).then(() => {
       loot.settings = settings;
-      updateSettingsUI();
+      updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
     }).catch(handlePromiseError);
   } else {
     /* Re-apply the existing settings to the settings dialog elements. */
-    updateSettingsUI();
+    updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
   }
   evt.target.parentElement.close();
 }

src/gui/html/js/helpers.js

@@ -5,17 +5,6 @@ function handlePromiseError(err) {
   loot.Dialog.closeProgress();
   loot.Dialog.showMessage(loot.l10n.translate('Error'), err.message);
 }
-
-function showElement(element) {
-  if (element !== null) {
-    element.classList.toggle('hidden', false);
-  }
-}
-function hideElement(element) {
-  if (element !== null) {
-    element.classList.toggle('hidden', true);
-  }
-}
 function getConflictingPlugins(pluginName) {
   if (!pluginName) {
     return Promise.resolve([]);
@@ -82,75 +71,7 @@ function filterPluginData(plugins, filters) {
     document.getElementById('hiddenMessageNo').textContent = hiddenMessageNo;
   });
 }
-/* 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);
-      }
-    }
-  }
-}
-
-/* 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);
-    }
-  }
-}
 function setInstalledGames(installedGames) {
   loot.installedGames = installedGames;
   updateEnabledGames(installedGames);
 }
-/* Call whenever settings are changed. */
-function updateSettingsUI() {
-  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. */
-  loot.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 = loot.settings.game;
-  document.getElementById('languageSelect').value = loot.settings.language;
-  document.getElementById('enableDebugLogging').checked = loot.settings.enableDebugLogging;
-  document.getElementById('updateMasterlist').checked = loot.settings.updateMasterlist;
-
-  updateEnabledGames(loot.installedGames);
-  updateSelectedGame(loot.game.folder);
-}

src/gui/html/js/init.js

@@ -205,7 +205,7 @@ function getInstalledGames() {
 function getSettings() {
   return loot.query('getSettings').then(JSON.parse).then((result) => {
     loot.settings = result;
-    updateSettingsUI();
+      updateSettingsDialog(appData.settings, appData.installedGames, appData.game.folder);
   });
 }