reworked slideshow pausing...

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

ui (gen4)/css/layout.less

@@ -318,21 +318,27 @@ button:hover {
 	position: relative;
 	float: left;
 
-	opacity: 0.4;
-
 	size: 30px;
 
 	cursor: default;
 
 	z-index: 4000;
 }
-.buttons:hover {
+
+/* general button visibility */
+.buttons .button {
+	opacity: 0.4;
+}
+.buttons:hover .button {
 	opacity: 1;
 }
-.light .buttons {
+.buttons .button.visible {
+	opacity: 1 !important;
+}
+.light .buttons .button {
 	opacity: 0.5;
 }
-.dark .buttons {
+.dark .buttons .button {
 	opacity: 0.2;
 }
 
@@ -394,16 +400,11 @@ button:hover {
 }
 
 
-
 /* main buttons... */
 .main-buttons.buttons {
 	top: 0px;
 	left: 0px;
 }
-.main-buttons.buttons:hover {
-	opacity: 1;
-}
-
 
 
 /* secondary buttons... */
@@ -411,9 +412,6 @@ button:hover {
 	top: 0px;
 	float: right;
 }
-.secondary-buttons.buttons:hover {
-	opacity: 1;
-}
 /*
 .secondary-buttons.buttons {
 	top: 40px;
@@ -432,9 +430,6 @@ button:hover {
 
 	z-index: 9999;
 }
-.app-buttons.buttons:hover {
-	opacity: 1;
-}
 .app-buttons .button.close:hover {
 	background: rgba(255, 0, 0, 0.8);
 }
@@ -538,12 +533,12 @@ button:hover {
 }
 
 /* XXX not sure if this is the right way to go... */
-.single-image-mode .main-buttons,
+.single-image-mode .main-buttons:not(:hover) .button,
-.single-image-mode .app-buttons {
+.single-image-mode .app-buttons:not(:hover) .button {
 	opacity: 0.1;
 }
-.slideshow-running .main-buttons,
+.slideshow-running .main-buttons:not(:hover) .button,
-.slideshow-running .app-buttons {
+.slideshow-running .app-buttons:not(:hover) .button {
 	opacity: 0;
 }
 

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

@@ -48,6 +48,7 @@ var SlideshowActions = actions.Actions({
 		],
 	},
 
+	// XXX should this take the slideshow off pause if paused???
 	toggleSlideshow: ['Slideshow/$Slideshow quick toggle',
 		toggler.CSSClassToggler(
 			function(){ return this.dom }, 
@@ -183,6 +184,14 @@ var SlideshowActions = actions.Actions({
 			return o
 		})],
 
+	slideshowButtonAction: ['- Slideshow/',
+		core.doc`
+		`,
+		function(){
+			return this.toggleSlideshowTimer('?') == 'paused' ?
+				(this.toggleSlideshowTimer() && 'on')
+				: this.toggleSlideshow() }],
+	
 	// settings...
 	// NOTE: these are disabled as they are repeated in the slideshow dialog...
 	// XXX do we need both these and the dialog???
@@ -241,7 +250,7 @@ var SlideshowActions = actions.Actions({
 				this.__slideshow_timer = 'suspended'
 			}
 		}],
-	toggleSlideshowTimer:['Slideshow/Pause or resume running slideshow',
+	toggleSlideshowTimer: ['Slideshow/Pause or resume running slideshow',
 		core.doc`
 
 		NOTE: this will have no effect if the slideshow is not running...
@@ -250,8 +259,10 @@ var SlideshowActions = actions.Actions({
 		toggler.Toggler(null, 
 			function(_, state){ 
 				if(state == null){
-					return this.__slideshow_timer == 'suspended' ? 'paused' 
+					return this.__slideshow_timer == 'suspended' ? 
-						: !!this.__slideshow_timer ? 'running'
+							'paused' 
+						: !!this.__slideshow_timer ? 
+							'running'
 						: 'off'
 				}
 
@@ -341,12 +352,7 @@ module.Slideshow = core.ImageGridFeatures.Feature({
 		['stop',
 			function(){ this.toggleSlideshow('off') }],
 
-		// slideshow hold...
+		// slideshow pause...
-		//
-		// Holding down a key or mouse button will suspend the slideshow 
-		// and resume it when the key/button is released...
-		//
-		// XXX experimental, needs more testing...
 		['toggleSlideshow',
 			function(){
 				var that = this
@@ -355,20 +361,10 @@ module.Slideshow = core.ImageGridFeatures.Feature({
 					return
 				}
 
+				var running = this.toggleSlideshow('?') == 'on' 
 				var toggle_debounce = false
 
-				var hold = this.__slideshow_hold_handler 
+				// toggle on click...
-					= this.__slideshow_hold_handler 
-						|| function(evt){
-							!toggle_debounce 
-								&& that.toggleSlideshowTimer('?') == 'running'
-								&& that.suspendSlideshowTimer() }
-				var release = this.__slideshow_release_handler 
-					= this.__slideshow_release_handler 
-						|| function(evt){
-							!toggle_debounce 
-								&& that.toggleSlideshowTimer('?') != 'running'
-								&& that.resetSlideshowTimer() }
 				var toggle = this.__slideshow_toggle_handler
 					= this.__slideshow_toggle_handler
 						|| function(){
@@ -377,22 +373,35 @@ module.Slideshow = core.ImageGridFeatures.Feature({
 								toggle_debounce = true
 								setTimeout(function(){ 
 									toggle_debounce = false 
-								}, that.config['image-click-debounce-timeout'] || 100)
+								}, that.config['image-click-debounce-timeout'] || 100) } }
-							}
+				running ?
-						}
+					this.dom.on('click', toggle)
+					: this.dom.off('click', toggle)
 
-				if(this.toggleSlideshow('?') == 'on'){
+				// toggle on blur/focus...
-					this.dom.on('mousedown', hold)
+				var user_paused = false
-					this.dom.on('mouseup', release)
+				var focus_debounce = false
-					this.dom.on('tap', toggle)
+				var blur = this.__slideshow_blur_handler
-
+					= this.__slideshow_blur_handler
-				} else {
+						|| function(){
-					this.dom.off('mousedown', hold)
+							if(!focus_debounce){
-					this.dom.off('mouseup', release)
+								user_paused = that.toggleSlideshowTimer('?') == 'paused' 
-					this.dom.off('touchend', toggle)
+								that.toggleSlideshowTimer('paused') 
-				}
+								focus_debounce = true } }
+				var focus = this.__slideshow_focus_handler
+					= this.__slideshow_focus_handler
+						|| function(){
+							focus_debounce = false
+							user_paused 
+								|| that.toggleSlideshowTimer('running') }
+				running ?
+					this.dom
+						.on('blur', blur)
+						.on('focus', focus)
+					: this.dom
+						.off('blur', blur)
+						.off('focus', focus)
 			}],
-		//*/
 
 		// pause/resume slideshow on modal stuff...
 		['firstModalOpen',

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

@@ -2247,7 +2247,7 @@ var ButtonsActions = actions.Actions({
 			]],
 			'C<sub/>': ['crop', 'browseActions: "Crop/" -- Crop menu...'],
 			'&#9655;': ['slideshow', [
-				'toggleSlideshow -- Slideshow',
+				'slideshowButtonAction -- Slideshow',
 				'slideshowDialog -- Slideshow menu...',
 			]],
 		},
@@ -2411,8 +2411,10 @@ module.Buttons = core.ImageGridFeatures.Feature({
 						'width': '0px',
 						'overflow': 'visible',
 					})
-					.text(l > 99 ?  '99+' 
+					.text(l > 99 ? 
-						: l == 0 ? ''
+							'99+' 
+						: l == 0 ? 
+							''
 						: l)
 				/*
 				$('.main-buttons.buttons .collections.button sub')
@@ -2427,14 +2429,25 @@ module.Buttons = core.ImageGridFeatures.Feature({
 				//*/
 		   	}],
 		// update slideshow status...
-		['toggleSlideshow',
+		[['toggleSlideshow', 'toggleSlideshowTimer'],
 			function(){
+				var mode = this.toggleSlideshow('?')
+				mode = (mode == 'on' 
+						&& this.toggleSlideshowTimer('?') == 'paused') ?
+					'paused'
+					: mode
+				// update the button icon...
 				$('.main-buttons.buttons .slideshow.button')
-					.html(this.toggleSlideshow('?') == 'on' ? 
+					.html(mode == 'on' ? 
 							'&#9724;' 
+						: mode == 'paused' ?
+							'&#10074;&#10074;'
 						//'&#9723;'
 						: '&#9655;') 
-			}],
+					.run(function(){
+						mode == 'paused' ?
+							this.addClass('visible')
+							: this.removeClass('visible') }) }],
 		// update zoom button status...
 		['viewScale', 
 			function(){

ui (gen4)/lib/widget/browse2.js

@@ -1314,6 +1314,15 @@ var BaseBrowserPrototype = {
 	// NOTE: this may or may not be a Browser object.
 	parent: null,
 
+	// Root dialog...
+	//
+	get root(){
+		var cur = this
+		while(cur.parent instanceof BaseBrowser){
+			cur = cur.parent
+		}
+		return cur },
+
 	// Section containers...
 	//
 	// Format:
@@ -5180,8 +5189,16 @@ var HTMLBrowserPrototype = {
 					that.dom
 						&& that.dom.focus() }) },
 	__open__: function(evt, elem){ this.focus(elem) },
+	//* XXX there is a problem with .update() propagation up the nested 
+	// 		dialogs -- we lose context...
+	// 		...see .renderContext(..) / .renderFinalize(..) for details...
 	__expand__: function(){ this.update() },
 	__collapse__: function(){ this.update() },
+	/*/ 
+	// XXX this is a hack -- we should fix the actual update propagation and revert to the above...
+	__expand__: function(){ this.root.update() },
+	__collapse__: function(){ this.root.update() },
+	//*/
 	__select__: updateElemClass('add', 'selected'),
 	__deselect__: updateElemClass('remove', 'selected'),
 	__disable__: updateElemClass('add', 'disabled', function(){ this.update() }),