new ribbon architecture working, still not done migrating...

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

ui (gen4)/css/experimenting.css

@@ -63,6 +63,13 @@ body {
 	-o-transition: all 0.1s linear, transform 0.1s linear;
 	transition: all 0.1s linear, transform 0.1s linear;
 }
+.viewer:not(.no-transitions) .ribbon-locator:not(.no-transitions) {
+	-webkit-transition: all 0.1s linear, transform 0.1s linear;
+	-moz-transition: all 0.1s linear, transform 0.1s linear;
+	-ms-transition: all 0.1s linear, transform 0.1s linear;
+	-o-transition: all 0.1s linear, transform 0.1s linear;
+	transition: all 0.1s linear, transform 0.1s linear;
+}
 
 .viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
 	-webkit-transition: all 0.1s ease-out;

ui (gen4)/css/layout.less

@@ -522,69 +522,25 @@ button:hover {
 }
 
 
-/****************************************************** Ribbon set ***/
+/****************************************** Ribbon set and locator ***/
 .ribbon-set {
 	position: absolute;
 	display: block;
 
+	top: 50%;
+	left: 50%;
+
 	/* NOTE: this needs for scaling/zooming to behave correctly and not 
 		shift the element, when its dimensions change... 
 		...this is because .ribbon-set will both be used for scaling 
 		and aligning... */
 	.origin(top, left);
 }
+.ribbon-locator {
+	position: relative;
 
-/* empty ribbon set... */
+	top: 0;
-.ribbon-set:empty {
+	left: 0;
-	width: 100% !important;
-	height: 100% !important;
-
-	// place at top left corner...
-	top: 0px !important;
-	left: 0px !important;
-
-	-webkit-transform: none !important;
-	-moz-transform: none !important;
-	-o-transform: none !important;
-	-ms-transform: none !important;
-	transform: none !important;
-}
-.viewer:empty:before,
-.viewer:empty:after,
-.ribbon-set:empty:before,
-.ribbon-set:empty:after {
-	display: block;
-	position: absolute;
-
-	//content: "Nothing loaded...";
-	content: attr(empty-msg);
-
-	top: 50%;
-	left: 0px;
-	width: 100%;
-	height: 20px;
-	margin-top: -20px;
-
-	text-align: center;
-	vertical-align: middle;
-
-	font-size: 18px;
-	font-weight: bold;
-	color: silver;
-	opacity: 0.9;
-
-	cursor: pointer;
-}
-.viewer:empty:after,
-.ribbon-set:empty:after {
-
-	//content: "Press 'O' to load, 'F1' for help or '?' for keyboard mappings.";
-	content: attr(empty-help);
-
-	margin-top: 5px;
-	font-weight: normal;
-	font-size: 16px;
-	opacity: 0.5;
 }
 
 
@@ -617,10 +573,10 @@ stretching in width... */
 	display: none;
 }
 .ribbon:first-child {
-	margin-top: 0px;
+	margin-top: 0;
 }
 .ribbon:last-child {
-	margin-bottom: 0px;
+	margin-bottom: 0;
 }
 
 .base-ribbon-marker {

ui (gen4)/experiments/centering-and-alignment.html

@@ -49,7 +49,7 @@
 
 	transition: transform 0.1s linear;
 }
-.ribbon-mover {
+.ribbon-locator {
 	position: relative;
 
 	top: 0px;
@@ -150,8 +150,8 @@ $(function(){
 
 			var image = $(this)
 			var ribbon = image.parents('.ribbon').first()
-			var ribbon_mover = ribbon.parents('.ribbon-mover').first()
+			var ribbon_locator = ribbon.parents('.ribbon-locator').first()
-			var ribbon_set = ribbon_mover.parents('.ribbon-set').first()
+			var ribbon_set = ribbon_locator.parents('.ribbon-set').first()
 			
 			image
 				.addClass('current')
@@ -160,15 +160,21 @@ $(function(){
 			var angle = ribbon_set.attr('angle') || 0
 
 			var l = image[0].offsetLeft
-			var t = ribbon[0].offsetTop
 			var w = image[0].offsetWidth
+
+			var t = ribbon[0].offsetTop
 			var h = ribbon[0].offsetHeight
 
+			// centering image...
 			ribbon.css('transform', 'translateX(-'+ (l + w/2) +'px)')
+
+			// view angle and scale...
 			ribbon_set.css('transform', 
 					'scale('+ scale +') '
 					+'rotate('+ angle +'deg)')
-			ribbon_mover.css('transform', 'translateY(-'+ (t + h/2) +'px)')
+
+			// centering ribbons...
+			ribbon_locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
 		})
 
 
@@ -279,7 +285,7 @@ $(function(){
 
 <div class="viewer">
 	<div class="ribbon-set">
-		<div class="ribbon-mover">
+		<div class="ribbon-locator">
 			<div class="ribbon">
 				<div class="image"></div>
 				<div class="image"></div>

ui (gen4)/features/ui.js

@@ -547,8 +547,6 @@ module.ViewerActions = actions.Actions({
 			this
 				.centerImage(target)
 				.centerRibbon(target)
-				.ribbons
-					.origin(target)
 		}],
 
 	focusImage: [
@@ -769,8 +767,6 @@ module.ViewerActions = actions.Actions({
 	// and rounding to nearest discrete number of images to fit on screen.
 	zoomIn: ['Zoom/Zoom in',
 		function(){ 
-			this.ribbons.origin()
-
 			var d = (this.config['zoom-step'] || 1.2)
 
 			// limit scaling to screen dimensions...
@@ -784,8 +780,6 @@ module.ViewerActions = actions.Actions({
 		}],
 	zoomOut: ['Zoom/Zoom out',
 		function(){ 
-			this.ribbons.origin()
-
 			var max = this.config['max-screen-images']
 
 			if(max && max < (this.screenwidth * (this.config['zoom-step'] || 1.2))){

ui (gen4)/imagegrid/ribbons.js

@@ -493,146 +493,27 @@ var RibbonsPrototype = {
 	//
 	// 	Set scale...
 	// 	.scale(<scale>)
-	// 	.scale(<scale>, <image>|'current'|'closest')
-	// 	.scale(<scale>, 'top'|'center'|'bottom'|<px>|%, 'left'|'center'|'right'|<px>|%)
 	// 		-> <ribbons>
 	//
 	// NOTE: this will also set origin...
 	//
 	// XXX if chrome 38 renders images blurry uncomment the fix...
-	scale: function(scale, t, l){
+	scale: function(scale){
 		// get...
 		if(arguments.length == 0){
 			return this.dom.getScale(this.getRibbonSet()) || 1
+		}
 
 		// set...
-		} else {
+		var ribbon_set = this.getRibbonSet()  
-			var ribbon_set = this.getRibbonSet()  
-
-			if(ribbon_set.length == 0){
-				return this
-			}
-
-			// default origin -- center...
-			if(t == null && l == null){
-				this.origin('center', 'center')
-
-			// an image...
-			} else if(l == null){
-				t = t == 'current' ? this.getImage()
-					: t == 'closest' ? this.getImageByPosition()
-					: t
-				this.origin(t)
-
-			// explicit...
-			} else {
-				this.origin(t, l)
-			}
-
-			// XXX experimental: not sure if this is the right place for this...
-			// 		...think this is a good place because its one spot 
-			// 		that gets used everywhere...
-			// 		...think this is a bad spot because we lose control ho many
-			// 		images of what size get loaded, and wee need to minimize 
-			// 		loading...
-			//this.updateImage('*', null, this.getVisibleImageSize('height', 1) * scale)
-
-			this.dom.setScale(ribbon_set, scale)
-
-
-			/*
-			ribbon_set
-				.velocity('stop')
-				// XXX get the time from config...
-				.velocity({scale: scale}, 200)
-			*/
-
-			/* XXX not sure if this is needed yet...
-			// XXX fix a render bug in chrome 38...
-			var v = this.viewer[0]
-			if(v.style.transform == ''){
-				v.style.transform = 'translateZ(0)'
-			} else {
-				v.style.transform = ''
-			}
-			*/
 
+		if(ribbon_set.length == 0){
 			return this
 		}
-	},
 
-	// Origin...
+		this.dom.setScale(ribbon_set, scale)
-	//
-	// 	Get origin...
-	// 	.origin()
-	// 		-> <origin>
-	//
-	//	Set origin to center of image:
-	//	.origin(image)
-	//		-> ribbons
-	//
-	//	Set origin to screen coordinates:
-	//	.origin(x|%|'left'|'center'|'right', x|%|'top'|'center'|'bottom')
-	//		-> ribbons
-	//
-	// NOTE: this will also compensate for scaling.
-	//
-	// XXX DEBUG: remove point updating when not needed...
-	origin: function(a, b){
-		// get...
-		if(arguments.length == 0){
-			return this.dom.getOrigin(this.getRibbonSet())
 
-		// set...
+		return this
-		} else {
-			var ribbon_set = this.getRibbonSet()
-
-			if(ribbon_set.length == 0){
-				return this
-			}
-
-			var ro = ribbon_set.offset()
-			var s = this.scale()
-
-			if(a != null && b != null){
-				var vo = this.viewer.offset()
-
-				a = a == 'left' ? 0
-					: a == 'right' ? this.viewer.width()
-					: a == 'center' ? this.viewer.width()/2
-					: /[0-9.]*%/.test(a) ? this.viewer.width()*(parseFloat(a)/100)
-					: a
-
-				b = b == 'top' ? 0
-					: b == 'bottom' ? this.viewer.height()
-					: b == 'center' ? this.viewer.height()/2
-					: /[0-9.]*%/.test(b) ? this.viewer.height()*(parseFloat(b)/100)
-					: b
-
-				var l = (a - ro.left)/s + vo.left
-				var t = (b - ro.top)/s + vo.top
-
-			// image...
-			} else {
-				var img = this.getImage(a)
-				var io = img.offset()
-				// XXX jQuery3: should we compensate for scale here???
-				var w = img.width()
-				var h = img.height()
-
-				var l = (io.left - ro.left)/s + w/2
-				var t = (io.top - ro.top)/s + h/2
-			}
-
-			this.dom.shiftOrigin(ribbon_set, l, t)
-
-			// XXX DEBUG: remove when done...
-			if($('.point').length > 0){
-				this.dom.setOffset($('.point'), l, t)
-			}
-
-			return this
-		}
 	},
 	
 	// Get visible image tile size...
@@ -868,10 +749,16 @@ var RibbonsPrototype = {
 		if(ribbon_set.length == 0 && create){
 			ribbon_set = $('<div/>')
 				.addClass('ribbon-set')
+				.append($('<div/>')
+					.addClass('ribbon-locator'))
 				.appendTo(this.viewer)
 		}
 		return ribbon_set
 	},
+	getRibbonLocator: function(create){
+		return this.getRibbonSet(create)
+			.find('.ribbon-locator')
+	},
 
 	// Get image...
 	//
@@ -1196,7 +1083,7 @@ var RibbonsPrototype = {
 		var ribbon = this.getRibbon(target)
 		var i = this.getRibbonOrder(ribbon)
 		ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon
-		var ribbon_set = this.getRibbonSet(true) 
+		var ribbon_set = this.getRibbonLocator(true) 
 
 		var ribbons = this.viewer.find(RIBBON)
 
@@ -2299,83 +2186,46 @@ var RibbonsPrototype = {
 
 	// center a ribbon vertically...
 	// 
-	// XXX offset and scale are not used...
 	// XXX custom align point woud also be nice... 
 	// 		(top, bottom, center, %, px)
-	// XXX need to account for margins...
+	centerRibbon: function(target){
-	centerRibbon: function(target, offset, scale){
+		var ribbon = this.getRibbon(target)
-		target = this.getImage(target)
+		var locator = this.getRibbonLocator() 
-		scale = scale || this.scale()
-		var ribbon_set = this.getRibbonSet() 
 
-		if(ribbon_set.length == 0 || target.length == 0){
+		if(locator.length == 0 || ribbon.length == 0){
 			return this
 		}
 
-		//this.origin(target)
+		var t = ribbon[0].offsetTop
+		var h = ribbon[0].offsetHeight
 
-		var o = target.attr('orientation')
+		//locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
-		o = o == null ? 0 : o
+		locator.transform({x: 0, y: -(t + h/2), z: 0}) 
-
-		var ro = ribbon_set.offset().top
-		// NOTE: this appears to account for margins...
-		var io = target.offset().top 
-
-		// NOTE: we are not using .outerHeight(true) here as it returns 
-		// 		the visible size rather than the real size, so we'll 
-		// 		need to first divide by current scale and then multiply
-		// 		by the given scale which will introduce errors...
-		var s = getComputedStyle(target[0])
-		var h = parseFloat(o == 0 || o == 180 ? s.height : s.width) 
-
-		var t = (io - ro)/scale + h/2
-
-		var offset = this.dom.relativeOffset(this.viewer, ribbon_set, {
-			top: t,
-			left: 0,
-		}).top
-		
-		this.dom.setOffset(ribbon_set, 0, offset)
 
 		return this
 	},
 
 	// center an image horizontally...
 	// 
-	// XXX offset is not used...
 	// XXX custom align point would also be nice... 
 	// 		(top, bottom, center, %, px)
-	// XXX need to account for margins...
+	centerImage: function(target, mode){
-	centerImage: function(target, mode, offset, scale){
 		target = this.getImage(target)
-		scale = scale || this.scale()
 		var ribbon = this.getRibbon(target)
 
 		if(ribbon.length == 0){
 			return this
 		}
 
-		var o = target.attr('orientation')
+		var l = target[0].offsetLeft
-		o = o == null ? 0 : o
+		var w = target[0].offsetWidth
 
-		var rl = ribbon.offset().left
+		var image_offset = mode == 'before' ? 0
-		// NOTE: this appears to account for margins...
+			: mode == 'after' ? w
-		var il = target.offset().left 
+			: w/2
 
-		var W = this.viewer.width() * scale
+		//ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)')
-
+		ribbon.transform({x: -(l + image_offset), y: 0, z: 0}) 
-		// NOTE: we are not using .outerWidth(true) here as it returns 
-		// 		the visible size rather than the real size, so we'll 
-		// 		need to first divide by current scale and then multiply
-		// 		by the given scale which will introduce errors...
-		var s = getComputedStyle(target[0])
-		var w = parseFloat(o == 0 || o == 180 ? s.width : s.height) * scale
-
-		var image_offset = mode == 'before' ? w/2
-			: mode == 'after' ? -w/2
-			: 0
-
-		this.dom.setOffset(ribbon, ((rl + ((W-w)/2 + image_offset) - il) / scale))
 
 		return this
 	},
@@ -2384,7 +2234,7 @@ var RibbonsPrototype = {
 	//
 	// If n is given this will fit n images (default: 1)
 	//
-	// NOTE: this will never scale the view in a wat that an image 
+	// NOTE: this will never scale the view in a way that an image 
 	// 		overflows either in height nor width.
 	//
 	// XXX might be useful to set origin before scaling...
@@ -2442,6 +2292,7 @@ var RibbonsPrototype = {
 	},
 
 
+	// XXX
 	setEmptyMsg: function(msg, help){
 		this.getRibbonSet()
 			.attr({