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,82 +61,78 @@ 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',
+			function(state){
+				// start...
+				if(state == 'on'){
+					var that = this
 
+					// reset the timer...
+					// NOTE: this means we were in a slideshow mode so we do not
+					// 		need to prepare...
+					if(this.__slideshouw_timer){
+						clearTimeout(this.__slideshouw_timer)
+						delete this.__slideshouw_timer
 
-	// XXX might be good to add a slideshow countdown/indicator for 
+					// prepare for the slideshow...
-	// 		timers longer than 0.5-1sec...
+					} else {
-	_startSlideshow: ['- Slideshow/',
+						// XXX get state before setting/hiding things...
-		function(){
+						// XXX
-			var that = this
+				
+						// single image mode...
+						this.toggleSingleImage('on')
 
-			// reset the timer...
+						// XXX hide all marks...
-			// NOTE: this means we were in a slideshow mode so we do not
+						// XXX
-			// 		need to prepare...
+					}
-			if(this.__slideshouw_timer){
-				clearTimeout(this.__slideshouw_timer)
-				delete this.__slideshouw_timer
 
-			// prepare for the slideshow...
+					// start the timer... 
-			} else {
+					// XXX might be a good idea to add a pause button for either
-				// XXX get state before setting/hiding things...
+					// 		"toggle" or "hold to pause" mode...
-				// XXX
+					this.__slideshouw_timer = setInterval(function(){
-		
+						var cur = that.current
-				// single image mode...
-				this.toggleSingleImage('on')
 
-				// XXX hide all marks...
+						// next step...
-				// XXX
+						that.config['ui-slideshow-direction'] == 'forward' ?
-			}
+							that.nextImage()
+							: that.prevImage()
 
-			// start the timer... 
+						// we have reached the end...
-			// XXX might be a good idea to add a pause button for either
+						if(that.current == cur && that.config['ui-slideshow-looping'] == 'on'){
-			// 		"toggle" or "hold to pause" mode...
+							that.config['ui-slideshow-direction'] == 'forward' ?
-			this.__slideshouw_timer = setInterval(function(){
+								that.firstImage()
-				var cur = that.current
+								: that.lastImage()
+						}
+					}, Date.str2ms(this.config['ui-slideshow-interval'] || '3s'))
 
-				// next step...
+				// stop...
-				that.config['ui-slideshow-direction'] == 'next' ?
+				} else {
-					that.nextImage()
+					// stop timer...
-					: that.prevImage()
+					clearTimeout(this.__slideshouw_timer)
+					delete this.__slideshouw_timer
+
+					// XXX restore state...
+					// XXX
 
-				// we have reached the end...
-				if(that.current == cur && that.config['ui-slideshow-looping']){
-					that.config['ui-slideshow-direction'] == 'next' ?
-						that.firstImage()
-						: that.lastImage()
 				}
-			}, Date.str2ms(this.config['ui-slideshow-interval'] || '3s'))
+			})],
-		}],
+	resetSlideshowTimer: ['- Slideshow/Restart slideshow timer',
-	// XXX restart the countdown to the next image...
-	// 		...this is useful after manual navigation...
-	// XXX do we need this???
-	// 		...might be a good idea to use .toggleSlideshow('on') instead...
-	_resetSlideshowTimer: ['- Slideshow/',
 		function(){
-			this._startSlideshow()
+			this.__slideshouw_timer && this.toggleSlideshow('on')
-		}],
-	_stopSlideshow: ['- Slideshow/',
-		function(){
-			// stop timer...
-			clearTimeout(this.__slideshouw_timer)
-			delete this.__slideshouw_timer
-
-			// XXX restore state...
-			// XXX
 		}],
 })