Update message on spinner

Tradeshift · May 23, 2019 · 9b092d6 · 9b092d6
1 parent 697c103
commit 9b092d6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/docs/src/xhtml/components/spinners/index.xhtml b/docs/src/xhtml/components/spinners/index.xhtml
@@ -59,6 +59,25 @@
 						});
 					</script>
 				</figure>
+				<p>
+					You can use the function of <code>spin(message)</code> to change the message of the spinner
+				</p>
+				<figure data-ts="DoxScript">
+					<script type="runnable">
+						ts.ui.get('.ts-app', app => {
+							app.blocking('Chrunching data');
+							setTimeout(() => {
+								app.spin('The data is coming');
+							}, 1000);
+							setTimeout(() => {
+								app.spin('Good luck');
+							}, 2000);
+							setTimeout(() => {
+								app.done();
+							}, 3000);
+						});
+					</script>
+				</figure>
 			</section>
 
 			<h3>Aside and SideBar</h3>

diff --git a/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/covers/ts.ui.CoverSpirit.js b/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/covers/ts.ui.CoverSpirit.js
@@ -75,11 +75,15 @@ ts.ui.CoverSpirit = (function using(chained, Client) {
 			 */
 			spin: chained(function(message) {
 				message = typeof message === 'string' ? message : '';
-				this.dom.append(
-					ts.ui.SpinnerSpirit.summon(message, {
-						color: this.blocking() ? 'rgb(255,255,255)' : 'rgb(85,85,85)'
-					})
-				);
+				if (this._spinner) {
+					this._spinner.text(message);
+				} else {
+					this.dom.append(
+						(this._spinner = ts.ui.SpinnerSpirit.summon(message, {
+							color: this.blocking() ? 'rgb(255,255,255)' : 'rgb(85,85,85)'
+						}))
+					);
+				}
 			}),
 
 			/**

diff --git a/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/spinners/ts.ui.SpinnerSpirit.js b/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/spinners/ts.ui.SpinnerSpirit.js
@@ -12,7 +12,17 @@ ts.ui.SpinnerSpirit = (function using(defaults) {
 	}
 
 	return ts.ui.Spirit.extend(
-		{},
+		{
+			/**
+			 * @param {String} change spinner message
+			 */
+			text: function(message) {
+				var span = this.dom.q('span');
+				if (span) {
+					span.innerText = message;
+				}
+			}
+		},
 		{
 			/**
 			 * @returns {ts.ui.SpinnerSpirit}

diff --git a/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/ts.ui.Spirit.js b/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/ts.ui.Spirit.js
@@ -51,6 +51,17 @@ ts.ui.Spirit = (function using(Type, GuiArray, confirmed, chained) {
 				this.busy(false);
 			}),
 
+			/**
+			 * Change message.
+			 * @param @optional {string} message
+			 * @returns {this}
+			 */
+			spin: chained(function(message) {
+				if (this._cover) {
+					this._cover.spin(message);
+				}
+			}),
+
 			/**
 			 * Show or hide the blocking cover with optional message.
 			 * Support triggering via attribute `data-ts.busy="arg"`
@@ -69,6 +80,12 @@ ts.ui.Spirit = (function using(Type, GuiArray, confirmed, chained) {
 
 			// Private ...............................................................
 
+			/**
+			 * Local cover.
+			 * @type {ts.ui.CoverSpirit}
+			 */
+			_cover: null,
+
 			/**
 			 * Counting busy bees.
 			 * @type {boolean}
@@ -131,7 +148,8 @@ ts.ui.Spirit = (function using(Type, GuiArray, confirmed, chained) {
 			 */
 			_childcover: function() {
 				var Cover = ts.ui.CoverSpirit;
-				return this.dom.child(Cover) || this.dom.append(Cover.summon());
+				this._cover = this.dom.child(Cover) || this.dom.append(Cover.summon());
+				return this._cover;
 			},
 
 			// Privileged ............................................................