From mboxrd@z Thu Jan 1 00:00:00 1970 From: Leo-Andres Hofmann To: development@lists.ipfire.org Subject: [PATCH 3/4] WUI: Implement form confirmation dialog Date: Sat, 01 Apr 2023 16:43:42 +0200 Message-ID: <20230401144343.1483-3-hofmann@leo-andres.de> In-Reply-To: <20230401144343.1483-1-hofmann@leo-andres.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============7372457188860105273==" List-Id: --===============7372457188860105273== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable This patch adds a modal confirmation dialog for HTML forms. The dialog can be invoked by setting the "data-confirm-message" attribute on the form. Default texts can be overridden with the "data-confirm-title" and "data-confirm-subheading" attributes. Signed-off-by: Leo-Andres Hofmann --- html/html/include/wui.js | 6 ++ html/html/include/wui_core.mjs | 77 ++++++++++++++- html/html/include/wui_dialogs.mjs | 97 +++++++++++++++++++ html/html/themes/ipfire/include/css/style.css | 75 ++++++++++++++ html/html/themes/ipfire/include/functions.pl | 28 ++++++ langs/en/cgi-bin/en.pl | 4 + 6 files changed, 286 insertions(+), 1 deletion(-) create mode 100644 html/html/include/wui_dialogs.mjs diff --git a/html/html/include/wui.js b/html/html/include/wui.js index e65924e29..e219f5ca4 100644 --- a/html/html/include/wui.js +++ b/html/html/include/wui.js @@ -23,6 +23,7 @@ =20 import {WUIcore_i18n as WUI_i18n} from "./wui_core.mjs"; =20 +import {WUIdialog_confirm as WUI_confirm} from "./wui_dialogs.mjs"; import {WUImodule_rrdimage as WUI_rrdimage} from "./wui_rrdimage.mjs"; =20 //--- WUI main class --- @@ -33,11 +34,16 @@ class WUImain { this.i18n =3D new WUI_i18n(); =20 //- Modules - + // Dialogs + this.dialogs =3D {}; + this.dialogs.confirm =3D new WUI_confirm(this.i18n); + // RRDtool graph images this.rrdimage =3D new WUI_rrdimage(this.i18n); =20 //- Defaults - // These modules are available on every page: + this.dialogs.confirm.enabled =3D true; this.rrdimage.enabled =3D true; } } diff --git a/html/html/include/wui_core.mjs b/html/html/include/wui_core.mjs index b7b729396..ab5338f12 100644 --- a/html/html/include/wui_core.mjs +++ b/html/html/include/wui_core.mjs @@ -27,7 +27,7 @@ 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_" pr= efix) + #namespace; // Namespace derived from the class name (without "WUImodule_"= /"WUIdialog_" prefix) =20 //- Class constructor - constructor(translations) { @@ -101,6 +101,81 @@ export class WUIcore_moduleBase { } } =20 +//--- Modal dialog template --- +// Make sure that overridden functions are still executed with super()! +// Text fields and buttons are identified by their data-... attributes: +// data-textbox=3D"foo", data-action=3D"bar". See setText for reference. +// Events should only be managed by the modules, there is no public interfac= e by design. +export class WUIcore_dialogBase extends WUIcore_moduleBase { + //- Private properties - + #modalId; // Element ID of the overlay div box with dialog window + + //- Class constructor - + constructor(translations) { + super(translations); + + //- Protected properties - + // jQuery object, reference to dialog div box + this._$modal =3D $(); + } + + // DOMContentLoaded/jQuery.ready event handler + _handleDOMReady() { + super._handleDOMReady(); + + // modalId was set before, but the document was not ready yet + if(this.modalId && (! this.hasModal)) { + this._$modal =3D $(`#${this.modalId}`).first(); + } + } + + // Element ID of dialog overlay div box + // This element must be hidden by default and render a modal dialog when ac= tivated. + set modalId(id) { + this.#modalId =3D id; + + // Delay attaching element until DOM is ready + if(this.readyState =3D=3D=3D "complete") { + this._$modal =3D $(`#${id}`).first(); + } + } + get modalId() { + return this.#modalId; + } + + // Check if modal dialog element has been attached + get hasModal() { + return (this._$modal.length =3D=3D=3D 1); + } + + // Show/hide modal overlay by setting CSS "display" property + // The top modal element should always be a simple overlay, so that display= =3Dblock does not disturb the layout. + showModal() { + this._$modal.css("display", "block"); + } + hideModal() { + this._$modal.css("display", "none"); + } + get isVisible() { + return (this._$modal.css("display") =3D=3D=3D "block"); + } + + // Set text field content. Fields are identified by their data-textbox attr= ibute: + // -> field "message" + setText(field, value) { + this._$modal.find(`[data-textbox=3D"${field}"]`).text(value); + } + + //### Protected properties ### +=09 + // Get a dialog window button as a jQuery object. Buttons are identified by= their data-action attribute: + // -> action "su= bmit" + // Button actions must be unique within the modal window. Events are manage= d internally only, do not add custom handlers. + _$getButton(action) { + return this._$modal.find(`button[data-action=3D"${action}"]`).first(); + } +} + //--- Simple translation strings helper --- export class WUIcore_i18n { //- Private properties - diff --git a/html/html/include/wui_dialogs.mjs b/html/html/include/wui_dialog= s.mjs new file mode 100644 index 000000000..a2b3bdbb4 --- /dev/null +++ b/html/html/include/wui_dialogs.mjs @@ -0,0 +1,97 @@ +/*##########################################################################= ### +# = # +# 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_dialogBase as WUI_dialog} from "./wui_core.mjs"; + +//--- Form submit confirm dialog --- +// Text fields: data-textbox "title" "subheading" "message" +// Buttons: data-action "submit" "cancel" "close" +export class WUIdialog_confirm extends WUI_dialog { + + // DOMContentLoaded/jQuery.ready event handler + _handleDOMReady() { + super._handleDOMReady(); + + // Process all forms with confirmation request, attach submit events + $("form[data-confirm-message]").each((i, formElem) =3D> { + const $form =3D $(formElem); + $form.on(`submit.${this.namespace}`, {"form": $form, "message": $form.dat= a("confirmMessage")}, this.#handleFormSubmit.bind(this)); + }); + } + + // Form with confirmation "submit" event handler + async #handleFormSubmit(event) { + event.preventDefault(); + + const $form =3D event.data["form"]; + this.prepareModal(event.data["message"], $form.data("confirmTitle"), $form= .data("confirmSubheading")); + + // Show the dialog and wait for user interaction + try { + const response =3D await this.requestAsync(); + if(response =3D=3D=3D true) { + // Trigger native HTML submit() method, since it does not raise another = submit event that would cause a loop + event.currentTarget.submit(); + } + } catch(error) { + // User closed the window, do nothing + } + } + + // Show modal confirmation request dialog + // Returns a promise that resolves true/false upon user interaction and rej= ects when the window is closed. + requestAsync() { + // Attach promise to submit/cancel button "click" events + const whenConfirm =3D new Promise((resolve, reject) =3D> { + this._$getButton("submit").on(`click.${this.namespace}`, () =3D> { resolv= e(true); }); + this._$getButton("cancel").on(`click.${this.namespace}`, () =3D> { resolv= e(false); }); + + this._$getButton("close").on(`click.${this.namespace}`, () =3D> { reject(= new Error("dialog window closed")); }); + }).finally(() =3D> { + // Always hide the window and detach all button events after any click, + // so that the dialog can be used multiple times without side effects. + this.hideModal(); + this.#clearButtonEvents(); + }); + + // Show dialog, default action is "close" + this.showModal(); + this._$getButton("close").focus(); + + return whenConfirm; + } + + // Prepare dialog window: set texts, but leave hidden and without events + prepareModal(message, title =3D undefined, subheading =3D undefined) { + this.hideModal(); + this.#clearButtonEvents(); + + this.setText("message", message); + this.setText("title", title ?? this._i18n("title")); + this.setText("subheading", subheading ?? this._i18n("subheading")); + } + + // Remove all active events from dialog window buttons + #clearButtonEvents() { + this._$modal.find(`button[data-action]`).off(`.${this.namespace}`); + } +} diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes= /ipfire/include/css/style.css index 96d0519f5..f4ef1769c 100644 --- a/html/html/themes/ipfire/include/css/style.css +++ b/html/html/themes/ipfire/include/css/style.css @@ -377,3 +377,78 @@ div.rrdimage > img { max-width: 100%; min-height: 290px; } + +/* Modal dialog box */ + +div.dialog-overlay { + display: none; + z-index: 99; + + left: 0; + top: 0; + width: 100%; + height: 100%; + position: fixed; + overflow: auto; + + background-color: rgba(0, 0, 0, 0.5); + animation: fadeIn 0.5s; +} +(a)keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +div.dialog-window { + top: 15%; + width: 550px; + margin: auto; + padding: 0; + position: relative; + + border: 1px solid black; + background: #fff url('../../images/n2.gif') 0px 0px repeat-x; + border-radius: 3px; + box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7); +} + +.dialog-window .section { + box-sizing: border-box; + padding: 1em 1.5em; + text-align: left; +} +.dialog-window .section:not(:last-child) { + border-bottom: 1px solid silver; +} + +.dialog-window .header > h3 { + display: inline-block; + color: #66000F; + font-size: 1.6em; +} +.dialog-window .header > button[data-action=3D"close"] { + border: none; + background: none; + font-size: 1.2em; + font-weight: bold; + cursor: pointer; +} + +.dialog-window .content { + line-height: 150%; +} + +.dialog-window .header, +.dialog-window .controls { + display:flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.dialog-window .controls > button { + padding: 0.3em; + min-width: 35%; +} +.dialog-window .controls > button[data-action=3D"submit"] { + font-weight: bold; +} diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/= ipfire/include/functions.pl index bc66d7fdb..784b2f398 100644 --- a/html/html/themes/ipfire/include/functions.pl +++ b/html/html/themes/ipfire/include/functions.pl @@ -217,6 +217,34 @@ print <$system_release + + +
+
+
+

+ +
+
+
+ +
+
+ + +
+
+
+ END diff --git a/langs/en/cgi-bin/en.pl b/langs/en/cgi-bin/en.pl index 729516538..df9deda53 100644 --- a/langs/en/cgi-bin/en.pl +++ b/langs/en/cgi-bin/en.pl @@ -84,6 +84,10 @@ 'ConnSched up' =3D> 'Up', 'ConnSched weekdays' =3D> 'Days of the week:', 'Daily' =3D> 'Daily', +'dialog confirm title' =3D> 'Permanently save changes?', +'dialog confirm subheading' =3D> 'The following action cannot be undone:', +'dialog confirm submit' =3D> 'Yes, continue', +'dialog confirm cancel' =3D> 'No, cancel', 'Disabled' =3D> 'Disabled', 'Edit an existing route' =3D> 'Edit an existing route', 'Enter TOS' =3D> 'Activate or deactivate TOS-bits
and then press S= ave.', --=20 2.37.1.windows.1 --===============7372457188860105273==--