added current image marker, appears to be consistent...

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

ui (gen4)/index.html

@@ -22,9 +22,11 @@
 	background: black;
 }
 
+/*
 .image.current {
 	border-color: red;
 }
+*/
 
 .shadow {
 	position: absolute;

ui (gen4)/lib/actions.js

@@ -371,13 +371,16 @@ module.MetaActions = {
 			action = mode[0]
 			mode = mode[1]
 
+			// keep the original handler for future use...
+			var a_handler = handler
+
 			// a post handler (default)...
 			if(mode == null || mode == 'post'){
-				var old_handler = handler
+				var old_handler = a_handler
-				handler = function(){ return old_handler }
+				a_handler = function(){ return old_handler }
 				// NOTE: this is set so as to identify the handler for removal
 				// 		via. .off(..)
-				handler.orig_handler = old_handler.orig_handler || old_handler
+				a_handler.orig_handler = old_handler.orig_handler || old_handler
 
 			// mot pre mode...
 			} else if(mode != 'pre') {
@@ -385,7 +388,7 @@ module.MetaActions = {
 				throw 'Unknown action mode: '+action+'.'+mode
 			}
 
-			handler.tag = tag
+			a_handler.tag = tag
 
 			// register handlers locally only...
 			if(!that.hasOwnProperty('_action_handlers')){
@@ -395,9 +398,9 @@ module.MetaActions = {
 				that._action_handlers[action] = []
 			}
 			// register a handler only once...
-			if(that._action_handlers[action].indexOf(handler) < 0){
+			if(that._action_handlers[action].indexOf(a_handler) < 0){
 				// NOTE: last registered is first...
-				that._action_handlers[action].splice(0, 0, handler)
+				that._action_handlers[action].splice(0, 0, a_handler)
 			}
 		})
 

ui (gen4)/ui.js

@@ -177,10 +177,11 @@ $(function(){
 	// 				- go to top ribbon
 	// 				- shift image up
 	viewer.PartialRibbons.setup(a)
-	viewer.RibbonAlignToOrder.setup(a)
+	viewer.AlignRibbonsToImageOrder.setup(a)
-	//viewer.RibbonAlignToFirst.setup(a)
+	//viewer.AlignRibbonsToFirstImage.setup(a)
 	viewer.ShiftAnimation.setup(a)
 	viewer.BoundsIndicators.setup(a)
+	viewer.CurrentImageIndicator.setup(a)
 
 	// this publishes all the actions...
 	//module.GLOBAL_KEYBOARD.__proto__ = a

ui (gen4)/viewer.js

@@ -898,37 +898,28 @@ function Feature(obj){
 
 
 
-// XXX I do not fully understand it yet, but PartialRibbons must be 
+// NOTE: this is split out to an action so as to enable ui elements to 
-// 		setup BEFORE RibbonAlignToFirst, otherwise the later will break
+// 		adapt to ribbon size changes...
-// 		on shifting an image to a new ribbon...
+var PartialRibbonsActions = 
-// 			To reproduce:
+module.PartialRibbonsActions = 
-// 				- setupe RibbonAlignToFirst first
+actions.Actions({
-// 				- go to top ribbon
+	updateRibbonSize: ['', 
-// 				- shift image up
+		function(target, w, size, threshold){
-// 		The two should be completely independent....
-// XXX need to test and tweak with actual images...
-var PartialRibbons = 
-module.PartialRibbons = Feature({
-	tag: 'ui-partial-ribbons',
-
-	// number of screen widths to load...
-	size: 5,
-
-	// number of screen widths to edge to trigger reload...
-	threshold: 1,
-
-	setup: function(actions){
-		var feature = this
-
-		var updateRibbon = function(target, w){
 			target = target instanceof jQuery 
 				? this.ribbons.getElemGID(target)
 				: this.data.getImage(target)
 
 			w = w || this.screenwidth
 
-			var s = feature.size * w
+			size = size 
-			var t = feature.threshold * w
+				|| this.config['ribbon-size-screens'] 
+				|| 5
+			threshold = threshold 
+				|| this.config['ribbon-resize-threshold'] 
+				|| 1
+
+			var s = size * w
+			var t = threshold * w
 
 			// next/prev loaded... 
 			var nl = this.ribbons.getImage(target).nextAll('.image').length
@@ -964,23 +955,53 @@ module.PartialRibbons = Feature({
 						.restoreTransitions(r, true)
 				}
 			}
-		}
+		}]
+})
+
+
+// XXX I do not fully understand it yet, but PartialRibbons must be 
+// 		setup BEFORE RibbonAlignToFirst, otherwise the later will break
+// 		on shifting an image to a new ribbon...
+// 			To reproduce:
+// 				- setupe RibbonAlignToFirst first
+// 				- go to top ribbon
+// 				- shift image up
+// 		The two should be completely independent....
+// XXX need to test and tweak with actual images...
+var PartialRibbons = 
+module.PartialRibbons = Feature({
+	tag: 'ui-partial-ribbons',
+
+	// number of screen widths to load...
+	size: 5,
+
+	// number of screen widths to edge to trigger reload...
+	threshold: 1,
+
+	setup: function(actions){
+		var feature = this
+
+		actions.mixin(PartialRibbonsActions)
 
 		return actions
 			.on('focusImage.pre centerImage.pre', this.tag, function(target){
-				return updateRibbon.call(this, target)
+				this.updateRibbonSize(target)
 			})
 			.on('fitImage.pre', this.tag, function(n){
-				return updateRibbon.call(this, 'current', n || 1)
+				this.updateRibbonSize('current', n || 1)
 			})
 	},
+	remove: function(actions){
+		actions.mixout(PartialRibbonsActions)
+		return actions.off('*', this.tag)
+	},
 })
 
 
-// XXX need a better name...
+// XXX this should also define up/down navigation behavior e.g. what to 
-// XXX this should also define up/down navigation behavior...
+// 		focus on next/prev ribbon...
-var RibbonAlignToOrder = 
+var AlignRibbonsToImageOrder = 
-module.RibbonAlignToOrder = Feature({
+module.AlignRibbonsToImageOrder = Feature({
 	tag: 'ui-ribbon-align-to-order',
 
 	setup: function(actions){
@@ -995,9 +1016,8 @@ module.RibbonAlignToOrder = Feature({
 })
 
 
-// XXX need a better name...
+var AlignRibbonsToFirstImage = 
-var RibbonAlignToFirst = 
+module.AlignRibbonsToFirstImage = Feature({
-module.RibbonAlignToFirst = Feature({
 	tag: 'ui-ribbon-align-to-first',
 
 	setup: function(actions){
@@ -1037,20 +1057,6 @@ module.ShiftAnimation = Feature({
 })
 
 
-// XXX
-var CurrentIndicator = 
-module.CurrentIndicator = Feature({
-	tag: 'ui-current-indicator',
-
-	setup: function(actions){
-	},
-	remove: function(actions){
-		actions.viewer.find('.' + this.tag).remove()
-		return actions.off('*', this.tag)
-	},
-})
-
-
 // XXX should we keep actions in a closure (like it is done here) or get
 // 		them live as in PartialRibbons???
 var BoundsIndicators = 
@@ -1141,6 +1147,130 @@ module.BoundsIndicators = Feature({
 })
 
 
+var CurrentImageIndicator = 
+module.CurrentImageIndicator = Feature({
+	tag: 'ui-current-image-indicator',
+
+	border: 3,
+	min_border: 2,
+
+	border_timeout: 200,
+
+	updateMarker: function(actions, target, update_border){
+		var scale = actions.ribbons.getScale()
+		var cur = actions.ribbons.getImage(target)
+		var ribbon = actions.ribbons.getRibbon()
+		var ribbon_set = actions.ribbons.viewer.find('.ribbon-set')
+
+		var marker = ribbon.find('.current-marker')
+
+		// no marker found...
+		if(marker.length == 0){
+			// get marker globally...
+			marker = actions.ribbons.viewer.find('.current-marker')
+
+			// create a marker...
+			if(marker.length == 0){
+				var marker = $('<div/>')
+					.addClass('current-marker ' + this.tag)
+					.css({
+						opacity: '0',
+						top: '0px',
+						left: '0px',
+					})
+					.appendTo(ribbon)
+					.animate({
+						'opacity': 1
+					}, 500)
+
+			// add marker to current ribbon...
+			} else {
+				marker.appendTo(ribbon)
+			}
+		}
+
+		var w = cur.outerWidth(true)
+		var h = cur.outerHeight(true)
+
+		var border = Math.max(this.min_border, this.border / scale)
+
+		// set border right away...
+		if(update_border == 'before'){
+			marker.css({ borderWidth: border }) 
+
+		// set border with a delay...
+		} else {
+			setTimeout(function(){ 
+				marker.css({ borderWidth: border }) 
+			}, this.border_timeout)
+		}
+
+		return marker.css({
+			left: cur[0].offsetLeft,
+
+			// keep size same as the image...
+			width: w,
+			height: h,
+		})
+	},
+
+	setup: function(actions){
+		var that = this
+		return actions
+			.on( 'focusImage.post', this.tag, 
+					function(target){ that.updateMarker(this, target) })
+			// Change border size in the appropriate spot in the animation:
+			// 	- before animation when scaling up
+			// 	- after when scaling down
+			// This is done to make the visuals consistent...
+			.on( 'fitImage.pre', this.tag, function(w1){ 
+				var w0 = this.screenwidth
+				w1 = w1 || 1
+				return function(){
+					that.updateMarker(this, null, w0 > w1 ? 'before' : 'after') 
+				}
+			})
+	},
+	remove: function(actions){
+		actions.viewer.find('.' + this.tag).remove()
+		return actions.off('*', this.tag)
+	},
+})
+
+
+// XXX
+var ImageStateIndicator = 
+module.ImageStateIndicator = Feature({
+	tag: 'ui-image-state-indicator',
+
+	setup: function(actions){
+	},
+	remove: function(actions){
+		actions.viewer.find('.' + this.tag).remove()
+		return actions.off('*', this.tag)
+	},
+})
+
+
+
+// XXX
+var GlobalStateIndicator = 
+module.GlobalStateIndicator = Feature({
+	tag: 'ui-global-state-indicator',
+
+	setup: function(actions){
+	},
+	remove: function(actions){
+		actions.viewer.find('.' + this.tag).remove()
+		return actions.off('*', this.tag)
+	},
+})
+
+
+// XXX console / log / status bar
+
+
+
 
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */