From 28caba16fc3ba8724b4141ebec4e213a31c441c4 Mon Sep 17 00:00:00 2001
From: Nguyen Lam <nguyen.lam@tradeshift.com>
Date: Thu, 14 Oct 2021 19:37:56 +0200
Subject: [PATCH] feat(aside): add optional tooltip on header

---
 docs/src/xhtml/components/asides/index.xhtml  | 40 +++++++++++++++++++
 .../edbml/scripts/ts.ui.HeaderBarSpirit.edbml |  3 +-
 .../edbml/scripts/ts.ui.ToolBarSpirit.edbml   | 15 ++++---
 .../api/ts.ui.Header.js                       | 12 ++++++
 .../models/global/ts.ui.HeaderBarModel.js     | 13 ++++++
 .../local/toolbar/ts.ui.ToolBarModel.js       |  6 +++
 .../spirits/global/ts.ui.HeaderBarSpirit.js   | 14 +++++++
 .../local/toolbar/ts.ui.ToolBarSpirit.js      | 21 ++++++++++
 .../models/asides/ts.ui.AsideModel.js         |  6 +++
 .../spirits/tooltip/ts.ui.TooltipSpirit.js    | 18 ++++++++-
 .../spirits/asides/ts.ui.SideShowSpirit.js    | 14 +++++++
 11 files changed, 154 insertions(+), 8 deletions(-)

diff --git a/docs/src/xhtml/components/asides/index.xhtml b/docs/src/xhtml/components/asides/index.xhtml
index 4d661df7d..ad60b1181 100644
--- a/docs/src/xhtml/components/asides/index.xhtml
+++ b/docs/src/xhtml/components/asides/index.xhtml
@@ -289,6 +289,35 @@
 									<li>The new Aside will float the top of the z-index</li>
 								</ul>
 							</section>
+
+							<h3>Tooltip on aside header</h3>
+							<section>
+								<p>
+									A tooltip can be added to the aside header with the
+									<att>data-ts.tooltip</att> attribute. Set the value equal to the text to be
+									displayed in the tooltip.
+								</p>
+								<figure data-ts="DoxMarkup">
+									<script type="text/html">
+										<aside data-ts="Aside"
+											id="aside-with-tooltip"
+											data-ts.title="Aside Title with tooltip"
+											data-ts.tooltip="My Tooltip">
+											<div data-ts="Panel">
+												<p>Aside content.</p>
+											</div>
+										</aside>
+									</script>
+								</figure>
+								<p>
+									Run the script below to open the Aside with tooltip.
+								</p>
+								<figure data-ts="DoxScript">
+									<script type="runnable">
+										ts.ui.get('#aside-with-tooltip').open();
+									</script>
+								</figure>
+							</section>
 						</article>
 					</div>
 				</div>
@@ -413,5 +442,16 @@
 				</menu>
 			</div>
 		</aside>
+
+		<aside
+			data-ts="Aside"
+			id="aside-with-tooltip"
+			data-ts.title="Aside Title with tooltip"
+			data-ts.tooltip="My Tooltip"
+		>
+			<div data-ts="Panel">
+				<p>Aside content.</p>
+			</div>
+		</aside>
 	</body>
 </html>
diff --git a/src/runtime/edbml/scripts/ts.ui.HeaderBarSpirit.edbml b/src/runtime/edbml/scripts/ts.ui.HeaderBarSpirit.edbml
index 71d6f0018..01c549afb 100644
--- a/src/runtime/edbml/scripts/ts.ui.HeaderBarSpirit.edbml
+++ b/src/runtime/edbml/scripts/ts.ui.HeaderBarSpirit.edbml
@@ -4,6 +4,7 @@
 
 	var id = (this.$instanceid + header.$instanceid);
 	var color = header.color;
+	var tooltip = header.tooltip;
 
 	<ul class="ts-headerbar-bars">
 		headerbar(header.headerbar);
@@ -13,7 +14,7 @@
 
 	function headerbar(model) {
 		<li data-ts="ToolBar" class="ts-headerbar-headerbar ${color}" id="${id}-headerbar" +
-			data-ts.model="?{model}" data-ts.visible="${header.$showHeaderBar(model)}"></li>
+			data-ts.model="?{model}" data-ts.tooltip="${tooltip}" data-ts.visible="${header.$showHeaderBar(model)}"></li>
 	}
 
 	function centerbar(model) {
diff --git a/src/runtime/edbml/scripts/ts.ui.ToolBarSpirit.edbml b/src/runtime/edbml/scripts/ts.ui.ToolBarSpirit.edbml
index e95676fcf..587a29204 100644
--- a/src/runtime/edbml/scripts/ts.ui.ToolBarSpirit.edbml
+++ b/src/runtime/edbml/scripts/ts.ui.ToolBarSpirit.edbml
@@ -22,7 +22,8 @@
 		toolbar.tabs,
 		toolbar.checkbox,
 		toolbar.$allactions(),
-		toolbar.pager	
+		toolbar.pager,
+		toolbar.tooltip
 	);
 	rendercenter(id, toolbar.pager);
 	if(toolbar.search && toolbar.search.buttons.length) {
@@ -31,7 +32,7 @@
 		rendernormalbuttons(id, toolbar.$allbuttons());
 	}
 	
-	function renderleft(title, icon, burger, back, forward, status, search, tabs, checkbox, actions, pager) {
+	function renderleft(title, icon, burger, back, forward, status, search, tabs, checkbox, actions, pager, tooltip) {
 		var hasnavi = back || forward;
 		var hastabs = !!tabs.getLength();
 		var hasactions = !!actions.length;
@@ -59,7 +60,7 @@
 						rendercheckbox(checkbox);
 					}
 					if(title || status) {
-						renderlabels(title, status, search, hasactions);
+						renderlabels(title, status, search, hasactions, tooltip);
 					}
 					actions.forEach(renderbutton);
 				}
@@ -204,12 +205,16 @@
 	}
 
 	// title (big text) or status message (with markdown)
-	function renderlabels(title, status, search, hasactions) {
+	function renderlabels(title, status, search, hasactions, tooltip) {
 		if(!search || !using(search)) {
 			if(title) {
 				@class = klass('ts-toolbar-title', null, !hasactions);
 				<li id="${id}-title" @class>
-					<label>${title}</label>
+					if(tooltip) {
+						<label data-ts="Tooltip" data-ts.title="${tooltip}" data-ts.offset="true">${title}</label>
+					} else {
+						<label>${title}</label>
+					}
 				</li>
 			} else {
 				@class = klass('ts-toolbar-status', null, !hasactions);
diff --git a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/api/ts.ui.Header.js b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/api/ts.ui.Header.js
index 80030e74e..5a26ae1e4 100644
--- a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/api/ts.ui.Header.js
+++ b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/api/ts.ui.Header.js
@@ -177,6 +177,18 @@ ts.ui.Header = (function using(chained) {
 			}
 		}),
 
+		/** Tooltip header
+		 * @param {string} [string]
+		 * @returns {this|string}
+		 */
+		tooltip: chained(function(text) {
+			if (arguments.length) {
+				bar().tooltip(text);
+			} else {
+				return bar().tooltip();
+			}
+		}),
+
 		/**
 		 * @TODO ts.ui.Header.localize
 		 */
diff --git a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/global/ts.ui.HeaderBarModel.js b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/global/ts.ui.HeaderBarModel.js
index 3b681e26d..f1b838ff1 100644
--- a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/global/ts.ui.HeaderBarModel.js
+++ b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/global/ts.ui.HeaderBarModel.js
@@ -82,6 +82,19 @@ ts.ui.HeaderBarModel = (function using(ToolBarModel, SearchModel, chained) {
 			}
 		},
 
+		/**
+		 * Tooltip headerBarModel
+		 * @type {string}
+		 */
+		tooltip: {
+			getter: function() {
+				return this.headerbar.tooltip;
+			},
+			setter: function(tooltip) {
+				this.headerbar.tooltip = tooltip;
+			}
+		},
+
 		/**
 		 * The buttons.
 		 * @type {ts.ui.ButtonCollection}
diff --git a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/local/toolbar/ts.ui.ToolBarModel.js b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/local/toolbar/ts.ui.ToolBarModel.js
index 952e91fc0..eea7f8116 100644
--- a/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/local/toolbar/ts.ui.ToolBarModel.js
+++ b/src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/local/toolbar/ts.ui.ToolBarModel.js
@@ -51,6 +51,12 @@ ts.ui.ToolBarModel = (function using(chained, ButtonModel, CheckBoxModel) {
 		 */
 		title: null,
 
+		/**
+		 * Show tooltip.
+		 * @type {string}
+		 */
+		tooltip: null,
+
 		/**
 		 * Toolbar icon.
 		 * @type {string}
diff --git a/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/global/ts.ui.HeaderBarSpirit.js b/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/global/ts.ui.HeaderBarSpirit.js
index 09497cc04..b3913ed90 100644
--- a/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/global/ts.ui.HeaderBarSpirit.js
+++ b/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/global/ts.ui.HeaderBarSpirit.js
@@ -77,6 +77,20 @@ ts.ui.HeaderBarSpirit = (function using(chained) {
 				}
 			}),
 
+			/**
+			 * tooltip HeaderBar.
+			 * @param {string} text
+			 * @return {ts.ui.AsideSpirit|string}
+			 */
+			tooltip: chained(function(text) {
+				var model = this.model();
+				if (arguments.length) {
+					model.tooltip = text;
+				} else {
+					return model.tooltip;
+				}
+			}),
+
 			/**
 			 * Get or set the icon image.
 			 * @param {string} [string]
diff --git a/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/local/toolbar/ts.ui.ToolBarSpirit.js b/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/local/toolbar/ts.ui.ToolBarSpirit.js
index 67c2568c0..5e052a1c8 100644
--- a/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/local/toolbar/ts.ui.ToolBarSpirit.js
+++ b/src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/local/toolbar/ts.ui.ToolBarSpirit.js
@@ -293,6 +293,27 @@ ts.ui.ToolBarSpirit = (function using(
 				})
 			),
 
+			/**
+			 * tooltip Toolbar
+			 * @param @optional {string|null} title
+			 * @returns {string|ts.ui.ToolBarSpirit}
+			 */
+			tooltip: confirmed('(string|null)')(
+				chained(function(tooltip_text) {
+					var model = this.model();
+					if (arguments.length) {
+						tooltip_text = tooltip_text || '';
+						if (tooltip_text.trim().indexOf('{') !== 0) {
+							model.tooltip = tooltip_text;
+							this.event.add('click');
+							this.$hascontent();
+						}
+					} else {
+						return model.tooltip;
+					}
+				})
+			),
+
 			/**
 			 * Get or set the search (getter will *create* the search).
 			 * @param @optional {object|ts.ui.SearchModel} opt_json
diff --git a/src/runtime/js/ts.ui/core/core-api@tradeshift.com/models/asides/ts.ui.AsideModel.js b/src/runtime/js/ts.ui/core/core-api@tradeshift.com/models/asides/ts.ui.AsideModel.js
index 6da1f47a7..60f24a4a1 100644
--- a/src/runtime/js/ts.ui/core/core-api@tradeshift.com/models/asides/ts.ui.AsideModel.js
+++ b/src/runtime/js/ts.ui/core/core-api@tradeshift.com/models/asides/ts.ui.AsideModel.js
@@ -29,6 +29,12 @@ ts.ui.AsideModel = (function using(chained) {
 		 */
 		title: null,
 
+		/**
+		 * Aside tooltip.
+		 * @type {String}
+		 */
+		tooltip: null,
+
 		/**
 		 * Aside Note.
 		 * @type {String}
diff --git a/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/tooltip/ts.ui.TooltipSpirit.js b/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/tooltip/ts.ui.TooltipSpirit.js
index d4f33b833..6a8e78895 100644
--- a/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/tooltip/ts.ui.TooltipSpirit.js
+++ b/src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/tooltip/ts.ui.TooltipSpirit.js
@@ -19,6 +19,13 @@ ts.ui.TooltipSpirit = (function using(Client, CSSPlugin) {
 		 */
 		left: 0,
 
+		/**
+		 * If tooltip position should be based on
+		 * parent element(true) or the whole page(false).
+		 * @type {boolean}
+		 */
+		offset: false,
+
 		/**
 		 * The adjustment of top.
 		 * For exampe 10 or -5
@@ -45,8 +52,15 @@ ts.ui.TooltipSpirit = (function using(Client, CSSPlugin) {
 		onevent: function(e) {
 			this.super.onevent(e);
 			if (e.type === 'mousemove') {
-				var x = e.pageX + parseInt(this.left);
-				var y = e.pageY + parseInt(this.top);
+				var x = parseInt(this.left);
+				var y = parseInt(this.top);
+				if (this.offset) {
+					x += e.offsetX;
+					y += e.offsetY;
+				} else {
+					x += e.pageX;
+					y += e.pageY;
+				}
 				this._pseudoStyle(x, y);
 			}
 		},
diff --git a/src/runtime/js/ts.ui/layout/layout-gui@tradeshift.com/spirits/asides/ts.ui.SideShowSpirit.js b/src/runtime/js/ts.ui/layout/layout-gui@tradeshift.com/spirits/asides/ts.ui.SideShowSpirit.js
index e3f3486ff..2460e1a91 100644
--- a/src/runtime/js/ts.ui/layout/layout-gui@tradeshift.com/spirits/asides/ts.ui.SideShowSpirit.js
+++ b/src/runtime/js/ts.ui/layout/layout-gui@tradeshift.com/spirits/asides/ts.ui.SideShowSpirit.js
@@ -120,6 +120,20 @@ ts.ui.SideShowSpirit = (function using(
 			}
 		}),
 
+		/**
+		 * Tooltip SideShow
+		 * @param {string} text
+		 * @return {ts.ui.AsideSpirit|string}
+		 */
+		tooltip: chained(function(text) {
+			var header = this._head();
+			if (arguments.length) {
+				header.tooltip(String(text));
+			} else {
+				return header.tooltip();
+			}
+		}),
+
 		/**
 		 * Get or set the titlebar search model.
 		 * @param {Object|ts.ui.SearchModel} search