| 1 |
import {Lightbox} from "./Lightbox"; |
| 2 |
import * as Util from "../Util"; |
| 3 |
import {Core} from "../Core"; |
| 4 |
|
| 5 |
export class PhotonicSwipebox extends Lightbox { |
| 6 |
constructor($) { |
| 7 |
super(); |
| 8 |
this.$ = $; |
| 9 |
} |
| 10 |
|
| 11 |
changeSlide(thumb, idx) { |
| 12 |
const $ = this.$; |
| 13 |
if (thumb != null) { |
| 14 |
const rel = $(thumb).attr('rel'), |
| 15 |
all_thumbs = $('[rel="' + rel + '"]'), |
| 16 |
slide = all_thumbs[idx]; |
| 17 |
this.setHash(slide); |
| 18 |
|
| 19 |
const videoID = $(slide).attr('href'), |
| 20 |
videoURL = $(slide).attr('data-html5-href'); |
| 21 |
if (videoURL !== undefined) { |
| 22 |
this.getVideoSize(videoURL, {width: window.innerWidth, height: window.innerHeight - 50}).then(function(dimensions) { |
| 23 |
$(videoID).find('video').attr('width', dimensions.newWidth).attr('height', dimensions.newHeight); |
| 24 |
$('.swipebox-inline-container ' + videoID).find('video').attr({ width: dimensions.newWidth, height: dimensions.newHeight }); |
| 25 |
}); |
| 26 |
} |
| 27 |
|
| 28 |
const shareable = { |
| 29 |
'url': location.href, |
| 30 |
'title': Util.getText($(slide).data('title')), |
| 31 |
'image': $(slide).attr('href') |
| 32 |
}; |
| 33 |
this.addSocial('#swipebox-arrows', shareable); |
| 34 |
} |
| 35 |
}; |
| 36 |
|
| 37 |
changeVideoURL(element, regular, embed) { |
| 38 |
this.$(element).attr('href', regular); |
| 39 |
}; |
| 40 |
|
| 41 |
hostedVideo(a) { |
| 42 |
const $ = this.$; |
| 43 |
const html5 = $(a).attr('href').match(new RegExp(/(\.mp4|\.webm|\.ogg)/i)); |
| 44 |
let css = $(a).attr('class'); |
| 45 |
css = css !== undefined && css.includes('photonic-lb'); |
| 46 |
|
| 47 |
if (html5 !== null && !css) { |
| 48 |
$(a).addClass(Photonic_JS.lightbox_library + "-html5-video"); |
| 49 |
let $videos = $('#photonic-html5-videos'); |
| 50 |
$videos = $videos.length ? $videos : $('<div style="display:none;" id="photonic-html5-videos"></div>').appendTo(document.body); |
| 51 |
$videos.append('<div id="photonic-html5-video-' + this.videoIndex + '"><video controls preload="none"><source src="' + $(a).attr('href') + '" type="video/mp4">Your browser does not support HTML5 video.</video></div>'); |
| 52 |
$(a).attr('data-html5-href', $(a).attr('href')); |
| 53 |
$(a).attr('href', '#photonic-html5-video-' + this.videoIndex); |
| 54 |
this.videoIndex++; |
| 55 |
} |
| 56 |
}; |
| 57 |
|
| 58 |
initialize(selector, group) { |
| 59 |
const $ = this.$; |
| 60 |
this.handleSolos(); |
| 61 |
const self = this; |
| 62 |
|
| 63 |
$('a.photonic-swipebox, a.swipebox-video, a.swipebox-html5-video').swipebox({ |
| 64 |
hideBarsDelay: Photonic_JS.sb_hide_bars_delay, |
| 65 |
removeBarsOnMobile: !(Photonic_JS.enable_swipebox_mobile_bars === '1'), |
| 66 |
hideCloseButtonOnMobile: Photonic_JS.sb_hide_mobile_close, |
| 67 |
loopAtEnd: Photonic_JS.lightbox_loop === '1', |
| 68 |
currentThumb: null, |
| 69 |
videoURL: null, |
| 70 |
videoID: null, |
| 71 |
selector: 'a.photonic-swipebox', |
| 72 |
beforeOpen: function(e) { |
| 73 |
const evt = e || window.event; |
| 74 |
if (evt !== undefined) { |
| 75 |
const clicked = $(evt.target).parents('.photonic-swipebox'); |
| 76 |
if (clicked.length > 0) { |
| 77 |
this.currentThumb = clicked[0]; |
| 78 |
} |
| 79 |
else { |
| 80 |
const all_matches = $('[data-photonic-deep="' + Core.getDeep().substr(1) + '"]'); |
| 81 |
if (all_matches.length > 0) { |
| 82 |
this.currentThumb = all_matches[0]; |
| 83 |
} |
| 84 |
} |
| 85 |
} |
| 86 |
this.videoURL = $(this.currentThumb).attr('data-html5-href'); |
| 87 |
this.videoID = $(this.currentThumb).attr('href'); |
| 88 |
}, |
| 89 |
afterOpen: function(idx) { |
| 90 |
if (this.videoURL) { |
| 91 |
const videoID = this.videoID; |
| 92 |
self.getVideoSize(this.videoURL, { |
| 93 |
width: window.innerWidth, |
| 94 |
height: window.innerHeight - 50 |
| 95 |
}).then(function (dimensions) { |
| 96 |
$(videoID).find('video').attr('width', dimensions.newWidth).attr('height', dimensions.newHeight); |
| 97 |
$('.swipebox-inline-container ' + videoID).find('video').attr('width', dimensions.newWidth).attr('height', dimensions.newHeight); |
| 98 |
}); |
| 99 |
} |
| 100 |
self.changeSlide(this.currentThumb, idx); |
| 101 |
}, |
| 102 |
prevSlide: function(idx) { |
| 103 |
self.changeSlide(this.currentThumb, idx); |
| 104 |
}, |
| 105 |
nextSlide: function(idx) { |
| 106 |
self.changeSlide(this.currentThumb, idx); |
| 107 |
}, |
| 108 |
afterClose: function() { |
| 109 |
self.unsetHash(); |
| 110 |
} |
| 111 |
}); |
| 112 |
}; |
| 113 |
|
| 114 |
} |
| 115 |
|
