no more fake windowing system, I guess?
This commit is contained in:
buzz-lightsnack-2007
parent
8ba5d1bb4a
commit
36fb6ce52e
5 changed files with 55 additions and 200 deletions
5
gui/popup_r.htm
Normal file
5
gui/popup_r.htm
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="scripts/popup_r.JS" type="module"></script>
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
14
gui/scripts/popup_r.JS
Normal file
14
gui/scripts/popup_r.JS
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {windowman} from './windowman.JS';
|
||||||
|
|
||||||
|
function redirect() {
|
||||||
|
new windowman(`gui/popup.htm`);
|
||||||
|
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
redirect();
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
16
gui/scripts/settings_r.JS
Normal file
16
gui/scripts/settings_r.JS
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
// Open the settings in a pop-up window.
|
||||||
|
|
||||||
|
import {windowman} from './windowman.JS';
|
||||||
|
|
||||||
|
function redirect() {
|
||||||
|
new windowman(`gui/settings.htm`);
|
||||||
|
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
redirect();
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
|
|
@ -3,7 +3,7 @@ Window management */
|
||||||
|
|
||||||
import texts from "./read.JS";
|
import texts from "./read.JS";
|
||||||
|
|
||||||
export default class windowman {
|
class windowman {
|
||||||
/* Initialize the window frame. */
|
/* Initialize the window frame. */
|
||||||
static prepare() {
|
static prepare() {
|
||||||
try {
|
try {
|
||||||
|
|
@ -13,206 +13,21 @@ export default class windowman {
|
||||||
$(`head`).append(`<script type="module" src="${UI.script}"></script>`);
|
$(`head`).append(`<script type="module" src="${UI.script}"></script>`);
|
||||||
} catch(error) {
|
} catch(error) {
|
||||||
console.error(texts.localized(`error_fileNotFound`, [error]));
|
console.error(texts.localized(`error_fileNotFound`, [error]));
|
||||||
};
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
// Prevent scaling, similar to a real window.
|
||||||
Updates an interface element.
|
$(`head`).append(`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />`);
|
||||||
|
|
||||||
@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 = {}) {
|
|
||||||
let element_injection = {};
|
|
||||||
|
|
||||||
// If no element ID is provided, create a random ID as well.
|
|
||||||
if (!element_ID) {
|
|
||||||
element_ID = (Math.floor((Math.random())**(-3))).toString();
|
|
||||||
element_injection[`ID`] = (((parent_element_name) ? parent_element_name[`ID`] : this[`ID`]).concat(`_`)).concat(element_ID);
|
|
||||||
} else {
|
|
||||||
element_injection[`ID`] = element_ID;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Prepare for injection.
|
|
||||||
element_injection[`type`] = element_type;
|
|
||||||
if (element_properties) {element_injection[`properties`] = element_properties};
|
|
||||||
if (element_class) {element_injection[`class`] = element_class;}
|
|
||||||
|
|
||||||
// Add it to this window's properties.
|
|
||||||
if (parent_element_name) {
|
|
||||||
parent_element_name[element_name] = element_injection;
|
|
||||||
} else {
|
|
||||||
this[element_name] = element_injection;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inject the element.
|
|
||||||
$(`#`.concat(((parent_element_name) ? parent_element_name : this)[`ID`]) ).append(`<${element_injection['type']} id=${element_injection['ID']}> </${element_injection['type']}>`)
|
|
||||||
|
|
||||||
// Now add the classes.
|
|
||||||
if (element_injection[`class`]) {
|
|
||||||
(element_injection[`class`]).forEach((class_name) => {
|
|
||||||
$(`#`.concat(((parent_element_name) ? 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) ? parent_element_name[element_name] : this[element_name])[`ID`])).attr(property_name, element_injection[`properties`][property_name]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add the content.
|
|
||||||
$(`#`.concat(element_injection[`ID`])).html(element_content);
|
|
||||||
|
|
||||||
// Return the content.
|
|
||||||
return(element_injection[`ID`]);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/* The following are reserved keywords in colloquial names:
|
|
||||||
ID, properties, type, operation
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Creates a window frame within the specified element.
|
|
||||||
|
|
||||||
@param {string} element_target the element name to build into
|
|
||||||
@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
|
|
||||||
*/
|
|
||||||
constructor(element_target, element_ID, window_title = document.title, window_buttons = {'Close': false, 'Minimize': false, 'Maximize': false}) {
|
|
||||||
if (!element_ID) {
|
|
||||||
// Make a random element ID.
|
|
||||||
element_ID = (Math.floor((Math.random())**(-3))).toString();
|
|
||||||
};
|
|
||||||
|
|
||||||
let element_data = {
|
|
||||||
'ID': element_ID,
|
|
||||||
'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() {
|
|
||||||
$(element_target).append(`<section id="${element_data.ID}"></section>`);
|
|
||||||
$(`#${element_data.ID}`).addClass(`window glass active`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function titlebar() {
|
|
||||||
$(`#${element_data.ID}`).append(`<top id="${element_data.titlebar.ID}"></top>`);
|
|
||||||
$(`#${element_data.titlebar.ID}`).addClass(`title-bar`);
|
|
||||||
|
|
||||||
function title() {
|
|
||||||
$(`#${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.titlebar.title.ID}`).text(window_title);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
function controls() {
|
|
||||||
if (window_buttons) {
|
|
||||||
$(`#${element_data.titlebar.ID}`).append(`<side id="${element_data.titlebar.controls.ID}"></side>`);
|
|
||||||
$(`#${element_data.titlebar.controls.ID}`).addClass(`title-bar-controls`);
|
|
||||||
|
|
||||||
// Set the possible
|
|
||||||
(Object.keys(window_buttons)).forEach((btn_label) => {
|
|
||||||
if (window_buttons[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);
|
|
||||||
};
|
|
||||||
})
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
title();
|
|
||||||
controls();
|
|
||||||
}
|
|
||||||
|
|
||||||
function content() {
|
|
||||||
$(`#${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];
|
|
||||||
})
|
|
||||||
|
|
||||||
frame();
|
|
||||||
titlebar();
|
|
||||||
content();
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Close the window or an element.
|
|
||||||
|
|
||||||
@param {bool} floating the window is not the tab itself
|
|
||||||
*/
|
|
||||||
terminate(floating = true) {
|
|
||||||
let state_close = true;
|
|
||||||
if ((this[`operation`]) ? this[`operation`][`Close`]: false) {
|
|
||||||
// Should run before closing the window.
|
|
||||||
state_close = this[`operation`][`Close`]();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (state_close) {
|
|
||||||
$(`#${this.ID}`).remove();
|
|
||||||
|
|
||||||
if (!floating) {
|
|
||||||
window.close();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
constructor(URL, height, width) {
|
||||||
|
this.window = chrome.windows.create({
|
||||||
|
url: chrome.runtime.getURL(URL),
|
||||||
|
type: "popup",
|
||||||
|
width: (width) ? width: 400,
|
||||||
|
height: (height) ? height: 600,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export {windowman};
|
||||||
|
|
|
||||||
5
gui/settings_r.htm
Normal file
5
gui/settings_r.htm
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="scripts/settings_r.JS" type="module"></script>
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue