refactored the status bar...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/css/layout.css

@@ -1173,7 +1173,7 @@ stretching in width... */
   -ms-user-select: auto;
   user-select: auto;
 }
-.overlay-info .float-right {
+.overlay-info .spacer ~ * {
   float: right;
 }
 .overlay-info .secondary {

ui (gen4)/css/layout.less

@@ -1034,7 +1034,7 @@ stretching in width... */
 .overlay-info:hover {
 	.user-select(auto);
 }
-.overlay-info .float-right {
+.overlay-info .spacer~* {
 	float: right;
 }
 .overlay-info .secondary {

ui (gen4)/data.js

@@ -2740,6 +2740,7 @@ var DataWithTagsPrototype = {
 	getTags: function(gids){
 		gids = arguments.length > 1 ? [].slice.call(arguments) : gids
 		gids = gids == null || gids == 'current' ? this.getImage() : gids
+		gids = gids == null ? [] : gids
 		gids = gids.constructor !== Array ? [gids] : gids
 
 		if(this.tags == null){

ui (gen4)/features/meta.js

@@ -103,8 +103,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 		//'ui-current-image-indicator-hide-on-screen-nav',
 	//'ui-base-ribbon-indicator',
 	'ui-passive-base-ribbon-indicator',
-	'ui-image-state-indicator',
+	'ui-status-bar',
-	'ui-global-state-indicator',
 	'ui-url-history',
 
 	'ui-browse-actions',

ui (gen4)/features/ui-status.js

@@ -85,17 +85,18 @@ var makeStateIndicatorItem = function(container, type, text){
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
-// XXX Add status messages and log...
+var StatusBarActions = actions.Actions({
-var ImageStateIndicatorActions = actions.Actions({
 	config: {
-		// XXX might be a good idea to add custom components API...
+		'status-bar-mode': 'minimal',
-		'global-state-indicator-elements': [
+		'status-bar-modes': [
-			// Q: should index be here or to the right???
+			'none',
+			'minimal',
+			'full'
+		],
+		'status-bar-items': [
 			'index',
-			//'path',
 			'gid',
-			// XXX is this the right place for this???
+			//'path',
-			'info',
 
 			// separates left/right aligned elements...
 			'---',
@@ -104,52 +105,26 @@ var ImageStateIndicatorActions = actions.Actions({
 			'bookmark',
 		],
 
-		'global-state-indicator-elements-full-only': [
+		// XXX not sure about this...
+		'status-bar-full-only': [
 			'gid',
+			'path',
 		],
-
-		'global-state-indicator-modes': [
-			'none',
-			'minimal',
-			'full',
-		],
-		'global-state-indicator-mode': null,
 	},
 
-	// Status indicator handlers...
+	__statusbar_elements__: {
-	//
+		index: function(item, gid, img){
-	// Format:
-	// 	{
-	// 		<key>: <handler>,
-	// 		<alias>: <key> | <handler>,
-	// 		...
-	// 	}
-	//
-	// Supported actions:
-	// 	- make
-	// 	- update
-	// 	- remove
-	//
-	// NOTE: built-in handlers can be overloaded by user.
-	// NOTE: alias loops are ignored.
-	//
-	// XXX make this visible to the user???
-	// XXX is this too complex???
-	__state_indicator_elements__: {
-		// XXX make position editable...
-		// 		- edit position on click
-		// 		- goto position on enter/blur (blur with value)
-		// 		- cancel on esc/blur (blur with no value)
-		// 		- treat index depending on mode (global/ribbon)
-		// XXX might be a good idea to auto-reset global index to ribbon...
-		index: function(action, container, elem, gid){
 			var that = this
-			// construct...
+			gid = gid || this.current
-			if(action == 'make'){
+
-				return $('<span>').addClass(elem)
+			// make an element...
-					// XXX might be a good idea to make this an input...
+			if(typeof(item) == typeof('str')){
+				var type = item
+				item = $('<span>')
+					.addClass(type)
 					.append($('<span>')
 						.addClass('position')
+						.attr('info', 'Image position (click to edit image position)')
 						.click(function(){
 							// XXX enter edit mode -> select contents...
 							// XXX might be a good idea to live select 
@@ -157,169 +132,165 @@ 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')
+						.attr('info', 'Image position (click to toggle ribbon/global)')
 						// toggle index state...
 						.click(function(){
 							$(this).parent()
 								.toggleClass('global')
-							that.updateStateIndicators()
+							that.updateStatusBar()
-						})
-						// XXX STUB...
-						.on('mouseover', function(){
-							that.showInfo('Image position (click to toggle ribbon/global)')
-						})
-						// XXX STUB...
-						.on('mouseout', function(){
-							that.hideInfo()
 						}))
 
+			} else {
+				var type = item.attr('type')
+			}
+
 			// update...
-			} else if(action == 'update'){
-				gid = gid || this.current
-
-				var c = container.find('.'+elem)
-
 			// global index...
-				if(c.hasClass('global')){
+			if(item.hasClass('global')){
-					c.find('.position')
+				item.find('.position')
 					.text(this.data.getImageOrder(gid)+1)
-					c.find('.length')
+				item.find('.length')
 					.text('/'+ this.data.length)
 
 			// ribbon index...
 			} else {
-					c.find('.position')
+				item.find('.position')
 					.text(this.data.getImageOrder('ribbon', gid)+1)
-					c.find('.length')
+				item.find('.length')
 					.text('/'+ this.data.getImages(gid).len)
 			}
 
-			// remove...
+			return item
-			} else if(action == 'remove'){
-				container.find('.'+elem).remove()
-			}
 		},
 
 		// XXX handle path correctly...
-		gid: function(action, container, elem, gid){
+		gid: function(item, gid, img){
-			// construct...
+			var that = this
-			if(action == 'make'){
+			gid = gid || this.current
-				return $('<span>')
+			img = img || (this.images && gid in this.images && this.images[gid])
-					.addClass(elem + ' expanding-text ')
+
+			// make an element...
+			if(typeof(item) == typeof('str')){
+				var type = item
+				item = $('<span>')
+					.addClass(type + ' expanding-text ')
+					.attr('info', type == 'gid' ? 'Image GID'
+							: type == 'path'? 'Image filename/path'
+							: '')
 					.append($('<span class="shown">'))
 					.append($('<span class="hidden">'))
 
+			} else {
+				var type = item.attr('type')
+			}
+
 			// update...
-			} else if(action == 'update'){
+			var txt = ''
+			var text = ''
+
 			// gid..
-				if(elem == 'gid'){
+			if(type == 'gid'){
-					var txt = gid.slice(-6)
+				txt = gid ? gid.slice(-6) : '-'
-					var text = gid 
+				text = gid || '-'
 
 			// path...
 			// XXX
-				} else if(elem == 'path'){
+			} else if(type == 'path'){
-					var img = this.images && gid in this.images && this.images[gid]
+				text = img && img.path || '---'
-
+				txt = text
-					var text = img && img.path || '---'
-					var txt = text
 			}
 
-				container.find('.'+elem+' .shown').text(txt)
+			item.find('.shown').text(txt)
-				container.find('.'+elem+' .hidden').text(text)
+			item.find('.hidden').text(text)
 
-			// remove...
+			return item
-			} else if(action == 'remove'){
-				container.find('.'+elem).remove()
-			}
 		},
 		path: 'gid',
 
-		mark: function(action, container, elem, gid){
+		mark: function(item, gid, img){
-			// construct...
+			gid = gid || this.current
-			if(action == 'make'){
 			var that = this
-				return $('<span>').addClass(elem+'ed')
+
-					.click(function(){
+			if(typeof(item) == typeof('str')){
-						that['toggle'+elem.capitalize()]()
+				var type = item
-					})
+				item = $('<span>')
-					// XXX STUB...
+					.addClass(type + 'ed')
-					.on('mouseover', function(){
+					.attr('info', 'Image '
-						that.showInfo('Image '
+						+(type == 'mark' ? 'selection' : 'bookmark')
-							+(elem == 'mark' ? 'selection' : 'bookmark')
 						+' status (click to toggle)')
-					})
+					.click(function(){
-					// XXX STUB...
+						that['toggle'+type.capitalize()]()
-					.on('mouseout', function(){
-						that.hideInfo()
 					})
 
-			// update...
+			} else {
-			} else if(action == 'update'){
+				var type = item.attr('type')
+			}
+
 			// NOTE: we are not using .toggleMark('?') and friends 
 			// 		here to avoid recursion as we might be handling 
 			// 		them here...
 			// 		...this also simpler than handling '?' and other
 			// 		special toggler args in the handler...
 			var tags = this.data.getTags(gid)
-				var tag = elem == 'mark' ? 'selected' : 'bookmark'
+			var tag = type == 'mark' ? 'selected' : 'bookmark'
-				container.find('.'+elem+'ed')[
+			item[tags.indexOf(tag) < 0 ?
-					tags.indexOf(tag) < 0 ?
 					'removeClass' 
 					: 'addClass']('on')
 
-			// remove...
+			return item
-			} else if(action == 'remove'){
-				container.find('.'+elem+'ed').remove()
-			}
 		},
 		bookmark: 'mark', 
+	},
 
-		// XXX STUB
+	// NOTE: to reset the status bar cycle through 'none' mode to 
-		// XXX need to style this in an appropriate way...
+	// 		reconstruct all the items.
-		// 		...might not be a good spot for this...
+	toggleStatusBar: ['Interface/Toggle status bar modes',
-		// XXX might be a good idea to make the info global, e.g. show 
+		toggler.CSSClassToggler(
-		// 		info for anything that either has or is nested in an 
+			// XXX change class...
-		// 		element that has an info attr...
+			function(){ 
-		info: function(action, container, elem, gid){
+				var bar = this.ribbons.viewer.find('.state-indicator-container.global-info') 
-			// construct...
+				if(bar.length == 0){
-			if(action == 'make'){
+					bar = makeStateIndicator('global-info overlay-info') 
-				return $('<span>')
+						.on('mouseover', function(){
-					.addClass('info')
+							var t = $(event.target)
-					.hide()
 							
-			// remove...
+							var info = t.attr('info') 
-			} else if(action == 'remove'){
+								|| t.parents('.overlay-info, [info]').first().attr('info')
-				container.find('.info').remove()
+
+							if(info){
+								bar.find('.info').text(info)
 							}
+						})
+						.on('mouseout', function(){
+							bar.find('.info').empty()
+						})
+						.appendTo(this.ribbons.viewer)
+				}
+				return bar
 			}, 
-	},
+			function(){ return this.config['status-bar-modes'] },
-
+			// XXX check if we will be getting gid reliably...
-	// XXX should this be a toggler???
+			function(state, bar, gid){ 
-	updateStateIndicators: ['- Interface/',
-		function(gid){
-			gid = gid || this.current
-
 				var that = this
+				this.config['status-bar-mode'] = state 
+
+				// destroy...
+				if(state == 'none'){
+					bar.empty()
+
+				// build/update...
+				} else {
+					gid = gid || this.current
+					var img = this.images && this.images[gid]
 
-			var _getHandlers = function(){
-				return Object.keys(that.__state_indicator_elements__ || {})
-					.concat(Object.keys(ImageStateIndicatorActions.__state_indicator_elements__ || {}))
-					.unique()
-			}
 					var _getHandler = function(key){
-				var handler = (that.__state_indicator_elements__ || {})[key]
+						var elems = that.__statusbar_elements__ || {}
-					|| (ImageStateIndicatorActions.__state_indicator_elements__ || {})[key]
+						var base_elems = StatusBarActions.__statusbar_elements__ || {}
+
+						var handler = elems[key] || base_elems[key]
 
 						if(handler == null){
 							return
@@ -329,142 +300,101 @@ var ImageStateIndicatorActions = actions.Actions({
 						var seen = []
 						while(typeof(handler) == typeof('str')){
 							seen.push(handler)
-					var handler = (that.__state_indicator_elements__ || {})[handler]
+							var handler = elems[handler] || base_elems[handler]
-						|| (ImageStateIndicatorActions.__state_indicator_elements__ || {})[handler]
 							// check for loops...
 							if(seen.indexOf(handler) >= 0){
 								console.error('state indicator alias loop detected at:', key)
 								handler = null
+								break
 							}
 						}
 
 						return handler
 					}
 
-			var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
+					// build...
-			if(global.length == 0){
+					if(bar.children().length <= 0){
-				//global = makeStateIndicator('global-info') 
+						var items = this.config['status-bar-items'].slice()
-				global = makeStateIndicator('global-info overlay-info') 
 
-				var align = ''
-				var order = this.config['global-state-indicator-elements'].slice()
-
-				var i = order.indexOf('---')
 						// rearrange the tail section...
 						// NOTE: this is here as we need to push the floated
 						// 		right items in reverse order...
-				if(i >= 0){
+						var i = items.indexOf('---')
-					order = order.concat(order.splice(i+1, order.length).reverse())
+						items = i >= 0 ? 
-				}
+							items.concat(items.splice(i+1, items.length).reverse())
-
+							: items
-				order.forEach(function(elem){
-					var full_only = that.config['global-state-indicator-elements-full-only'].indexOf(elem) >= 0
-					var res = $()
 
+						items.forEach(function(item){
 							// spacer...
-					if(elem == '---'){
+							if(item == '---'){
-						align = 'float-right'
+								//item = $('<span class="spacer">')
+								item = $('<span class="spacer info">')
 
-					// handlers...
+							// info items...
 							} else {
-						var handler = _getHandler(elem)
+								var handler = _getHandler(item)
-						// do the call...
+
-						if(handler != null){
+								var type = item
-							res = handler.call(that, 'make', global, elem, gid)
+								item = (handler ? 
+										handler.call(that, item, gid, img) 
+										: $('<span>'))
+									.attr('type', item)
+
+								if('status-bar-full-only' in that.config 
+										&& that.config['status-bar-full-only'].indexOf(type) >= 0){
+									item.addClass('full-only')
 								}
 							}
 
-					// append the actual element...
+							bar.append(item)
-					res.length > 0 && res
-						.addClass(align +' '+ (full_only && 'full-only'))
-						.appendTo(global)
 						})
 
-				// add and init in the correct state...
+					// update...
-				global.appendTo(this.ribbons.viewer)
+					} else {
-				if(this.config['global-state-indicator-mode']){
+						var items = bar.children()
-					this.toggleStateIndicator(this.config['global-state-indicator-mode'])
+							.each(function(i, item){
-				}
+								item = $(item)
-			}
+								var type = item.attr('type') 
 
-			if(!gid){
+								if(type == null){
 									return
 								}
 
-			// populate the info...
+								var handler = _getHandler(type)
-			_getHandlers().forEach(function(key){
+
-				_getHandler(key).call(that, 'update', global, key, gid)
+								if(handler != null){
+									handler.call(that, item, gid, img) 
+								}
 							})
-		}],
+					}
-	toggleStateIndicator: ['Interface/Toggle state indicator modes',
+				}
-		toggler.CSSClassToggler(
+			})],	
-			function(){ 
+	updateStatusBar: ['Interface/Update satus bar',
-				return this.ribbons.viewer.find('.state-indicator-container.global-info') }, 
+		function(){ this.toggleStatusBar('!') }]
-			function(){ return this.config['global-state-indicator-modes'] },
-			function(state){ this.config['global-state-indicator-mode'] = state }) ],
-
-
-	// XXX 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:
+var StatusBar = 
-// 		- global status area
+module.StatusBar = core.ImageGridFeatures.Feature({
-// 		- status bar for local status
-// 			- as in gen3
-// 			- add image status
-//
-// 		General item format:
-// 			- minimal state		- only short version / icon is shown
-// 								- when not active a disabled state/icon is shown
-//
-// 			- expanded state	- status bar sows expanded state (only?)
-// 								- title/help shown above 
-// 									- floating text, transparent bg
-// 									- same align as item
-//
-// XXX Q: can title bar be used instead of global state indication???
-// 		...especially if we are indicating only crop...
-// XXX add styling:
-// 		- element spacing
-// 		- tip text
-// 		- avoid multi-line
-// XXX rename to status bar???
-var ImageStateIndicator = 
-module.ImageStateIndicator = core.ImageGridFeatures.Feature({
 	title: '',
 	doc: '',
 
-	tag: 'ui-image-state-indicator',
+	tag: 'ui-status-bar',
 	depends: [
 		'ui',
-		'ui-single-image-view',
 	],
 
-	actions: ImageStateIndicatorActions,
+	actions: StatusBarActions,
 
 	handlers: [
 		['start',
 			function(){
-				if(this.config['global-state-indicator-mode']){
+				if(this.config['status-bar-mode']){
-					this.toggleStateIndicator(this.config['global-state-indicator-mode'])
+					this.toggleStatusBar(this.config['status-bar-mode'])
 				}
 			}],
 		['focusImage',
 			function(){
-				this.updateStateIndicators()
+				this.updateStatusBar()
 			}],
 		[[
 			'tag',
@@ -476,7 +406,7 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
 						&& (gids.indexOf('current') >= 0 
 							|| gids.indexOf(this.current) >= 0)
 						|| this.data.getImage(gids) == this.current){
-					this.updateStateIndicators()
+					this.updateStatusBar()
 				}
 			}],
 	],
@@ -484,87 +414,6 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
 
 
 
-//---------------------------------------------------------------------
-
-/*
-var InfoIndicatorActions = actions.Actions({
-	config: {
-		// XXX might be a good idea to add custom components API...
-		'global-state-indicator-elements': [
-			// Q: should index be here or to the right???
-			'index',
-			//'path',
-			'gid',
-			// XXX is this the right place for this???
-			'info',
-
-			// separates left/right aligned elements...
-			'---',
-
-			'mark',
-			'bookmark',
-		],
-	},
-
-	__state_indicator_elements__: {
-		// 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 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()
-		}]
-})
-
-InfoIndicatorActions
-	.__state_indicator_elements__.__proto__ 
-		= ImageStateIndicatorActions.__state_indicator_elements__
-
-
-var InfoIndicator = 
-module.InfoIndicator = core.ImageGridFeatures.Feature({
-	title: '',
-	doc: '',
-
-	tag: 'ui-info-indicator',
-	depends: [
-		'ui',
-		'ui-image-state-indicator',
-	],
-
-	actions: InfoIndicatorActions,
-})
-
-*/
-
-
 //---------------------------------------------------------------------
 
 // XXX

ui (gen4)/ui.js

@@ -219,7 +219,7 @@ module.GLOBAL_KEYBOARD = {
 		},
 		I: {
 			default: 'showMetadata',
-			shift: 'toggleStateIndicator',
+			shift: 'toggleStatusBar',
 
 			ctrl: 'toggleMark!: "ribbon"',
 			'ctrl+shift': 'showMetadata: "current" "full"',