...

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

ui (gen4)/features/meta.js

@@ -71,6 +71,9 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	// XXX
 	//'ui-blank-render',
+	// XXX BUG: features: this pulls in all the suggestions that depend
+	// 		regardless of weather they depend on it or not:
+	// 			'ui-partial-ribbons'
 	'ui-ribbons-render',
 	'ui-partial-ribbons-render',
 	'ui-vdom-render',
@@ -81,6 +84,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'ui-cursor',
 
 	'ui-single-image',
+
+	// XXX remove this... (at this point this is here only to keep load order consistent)
 	'ui-partial-ribbons',
 	/*/ XXX has bugs -- non-current ribbons are not always aligned...
 	'ui-partial-ribbons-2',

ui (gen4)/features/ui-blank-render.js

@@ -16,14 +16,17 @@ var core = require('features/core')
 var ribbons = require('imagegrid/ribbons')
 
 
+
 /*********************************************************************/
 
 var RibbonsClassPrototype = {
+	// XXX
 }
 RibbonsClassPrototype.__proto__ = ribbons.BaseRibbons.prototype.__proto__
 
 
 var RibbonsPrototype = {
+	// XXX
 }
 RibbonsPrototype.__proto__ = ribbons.BaseRibbons.prototype
 
@@ -37,11 +40,35 @@ object.makeConstructor('Ribbons',
 
 
 /*********************************************************************/
+// XXX things that do not yet work with this:
+// 		.nextRibbon(..) / .prevRibbon(..)
+// 		
 
 var RenderActions = actions.Actions({
+	get dom(){
+		return this.ribbons ? this.ribbons.viewer : undefined },
+
 	load: [
 		function(data){
+			return function(){
 				// XXX setup .ribbons
+				var viewer = data.viewer
+				viewer = viewer == null && this.ribbons != null 
+					? this.dom 
+					: viewer
+
+				if(this.ribbons == null){
+					this.ribbons = Ribbons(viewer, this.images)
+					// XXX is this correct???
+					//this.ribbons.__image_updaters = [this.updateImage.bind(this)]
+
+				} else {
+					//this.ribbons.clear()
+					this.ribbons.images = this.images
+				}
+
+				this.reload()
+			}
 		}],
 	reload: [
 		function(){
@@ -103,6 +130,8 @@ var RenderActions = actions.Actions({
 			}, 'screenheight', count, whole)
 		}],
 
+	// XXX do we need updateImage here???
+
 	centerImage: ['- Interface/Center an image in ribbon horizontally',
 		function(target, align, offset, scale){ 
 			// XXX

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

@@ -440,11 +440,14 @@ core.ImageGridFeatures.Feature({
 	tag: 'ui-ribbons-render',
 	exclusive: ['ui-render'],
 	depends: [
+		// XXX BUG: for some reason this causes a dependency conflict...
+		//'ui',
 		'base',
 	],
 	suggested: [
 		'ui-animation',
 		'ui-ribbons-edit-render',
+		'ui-partial-ribbons',
 	],
 
 	actions: RibbonsActions, 
@@ -697,7 +700,8 @@ core.ImageGridFeatures.Feature({
 	tag: 'ui-partial-ribbons',
 	exclusive: ['ui-partial-ribbons'],
 	depends: [
-		'ui'
+		//'ui',
+		'ui-ribbons-render',
 	],
 	suggested: [
 		'ui-partial-ribbons-precache',

ui (gen4)/imagegrid/ribbons.js

@@ -173,6 +173,151 @@ var BaseRibbonsPrototype = {
 		}
 	},
 
+	// Helpers...
+
+	// Prevent CSS transitions...
+	//
+	// 	Prevent transitions globally (.viewer):
+	// 	.preventTransitions()
+	// 		-> data
+	//
+	// 	Prevent transitions on elem:
+	// 	.preventTransitions(elem)
+	// 		-> data
+	//
+	//
+	// NOTE: this will set a .no-transitions CSS class and force 
+	// 		recalculation on the given element
+	// NOTE: for this to have effect proper CSS configuration is needed.
+	preventTransitions: function(target){
+		target = target || this.viewer
+		//prevent_nested = prevent_nested || false
+		if(target.length == 0){
+			return this
+		}
+		var t = target[0]
+
+		// handle nesting...
+		var l = t.getAttribute('__prevent_transitions')
+		if(l != null){
+			t.setAttribute('__prevent_transitions', parseInt(l)+1)
+			return this
+		}
+		t.setAttribute('__prevent_transitions', 0)
+
+		target.addClass('no-transitions')
+
+		var s = getComputedStyle(t)
+		s.webkitTransition
+		s.mozTransition
+		s.msTransition
+		s.oTransition
+		s.transition
+
+		return this
+	},
+
+	// Restore CSS transitions...
+	//
+	// This is a companion to .preventTransitions(..)
+	//
+	// 	Restore transitions globally (.viewer):
+	// 	.restoreTransitions()
+	// 		-> data
+	//
+	// 	Restore transitions on elem: 
+	// 	.restoreTransitions(elem)
+	// 		-> data
+	//
+	// 	Restore transitions on elem (force sync): 
+	// 	.restoreTransitions(elem, true)
+	// 		-> data
+	//
+	// 	Force restore transitions: 
+	// 	.restoreTransitions(.., .., true)
+	// 		-> data
+	//
+	// When at least one .preventTransitions(..) is called with 
+	// prevent_nested set to true, this will be a no-op on all nested
+	// levels.
+	// This can be overridden via setting the force to true.
+	//
+	// NOTE: the implementation of this method might seem ugly, but the 
+	// 		code is speed-critical, thus we access the DOM directly and
+	// 		the two branches are unrolled...
+	restoreTransitions: function(target, now, force){
+		if(target === true || target === false){
+			now = target
+			target = this.viewer
+		} else {
+			target = target || this.viewer
+		}
+		if(target.length == 0){
+			return this
+		}
+		var t = target[0]
+
+		// sync...
+		if(now){
+			// handle nesting...
+			var l = t.getAttribute('__prevent_transitions')
+			if(l != null && !force && l != '0'){
+				t.setAttribute('__prevent_transitions', parseInt(l)-1)
+				return this
+			}
+			t.removeAttribute('__prevent_transitions')
+
+			target.removeClass('no-transitions')
+
+			var s = getComputedStyle(t)
+			s.webkitTransition
+			s.mozTransition
+			s.msTransition
+			s.oTransition
+			s.transition
+
+		// on next exec frame...
+		} else {
+			var that = this
+			setTimeout(function(){
+				// handle nesting...
+				var l = t.getAttribute('__prevent_transitions')
+				if(l != null && !force && l != '0'){
+					t.setAttribute('__prevent_transitions', l-1)
+					return this
+				}
+				t.removeAttribute('__prevent_transitions')
+
+				target.removeClass('no-transitions')
+
+				var s = getComputedStyle(t)
+				s.webkitTransition
+				s.mozTransition
+				s.msTransition
+				s.oTransition
+				s.transition
+			}, 0)
+		}
+
+		return this
+	},
+
+	// Shorthand wrappers of the above...
+	//
+	// XXX do we need custom target support here???
+	noTransitions: function(func){
+		this.preventTransitions()
+		func.apply(this, args2array(arguments).slice(1))
+		this.restoreTransitions(true)
+		return this
+	},
+	noTransitionsDeep: function(func){
+		this.preventTransitions(null, true)
+		func.apply(this, args2array(arguments).slice(1))
+		this.restoreTransitions(true)
+		return this
+	},
+
 
 	// Scale...
 	//
@@ -863,151 +1008,6 @@ var RibbonsPrototype = {
 	createImage: RibbonsClassPrototype.createImage,
 	createMark: RibbonsClassPrototype.createMark,
 
-	// Helpers...
-
-	// Prevent CSS transitions...
-	//
-	// 	Prevent transitions globally (.viewer):
-	// 	.preventTransitions()
-	// 		-> data
-	//
-	// 	Prevent transitions on elem:
-	// 	.preventTransitions(elem)
-	// 		-> data
-	//
-	//
-	// NOTE: this will set a .no-transitions CSS class and force 
-	// 		recalculation on the given element
-	// NOTE: for this to have effect proper CSS configuration is needed.
-	preventTransitions: function(target){
-		target = target || this.viewer
-		//prevent_nested = prevent_nested || false
-		if(target.length == 0){
-			return this
-		}
-		var t = target[0]
-
-		// handle nesting...
-		var l = t.getAttribute('__prevent_transitions')
-		if(l != null){
-			t.setAttribute('__prevent_transitions', parseInt(l)+1)
-			return this
-		}
-		t.setAttribute('__prevent_transitions', 0)
-
-		target.addClass('no-transitions')
-
-		var s = getComputedStyle(t)
-		s.webkitTransition
-		s.mozTransition
-		s.msTransition
-		s.oTransition
-		s.transition
-
-		return this
-	},
-
-	// Restore CSS transitions...
-	//
-	// This is a companion to .preventTransitions(..)
-	//
-	// 	Restore transitions globally (.viewer):
-	// 	.restoreTransitions()
-	// 		-> data
-	//
-	// 	Restore transitions on elem: 
-	// 	.restoreTransitions(elem)
-	// 		-> data
-	//
-	// 	Restore transitions on elem (force sync): 
-	// 	.restoreTransitions(elem, true)
-	// 		-> data
-	//
-	// 	Force restore transitions: 
-	// 	.restoreTransitions(.., .., true)
-	// 		-> data
-	//
-	// When at least one .preventTransitions(..) is called with 
-	// prevent_nested set to true, this will be a no-op on all nested
-	// levels.
-	// This can be overridden via setting the force to true.
-	//
-	// NOTE: the implementation of this method might seem ugly, but the 
-	// 		code is speed-critical, thus we access the DOM directly and
-	// 		the two branches are unrolled...
-	restoreTransitions: function(target, now, force){
-		if(target === true || target === false){
-			now = target
-			target = this.viewer
-		} else {
-			target = target || this.viewer
-		}
-		if(target.length == 0){
-			return this
-		}
-		var t = target[0]
-
-		// sync...
-		if(now){
-			// handle nesting...
-			var l = t.getAttribute('__prevent_transitions')
-			if(l != null && !force && l != '0'){
-				t.setAttribute('__prevent_transitions', parseInt(l)-1)
-				return this
-			}
-			t.removeAttribute('__prevent_transitions')
-
-			target.removeClass('no-transitions')
-
-			var s = getComputedStyle(t)
-			s.webkitTransition
-			s.mozTransition
-			s.msTransition
-			s.oTransition
-			s.transition
-
-		// on next exec frame...
-		} else {
-			var that = this
-			setTimeout(function(){
-				// handle nesting...
-				var l = t.getAttribute('__prevent_transitions')
-				if(l != null && !force && l != '0'){
-					t.setAttribute('__prevent_transitions', l-1)
-					return this
-				}
-				t.removeAttribute('__prevent_transitions')
-
-				target.removeClass('no-transitions')
-
-				var s = getComputedStyle(t)
-				s.webkitTransition
-				s.mozTransition
-				s.msTransition
-				s.oTransition
-				s.transition
-			}, 0)
-		}
-
-		return this
-	},
-
-	// Shorthand wrappers of the above...
-	//
-	// XXX do we need custom target support here???
-	noTransitions: function(func){
-		this.preventTransitions()
-		func.apply(this, args2array(arguments).slice(1))
-		this.restoreTransitions(true)
-		return this
-	},
-	noTransitionsDeep: function(func){
-		this.preventTransitions(null, true)
-		func.apply(this, args2array(arguments).slice(1))
-		this.restoreTransitions(true)
-		return this
-	},
-
 	// Rotate...
 	//
 	//	Get ribbon rotation angle...

ui (gen4)/ui.js

@@ -119,6 +119,8 @@ $(function(){
 					//'-ui-partial-ribbons',
 				])
 
+		window.ImageGridFeatures = viewer.ImageGridFeatures
+
 	} catch(err){
 		console.error(err)
 		return