From mboxrd@z Thu Jan 1 00:00:00 1970 From: Michael Tremer To: development@lists.ipfire.org Subject: Re: [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Date: Tue, 11 Apr 2023 13:58:17 +0100 Message-ID: <5B8CB578-0B8E-4DA7-BF2E-65DC0493184E@ipfire.org> In-Reply-To: <20230401144343.1483-1-hofmann@leo-andres.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2193252555746147394==" List-Id: --===============2193252555746147394== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Hello, Thanks for the patchset. It is a lot of code to look through indeed. > On 1 Apr 2023, at 15:43, Leo-Andres Hofmann wrote: >=20 > This patch is an effort to modernize and unify the WUI JavaScript. > It will be possible to share e.g. translation strings and common > functions between the different modules. >=20 > This uses native ES6 modules that are supported by all major browsers. > Therefore, no change to the toolchain is necessary. >=20 > Signed-off-by: Leo-Andres Hofmann > --- >=20 > Hi all, >=20 > this patchset brings new modern Javascript modules to the webinterface. I suppose there is no way around this. Is this all written from scratch? Did you base this on anything or use some e= xisting code as inspiration? Are they any existing libraries that could be useful for example pulling in t= he translation? -Michael > Still on my to-do/wish list: > - run make.sh lang > - convert pakfire.js to a module > - convert/rewrite refreshInetInfo.js, maybe add load displays to all interf= aces in index.cgi >=20 > I hope this is in a presentable state to see where it is headed. > Let me know what you think and as always thanks for reading/testing/reviewi= ng :) >=20 > Best, > Leo >=20 >=20 > config/etc/mime.types | 1 + > html/html/include/wui.js | 47 ++++++ > html/html/include/wui_core.mjs | 154 +++++++++++++++++++ > html/html/include/wui_rrdimage.mjs | 30 ++++ > html/html/themes/ipfire/include/functions.pl | 3 +- > 5 files changed, 234 insertions(+), 1 deletion(-) > create mode 100644 html/html/include/wui.js > create mode 100644 html/html/include/wui_core.mjs > create mode 100644 html/html/include/wui_rrdimage.mjs >=20 > diff --git a/config/etc/mime.types b/config/etc/mime.types > index af82d4886..bb3816db9 100644 > --- a/config/etc/mime.types > +++ b/config/etc/mime.types > @@ -252,6 +252,7 @@ multipart/voice-message > text/css css > text/directory > text/enriched > +text/javascript mjs > text/plain asc txt > text/prs.lines.tag > text/rfc822-headers > diff --git a/html/html/include/wui.js b/html/html/include/wui.js > new file mode 100644 > index 000000000..e65924e29 > --- /dev/null > +++ b/html/html/include/wui.js > @@ -0,0 +1,47 @@ > +/*########################################################################= ##### > +# = # > +# IPFire.org - A linux based firewall = # > +# Copyright (C) 2007-2023 IPFire Team = # > +# = # > +# This program is free software: you can redistribute it and/or modify = # > +# it under the terms of the GNU General Public License as published by = # > +# the Free Software Foundation, either version 3 of the License, or = # > +# (at your option) any later version. = # > +# = # > +# This program is distributed in the hope that it will be useful, = # > +# but WITHOUT ANY WARRANTY; without even the implied warranty of = # > +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the = # > +# GNU General Public License for more details. = # > +# = # > +# You should have received a copy of the GNU General Public License = # > +# along with this program. If not, see . = # > +# = # > +##########################################################################= ###*/ > + > +// IPFire Web User Interface > +// Collection of JavaScript functions and modules (requires jQuery) > + > +import {WUIcore_i18n as WUI_i18n} from "./wui_core.mjs"; > + > +import {WUImodule_rrdimage as WUI_rrdimage} from "./wui_rrdimage.mjs"; > + > +//--- WUI main class --- > +class WUImain { > + constructor() { > + //- Public properties - > + // Translation strings > + this.i18n =3D new WUI_i18n(); > + > + //- Modules - > + // RRDtool graph images > + this.rrdimage =3D new WUI_rrdimage(this.i18n); > + > + //- Defaults - > + // These modules are available on every page: > + this.rrdimage.enabled =3D true; > + } > +} > + > +//### Initialize WUI ### > +const wui =3D new WUImain(); > +export default wui; > diff --git a/html/html/include/wui_core.mjs b/html/html/include/wui_core.mjs > new file mode 100644 > index 000000000..b7b729396 > --- /dev/null > +++ b/html/html/include/wui_core.mjs > @@ -0,0 +1,154 @@ > +/*########################################################################= ##### > +# = # > +# IPFire.org - A linux based firewall = # > +# Copyright (C) 2007-2023 IPFire Team = # > +# = # > +# This program is free software: you can redistribute it and/or modify = # > +# it under the terms of the GNU General Public License as published by = # > +# the Free Software Foundation, either version 3 of the License, or = # > +# (at your option) any later version. = # > +# = # > +# This program is distributed in the hope that it will be useful, = # > +# but WITHOUT ANY WARRANTY; without even the implied warranty of = # > +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the = # > +# GNU General Public License for more details. = # > +# = # > +# You should have received a copy of the GNU General Public License = # > +# along with this program. If not, see . = # > +# = # > +##########################################################################= ###*/ > + > +// IPFire Web User Interface - JavaScript module > +// Core functions & module helpers > + > +//--- Module template --- > +// Make sure that overridden functions are still executed with super()! > +export class WUIcore_moduleBase { > + //- Private properties - > + #enabled; // Activation state, disabled by default > + #readyState; // Loading state similar to Document.readyState > + #namespace; // Namespace derived from the class name (without "WUImod_" p= refix) > + > + //- Class constructor - > + constructor(translations) { > + this.i18n =3D translations; > + > + this.#enabled =3D false; > + > + this.#readyState =3D "loading"; > + this.#namespace =3D this.constructor.name.slice(10); > + } > + > + // Module activation state > + // Note: Because a module likely changes the DOM, it is not intended that= it can > + // be cleanly disabled again. Disabling it anyway will trigger "_handleMo= duleDestroy". > + set enabled(state) { > + if(this.#enabled !=3D=3D state) { > + this.#enabled =3D state; > + > + if(state) { > + this._handleModuleEnable(); > + } else { > + this._handleModuleDestroy(); > + } > + } > + } > + get enabled() { > + return this.#enabled; > + } > + > + // Module loading state > + // loading: Instance created > + // interactive: Module enabled, document not ready > + // complete: DOMContentLoaded/jQuery.ready event fired > + // destroyed: Module disabled, event handlers removed > + get readyState() { > + return this.#readyState; > + } > + > + // Module namespace > + get namespace() { > + return this.#namespace; > + } > + > + //### Protected properties ### > + > + // Module activation state event handlers > + _handleModuleEnable() { > + if(this.#readyState =3D=3D=3D "loading") { > + this.#readyState =3D "interactive"; > + > + // Attach jQuery.ready event > + $(this._handleDOMReady.bind(this)); > + } > + } > + _handleModuleDestroy() { > + this.#readyState =3D "destroyed"; > + > + // Attempt to remove all event handlers of this module > + $("body").off(`.${this.namespace}`); > + } > + > + // DOMContentLoaded/jQuery.ready event handler > + // The module must be enabled for this event to be triggered once > + _handleDOMReady() { > + this.#readyState =3D "complete"; > + } > + > + // Translations quick access in module namespace > + _i18n(key) { > + return this.i18n.get(key, this.namespace); > + } > +} > + > +//--- Simple translation strings helper --- > +export class WUIcore_i18n { > + //- Private properties - > + #strings; > + > + //- Class constructor - > + constructor() { > + this.#strings =3D Object.create(null); //Object without prototypes > + } > + > + // Default module prefix for general translations > + get #mainModule() { > + return "wui"; > + } > + > + // Get translation > + get(key, module =3D this.#mainModule) { > + const index =3D `${module}%${key}`; > + > + if(Object.hasOwn(this.#strings, index)) { > + return this.#strings[index]; > + } > + return `(missing string '${key}' in '${module}')`; > + } > + > + // Add translation > + add(key, value, module =3D this.#mainModule) { > + if(typeof value =3D=3D=3D "string" || typeof value =3D=3D=3D "number") { > + this.#strings[`${module}%${key}`] =3D value; > + } > + } > + > + // Load key/translation JS object > + // Format: {"key": "translation"} > + load(translations, module =3D this.#mainModule) { > + if(translations instanceof Object) { > + Object.entries(translations).forEach(([key, value]) =3D> { > + this.add(key, value, module); > + }); > + } > + } > +} > + > +//--- Static utility functions --- > +export class WUIcore_utilities { > + // Reload document (clears POST/GET data from history) > + static reloadDocument() { > + const url =3D window.location.origin + window.location.pathname; > + window.location.replace(url); > + } > +} > diff --git a/html/html/include/wui_rrdimage.mjs b/html/html/include/wui_rrd= image.mjs > new file mode 100644 > index 000000000..5254b1e98 > --- /dev/null > +++ b/html/html/include/wui_rrdimage.mjs > @@ -0,0 +1,30 @@ > +/*########################################################################= ##### > +# = # > +# IPFire.org - A linux based firewall = # > +# Copyright (C) 2007-2023 IPFire Team = # > +# = # > +# This program is free software: you can redistribute it and/or modify = # > +# it under the terms of the GNU General Public License as published by = # > +# the Free Software Foundation, either version 3 of the License, or = # > +# (at your option) any later version. = # > +# = # > +# This program is distributed in the hope that it will be useful, = # > +# but WITHOUT ANY WARRANTY; without even the implied warranty of = # > +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the = # > +# GNU General Public License for more details. = # > +# = # > +# You should have received a copy of the GNU General Public License = # > +# along with this program. If not, see . = # > +# = # > +##########################################################################= ###*/ > + > +// IPFire Web User Interface - JavaScript module > + > +import {WUIcore_moduleBase as WUI_module} from "./wui_core.mjs"; > + > +//--- RRDtool graph images --- > +export class WUImodule_rrdimage extends WUI_module { > + constructor(translations) { > + super(translations); > + } > +} > diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/theme= s/ipfire/include/functions.pl > index cbd05d109..445597e51 100644 > --- a/html/html/themes/ipfire/include/functions.pl > +++ b/html/html/themes/ipfire/include/functions.pl > @@ -113,7 +113,8 @@ print < $headline - $title > > > - > + > + > >=20 > $extrahead > --=20 > 2.37.1.windows.1 >=20 --===============2193252555746147394==--