v0.0.1-alpha.12 - Completed Java Settings Tab.

Added JVM Options to the Java tab.
Small clean up for the Java tab's styles and bindings.
This commit is contained in:
Daniel Scalzi
2018-06-14 06:09:09 -04:00
parent 109c24bc79
commit e7752b4374
3 changed files with 218 additions and 41 deletions

View File

@@ -17,9 +17,10 @@ const settingsMaxRAMLabel = document.getElementById('settingsMaxRAMLabel')
const settingsMinRAMLabel = document.getElementById('settingsMinRAMLabel')
const settingsMemoryTotal = document.getElementById('settingsMemoryTotal')
const settingsMemoryAvail = document.getElementById('settingsMemoryAvail')
const settingsJavaExecDetails = document.getElementById('settingsJavaExecDetails')
const settingsJavaExecVal = document.getElementById('settingsJavaExecVal')
const settingsJavaExecSel = document.getElementById('settingsJavaExecSel')
const settingsJavaExecDetails = document.getElementById('settingsJavaExecDetails')
const settingsJavaExecVal = document.getElementById('settingsJavaExecVal')
const settingsJavaExecSel = document.getElementById('settingsJavaExecSel')
const settingsJVMOptsVal = document.getElementById('settingsJVMOptsVal')
const settingsState = {
invalid: new Set()
@@ -76,12 +77,15 @@ function initSettingsValues(){
if(typeof gFn === 'function'){
if(v.tagName === 'INPUT'){
if(v.type === 'number' || v.type === 'text'){
v.value = gFn()
// Special Conditions
const cVal = v.getAttribute('cValue')
if(cVal === 'JavaExecutable'){
populateJavaExecDetails(v.value)
v.value = gFn()
} else if(cVal === 'JVMOptions'){
v.value = gFn().join(' ')
} else {
v.value = gFn()
}
} else if(v.type === 'checkbox'){
v.checked = gFn()
@@ -119,7 +123,13 @@ function saveSettingsValues(){
if(typeof sFn === 'function'){
if(v.tagName === 'INPUT'){
if(v.type === 'number' || v.type === 'text'){
sFn(v.value)
// Special Conditions
const cVal = v.getAttribute('cValue')
if(cVal === 'JVMOptions'){
sFn(v.value.split(' '))
} else {
sFn(v.value)
}
} else if(v.type === 'checkbox'){
sFn(v.checked)
// Special Conditions
@@ -348,6 +358,9 @@ function populateAuthAccounts(){
settingsCurrentAccounts.innerHTML = authAccountStr
}
/**
* Prepare the accounts tab for display.
*/
function prepareAccountsTab() {
populateAuthAccounts()
bindAuthAccountSelect()
@@ -376,16 +389,29 @@ settingsGameHeight.addEventListener('keydown', (e) => {
* Java Tab
*/
settingsMaxRAMRange.setAttribute('max', ConfigManager.getAbsoluteMaxRAM())
settingsMaxRAMRange.setAttribute('min', ConfigManager.getAbsoluteMinRAM())
settingsMinRAMRange.setAttribute('max', ConfigManager.getAbsoluteMaxRAM())
settingsMinRAMRange.setAttribute('min', ConfigManager.getAbsoluteMinRAM())
// Store maximum memory values.
const SETTINGS_MAX_MEMORY = ConfigManager.getAbsoluteMaxRAM()
const SETTINGS_MIN_MEMORY = ConfigManager.getAbsoluteMinRAM()
// Set the max and min values for the ranged sliders.
settingsMaxRAMRange.setAttribute('max', SETTINGS_MAX_MEMORY)
settingsMaxRAMRange.setAttribute('min', SETTINGS_MIN_MEMORY)
settingsMinRAMRange.setAttribute('max', SETTINGS_MAX_MEMORY)
settingsMinRAMRange.setAttribute('min', SETTINGS_MIN_MEMORY )
// Bind on change event for min memory container.
settingsMinRAMRange.onchange = (e) => {
// Current range values
const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
// Get reference to range bar.
const bar = e.target.getElementsByClassName('rangeSliderBar')[0]
// Calculate effective total memory.
const max = (os.totalmem()-1000000000)/1000000000
// Change range bar color based on the selected value.
if(sMinV >= max/2){
bar.style.background = '#e86060'
} else if(sMinV >= max/4) {
@@ -393,20 +419,31 @@ settingsMinRAMRange.onchange = (e) => {
} else {
bar.style.background = null
}
// Increase maximum memory if the minimum exceeds its value.
if(sMaxV < sMinV){
const sliderMeta = calculateRangeSliderMeta(settingsMaxRAMRange)
updateRangedSlider(settingsMaxRAMRange, sMinV,
((sMinV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
settingsMaxRAMLabel.innerHTML = sMinV.toFixed(1) + 'G'
}
// Update label
settingsMinRAMLabel.innerHTML = sMinV.toFixed(1) + 'G'
}
// Bind on change event for max memory container.
settingsMaxRAMRange.onchange = (e) => {
// Current range values
const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
// Get reference to range bar.
const bar = e.target.getElementsByClassName('rangeSliderBar')[0]
// Calculate effective total memory.
const max = (os.totalmem()-1000000000)/1000000000
// Change range bar color based on the selected value.
if(sMaxV >= max/2){
bar.style.background = '#e86060'
} else if(sMaxV >= max/4) {
@@ -414,6 +451,8 @@ settingsMaxRAMRange.onchange = (e) => {
} else {
bar.style.background = null
}
// Decrease the minimum memory if the maximum value is less.
if(sMaxV < sMinV){
const sliderMeta = calculateRangeSliderMeta(settingsMaxRAMRange)
updateRangedSlider(settingsMinRAMRange, sMaxV,
@@ -423,21 +462,12 @@ settingsMaxRAMRange.onchange = (e) => {
settingsMaxRAMLabel.innerHTML = sMaxV.toFixed(1) + 'G'
}
settingsJavaExecSel.onchange = (e) => {
settingsJavaExecVal.value = settingsJavaExecSel.files[0].path
populateJavaExecDetails(settingsJavaExecVal.value)
}
function populateJavaExecDetails(execPath){
AssetGuard._validateJavaBinary(execPath).then(v => {
if(v.valid){
settingsJavaExecDetails.innerHTML = `Selected: Java ${v.version.major} Update ${v.version.update} (x${v.arch})`
} else {
settingsJavaExecDetails.innerHTML = 'Invalid Selection'
}
})
}
/**
* Calculate common values for a ranged slider.
*
* @param {Element} v The range slider to calculate against.
* @returns {Object} An object with meta values for the provided ranged slider.
*/
function calculateRangeSliderMeta(v){
const val = {
max: Number(v.getAttribute('max')),
@@ -449,30 +479,46 @@ function calculateRangeSliderMeta(v){
return val
}
/**
* Binds functionality to the ranged sliders. They're more than
* just divs now :').
*/
function bindRangeSlider(){
Array.from(document.getElementsByClassName('rangeSlider')).map((v) => {
// Reference the track (thumb).
const track = v.getElementsByClassName('rangeSliderTrack')[0]
// Set the initial slider value.
const value = v.getAttribute('value')
const sliderMeta = calculateRangeSliderMeta(v)
updateRangedSlider(v, value,
((value-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
updateRangedSlider(v, value, ((value-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
// The magic happens when we click on the track.
track.onmousedown = (e) => {
// Stop moving the track on mouse up.
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
// Move slider according to the mouse position.
document.onmousemove = (e) => {
// Distance from the beginning of the bar in pixels.
const diff = e.pageX - v.offsetLeft - track.offsetWidth/2
// Don't move the track off the bar.
if(diff >= 0 && diff <= v.offsetWidth-track.offsetWidth/2){
// Convert the difference to a percentage.
const perc = (diff/v.offsetWidth)*100
// Calculate the percentage of the closest notch.
const notch = Number(perc/sliderMeta.inc).toFixed(0)*sliderMeta.inc
// If we're close to that notch, stick to it.
if(Math.abs(perc-notch) < sliderMeta.inc/2){
updateRangedSlider(v, sliderMeta.min+(sliderMeta.step*(notch/sliderMeta.inc)), notch)
}
@@ -482,18 +528,29 @@ function bindRangeSlider(){
})
}
/**
* Update a ranged slider's value and position.
*
* @param {Element} element The ranged slider to update.
* @param {string | number} value The new value for the ranged slider.
* @param {number} notch The notch that the slider should now be at.
*/
function updateRangedSlider(element, value, notch){
const oldVal = element.getAttribute('value')
const bar = element.getElementsByClassName('rangeSliderBar')[0]
const track = element.getElementsByClassName('rangeSliderTrack')[0]
element.setAttribute('value', value)
const event = new MouseEvent('change', {
target: element,
type: 'change',
bubbles: false,
cancelable: true
})
let cancelled = !element.dispatchEvent(event)
if(!cancelled){
track.style.left = notch + '%'
bar.style.width = notch + '%'
@@ -502,14 +559,42 @@ function updateRangedSlider(element, value, notch){
}
}
function bindMemoryStatus(){
/**
* Display the total and available RAM.
*/
function populateMemoryStatus(){
settingsMemoryTotal.innerHTML = Number((os.totalmem()-1000000000)/1000000000).toFixed(1) + 'G'
settingsMemoryAvail.innerHTML = Number(os.freemem()/1000000000).toFixed(1) + 'G'
}
// Bind the executable file input to the display text input.
settingsJavaExecSel.onchange = (e) => {
settingsJavaExecVal.value = settingsJavaExecSel.files[0].path
populateJavaExecDetails(settingsJavaExecVal.value)
}
/**
* Validate the provided executable path and display the data on
* the UI.
*
* @param {string} execPath The executable path to populate against.
*/
function populateJavaExecDetails(execPath){
AssetGuard._validateJavaBinary(execPath).then(v => {
if(v.valid){
settingsJavaExecDetails.innerHTML = `Selected: Java ${v.version.major} Update ${v.version.update} (x${v.arch})`
} else {
settingsJavaExecDetails.innerHTML = 'Invalid Selection'
}
})
}
/**
* Prepare the Java tab for display.
*/
function prepareJavaTab(){
bindRangeSlider()
bindMemoryStatus()
populateMemoryStatus()
}