added forced reloading (hack-ish, see viewer.js .load(..), .reload(..) and .updateRibbon(..) for more info) and some refactoring and cleanup...

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

ui (gen4)/data.js

@@ -1583,10 +1583,14 @@ var DataPrototype = {
 	// NOTE: group intersections are not allowed, i.e. images can not 
 	// 		belong to two groups.
 	// NOTE: nesting groups is supported. (XXX test)
+	//
+	// XXX test if generated gid is unique...
 	group: function(gids, group){
 		gids = gids == null ? this.getImage() : gids
 		gids = gids.constructor !== Array ? [gids] : gids
-		group = group == null ? this.newGid('G') : group
+		// XXX not safe -- fast enough and one can generate two identical
+		// 		gids...
+		group = group == null ? this.newGid('G' + Date.now()) : group
 
 		if(this.groups == null){
 			this.groups = {}

ui (gen4)/images.js

@@ -474,17 +474,27 @@ module.ImagesPrototype = {
 		return gids
 	},
 	// Shorthands...
-	// XXX these seem a bit messy...
+	// XXX default gids may include stray attributes...
-	sortByDate: function(gids, reverse){ return this.sortImages(gids, null, reverse) },
+	sortByDate: function(gids, reverse){
+		gids = gids == null ? Object.keys(this) : gids
+		return this.sortImages(gids, null, reverse) 
+	},
 	sortByName: function(gids, reverse){
-		return this.sortImages(gids, module.makeImageNameCmp(this), reverse) },
+		gids = gids == null ? Object.keys(this) : gids
+		return this.sortImages(gids, module.makeImageNameCmp(this), reverse) 
+	},
 	sortBySeqOrName: function(gids, reverse){ 
-		return this.sortImages(gids, module.makeImageSeqOrNameCmp(this), reverse) },
+		gids = gids == null ? Object.keys(this) : gids
+		return this.sortImages(gids, module.makeImageSeqOrNameCmp(this), reverse) 
+	},
 	sortByNameXPStyle: function(gids, reverse){ 
+		gids = gids == null ? Object.keys(this) : gids
 		return this.sortImages(gids, 
 				module.makeImageSeqOrNameCmp(this, null, this.getImageNameLeadingSeq), 
-				reverse) },
+				reverse) 
+	},
 	sortByDateOrSeqOrName: function(gids, reverse){
+		gids = gids == null ? Object.keys(this) : gids
 		return this.sortImages(gids, [
 					module.makeImageDateCmp(this),
 					module.makeImageSeqOrNameCmp(this)
@@ -492,6 +502,8 @@ module.ImagesPrototype = {
 	},
 	// XXX 
 	sortedImagesByFileNameSeqWithOverflow: function(gids, reverse){
+		gids = gids == null ? Object.keys(this) : gids
+
 		// XXX see ../ui/sort.js
 	},
 

ui (gen4)/ribbons.js

@@ -1170,7 +1170,9 @@ var RibbonsPrototype = {
 	// 		will not disable transitions, which at this point is the 
 	// 		responsibility of the caller...
 	// NOTE: offset calculation depends on image blocks being square...
-	updateRibbon: function(gids, ribbon, reference, count){
+	// NOTE: the argument force is currently ignored, it serves as a 
+	// 		place holder for overloading...
+	updateRibbon: function(gids, ribbon, reference, force){
 		var that = this
 		// get/create the ribbon...
 		var r = this.getRibbon(ribbon)

ui (gen4)/viewer.js

@@ -19,12 +19,12 @@ var ribbons = require('ribbons')
 /*********************************************************************/
 // helpers...
 
-function reloadAfter(transitions){
+function reloadAfter(force){
 	return function(){
 		return function(){
 			// NOTE: this may seem like cheating, but .reload() should
 			// 		be very efficient, reusing all of the items loaded...
-			this.reload()
+			this.reload(force)
 		}
 	}
 }
@@ -677,7 +677,10 @@ actions.Actions(Client, {
 					this.ribbons.clear()
 				}
 
+				// NOTE: this is done unconditionally to avoid manually 
+				// 		setting images and other stuff in the future...
 				this.ribbons = ribbons.Ribbons(viewer, this.images)
+
 				// XXX is this correct???
 				this.ribbons.__image_updaters = [this.updateImage.bind(this)]
 
@@ -686,20 +689,26 @@ actions.Actions(Client, {
 		}],
 	// NOTE: this will pass the .ribbons.updateData(..) a custom ribbon 
 	// 		updater if one is defined here as .updateRibbon(target)
-	// XXX actions.updateRibbon(..) and ribbons.updateRibbon(..) are NOT
+	// XXX HACK: tow sins:
-	// 		signature compatible...
+	// 		- actions.updateRibbon(..) and ribbons.updateRibbon(..)
-	// 		...I'll fix this as/if I need to, right now there is no point to
+	// 		  are NOT signature compatible...
-	// 		spend time and effort on unifying the interface when the common
+	// 		- we depend on the internals of a custom add-on feature
-	// 		use-cases are not known + it seems quite logical as-is right now.
 	reload: ['Reload viewer',
-		function(){
+		function(force){
 			this.ribbons.preventTransitions()
 
+			// NOTE: this essentially sets the update threshold to 0...
+			// XXX this should be a custom arg...
+			force = force ? 0 : null
+
 			return function(){
 				// see if we've got a custom ribbon updater...
 				var that = this
 				var settings = this.updateRibbon != null 
-					? { updateRibbon: function(_, ribbon){ that.updateRibbon(ribbon) } }
+					// XXX this should be: { updateRibbon: this.updateRibbon.bind(this) }
+					? { updateRibbon: function(_, ribbon){ 
+							that.updateRibbon(ribbon, null, null, force) 
+						} }
 					: null
 
 				this.ribbons.updateData(this.data, settings)
@@ -734,25 +743,20 @@ actions.Actions(Client, {
 		}],
 
 
-	// XXX move this to a viewer window action set
+	// This is called by .ribbons, the goal is to use it to hook into 
-	close: ['Cloase viewer',
+	// image updating from features and extensions...
-		function(){
+	//
-			// XXX should we do anything else here like auto-save???
+	// NOTE: not intended for calling manually.
-			window.close() 
+	//
-		}],
+	// XXX experimental...
-	// XXX where should toggleFullscreenMode(..) be defined...
+	// 		...need this to get triggered by .ribbons
-	toggleFullScreen: ['',
+	// 		at this point manually triggering this will not do anything...
-		function(){
+	updateImage: ['',
-			toggleFullscreenMode() 
+		function(gid, image){ }],
-		}],
-	// XXX revise this...
-	showDevTools: ['',
-		function(){
-			if(window.showDevTools != null){
-				showDevTools() 
-			}
-		}],
 
+
+	// General UI stuff...
+	// NOTE: this is applicable to all uses...
 	toggleTheme: ['Toggle viewer theme', 
 		CSSClassToggler(
 			function(){ return this.ribbons.viewer }, 
@@ -761,9 +765,35 @@ actions.Actions(Client, {
 				'dark', 
 				'light'
 			]) ],
+	setEmptyMsg: ['Set message to be displayed when nothing is loaded.',
+		function(msg, help){ this.ribbons.setEmptyMsg(msg, help) }],
+
+	// App stuff...
+	// XXX move this to a viewer window action set
+	// XXX revise these...
+	close: ['Cloase viewer',
+		function(){
+			// XXX should we do anything else here like auto-save???
+			window.close() 
+		}],
+	toggleFullScreen: ['',
+		function(){
+			// XXX where should toggleFullscreenMode(..) be defined...
+			toggleFullscreenMode() 
+		}],
+	showDevTools: ['',
+		function(){
+			if(window.showDevTools != null){
+				showDevTools() 
+			}
+		}],
+
 
 	// align modes...
-	// XXX skip invisible ribbons (???)
+	// XXX these should also affect up/down navigation...
+	// 		...navigate by proximity (closest to center) rather than by
+	// 		order...
+	// XXX skip off-screen ribbons (???)
 	alignByOrder: ['Align ribbons by image order',
 		function(target){
 			var ribbons = this.ribbons
@@ -816,9 +846,6 @@ actions.Actions(Client, {
 				}
 			}, 50)
 		}],
-	// XXX these should also affect up/down navigation...
-	// 		...navigate by proximity (closest to center) rather than by
-	// 		order...
 	alignByFirst: ['Aling ribbons except current to first image',
 		function(target){
 			var ribbons = this.ribbons
@@ -903,7 +930,6 @@ actions.Actions(Client, {
 				}
 			}
 		}],
-
 	setBaseRibbon: [
 		function(target){
 			var r = this.data.getRibbon(target)
@@ -961,7 +987,6 @@ actions.Actions(Client, {
 			this.ribbons.setScale(1) 
 			this.ribbons.updateImage('*')
 		}],
-
 	// NOTE: if this gets a count argument it will fit count images, 
 	// 		default is one.
 	fitImage: ['Fit image',
@@ -969,8 +994,6 @@ actions.Actions(Client, {
 			this.ribbons.fitImage(count)
 			this.ribbons.updateImage('*')
 		}],
-
-
 	fitMax: ['Fit the maximum number of images',
 		function(){ this.fitImage(this.config['max-screen-images']) }],
 
@@ -1000,8 +1023,6 @@ actions.Actions(Client, {
 	shiftImageDown: [
 		function(target){ return updateImagePosition(this, target) }],
 
-	// XXX these produce jumpy animation when gathering images from the 
-	// 		left from outside of the loaded partial ribbon...
 	shiftImageLeft: [
 		function(target){ 
 			this.ribbons.placeImage(target, -1) 
@@ -1029,7 +1050,7 @@ actions.Actions(Client, {
 		}],
 
 	reverseImages: [ reloadAfter() ],
-	reverseRibbons: [ reloadAfter(true) ],
+	reverseRibbons: [ reloadAfter() ],
 
 
 	// basic image editing...
@@ -1045,20 +1066,21 @@ actions.Actions(Client, {
 		function(target){ this.ribbons.flipHorizontal(target, 'view') }],
 
 
+	// group stuff...
+	group: [ reloadAfter(true) ],
+	ungroup: [ reloadAfter(true) ],
+	groupTo: [ reloadAfter(true) ],
+	groupMarked: [ reloadAfter(true) ],
+	expandGroup: [ reloadAfter(true) ],
+	collapseGroup: [ reloadAfter(true) ],
+
+
 	crop: [ reloadAfter() ],
 	uncrop: [ reloadAfter() ],
-
-	// XXX need to force reload for actions that remove/add small numbers
-	// 		if images...
-	group: [ reloadAfter() ],
-	ungroup: [ reloadAfter() ],
-	groupTo: [ reloadAfter() ],
-	groupMarked: [ reloadAfter() ],
-	expandGroup: [ reloadAfter() ],
-	collapseGroup: [ reloadAfter() ],
 	// XXX might be a good idea to do this in a new viewer in an overlay...
 	cropGroup: [ reloadAfter() ],
 
+
 	// XXX experimental: not sure if this is the right way to go...
 	// XXX make this play nice with crops...
 	toggleRibbonList: ['Toggle ribbons as images view',
@@ -1082,21 +1104,6 @@ actions.Actions(Client, {
 			}
 		}],
 
-	// a shorthand...
-	setEmptyMsg: ['Set message to be displayed when nothing is loaded.',
-		function(msg, help){ this.ribbons.setEmptyMsg(msg, help) }],
-
-
-	// This is called by .ribbons, the goal is to use it to hook into 
-	// image updating from features and extensions...
-	//
-	// NOTE: not intended for calling manually.
-	//
-	// XXX experimental...
-	// 		...need this to get triggered by .ribbons
-	// 		at this point manually triggering this will not do anything...
-	updateImage: ['',
-		function(gid, image){ }],
 })
 
 
@@ -1229,7 +1236,9 @@ module.Features = Object.create(FeatureSet)
 // NOTE: this is split out to an action so as to enable ui elements to 
 // 		adapt to ribbon size changes...
 // XXX try a strategy: load more in the direction of movement by an offset...
+// XXX updateRibbon(..) is not signature compatible with data.updateRibbon(..)
 var PartialRibbonsActions = actions.Actions({
+	// XXX this is not signature compatible with data.updateRibbon(..)
 	updateRibbon: ['Update partial ribbon size', 
 		function(target, w, size, threshold){
 			target = target instanceof jQuery 
@@ -1242,9 +1251,10 @@ var PartialRibbonsActions = actions.Actions({
 			size = (size 
 				|| this.config['ribbon-size-screens'] 
 				|| 5) * w
-			threshold = (threshold 
+			threshold = threshold == 0 ? threshold
-				|| this.config['ribbon-resize-threshold'] 
+				: (threshold 
-				|| 1) * w
+					|| this.config['ribbon-resize-threshold'] 
+					|| 1) * w
 
 			// next/prev loaded... 
 			var nl = this.ribbons.getImage(target).nextAll('.image:not(.clone)').length
@@ -1258,7 +1268,7 @@ var PartialRibbonsActions = actions.Actions({
 
 			// do the update...
 			// the target is not loaded...
-			if(this.ribbons.getImage(target).length == 0){
+			if(threshold == 0 || this.ribbons.getImage(target).length == 0){
 				this.resizeRibbon(target, size)
 
 			// do a late resize...