refactored current marker + experimenting...

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

ui (gen4)/css/layout.less

@@ -684,11 +684,17 @@ stretching in width... */
 
 
 .current-marker {
+	display: none;
 	position: absolute;
 	border: solid 5px red;
 	background: none;
 	z-index: 100;
 
+	top: 0;
+	left: 0;
+	margin-top: -@image-tile-size / 2;
+	margin-left: -@image-tile-size / 2;
+
 	/* pass events through... (do we need IE10-?) */
 	pointer-events: none;
 }

ui (gen4)/features/base.js

@@ -406,13 +406,6 @@ actions.Actions({
 
 			this.focusImage(t, r)
 		}],
-	// XXX add undo...
-	setBaseRibbon: ['Edit|Ribbon/Set base ribbon', {
-		journal: true,
-		browseMode: function(target){ 
-			return this.current_ribbon == this.base && 'disabled' }},
-		function(target){ this.data.setBase(target) }],
-
 	// shorthands...
 	// XXX do we reset direction on these???
 	firstImage: ['Navigate/First image in current ribbon',
@@ -584,12 +577,116 @@ actions.Actions({
 	nextRibbon: ['Navigate/Next ribbon',
 		{browseMode: 'lastRibbon'},
 		function(){ this.focusRibbon('after') }],
+})
 
 
+var Base =
+module.Base = 
+core.ImageGridFeatures.Feature({
+	title: 'ImageGrid base',
+
+	tag: 'base',
+	depends: [
+		'changes',
+	],
+	suggested: [
+		'base-edit',
+		//'tags',
+		//'sort',
+		//'tasks',
+	],
+
+	actions: BaseActions,
+
+	handlers: [
+		// manage changes...
+		// everything changed...
+		[[
+			'claer',
+			'loadURLs', 
+		],
+			function(){ this.markChanged('all') }],
+
+		['prepareIndexForWrite', 
+			function(res){
+				// we save .current unconditionally...
+				res.index.current = res.raw.data.current
+
+				var changes = res.changes
+
+				// data...
+				if(changes === true || changes.data){
+					res.index.data = res.raw.data
+				}
+
+				// images (full)...
+				if(changes === true || changes.images === true){
+					res.index.images = res.raw.images
+
+				// images-diff...
+				} else if(changes && changes.images){
+					var diff = res.index['images-diff'] = {}
+					changes.images.forEach(function(gid){
+						diff[gid] = res.raw.images[gid]
+					})
+				}
+			}],
+		['prepareJSONForLoad',
+			function(res, json, base_path){
+				// build data and images...
+				// XXX do we actually need to build stuff here, shouldn't
+				// 		.load(..) take care of this???
+				//var d = json.data
+				var d = data.Data.fromJSON(json.data)
+
+				d.current = json.current || d.current
+
+				var img = images.Images(json.images)
+
+				if(base_path){
+					d.base_path = base_path
+					// XXX STUB remove ASAP... 
+					// 		...need a real way to handle base dir, possible
+					// 		approaches:
+					// 			1) .base_path attr in image, set on load and 
+					// 				do not save (or ignore on load)...
+					// 				if exists prepend to all paths...
+					// 				- more to do in view-time
+					// 				+ more flexible
+					// 			2) add/remove on load/save (approach below)
+					// 				+ less to do in real time
+					// 				- more processing on load/save
+					img.forEach(function(_, img){ img.base_path = base_path })
+				}
+
+				res.data = d
+				res.images = img
+			}],
+	],
+})
+
+
+
+//---------------------------------------------------------------------
+// Edit...
+
+var BaseEditActions = 
+module.BaseEditActions = 
+actions.Actions({
+	config: {
+	},
+
 	// basic ribbon editing...
 	//
 	// NOTE: for all of these, current/ribbon image is a default...
 
+	// XXX add undo...
+	setBaseRibbon: ['Edit|Ribbon/Set base ribbon', {
+		journal: true,
+		browseMode: function(target){ 
+			return this.current_ribbon == this.base && 'disabled' }},
+		function(target){ this.data.setBase(target) }],
+
 	// NOTE: resetting this option will clear the last direction...
 	toggleShiftsAffectDirection: ['Interface/Shifts affect direction',
 		core.makeConfigToggler('shifts-affect-direction', 
@@ -761,7 +858,16 @@ actions.Actions({
 		{undo: 'reverseRibbons'},
 		function(){ this.data.reverseRibbons() }],
 
-	// XXX align to ribbon...
+	// complex operations...
+	// XXX need interactive mode for this...
+	// 		- on init: select start/end/base
+	// 		- allow user to reset/move
+	// 		- on accept: run
+	alignToRibbon: ['Ribbon|Edit/Align top ribbon to base',
+		{journal: true},
+		function(target, start, end){
+			this.data = this.data.alignToRibbon(target, start, end) }],
+
 
 	// basic image editing...
 	//
@@ -841,37 +947,19 @@ actions.Actions({
 	flipHorizontal: ['Image|Edit/Flip image horizontally',
 		{undo: 'flipHorizontal'},
 		function(target){ this.flip(target, 'horizontal') }],
-
-
-	// complex operations...
-	// XXX need interactive mode for this...
-	// 		- on init: select start/end/base
-	// 		- allow user to reset/move
-	// 		- on accept: run
-	alignToRibbon: ['Ribbon|Edit/Align top ribbon to base',
-		{journal: true},
-		function(target, start, end){
-			this.data = this.data.alignToRibbon(target, start, end) }],
 })
 
-
+var BaseEdit =
-var Base =
+module.BaseEdit = 
-module.Base = 
 core.ImageGridFeatures.Feature({
-	title: 'ImageGrid base',
+	title: 'ImageGrid base editor',
 
-	tag: 'base',
+	tag: 'base-edit',
 	depends: [
-		'changes',
+		'base',
-	],
-	suggested: [
-		'base-edit',
-		//'tags',
-		//'sort',
-		//'tasks',
 	],
 
-	actions: BaseActions,
+	actions: BaseEditActions,
 
 	handlers: [
 		[[
@@ -897,13 +985,6 @@ core.ImageGridFeatures.Feature({
 						&& this.shiftImageOrder.apply(this, [].slice(arguments, 1)) } }],
 
 		// manage changes...
-		// everything changed...
-		[[
-			'claer',
-			'loadURLs', 
-		],
-			function(){ this.markChanged('all') }],
-
 		// data...
 		[[
 			//'load',
@@ -933,94 +1014,11 @@ core.ImageGridFeatures.Feature({
 			'flipVertical',
 		], 
 			function(_, target){ this.markChanged('images', [this.data.getImage(target)]) }],
-
-		['prepareIndexForWrite', 
-			function(res){
-				// we save .current unconditionally...
-				res.index.current = res.raw.data.current
-
-				var changes = res.changes
-
-				// data...
-				if(changes === true || changes.data){
-					res.index.data = res.raw.data
-				}
-
-				// images (full)...
-				if(changes === true || changes.images === true){
-					res.index.images = res.raw.images
-
-				// images-diff...
-				} else if(changes && changes.images){
-					var diff = res.index['images-diff'] = {}
-					changes.images.forEach(function(gid){
-						diff[gid] = res.raw.images[gid]
-					})
-				}
-			}],
-		['prepareJSONForLoad',
-			function(res, json, base_path){
-				// build data and images...
-				// XXX do we actually need to build stuff here, shouldn't
-				// 		.load(..) take care of this???
-				//var d = json.data
-				var d = data.Data.fromJSON(json.data)
-
-				d.current = json.current || d.current
-
-				var img = images.Images(json.images)
-
-				if(base_path){
-					d.base_path = base_path
-					// XXX STUB remove ASAP... 
-					// 		...need a real way to handle base dir, possible
-					// 		approaches:
-					// 			1) .base_path attr in image, set on load and 
-					// 				do not save (or ignore on load)...
-					// 				if exists prepend to all paths...
-					// 				- more to do in view-time
-					// 				+ more flexible
-					// 			2) add/remove on load/save (approach below)
-					// 				+ less to do in real time
-					// 				- more processing on load/save
-					img.forEach(function(_, img){ img.base_path = base_path })
-				}
-
-				res.data = d
-				res.images = img
-			}],
 	],
 })
 
 
 
-//---------------------------------------------------------------------
-// Edit...
-
-var BaseEditActions = 
-module.BaseEditActions = 
-actions.Actions({
-	config: {
-	},
-
-	// XXX
-})
-
-var BaseEdit =
-module.BaseEdit = 
-core.ImageGridFeatures.Feature({
-	title: 'ImageGrid base editor',
-
-	tag: 'base-edit',
-	depends: [
-		'base',
-	],
-
-	actions: BaseEditActions,
-})
-
-
-
 //---------------------------------------------------------------------
 // Tags...
 

ui (gen4)/features/demo.js

@@ -52,6 +52,21 @@ Object.keys(demo_data.ribbons).forEach(function(k){
 	demo_data.order = demo_data.order.concat(demo_data.ribbons[k]) 
 })
 
+var demo_images =
+module.demo_images = {
+	a: {
+		orientation: 90,
+	},
+	f: {
+		orientation: 270,
+	},
+	2: {
+		orientation: 270,
+	},
+	z: {
+		flipped: ['horizontal'],
+	},
+}
 
 
 /*********************************************************************/
@@ -71,7 +86,8 @@ module.Demo = core.ImageGridFeatures.Feature({
 			function(){
 				this.load({
 					data: data.Data(demo_data),
-					images: images.Images(),
+					//images: images.Images(),
+					images: images.Images(demo_images),
 				})
 			}],
 	})

ui (gen4)/features/meta.js

@@ -64,14 +64,16 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 
 	'ui-single-image',
 	'ui-partial-ribbons',
-	// XXX has bugs...
+	/*/ XXX has bugs...
-	//'ui-partial-ribbons-2',
+	'ui-partial-ribbons-2',
+		'-ui-partial-ribbons',
+	//*/
 	// XXX EXPERIMENTAL...
 	'ui-partial-ribbons-vdom',
 		'-ui-partial-ribbons',
 		'-ui-partial-ribbons-2',
 		// XXX this conflicts with ui-partial-ribbons-vdom...
-		'-ui-current-image-indicator',
+		//'-ui-current-image-indicator',
 	//*/
 
 	'marks',

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

@@ -179,11 +179,11 @@ var CurrentImageIndicatorActions = actions.Actions({
 			// NOTE: cur may be unloaded...
 			var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon)
 
-			var marker = ribbon.find('.current-marker')
+			var marker = ribbon_set.find('.current-marker')
 
 			// remove marker if current image is not loaded...
 			if(cur.length == 0){
-				marker.remove()
+				marker.hide()
 				return
 			}
 
@@ -191,41 +191,6 @@ var CurrentImageIndicatorActions = actions.Actions({
 			var border = this.config['current-image-border']
 			var min_border = this.config['current-image-min-border']
 			var border_timeout = this.config['current-image-border-timeout']
-			var fadein = this.config['current-image-indicator-fadein']
-
-			// no marker found -- either in different ribbon or not created yet...
-			if(marker.length == 0){
-				// get marker globally...
-				marker = this.ribbons.viewer.find('.current-marker')
-
-				// no marker exists -- create a marker...
-				if(marker.length == 0){
-					var marker = $('<div/>')
-						.addClass('current-marker ui-current-image-indicator')
-						.css({
-							opacity: '0',
-							// NOTE: these are not used for positioning
-							// 		but are needed for correct absolute
-							// 		placement...
-							top: '0px',
-							left: '0px',
-						})
-						.appendTo(ribbon)
-						.animate({
-							'opacity': 1
-						}, fadein)
-					this.ribbons.dom.setOffset(marker, 0, 0)
-
-				// add marker to current ribbon...
-				} else {
-					css.display = ''
-					marker
-						// NOTE: this will prevent animating the marker 
-						// 		in odd ways when switching ribbons...
-						.css({ display: 'none' })
-						.appendTo(ribbon)
-				}
-			}
 
 			var w = cur.outerWidth(true)
 			var h = cur.outerHeight(true)
@@ -262,16 +227,6 @@ var CurrentImageIndicatorActions = actions.Actions({
 				}
 			}
 
-			/* // set absolute offset...
-			this.ribbons.dom.setOffset(marker, 
-					cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0), 
-					0)
-			*/
-			// set relative offset...
-			var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
-			var x = ((cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0))/W)*100 + 'vmin'
-			marker.transform({x: x, y: 0, z: 0})
-
 			marker.css(css)
 		}],
 })
@@ -290,59 +245,23 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 	actions: CurrentImageIndicatorActions,
 
 	handlers: [
+		['load', 
+			function(){
+				var fadein = this.config['current-image-indicator-fadein']
+				this.ribbons.viewer.find('.current-marker')
+					.css({
+						display: 'block',
+						opacity: 0,
+					})
+					.delay(100)
+					.animate({
+						opacity: 1
+					}, fadein)
+			}],
+
 		// move marker to current image...
 		['focusImage.post',
 			function(){ this.updateCurrentImageIndicator() }],
-		// prevent animations when focusing ribbons...
-		['focusRibbon.pre',
-			function(){
-				var m = this.ribbons.viewer.find('.current-marker')
-				this.ribbons.preventTransitions(m)
-				return function(){
-					this.ribbons.restoreTransitions(m)
-				}
-			}],
-		// this is here to compensate for position change on ribbon 
-		// resize...
-		// NOTE: hide/show of indicator on resize appears to have solved
-		// 		the jumpy animation issue.
-		// 		this might cause some blinking on slow resizes (visible 
-		// 		only on next/prev screen)... 
-		// 		...still not sure why .preventTransitions(m) did not
-		// 		do the job.
-		['resizeRibbon.pre',
-			function(target){
-				var m = this.ribbons.viewer.find('.current-marker')
-				var c = this.current
-				var r = this.current_ribbon
-
-				// only update if marker exists and we are in current ribbon...
-				if(m.length != 0
-						// 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()
-
-					return function(){
-						this.updateCurrentImageIndicator(target, false)
-						m
-							.show()
-							// NOTE: keeping display in inline style will
-							// 		prevent the element from being hidden
-							// 		by css...
-							.css({display: ''})
-					}
-				}
-			}],
 
 		// Change border size in the appropriate spot in the animation:
 		// 	- before animation when scaling up
@@ -364,25 +283,6 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 			function(){ 
 				this.updateCurrentImageIndicator(null, 'before') }],
 
-		['shiftImageLeft.pre shiftImageRight.pre',
-			function(){
-				this.ribbons.viewer.find('.current-marker').hide()
-				if(this._current_image_indicator_timeout != null){
-					clearTimeout(this._current_image_indicator_timeout)
-					delete this._current_image_indicator_timeout
-				}
-				return function(){
-					var ribbons = this.ribbons
-					var fadein = this.config['current-image-indicator-fadein']
-					this._current_image_indicator_timeout = setTimeout(function(){ 
-						var m = ribbons.viewer.find('.current-marker')
-						m.fadeIn(fadein, function(){
-							m.css({display: ''})
-						})
-					}, this.config['current-image-shift-timeout'])
-				}
-			}],
-
 		// hide and remove current image indicator...
 		// NOTE: it will be reconstructed on 
 		// 		next .focusImage(..)
@@ -392,21 +292,19 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 					&& clearTimeout(this.__current_image_indicator_restore_timeout)
 				delete this.__current_image_indicator_restore_timeout
 
-				var m = this.ribbons.viewer
+				this.ribbons.viewer
 					.find('.current-marker')
-						.velocity({opacity: 0}, {
+						.velocity({opacity: 0}, { duration: 100 })
-							duration: 100,
-							complete: function(){
-								m.remove()
-							},
-						})
-
 			}],
 		['ribbonPanning.post',
 			function(){
 				var that = this
 				this.__current_image_indicator_restore_timeout = setTimeout(function(){
 					that.updateCurrentImageIndicator()
+
+					that.ribbons.viewer
+						.find('.current-marker')
+							.velocity({opacity: 1}, { duration: 100 })
 				}, this.config['current-image-indicator-restore-delay'] || 500)
 			}],
 
@@ -414,15 +312,13 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 		['toggleSingleImage',
 			function(){
 				if(this.toggleSingleImage('?') == 'off'){
-					var m = this.ribbons.viewer.find('.current-marker')
+					this.ribbons.viewer.find('.current-marker')
-					m.hide()
+							.delay(150)
+							.animate({opacity: 1}, 100)
 
-					this.updateCurrentImageIndicator()
+				} else {
-
+					this.ribbons.viewer.find('.current-marker')
-					m
+						.css({ opacity: 0 })
-						.delay(150)
-						.fadeIn(200, function(){ 
-							m.css({display: ''})})
 				}
 			}],
 	],

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

@@ -44,6 +44,100 @@ var core = require('features/core')
 window.vdom = vdom
 
 
+//---------------------------------------------------------------------
+
+var Ribbons = {
+	//dom: null,
+
+	// utils...
+	px2v: null,
+	px2vw: null,
+	px2vh: null,
+	px2vmin: null,
+	px2vmax: null,
+	preventTransitions: null,
+	restoreTransitions: null,
+	noTransitions: null,
+	noTransitionsDeep: null,
+	getElemGID: null,
+	setElemGID: null,
+	replaceGid: null,
+
+	makeShadow: null,
+
+	parent: null,
+	images: null,
+
+	scale: null,
+	rotate: null,
+
+	getVisibleImageSize: null,
+	getScreenWidthImages: null,
+	getScreenHeightRibbons: null,
+
+	// element getters...
+	//getRibbonSet: null,
+	//getRibbonLocator: null,
+	//getImage: null,
+	//getImageMarks: null,
+	//getImageByPosition: null,
+	//getRibbon: null,
+	//getRibbonOrder: null,
+	
+	// XXX
+	addImageEventHandler: function(evt, handler){
+	},
+	addRibbonEventHandler: function(evt, handler){
+	},
+
+	//placeRibbon: null,
+	//placeImage: null,
+
+	updateImageIndicators: null,
+	_loadImagePreviewURL: null,
+	//load_img_sync: null,
+	updateImage: null,
+
+	//updateRibbon: null,
+	//updateRibbonInPlace: null,
+	//resizeRibbon: null,
+
+	//updateData: null,
+
+	//clearEmptyRibbons: null,
+
+	//focusImage: null,
+
+	//setBaseRibbon: null,
+
+	//toggleImageMark: null,
+
+	//rotateImage: null,
+	//getImageRotation: null,
+	//rotateCW: null,
+	//rotateCCW: null,
+	//flipImage: null,
+	//getImageFlip: null,
+	//flipVertical: null,
+	//flipHorizontal: null,
+
+	// XXX
+	_calcImageProportions: null,
+	correctImageProportionsForRotation: null,
+
+	centerRibbon: null,
+	centerImage: null,
+
+	fitImage: null,
+	fitRibbon: null,
+
+	clear: null,
+	//clone: null,
+
+	__init__: null,
+}
+
+
 //---------------------------------------------------------------------
 
 // hooks...
@@ -92,7 +186,6 @@ var VirtualDOMRibbonsPrototype = {
 	state: null,
 
 	// constructors...
-	// XXX calculate top...
 	makeView: function(state){
 		state = state || {}
 		var that = this
@@ -105,10 +198,6 @@ var VirtualDOMRibbonsPrototype = {
 			|| ig.screenwidth * (ig.config['ribbon-size-screens'] || 9)
 		var s = state.scale = state.scale 
 			|| ig.scale
-		var top = state.top = state.top 
-			|| this.state.top 
-			// XXX do a real calculation...
-			|| ig.ribbons.getRibbonLocator().transform('y') 
 
 		var data = ig.data
 		var images = ig.images
@@ -117,21 +206,21 @@ var VirtualDOMRibbonsPrototype = {
 			.map(function(gid){
 				return that.makeRibbon(gid, target, count, state) })
 
-		return vdom.h('div.ribbon-set', {
+		return vdom.h('div.ribbon-set', 
-			//key: 'ribbon-set',
+			{
-			style: {
+				//key: 'ribbon-set',
-				transform: 'scale('+ s +', '+ s +')',
-			}
-		}, [
-			vdom.h('div.ribbon-locator', {
-				//key: 'ribbon-locator',
 				style: {
-					// XXX should this be in vh???
+					transform: 'scale('+ s +', '+ s +')',
-					transform: 'translate3d(0px, '+ top +'px, 0px)',
+				}
-				},
+			}, [
-			},
+				vdom.h('div.current-marker'),
-			ribbons)
+				// ribbon locator...
-		])
+				vdom.h('div.ribbon-locator', 
+					{
+						//key: 'ribbon-locator',
+					},
+					ribbons),
+			])
 	},
 	// XXX setup handlers (???)
 	// XXX current image marker (???)
@@ -184,10 +273,6 @@ var VirtualDOMRibbonsPrototype = {
 					.forEach(function(mark){ imgs.push(mark) })
 			})
 
-		// continue offset calculation...
-		var l = gids.indexOf(ref)
-		var x = (-(l * vsize) - offset)
-
 		return vdom.h('div.ribbon'+base, {
 			//key: 'ribbon-'+gid,
 
@@ -197,20 +282,13 @@ var VirtualDOMRibbonsPrototype = {
 				gid: JSON.stringify(gid)
 					.replace(/^"(.*)"$/g, '$1'),
 			},
-			/*/ XXX
-			style: {
-				// XXX calling .centerImage(..) prevents this from updating...
-				transform: 'translate3d('+ x +'vmin, 0px, 0px)',
-			},
-			//*/
 		},
 		imgs)
 	},
 	// XXX setup image handlers...
-	// 		...or move them up to viewer or some other spot (viewer?)...
 	// XXX update image previews...
-	// XXX update image proportions for rotation...
+	// XXX update image proportions for rotated images... (???)
-	makeImage: function(gid, size, state){
+	makeImage: function(gid, size){
 		var ig = this.imagegrid
 		//size = this.state.tile_size = size 
 		size = size 
@@ -220,6 +298,7 @@ var VirtualDOMRibbonsPrototype = {
 		var images = this.imagegrid.images || {}
 		var current = data.current == gid ? '.current' : ''
 
+		// resolve group preview cover...
 		var image = images[gid] || {}
 		var seen = []
 		while(image.type == 'group'){
@@ -239,7 +318,7 @@ var VirtualDOMRibbonsPrototype = {
 			// XXX BUG:
 			// 		- setting this makes the images some times not change previews...
 			// 		- removing this breaks .current class setting...
-			//key: 'image-'+gid,
+			key: 'image-'+gid,
 
 			attributes: {
 				gid: JSON.stringify(gid)
@@ -247,19 +326,18 @@ var VirtualDOMRibbonsPrototype = {
 				orientation: image.orientation,
 				flipped: image.flipped,
 
-				//'preview-width': w,
+				// XXX preview size -- get this onload from image...
-				//'preview-height': h,
+				//'preview-width': ..,
+				//'preview-height': ..,
 			},
 			style: {
-				//width: '',
+				// XXX need to update this onload if changing preview 
-				//height: '',
+				// 		of same image...
-				//margin: '',
-
 				backgroundImage: 'url("'+ url +'")',
 			}
 		})
 	},
-	// XXX STUB: make marks handling more extensible... (???)
+	// XXX STUB: make marks handling extensible... (???)
 	makeImageMarks: function(gid){
 		var that = this
 		var marks = []
@@ -273,20 +351,67 @@ var VirtualDOMRibbonsPrototype = {
 
 		return marks
 			.map(function(type){
-				return that.makeImageMark(gid, type) })
+				return vdom.h('div.mark.'+(type || ''), {
-	},
+					key: 'mark-'+type+'-'+gid,
-	makeImageMark: function(gid, type){
+					attributes: {
-		return vdom.h('div.mark.'+(type || ''), {
+						gid: JSON.stringify(gid)
-			key: 'mark-'+type+'-'+gid,
+							.replace(/^"(.*)"$/g, '$1'),
-			attributes: {
+					},
-				gid: JSON.stringify(gid)
+				})
-					.replace(/^"(.*)"$/g, '$1'),
+			})
-			},
-		})
 	},
 
 	// XXX add ability to hook in things like current image marker...
 	
+
+	// XXX these need .getImage(..) / .getRibbon(..) / .getRibbonLocator(..)
+	centerRibbon: function(target){
+		var ribbon = this.getRibbon(target)
+		var locator = this.getRibbonLocator() 
+
+		if(locator.length != 0 && ribbon.length != 0){
+			var t = ribbon[0].offsetTop
+			var h = ribbon[0].offsetHeight
+
+			locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 }) 
+		}
+		return this
+	},
+	centerImage: function(target, mode){
+		target = this.getImage(target)
+		var ribbon = this.getRibbon(target)
+
+		if(ribbon.length != 0){
+			var l = target[0].offsetLeft
+			var w = target[0].offsetWidth
+
+			var image_offset = mode == 'before' ? 0
+				: mode == 'after' ? w
+				: w/2
+
+			ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0}) 
+		}
+		return this
+	},
+
+	scale: function(scale){
+		if(scale){
+			this.state.scale = scale
+			this.sync()
+
+		} else {
+			return this.imagegrid.scale
+		}
+	},
+
+	// XXX not sure how to proceed with these...
+	setImageHandler: function(evt, handler){
+	},
+	setRibbonHandler: function(evt, handler){
+	},
+
+
+
 	clear: function(){
 		delete this.state
 		delete this.dom
@@ -349,6 +474,7 @@ object.makeConstructor('VirtualDOMRibbons',
 
 /*********************************************************************/
 // XXX TODO:
+// 		- image size/proportions (single image view)
 // 		- shifting images/ribbons
 // 			- use .virtualdom.sync() + shadow animation instead of .ribbons.*
 // 			- would be nice to make this an alternative feature...
@@ -444,17 +570,25 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
 				var img = this.ribbons.getImage(target)
 
 				// in-place update...
-				// XXX this is very rigid, need to make this more 
-				// 		flexible and not hinder fast nav...
 				if(img.length > 0){
-					setTimeout((function(){
+					// XXX need to account for running out of images and
-						this.ribbons.preventTransitions()
+					// 		not only on the current ribbon...
-						this.updateRibbon(this.current) 
+					if(!this.__partial_ribbon_update){
-						this.ribbons.restoreTransitions()
+						this.__partial_ribbon_update = setTimeout((function(){
-					}).bind(this), 200)
+							delete this.__partial_ribbon_update
+							this.ribbons.preventTransitions()
+							this.updateRibbon(this.current) 
+							this.ribbons.restoreTransitions()
+						}).bind(this), 150)
+					}
 
 				// long-jump...
 				} else {
+					if(this.__partial_ribbon_update){
+						clearTimeout(this.__partial_ribbon_update)
+						delete this.__partial_ribbon_update
+					}
+
 					this.updateRibbon(target) 
 				}
 			}],

ui (gen4)/features/ui.js

@@ -491,12 +491,6 @@ module.ViewerActions = actions.Actions({
 			'ribbon-image-separators',
 			function(state){ this.config['ribbon-image-separators'] = state }) ],
 
-	/*
-	setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
-		function(msg, help){ this.ribbons 
-			&& this.ribbons.setEmptyMsg(msg, help) }],
-	*/
-
 
 	// align modes...
 	// XXX these should also affect up/down navigation...
@@ -698,13 +692,13 @@ module.ViewerActions = actions.Actions({
 		function(){
 			// NOTE: the 0.2 is added to compensate for alignment/scaling
 			// 		errors -- 2.99 images wide counts as 3 while 2.5 as 2.
-			var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2)
+			var w = Math.floor(this.screenwidth + 0.2)
 			w += (w % 2) - 1
 			this.prevImage(w)
 		}],
 	nextScreen: ['Navigate/Screen width forward',
 		function(){
-			var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2)
+			var w = Math.floor(this.screenwidth + 0.2)
 			w += (w % 2) - 1
 			this.nextImage(w)
 		}],

ui (gen4)/imagegrid/ribbons.js

@@ -287,7 +287,6 @@ var RibbonsClassPrototype = {
 		return this.setElemGID($('<div class="mark">')
 			.addClass(cls), gid)
 	},
-
 } 
 
 
@@ -341,12 +340,10 @@ var RibbonsPrototype = {
 
 
 	get parent(){
-		return this.__parent
+		return this.__parent },
-	},
 	// NOTE: this will reset locally referenced .images to .parent.images
 	set parent(parent){
 		this.__parent = parent
-
 		delete this.__images
 	},
 
@@ -355,8 +352,7 @@ var RibbonsPrototype = {
 	// NOTE: images can be stored locally if no parent is set but will 
 	// 		get overridden as soon as .parent is set.
 	get images(){
-		return this.parent ? this.parent.images : this.__images
+		return this.parent ? this.parent.images : this.__images },
-	},
 	set images(images){
 		if(this.parent){
 			this.parent.images = images
@@ -2564,13 +2560,7 @@ var RibbonsPrototype = {
 		var t = ribbon[0].offsetTop
 		var h = ribbon[0].offsetHeight
 
-		//locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
+		locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 }) 
-		//locator.transform({x: 0, y: -(t + h/2), z: 0}) 
-		locator.transform({
-			x: 0, 
-			y: this.px2vh(-(t + h/2)) + 'vh', 
-			z: 0,
-		}) 
 
 		return this
 	},
@@ -2601,21 +2591,12 @@ var RibbonsPrototype = {
 
 		var l = target[0].offsetLeft
 		var w = target[0].offsetWidth
-		//var w = this.getVisibleImageSize('width', 1, target)
-
 
 		var image_offset = mode == 'before' ? 0
 			: mode == 'after' ? w
 			: w/2
 
-		// relative offset to vmin...
+		ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0}) 
-		var x = -this.px2vmin(l + image_offset) + 'vmin'
-
-		// absolute offset...
-		//var x = -(l + image_offset)
-
-		//ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)')
-		ribbon.transform({x: x, y: 0, z: 0}) 
 
 		return this
 	},
@@ -2680,16 +2661,6 @@ var RibbonsPrototype = {
 
 		return this
 	},
-
-
-	// XXX
-	setEmptyMsg: function(msg, help){
-		this.getRibbonSet()
-			.attr({
-				'empty-msg': msg || '',
-				'empty-help': help || '',
-			})
-	},
 }