mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-31 03:10:07 +00:00 
			
		
		
		
	added slideshow mode...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									d7714eb0b2
								
							
						
					
					
						commit
						cf0b7ad7fc
					
				| @ -61,6 +61,25 @@ var KEYBOARD_CONFIG = { | |||||||
| 	}, | 	}, | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | 	// slideshow mode...
 | ||||||
|  | 	//
 | ||||||
|  | 	'.slideshow-mode': { | ||||||
|  | 		title: 'Slideshow mode', | ||||||
|  | 
 | ||||||
|  | 		ignore: [ | ||||||
|  | 			'Up', 'Down', 'Enter', | ||||||
|  | 			], | ||||||
|  | 
 | ||||||
|  | 		Esc: doc('Exit/stop slideshow',  | ||||||
|  | 				function(){  | ||||||
|  | 					toggleSlideShowMode('off')  | ||||||
|  | 					return false | ||||||
|  | 				}), | ||||||
|  | 		S: 'Esc', | ||||||
|  | 		Q: 'Esc', | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| 	// single image mode...
 | 	// single image mode...
 | ||||||
| 	//
 | 	//
 | ||||||
| 	'.single-image-mode': { | 	'.single-image-mode': { | ||||||
| @ -243,6 +262,8 @@ var KEYBOARD_CONFIG = { | |||||||
| 		B: doc('Toggle theme', function(){ toggleTheme() }), | 		B: doc('Toggle theme', function(){ toggleTheme() }), | ||||||
| 
 | 
 | ||||||
| 		S: { | 		S: { | ||||||
|  | 				default: doc('Start slideshow',  | ||||||
|  | 					function(){ toggleSlideShowMode('on') }), | ||||||
| 				ctrl: doc('Save current state',  | 				ctrl: doc('Save current state',  | ||||||
| 					function(){ | 					function(){ | ||||||
| 						event.preventDefault() | 						event.preventDefault() | ||||||
|  | |||||||
							
								
								
									
										54
									
								
								ui/modes.js
									
									
									
									
									
								
							
							
						
						
									
										54
									
								
								ui/modes.js
									
									
									
									
									
								
							| @ -55,6 +55,60 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer', | |||||||
| 		}) | 		}) | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | var SLIDESHOW_INTERVAL = 3000 | ||||||
|  | var SLIDESHOW_LOOP = true | ||||||
|  | var SLIDESHOW_DIRECTION = 'next' | ||||||
|  | 
 | ||||||
|  | // TODO account for ribbon start/end (loop or stop slideshow)
 | ||||||
|  | // TODO transitions...
 | ||||||
|  | // TODO a real setup UI (instead of prompt)
 | ||||||
|  | var toggleSlideShowMode = createCSSClassToggler('.viewer', '.slideshow-mode', | ||||||
|  | 		function(action){ | ||||||
|  | 			if(action == 'on'){ | ||||||
|  | 				updateStatus('Slideshow...').show() | ||||||
|  | 
 | ||||||
|  | 				// interval from user...
 | ||||||
|  | 				// XXX make this a real UI...
 | ||||||
|  | 				var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000) | ||||||
|  | 
 | ||||||
|  | 				// user cancelled...
 | ||||||
|  | 				if(interval == null){ | ||||||
|  | 					showStatus('Slideshow: cencelled...') | ||||||
|  | 					toggleSlideShowMode('off') | ||||||
|  | 					return  | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 				SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000 | ||||||
|  | 
 | ||||||
|  | 				showStatus('Slideshow: starting...') | ||||||
|  | 
 | ||||||
|  | 				toggleSingleImageMode('on') | ||||||
|  | 				_slideshow_timer = setInterval(function(){ | ||||||
|  | 					var cur = getImage() | ||||||
|  | 					// advance the image...
 | ||||||
|  | 					var next = SLIDESHOW_DIRECTION == 'next' ? nextImage() : prevImage() | ||||||
|  | 
 | ||||||
|  | 					// handle slideshow end...
 | ||||||
|  | 					if(getImageGID(cur) == getImageGID(next)){ | ||||||
|  | 						if(SLIDESHOW_LOOP){ | ||||||
|  | 							SLIDESHOW_DIRECTION == 'next' ? firstImage() : lastImage() | ||||||
|  | 						} else { | ||||||
|  | 							toggleSlideShowMode('off') | ||||||
|  | 							return  | ||||||
|  | 						} | ||||||
|  | 					} | ||||||
|  | 
 | ||||||
|  | 					// center and trigger load events...
 | ||||||
|  | 					centerRibbon() | ||||||
|  | 				}, SLIDESHOW_INTERVAL) | ||||||
|  | 
 | ||||||
|  | 			} else { | ||||||
|  | 				window._slideshow_timer != null && clearInterval(_slideshow_timer) | ||||||
|  | 				showStatus('Slideshow: stopped...') | ||||||
|  | 			} | ||||||
|  | 		}) | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| var toggleTheme = createCSSClassToggler('.viewer', | var toggleTheme = createCSSClassToggler('.viewer', | ||||||
| 		[ | 		[ | ||||||
| 			'gray', | 			'gray', | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user