Add an optional progress bar to Sequence

docs/reference/flow.rst

@@ -55,6 +55,13 @@ Sequence
 
     The options specified as ``handMeDowns`` are transferred to nested components during the prepare phase. This option is largely for convenience, and designed to decrease the amount of repetition when all nested components behave similarly -- typically, nested components share the same data storage and output element, so these are passed on by default. Similarly, the :js:attr:`debug <options.debug>` mode is easiest to set on the topmost component, and will automatically propagate to include all other components.
 
+  .. js:attribute:: options.showProgress
+
+    If ``true``, shows a progress bar at the top of the page that visualizes progress through this Sequence.
+
+  .. js:attribute:: options.progressBarMessage
+
+    The text that will be displayed next to the progress bar (if shown). Defaults to 'Completion Progress'.
 ----
 
 .. _reference/flow/loop:

packages/library/package.json

@@ -10,7 +10,6 @@
   },
   "homepage": "https://lab.js.org",
   "main": "dist/lab.js",
-  "module": "src/index.js",
   "dependencies": {
     "@babel/runtime": "^7.7.0",
     "common-tags": "^1.8.0",

packages/library/src/flow.js

@@ -59,6 +59,10 @@ export class Sequence extends Component {
   }
 
   async onRun(frameTimeStamp, frameSynced) {
+    if (this.options.showProgressBar) {
+      this.attachProgressBar(this.options.progressBarMessage);
+    }
+
     // Make the first step
     return this.step(frameTimeStamp, frameSynced)
   }
@@ -87,10 +91,36 @@ export class Sequence extends Component {
       [this.internals.currentPosition, this.internals.currentComponent] =
         next.value
       this.internals.currentComponent.on('after:end', this.internals.stepper)
+
+      if (this.options.showProgressBar) {
+        this.updateProgressBar(this.progress);
+      }
+
       return this.internals.currentComponent.run(frameTimeStamp, frameSynced)
     }
   }
 
+  attachProgressBar(message = 'Completion Progress') {
+    this.options.el.insertAdjacentHTML(
+      'beforebegin',
+      `<div id="labjs-progress-bar-container">
+          <span id="labjs-progress-bar-message">${message}</span>
+          <div id="labjs-progress-bar-outer">
+            <div id="labjs-progress-bar-inner" style={width: 1%}/>
+          </div>
+       </div>`
+    );
+  }
+
+  updateProgressBar(progress) {
+    const progressBarInner = document.querySelector('#labjs-progress-bar-inner') as HTMLElement;
+    if (!progressBarInner) return;
+
+    // Making sure there's at least a little bit of progress visible is nice
+    const progressWidth = progress === 0 ? '2%' : progress * 100 + '%';
+    progressBarInner.style.width = progressWidth;
+  }
+
   get progress() {
     // If the sequence has ended,
     // report it as completed

packages/library/src/starterkit/lib/lab.css

@@ -432,22 +432,35 @@ table.table-striped tr:nth-child(odd) td {
 }
 
 /* Progress bar */
-.progress {
-  width: 100%;
+#labjs-progress-bar-container {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 2px 1px -1px rgb(210, 210, 210);
+}
+
+#labjs-progress-bar-outer {
+  flex: 1;
+  border-radius: 4px;
+  background-color: #e4e7e8;
+  display: inline-block;
   height: 8px;
-  overflow: hidden;
-  margin: 0.2rem 0 0.4rem;
-  border-radius: 2px;
-  border: 1px solid var(--color-border);
 }
-.progress .progress-bar {
-  width: 0%;
-  min-height: 8px;
-  background-color: var(--color-gray-background);
-  border-right: 1px solid var(--color-border-internal);
-  box-sizing: content-box;
+
+#labjs-progress-bar-message {
+  display: inline-block;
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+#labjs-progress-bar-inner {
+  display: block;
+  background: #ffc32d;
+  border-radius: 4px;
+  height: 100%;
 }
 
+
 /* Popovers */
 .popover {
   position: absolute;
@@ -494,3 +507,5 @@ table.table-striped tr:nth-child(odd) td {
   top: -8px;
 }
 
+/
+