now viewer ui is a feature...

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

ui (gen4)/data.js

@@ -453,6 +453,14 @@ var DataPrototype = {
 
 	/*********************************************** Introspection ***/
 
+	get length(){
+		return this.order.length
+	},
+	get ribbonLength(){
+		return this.getImages(this.getRibbon()).len
+	},
+
+
 	// Get image
 	//
 	//	Get current image:
@@ -522,16 +530,18 @@ var DataPrototype = {
 	// NOTE: If gid|order is not given, current image is assumed.
 	// 		Similarly, if list|ribbon is not given then the current 
 	// 		ribbon is used.
-	// NOTE: if input gid is invalid this will return -1 (XXX is this good???)
+	// NOTE: if input gid is invalid this will return -1
-	// NOTE: the folowing are equivalent:
+	// NOTE: the following are equivalent:
 	// 			D.getImage('current', -1, R)
 	// 			D.getImage('before', R) 
 	// 			D.getImage('current', 'before', R)
 	// 		where D is a Data object and R a ribbon id/index different 
-	// 		from the current ribbon (see next note for details).
+	// 		from the current ribbon, i.e. the current image is not present
+	// 		in R (see next note for details).
 	// NOTE: in before/after modes, if the target image is found then it
-	// 		will be returned, use offset to explicitly get the image 
+	// 		will be returned, thus the mode has no effect unless the 
-	// 		before/after target.
+	// 		target image is not loaded.
+	// 		Use offset to explicitly get the image before/after target.
 	//
 	// XXX most of the complexity here comes from argument DSL parsing,
 	// 		might be good to revise argument syntax and handling...

ui (gen4)/testing.js

@@ -100,7 +100,8 @@ module.setupActions = function(viewer){
 	viewer = viewer == null ? $('.viewer') : viewer
 	//r = r == null ? makeTestRibbons(viewer, images) : r
 
-	var vv = Object.create(v.Viewer)
+	//var vv = Object.create(v.Viewer)
+	var vv = Object.create(v.Client)
 
 	// XXX need to automate this...
 	vv.config = Object.create(vv.config || {})

ui (gen4)/ui.js

@@ -242,16 +242,10 @@ $(function(){
 
 	// XXX
 	window.a = testing.setupActions()
-		.load({
-			viewer: $('.viewer')
-		})
 
 	// used switch experimental actions on (set to true) or off (unset or false)...
 	//a.experimental = true
 
-	// XXX for some reason this is not visible when loading...
-	a.setEmptyMsg('Loading...')
-
 	viewer.ImageGridFeatures.setup(a, [
 		'viewer-testing',
 
@@ -266,10 +260,11 @@ $(function(){
 	// NOTE: we can load this in parts...
 	a
 		.load({
-			//viewer: $('.viewer'),
+			viewer: $('.viewer'),
 			data: data.Data(testing.mock_data),
 			images: testing.makeTestImages(),
 		})
+		.setEmptyMsg('Loading...')
 		// this is needed when loading legacy sources that do not have tags
 		// synced...
 		// do not do for actual data...

ui (gen4)/viewer.js

@@ -274,28 +274,10 @@ actions.Actions({
 	// basic navigation...
 	//
 	focusImage: ['Navigate/Focus image',
-		/* XXX same structure as action but instead of a function uses 
-		 		a list of args...
-		// aliases...
-		{
-			'firstImage': ['Navigate/First image in current ribbon', [ 'first' ]],
-			'lastImage': ['Navigate/Last image in current ribbon', [ 'last' ]],
-			'firstGlobalImage': ['Navigate/First globally image', [ 0 ]],
-			'lastGlobalImage': ['Navigate/Last globally image', [ -1 ]],
-		},
-		*/
 		function(img, list){
 			this.data.focusImage(img, list)
 		}],
 	focusRibbon: ['Navigate/Focus Ribbon',
-		/*
-		{
-			firstRibbon: ['Navigate/First ribbon', [ 'first' ]],
-			lastRibbon: ['Navigate/Last ribbon', [ 'last' ]],
-			prevRibbon: ['Navigate/Previous ribbon', [ 'before' ]],
-			nextRibbon: ['Navigate/Next ribbon', [ 'after' ]],
-		},
-		*/
 		function(target){
 			var data = this.data
 			var r = data.getRibbon(target)
@@ -800,25 +782,19 @@ actions.Actions({
 
 
 
-// XXX do partial loading...
+/*********************************************************************/
-var Viewer = 
-module.Viewer = 
-actions.Actions(Client, {
 
-	config: {
+var ImageGridFeatures =
-		// The maximum screen width allowed when zooming...
+module.ImageGridFeatures = Object.create(features.FeatureSet)
-		'max-screen-images': 30,
 
-		// A step (multiplier) used by .zoomIn()/.zoomOut() actions.
-		// NOTE: this is rounded to the nearest whole screen width in images
-		// 		and current fit-overflow added.
-		'zoom-step': 1.2,
 
-		// added to odd number of images to fit to indicate scroll ability...
+
-		// ...this effectively sets the closest distance an image can be from
+//---------------------------------------------------------------------
-		// the viewer edge...
+
-		'fit-overflow': 0.2,
+var ViewerActions = 
-	},
+module.ViewerActions = 
+//actions.Actions(Client, {
+actions.Actions({
 
 	/*
 	// Images...
@@ -1317,12 +1293,31 @@ actions.Actions(Client, {
 
 })
 
+var Viewer =
+module.Viewer = features.Feature(ImageGridFeatures, {
+	title: 'Graphical User Interface',
 
+	tag: 'ui',
 
-/*********************************************************************/
+	priority: 'high',
 
-var ImageGridFeatures =
+	config: {
-module.ImageGridFeatures = Object.create(features.FeatureSet)
+		// The maximum screen width allowed when zooming...
+		'max-screen-images': 30,
+
+		// A step (multiplier) used by .zoomIn()/.zoomOut() actions.
+		// NOTE: this is rounded to the nearest whole screen width in images
+		// 		and current fit-overflow added.
+		'zoom-step': 1.2,
+
+		// added to odd number of images to fit to indicate scroll ability...
+		// ...this effectively sets the closest distance an image can be from
+		// the viewer edge...
+		'fit-overflow': 0.2,
+	},
+
+	actions: ViewerActions,
+})
 
 
 
@@ -1333,6 +1328,10 @@ module.ImageGridFeatures = Object.create(features.FeatureSet)
 // XXX would be great to add a mechanism define how to reverse actions...
 // 		...one way to do this at this point is to revert to last state
 // 		and re-run the journal until the desired event...
+// XXX need to define a clear journaling strategy in the lines of:
+// 		- save state clears journal and adds a state load action
+// 		- .load(..) clears journal
+// XXX needs careful testing...
 var Journal = 
 module.Journal = features.Feature(ImageGridFeatures, {
 	title: 'Action Journal',
@@ -1355,6 +1354,16 @@ module.Journal = features.Feature(ImageGridFeatures, {
 					delete this.journal
 				}
 			}],
+		runJournal: ['Journal/Run journal',
+			function(journal){
+				var that = this
+				journal.forEach(function(e){
+					// load state...
+					that.focusImage(e[0])
+					// run action...
+					that[e[1]].apply(that, e[2])
+				})
+			}],
 	}),
 
 	// log state, action and its args... 
@@ -1400,6 +1409,8 @@ module.Journal = features.Feature(ImageGridFeatures, {
 				'ungroup',
 				'expandGroup',
 				'collapseGroup',
+
+				'runJournal',
 			].map(function(action){
 				return [
 					action, 
@@ -1554,6 +1565,7 @@ module.PartialRibbons = features.Feature(ImageGridFeatures, {
 	priority: 'high',
 
 	tag: 'ui-partial-ribbons',
+	depends: ['ui'],
 
 
 	actions: PartialRibbonsActions,
@@ -1694,6 +1706,12 @@ module.SingleImageView = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-single-image-view',
+	depends: ['ui'],
+
+	config: {
+		'single-image-scale': null,
+		'ribbon-scale': null,
+	},
 
 	actions: SingleImageActions,
 
@@ -1705,18 +1723,29 @@ module.SingleImageView = features.Feature(ImageGridFeatures, {
 					updateImageProportions.call(this)
 				}
 			}],
+		// XXX this uses .screenwidth for scale, is this the right way to go?
 		['toggleSingleImage.post', 
 			function(){ 
 				// singe image mode -- set image proportions...
 				if(this.toggleSingleImage('?') == 'on'){
 					updateImageProportions.call(this)
 
+					// update scale...
+					var w = this.screenwidth
+					this.config['ribbon-scale'] = w
+					this.screenwidth = this.config['single-image-scale'] || w
+
 				// ribbon mode -- restore original image size...
 				} else {
 					this.ribbons.viewer.find('.image:not(.clone)').css({
 						width: '',
 						height: ''
 					})
+
+					// update scale...
+					var w = this.screenwidth
+					this.config['single-image-scale'] = w
+					this.screenwidth = this.config['ribbon-scale'] || w
 				}
 			}],
 	],
@@ -1736,6 +1765,7 @@ module.AlignRibbonsToImageOrder = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-ribbon-align-to-order',
+	depends: ['ui'],
 	exclusive: ['ui-ribbon-align'],
 
 	handlers: [
@@ -1750,6 +1780,7 @@ module.AlignRibbonsToFirstImage = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-ribbon-align-to-first',
+	depends: ['ui'],
 	exclusive: ['ui-ribbon-align'],
 
 	handlers: [
@@ -1768,6 +1799,7 @@ module.ShiftAnimation = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-animation',
+	depends: ['ui'],
 
 	handlers: [
 		['shiftImageUp.pre shiftImageDown.pre', 
@@ -1853,6 +1885,7 @@ module.BoundsIndicators = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-bounds-indicators',
+	depends: ['ui'],
 
 	actions: BoundsIndicatorsActions,
 
@@ -2011,6 +2044,7 @@ module.CurrentImageIndicator = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-current-image-indicator',
+	depends: ['ui'],
 
 	config: {
 		'current-image-border': 3,
@@ -2113,7 +2147,10 @@ module.CurrentImageIndicatorHideOnFastScreenNav = features.Feature(ImageGridFeat
 	tag: 'ui-current-image-indicator-hide-on-fast-screen-nav',
 
 
-	depends: ['ui-current-image-indicator'],
+	depends: [
+		'ui',
+		'ui-current-image-indicator'
+	],
 	exclusive: ['ui-current-image-indicator-hide'],
 
 
@@ -2175,7 +2212,10 @@ module.CurrentImageIndicatorHideOnScreenNav = features.Feature(ImageGridFeatures
 	tag: 'ui-current-image-indicator-hide-on-screen-nav',
 
 
-	depends: ['ui-current-image-indicator'],
+	depends: [
+		'ui',
+		'ui-current-image-indicator'
+	],
 	exclusive: ['ui-current-image-indicator-hide'],
 
 
@@ -2211,6 +2251,7 @@ module.ImageStateIndicator = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-image-state-indicator',
+	depends: ['ui'],
 })
 
 
@@ -2224,6 +2265,7 @@ module.GlobalStateIndicator = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-global-state-indicator',
+	depends: ['ui'],
 })
 
 
@@ -2423,6 +2465,7 @@ module.ActionTree = features.Feature(ImageGridFeatures, {
 	doc: '',
 
 	tag: 'ui-action-tree',
+	depends: ['ui'],
 
 	config: {
 		'action-category-order': [
@@ -2767,6 +2810,8 @@ module.FileSystemLoader = features.Feature(ImageGridFeatures, {
 //
 
 features.Feature(ImageGridFeatures, 'viewer-testing', [
+	'ui',
+
 	// features...
 	'ui-ribbon-align-to-order',
 	'ui-single-image-view',
@@ -2802,6 +2847,7 @@ features.Feature(ImageGridFeatures, 'commandline', [
 ])
 
 features.Feature(ImageGridFeatures, 'viewer-minimal', [
+	'ui',
 	'ui-ribbon-align-to-order',
 	'ui-animation',
 	'ui-bounds-indicators',