From dae24acc1b4619b6b345e0112b502f601138f95f Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 16 Feb 2016 06:24:58 +0300
Subject: [PATCH] added stub info -- the architecture is not final...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/layout.css        |  3 ++
 ui (gen4)/css/layout.less       |  3 ++
 ui (gen4)/features/ui-status.js | 62 +++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+)

diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css
index 3e04d5c9..5eecc65c 100644
--- a/ui (gen4)/css/layout.css	
+++ b/ui (gen4)/css/layout.css	
@@ -1202,6 +1202,9 @@ stretching in width... */
 .overlay-info > :not(:first-child) {
   margin-left: 10px;
 }
+.overlay-info .info {
+  font-style: italic;
+}
 /* XXX REUSE: this is the same as selected/bookmarked image markers... */
 .overlay-info .marked,
 .overlay-info .marked:after,
diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index bbe0b32a..dd277245 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -1068,6 +1068,9 @@ stretching in width... */
 	margin-left: 10px;
 }
 
+.overlay-info .info {
+	font-style: italic;
+}
 
 /* XXX REUSE: this is the same as selected/bookmarked image markers... */
 .overlay-info .marked,
diff --git a/ui (gen4)/features/ui-status.js b/ui (gen4)/features/ui-status.js
index c22835dc..75e669a0 100755
--- a/ui (gen4)/features/ui-status.js	
+++ b/ui (gen4)/features/ui-status.js	
@@ -52,6 +52,7 @@ var ImageStateIndicatorActions = actions.Actions({
 			'index',
 			//'path',
 			'gid',
+			'info',
 
 			// separates left/right aligned elements...
 			'---',
@@ -113,6 +114,14 @@ var ImageStateIndicatorActions = actions.Actions({
 							//$(this)
 							//	.prop('contenteditable', true)
 							// XXX
+						})
+						// XXX STUB...
+						.on('mouseover', function(){
+							that.showInfo('Image position (click to edit image position)')
+						})
+						// XXX STUB...
+						.on('mouseout', function(){
+							that.hideInfo()
 						}))
 					.append($('<span>')
 						.addClass('length')
@@ -121,6 +130,14 @@ var ImageStateIndicatorActions = actions.Actions({
 							$(this).parent()
 								.toggleClass('global')
 							that.updateStateIndicators()
+						})
+						// XXX STUB...
+						.on('mouseover', function(){
+							that.showInfo('Image position (click to toggle ribbon/global)')
+						})
+						// XXX STUB...
+						.on('mouseout', function(){
+							that.hideInfo()
 						}))
 
 			// update...
@@ -193,6 +210,16 @@ var ImageStateIndicatorActions = actions.Actions({
 					.click(function(){
 						that['toggle'+elem.capitalize()]()
 					})
+					// XXX STUB...
+					.on('mouseover', function(){
+						that.showInfo('Image '
+							+(elem == 'mark' ? 'selection' : 'bookmark')
+							+' status (click to toggle)')
+					})
+					// XXX STUB...
+					.on('mouseout', function(){
+						that.hideInfo()
+					})
 
 			// update...
 			} else if(action == 'update'){
@@ -214,6 +241,25 @@ var ImageStateIndicatorActions = actions.Actions({
 			}
 		},
 		bookmark: 'mark', 
+
+		// XXX STUB
+		// XXX need to style this in an appropriate way...
+		// 		...might not be a good spot for this...
+		// XXX might be a good idea to make the info global, e.g. show 
+		// 		info for anything that either has or is nested in an 
+		// 		element that has an info attr...
+		info: function(action, container, elem, gid){
+			// construct...
+			if(action == 'make'){
+				return $('<span>')
+					.addClass('info')
+					.hide()
+
+			// remove...
+			} else if(action == 'remove'){
+				container.find('.info').remove()
+			}
+		},
 	},
 
 	// XXX should this be a toggler???
@@ -313,6 +359,22 @@ var ImageStateIndicatorActions = actions.Actions({
 				return this.ribbons.viewer.find('.state-indicator-container.global-info') }, 
 			function(){ return this.config['global-state-indicator-modes'] },
 			function(state){ this.config['global-state-indicator-mode'] = state }) ],
+
+
+	// Should these be a separate class???
+	showInfo: ['- Interface/',
+		function(text){
+			this.ribbons.viewer.find('.state-indicator-container.global-info .info')
+				.text(text)
+				.stop()
+				.css('opacity', 1)
+				.show()
+		}],
+	hideInfo: ['- Interface/',
+		function(){
+			this.ribbons.viewer.find('.state-indicator-container.global-info .info')
+				.fadeOut()
+		}]
 })
 
 // XXX an alternative approach: