photoswipe-rails 4.0.8a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +31 -0
- data/Rakefile +58 -0
- data/app/assets/images/photoswipe/default-skin/default-skin.png +0 -0
- data/app/assets/images/photoswipe/default-skin/default-skin.svg +1 -0
- data/app/assets/images/photoswipe/default-skin/preloader.gif +0 -0
- data/app/assets/javascripts/photoswipe/index.js +2 -0
- data/app/assets/javascripts/photoswipe/photoswipe-ui-default.js +860 -0
- data/app/assets/javascripts/photoswipe/photoswipe.js +3698 -0
- data/app/assets/stylesheets/photoswipe/default-skin/default-skin.scss +483 -0
- data/app/assets/stylesheets/photoswipe/index.scss +4 -0
- data/app/assets/stylesheets/photoswipe/photoswipe.scss +180 -0
- data/lib/photoswipe-rails.rb +5 -0
- data/lib/photoswipe-rails/engine.rb +11 -0
- data/lib/photoswipe-rails/version.rb +3 -0
- metadata +89 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: ce0dfc80cced1f6ea74a9b49b6c3c7732e7c6cef
|
4
|
+
data.tar.gz: 6135e898d3d0771111501eea2ac3a7bbf0085fd4
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 65903e19398f4d8b95ffd363d9efd5d25766453b2f4028098090c34106241d3a494b56f1586c2f271781d828e2c7158d138085539069f27c013414d793863f98
|
7
|
+
data.tar.gz: 3c77da43c04a140ab8940888fee456f85515e82c14254dd03d4c115755098883f6811b950ac2bef33bd30fff277169da6ea274c6dbdea0abad8ce17da07669d7
|
data/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2015 Kristaps Karlsons, Dmitry Semenov
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# photoswipe-rails
|
2
|
+
|
3
|
+
[PhotoSwipe](http://photoswipe.com/) for the Rails asset pipeline.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add photoswipe-rails to the assets group in your Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'photoswipe-rails'
|
11
|
+
```
|
12
|
+
|
13
|
+
Add the necessary library to `app/assets/javascripts/application.js`:
|
14
|
+
|
15
|
+
```js
|
16
|
+
//= require photoswipe
|
17
|
+
```
|
18
|
+
|
19
|
+
And to `app/assets/stylesheets/application.scss`:
|
20
|
+
|
21
|
+
```css
|
22
|
+
/*
|
23
|
+
*= require photoswipe
|
24
|
+
*/
|
25
|
+
```
|
26
|
+
|
27
|
+
## Further set-up
|
28
|
+
|
29
|
+
See PhotoSwipe [set-up guide][1] for further instructions.
|
30
|
+
|
31
|
+
[1]: http://photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom
|
data/Rakefile
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
require 'fileutils'
|
2
|
+
require 'bundler/gem_tasks'
|
3
|
+
|
4
|
+
desc 'Synchronize PhotoSwipe'
|
5
|
+
task :sync_photoswipe do
|
6
|
+
|
7
|
+
source = File.join File.dirname(__FILE__), 'photoswipe-src', 'dist'
|
8
|
+
destination = File.join File.dirname(__FILE__), 'app', 'assets'
|
9
|
+
|
10
|
+
js_destination = File.join destination, 'javascripts', 'photoswipe'
|
11
|
+
|
12
|
+
idx = File.join js_destination, 'index.js'
|
13
|
+
|
14
|
+
File.read(idx).each_line do | line |
|
15
|
+
if line =~ /require (.*)/
|
16
|
+
file = "#{source}/#{$1.strip}"
|
17
|
+
FileUtils.cp_r file, file.gsub(source, js_destination), verbose: true
|
18
|
+
end
|
19
|
+
end
|
20
|
+
|
21
|
+
css_destination = File.join destination, 'stylesheets', 'photoswipe'
|
22
|
+
css_source = File.join source
|
23
|
+
|
24
|
+
idx = File.join css_destination, 'index.scss'
|
25
|
+
|
26
|
+
File.read(idx).each_line do | line |
|
27
|
+
if line =~ /require (.*)\.scss/
|
28
|
+
file = "#{css_source}/#{$1.strip}.css"
|
29
|
+
target_file = file.gsub(
|
30
|
+
css_source,
|
31
|
+
css_destination
|
32
|
+
).gsub(/\.css$/, '.scss')
|
33
|
+
|
34
|
+
FileUtils.cp_r file, target_file, verbose: true
|
35
|
+
|
36
|
+
contents = File.read(target_file)
|
37
|
+
|
38
|
+
contents.gsub!(
|
39
|
+
/\surl\((?<asset>[\d\w\/\.\-^\)]+)\)/,
|
40
|
+
' image-url("photoswipe/default-skin/\k<asset>")'
|
41
|
+
)
|
42
|
+
File.open(target_file, 'w') {|f| f.puts contents }
|
43
|
+
end
|
44
|
+
end
|
45
|
+
|
46
|
+
assets = %w(default-skin.png default-skin.svg preloader.gif)
|
47
|
+
asset_destination = File.join destination, 'images', 'photoswipe', 'default-skin'
|
48
|
+
asset_source = File.join source, 'default-skin'
|
49
|
+
|
50
|
+
assets.each do |file|
|
51
|
+
file = "#{asset_source}/#{file}"
|
52
|
+
FileUtils.cp_r(
|
53
|
+
file,
|
54
|
+
file.gsub(asset_source, asset_destination),
|
55
|
+
verbose: true
|
56
|
+
)
|
57
|
+
end
|
58
|
+
end
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
Binary file
|
@@ -0,0 +1,860 @@
|
|
1
|
+
/*! PhotoSwipe Default UI - 4.0.8 - 2015-05-21
|
2
|
+
* http://photoswipe.com
|
3
|
+
* Copyright (c) 2015 Dmitry Semenov; */
|
4
|
+
/**
|
5
|
+
*
|
6
|
+
* UI on top of main sliding area (caption, arrows, close button, etc.).
|
7
|
+
* Built just using public methods/properties of PhotoSwipe.
|
8
|
+
*
|
9
|
+
*/
|
10
|
+
(function (root, factory) {
|
11
|
+
if (typeof define === 'function' && define.amd) {
|
12
|
+
define(factory);
|
13
|
+
} else if (typeof exports === 'object') {
|
14
|
+
module.exports = factory();
|
15
|
+
} else {
|
16
|
+
root.PhotoSwipeUI_Default = factory();
|
17
|
+
}
|
18
|
+
})(this, function () {
|
19
|
+
|
20
|
+
'use strict';
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
var PhotoSwipeUI_Default =
|
25
|
+
function(pswp, framework) {
|
26
|
+
|
27
|
+
var ui = this;
|
28
|
+
var _overlayUIUpdated = false,
|
29
|
+
_controlsVisible = true,
|
30
|
+
_fullscrenAPI,
|
31
|
+
_controls,
|
32
|
+
_captionContainer,
|
33
|
+
_fakeCaptionContainer,
|
34
|
+
_indexIndicator,
|
35
|
+
_shareButton,
|
36
|
+
_shareModal,
|
37
|
+
_shareModalHidden = true,
|
38
|
+
_initalCloseOnScrollValue,
|
39
|
+
_isIdle,
|
40
|
+
_listen,
|
41
|
+
|
42
|
+
_loadingIndicator,
|
43
|
+
_loadingIndicatorHidden,
|
44
|
+
_loadingIndicatorTimeout,
|
45
|
+
|
46
|
+
_galleryHasOneSlide,
|
47
|
+
|
48
|
+
_options,
|
49
|
+
_defaultUIOptions = {
|
50
|
+
barsSize: {top:44, bottom:'auto'},
|
51
|
+
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
|
52
|
+
timeToIdle: 4000,
|
53
|
+
timeToIdleOutside: 1000,
|
54
|
+
loadingIndicatorDelay: 1000, // 2s
|
55
|
+
|
56
|
+
addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
|
57
|
+
if(!item.title) {
|
58
|
+
captionEl.children[0].innerHTML = '';
|
59
|
+
return false;
|
60
|
+
}
|
61
|
+
captionEl.children[0].innerHTML = item.title;
|
62
|
+
return true;
|
63
|
+
},
|
64
|
+
|
65
|
+
closeEl:true,
|
66
|
+
captionEl: true,
|
67
|
+
fullscreenEl: true,
|
68
|
+
zoomEl: true,
|
69
|
+
shareEl: true,
|
70
|
+
counterEl: true,
|
71
|
+
arrowEl: true,
|
72
|
+
preloaderEl: true,
|
73
|
+
|
74
|
+
tapToClose: false,
|
75
|
+
tapToToggleControls: true,
|
76
|
+
|
77
|
+
clickToCloseNonZoomable: true,
|
78
|
+
|
79
|
+
shareButtons: [
|
80
|
+
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
|
81
|
+
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
|
82
|
+
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
|
83
|
+
'?url={{url}}&media={{image_url}}&description={{text}}'},
|
84
|
+
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
|
85
|
+
],
|
86
|
+
getImageURLForShare: function( /* shareButtonData */ ) {
|
87
|
+
return pswp.currItem.src || '';
|
88
|
+
},
|
89
|
+
getPageURLForShare: function( /* shareButtonData */ ) {
|
90
|
+
return window.location.href;
|
91
|
+
},
|
92
|
+
getTextForShare: function( /* shareButtonData */ ) {
|
93
|
+
return pswp.currItem.title || '';
|
94
|
+
},
|
95
|
+
|
96
|
+
indexIndicatorSep: ' / '
|
97
|
+
|
98
|
+
},
|
99
|
+
_blockControlsTap,
|
100
|
+
_blockControlsTapTimeout;
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
var _onControlsTap = function(e) {
|
105
|
+
if(_blockControlsTap) {
|
106
|
+
return true;
|
107
|
+
}
|
108
|
+
|
109
|
+
|
110
|
+
e = e || window.event;
|
111
|
+
|
112
|
+
if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
|
113
|
+
// reset idle timer
|
114
|
+
_onIdleMouseMove();
|
115
|
+
}
|
116
|
+
|
117
|
+
|
118
|
+
var target = e.target || e.srcElement,
|
119
|
+
uiElement,
|
120
|
+
clickedClass = target.className,
|
121
|
+
found;
|
122
|
+
|
123
|
+
for(var i = 0; i < _uiElements.length; i++) {
|
124
|
+
uiElement = _uiElements[i];
|
125
|
+
if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
|
126
|
+
uiElement.onTap();
|
127
|
+
found = true;
|
128
|
+
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
if(found) {
|
133
|
+
if(e.stopPropagation) {
|
134
|
+
e.stopPropagation();
|
135
|
+
}
|
136
|
+
_blockControlsTap = true;
|
137
|
+
|
138
|
+
// Some versions of Android don't prevent ghost click event
|
139
|
+
// when preventDefault() was called on touchstart and/or touchend.
|
140
|
+
//
|
141
|
+
// This happens on v4.3, 4.2, 4.1,
|
142
|
+
// older versions strangely work correctly,
|
143
|
+
// but just in case we add delay on all of them)
|
144
|
+
var tapDelay = framework.features.isOldAndroid ? 600 : 30;
|
145
|
+
_blockControlsTapTimeout = setTimeout(function() {
|
146
|
+
_blockControlsTap = false;
|
147
|
+
}, tapDelay);
|
148
|
+
}
|
149
|
+
|
150
|
+
},
|
151
|
+
_fitControlsInViewport = function() {
|
152
|
+
return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > 1200;
|
153
|
+
},
|
154
|
+
_togglePswpClass = function(el, cName, add) {
|
155
|
+
framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
|
156
|
+
},
|
157
|
+
|
158
|
+
// add class when there is just one item in the gallery
|
159
|
+
// (by default it hides left/right arrows and 1ofX counter)
|
160
|
+
_countNumItems = function() {
|
161
|
+
var hasOneSlide = (_options.getNumItemsFn() === 1);
|
162
|
+
|
163
|
+
if(hasOneSlide !== _galleryHasOneSlide) {
|
164
|
+
_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
|
165
|
+
_galleryHasOneSlide = hasOneSlide;
|
166
|
+
}
|
167
|
+
},
|
168
|
+
_toggleShareModalClass = function() {
|
169
|
+
_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
|
170
|
+
},
|
171
|
+
_toggleShareModal = function() {
|
172
|
+
|
173
|
+
_shareModalHidden = !_shareModalHidden;
|
174
|
+
|
175
|
+
|
176
|
+
if(!_shareModalHidden) {
|
177
|
+
_toggleShareModalClass();
|
178
|
+
setTimeout(function() {
|
179
|
+
if(!_shareModalHidden) {
|
180
|
+
framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
|
181
|
+
}
|
182
|
+
}, 30);
|
183
|
+
} else {
|
184
|
+
framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
|
185
|
+
setTimeout(function() {
|
186
|
+
if(_shareModalHidden) {
|
187
|
+
_toggleShareModalClass();
|
188
|
+
}
|
189
|
+
}, 300);
|
190
|
+
}
|
191
|
+
|
192
|
+
if(!_shareModalHidden) {
|
193
|
+
_updateShareURLs();
|
194
|
+
}
|
195
|
+
return false;
|
196
|
+
},
|
197
|
+
|
198
|
+
_openWindowPopup = function(e) {
|
199
|
+
e = e || window.event;
|
200
|
+
var target = e.target || e.srcElement;
|
201
|
+
|
202
|
+
pswp.shout('shareLinkClick', e, target);
|
203
|
+
|
204
|
+
if(!target.href) {
|
205
|
+
return false;
|
206
|
+
}
|
207
|
+
|
208
|
+
if( target.hasAttribute('download') ) {
|
209
|
+
return true;
|
210
|
+
}
|
211
|
+
|
212
|
+
window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
|
213
|
+
'location=yes,width=550,height=420,top=100,left=' +
|
214
|
+
(window.screen ? Math.round(screen.width / 2 - 275) : 100) );
|
215
|
+
|
216
|
+
if(!_shareModalHidden) {
|
217
|
+
_toggleShareModal();
|
218
|
+
}
|
219
|
+
|
220
|
+
return false;
|
221
|
+
},
|
222
|
+
_updateShareURLs = function() {
|
223
|
+
var shareButtonOut = '',
|
224
|
+
shareButtonData,
|
225
|
+
shareURL,
|
226
|
+
image_url,
|
227
|
+
page_url,
|
228
|
+
share_text;
|
229
|
+
|
230
|
+
for(var i = 0; i < _options.shareButtons.length; i++) {
|
231
|
+
shareButtonData = _options.shareButtons[i];
|
232
|
+
|
233
|
+
image_url = _options.getImageURLForShare(shareButtonData);
|
234
|
+
page_url = _options.getPageURLForShare(shareButtonData);
|
235
|
+
share_text = _options.getTextForShare(shareButtonData);
|
236
|
+
|
237
|
+
shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
|
238
|
+
.replace('{{image_url}}', encodeURIComponent(image_url) )
|
239
|
+
.replace('{{raw_image_url}}', image_url )
|
240
|
+
.replace('{{text}}', encodeURIComponent(share_text) );
|
241
|
+
|
242
|
+
shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
|
243
|
+
'class="pswp__share--' + shareButtonData.id + '"' +
|
244
|
+
(shareButtonData.download ? 'download' : '') + '>' +
|
245
|
+
shareButtonData.label + '</a>';
|
246
|
+
|
247
|
+
if(_options.parseShareButtonOut) {
|
248
|
+
shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
|
249
|
+
}
|
250
|
+
}
|
251
|
+
_shareModal.children[0].innerHTML = shareButtonOut;
|
252
|
+
_shareModal.children[0].onclick = _openWindowPopup;
|
253
|
+
|
254
|
+
},
|
255
|
+
_hasCloseClass = function(target) {
|
256
|
+
for(var i = 0; i < _options.closeElClasses.length; i++) {
|
257
|
+
if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
|
258
|
+
return true;
|
259
|
+
}
|
260
|
+
}
|
261
|
+
},
|
262
|
+
_idleInterval,
|
263
|
+
_idleTimer,
|
264
|
+
_idleIncrement = 0,
|
265
|
+
_onIdleMouseMove = function() {
|
266
|
+
clearTimeout(_idleTimer);
|
267
|
+
_idleIncrement = 0;
|
268
|
+
if(_isIdle) {
|
269
|
+
ui.setIdle(false);
|
270
|
+
}
|
271
|
+
},
|
272
|
+
_onMouseLeaveWindow = function(e) {
|
273
|
+
e = e ? e : window.event;
|
274
|
+
var from = e.relatedTarget || e.toElement;
|
275
|
+
if (!from || from.nodeName === 'HTML') {
|
276
|
+
clearTimeout(_idleTimer);
|
277
|
+
_idleTimer = setTimeout(function() {
|
278
|
+
ui.setIdle(true);
|
279
|
+
}, _options.timeToIdleOutside);
|
280
|
+
}
|
281
|
+
},
|
282
|
+
_setupFullscreenAPI = function() {
|
283
|
+
if(_options.fullscreenEl) {
|
284
|
+
if(!_fullscrenAPI) {
|
285
|
+
_fullscrenAPI = ui.getFullscreenAPI();
|
286
|
+
}
|
287
|
+
if(_fullscrenAPI) {
|
288
|
+
framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
289
|
+
ui.updateFullscreen();
|
290
|
+
framework.addClass(pswp.template, 'pswp--supports-fs');
|
291
|
+
} else {
|
292
|
+
framework.removeClass(pswp.template, 'pswp--supports-fs');
|
293
|
+
}
|
294
|
+
}
|
295
|
+
},
|
296
|
+
_setupLoadingIndicator = function() {
|
297
|
+
// Setup loading indicator
|
298
|
+
if(_options.preloaderEl) {
|
299
|
+
|
300
|
+
_toggleLoadingIndicator(true);
|
301
|
+
|
302
|
+
_listen('beforeChange', function() {
|
303
|
+
|
304
|
+
clearTimeout(_loadingIndicatorTimeout);
|
305
|
+
|
306
|
+
// display loading indicator with delay
|
307
|
+
_loadingIndicatorTimeout = setTimeout(function() {
|
308
|
+
|
309
|
+
if(pswp.currItem && pswp.currItem.loading) {
|
310
|
+
|
311
|
+
if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth) ) {
|
312
|
+
// show preloader if progressive loading is not enabled,
|
313
|
+
// or image width is not defined yet (because of slow connection)
|
314
|
+
_toggleLoadingIndicator(false);
|
315
|
+
// items-controller.js function allowProgressiveImg
|
316
|
+
}
|
317
|
+
|
318
|
+
} else {
|
319
|
+
_toggleLoadingIndicator(true); // hide preloader
|
320
|
+
}
|
321
|
+
|
322
|
+
}, _options.loadingIndicatorDelay);
|
323
|
+
|
324
|
+
});
|
325
|
+
_listen('imageLoadComplete', function(index, item) {
|
326
|
+
if(pswp.currItem === item) {
|
327
|
+
_toggleLoadingIndicator(true);
|
328
|
+
}
|
329
|
+
});
|
330
|
+
|
331
|
+
}
|
332
|
+
},
|
333
|
+
_toggleLoadingIndicator = function(hide) {
|
334
|
+
if( _loadingIndicatorHidden !== hide ) {
|
335
|
+
_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
|
336
|
+
_loadingIndicatorHidden = hide;
|
337
|
+
}
|
338
|
+
},
|
339
|
+
_applyNavBarGaps = function(item) {
|
340
|
+
var gap = item.vGap;
|
341
|
+
|
342
|
+
if( _fitControlsInViewport() ) {
|
343
|
+
|
344
|
+
var bars = _options.barsSize;
|
345
|
+
if(_options.captionEl && bars.bottom === 'auto') {
|
346
|
+
if(!_fakeCaptionContainer) {
|
347
|
+
_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
|
348
|
+
_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
|
349
|
+
_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
|
350
|
+
framework.addClass(_controls, 'pswp__ui--fit');
|
351
|
+
}
|
352
|
+
if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
|
353
|
+
|
354
|
+
var captionSize = _fakeCaptionContainer.clientHeight;
|
355
|
+
gap.bottom = parseInt(captionSize,10) || 44;
|
356
|
+
} else {
|
357
|
+
gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
|
358
|
+
}
|
359
|
+
} else {
|
360
|
+
gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
|
361
|
+
}
|
362
|
+
|
363
|
+
// height of top bar is static, no need to calculate it
|
364
|
+
gap.top = bars.top;
|
365
|
+
} else {
|
366
|
+
gap.top = gap.bottom = 0;
|
367
|
+
}
|
368
|
+
},
|
369
|
+
_setupIdle = function() {
|
370
|
+
// Hide controls when mouse is used
|
371
|
+
if(_options.timeToIdle) {
|
372
|
+
_listen('mouseUsed', function() {
|
373
|
+
|
374
|
+
framework.bind(document, 'mousemove', _onIdleMouseMove);
|
375
|
+
framework.bind(document, 'mouseout', _onMouseLeaveWindow);
|
376
|
+
|
377
|
+
_idleInterval = setInterval(function() {
|
378
|
+
_idleIncrement++;
|
379
|
+
if(_idleIncrement === 2) {
|
380
|
+
ui.setIdle(true);
|
381
|
+
}
|
382
|
+
}, _options.timeToIdle / 2);
|
383
|
+
});
|
384
|
+
}
|
385
|
+
},
|
386
|
+
_setupHidingControlsDuringGestures = function() {
|
387
|
+
|
388
|
+
// Hide controls on vertical drag
|
389
|
+
_listen('onVerticalDrag', function(now) {
|
390
|
+
if(_controlsVisible && now < 0.95) {
|
391
|
+
ui.hideControls();
|
392
|
+
} else if(!_controlsVisible && now >= 0.95) {
|
393
|
+
ui.showControls();
|
394
|
+
}
|
395
|
+
});
|
396
|
+
|
397
|
+
// Hide controls when pinching to close
|
398
|
+
var pinchControlsHidden;
|
399
|
+
_listen('onPinchClose' , function(now) {
|
400
|
+
if(_controlsVisible && now < 0.9) {
|
401
|
+
ui.hideControls();
|
402
|
+
pinchControlsHidden = true;
|
403
|
+
} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
|
404
|
+
ui.showControls();
|
405
|
+
}
|
406
|
+
});
|
407
|
+
|
408
|
+
_listen('zoomGestureEnded', function() {
|
409
|
+
pinchControlsHidden = false;
|
410
|
+
if(pinchControlsHidden && !_controlsVisible) {
|
411
|
+
ui.showControls();
|
412
|
+
}
|
413
|
+
});
|
414
|
+
|
415
|
+
};
|
416
|
+
|
417
|
+
|
418
|
+
|
419
|
+
var _uiElements = [
|
420
|
+
{
|
421
|
+
name: 'caption',
|
422
|
+
option: 'captionEl',
|
423
|
+
onInit: function(el) {
|
424
|
+
_captionContainer = el;
|
425
|
+
}
|
426
|
+
},
|
427
|
+
{
|
428
|
+
name: 'share-modal',
|
429
|
+
option: 'shareEl',
|
430
|
+
onInit: function(el) {
|
431
|
+
_shareModal = el;
|
432
|
+
},
|
433
|
+
onTap: function() {
|
434
|
+
_toggleShareModal();
|
435
|
+
}
|
436
|
+
},
|
437
|
+
{
|
438
|
+
name: 'button--share',
|
439
|
+
option: 'shareEl',
|
440
|
+
onInit: function(el) {
|
441
|
+
_shareButton = el;
|
442
|
+
},
|
443
|
+
onTap: function() {
|
444
|
+
_toggleShareModal();
|
445
|
+
}
|
446
|
+
},
|
447
|
+
{
|
448
|
+
name: 'button--zoom',
|
449
|
+
option: 'zoomEl',
|
450
|
+
onTap: pswp.toggleDesktopZoom
|
451
|
+
},
|
452
|
+
{
|
453
|
+
name: 'counter',
|
454
|
+
option: 'counterEl',
|
455
|
+
onInit: function(el) {
|
456
|
+
_indexIndicator = el;
|
457
|
+
}
|
458
|
+
},
|
459
|
+
{
|
460
|
+
name: 'button--close',
|
461
|
+
option: 'closeEl',
|
462
|
+
onTap: pswp.close
|
463
|
+
},
|
464
|
+
{
|
465
|
+
name: 'button--arrow--left',
|
466
|
+
option: 'arrowEl',
|
467
|
+
onTap: pswp.prev
|
468
|
+
},
|
469
|
+
{
|
470
|
+
name: 'button--arrow--right',
|
471
|
+
option: 'arrowEl',
|
472
|
+
onTap: pswp.next
|
473
|
+
},
|
474
|
+
{
|
475
|
+
name: 'button--fs',
|
476
|
+
option: 'fullscreenEl',
|
477
|
+
onTap: function() {
|
478
|
+
if(_fullscrenAPI.isFullscreen()) {
|
479
|
+
_fullscrenAPI.exit();
|
480
|
+
} else {
|
481
|
+
_fullscrenAPI.enter();
|
482
|
+
}
|
483
|
+
}
|
484
|
+
},
|
485
|
+
{
|
486
|
+
name: 'preloader',
|
487
|
+
option: 'preloaderEl',
|
488
|
+
onInit: function(el) {
|
489
|
+
_loadingIndicator = el;
|
490
|
+
}
|
491
|
+
}
|
492
|
+
|
493
|
+
];
|
494
|
+
|
495
|
+
var _setupUIElements = function() {
|
496
|
+
var item,
|
497
|
+
classAttr,
|
498
|
+
uiElement;
|
499
|
+
|
500
|
+
var loopThroughChildElements = function(sChildren) {
|
501
|
+
if(!sChildren) {
|
502
|
+
return;
|
503
|
+
}
|
504
|
+
|
505
|
+
var l = sChildren.length;
|
506
|
+
for(var i = 0; i < l; i++) {
|
507
|
+
item = sChildren[i];
|
508
|
+
classAttr = item.className;
|
509
|
+
|
510
|
+
for(var a = 0; a < _uiElements.length; a++) {
|
511
|
+
uiElement = _uiElements[a];
|
512
|
+
|
513
|
+
if(classAttr.indexOf('pswp__' + uiElement.name) > -1 ) {
|
514
|
+
|
515
|
+
if( _options[uiElement.option] ) { // if element is not disabled from options
|
516
|
+
|
517
|
+
framework.removeClass(item, 'pswp__element--disabled');
|
518
|
+
if(uiElement.onInit) {
|
519
|
+
uiElement.onInit(item);
|
520
|
+
}
|
521
|
+
|
522
|
+
//item.style.display = 'block';
|
523
|
+
} else {
|
524
|
+
framework.addClass(item, 'pswp__element--disabled');
|
525
|
+
//item.style.display = 'none';
|
526
|
+
}
|
527
|
+
}
|
528
|
+
}
|
529
|
+
}
|
530
|
+
};
|
531
|
+
loopThroughChildElements(_controls.children);
|
532
|
+
|
533
|
+
var topBar = framework.getChildByClass(_controls, 'pswp__top-bar');
|
534
|
+
if(topBar) {
|
535
|
+
loopThroughChildElements( topBar.children );
|
536
|
+
}
|
537
|
+
};
|
538
|
+
|
539
|
+
|
540
|
+
|
541
|
+
|
542
|
+
ui.init = function() {
|
543
|
+
|
544
|
+
// extend options
|
545
|
+
framework.extend(pswp.options, _defaultUIOptions, true);
|
546
|
+
|
547
|
+
// create local link for fast access
|
548
|
+
_options = pswp.options;
|
549
|
+
|
550
|
+
// find pswp__ui element
|
551
|
+
_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
|
552
|
+
|
553
|
+
// create local link
|
554
|
+
_listen = pswp.listen;
|
555
|
+
|
556
|
+
|
557
|
+
_setupHidingControlsDuringGestures();
|
558
|
+
|
559
|
+
// update controls when slides change
|
560
|
+
_listen('beforeChange', ui.update);
|
561
|
+
|
562
|
+
// toggle zoom on double-tap
|
563
|
+
_listen('doubleTap', function(point) {
|
564
|
+
var initialZoomLevel = pswp.currItem.initialZoomLevel;
|
565
|
+
if(pswp.getZoomLevel() !== initialZoomLevel) {
|
566
|
+
pswp.zoomTo(initialZoomLevel, point, 333);
|
567
|
+
} else {
|
568
|
+
pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
|
569
|
+
}
|
570
|
+
});
|
571
|
+
|
572
|
+
// Allow text selection in caption
|
573
|
+
_listen('preventDragEvent', function(e, isDown, preventObj) {
|
574
|
+
var t = e.target || e.srcElement;
|
575
|
+
if(
|
576
|
+
t &&
|
577
|
+
t.className && e.type.indexOf('mouse') > -1 &&
|
578
|
+
( t.className.indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) )
|
579
|
+
) {
|
580
|
+
preventObj.prevent = false;
|
581
|
+
}
|
582
|
+
});
|
583
|
+
|
584
|
+
// bind events for UI
|
585
|
+
_listen('bindEvents', function() {
|
586
|
+
framework.bind(_controls, 'pswpTap click', _onControlsTap);
|
587
|
+
framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
588
|
+
|
589
|
+
if(!pswp.likelyTouchDevice) {
|
590
|
+
framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
591
|
+
}
|
592
|
+
});
|
593
|
+
|
594
|
+
// unbind events for UI
|
595
|
+
_listen('unbindEvents', function() {
|
596
|
+
if(!_shareModalHidden) {
|
597
|
+
_toggleShareModal();
|
598
|
+
}
|
599
|
+
|
600
|
+
if(_idleInterval) {
|
601
|
+
clearInterval(_idleInterval);
|
602
|
+
}
|
603
|
+
framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
|
604
|
+
framework.unbind(document, 'mousemove', _onIdleMouseMove);
|
605
|
+
framework.unbind(_controls, 'pswpTap click', _onControlsTap);
|
606
|
+
framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
607
|
+
framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
608
|
+
|
609
|
+
if(_fullscrenAPI) {
|
610
|
+
framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
611
|
+
if(_fullscrenAPI.isFullscreen()) {
|
612
|
+
_options.hideAnimationDuration = 0;
|
613
|
+
_fullscrenAPI.exit();
|
614
|
+
}
|
615
|
+
_fullscrenAPI = null;
|
616
|
+
}
|
617
|
+
});
|
618
|
+
|
619
|
+
|
620
|
+
// clean up things when gallery is destroyed
|
621
|
+
_listen('destroy', function() {
|
622
|
+
if(_options.captionEl) {
|
623
|
+
if(_fakeCaptionContainer) {
|
624
|
+
_controls.removeChild(_fakeCaptionContainer);
|
625
|
+
}
|
626
|
+
framework.removeClass(_captionContainer, 'pswp__caption--empty');
|
627
|
+
}
|
628
|
+
|
629
|
+
if(_shareModal) {
|
630
|
+
_shareModal.children[0].onclick = null;
|
631
|
+
}
|
632
|
+
framework.removeClass(_controls, 'pswp__ui--over-close');
|
633
|
+
framework.addClass( _controls, 'pswp__ui--hidden');
|
634
|
+
ui.setIdle(false);
|
635
|
+
});
|
636
|
+
|
637
|
+
|
638
|
+
if(!_options.showAnimationDuration) {
|
639
|
+
framework.removeClass( _controls, 'pswp__ui--hidden');
|
640
|
+
}
|
641
|
+
_listen('initialZoomIn', function() {
|
642
|
+
if(_options.showAnimationDuration) {
|
643
|
+
framework.removeClass( _controls, 'pswp__ui--hidden');
|
644
|
+
}
|
645
|
+
});
|
646
|
+
_listen('initialZoomOut', function() {
|
647
|
+
framework.addClass( _controls, 'pswp__ui--hidden');
|
648
|
+
});
|
649
|
+
|
650
|
+
_listen('parseVerticalMargin', _applyNavBarGaps);
|
651
|
+
|
652
|
+
_setupUIElements();
|
653
|
+
|
654
|
+
if(_options.shareEl && _shareButton && _shareModal) {
|
655
|
+
_shareModalHidden = true;
|
656
|
+
}
|
657
|
+
|
658
|
+
_countNumItems();
|
659
|
+
|
660
|
+
_setupIdle();
|
661
|
+
|
662
|
+
_setupFullscreenAPI();
|
663
|
+
|
664
|
+
_setupLoadingIndicator();
|
665
|
+
};
|
666
|
+
|
667
|
+
ui.setIdle = function(isIdle) {
|
668
|
+
_isIdle = isIdle;
|
669
|
+
_togglePswpClass(_controls, 'ui--idle', isIdle);
|
670
|
+
};
|
671
|
+
|
672
|
+
ui.update = function() {
|
673
|
+
// Don't update UI if it's hidden
|
674
|
+
if(_controlsVisible && pswp.currItem) {
|
675
|
+
|
676
|
+
ui.updateIndexIndicator();
|
677
|
+
|
678
|
+
if(_options.captionEl) {
|
679
|
+
_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
|
680
|
+
|
681
|
+
_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
|
682
|
+
}
|
683
|
+
|
684
|
+
_overlayUIUpdated = true;
|
685
|
+
|
686
|
+
} else {
|
687
|
+
_overlayUIUpdated = false;
|
688
|
+
}
|
689
|
+
|
690
|
+
if(!_shareModalHidden) {
|
691
|
+
_toggleShareModal();
|
692
|
+
}
|
693
|
+
|
694
|
+
_countNumItems();
|
695
|
+
};
|
696
|
+
|
697
|
+
ui.updateFullscreen = function(e) {
|
698
|
+
|
699
|
+
if(e) {
|
700
|
+
// some browsers change window scroll position during the fullscreen
|
701
|
+
// so PhotoSwipe updates it just in case
|
702
|
+
setTimeout(function() {
|
703
|
+
pswp.setScrollOffset( 0, framework.getScrollY() );
|
704
|
+
}, 50);
|
705
|
+
}
|
706
|
+
|
707
|
+
// toogle pswp--fs class on root element
|
708
|
+
framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
|
709
|
+
};
|
710
|
+
|
711
|
+
ui.updateIndexIndicator = function() {
|
712
|
+
if(_options.counterEl) {
|
713
|
+
_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) +
|
714
|
+
_options.indexIndicatorSep +
|
715
|
+
_options.getNumItemsFn();
|
716
|
+
}
|
717
|
+
};
|
718
|
+
|
719
|
+
ui.onGlobalTap = function(e) {
|
720
|
+
e = e || window.event;
|
721
|
+
var target = e.target || e.srcElement;
|
722
|
+
|
723
|
+
if(_blockControlsTap) {
|
724
|
+
return;
|
725
|
+
}
|
726
|
+
|
727
|
+
if(e.detail && e.detail.pointerType === 'mouse') {
|
728
|
+
|
729
|
+
// close gallery if clicked outside of the image
|
730
|
+
if(_hasCloseClass(target)) {
|
731
|
+
pswp.close();
|
732
|
+
return;
|
733
|
+
}
|
734
|
+
|
735
|
+
if(framework.hasClass(target, 'pswp__img')) {
|
736
|
+
if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
|
737
|
+
if(_options.clickToCloseNonZoomable) {
|
738
|
+
pswp.close();
|
739
|
+
}
|
740
|
+
} else {
|
741
|
+
pswp.toggleDesktopZoom(e.detail.releasePoint);
|
742
|
+
}
|
743
|
+
}
|
744
|
+
|
745
|
+
} else {
|
746
|
+
|
747
|
+
// tap anywhere (except buttons) to toggle visibility of controls
|
748
|
+
if(_options.tapToToggleControls) {
|
749
|
+
if(_controlsVisible) {
|
750
|
+
ui.hideControls();
|
751
|
+
} else {
|
752
|
+
ui.showControls();
|
753
|
+
}
|
754
|
+
}
|
755
|
+
|
756
|
+
// tap to close gallery
|
757
|
+
if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
|
758
|
+
pswp.close();
|
759
|
+
return;
|
760
|
+
}
|
761
|
+
|
762
|
+
}
|
763
|
+
};
|
764
|
+
ui.onMouseOver = function(e) {
|
765
|
+
e = e || window.event;
|
766
|
+
var target = e.target || e.srcElement;
|
767
|
+
|
768
|
+
// add class when mouse is over an element that should close the gallery
|
769
|
+
_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
|
770
|
+
};
|
771
|
+
|
772
|
+
ui.hideControls = function() {
|
773
|
+
framework.addClass(_controls,'pswp__ui--hidden');
|
774
|
+
_controlsVisible = false;
|
775
|
+
};
|
776
|
+
|
777
|
+
ui.showControls = function() {
|
778
|
+
_controlsVisible = true;
|
779
|
+
if(!_overlayUIUpdated) {
|
780
|
+
ui.update();
|
781
|
+
}
|
782
|
+
framework.removeClass(_controls,'pswp__ui--hidden');
|
783
|
+
};
|
784
|
+
|
785
|
+
ui.supportsFullscreen = function() {
|
786
|
+
var d = document;
|
787
|
+
return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
|
788
|
+
};
|
789
|
+
|
790
|
+
ui.getFullscreenAPI = function() {
|
791
|
+
var dE = document.documentElement,
|
792
|
+
api,
|
793
|
+
tF = 'fullscreenchange';
|
794
|
+
|
795
|
+
if (dE.requestFullscreen) {
|
796
|
+
api = {
|
797
|
+
enterK: 'requestFullscreen',
|
798
|
+
exitK: 'exitFullscreen',
|
799
|
+
elementK: 'fullscreenElement',
|
800
|
+
eventK: tF
|
801
|
+
};
|
802
|
+
|
803
|
+
} else if(dE.mozRequestFullScreen ) {
|
804
|
+
api = {
|
805
|
+
enterK: 'mozRequestFullScreen',
|
806
|
+
exitK: 'mozCancelFullScreen',
|
807
|
+
elementK: 'mozFullScreenElement',
|
808
|
+
eventK: 'moz' + tF
|
809
|
+
};
|
810
|
+
|
811
|
+
|
812
|
+
|
813
|
+
} else if(dE.webkitRequestFullscreen) {
|
814
|
+
api = {
|
815
|
+
enterK: 'webkitRequestFullscreen',
|
816
|
+
exitK: 'webkitExitFullscreen',
|
817
|
+
elementK: 'webkitFullscreenElement',
|
818
|
+
eventK: 'webkit' + tF
|
819
|
+
};
|
820
|
+
|
821
|
+
} else if(dE.msRequestFullscreen) {
|
822
|
+
api = {
|
823
|
+
enterK: 'msRequestFullscreen',
|
824
|
+
exitK: 'msExitFullscreen',
|
825
|
+
elementK: 'msFullscreenElement',
|
826
|
+
eventK: 'MSFullscreenChange'
|
827
|
+
};
|
828
|
+
}
|
829
|
+
|
830
|
+
if(api) {
|
831
|
+
api.enter = function() {
|
832
|
+
// disable close-on-scroll in fullscreen
|
833
|
+
_initalCloseOnScrollValue = _options.closeOnScroll;
|
834
|
+
_options.closeOnScroll = false;
|
835
|
+
|
836
|
+
if(this.enterK === 'webkitRequestFullscreen') {
|
837
|
+
pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
|
838
|
+
} else {
|
839
|
+
return pswp.template[this.enterK]();
|
840
|
+
}
|
841
|
+
};
|
842
|
+
api.exit = function() {
|
843
|
+
_options.closeOnScroll = _initalCloseOnScrollValue;
|
844
|
+
|
845
|
+
return document[this.exitK]();
|
846
|
+
|
847
|
+
};
|
848
|
+
api.isFullscreen = function() { return document[this.elementK]; };
|
849
|
+
}
|
850
|
+
|
851
|
+
return api;
|
852
|
+
};
|
853
|
+
|
854
|
+
|
855
|
+
|
856
|
+
};
|
857
|
+
return PhotoSwipeUI_Default;
|
858
|
+
|
859
|
+
|
860
|
+
});
|