Adopt to new modern dialog

package.json

@@ -2,12 +2,15 @@
 	"name": "lychee",
 	"version": "4.0.10",
 	"description": "Self-hosted photo-management done right.",
-	"authors": "Tobias Reich <[email protected]>",
+	"authors": [
+		"Tobias Reich <[email protected]>",
+		"The Lychee Organization"
+	],
 	"license": "MIT",
 	"private": true,
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/LycheeOrg/Lychee.git"
+		"url": "https://github.com/LycheeOrg/Lychee-front.git"
 	},
 	"scripts": {
 		"start": "gulp watch",
@@ -19,7 +22,7 @@
 		"node": ">= 10"
 	},
 	"dependencies": {
-		"basicmodal": "https://github.com/LycheeOrg/basicModal/archive/refs/tags/v3.3.9.tar.gz",
+		"basicmodal": "LycheeOrg/basicModal#30e6b70",
 		"jquery": "^3.4.0",
 		"justified-layout": "^4.1.0",
 		"lazysizes": "^5.3.0",

scripts/3rd-party/backend.js

@@ -325,7 +325,7 @@ const SmartAlbumID = Object.freeze({
  * @property {string}   swipe_tolerance_x       - actually a number
  * @property {string}   swipe_tolerance_y       - actually a number
  * @property {string}   upload_processing_limit - actually a number
- * @property {string}   version                 - actually a number
+ * @property {string}   version                 - a string of 6 digits without separating dots, i.e. version 4.6.3 is reported as `'040603'`
  */
 
 /**

scripts/3rd-party/basicModal.js

@@ -7,44 +7,130 @@
  */
 
 /**
- * Returns an associative object containing the values from all `input` and
- * `select` elements.
+ * @typedef ModalDialogConfiguration
+ * @property {string}                 [body='']       HTML snippet to be inserted into the content
+ *                                                    area of the dialog
+ * @property {string[]}               [classList=[]]  CSS class to be applied to the content area
+ *                                                    of the dialog
+ * @property {boolean}                [closable=true] indicates whether the dialog can be closed
+ *                                                    via {@link close}
+ * @property {ModalDialogButtonsData} buttons         configuration data for the main action and
+ *                                                    cancel button
+ * @property {ModalDialogReadyCB}     [readyCB=null]  callback to be called after the dialog
+ *                                                    has become visible and ready for user input
+ */
+
+/**
+ * @callback ModalDialogReadyCB
+ * @param {ModalDialogFormElements} htmlElements a dictionary that maps names to form elements
+ * @param {HTMLDivElement}          dialog       the DIV element that represents the content area of the dialog
+ * @returns {void}
+ */
+
+/**
+ * @callback ModalDialogClosedCB
+ * @returns {void}
+ */
+
+/**
+ * @typedef ModalDialogFormElements
+ *
+ * A dictionary of names of form elements to those form elements.
+ *
+ * @type {Object.<string, (HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement)>}
+ */
+
+/**
+ * @typedef ModalDialogButtonsData
+ * @property {ModalDialogButtonData} [action] configuration data for the main action button
+ * @property {ModalDialogButtonData} [cancel] configuration data for the cancel button
+ */
+
+/**
+ * @typedef ModalDialogButtonData
+ * @property {string}                  [title]         the caption of the button
+ * @property {string[]}                [classList=[]]  CSS class to be applied to the button
+ * @property {Object.<string, string>} [attributes={}] a dictionary of arbitrary HTML attributes and their values
+ * @property {ModalDialogButtonCB}     fn              callback to be called upon an "on-click" event
+ */
+
+/**
+ * @callback ModalDialogButtonCB
+ * @param {ModalDialogResult} values an associative object with the values of
+ *                                   all HTML input elements; see {@link getValues}
+ * @returns {void}
+ */
+
+/**
+ * A dictionary that maps names of form elements to their values.
  *
- * The properties of the returned object correspond to the `name` attribute
- * of the `input` and `select` elements.
+ * @typedef ModalDialogResult
+ * @type {Object.<string,(number|string|boolean|FileList)>}
+ */
+
+/**
+ * @typedef ModalDialogException
+ * @property {string} name
+ * @property {string} message
+ */
+
+/**
+ * Returns an associative object containing the values from all HTML form
+ * elements.
  *
  * @function getValues
  * @memberOf basicModal
- * @returns {Object}
+ * @returns {ModalDialogResult}
  */
 
 /**
  * Constructs and shows a modal dialog.
  *
- * After the dialog has become ready, the callback `data.callback` is
+ * After the dialog has become ready, the callback `confData.readyCB` is
  * invoked.
  *
  * @function show
  * @memberOf basicModal
- * @param {ModalDialogData} data configuration data for the dialog
- * @returns {boolean} `true` if the dialog became visible
+ * @param {ModalDialogConfiguration} confData configuration data for the dialog
+ * @returns {void}
+ * @throws {ModalDialogException}
+ */
+
+/**
+ * Scans the dialog for any named form elements and caches them in an internal
+ * dictionary to avoid repeated DOM queries with CSS selectors for efficiency
+ * reasons.
+ *
+ * The found form elements are those which are included into the dialog result
+ * set and are enabled/disabled automatically.
+ *
+ * Normally, it is not necessary to call this method manually from outside the
+ * modal dialog as this method is automatically called as part of the dialog
+ * building process inside `show`.
+ * However, if the dialog is dynamically modified after `show` has been called
+ * (e.g. if form elements are removed or added on the fly), then this method
+ * must be called.
+ *
+ * @function cacheFormElements
+ * @memberOf basicModal
+ * @returns {void}
  */
 
 /**
  * Removes (potentially) old error indicators and highlights the indicated
  * input element.
  *
- * @function error
+ * @function focusError
  * @memberOf basicModal
- * @param {string} [nameAttribute] the name of the HTML input element which
- *                                 caused the error and shall be highlighted
+ * @param {string} [name] the name of the HTML input element which
+ *                        caused the error and shall be highlighted
  * @returns {void}
  */
 
 /**
  * Determines whether a modal dialog is visible or not.
  *
- * @function visible
+ * @function isVisible
  * @memberOf basicModal
  * @returns {boolean}
  */
@@ -74,11 +160,12 @@
  */
 
 /**
- * Removes any (potential) error indicator from the input elements.
+ * Reactivates buttons and removes any (potential) error indicator from the
+ * input elements.
  *
  * @function reset
  * @memberOf basicModal
- * @returns {boolean} always `true`
+ * @returns {void}
  */
 
 /**
@@ -87,48 +174,140 @@
  * @function close
  * @memberOf basicModal
  * @param {boolean} [force=false]
- * @returns {boolean} `true`, if the dialog has been visible before and has
- *                     been closed;
- *                    `false`, if no dialog has been visible which could be
- *                    closed
+ * @param {ModalDialogClosedCB} [onClosedCB]
+ * @returns {void}
  */
 
 /**
- * @typedef ModalDialogData
- * @property {string}                 [body='']       HTML snippet to be inserted into the content
- *                                                    area of the dialog
- * @property {string}                 [class='']      CSS class to be applied to the content area
- *                                                    of the dialog
- * @property {boolean}                [closable=true] indicates whether the dialog can be closed
- *                                                    via {@link basicModal.close}
- * @property {ModalDialogButtonsData} buttons         configuration data for the main action and
- *                                                    cancel button
- * @property {ModalDialogReadyCB}     [callback=null] callback to be called after the dialog
- *                                                    has become visible and ready for user input
+ * @function isActionButtonBusy
+ * @memberOf basicModal
+ * @returns {boolean}
  */
 
 /**
- * @callback ModalDialogReadyCB
- * @param {ModalDialogData} data the configuration data which has been used to construct the dialog
+ * @function markActionButtonAsBusy
+ * @memberOf basicModal
  * @returns {void}
  */
 
 /**
- * @typedef ModalDialogButtonsData
- * @property {ModalDialogButtonData} [action] configuration data for the main action button
- * @property {ModalDialogButtonData} [cancel] configuration data for the cancel button
+ * @function markActionButtonAsIdle
+ * @memberOf basicModal
+ * @returns {void}
  */
 
 /**
- * @typedef ModalDialogButtonData
- * @property {string}              [title] the caption of the button
- * @property {string}              [class] CSS class to be applied to the button
- * @property {ModalDialogButtonCB} fn      callback to be called upon an "on-click" event
+ * Returns `true`, if the Action button is visible.
+ *
+ * @function isActionButtonVisible
+ * @memberOf basicModal
+ * @returns {boolean}
  */
 
 /**
- * @callback ModalDialogButtonCB
- * @param {Object} [values] an associative object with the values of all HTML
- *                          input elements; see {@link basicModal.getValues}
+ * Returns `true`, if the Action button is hidden.
+ *
+ * Note, this method is not exactly the opposite of
+ * {@link basicModal#isActionButtonVisible}.
+ * This method only returns `true` if the dialog owns an Action button which
+ * can be hidden.
+ * In other words, both {@link basicModal#isActionButtonVisible} and this method may
+ * return `false` simultaneously, if there is no Action button at all.
+ *
+ * @function isActionButtonHidden
+ * @memberOf basicModal
+ * @returns {boolean}
+ */
+
+/**
+ * Hides the Action button
+ *
+ * Note: This does not hide the button by setting the `display` property to
+ * `none`, but completely removes the button from the DOM.
+ * This is necessary, as an element which is not displayed is still considered
+ * when it comes to calculating the first or last child and hence rounding
+ * of the first/last button does not work as expected, if the button is still
+ * part of the DOM.
+ *
+ * @function hideActionButton
+ * @memberOf basicModal
+ * @returns {void}
+ */
+
+/**
+ * Shows the Action button, if one has been defined
+ *
+ * Note: This re-inserts the Action button into the DOM, but only if an Action
+ * button has previously been defined during the dialog construction.
+ *
+ * @function showActionButton
+ * @memberOf basicModal
+ * @returns {void}
+ */
+
+/**
+ * @function isCancelButtonBusy
+ * @memberOf basicModal
+ * @returns {boolean}
+ */
+
+/**
+ * @function markCancelButtonAsBusy
+ * @memberOf basicModal
+ * @returns {void}
+ */
+
+/**
+ * @function markCancelButtonAsIdle
+ * @memberOf basicModal
+ * @returns {void}
+ */
+
+/**
+ * Returns `true`, if the Cancel button is visible.
+ *
+ * @function isCancelButtonVisible
+ * @memberOf basicModal
+ * @returns {boolean}
+ */
+
+/**
+ * Returns `true`, if the Cancel button is hidden.
+ *
+ * Note, this method is not exactly the opposite of
+ * {@link basicModal#isCancelButtonVisible}.
+ * This method only returns `true` if the dialog owns a Cancel button which
+ * can be hidden.
+ * In other words, both {@link basicModal#isCancelButtonVisible} and this method may
+ * return `false` simultaneously, if there is no Cancel button at all.
+ *
+ * @function isCancelButtonHidden
+ * @memberOf basicModal
+ * @returns {boolean}
+ */
+
+/**
+ * Hides the Cancel button
+ *
+ * Note: This does not hide the button by setting the `display` property to
+ * `none`, but completely removes the button from the DOM.
+ * This is necessary, as an element which is not displayed is still considered
+ * when it comes to calculating the first or last child and hence rounding
+ * of the first/last button does not work as expected, if the button is still
+ * part of the DOM.
+ *
+ * @function hideCancelButton
+ * @memberOf basicModal
+ * @returns {void}
+ */
+
+/**
+ * Shows the Cancel button, if one has been defined
+ *
+ * Note: This re-inserts the Cancel button into the DOM, but only if a Cancel
+ * button has previously been defined during the dialog construction.
+ *
+ * @function showCancelButton
+ * @memberOf basicModal
  * @returns {void}
  */