From a5f6069a99b48f42470b156af01e0274f27fdedc Mon Sep 17 00:00:00 2001 From: buzz-lightsnack-2007 <73412182+buzz-lightsnack-2007@users.noreply.github.com> Date: Sun, 24 Mar 2024 10:51:57 +0800 Subject: [PATCH] update window management window managemnet is pseudo-OOP --- gui/scripts/settings.JS | 2 +- gui/scripts/windowman.JS | 157 +++++++++++++++++++++++++++++---------- 2 files changed, 118 insertions(+), 41 deletions(-) diff --git a/gui/scripts/settings.JS b/gui/scripts/settings.JS index 778be04..d16efbb 100644 --- a/gui/scripts/settings.JS +++ b/gui/scripts/settings.JS @@ -13,7 +13,7 @@ function start() { function populate(element) { /* Populate the strings on the page. */ - element.update('title', texts.localized(`GUI_title_prefs`)); + element.update(element[`titlebar`][`title`], texts.localized(`GUI_title_prefs`)); } function main() { diff --git a/gui/scripts/windowman.JS b/gui/scripts/windowman.JS index 5590012..a33fe9a 100644 --- a/gui/scripts/windowman.JS +++ b/gui/scripts/windowman.JS @@ -9,6 +9,87 @@ export default class windowman { $(`head`).append(``); } + /* + Updates an interface element. + + @param {string} interface_element the element to change + @param {string} modified_content the replacement of its content + @param {int} method Do you want to replace or just add? Type 0 or 1, respectively. + @return {string} the HTML content + */ + update(interface_element, modified_content, method = 0) { + if (method > 0) { + $(`#${interface_element['ID']}`).append(modified_content); + } else if (method < 0) { + $(`#${interface_element['ID']}`).prepend(modified_content); + } else { + $(`#${interface_element['ID']}`).html(modified_content); + } + + return ($(`#${interface_element['ID']}`).html()); + }; + + /* + Inserts an interface element. + + @param {string} element_ID the ID of the element to be injected + @param {string} element_name the colloquial name of this element + @param {string} parent_element_name the parent element's colloquial name + @param {string} element_type the type of this element to insert + @param {string} element_content the content of this new element + @param {array} element_class the class of this element + @param {dictionary} element_properties the element's properties + @return {string} the element ID + */ + inject(element_ID, element_name, parent_element_name, element_type = `div`, element_class = [], element_content = ``, element_properties = {}) { + // If no element ID is provided, create a random ID as well. + if (!element_ID) { + element_ID = (Math.floor((Math.random())**(-3))).toString(); + }; + + // Prepare for injection. + let element_injection = {}; + + element_injection[`ID`] = (((parent_element_name) ? this[parent_element_name][`ID`] : this[`ID`]).concat(`_`)).concat(element_ID); + element_injection[`type`] = element_type; + if (element_properties) {element_injection[`properties`] = element_properties}; + if (element_class) {element_injection[`class`] = element_properties;} + + // Add it to this window's properties. + if (parent_element_name) { + this[parent_element_name][element_name] = element_injection; + } else { + this[element_name] = element_injection; + } + + // Inject the element. + $(`#`.concat(((parent_element_name) ? this[parent_element_name] : this)[ID]) ).append(`<${element_inject['type']} id=${element_inject['ID']}> `) + + // Now add the classes. + if (element_injection[`class`]) { + (element_injection[`class`]).forEach((class_name) => { + $(`#`.concat(((parent_element_name) ? this[parent_element_name][element_name] : this[element_name])[ID])).addClass(class_name); + }); + }; + + if (element_injection[`properties`]) { + (Object.keys(element_injection[`properties`])).forEach((property_name) => { + $(`#`.concat(((parent_element_name) ? this[parent_element_name][element_name] : this[element_name])[ID]).attr(property_name, element_injection[`properties`][property_name])); + }); + } + + // Add the content. + update(((parent_element_name) ? this[parent_element_name][element_name] : this[element_name]), element_content); + + // Return the content. + return(element_injection[`ID`]); + }; + + + /* The following are reserved keywords in colloquial names: + ID, properties, type + */ + /* Creates a window frame within the specified element. @@ -16,7 +97,6 @@ export default class windowman { @param {string} element_ID the target element ID; otherwise, a random ID is generated @param {string} window_title the window's title @param {dictionary} window_buttons the window buttons - @return {string} the element IDs */ constructor(element_target, element_ID, window_title = document.title, window_buttons = {'Close': false, 'Minimize': false, 'Maximize': false}) { if (!element_ID) { @@ -26,13 +106,30 @@ export default class windowman { let element_data = { 'ID': element_ID, - 'titlebar': `${element_ID}_titlebar`, - 'title': `${element_ID}_title`, - 'controls': `${element_ID}_btns`, - 'controls Close': `${element_ID}_btn_close`, - 'controls Minimize': `${element_ID}_btn_min`, - 'controls Maximize': `${element_ID}_btn_max`, - 'content': `${element_ID}_content` + 'titlebar': { + 'ID': `${element_ID}_titlebar`, + 'title': { + 'ID': `${element_ID}_title` + }, + 'controls': { + 'ID': `${element_ID}_btns`, + 'Close': { + 'ID': `${element_ID}_btn_close`, + 'visible': false + }, + 'Minimize': { + 'ID': `${element_ID}_btn_min`, + 'visible': false + }, + 'Maximize': { + 'ID': `${element_ID}_btn_max`, + 'visible': false + } + } + }, + 'content': { + 'ID': `${element_ID}_content` + } } function frame() { @@ -41,28 +138,28 @@ export default class windowman { } function titlebar() { - $(`#${element_data.ID}`).append(``); - $(`#${element_data.titlebar}`).addClass(`title-bar`); + $(`#${element_data.ID}`).append(``); + $(`#${element_data.titlebar.ID}`).addClass(`title-bar`); function title() { - $(`#${element_data.titlebar}`).append(``); - $(`#${element_data.title}`).addClass(`title-bar-text`); + $(`#${element_data.titlebar.ID}`).append(``); + $(`#${element_data.titlebar.title.ID}`).addClass(`title-bar-text`); if (window_title) { - $(`#${element_data.title}`).text(window_title); + $(`#${element_data.titlebar.title.ID}`).text(window_title); }; }; function controls() { if (window_buttons) { - $(`#${element_data.titlebar}`).append(``); - $(`#${element_data.controls}`).addClass(`title-bar-controls`); + $(`#${element_data.titlebar.ID}`).append(``); + $(`#${element_data.titlebar.controls.ID}`).addClass(`title-bar-controls`); // Get the close (Object.keys(window_buttons)).forEach((btn_label) => { if (window_buttons[btn_label]) { - $(`#${element_data.controls}`).append(``); - $(`#${element_data[`controls ${btn_label}`]}`).attr(`aria-label`, btn_label); + $(`#${element_data.titlebar.controls.ID}`).append(``); + $(`#${element_data.titlebar.controls[btn_label].ID}`).attr(`aria-label`, btn_label); }; }) }; @@ -73,10 +170,11 @@ export default class windowman { } function content() { - $(`#${element_data.ID}`).append(`
`); - $(`#${element_data.content}`).addClass(`window-body has-space`); + $(`#${element_data.ID}`).append(`
`); + $(`#${element_data.content.ID}`).addClass(`window-body has-space`); } + // Add to this window's properties. (Object.keys(element_data)).forEach((portion) => { this[portion] = element_data[portion]; }) @@ -86,25 +184,4 @@ export default class windowman { content(); } - /* - Updates an interface element. - - @param {string} interface_element the element to change - @param {string} modified_content the replacement of its content - @param {int} method Do you want to replace or just add? Type 0 or 1, respectively. - */ - update(interface_element, modified_content, method) { - if (method > 0) { - $(`#${this[interface_element]}`).append(modified_content); - } else if (method < 0) { - $(`#${this[interface_element]}`).prepend(modified_content); - } else { - $(`#${this[interface_element]}`).html(modified_content); - } - }; - - inject(element_ID, parent_element = this.ID) { - - }; - }