General cleanup for mods tab code.
This commit is contained in:
Daniel Scalzi
parent
556199aa55
commit
b46ac97493
@ -1368,103 +1368,7 @@ input:checked + .toggleSwitchSlider:before {
|
||||
* Settings View (Mods Tab)
|
||||
* * */
|
||||
|
||||
#settingsReqModsContent,
|
||||
#settingsOptModsContent,
|
||||
#settingsDropinModsContent {
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#settingsModsContainer {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.settingsModsHeader {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#settingsReqModsContainer,
|
||||
#settingsOptModsContainer,
|
||||
#settingsDropinModsContainer {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.settingsMod,
|
||||
.settingsDropinMod {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settingsSubMod {
|
||||
padding: 10px 0px 10px 15px;
|
||||
margin-left: 20px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.settingsModStatus {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #c32625;
|
||||
margin-right: 15px;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.settingsModContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.settingsModMainWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settingsModVersion {
|
||||
color: grey;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.settingsModDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toggleSwitch[reqmod] {
|
||||
filter: grayscale(49%) brightness(60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
|
||||
background-color: rgb(165, 195, 37);
|
||||
}
|
||||
|
||||
.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.settingsSubModContainer > .settingsSubMod:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.settingsSubModContainer > .settingsSubMod:last-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
settingsSubModContainer > .settingsSubMod:only-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
.settingsSubModContainer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Selected server content container */
|
||||
#settingsSelServContainer {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
width: 75%;
|
||||
@ -1474,6 +1378,7 @@ settingsSubModContainer > .settingsSubMod:only-child {
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
/* Div which will be populated with the selected server's information. */
|
||||
#settingsSelServContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1481,12 +1386,14 @@ settingsSubModContainer > .settingsSubMod:only-child {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
/* Wrapper container for the switch server button. */
|
||||
#settingsSwitchServerContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Button to switch server configurations on the mods tab. */
|
||||
#settingsSwitchServerButton {
|
||||
opacity: 0;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
@ -1514,6 +1421,140 @@ settingsSubModContainer > .settingsSubMod:only-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Main content container for the mod elements. */
|
||||
#settingsModsContainer {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
/* Mod sub-container header text. */
|
||||
.settingsModsHeader {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Mod elements sub-containers. */
|
||||
#settingsReqModsContainer,
|
||||
#settingsOptModsContainer,
|
||||
#settingsDropinModsContainer {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Main content containers for mod elements. */
|
||||
#settingsReqModsContent,
|
||||
#settingsOptModsContent,
|
||||
#settingsDropinModsContent {
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mod elements. */
|
||||
.settingsMod,
|
||||
.settingsDropinMod {
|
||||
padding: 10px;
|
||||
}
|
||||
.settingsSubMod {
|
||||
padding: 10px 0px 10px 15px;
|
||||
margin-left: 20px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Main content container for mod element information. */
|
||||
.settingsModContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
/* Wrapper container for the left side of a mod element. */
|
||||
.settingsModMainWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Mod enabled/disabled status. */
|
||||
.settingsModStatus {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #c32625;
|
||||
margin-right: 15px;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
/* Mod details container. */
|
||||
.settingsModDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* The version of the mod. */
|
||||
.settingsModVersion {
|
||||
color: grey;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Disabled toggleswitch for required mods. */
|
||||
.toggleSwitch[reqmod] {
|
||||
filter: grayscale(49%) brightness(60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Set the status color of an enabled mod. */
|
||||
.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
|
||||
background-color: rgb(165, 195, 37);
|
||||
}
|
||||
|
||||
/* Add opacity to submods of a disabled mod. */
|
||||
.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Curve the left border for submods. */
|
||||
.settingsSubModContainer > .settingsSubMod:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.settingsSubModContainer > .settingsSubMod:last-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.settingsSubModContainer > .settingsSubMod:only-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
/* Wrapper container for all submods. */
|
||||
.settingsSubModContainer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Button to open the mods folder for drop-in mods. */
|
||||
#settingsDropinFileSystemButton {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(126, 126, 126, 0.57);
|
||||
border-radius: 3px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0px 50px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: 0.25s ease;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#settingsDropinFileSystemButton:hover,
|
||||
#settingsDropinFileSystemButton:focus {
|
||||
background: rgba(54, 54, 54, 0.25);
|
||||
text-shadow: 0px 0px 20px white;
|
||||
}
|
||||
/* Refresh instructions on the file system button. */
|
||||
#settingsDropinRefreshNote {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Button to remove drop-in mods. */
|
||||
.settingsDropinRemoveButton {
|
||||
background: none;
|
||||
border: none;
|
||||
@ -1535,29 +1576,6 @@ settingsSubModContainer > .settingsSubMod:only-child {
|
||||
text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f;
|
||||
}
|
||||
|
||||
#settingsDropinFileSystemButton {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(126, 126, 126, 0.57);
|
||||
border-radius: 3px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0px 50px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: 0.25s ease;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#settingsDropinFileSystemButton:hover,
|
||||
#settingsDropinFileSystemButton:focus {
|
||||
background: rgba(54, 54, 54, 0.25);
|
||||
text-shadow: 0px 0px 20px white;
|
||||
}
|
||||
|
||||
#settingsDropinRefreshNote {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Settings View (Java Tab)
|
||||
* * */
|
||||
|
||||
@ -27,7 +27,7 @@ exports.scanForDropinMods = function(modsDir, version) {
|
||||
if(fs.existsSync(versionDir)){
|
||||
verCandidates = fs.readdirSync(versionDir)
|
||||
}
|
||||
for(file of modCandidates){
|
||||
for(let file of modCandidates){
|
||||
const match = MOD_REGEX.exec(file)
|
||||
if(match != null){
|
||||
modsDiscovered.push({
|
||||
@ -38,7 +38,7 @@ exports.scanForDropinMods = function(modsDir, version) {
|
||||
})
|
||||
}
|
||||
}
|
||||
for(file of verCandidates){
|
||||
for(let file of verCandidates){
|
||||
const match = MOD_REGEX.exec(file)
|
||||
if(match != null){
|
||||
modsDiscovered.push({
|
||||
@ -62,15 +62,6 @@ exports.scanForDropinMods = function(modsDir, version) {
|
||||
* @returns {boolean} True if the mod was deleted, otherwise false.
|
||||
*/
|
||||
exports.deleteDropinMod = function(modsDir, fullName){
|
||||
/*return new Promise((resolve, reject) => {
|
||||
fs.unlink(path.join(modsDir, fullName), (err) => {
|
||||
if(err){
|
||||
reject(err)
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})*/
|
||||
const res = shell.moveItemToTrash(path.join(modsDir, fullName))
|
||||
if(!res){
|
||||
shell.beep()
|
||||
@ -104,6 +95,12 @@ exports.toggleDropinMod = function(modsDir, fullName, enable){
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a drop-in mod is enabled.
|
||||
*
|
||||
* @param {string} fullName The fullName of the discovered mod to toggle.
|
||||
* @returns {boolean} True if the mod is enabled, otherwise false.
|
||||
*/
|
||||
exports.isDropinModEnabled = function(fullName){
|
||||
return !fullName.endsWith(DISABLED_EXT)
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
* @returns {boolean} Whether or not the overlay is visible.
|
||||
*/
|
||||
function isOverlayVisible(){
|
||||
return document.getElementById('main').hasAttribute('overlay');
|
||||
return document.getElementById('main').hasAttribute('overlay')
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -428,6 +428,9 @@ document.getElementById('settingsGameHeight').addEventListener('keydown', (e) =>
|
||||
|
||||
const settingsModsContainer = document.getElementById('settingsModsContainer')
|
||||
|
||||
/**
|
||||
* Resolve and update the mods on the UI.
|
||||
*/
|
||||
function resolveModsForUI(){
|
||||
const serv = ConfigManager.getSelectedServer()
|
||||
|
||||
@ -438,9 +441,15 @@ function resolveModsForUI(){
|
||||
|
||||
document.getElementById('settingsReqModsContent').innerHTML = modStr.reqMods
|
||||
document.getElementById('settingsOptModsContent').innerHTML = modStr.optMods
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively build the mod UI elements.
|
||||
*
|
||||
* @param {Object[]} mdls An array of modules to parse.
|
||||
* @param {boolean} submodules Whether or not we are parsing submodules.
|
||||
* @param {Object} servConf The server configuration object for this module level.
|
||||
*/
|
||||
function parseModulesForUI(mdls, submodules, servConf){
|
||||
|
||||
let reqMods = ''
|
||||
@ -496,9 +505,7 @@ function parseModulesForUI(mdls, submodules, servConf){
|
||||
</div>`
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
@ -560,35 +567,15 @@ function _saveModConfiguration(modConf){
|
||||
return modConf
|
||||
}
|
||||
|
||||
function loadSelectedServerOnModsTab(){
|
||||
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
|
||||
|
||||
document.getElementById('settingsSelServContent').innerHTML = `
|
||||
<img class="serverListingImg" src="${serv.getIcon()}"/>
|
||||
<div class="serverListingDetails">
|
||||
<span class="serverListingName">${serv.getName()}</span>
|
||||
<span class="serverListingDescription">${serv.getDescription()}</span>
|
||||
<div class="serverListingInfo">
|
||||
<div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
|
||||
<div class="serverListingRevision">${serv.getVersion()}</div>
|
||||
${serv.isMainServer() ? `<div class="serverListingStarWrapper">
|
||||
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
|
||||
<defs>
|
||||
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
|
||||
<circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
|
||||
</svg>
|
||||
<span class="serverListingStarTooltip">Main Server</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
// Drop-in mod elements.
|
||||
|
||||
let CACHE_SETTINGS_MODS_DIR
|
||||
let CACHE_DROPIN_MODS
|
||||
|
||||
/**
|
||||
* Resolve any located drop-in mods for this server and
|
||||
* populate the results onto the UI.
|
||||
*/
|
||||
function resolveDropinModsForUI(){
|
||||
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
|
||||
CACHE_SETTINGS_MODS_DIR = path.join(ConfigManager.getInstanceDirectory(), serv.getID(), 'mods')
|
||||
@ -619,6 +606,9 @@ function resolveDropinModsForUI(){
|
||||
document.getElementById('settingsDropinModsContent').innerHTML = dropinMods
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind the remove button for each loaded drop-in mod.
|
||||
*/
|
||||
function bindDropinModsRemoveButton(){
|
||||
const sEls = settingsModsContainer.querySelectorAll('[remmod]')
|
||||
Array.from(sEls).map((v, index, arr) => {
|
||||
@ -640,6 +630,10 @@ function bindDropinModsRemoveButton(){
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind functionality to the file system button for the selected
|
||||
* server configuration.
|
||||
*/
|
||||
function bindDropinModFileSystemButton(){
|
||||
const fsBtn = document.getElementById('settingsDropinFileSystemButton')
|
||||
fsBtn.onclick = () => {
|
||||
@ -647,6 +641,10 @@ function bindDropinModFileSystemButton(){
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save drop-in mod states. Enabling and disabling is just a matter
|
||||
* of adding/removing the .disabled extension.
|
||||
*/
|
||||
function saveDropinModConfiguration(){
|
||||
for(dropin of CACHE_DROPIN_MODS){
|
||||
const dropinUI = document.getElementById(dropin.fullName)
|
||||
@ -669,11 +667,8 @@ function saveDropinModConfiguration(){
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
|
||||
e.target.blur()
|
||||
toggleServerSelection(true)
|
||||
})
|
||||
|
||||
// Refresh the drop-in mods when F5 is pressed.
|
||||
// Only active on the mods tab.
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){
|
||||
if(e.key === 'F5'){
|
||||
@ -685,6 +680,47 @@ document.addEventListener('keydown', (e) => {
|
||||
}
|
||||
})
|
||||
|
||||
// Server status bar functions.
|
||||
|
||||
/**
|
||||
* Load the currently selected server information onto the mods tab.
|
||||
*/
|
||||
function loadSelectedServerOnModsTab(){
|
||||
const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
|
||||
|
||||
document.getElementById('settingsSelServContent').innerHTML = `
|
||||
<img class="serverListingImg" src="${serv.getIcon()}"/>
|
||||
<div class="serverListingDetails">
|
||||
<span class="serverListingName">${serv.getName()}</span>
|
||||
<span class="serverListingDescription">${serv.getDescription()}</span>
|
||||
<div class="serverListingInfo">
|
||||
<div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
|
||||
<div class="serverListingRevision">${serv.getVersion()}</div>
|
||||
${serv.isMainServer() ? `<div class="serverListingStarWrapper">
|
||||
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
|
||||
<defs>
|
||||
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
|
||||
<circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
|
||||
</svg>
|
||||
<span class="serverListingStarTooltip">Main Server</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
// Bind functionality to the server switch button.
|
||||
document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
|
||||
e.target.blur()
|
||||
toggleServerSelection(true)
|
||||
})
|
||||
|
||||
/**
|
||||
* Function to refresh the mods tab whenever the selected
|
||||
* server is changed.
|
||||
*/
|
||||
function animateModsTabRefresh(){
|
||||
$('#settingsTabMods').fadeOut(500, () => {
|
||||
saveModConfiguration()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user