From 60ba7b4f8a188d8a2d589c5208591b79b2e7a2f1 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Sun, 29 Jul 2018 14:42:11 +0200 Subject: [PATCH] Add functionality to mods tab. Mod configurations can now be changed and saved. Still pending optimization to allow required mods to properly declare optional mods. Show main UI on interactive event. We shouldn't wait for remote images to load first. --- app/assets/css/launcher.css | 5 ++- app/assets/js/scripts/settings.js | 67 ++++++++++++++++++++++++++----- app/assets/js/scripts/uibinder.js | 10 ++--- 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 251980d..4ba9026 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -1402,6 +1402,7 @@ input:checked + .toggleSwitchSlider:before { border-radius: 50%; background-color: #c32625; margin-right: 15px; + transition: 0.25s ease; } .settingsModContent { @@ -1430,8 +1431,8 @@ input:checked + .toggleSwitchSlider:before { pointer-events: none; } -.settingsMod[enabled] .settingsModStatus, -.settingsSubMod[enabled] .settingsModStatus{ +.settingsMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus, +.settingsSubMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus { background-color: rgb(165, 195, 37); } diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index a610dd7..270afd3 100644 --- a/app/assets/js/scripts/settings.js +++ b/app/assets/js/scripts/settings.js @@ -55,12 +55,12 @@ function initSettingsValidators(){ function initSettingsValues(){ const sEls = document.getElementById('settingsContainer').querySelectorAll('[cValue]') Array.from(sEls).map((v, index, arr) => { - const gFn = ConfigManager['get' + v.getAttribute('cValue')] + const cVal = v.getAttribute('cValue') + const gFn = ConfigManager['get' + cVal] if(typeof gFn === 'function'){ if(v.tagName === 'INPUT'){ if(v.type === 'number' || v.type === 'text'){ // Special Conditions - const cVal = v.getAttribute('cValue') if(cVal === 'JavaExecutable'){ populateJavaExecDetails(v.value) v.value = gFn() @@ -75,7 +75,6 @@ function initSettingsValues(){ } else if(v.tagName === 'DIV'){ if(v.classList.contains('rangeSlider')){ // Special Conditions - const cVal = v.getAttribute('cValue') if(cVal === 'MinRAM' || cVal === 'MaxRAM'){ let val = gFn() if(val.endsWith('M')){ @@ -101,12 +100,12 @@ function initSettingsValues(){ function saveSettingsValues(){ const sEls = document.getElementById('settingsContainer').querySelectorAll('[cValue]') Array.from(sEls).map((v, index, arr) => { - const sFn = ConfigManager['set' + v.getAttribute('cValue')] + const cVal = v.getAttribute('cValue') + const sFn = ConfigManager['set' + cVal] if(typeof sFn === 'function'){ if(v.tagName === 'INPUT'){ if(v.type === 'number' || v.type === 'text'){ // Special Conditions - const cVal = v.getAttribute('cValue') if(cVal === 'JVMOptions'){ sFn(v.value.split(' ')) } else { @@ -115,7 +114,6 @@ function saveSettingsValues(){ } else if(v.type === 'checkbox'){ sFn(v.checked) // Special Conditions - const cVal = v.getAttribute('cValue') if(cVal === 'AllowPrerelease'){ changeAllowPrerelease(v.checked) } @@ -123,7 +121,6 @@ function saveSettingsValues(){ } else if(v.tagName === 'DIV'){ if(v.classList.contains('rangeSlider')){ // Special Conditions - const cVal = v.getAttribute('cValue') if(cVal === 'MinRAM' || cVal === 'MaxRAM'){ let val = Number(v.getAttribute('value')) if(val%1 > 0){ @@ -234,6 +231,7 @@ function settingsSaveDisabled(v){ /* Closes the settings view and saves all data. */ settingsNavDone.onclick = () => { saveSettingsValues() + saveModConfiguration() ConfigManager.save() switchView(getCurrentView(), VIEWS.landing) } @@ -426,6 +424,8 @@ document.getElementById('settingsGameHeight').addEventListener('keydown', (e) => * Mods Tab */ +const settingsModsContainer = document.getElementById('settingsModsContainer') + function resolveModsForUI(){ const serv = ConfigManager.getSelectedServer() @@ -484,12 +484,12 @@ function parseModulesForUI(mdls, submodules = false, servConf){ ${mdl.hasSubModules() ? `
- ${mdl.hasSubModules() ? Object.values(parseModulesForUI(mdl.getSubModules(), true, conf.mods)).join('') : ''} + ${Object.values(parseModulesForUI(mdl.getSubModules(), true, conf.mods)).join('')}
` : ''} ` @@ -506,11 +506,60 @@ function parseModulesForUI(mdls, submodules = false, servConf){ } +/** + * Bind functionality to mod config toggle switches. Switching the value + * will also switch the status color on the left of the mod UI. + */ +function bindModsToggleSwitch(){ + const sEls = settingsModsContainer.querySelectorAll('[formod]') + Array.from(sEls).map((v, index, arr) => { + v.onchange = () => { + if(v.checked) { + document.getElementById(v.getAttribute('formod')).setAttribute('enabled', '') + } else { + document.getElementById(v.getAttribute('formod')).removeAttribute('enabled') + } + } + }) +} + + +/** + * Save the mod configuration based on the UI values. + */ +function saveModConfiguration(){ + const serv = ConfigManager.getSelectedServer() + const modConf = ConfigManager.getModConfiguration(serv) + modConf.mods = _saveModConfiguration(modConf.mods) + ConfigManager.setModConfiguration(serv, modConf) +} + +/** + * Recursively save mod config with submods. + * + * @param {Object} modConf Mod config object to save. + */ +function _saveModConfiguration(modConf){ + for(m of Object.entries(modConf)){ + const val = settingsModsContainer.querySelectorAll(`[formod='${m[0]}']`)[0].checked + if(typeof m[1] === 'boolean'){ + modConf[m[0]] = val + } else { + if(m[1] != null){ + modConf[m[0]].value = val + modConf[m[0]].mods = _saveModConfiguration(modConf[m[0]].mods) + } + } + } + return modConf +} + /** * Prepare the Java tab for display. */ function prepareModsTab(){ resolveModsForUI() + bindModsToggleSwitch() } /** diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js index 5b3ba7e..fe35206 100644 --- a/app/assets/js/scripts/uibinder.js +++ b/app/assets/js/scripts/uibinder.js @@ -344,7 +344,7 @@ function setSelectedAccount(uuid){ // Synchronous Listener document.addEventListener('readystatechange', function(){ - if (document.readyState === 'complete'){ + if (document.readyState === 'interactive' || document.readyState === 'complete'){ if(rscShouldLoad){ if(!fatalStartupError){ const data = DistroManager.getDistribution() @@ -353,9 +353,9 @@ document.addEventListener('readystatechange', function(){ showFatalStartupError() } } - } else if(document.readyState === 'interactive'){ + }// else if(document.readyState === 'interactive'){ //toggleOverlay(true, 'loadingContent') - } + //} /*if (document.readyState === 'interactive'){ @@ -367,14 +367,14 @@ ipcRenderer.on('distributionIndexDone', (event, res) => { if(res) { const data = DistroManager.getDistribution() syncModConfigurations(data) - if(document.readyState === 'complete'){ + if(document.readyState === 'interactive' || document.readyState === 'complete'){ showMainUI(data) } else { rscShouldLoad = true } } else { fatalStartupError = true - if(document.readyState === 'complete'){ + if(document.readyState === 'interactive' || document.readyState === 'complete'){ showFatalStartupError() } else { rscShouldLoad = true