* Filemanager/Expose view: Fix following issues:

-Fix miss calculation of accurate position of active slide on thumbnail indicator
-Fix slide navigation with keyboard always pops up thumbnail indicator, no respect to fullscreen mode
-Fix jumping out of the fullscreen slide show by toggling on spacebar pause/play key
-Make the thumbnail indicator scrolling faster
This commit is contained in:
Hadi Nategh 2015-02-06 11:59:26 +00:00
commit e0f24f91a7
5 changed files with 51 additions and 34 deletions

0
etemplate/empty.html Normal file
View File

View File

@ -227,7 +227,7 @@ function expose (widget)
// The class for all slides: // The class for all slides:
slideClass: 'slide', slideClass: 'slide',
// The slide class for loading elements: // The slide class for loading elements:
slideLoadingClass: 'slide-loading', slideLoadingClass: '',
// The slide class for elements that failed to load: // The slide class for elements that failed to load:
slideErrorClass: 'slide-error', slideErrorClass: 'slide-error',
// The class for the content element loaded into each slide: // The class for the content element loaded into each slide:
@ -271,7 +271,7 @@ function expose (widget)
// Close the gallery on pressing the ESC key: // Close the gallery on pressing the ESC key:
closeOnEscape: true, closeOnEscape: true,
// Close the gallery when clicking on an empty slide area: // Close the gallery when clicking on an empty slide area:
closeOnSlideClick: true, closeOnSlideClick: false,
// Close the gallery by swiping up or down: // Close the gallery by swiping up or down:
closeOnSwipeUpOrDown: true, closeOnSwipeUpOrDown: true,
// Emulate touch events on mouse-pointer devices such as desktop browsers: // Emulate touch events on mouse-pointer devices such as desktop browsers:
@ -303,6 +303,8 @@ function expose (widget)
transitionSpeed: 400, transitionSpeed: 400,
//Hide controls when the slideshow is playing //Hide controls when the slideshow is playing
hideControlsOnSlideshow: true, hideControlsOnSlideshow: true,
//Request fullscreen on slide show
toggleFullscreenOnSlideShow:true,
// The transition speed for automatic slide changes, set to an integer // The transition speed for automatic slide changes, set to an integer
// greater 0 to override the default transition speed: // greater 0 to override the default transition speed:
slideshowTransitionSpeed: undefined, slideshowTransitionSpeed: undefined,
@ -488,17 +490,10 @@ function expose (widget)
// See if we need to move the indicator // See if we need to move the indicator
var indicator = gallery.container.find('.indicator'); var indicator = gallery.container.find('.indicator');
var current = $j('.active',indicator).position(); var current = $j('.active',indicator).position();
if (current.left == 0 && !gallery.container.hasClass(this.expose_options.playingClass))
{
//As controlsClass activates indicators,
//we use it to make indicators available for the first time
//which helps to re-calculate the correct position of it, if it's not loaded yet
gallery.container.addClass(this.expose_options.controlsClass);
current = $j('.active',indicator).position();
}
if(current) if(current)
{ {
indicator.animate({left: (gallery.container.width() / 2)-current.left}); indicator.animate({left: (gallery.container.width() / 2)-current.left},10);
} }
} }
}, },

View File

@ -1765,43 +1765,63 @@ span.et2_egw_action_ddHelper_itemsCnt {
/*Carousel thumbnails*/ /*Carousel thumbnails*/
.blueimp-gallery>.indicator>li { .blueimp-gallery>.indicator>li {
display: inline-block; display: inline-block;
width: 134px; width: auto;
height: 100px; height: 100px;
margin: none; margin: 0;
-webkit-box-sizing: content-box; background: transparent;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid transparent;
background: #ccc;
background: rgba(255, 255, 255, 0.17)center no-repeat;
border-radius: 5px;
box-shadow: 0 0 2px #000;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
background-repeat: no-repeat; border-radius: 0;
margin: 1px;
border:0; border:0;
background-size: content; }
.blueimp-gallery > .indicator > li > img {
display: inline-block;
width: auto;
height: 100px;
margin:0;
cursor: pointer;
z-index: -1;
position: relative;
}
/*Make indicator visible all the time to be able accuratley estimate
current active slide position in thubmnal bar*/
.blueimp-gallery>.indicator {
opacity:0; /* Hide it through opacity*/
white-space: nowrap;
display: inline-block; /* Very important to keep gallery indicator always with display inline-block*/
} }
/*Thumbnail border on hover*/ /*Thumbnail border on hover*/
.blueimp-gallery>.indicator>li:hover { .blueimp-gallery>.indicator>li:hover {
-webkit-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); -webkit-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); -moz-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
background: transparent;
} }
/*Active thumbnail border*/ /*Active thumbnail border*/
.blueimp-gallery>.indicator>.active .blueimp-gallery>.indicator>.active
{ {
-webkit-box-shadow: inset 0px 1px 0px 4px #0c5da5; -webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;
-moz-box-shadow: inset 0px 1px 0px 4px #0c5da5; -moz-box-shadow: inset 0px 0px 0px 4px #0c5da5;
box-shadow: inset 0px 1px 0px 4px #0c5da5; box-shadow: inset 0px 0px 0px 4px #0c5da5;
background: transparent;
} }
/*Slideshow Play/Pause button*/ /*Slideshow Play/Pause button*/
.blueimp-gallery>.play-pause{ .blueimp-gallery>.play-pause{
right: 42px; right: 42px;
top: 23px; top: 23px;
} }
/*fullScreen button*/
.blueimp-gallery>.fullscreen{
right: 75px;
top: 25px;
}
/*Give room to Carousel indicator when the gallery controls is on*/ /*Give room to Carousel indicator when the gallery controls is on*/
.blueimp-gallery-controls>.slides { .blueimp-gallery-controls>.slides {
height:85%; height:85%;
}
/*indicator bar with controls*/
.blueimp-gallery-controls>.indicator {
white-space: nowrap;
opacity:1; /* When the controls panel is on then we need to show back the indicators*/
} }

View File

@ -116,11 +116,13 @@
// Toggle the automatic slideshow interval on pressing the Space key: // Toggle the automatic slideshow interval on pressing the Space key:
toggleSlideshowOnSpace: true, toggleSlideshowOnSpace: true,
// Toggle fullscreen mode when slideshow is running // Toggle fullscreen mode when slideshow is running
toggleFullscreenOnSlideShow: true, toggleFullscreenOnSlideShow: false,
// Navigate the gallery by pressing left and right on the keyboard: // Navigate the gallery by pressing left and right on the keyboard:
enableKeyboardNavigation: true, enableKeyboardNavigation: true,
// Close the gallery on pressing the Esc key: // Close the gallery on pressing the Esc key:
closeOnEscape: true, closeOnEscape: true,
//Hide controls when the slideshow is playing
hideControlsOnSlideshow:false,
// Close the gallery when clicking on an empty slide area: // Close the gallery when clicking on an empty slide area:
closeOnSlideClick: true, closeOnSlideClick: true,
// Close the gallery by swiping up or down: // Close the gallery by swiping up or down:
@ -376,6 +378,7 @@
play: function (time) { play: function (time) {
var that = this; var that = this;
if (this.options.hideControlsOnSlideshow) this.container.removeClass(this.options.controlsClass);
window.clearTimeout(this.timeout); window.clearTimeout(this.timeout);
this.interval = time || this.options.slideshowInterval; this.interval = time || this.options.slideshowInterval;
if (this.elements[this.index] > 1) { if (this.elements[this.index] > 1) {
@ -1139,7 +1142,6 @@
if (this.options.toggleFullscreenOnSlideShow) this.requestFullScreen(this.container[0]); if (this.options.toggleFullscreenOnSlideShow) this.requestFullScreen(this.container[0]);
} else { } else {
this.pause(); this.pause();
if (this.options.toggleFullscreenOnSlideShow) this.exitFullScreen();
} }
}, },

File diff suppressed because one or more lines are too long