* 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:
slideClass: 'slide',
// The slide class for loading elements:
slideLoadingClass: 'slide-loading',
slideLoadingClass: '',
// The slide class for elements that failed to load:
slideErrorClass: 'slide-error',
// 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:
closeOnEscape: true,
// Close the gallery when clicking on an empty slide area:
closeOnSlideClick: true,
closeOnSlideClick: false,
// Close the gallery by swiping up or down:
closeOnSwipeUpOrDown: true,
// Emulate touch events on mouse-pointer devices such as desktop browsers:
@ -303,6 +303,8 @@ function expose (widget)
transitionSpeed: 400,
//Hide controls when the slideshow is playing
hideControlsOnSlideshow: true,
//Request fullscreen on slide show
toggleFullscreenOnSlideShow:true,
// The transition speed for automatic slide changes, set to an integer
// greater 0 to override the default transition speed:
slideshowTransitionSpeed: undefined,
@ -488,17 +490,10 @@ function expose (widget)
// See if we need to move the indicator
var indicator = gallery.container.find('.indicator');
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)
{
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*/
.blueimp-gallery>.indicator>li {
display: inline-block;
width: 134px;
width: auto;
height: 100px;
margin: none;
-webkit-box-sizing: content-box;
-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;
margin: 0;
background: transparent;
opacity: 1;
cursor: pointer;
background-repeat: no-repeat;
margin: 1px;
border-radius: 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*/
.blueimp-gallery>.indicator>li:hover {
-webkit-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1);
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 0px 0px 4px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
background: transparent;
}
/*Active thumbnail border*/
.blueimp-gallery>.indicator>.active
{
-webkit-box-shadow: inset 0px 1px 0px 4px #0c5da5;
-moz-box-shadow: inset 0px 1px 0px 4px #0c5da5;
box-shadow: inset 0px 1px 0px 4px #0c5da5;
-webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;
-moz-box-shadow: inset 0px 0px 0px 4px #0c5da5;
box-shadow: inset 0px 0px 0px 4px #0c5da5;
background: transparent;
}
/*Slideshow Play/Pause button*/
.blueimp-gallery>.play-pause{
right: 42px;
top: 23px;
}
/*fullScreen button*/
.blueimp-gallery>.fullscreen{
right: 75px;
top: 25px;
}
/*Give room to Carousel indicator when the gallery controls is on*/
.blueimp-gallery-controls>.slides {
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:
toggleSlideshowOnSpace: true,
// Toggle fullscreen mode when slideshow is running
toggleFullscreenOnSlideShow: true,
toggleFullscreenOnSlideShow: false,
// Navigate the gallery by pressing left and right on the keyboard:
enableKeyboardNavigation: true,
// Close the gallery on pressing the Esc key:
closeOnEscape: true,
//Hide controls when the slideshow is playing
hideControlsOnSlideshow:false,
// Close the gallery when clicking on an empty slide area:
closeOnSlideClick: true,
// Close the gallery by swiping up or down:
@ -376,6 +378,7 @@
play: function (time) {
var that = this;
if (this.options.hideControlsOnSlideshow) this.container.removeClass(this.options.controlsClass);
window.clearTimeout(this.timeout);
this.interval = time || this.options.slideshowInterval;
if (this.elements[this.index] > 1) {
@ -1139,7 +1142,6 @@
if (this.options.toggleFullscreenOnSlideShow) this.requestFullScreen(this.container[0]);
} else {
this.pause();
if (this.options.toggleFullscreenOnSlideShow) this.exitFullScreen();
}
},

File diff suppressed because one or more lines are too long