forked from argoproject/Argo
-
-
Notifications
You must be signed in to change notification settings - Fork 83
/
navis-slideshows.js
327 lines (261 loc) · 11.8 KB
/
navis-slideshows.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
(function() {
var $ = jQuery;
var attrs = [];
// Easy function to check if a user is logged in
// That way we can easily hide/toggle the wpadminbar when
// a slideshow image is opened.
function is_user_logged_in(){
if($('#wpadminbar').length){
return true;
}
}
// bit to store whether the sticky nav was visible
var sticky_nav_was_visible = false;
// the sticky nav selector
var sticky_nav_selector = '.sticky-nav-holder';
// If the Largo sticky nav is visible, hide the sticky nav,
// and remember that it was visible
function maybeHideStickyNav() {
$nav = $(sticky_nav_selector);
// Largo uses the 'show' clas rather than jQuery .show()/.hide()
if ($nav.hasClass('show')) {
$nav.removeClass('show');
sticky_nav_was_visible = true;
}
}
// If the Largo sticky nav was once visible, unhide it
// otherwise, don't unhide it.
function maybeShowStickyNav() {
if (sticky_nav_was_visible) {
$(sticky_nav_selector).addClass('show');
sticky_nav_was_visible = false;
}
}
function createSlider($gallery, slide_num){
var post_id = $gallery.attr('id'),
post_id_clean = post_id.replace('slides-', ''),
slick_opts = {
adaptiveHeight: true,
lazyLoad: 'progressive',
dots: true,
prevArrow: '<a class="slick-previous slick-navigation" href="#" title="Previous">Previous</a>',
nextArrow: '<a class="slick-next slick-navigation" href="#" title="Next">Next</a>',
initialSlide: slide_num
};
// Make the slider
$gallery.slick(slick_opts);
// If the slider is full size, allow the user to click to advance
if ($gallery.hasClass('navis-full')){
$gallery.find('.slick-slide').click(function(){
$('.slick-next').trigger('click');
});
}
// Distinguish between click or drag (drag >100ms)
var valid_click = true;
var delay = 100;
// Sets the flag to false
var drag = function(){
valid_click = false;
}
var $target = $($gallery.find('img'));
// mousedown, a global variable is set to the timeout function
$target.mousedown( function(){
cancel_click = setTimeout( drag, delay );
})
// mouseup, the timeout for drag is cancelled
$target.mouseup( function(e){
clearTimeout( cancel_click );
if(valid_click){
var $slider = $(e.target.closest('.navis-slideshow'));
expandSlider($slider);
}
valid_click = true;
})
}
function createGallery($gallery, slide_num){
// Prep each image in the gallery
// When the parent is clicked, create a slider
$gallery.find('img').each(function(){
var $this = $(this);
var src = $this.data('lazy');
var $parent = $this.parent();
$parent.prepend('<div style="background-image:url(' + src + ');"></div>');
$parent.click(function(){
var $this = $(this);
if ($this.closest('.largo-img-grid').length > 0){
$gallery.addClass('navis-slideshow').removeClass('largo-img-grid').addClass('navis-full');
// The parent index lets the slider know which image to show first
createSlider($gallery, $parent.index());
addCloseX($gallery);
}
});
});
//$gallery.slick(slick_opts);
}
function addCloseX($slider){
$slider.prepend('<span class="navis-before">X</span>');
$('.navis-before').click(function(){
closeFull($slider);
});
}
// Full-width function for small slideshows
function expandSlider($slider){
var full = 'navis-full';
if (!$slider.hasClass(full)){
$slider.addClass(full);
$slider.slick('setPosition');
addCloseX($slider);
}
// Without the timeout, the full-width slider will advance beyond the first slide...
// ...because it thinks the click to expand is also the click to advance.
setTimeout(function(){
$slider.find('.slick-slide').click(function(){
$('.slick-next').trigger('click');
});
},1000);
};
function closeSingle(gallery, attrs){
$('.navis-before').remove(); // Removes close (X) button
if (gallery.hasClass('navis-single') && attrs){
var img = gallery.find('img');
// Reset attributes
img.attr('sizes', attrs[0]);
img.attr('width', attrs[1]);
img.attr('height', attrs[2]);
gallery.attr('style', attrs[3]);
}
$('.navis-single').removeClass('navis-full navis-slideshow navis-single'); // Removes navis classes
}
function closeFull($slider){
$('.navis-before').remove(); // Removes close (X) button
$('.navis-full').removeClass('navis-full');
// Check if the slider belongs to a single image or a gallery/slideshow/grid (true is for gallery)
if($slider.hasClass('slick-slider')){
$slider.slick('setPosition');
// Check if the slider belongs to a gallery or a grid (true is for grid)
if (!$slider.hasClass('none-up')){
$slider.slick('unslick');
$slider.removeClass('navis-slideshow').addClass('largo-img-grid');
// Reconfigure grid view
var $parent = $slider.find('>div');
$parent.click(function(){
var $this = $(this);
if ($this.closest('.largo-img-grid').length > 0){
$slider.addClass('navis-slideshow').removeClass('largo-img-grid').addClass('navis-full');
createSlider($slider, $this.index());
addCloseX($slider);
}
});
}
}
// Unbind the click event so that small slideshows don't break
$slider.find('.slick-slide').unbind('click');
// Return images to original sizes
closeSingle($slider, attrs);
}
$(document).ready(function() {
// For single images, loop through each image on the page
$('article.post img').each(function() {
// If this is not already a slideshow
var img = $(this);
if ( img[0].hasAttribute('src') ){
// When an image is clicked, add classes to the parent element to open the lightbox view
img.click(function(){
var gallery = img.parent();
// Hide floating social buttons when lightbox view is opened, since
// the stacking order allows the social buttons to be on top of the lightbox
$('#floating-social-buttons').hide();
// If our gallery parent `wp-block-columns` has the `alignfull` class,
// let's add our `no-transform` class so our full image works as expected.
if(gallery.closest('.wp-block-columns').hasClass('alignfull')){
$(gallery).closest('.alignfull').addClass('no-transform');
}
// If a user is logged in, let's hide the admin menu.
// That way it doesn't overlap the image.
if(is_user_logged_in()){
$('#wpadminbar').hide();
}
maybeHideStickyNav();
// If the image isn't linked
if (gallery[0].localName !== "a"){
gallery.addClass('navis-slideshow navis-single navis-full');
// Add the close (X) button
gallery.prepend('<span class=\"navis-before\">X</span>');
// Save original attribute values
var sizes = img.attr('sizes'),
width = img.attr('width'),
height = img.attr('height'),
style = gallery.attr('style');
attrs = [sizes, width, height, style];
// Adjust styles so images can expand to full width
gallery.css('max-width','100%');
img.removeAttr('width height sizes');
// Close the lightbox when the close (X) button is clicked
$('.navis-single .navis-before').click(function(){
closeSingle(gallery, attrs);
// If the gallery parent had `alignfull` class when we opened the lightbox,
// let's remove our `no-transform` supporter class
if(gallery.closest('.wp-block-columns').hasClass('alignfull')){
$(gallery).closest('.alignfull').removeClass('no-transform');
}
// If a user is logged in, we can go ahead and
// restore the admin menu when the lightbox is closed.
if(is_user_logged_in()){
$('#wpadminbar').show();
}
maybeShowStickyNav();
});
}
});
}
});
// For each gallery, convert to a grid if necessary
$('.navis-slideshow').each(function() {
var $gallery = $(this);
var slide_num = 0;
// 'none-up' is the slideshow setting (0 columns)
if ($gallery.hasClass('none-up')){
var post_id = $gallery.attr('id'),
post_id_clean = post_id.replace('slides-', '');
// Check for permalink
if (window.location.hash) {
var search = new RegExp(post_id_clean, 'g');
if (search.test(window.location.hash.replace('#', ''))) {
var fragment = window.location.hash.replace(/^\#.*\//, '', 'gmi'),
slideNum = parseInt(fragment);
if (!isNaN(slideNum))
slide_num = slideNum - 1;
}
}
// Create a slider for the gallery
createSlider($gallery, slide_num);
} else {
// If this gallery should have a grid layout, add the largo grid class
$gallery.removeClass('navis-slideshow').addClass('largo-img-grid');
createGallery($gallery, slide_num);
}
});
});
$(document).keyup(function(e) {
var $slider = $('.navis-full');
if (e.keyCode == 27) { // escape
if ($slider.length > 0) {
closeFull($slider);
// If our sliders parent `wp-block-columns` has `alignfull` class,
// we'll want to remove our `no-transform` class to restore our transform properties
// so `alignfull` looks correct
if($slider.closest('.wp-block-columns').hasClass('alignfull')){
$slider.closest('.wp-block-columns').removeClass('no-transform');
}
// If a user is logged in, we can go ahead and
// restore the admin menu when the lightbox is closed.
if(is_user_logged_in()){
$('#wpadminbar').show();
}
maybeShowStickyNav();
// reshow the sticky nav holder?
$('.sticky-nav-holder').show();
}
}
});
})();