flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 02:10:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

reworked slideshow pausing...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2019-08-01 18:45:29 +03:00
parent 618a872c02
commit ea773dafd4
4 changed files with 98 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui (gen4)/css/layout.less
View File

@ -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 .app-buttons {
.single-image-mode .main-buttons:not(:hover) .button,
.single-image-mode .app-buttons:not(:hover) .button {
opacity: 0.1;
}
.slideshow-running .main-buttons,
.slideshow-running .app-buttons {
.slideshow-running .main-buttons:not(:hover) .button,
.slideshow-running .app-buttons:not(:hover) .button {
opacity: 0;
}

79
ui (gen4)/features/ui-slideshow.js
View File

@ -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'
: !!this.__slideshow_timer ? 'running'
return this.__slideshow_timer == 'suspended' ?
'paused'
: !!this.__slideshow_timer ?
'running'
: 'off'
}
@ -341,12 +352,7 @@ module.Slideshow = core.ImageGridFeatures.Feature({
['stop',
function(){ this.toggleSlideshow('off') }],
// slideshow hold...
//
// 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...
// slideshow pause...
['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
= 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() }
// toggle on click...
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'){
this.dom.on('mousedown', hold)
this.dom.on('mouseup', release)
this.dom.on('tap', toggle)
} else {
this.dom.off('mousedown', hold)
this.dom.off('mouseup', release)
this.dom.off('touchend', toggle)
}
// toggle on blur/focus...
var user_paused = false
var focus_debounce = false
var blur = this.__slideshow_blur_handler
= this.__slideshow_blur_handler
|| function(){
if(!focus_debounce){
user_paused = that.toggleSlideshowTimer('?') == 'paused'
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',

25
ui (gen4)/features/ui-widgets.js
View File

@ -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+'
: l == 0 ? ''
.text(l > 99 ?
'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(){

17
ui (gen4)/lib/widget/browse2.js
View File

@ -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() }),