From mboxrd@z Thu Jan  1 00:00:00 1970
From: Adolf Belka <adolf.belka@ipfire.org>
To: development@lists.ipfire.org
Subject: Re: [PATCH 1/4] WUI: Start implementing a simple JavaScript framework
Date: Thu, 13 Apr 2023 13:42:48 +0200
Message-ID: <724ee528-2a00-7de1-3a66-eb0c695aaa88@ipfire.org>
In-Reply-To: <e250aa23-a466-4488-9f26-d26a5193a503@leo-andres.de>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============7750472232011204254=="
List-Id: <development.lists.ipfire.org>

--===============7750472232011204254==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

Hi Leo,

On 12/04/2023 09:14, Leo-Andres Hofmann wrote:
>
> Hi Michael,
>
> Am 11.04.2023 um 14:58 schrieb Michael Tremer:
>> Hello,
>>
>> Thanks for the patchset.
>>
>> It is a lot of code to look through indeed.
> Yes, I'm aware this is a bit unannounced and a lot of code. Thank you=20
> for looking at it!
>>> On 1 Apr 2023, at 15:43, Leo-Andres Hofmann<hofmann(a)leo-andres.de>  wro=
te:
>>>
>>> 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.
>>>
>>> This uses native ES6 modules that are supported by all major browsers.
>>> Therefore, no change to the toolchain is necessary.
>>>
>>> Signed-off-by: Leo-Andres Hofmann<hofmann(a)leo-andres.de>
>>> ---
>>>
>>> Hi all,
>>>
>>> this patchset brings new modern Javascript modules to the webinterface.
>> I suppose there is no way around this.
> My thinking was: At the moment, the web interface is quite=20
> old-fashined and uses relatively little javascript, scattered in=20
> multiple files.
> But new features are still added on a fairly regular basis. So I think=20
> it makes sense to start a good structure now rather than later.
>> Is this all written from scratch? Did you base this on anything or use som=
e existing code as inspiration?
> This is written from scratch, in the sense that it is not just a=20
> modified copy of some existing library.
> However, I have read the documentation of other libraries before, and=20
> there are only so many reasonable ways to implement this.
> So I haven't tried to reinvent the wheel, and you'll certainly be able=20
> to find similarities to existing libraries. But the actual source code=20
> in this patchset is 100% my own work.
>
> - The module.enable/readyState logic is inspired by jQuery's .ready=20
> and the HTML DOM readyState property
> - The i18n class is based on the work I did for pakfire.js and=20
> extended to work with the module concept
> - To learn how to create the CSS overlay window, I followed the=20
> w3schools tutorial "Overlay"
I have done some changes on the dhcp.cgi and urlxlrator.cgi pages to=20
replace bgcolor, which was deprecated in HTML 4.x and no longer=20
supported at all in HTML 5, with its CSS equivalent approach. I used=20
your CSS approach on the zone config cgi page as the basis for what I=20
changed.

My plan was to go through the other cgi pages doing the same type of=20
changes.

Should I hold on that until you have made this change to the CSS=20
approach with the CSS Overlay?

Regards,
Adolf.
> - The async/await interface for the dialog box is inspired by jQuery's=20
> deferred.then() interface for Ajax calls, but implemented with native JS
>> Are they any existing libraries that could be useful for example pulling i=
n the translation?
> I looked at a few popular libraries, but in my opinion they are too=20
> extensive and do not fit well with the existing web interface.=20
> (jquery.i18n, Polyglot, ...)
> For example, some libraries I found prefer to load the texts from a=20
> JSON file. This would result in additional language files parallel to=20
> the existing system.
> Besides, dynamically changing translations based on user agent=20
> settings may break the form field mapping: if ($cgiparams{'ACTION'} eq=20
> $Lang::tr{'save'} )...
> If we didn't have to pay attention to many specifics of the old CGIs,=20
> I would also prefer an existing library.
>
> Best,
> Leo
>> -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 inte=
rfaces in index.cgi
>>>
>>> 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/revie=
wing :)
>>>
>>> Best,
>>> Leo
>>>
>>>
>>> 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
>>>
>>> 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<info(a)ipfire.org>               =
       #
>>> +#                                                                       =
      #
>>> +# 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<http://www.gnu.org/licenses/>.  =
     #
>>> +#                                                                       =
      #
>>> +########################################################################=
#####*/
>>> +
>>> +// 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<info(a)ipfire.org>               =
       #
>>> +#                                                                       =
      #
>>> +# 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<http://www. gnu.org/licenses/>. =
      #
>>> +#                                                                       =
      #
>>> +########################################################################=
#####*/
>>> +
>>> +// 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_"=
 prefix)
>>> +
>>> + //- 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 th=
at it can
>>> + // be cleanly disabled again. Disabling it anyway will trigger "_handle=
ModuleDestroy".
>>> + 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_r=
rdimage.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<info(a)ipfire.org>               =
       #
>>> +#                                                                       =
      #
>>> +# 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<http://www.gnu.org/licenses/>.  =
     #
>>> +#                                                                       =
      #
>>> +########################################################################=
#####*/
>>> +
>>> +// 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/the=
mes/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 <<END;
>>> <title>$headline - $title</title>
>>> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8"/>
>>> <link rel=3D"shortcut icon" href=3D"/favicon.ico" />
>>> - <script type=3D"text/javascript" src=3D"/include/jquery.js"></script>
>>> + <script src=3D"/include/jquery.js"></script>
>>> + <script src=3D"/include/wui.js" type=3D"module"></script>
>>> <script src=3D"/include/rrdimage.js"></script>
>>>
>>> $extrahead
>>> --=20
>>> 2.37.1.windows.1
>>>

--=20
Sent from my laptop


--===============7750472232011204254==--