some refactoring...

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

ui (gen4)/features/base.js

@@ -57,7 +57,6 @@ var undoShift = function(undo){
 var BaseActions = 
 module.BaseActions = 
 actions.Actions({
-
 	config: {
 		// XXX should this be here???
 		version: 'gen4',
@@ -857,20 +856,20 @@ actions.Actions({
 
 
 var Base =
-module.Base = core.ImageGridFeatures.Feature({
+module.Base = 
+core.ImageGridFeatures.Feature({
 	title: 'ImageGrid base',
 
 	tag: 'base',
 	depends: [
 		'changes',
 	],
-	/*
 	suggested: [
-		'tags',
+		'base-edit',
-		'sort',
+		//'tags',
-		'tasks',
+		//'sort',
+		//'tasks',
 	],
-	//*/
 
 	actions: BaseActions,
 
@@ -994,6 +993,32 @@ module.Base = core.ImageGridFeatures.Feature({
 })
 
 
+//---------------------------------------------------------------------
+// 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/ui-partial-ribbons-vdom.js

@@ -65,6 +65,11 @@ FORCE.prototype.hook = function(elem, prop){
 }
 
 //---------------------------------------------------------------------
+//
+//	- take care of DOM construction and update...
+//	- alignment is done via .centerRibbon(..) / .centerImage(..)
+//	- preview updates (XXX)
+//		- update onload (a-la .ribbons._loadImagePreviewURL(..))
 
 var VirtualDOMRibbonsClassPrototype = {
 	// XXX ???
@@ -341,6 +346,17 @@ object.makeConstructor('VirtualDOMRibbons',
 
 
 /*********************************************************************/
+// XXX TODO:
+// 		- shifting images
+// 			- use .virtualdom.sync() + shadow animation instead of .ribbons.*
+// 			- would be nice to make this an alternative feature...
+// 				...split out ribbon editing into a feature and do two 
+// 				implementations, the original and virtualdom...
+// 		- current image indicator...
+// 		- custom align: .alignByOrder(..) / .alignByFirst(..) / ..
+// 		- ribbon rotation: .ribbonRotation(..) / .rotateRibbonCW(..) / ..
+// 		- cropping???
+// 		
 
 var PartialRibbonsActions = actions.Actions({
 	config: {
@@ -372,10 +388,9 @@ var PartialRibbonsActions = actions.Actions({
 				|| this.config['ribbon-size-screens'] 
 				|| 9) * w
 
+			// XXX DEBUG
 			size = 5
 
-			// XXX add threshold test -- we do not need this on every action...
-
 			this.virtualdom.sync(target, size)
 			this.centerViewer(target)
 		}],

ui (gen4)/features/ui.js

@@ -710,12 +710,6 @@ module.ViewerActions = actions.Actions({
 				this.focusImage(t, r)
 			}
 		}],
-	setBaseRibbon: [
-		function(target){
-			var r = this.data.getRibbon(target)
-			r =  r == null ? this.ribbons.getRibbon(target) : r
-			this.ribbons.setBaseRibbon(r)
-		}],
 
 	// NOTE: these prioritize whole images, i.e. each image will at least
 	// 		once be fully shown.
@@ -917,58 +911,6 @@ module.ViewerActions = actions.Actions({
 	fitScreen: ['Zoom/Fit image to screen',
 		function(){ this.screenfit = 1 }],
 
-	shiftImageLeft: [
-		function(target){ this.ribbons.placeImage(target, -1) }],
-	shiftImageRight: [
-		function(target){ this.ribbons.placeImage(target, 1) }],
-
-	/*
-	// XXX how should these animate???
-	travelImageUp: [
-		function(){
-		}],
-	travelImageDown: [
-		function(){
-		}],
-	*/
-
-	shiftRibbonUp: [
-		function(target){
-			target = this.ribbons.getRibbon(target)
-			var i = this.ribbons.getRibbonOrder(target)
-			if(i > 0){
-				this.ribbons.placeRibbon(target, i-1)
-			}
-		}],
-	shiftRibbonDown: [
-		function(target){
-			target = this.ribbons.getRibbon(target)
-			var i = this.ribbons.getRibbonOrder(target)
-			if(i < this.data.ribbon_order.length-1){
-				this.ribbons.placeRibbon(target, i+1)
-			}
-		}],
-
-	reverseImages: [ reloadAfter() ],
-	reverseRibbons: [ reloadAfter() ],
-	sortImages: [ reloadAfter(true) ],
-
-	// basic image editing...
-	//
-	// XXX should we have .rotate(..) and .flip(..) generic actions???
-	rotateCW: [ 
-		function(target){ this.ribbons.rotateCW(target) }],
-	rotateCCW: [ 
-		function(target){ this.ribbons.rotateCCW(target) }],
-	flipVertical: [ 
-		function(target){ this.ribbons.flipVertical(target, 'view') }],
-	flipHorizontal: [
-		function(target){ this.ribbons.flipHorizontal(target, 'view') }],
-
-	// XXX this needs an interactive mode -- mark A, mark B, align between
-	alignToRibbon: [ reloadAfter(true) ],
-
-
 	// ribbon rotation...
 	//
 	ribbonRotation: ['- Interface|Ribbon/', 
@@ -1003,42 +945,6 @@ module.ViewerActions = actions.Actions({
 		function(){ this.ribbonRotation(0) }],
 
 
-	// tags...
-	tag: [ 
-		function(tags, gids){ 
-			gids = gids != null && gids.constructor !== Array ? [gids] : gids
-			return function(){
-				//this.ribbons.updateImage(gids) 
-				this.refresh(gids)
-			}
-		}],
-	untag: [
-		function(tags, gids){ 
-			gids = gids != null && gids.constructor !== Array ? [gids] : gids
-			return function(){
-				//this.ribbons.updateImage(gids) 
-				this.refresh(gids)
-			}
-		}],
-
-
-	// group stuff...
-	group: [ reloadAfter(true) ],
-	ungroup: [ reloadAfter(true) ],
-	groupTo: [ reloadAfter(true) ],
-	groupMarked: [ reloadAfter(true) ],
-	expandGroup: [ reloadAfter(true) ],
-	collapseGroup: [ reloadAfter(true) ],
-
-
-	// XXX BUG? reloadAfter() here does not remove some images...
-	crop: [ reloadAfter(true) ],
-	// XXX BUG? reloadAfter() produces an align error...
-	uncrop: [ reloadAfter(true) ],
-	// 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...
 	// 		...should this be a crop???
@@ -1075,6 +981,10 @@ module.Viewer = core.ImageGridFeatures.Feature({
 		'workspace',
 		'introspection',
 	],
+	suggested: [
+		// XXX is this the right way???
+		'ui-edit',
+	],
 
 	actions: ViewerActions,
 
@@ -1152,6 +1062,127 @@ module.Viewer = core.ImageGridFeatures.Feature({
 })
 
 
+//---------------------------------------------------------------------
+
+// XXX Q: should this be further split into groups and tags???
+var ViewerEditActions = 
+module.ViewerEditActions = 
+actions.Actions({
+	config: {
+	},
+
+	setBaseRibbon: [
+		function(target){
+			var r = this.data.getRibbon(target)
+			r =  r == null ? this.ribbons.getRibbon(target) : r
+			this.ribbons.setBaseRibbon(r)
+		}],
+
+	shiftImageLeft: [
+		function(target){ this.ribbons.placeImage(target, -1) }],
+	shiftImageRight: [
+		function(target){ this.ribbons.placeImage(target, 1) }],
+
+	/*
+	// XXX how should these animate???
+	travelImageUp: [
+		function(){
+		}],
+	travelImageDown: [
+		function(){
+		}],
+	*/
+
+	shiftRibbonUp: [
+		function(target){
+			target = this.ribbons.getRibbon(target)
+			var i = this.ribbons.getRibbonOrder(target)
+			if(i > 0){
+				this.ribbons.placeRibbon(target, i-1)
+			}
+		}],
+	shiftRibbonDown: [
+		function(target){
+			target = this.ribbons.getRibbon(target)
+			var i = this.ribbons.getRibbonOrder(target)
+			if(i < this.data.ribbon_order.length-1){
+				this.ribbons.placeRibbon(target, i+1)
+			}
+		}],
+
+	reverseImages: [ reloadAfter() ],
+	reverseRibbons: [ reloadAfter() ],
+	sortImages: [ reloadAfter(true) ],
+
+	// basic image editing...
+	//
+	// XXX should we have .rotate(..) and .flip(..) generic actions???
+	rotateCW: [ 
+		function(target){ this.ribbons.rotateCW(target) }],
+	rotateCCW: [ 
+		function(target){ this.ribbons.rotateCCW(target) }],
+	flipVertical: [ 
+		function(target){ this.ribbons.flipVertical(target, 'view') }],
+	flipHorizontal: [
+		function(target){ this.ribbons.flipHorizontal(target, 'view') }],
+
+	// XXX this needs an interactive mode -- mark A, mark B, align between
+	alignToRibbon: [ reloadAfter(true) ],
+
+
+	// tags...
+	tag: [ 
+		function(tags, gids){ 
+			gids = gids != null && gids.constructor !== Array ? [gids] : gids
+			return function(){
+				//this.ribbons.updateImage(gids) 
+				this.refresh(gids)
+			}
+		}],
+	untag: [
+		function(tags, gids){ 
+			gids = gids != null && gids.constructor !== Array ? [gids] : gids
+			return function(){
+				//this.ribbons.updateImage(gids) 
+				this.refresh(gids)
+			}
+		}],
+
+
+	// group stuff...
+	group: [ reloadAfter(true) ],
+	ungroup: [ reloadAfter(true) ],
+	groupTo: [ reloadAfter(true) ],
+	groupMarked: [ reloadAfter(true) ],
+	expandGroup: [ reloadAfter(true) ],
+	collapseGroup: [ reloadAfter(true) ],
+
+
+	// XXX BUG? reloadAfter() here does not remove some images...
+	crop: [ reloadAfter(true) ],
+	// XXX BUG? reloadAfter() produces an align error...
+	uncrop: [ reloadAfter(true) ],
+	// XXX might be a good idea to do this in a new viewer in an overlay...
+	cropGroup: [ reloadAfter() ],
+})
+
+var ViewerEdit =
+module.ViewerEdit = 
+core.ImageGridFeatures.Feature({
+	title: 'Graphical User Interface',
+
+	tag: 'ui-edit',
+
+	depends: [
+		'base-edit',
+		'ui',
+	],
+
+	actions: ViewerEditActions,
+
+})
+
+
 
 /*********************************************************************/
 // User interfaces for different base features...