added image separators in ribbons + some refactoring...

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

ui (gen4)/css/layout.less

@@ -791,6 +791,25 @@ stretching in width... */
 }
 
 
+
+/* image separators... */
+.ribbon-image-separators.viewer .image {
+	box-shadow: 
+		9px 4px 0 -8px rgba(128,128,128,0.2), 
+		-9px 4px 0 -8px rgba(128,128,128,0.2);
+}
+.ribbon-image-separators.viewer .image[orientation="90"],
+.ribbon-image-separators.viewer .image[orientation="270"] {
+	box-shadow: 
+		4px 9px 0 -8px rgba(128,128,128,0.2), 
+		4px -9px 0 -8px rgba(128,128,128,0.2);
+}
+.ribbon-image-separators.single-image-mode.viewer .image {
+	box-shadow: none;
+}
+
+
+
 /* default backgrounds */
 /* XXX not sure if we need these... 
 .image {

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

@@ -175,7 +175,7 @@ var CurrentImageIndicatorActions = actions.Actions({
 
 			var cur = this.ribbons.getImage(target)
 			// NOTE: cur may be unloaded...
-			var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.currentRibbon)
+			var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon)
 
 			var marker = ribbon.find('.current-marker')
 
@@ -310,12 +310,20 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 			function(target, s){
 				var m = this.ribbons.viewer.find('.current-marker')
 				var c = this.current
-				var r = this.currentRibbon
+				var r = this.current_ribbon
 
 				// only update if marker exists and we are in current ribbon...
 				if(m.length != 0
-						&& (target == c 
+						// XXX not sure if target handling here is the 
+						// 		right way to go -- we manually check things
+						// 		when .data.getImage(..) nad friends to this
+						// 		better and in one spot...
+						// 		...the down side is that they are slower...
+						&& (target == 'current' 
+							|| target == c
 							|| target == r 
+							// XXX this seems to be slow enough to push 
+							// 		the frame-rate down...
 							|| this.data.getRibbon(target) == r
 							|| target == null)){
 					m.hide()

ui (gen4)/features/ui.js

@@ -176,6 +176,8 @@ module.ViewerActions = actions.Actions({
 			'transparent-ribbon',
 		],
 
+		'ribbon-image-separators': 'on',
+
 		'ribbon-rotation-step': 10,
 
 		// XXX BUG: for some reason this get's shadowed by base.config...
@@ -404,6 +406,11 @@ module.ViewerActions = actions.Actions({
 			function(){ return this.ribbons.viewer }, 
 			function(){ return this.config['ribbon-themes'] },
 			function(state){ this.config['ribbon-theme'] = state }) ],
+	toggleRibbonImageSepators: ['Interface/Theme/Toggle ribbon image separators', 
+		toggler.CSSClassToggler(
+			function(){ return this.ribbons.viewer }, 
+			'ribbon-image-separators',
+			function(state){ this.config['ribbon-image-separators'] = state }) ],
 
 
 	/*
@@ -1003,6 +1010,8 @@ module.Viewer = core.ImageGridFeatures.Feature({
 					&& this.toggleTheme(this.config.theme)
 				this.config['ribbon-theme'] 
 					&& this.toggleRibbonTheme(this.config['ribbon-theme'])
+				this.config['ribbon-image-separators'] 
+					&& this.toggleRibbonImageSepators(this.config['ribbon-image-separators'])
 
 				// center viewer on resize events...
 				if(!this.__viewer_resize){

ui (gen4)/imagegrid/ribbons.js

@@ -576,40 +576,57 @@ var RibbonsPrototype = {
 	//
 	// XXX this might break when no images are loaded and proportions 
 	// 		are not square...
-	getVisibleImageSize: function(dim, scale, img){
+	getVisibleImageSize: function(dim, scale, img, force){
 		dim = dim == null ? 'width' : dim
 		img = img || this.viewer.find(IMAGE)
 
-		// if no images are loaded create one temporarily....
 		var tmp
-		if(img.length == 0){
-			img = tmp = this.createImage('__tmp_image__')
-				.css({
-					position: 'absolute',
-					visibility: 'hidden',
-					top: '-200%',
-					left: '-200%',
-				})
-				.appendTo(this.viewer)
-		}
 
-		// account for image rotation...
+// 		// XXX size cache -- not sure if this needs to be cached...
-		// NOTE: this way we do not need to account for margins...
+//		var res = (this.__visible_image_size_cache || {})[dim]
-		var o = img.attr('orientation')
+//
-		o = o == null ? 0 : o
+//		if(this.__visible_image_size_cache == false 
-		dim = o == 0 || o == 180 ? dim 
+//				|| img.length > 0 
-			// swap width/height when image is rotated +/- 90deg...
+//				|| force 
-			: dim == 'height' ? 'width' 
+//				|| res == null){
-			: 'height'
+
+			// if no images are loaded create one temporarily....
+			if(img.length == 0){
+				img = tmp = this.createImage('__tmp_image__')
+					.css({
+						position: 'absolute',
+						visibility: 'hidden',
+						top: '-200%',
+						left: '-200%',
+					})
+					.appendTo(this.viewer)
+			}
+
+			// account for image rotation...
+			// NOTE: this way we do not need to account for margins...
+			var o = img.attr('orientation')
+			o = o == null ? 0 : o
+			dim = o == 0 || o == 180 ? dim 
+				// swap width/height when image is rotated +/- 90deg...
+				: dim == 'height' ? 'width' 
+				: 'height'
+
+			// do the calc...
+			scale = scale || this.scale()
+			var css = getComputedStyle(img[0])
+			var res = dim == 'height' ? parseFloat(css.height)
+				: dim == 'width' ? parseFloat(css.width)
+				: dim == 'max' ?  Math.max(parseFloat(css.height), parseFloat(css.width))
+				: dim == 'min' ?  Math.min(parseFloat(css.height), parseFloat(css.width))
+				: null
+
+// 			// XXX size cache -- not sure if this needs to be cached...
+//			if(this.__visible_image_size_cache != false){
+//				var cache = this.__visible_image_size_cache = this.__visible_image_size_cache || {}
+//				cache[dim] = res
+//			}
+//		}
 
-		// do the calc...
-		scale = scale || this.scale()
-		var css = getComputedStyle(img[0])
-		var res = dim == 'height' ? parseFloat(css.height)
-			: dim == 'width' ? parseFloat(css.width)
-			: dim == 'max' ?  Math.max(parseFloat(css.height), parseFloat(css.width))
-			: dim == 'min' ?  Math.min(parseFloat(css.height), parseFloat(css.width))
-			: null
 		// get size for given scale...
 		res = res ? res * scale : res
 
@@ -1385,7 +1402,7 @@ var RibbonsPrototype = {
 					})
 			}
 
-			// if not images data defined drop out...
+			// if no images data defined drop out...
 			if(that.images == null){
 				return image[0]
 			}
@@ -1447,7 +1464,11 @@ var RibbonsPrototype = {
 			}
 
 			// NOTE: this only has effect on non-square image blocks...
-			// XXX this needs the loaded image, thus should be done right after preview loading...
+			// XXX this needs the loaded image, thus should be done right
+			// 		after preview loading...
+			// XXX preview loading is async, is this the right 
+			// 		place for this??
+			// 		...this is also done in .rotateImage(..) above...
 			that.correctImageProportionsForRotation(image)
 
 			// marks and other indicators...
@@ -1548,6 +1569,7 @@ var RibbonsPrototype = {
 		$(unload_marks)
 			.remove()
 
+		var images = []
 		$(gids).each(function(i, gid){
 			// support for sparse ribbons...
 			if(gid == null){
@@ -1590,9 +1612,12 @@ var RibbonsPrototype = {
 				}
 			}
 
-			that.updateImage(img)
+			images.push(img[0])
 		})
 
+		// XXX this appears to be the bottleneck on large numbers of images...
+		this.updateImage($(images))
+
 		if(place){
 			this.placeRibbon(r, this.viewer.find(RIBBON).length)
 		}
@@ -2199,6 +2224,8 @@ var RibbonsPrototype = {
 	//
 	// NOTE: this is not needed for square image blocks.
 	// NOTE: if an image block is square, this will remove the margins.
+	//
+	// XXX this does the same job as features/ui-single-image.js' .updateImageProportions(..)
 	correctImageProportionsForRotation: function(images){
 		// XXX
 		var W = this.viewer.innerWidth()