refactored ribbon alignment...

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

ui (gen4)/features/meta.js

@@ -57,8 +57,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'keyboard',
 
 	// features...
-	'ui-ribbon-auto-align',
-	
 	'ui-cursor',
 	'ui-animation',
 

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

@@ -41,6 +41,7 @@ var PartialRibbonsActions = actions.Actions({
 		'ribbon-update-timeout': 120,
 	},
 
+	// XXX trigger .alignRibbons(..) in correct spot...
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold, preload){
 			target = target instanceof jQuery 

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

@@ -225,7 +225,6 @@ var VirtualDOMRibbonsPrototype = {
 			])
 	},
 	// XXX setup handlers (???)
-	// XXX current image marker (???)
 	// XXX STUB: make aligning more extensible... (???)
 	makeRibbon: function(gid, target, count, state){
 		state = state || {}
@@ -415,14 +414,19 @@ var VirtualDOMRibbonsPrototype = {
 
 
 	clear: function(){
+		this.dom
+			&& this.dom.remove()
+
 		delete this.state
 		delete this.dom
 		delete this.vdom
+
 		return this
 	},
 
 	// NOTE: virtual-dom architecture is designed around a fast-render-on-demand
 	// 		concept, so we build the state on demand...
+	// XXX get scale from config on initial load...
 	sync: function(target, size){
 		var dom = this.dom = this.dom 
 			// get/create the ribbon-set...
@@ -567,6 +571,7 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
 			function(){ delete this.virtualdom.state.tile_size }],
 
 		// XXX account for fast navigation...
+		// XXX sync with .alignRibbons(..) correctly...
 		['focusImage.pre', 
 			function(target){ 
 				var img = this.ribbons.getImage(target)
@@ -578,8 +583,12 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
 					if(!this.__partial_ribbon_update){
 						this.__partial_ribbon_update = setTimeout((function(){
 							delete this.__partial_ribbon_update
+
 							this.ribbons.preventTransitions()
-							this.updateRibbon(this.current) 
+							this
+								.updateRibbon(this.current)
+								// XXX HACK???
+								.alignRibbons(null, null, true)
 							this.ribbons.restoreTransitions()
 						}).bind(this), 150)
 					}

ui (gen4)/features/ui.js

@@ -9,11 +9,6 @@
 *		maintain configuration state in local storage
 *	- ui-url-hash
 *		handle .location.hash
-*	- ui-ribbon-auto-align
-*		unify and handle ribbon alignment...
-*		- ui-ribbon-align-to-order
-*		- ui-ribbon-align-to-first
-*		- ui-ribbon-manual-align
 *	- ui-animation
 *		manage UI non-css animations...
 *	- ui-cursor
@@ -221,6 +216,22 @@ module.ViewerActions = actions.Actions({
 			'last',		// select last image
 		],
 		'ribbon-focus-mode': 'visual',
+
+		// control ribbon alignment...
+		//
+		// NOTE: when this is null then 'ribbon-focus-mode' will be used...
+		// NOTE: this supports the same modes as 'ribbon-focus-mode'...
+		'ribbon-align-modes': {
+			none: null,		// use .config['ribbon-focus-mode']'s value
+			visual: 'alignByOrder',
+			order: 'alignByOrder',
+			first: 'alignByFirst',
+			//last,
+			manual: null,
+		},
+		'ribbon-align-mode': null,
+
+		'ribbon-align-delay': 50,
 	},
 
 	// Ribbons...
@@ -492,6 +503,32 @@ module.ViewerActions = actions.Actions({
 			function(state){ this.config['ribbon-image-separators'] = state }) ],
 
 
+	// ribbon aligning...
+	alignRibbons: ['Interface/Align ribbons',
+		function(target, scale, now){
+			if(target == 'now'){
+				now = true
+				target = null
+			}
+			var mode = this.config['ribbon-align-mode'] 
+				|| this.config['ribbon-focus-mode']
+			var modes = this.config['ribbon-align-modes']
+
+			if(mode in modes && mode != 'manual'){
+				this[modes[mode]](target, scale, now)
+
+			// manual...
+			// XXX is this correct???
+			} else {
+				this
+					.centerRibbon(target)
+					.centerImage(target)
+			}
+		}],
+	toggleRibbonAlignMode : ['Interface/Ribbon align mode',
+		core.makeConfigToggler('ribbon-align-mode', 
+			function(){ return Object.keys(this.config['ribbon-align-modes']) })],
+
 	// align modes...
 	// XXX these should also affect up/down navigation...
 	// 		...navigate by proximity (closest to center) rather than by
@@ -527,7 +564,7 @@ module.ViewerActions = actions.Actions({
 
 			var that = this
 			var _align = function(){
-				this._align_timeout = null
+				this.__align_timeout = null
 				// align other ribbons...
 				var ribbon = data.getRibbon(gid)
 				for(var r in data.ribbons){
@@ -559,11 +596,11 @@ module.ViewerActions = actions.Actions({
 
 			} else {
 				// if we are going fast we might skip an update... 
-				if(this._align_timeout != null){
+				if(this.__align_timeout != null){
-					clearTimeout(this._align_timeout)
+					clearTimeout(this.__align_timeout)
-					this._align_timeout = null
+					this.__align_timeout = null
 				}
-				this._align_timeout = setTimeout(_align, 50)
+				this.__align_timeout = setTimeout(_align, this.config['ribbon-align-delay'])
 			}
 		}],
 	alignByFirst: ['Interface/Align ribbons except current to first image',
@@ -1016,6 +1053,9 @@ module.Viewer = core.ImageGridFeatures.Feature({
 		['resizingDone',
 			function(){ this.scale = this.scale }],
 		//*/
+
+		['focusImage.post', 
+			function(){ this.alignRibbons() }],
 	],
 })
 
@@ -1411,140 +1451,6 @@ module.URLHash = core.ImageGridFeatures.Feature({
 
 
 /*********************************************************************/
-// Ribbons...
-
-// XXX manual align needs more work...
-var AutoAlignRibbons = 
-module.AutoAlignRibbons = core.ImageGridFeatures.Feature({
-	title: '',
-	doc: '',
-
-	tag: 'ui-ribbon-auto-align',
-	depends: ['ui'],
-	exclusive: ['ui-ribbon-align'],
-
-	config: {
-		// control ribbon alignment...
-		//
-		// NOTE: when this is null then 'ribbon-focus-mode' will be used...
-		// NOTE: this supports the same modes as 'ribbon-focus-mode'...
-		'ribbon-align-modes': [
-			'none',		// use .config['ribbon-focus-mode']'s value
-			'visual',
-			'order',
-			'first',
-			//'last',
-			'manual',
-		],
-		'ribbon-align-mode': null,
-	},
-
-	actions: actions.Actions({
-		alignRibbons: ['Interface/Align ribbons',
-			function(target, scale, now){
-				if(target == 'now'){
-					now = true
-					target = null
-				}
-				var mode = this.config['ribbon-align-mode'] 
-					|| this.config['ribbon-focus-mode']
-
-				if(mode == 'visual' || mode == 'order'){
-					this.alignByOrder(target, scale, now) 
-
-				} else if(mode == 'first'){
-					this.alignByFirst(target, scale, now)
-
-				// manual...
-				// XXX is this correct???
-				} else {
-					this
-						.centerRibbon(target)
-						.centerImage(target)
-				}
-			}],
-		toggleRibbonAlignMode : ['Interface/Ribbon align mode',
-			core.makeConfigToggler('ribbon-align-mode', 
-				function(){ return this.config['ribbon-align-modes'] })],
-	}),
-
-	handlers: [
-		['focusImage.post', 
-			function(){ this.alignRibbons() }],
-	],
-})
-
-
-// XXX should .alignByOrder(..) be a feature-specific action or global 
-// 		as it is now???
-var AlignRibbonsToImageOrder = 
-module.AlignRibbonsToImageOrder = core.ImageGridFeatures.Feature({
-	title: '',
-	doc: '',
-
-	tag: 'ui-ribbon-align-to-order',
-	depends: ['ui'],
-	exclusive: ['ui-ribbon-align'],
-
-	config: {
-		//'ribbon-focus-mode': 'order',
-		'ribbon-focus-mode': 'visual',
-	},
-
-	handlers: [
-		['focusImage.post', function(){ this.alignByOrder() }]
-	],
-})
-
-
-var AlignRibbonsToFirstImage = 
-module.AlignRibbonsToFirstImage = core.ImageGridFeatures.Feature({
-	title: '',
-	doc: '',
-
-	tag: 'ui-ribbon-align-to-first',
-	depends: ['ui'],
-	exclusive: ['ui-ribbon-align'],
-
-	config: {
-		'ribbon-focus-mode': 'first',
-	},
-
-	handlers: [
-		['focusImage.post', function(){ this.alignByFirst() }],
-	],
-})
-
-// XXX needs more work...
-// XXX need to save position in some way, ad on each load the same 
-// 		initial state will get loaded...
-// 		...also would need an initial state...
-var ManualAlignRibbons = 
-module.ManualAlignRibbons = core.ImageGridFeatures.Feature({
-	title: '',
-	doc: '',
-
-	tag: 'ui-ribbon-manual-align',
-	depends: ['ui'],
-	exclusive: ['ui-ribbon-align'],
-
-	config: {
-		'ribbon-focus-mode': 'visual',
-	},
-
-	handlers: [
-		['focusImage.post', function(){ 
-			this
-				.centerRibbon()
-				.centerImage()
-		}],
-	],
-})
-
-
-
-//---------------------------------------------------------------------
-
 // Adds user management of different back-ends for low level ribbon 
 // alignment and placement...
 var RibbonsPlacement =