From 793f8876fc41b64b0c9f6852507d688045832794 Mon Sep 17 00:00:00 2001
From: Matei Stanca <i@ambientimpact.com>
Date: Thu, 28 Nov 2024 12:06:49 -0500
Subject: [PATCH] Issue #3488464: Moved progress bar delay custom prop to delay
component:
This also required altering the hide and finish methods/logic to return
Promises so external calls can know when they've finished doing async
stuff. It's still a bit messy but hopefully less so than before.
---
.../progress-bar-delay/progress-bar-delay.js | 63 ++++++++++++++++---
components/progress-bar/progress-bar.js | 36 ++++-------
2 files changed, 66 insertions(+), 33 deletions(-)
diff --git a/components/progress-bar-delay/progress-bar-delay.js b/components/progress-bar-delay/progress-bar-delay.js
index 3864337..3740621 100644
--- a/components/progress-bar-delay/progress-bar-delay.js
+++ b/components/progress-bar-delay/progress-bar-delay.js
@@ -12,6 +12,29 @@
'use strict';
+ /**
+ * CSS custom property base name.
+ *
+ * @type {String}
+ */
+ const customPropertyBase = '--refreshless-progress-bar';
+
+ /**
+ * Name of the CSS custom property containing the progress bar delay.
+ *
+ * The value will be a time in ms.
+ *
+ * @type {String}
+ */
+ const delayCustomProperty = `${customPropertyBase}-delay`;
+
+ /**
+ * The <html> element.
+ *
+ * @type {HTMLHtmlElement}
+ */
+ const html = document.documentElement;
+
/**
* Represents a progress bar delay wrapper.
*/
@@ -53,6 +76,26 @@
}
+ /**
+ * Install the progress bar in the document and set various properties.
+ */
+ install() {
+
+ html.style.setProperty(
+ delayCustomProperty, `${this.#delay}ms`,
+ );
+
+ }
+
+ /**
+ * Uninstall the progress bar from the document and remove properties.
+ */
+ uninstall() {
+
+ html.style.removeProperty(delayCustomProperty);
+
+ }
+
/**
* Start the timeout to show the progress bar.
*
@@ -68,11 +111,15 @@
window.clearTimeout(timeoutId);
}
- this.#progressBar.setValue(0);
+ this.install();
- return window.setTimeout(
- () => { this.#progressBar.show() }, this.#delay,
- );
+ return window.setTimeout(async () => {
+
+ await this.#progressBar.setValue(0);
+
+ this.#progressBar.show();
+
+ }, this.#delay);
}
@@ -89,13 +136,11 @@
return timeoutId;
}
- this.#progressBar.setValue(1);
-
- this.#progressBar.hide();
-
window.clearTimeout(timeoutId);
- timeoutId = null
+ timeoutId = null;
+
+ this.#progressBar.finish().then(() => this.uninstall());
return timeoutId;
diff --git a/components/progress-bar/progress-bar.js b/components/progress-bar/progress-bar.js
index b00862f..53bb8b6 100644
--- a/components/progress-bar/progress-bar.js
+++ b/components/progress-bar/progress-bar.js
@@ -45,15 +45,6 @@
*/
const durationCustomProperty = `${customPropertyBase}-transition-duration`;
- /**
- * Name of the CSS custom property containing the progress bar delay.
- *
- * The value will be a time in ms.
- *
- * @type {String}
- */
- const delayCustomProperty = `${customPropertyBase}-delay`;
-
/**
* Name of the CSS custom property containing the current progress bar value.
*
@@ -142,23 +133,29 @@
/**
* Hide the progress bar if visible and not already hiding.
+ *
+ * @return {Promise}
*/
hide() {
if (!(this.#visible === true && this.#hiding === false)) {
- return;
+ return Promise.resolve();
}
this.#hiding = true;
this.stopTrickling();
- this.#transitionOut().then(() => {
+ return new Promise(async (resolve, reject) => {
+
+ await this.#transitionOut();
this.uninstall();
this.#visible = false;
this.#hiding = false;
+ resolve();
+
});
}
@@ -224,7 +221,7 @@
this.#value = value;
- this.refresh();
+ return this.refresh();
}
@@ -237,10 +234,6 @@
durationCustomProperty, `${this.#transitionDuration}ms`,
);
- html.style.setProperty(
- delayCustomProperty, `${Turbo.session.progressBarDelay}ms`,
- );
-
html.style.setProperty(valueCustomProperty, 0);
this.#setInactive();
@@ -266,7 +259,6 @@
this.#element.remove();
}
- html.style.removeProperty(delayCustomProperty);
html.style.removeProperty(durationCustomProperty);
html.style.removeProperty(valueCustomProperty);
@@ -319,16 +311,12 @@
}
/**
- * Finish/complete the progress bar to 100% and start hiding it.
+ * Finish/complete the progress bar by setting to 100% and start hiding it.
*
- * @return {[type]} [description]
+ * @return {Promise}
*/
finish() {
-
- this.setValue(1);
-
- this.hide();
-
+ return this.setValue(1).then(() => this.hide());
}
/**
--
GitLab