github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 06:00:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

dev: allow UIElement to be used as settings tab

Browse Source
This commit is contained in:
KernelDeimos 2024-10-22 23:55:42 -04:00
parent 0bb80d2933
commit 5965ab5de0
3 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/gui/src/UI/Settings/UIWindowSettings.js
View File

@ -18,8 +18,11 @@
*/
import Placeholder from '../../util/Placeholder.js';
import UIElement from '../UIElement.js';
import UIWindow from '../UIWindow.js'
def(Symbol('TSettingsTab'), 'ui.traits.TSettingsTab');
async function UIWindowSettings(options){
return new Promise(async (resolve) => {
options = options ?? {};
@ -54,7 +57,7 @@ async function UIWindowSettings(options){
tabs.forEach((tab, i) => {
h += `<div class="settings-content ${i === 0 ? 'active' : ''}" data-settings="${tab.id}">`;
if ( tab.factory ) {
if ( tab.factory || tab.dom ) {
tab_placeholders[i] = Placeholder();
h += tab_placeholders[i].html;
} else {
@ -108,6 +111,9 @@ async function UIWindowSettings(options){
const component = tab.factory();
component.attach(tab_placeholders[i]);
}
if ( tab.dom ) {
tab_placeholders[i].replaceWith(tab.dom);
}
});
$(el_window).on('click', '.settings-sidebar-item', function(){

46
src/gui/src/UI/UIElement.js
View File

@ -7,10 +7,22 @@ export default def(class UIElement extends AdvancedBase {
static TAG_NAME = 'div';
// === START :: Helpful convenience library ===
static el = (parent, descriptor, stuff = {}) => {
static el = (...a) => {
let parent, descriptor; {
let next = a[0];
if ( next instanceof HTMLElement ) {
parent = next;
a.shift(); next = a[0];
}
if ( typeof next === 'string' ) {
descriptor = next;
a.shift(); next = a[0];
}
}
descriptor = descriptor ?? 'div';
const parts = descriptor.split(/(?=[.#])/);
let parts = descriptor.split(/(?=[.#])/);
if ( descriptor.match(/^[.#]/) ) {
parts.unshift('div');
}
@ -18,17 +30,29 @@ export default def(class UIElement extends AdvancedBase {
const el = document.createElement(parts.shift());
parent && parent.appendChild(el);
if ( className ) {
for ( const part of parts ) {
if ( part.startWith('.') ) {
el.classList.add(part.slice(1));
} else if ( part.startWith('#') ) {
el.id = part;
}
for ( const part of parts ) {
if ( part.startsWith('.') ) {
el.classList.add(part.slice(1));
} else if ( part.startWith('#') ) {
el.id = part;
}
}
if ( stuff.text ) {
el.innerText = stuff.text;
const attrs = {};
for ( const a_or_c of a ) {
if ( Array.isArray(a_or_c) ) {
for ( const child of a_or_c ) {
el.appendChild(child);
}
} else {
Object.assign(attrs, a_or_c);
}
}
if ( attrs.text ) {
el.innerText = attrs.text;
}
if ( attrs.style ) {
el.setAttribute('style', attrs.style);
}
return el;
};

9
src/gui/src/services/SettingsService.js
View File

@ -24,6 +24,8 @@ import AccountTab from '../UI/Settings/UITabAccount.js';
import SecurityTab from '../UI/Settings/UITabSecurity.js';
import PersonalizationTab from '../UI/Settings/UITabPersonalization.js';
import LanguageTag from '../UI/Settings/UITabLanguage.js';
import UIElement from "../UI/UIElement.js";
const TSettingsTab = use('ui.traits.TSettingsTab');
export class SettingsService extends Service {
#tabs = [];
@ -43,6 +45,13 @@ export class SettingsService extends Service {
return this.#tabs;
}
register_tab (tab) {
if ( tab instanceof UIElement ) {
const ui_element = tab;
tab = {
...ui_element.as(TSettingsTab).get_metadata(),
dom: ui_element.root,
};
}
this.#tabs.push(tab);
}
}