some refacoring and preparations for gen4...

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

ui/actions.js

@@ -7,6 +7,20 @@
 //var DEBUG = DEBUG != null ? DEBUG : true
 
 
+/*********************************************************************/
+//
+// Might also be a good idea to add "relative terms" to be used as 
+// arguments for actions (a-la jQuery collections):
+//
+// 	Image			- current image
+// 	Images			- all images
+// 	Ribbon			- ribbon or ribbon images
+// 	Marked			- marked images
+// 	Bookmarked		- bookmarked images
+//
+// NOTE: these can also beused as a basis for actions...
+//
+//
 /*********************************************************************/
 
 // NOTE: context is dynamic.
@@ -90,40 +104,6 @@ function Actions(context, names, actions){
 // 			actions chanined to it's main event.
 // 		- actions should accept arguments, both optional and required
 var BASE_ACTIONS = {
-	// basic navigation...
-	nextImage: 'Focus next image in current ribbon',
-	nextRibbon: 'Focus next ribbon (down)',
-	nextScreen: 'Show next screen width of images',
-
-	prevImage: 'Focus previous image in current ribbon',
-	prevRibbon: 'Focus previous ribbon (up)',
-	prevScreen: 'Show previous screen width of images',
-
-	firstImage: 'Focus first image in ribbon',
-	lastImage: 'Focus last image in ribbon',
-
-	// zooming...
-	zoomIn: 'Zoom in',
-	zoomOut: 'Zoom out',
-
-	fitNImages: 'fit N images',
-
-	fitOne: ['Fit one image',{ fitNImages: 1, }],
-	fitTwo: ['Fit two images', { fitNImages: 2, }],
-	fitThree: ['Fit three images', { fitNImages: 3, }],
-	fitFour: ['Fit four images', { fitNImages: 4, }],
-	fitFive: ['Fit five images', { fitNImages: 5, }],
-	fitSix: ['Fit six images', { fitNImages: 6, }],
-	fitSeven: ['Fit seven images', { fitNImages: 7, }],
-	fitEight: ['Fit eight images', { fitNImages: 8, }],
-	fitNine: ['Fit nine images', { fitNImages: 9, }],
-
-	fitMax: 'Fit the maximum number of images',
-
-	fitSmall: 'Show small image',
-	fitNormal: 'Show normal image',
-	fitScreen: 'Fit image to screen',
-
 	// basic editing...
 	shiftImageUp: 
 		'Shift image to the ribbon above current, creating one if '
@@ -142,8 +122,8 @@ var BASE_ACTIONS = {
 	setAsBaseRibbon: '',
 
 	// image adjustments...
-	rotateLeft: '',
+	rotateCW: '',
-	rotateRight: '',
+	rotateCCW: '',
 	flipVertical: '',
 	flipHorizontal: '',
 
@@ -157,6 +137,62 @@ var BASE_ACTIONS = {
 	uncropView: '',
 	uncropAll: '',
 
+	openURL: '',
+	openHistory: '',
+
+	saveState: '',
+	exportImages: '',
+
+	exit: '',
+}
+
+
+// XXX think of a better name...
+function setupBaseActions(context, actions){
+	return Actions(context, BASE_ACTIONS, actions)
+}
+
+
+
+/*********************************************************************/
+
+var UI_ACTIONS = {
+	// basic navigation...
+	nextImage: 'Focus next image in current ribbon',
+	nextRibbon: 'Focus next ribbon (down)',
+	nextScreen: 'Show next screen width of images',
+
+	prevImage: 'Focus previous image in current ribbon',
+	prevRibbon: 'Focus previous ribbon (up)',
+	prevScreen: 'Show previous screen width of images',
+
+	firstImage: 'Focus first image in ribbon',
+	lastImage: 'Focus last image in ribbon',
+
+	// zooming...
+	zoomIn: 'Zoom in',
+	zoomOut: 'Zoom out',
+
+	// NOTE: if this gets a count argument it will fit count images, 
+	// 		default is one.
+	fitImage: 'Fit image',
+
+	// XXX should these be relative to screen rather than actual image counts?
+	fitTwo: ['Fit two images', { fitImage: 2, }],
+	fitThree: ['Fit three images', { fitImage: 3, }],
+	fitFour: ['Fit four images', { fitImage: 4, }],
+	fitFive: ['Fit five images', { fitImage: 5, }],
+	fitSix: ['Fit six images', { fitImage: 6, }],
+	fitSeven: ['Fit seven images', { fitImage: 7, }],
+	fitEight: ['Fit eight images', { fitImage: 8, }],
+	fitNine: ['Fit nine images', { fitImage: 9, }],
+
+	fitMax: 'Fit the maximum number of images',
+
+	fitSmall: 'Show small image',
+	fitNormal: 'Show normal image',
+	fitScreen: 'Fit image to screen',
+
 	// modes...
 	singleImageMode: '',
 	ribbonMode: '',
@@ -172,14 +208,6 @@ var BASE_ACTIONS = {
 	showStatesPanel: '',
 	showConsolePanel: '',
 
-	openURL: '',
-	openHistory: '',
-
-	saveState: '',
-	exportImages: '',
-
-	exit: '',
-
 	// developer actions...
 	showConsole: '',
 	showDevTools: '',
@@ -187,8 +215,8 @@ var BASE_ACTIONS = {
 
 
 // XXX think of a better name...
-function setupBaseActions(context, actions){
+function setupUIActions(context, actions){
-	return Actions(context, BASE_ACTIONS, actions)
+	return Actions(context, UI_ACTIONS, actions)
 }
 
 

ui/image.js

@@ -282,6 +282,66 @@ function updateImages(list, size, cmp){
 }
 
 
+// Compensate for viewer proportioned and rotated images.
+//
+// This will set the margins so as to make the rotated image offset the
+// same space as it is occupying visually...
+//
+// NOTE: this is not needed for square image blocks.
+// NOTE: if an image block is square, this will remove the margins.
+function correctImageProportionsForRotation(images, container){
+	container = container == null ? $('.viewer') : container
+
+	var W = container.innerWidth()
+	var H = container.innerHeight()
+
+	var viewer_p = W > H ? 'landscape' : 'portrait'
+
+	return $(images).each(function(i, e){
+		var image = $(this)
+		// orientation...
+		var o = image.attr('orientation')
+		o = o == null ? 0 : o
+		var w = image.outerWidth()
+		var h = image.outerHeight()
+
+		// non-square image...
+		if(w != h){
+
+			var image_p = w > h ? 'landscape' : 'portrait'
+
+			// when the image is turned 90deg/270deg and its 
+			// proportions are the same as the screen...
+			if((o == 90 || o == 270) && image_p == viewer_p){
+				image.css({
+					width: h,
+					height: w,
+				})
+				image.css({
+					'margin-top': -((w - h)/2),
+					'margin-bottom': -((w - h)/2),
+					'margin-left': (w - h)/2,
+					'margin-right': (w - h)/2,
+				})
+
+			} else if((o == 0 || o == 180) && image_p != viewer_p){
+				image.css({
+					width: h,
+					height: w,
+				})
+				image.css({
+					'margin': '',
+				})
+			}
+
+		// square image...
+		} else {
+			image.css({
+				'margin': '',
+			})
+		}
+	})
+}
 
 
 

ui/ribbons.js

@@ -908,68 +908,6 @@ function nextRibbon(){
 
 /******************************************************** Rotating ***/
 
-// Compensate for viewer proportioned and rotated images.
-//
-// This will set the margins so as to make the rotated image offset the
-// same space as it is occupying visually...
-//
-// NOTE: this is not needed for square image blocks.
-// NOTE: if an image block is square, this will remove the margins.
-function correctImageProportionsForRotation(images, container){
-	container = container == null ? $('.viewer') : container
-
-	var W = container.innerWidth()
-	var H = container.innerHeight()
-
-	var viewer_p = W > H ? 'landscape' : 'portrait'
-
-	return $(images).each(function(i, e){
-		var image = $(this)
-		// orientation...
-		var o = image.attr('orientation')
-		o = o == null ? 0 : o
-		var w = image.outerWidth()
-		var h = image.outerHeight()
-
-		// non-square image...
-		if(w != h){
-
-			var image_p = w > h ? 'landscape' : 'portrait'
-
-			// when the image is turned 90deg/270deg and its 
-			// proportions are the same as the screen...
-			if((o == 90 || o == 270) && image_p == viewer_p){
-				image.css({
-					width: h,
-					height: w,
-				})
-				image.css({
-					'margin-top': -((w - h)/2),
-					'margin-bottom': -((w - h)/2),
-					'margin-left': (w - h)/2,
-					'margin-right': (w - h)/2,
-				})
-
-			} else if((o == 0 || o == 180) && image_p != viewer_p){
-				image.css({
-					width: h,
-					height: w,
-				})
-				image.css({
-					'margin': '',
-				})
-			}
-
-		// square image...
-		} else {
-			image.css({
-				'margin': '',
-			})
-		}
-	})
-}
-
-
 var _cw = {
 	null: 0,
 	0: 90,