added STUB slideshow UI + refactoring...

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

ui (gen4)/features/base.js

@@ -73,6 +73,7 @@ function(attr, states, callback){
 			}
 		},
 		states,
+		// XXX should we focus image by default here???
 		callback || function(action){ action != null && this.focusImage() })
 }
 

ui (gen4)/features/ui-slideshow.js

@@ -22,8 +22,8 @@ var base = require('features/base')
 // XXX stub...
 var SlideshowActions = actions.Actions({
 	config: {
-		'ui-slideshow-looping': true,
+		'ui-slideshow-looping': 'on',
-		'ui-slideshow-direction': 'next',
+		'ui-slideshow-direction': 'forward',
 		'ui-slideshow-interval': '3s',
 
 		'ui-slideshow-saved-intervals': [
@@ -61,26 +61,24 @@ var SlideshowActions = actions.Actions({
 	// 				Custom...		-- editable/placeholder... 'enter' 
 	// 									selects value and adds it to 
 	// 									history...
-	selectSlideshowInterval: ['Slideshow/Interval/*',
+	// XXX add a custom setting...
-		// XXX make this a custom menu rather than a lister... (???)
+	// XXX STUB
-		function(path, make){
+	selectSlideshowInterval: ['Slideshow/Interval',
-			make('0.2') 
+		base.makeConfigToggler('ui-slideshow-interval', 
-			make('1') 
+			function(){ return this.config['ui-slideshow-saved-intervals'] })],
-			make('3') 
+
-			make('Custom...') 
-		}],
 	toggleSlideshowDirection: ['Slideshow/Direction',
-		function(){}],
+		base.makeConfigToggler('ui-slideshow-direction', ['forward', 'reverse'])],
 	toggleSlideshowLooping: ['Slideshow/Looping',
-		function(){}],
+		base.makeConfigToggler('ui-slideshow-looping', ['on', 'off'])],
+	// XXX need to save/load state...
 	toggleSlideshow: ['Slideshow/Start',
-		function(){}],
+		toggler.CSSClassToggler(
-
+			function(){ return this.ribbons.viewer }, 
-
+			'slideshow-running',
-	// XXX might be good to add a slideshow countdown/indicator for 
+			function(state){
-	// 		timers longer than 0.5-1sec...
+				// start...
-	_startSlideshow: ['- Slideshow/',
+				if(state == 'on'){
-		function(){
 					var that = this
 
 					// reset the timer...
@@ -109,34 +107,32 @@ var SlideshowActions = actions.Actions({
 						var cur = that.current
 
 						// next step...
-				that.config['ui-slideshow-direction'] == 'next' ?
+						that.config['ui-slideshow-direction'] == 'forward' ?
 							that.nextImage()
 							: that.prevImage()
 
 						// we have reached the end...
-				if(that.current == cur && that.config['ui-slideshow-looping']){
+						if(that.current == cur && that.config['ui-slideshow-looping'] == 'on'){
-					that.config['ui-slideshow-direction'] == 'next' ?
+							that.config['ui-slideshow-direction'] == 'forward' ?
 								that.firstImage()
 								: that.lastImage()
 						}
 					}, Date.str2ms(this.config['ui-slideshow-interval'] || '3s'))
-		}],
+
-	// XXX restart the countdown to the next image...
+				// stop...
-	// 		...this is useful after manual navigation...
+				} else {
-	// XXX do we need this???
-	// 		...might be a good idea to use .toggleSlideshow('on') instead...
-	_resetSlideshowTimer: ['- Slideshow/',
-		function(){
-			this._startSlideshow()
-		}],
-	_stopSlideshow: ['- Slideshow/',
-		function(){
 					// stop timer...
 					clearTimeout(this.__slideshouw_timer)
 					delete this.__slideshouw_timer
 
 					// XXX restore state...
 					// XXX
+
+				}
+			})],
+	resetSlideshowTimer: ['- Slideshow/Restart slideshow timer',
+		function(){
+			this.__slideshouw_timer && this.toggleSlideshow('on')
 		}],
 })