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

/**********************************************************************
* 
*
*
**********************************************************************/

define(function(require){ var module = {}

//var DEBUG = DEBUG != null ? DEBUG : true

var toggler = require('lib/toggler')
var actions = require('lib/actions')
var features = require('lib/features')

var core = require('features/core')
var base = require('features/base')



/*********************************************************************/

// XXX stub...
var SlideshowActions = actions.Actions({
	config: {
		'ui-slideshow-looping': true,
		'ui-slideshow-direction': 'next',
		'ui-slideshow-interval': '3s',

		'ui-slideshow-saved-intervals': [
			'0.2s',
			'3s',
			'5s',
			'7s',
		],
	},

	// XXX
	// 	/Slideshow/
	// 		Interval (3)/				-- not a toggler
	// 			0.2
	// 			1
	// 			3*
	// 			5
	// 			Custom...				-- click to edit
	// 		Direction (forward)/
	// 			forward*
	// 			revrse
	// 		Looping (on)/
	// 			on*
	// 			off
	// 		Start
	// XXX need to set the default value in title...
	// XXX might be a good idea to make this with an editable value...
	// 		i.e.
	// 			Interval: 3s /		-- 3s is editable...
	// 				0.2		x		-- a history of values that can be 
	// 									selected w/o closing the dialog
	// 									or can be removed...
	// 				1		x
	// 				3		x
	// 				Custom...		-- editable/placeholder... 'enter' 
	// 									selects value and adds it to 
	// 									history...
	selectSlideshowInterval: ['Slideshow/Interval/*',
		// XXX make this a custom menu rather than a lister... (???)
		function(path, make){
			make('0.2') 
			make('1') 
			make('3') 
			make('Custom...') 
		}],
	toggleSlideshowDirection: ['Slideshow/Direction',
		function(){}],
	toggleSlideshowLooping: ['Slideshow/Looping',
		function(){}],
	toggleSlideshow: ['Slideshow/Start',
		function(){}],


	// XXX might be good to add a slideshow countdown/indicator for 
	// 		timers longer than 0.5-1sec...
	_startSlideshow: ['- Slideshow/',
		function(){
			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

			// prepare for the slideshow...
			} else {
				// XXX get state before setting/hiding things...
				// XXX
		
				// single image mode...
				this.toggleSingleImage('on')

				// XXX hide all marks...
				// XXX
			}

			// start the timer... 
			// XXX might be a good idea to add a pause button for either
			// 		"toggle" or "hold to pause" mode...
			this.__slideshouw_timer = setInterval(function(){
				var cur = that.current

				// next step...
				that.config['ui-slideshow-direction'] == 'next' ?
					that.nextImage()
					: that.prevImage()

				// 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'))
		}],
	// 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()
		}],
	_stopSlideshow: ['- Slideshow/',
		function(){
			// stop timer...
			clearTimeout(this.__slideshouw_timer)
			delete this.__slideshouw_timer

			// XXX restore state...
			// XXX
		}],
})


var Slideshow = 
module.Slideshow = core.ImageGridFeatures.Feature({
	title: '',
	doc: '',

	tag: 'ui-slideshow',
	depends: [
		'ui',
		'ui-single-image-view',
	],

	actions: SlideshowActions,
})





/**********************************************************************
* vim:set ts=4 sw=4 :                                                */
return module })