forked from extern/egroupware
* 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:
commit
e0f24f91a7
0
etemplate/empty.html
Normal file
0
etemplate/empty.html
Normal 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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*/
|
||||||
}
|
}
|
@ -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
Loading…
Reference in New Issue
Block a user