| 1 |
import {Lightbox} from "./Lightbox"; |
| 2 |
import * as Util from "../Util"; |
| 3 |
|
| 4 |
export class PhotonicFeatherlight extends Lightbox { |
| 5 |
constructor($) { |
| 6 |
super(); |
| 7 |
this.$ = $; |
| 8 |
} |
| 9 |
|
| 10 |
resizeContainer(elem) { |
| 11 |
const $ = this.$; |
| 12 |
const target = elem, |
| 13 |
video = $(target.attr('data-featherlight')), |
| 14 |
videoURL = $(video.children()[0]).attr('src'); |
| 15 |
if (videoURL === undefined) { |
| 16 |
//videoURL = target.attr('data-html5-href'); |
| 17 |
} |
| 18 |
this.getVideoSize(videoURL, {width: window.innerWidth * 0.85 - 50, height: window.innerHeight * 0.85 - 50}).then(function(dimensions) { |
| 19 |
$('.featherlight-content').find('video').attr('width', dimensions.newWidth).attr('height', dimensions.newHeight); |
| 20 |
target.attr('data-featherlight', $('<div/>').append(video).html()); |
| 21 |
}); |
| 22 |
}; |
| 23 |
|
| 24 |
resizeImageContainer(elem) { |
| 25 |
const $ = this.$; |
| 26 |
const imageURL = $(elem).attr('href'); |
| 27 |
this.getImageSize(imageURL, {width: window.innerWidth * 0.85 - 50, height: window.innerHeight * 0.85 - 50}).then(function(dimensions) { |
| 28 |
$('.featherlight-content').find('img').css({ width: dimensions.newWidth + 'px', height: dimensions.newHeight + 'px'}); |
| 29 |
}); |
| 30 |
}; |
| 31 |
|
| 32 |
soloImages() { |
| 33 |
const $ = this.$; |
| 34 |
$('a[href]').filter(function() { |
| 35 |
return /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)/i.test( $(this).attr('href')); |
| 36 |
}).filter(function() { |
| 37 |
const res = new RegExp('photonic-lb').test($(this).attr('class')); |
| 38 |
return !res; |
| 39 |
}).addClass("photonic-featherlight-solo"); |
| 40 |
}; |
| 41 |
|
| 42 |
changeVideoURL(element, regular, embed) { |
| 43 |
const $ = this.$; |
| 44 |
$(element).attr('href', embed); |
| 45 |
$(element).attr("data-featherlight", 'iframe').addClass('featherlight-video'); |
| 46 |
}; |
| 47 |
|
| 48 |
hostedVideo(a) { |
| 49 |
const $ = this.$; |
| 50 |
const html5 = $(a).attr('href').match(new RegExp(/(\.mp4|\.webm|\.ogg)/i)); |
| 51 |
let css = $(a).attr('class'); |
| 52 |
css = css !== undefined && css.includes('photonic-lb'); |
| 53 |
|
| 54 |
if (html5 !== null && !css) { |
| 55 |
$(a).addClass(Photonic_JS.lightbox_library + "-html5-video"); |
| 56 |
$(a).attr('data-featherlight', '<video controls preload="none"><source src="' + $(a).attr('href') + '" type="video/mp4">Your browser does not support HTML5 video.</video>'); |
| 57 |
|
| 58 |
this.videoIndex++; |
| 59 |
} |
| 60 |
}; |
| 61 |
|
| 62 |
initializeGallery(selector, self) { |
| 63 |
const $ = this.$; |
| 64 |
$(selector).featherlightGallery({ |
| 65 |
gallery: { |
| 66 |
fadeIn: 300, |
| 67 |
fadeOut: 300 |
| 68 |
}, |
| 69 |
openSpeed: 300, |
| 70 |
closeSpeed: 300, |
| 71 |
afterContent: function() { |
| 72 |
this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content.parent()); |
| 73 |
this.$legend.html(this.$currentTarget.data('title')); |
| 74 |
this.$instance.find('.featherlight-previous img').remove(); |
| 75 |
this.$instance.find('.featherlight-next img').remove(); |
| 76 |
if (this.$currentTarget !== null && this.$currentTarget.length > 0) { |
| 77 |
self.setHash(this.$currentTarget[0]); |
| 78 |
} |
| 79 |
|
| 80 |
const shareable = { |
| 81 |
'url': location.href, |
| 82 |
'title': Util.getText(this.$currentTarget.data('title')), |
| 83 |
'image': this.$content.attr('src') |
| 84 |
}; |
| 85 |
self.addSocial('.photonic-featherlight', shareable); |
| 86 |
$(window).resize(); |
| 87 |
}, |
| 88 |
afterClose: function() { |
| 89 |
self.unsetHash(); |
| 90 |
}, |
| 91 |
onResize: function() { |
| 92 |
//if ($(this.$currentTarget).attr('data-featherlight-type') == 'video' || $(this.$currentTarget).attr('data-html5-href') != undefined) { |
| 93 |
if ($(this.$currentTarget).attr('data-featherlight-type') === 'video') { |
| 94 |
self.resizeContainer($(this.$currentTarget)); |
| 95 |
} |
| 96 |
else { |
| 97 |
self.resizeImageContainer($(this.$currentTarget)); |
| 98 |
} |
| 99 |
}, |
| 100 |
variant: 'photonic-featherlight' |
| 101 |
}); |
| 102 |
}; |
| 103 |
|
| 104 |
initialize(selector, group) { |
| 105 |
const $ = this.$; |
| 106 |
this.handleSolos(); |
| 107 |
const self = this; |
| 108 |
|
| 109 |
$(selector).each(function() { |
| 110 |
const current = $(this), |
| 111 |
thumbs = current.find('a.photonic-featherlight'); |
| 112 |
let rel = ''; |
| 113 |
if (thumbs.length > 0) { |
| 114 |
rel = $(thumbs[0]).attr('rel'); |
| 115 |
} |
| 116 |
self.initializeGallery('a[rel="' + rel + '"]', self); |
| 117 |
}); |
| 118 |
|
| 119 |
$('a.photonic-featherlight-solo').featherlight({ |
| 120 |
afterContent: function() { |
| 121 |
this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content.parent()); |
| 122 |
this.$legend.html(this.$currentTarget.data('title') || this.$currentTarget.attr('title') || this.$currentTarget.find('img').attr('title') || this.$currentTarget.find('img').attr('alt')); |
| 123 |
}, |
| 124 |
type: 'image', |
| 125 |
variant: 'photonic-featherlight' |
| 126 |
}); |
| 127 |
|
| 128 |
$('a.featherlight-video').featherlight({ |
| 129 |
iframeWidth: 640, |
| 130 |
iframeHeight: 480, |
| 131 |
iframeFrameborder: 0, |
| 132 |
variant: 'photonic-featherlight' |
| 133 |
}); |
| 134 |
|
| 135 |
$('a.featherlight-html5-video').featherlight({ |
| 136 |
onResize: function() { |
| 137 |
self.resizeContainer($(this.$currentTarget)); |
| 138 |
}, |
| 139 |
variant: 'photonic-featherlight' |
| 140 |
}); |
| 141 |
}; |
| 142 |
|
| 143 |
initializeForNewContainer(containerId) { |
| 144 |
this.initialize(containerId); |
| 145 |
}; |
| 146 |
} |
| 147 |
|
