update window management
window managemnet is pseudo-OOP
This commit is contained in:
buzz-lightsnack-2007
parent
f60380de8e
commit
a5f6069a99
2 changed files with 118 additions and 41 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,87 @@ export default class windowman {
|
|||
$(`head`).append(`<link rel="stylesheet" type="text/css" href="${UI.library}">`);
|
||||
}
|
||||
|
||||
/*
|
||||
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']}> </${element_inject['type']}>`)
|
||||
|
||||
// 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(`<top id="${element_data.titlebar}"></top>`);
|
||||
$(`#${element_data.titlebar}`).addClass(`title-bar`);
|
||||
$(`#${element_data.ID}`).append(`<top id="${element_data.titlebar.ID}"></top>`);
|
||||
$(`#${element_data.titlebar.ID}`).addClass(`title-bar`);
|
||||
|
||||
function title() {
|
||||
$(`#${element_data.titlebar}`).append(`<span id="${element_data.title}"></span>`);
|
||||
$(`#${element_data.title}`).addClass(`title-bar-text`);
|
||||
$(`#${element_data.titlebar.ID}`).append(`<span id="${element_data.titlebar.title.ID}"></span>`);
|
||||
$(`#${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(`<side id="${element_data[`controls`]}"></side>`);
|
||||
$(`#${element_data.controls}`).addClass(`title-bar-controls`);
|
||||
$(`#${element_data.titlebar.ID}`).append(`<side id="${element_data.titlebar.controls.ID}"></side>`);
|
||||
$(`#${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(`<button id="${element_data[`controls ${btn_label}`]}"></button>`);
|
||||
$(`#${element_data[`controls ${btn_label}`]}`).attr(`aria-label`, btn_label);
|
||||
$(`#${element_data.titlebar.controls.ID}`).append(`<button id="${element_data.titlebar.controls[btn_label].ID}"></button>`);
|
||||
$(`#${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(`<main id="${element_data.content}"></main>`);
|
||||
$(`#${element_data.content}`).addClass(`window-body has-space`);
|
||||
$(`#${element_data.ID}`).append(`<main id="${element_data.content.ID}"></main>`);
|
||||
$(`#${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) {
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue