done with this iteration of refactoring and cleanup...

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

ui/gallery-prototype.js

@@ -789,8 +789,8 @@ function setupEvents(){
 		.swipe({
 			swipeLeft: ImageGrid.nextImage,
 			swipeRight: ImageGrid.prevImage,
-			swipeUp: shiftImageUp,
+			swipeUp: ImageGrid.shiftImageUp,
-			swipeDown: shiftImageDown
+			swipeDown: ImageGrid.shiftImageDown
 		})
 	// dragging...
 	// XXX make this work seamlessly with touchSwipe...
@@ -809,8 +809,8 @@ function setupControlElements(){
 	$('.screen-button.next-image').click(ImageGrid.nextImage)
 	$('.screen-button.prev-image').click(ImageGrid.prevImage)
 	// XXX rename classes to "shift-image-up" and "shift-image-down"...
-	$('.screen-button.demote').click(shiftImageUp)
+	$('.screen-button.demote').click(ImageGrid.shiftImageUp)
-	$('.screen-button.promote').click(shiftImageDown)
+	$('.screen-button.promote').click(ImageGrid.shiftImageDown)
 	$('.screen-button.zoom-in').click(ImageGrid.scaleContainerUp)
 	$('.screen-button.zoom-out').click(ImageGrid.scaleContainerDown)
 	// XXX
@@ -1471,15 +1471,18 @@ ImageGrid.GROUP('Zooming',
 
 
 
-/********************************************************** Actions **/
+/*************************************************** Ribbon Actions **/
 // basic actions...
 // NOTE: below 'direction' argument is meant in the html sence, 
 //       i.e. next/prev...
 
-// create ribbon above/below helpers...
+ImageGrid.GROUP('Ribbon manipulations',
-// XXX adding a ribbon above the current is still jumpy, need to devise 
+	// XXX adding a ribbon above the current is still jumpy, need to devise 
-// 		a cleaner way to do this...
+	// 		a cleaner way to do this...
-function createRibbon(direction){
+	ImageGrid.ACTION({
+			title: 'Create a ribbon above/below current'
+		},
+		function createRibbon(direction){
 			if(direction == 'next'){
 				var insert = 'insertAfter'
 			} else if(direction == 'prev') {
@@ -1506,18 +1509,18 @@ function createRibbon(direction){
 			$('.field').removeClass('unanimated')	
 
 			return res
-}
+		}),
 
-
+	// XXX this uses jquery animation...
-
+	// XXX one way to optimise this is to add the lesser ribbon to the 
-// merge current and direction ribbon...
+	//     greater disregarding their actual order...
-// NOTE: this will take all the elements from direction ribbon and add
+	// XXX think about using $(...).sortChildren(...) / sortImages()
-//       them to current
+	ImageGrid.ACTION({
-// XXX this uses jquery animation...
+			title: 'Merge current and direction ribbon.',
-// XXX one way to optimise this is to add the lesser ribbon to the 
+			doc: 'NOTE: this will take all the elements from direction '+
-//     greater disregarding their actual order...
+				'ribbon and add them to current.'
-// XXX think about using $(...).sortChildren(...) / sortImages()
+		},
-function mergeRibbons(direction, get_order){
+		function mergeRibbons(direction, get_order){
 			if(get_order == null){
 				get_order = getImageOrder
 			}
@@ -1544,20 +1547,33 @@ function mergeRibbons(direction, get_order){
 						$(this).remove()
 						$('.current.image').click()
 					})
-}
+		}),
+		
+	ImageGrid.ACTION({
+			title: 'Reverse ribbon order',
+			doc: 'NOTE: this is like flipping the field vertically.',
+		},
+		function reverseRibbons(){
+			// reverse...
+			$('.field').reverseChildren()
+			// compensate for offset cange...
+			$('.current.image').click()
+		}))
 
 
 
 
-/*************************************************** Editor Actions **/
+/**************************************************** Image Actions **/
-
+ImageGrid.GROUP('Image manipulation',
-// now the actual modifiers...
+	ImageGrid.ACTION({
-function shiftImage(direction, get_order){
+			title: 'Shift image in direction',
+		},
+		function shiftImage(direction, get_order){
 			if(get_order == null){
 				get_order = getImageOrder
 			}
 			if($('.current.ribbon')[direction]('.ribbon').length == 0){
-		createRibbon(direction)
+				ImageGrid.createRibbon(direction)
 			}
 
 			// get previous element after which we need to put the current...
@@ -1567,7 +1583,7 @@ function shiftImage(direction, get_order){
 
 			// last image in ribbon, merge...
 			if($('.current.ribbon').children('.image').length == 1){
-		mergeRibbons(direction)
+				ImageGrid.mergeRibbons(direction)
 			} else {
 				img = $('.current.image')
 				if(img.next('.image').length == 0){
@@ -1589,59 +1605,50 @@ function shiftImage(direction, get_order){
 				}
 			}
 			$('.current.image').click()
-}
+		}),
-var shiftImageDown = function(){ return shiftImage('next') }
+	ImageGrid.ACTION({ title: 'Shift image up', }, 
-var shiftImageUp = function(){ return shiftImage('prev') }
+		function shiftImageUp(){ return ImageGrid.shiftImage('prev') }),
+	ImageGrid.ACTION({ title: 'Shift image down', }, 
+		function shiftImageDown(){ return ImageGrid.shiftImage('next') }),
 			
-
+	ImageGrid.ACTION({ 
-
+			title: 'Sort images in all ribbons',
-// reverse the ribbon order...
+			doc: 'NOTE: this will only realign three ribbons.'
-// NOTE: this is like flipping the field vertically...
+		}, 
-function reverseRibbons(){
+		function sortImages(){
-	// reverse...
-	$('.field').reverseChildren()
-	// compensate for offset cange...
-	$('.current.image').click()
-}
-
-
-
-// sort all images in all ribbons...
-// NOTE: this will only align three ribbons...
-function sortImages(){
 			$('.ribbon').sortChildren(cmpImageOrder)
 			// compensate for offset cange...
 			$('.current.image').click()
-}
+		}),
-
+	ImageGrid.ACTION({ 
-
+			title: 'Sort images via a different criteria',
-// use the cmp function to update image id's and resort...
+			doc: 'use the cmp function to update image id\'s and resort.'
-function resortImagesVia(cmp){
+		}, 
+		function sortImagesVia(cmp){
 			// reverse ID order...
 			$($('.image').get().sort(cmp))
 				.each(function(i, e){$(e).attr({'id': i})})
 			// resort the images...
-	sortImages()
+			ImageGrid.sortImages()
-}
+		}),
-
+	ImageGrid.ACTION({ 
-
+			title: 'Reverse order of images in all ribbons',
-// reverse the order of images in all ribbons by reversing their id attr
+		}, 
-// and resorting...
+		function reverseImageOrder(){
-// NOTE: this is like flipping the field horizontally...
+			// this is done by reversing their id attr
-function reverseImageOrder(){
+			ImageGrid.sortImagesVia(function(a, b){return cmpImageOrder(b, a)})
-	resortImagesVia(function(a, b){return cmpImageOrder(b, a)})
+		}),
-}
+	ImageGrid.ACTION({ 
-
+			title: 'Sort images by their full path',
-
+		}, 
-// sort images py their full path...
+		// XXX this should use a normalized path...
-// XXX this should use a normalized path...
+		function sortImagesByPath(){
-function sortImagesByPath(){
+			ImageGrid.sortImagesVia(function(a, b){ 
-	resortImagesVia(function(a, b){ 
 				a = $(a).css('background-image')
 				b = $(b).css('background-image') 
 				return a > b ? 1 : a < b ? -1 : 0
 			})
-}
+		}))
 
 
 // XXX group images in ribbon and merge down/up

ui/gallery.html

@@ -135,13 +135,13 @@ $(document).ready(setup);
 
 <div class="demo-buttons">
 	<button onclick="toggleMarkers()">Toggle Markers (m)</button>
-	<button onclick="toggleBackgroundModes()">toggle background modes (b)</button>
+	<button onclick="ImageGrid.toggleBackgroundModes()">toggle background modes (b)</button>
 	<button onclick="ImageGrid.toggleControls()">toggle screen controls (tab)</button>
 
 	<br><br>
 
-	<button onclick="centerCurrentImage()">center current (o)</button>
+	<button onclick="ImageGrid.centerCurrentImage()">center current (o)</button>
-	<button onclick="centerOrigin()">center origin</button>
+	<button onclick="ImageGrid.centerOrigin()">center origin</button>
 
 	<br><br>
 
@@ -149,17 +149,17 @@ $(document).ready(setup);
 
 	<br><br>
 
-	<button onclick="firstImage()">first (home)</button>
+	<button onclick="ImageGrid.firstImage()">first (home)</button>
-	<button onclick="prevImage()">prev (left)</button>
+	<button onclick="ImageGrid.prevImage()">prev (left)</button>
-	<button onclick="nextImage()">next (right)</button>
+	<button onclick="ImageGrid.nextImage()">next (right)</button>
-	<button onclick="lastImage()">last (end)</button>
+	<button onclick="ImageGrid.lastImage()">last (end)</button>
 
 	<br><br>
 
-	<button onclick="moveViewLeft()">left (h)</button>
+	<button onclick="ImageGrid.moveViewLeft()">left (h)</button>
-	<button onclick="moveViewUp()">Up (k)</button>
+	<button onclick="ImageGrid.moveViewUp()">Up (k)</button>
-	<button onclick="moveViewDown()">Down (j)</button>
+	<button onclick="ImageGrid.moveViewDown()">Down (j)</button>
-	<button onclick="moveViewRight()">right (l)</button>
+	<button onclick="ImageGrid.moveViewRight()">right (l)</button>
 
 	<!--br><br>
 	LEGACY:
@@ -169,21 +169,21 @@ $(document).ready(setup);
 
 	<br><br>
 
-	<button onclick="zoomContainerBy(2)">Zoom in (+)</button>
+	<button onclick="ImageGrid.scaleContainerUp()">Zoom in (+)</button>
-	<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
+	<button onclick="ImageGrid.scaleContainerDown()">Zoom out (-)</button>
-	<button onclick="setContainerScale(1)">Original (0)</button>
+	<button onclick="ImageGrid.setContainerScale(1)">Original (0)</button>
-	<button onclick="fitImage()">Image (1)</button>
+	<button onclick="ImageGrid.fitImage()">Image (1)</button>
-	<button onclick="fitThreeImages()">Three (3)</button>
+	<button onclick="ImageGrid.fitThreeImages()">Three (3)</button>
 
 	<br><br>
 
-	<button onclick="createRibbon('prev')" disabled>create ribbon above (helper)</button><br>
+	<button onclick="ImageGrid.createRibbon('prev')" disabled>create ribbon above (helper)</button><br>
-	<button onclick="createRibbonBelow('next')" disabled>create ribbon below (helper)</button>
+	<button onclick="ImageGrid.createRibbon('next')" disabled>create ribbon below (helper)</button>
 
 	<br><br>
 
-	<button onclick="mergeRibbons('prev')">merge ribbons up</button><br>
+	<button onclick="ImageGrid.mergeRibbons('prev')">merge ribbons up</button><br>
-	<button onclick="mergeRibbons('next')">merge ribbons down</button>
+	<button onclick="ImageGrid.mergeRibbons('next')">merge ribbons down</button>
 
 	<br><br>
 
@@ -193,8 +193,8 @@ $(document).ready(setup);
 
 	<br><br>
 
-	<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br>
+	<button onclick="ImageGrid.focusAboveRibbon()">focus above ribbon (up)</button><br>
-	<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
+	<button onclick="ImageGrid.focusBelowRibbon()">focus below ribbon (down)</button>
 
 </div>
 

ui/keybindings.js

@@ -66,20 +66,20 @@ var keybindings = {
 	// combined navigation with actions..
 	40:	{
 		'default': ImageGrid.focusBelowRibbon,				//	Down
-		'shift': shiftImageDown,							//	shift-Down
+		'shift': ImageGrid.shiftImageDown,					//	shift-Down
 		// XXX make this into a real action...
 		'ctrl+shift': function(){							//	ctrl-shift-Down
-			createRibbon('next')
+			ImageGrid.createRibbon('next')
-			shiftImageDown()
+			ImageGrid.shiftImageDown()
 		}
 	},
 	38: {
 		'default': ImageGrid.focusAboveRibbon,				//	Up
-		'shift': shiftImageUp,								//	shift-Up
+		'shift': ImageGrid.shiftImageUp,					//	shift-Up
 		// XXX make this into a real action...
 		'ctrl+shift': function(){							//	ctrl-shift-Up
-			createRibbon('prev')
+			ImageGrid.createRibbon('prev')
-			shiftImageUp()
+			ImageGrid.shiftImageUp()
 		}
 	},