| 1 |
import {Lightbox} from "./Lightbox"; |
| 2 |
import {Core} from "../Core"; |
| 3 |
import * as Util from "../Util"; |
| 4 |
|
| 5 |
export class PhotonicSpotlight extends Lightbox { |
| 6 |
constructor() { |
| 7 |
super(); |
| 8 |
} |
| 9 |
|
| 10 |
hostedVideo(a) { |
| 11 |
const self = this; |
| 12 |
const html5 = a.getAttribute('href').match(new RegExp(/(\.mp4|\.webm|\.ogg)/i)), |
| 13 |
css = a.classList.contains('photonic-lb'); |
| 14 |
|
| 15 |
if (html5 !== null && !css) { |
| 16 |
a.classList.add(Photonic_JS.lightbox_library + '-video'); |
| 17 |
self.modifyAdditionalVideoProperties(a); |
| 18 |
} |
| 19 |
}; |
| 20 |
|
| 21 |
changeVideoURL(element, regular, embed, poster) { |
| 22 |
element.setAttribute('href', embed); |
| 23 |
if (poster) { |
| 24 |
element.setAttribute('data-poster', poster); |
| 25 |
} |
| 26 |
element.classList.remove(Photonic_JS.lightbox_library + "-video"); |
| 27 |
element.classList.add(Photonic_JS.lightbox_library + "-embed-video"); |
| 28 |
}; |
| 29 |
|
| 30 |
modifyAdditionalVideoProperties(anchor) { |
| 31 |
if (anchor != null && anchor instanceof Element && anchor.tagName === 'A') { |
| 32 |
if (anchor.getAttribute('data-poster') == null) { |
| 33 |
if (anchor.querySelector('img') != null) { |
| 34 |
anchor.setAttribute('data-poster', anchor.querySelector('img').getAttribute('src')); |
| 35 |
} |
| 36 |
else { |
| 37 |
anchor.setAttribute('data-poster', Photonic_JS.plugin_url + 'include/images/clear.png'); |
| 38 |
} |
| 39 |
} |
| 40 |
|
| 41 |
if (anchor.getAttribute('data-src-mp4') == null) { |
| 42 |
anchor.setAttribute('data-src-mp4', anchor.getAttribute('href')); |
| 43 |
} |
| 44 |
} |
| 45 |
} |
| 46 |
|
| 47 |
initialize(selector) { |
| 48 |
this.handleSolos(); |
| 49 |
const self = this; |
| 50 |
|
| 51 |
Spotlight; // Without this, a call to Spotlight's methods fails, for some reason. |
| 52 |
let spotlight = window.Spotlight; |
| 53 |
|
| 54 |
let selection; |
| 55 |
if (selector == null) { |
| 56 |
selection = document.querySelectorAll('.photonic-level-1-container'); |
| 57 |
} |
| 58 |
else if (selector instanceof NodeList) { |
| 59 |
selection = selector; |
| 60 |
} |
| 61 |
else if (selector instanceof Element) { |
| 62 |
selection = [selector]; |
| 63 |
} |
| 64 |
else { |
| 65 |
selection = document.querySelectorAll(selector); |
| 66 |
} |
| 67 |
|
| 68 |
selection.forEach((current) => { |
| 69 |
const links = current.querySelectorAll('.photonic-lb'); |
| 70 |
if (links.length > 0) { |
| 71 |
const rel = links.item(0).getAttribute('rel'); // Get "rel" from first "a" element |
| 72 |
let gallery = []; |
| 73 |
links.forEach((link) => { |
| 74 |
if (link.getAttribute('data-photonic-media-type') === 'image') { |
| 75 |
gallery.push({ |
| 76 |
src: link.getAttribute('href'), |
| 77 |
title: Util.HTMLSanitizer.SanitizeHTML(link.getAttribute('data-title')), |
| 78 |
deep: link.getAttribute('data-photonic-deep'), |
| 79 |
}); |
| 80 |
} |
| 81 |
else { |
| 82 |
gallery.push({ |
| 83 |
media: 'video', |
| 84 |
"src-mp4": link.getAttribute('href'), |
| 85 |
poster: link.getAttribute('data-poster'), |
| 86 |
title: Util.HTMLSanitizer.SanitizeHTML(link.getAttribute('data-title')), |
| 87 |
deep: link.getAttribute('data-photonic-deep'), |
| 88 |
}); |
| 89 |
} |
| 90 |
}); |
| 91 |
Core.addToLightboxList(rel, gallery); |
| 92 |
} |
| 93 |
}); |
| 94 |
|
| 95 |
document.addEventListener('click', e => { |
| 96 |
if (!(e.target instanceof Element) || !e.target.closest('.photonic-lb')) { |
| 97 |
return; |
| 98 |
} |
| 99 |
e.preventDefault(); |
| 100 |
|
| 101 |
const clicked = e.target.closest('.photonic-lb'); |
| 102 |
const container = clicked.closest('.photonic-level-1-container'); |
| 103 |
const siblings = container.querySelectorAll('.photonic-lb'); |
| 104 |
const index = Array.from(siblings).indexOf(clicked); |
| 105 |
const rel = clicked.getAttribute('rel'); |
| 106 |
const gallery = Core.getLightboxList()[rel]; |
| 107 |
spotlight.show(gallery, { |
| 108 |
index: index + 1, |
| 109 |
infinite: Photonic_JS.lightbox_loop === '1', |
| 110 |
autoslide: Photonic_JS.slideshow_mode === '1', |
| 111 |
play: parseInt(Photonic_JS.slideshow_interval, 10) / 1000, |
| 112 |
download: Photonic_JS.sp_download === '1', |
| 113 |
autohide: Photonic_JS.sp_hide_bars === '1', |
| 114 |
onchange: (idx, options) => { |
| 115 |
const current = gallery[idx - 1]; // idx is 1-based, not 0-based |
| 116 |
const title = document.querySelector("#spotlight .spl-title"); |
| 117 |
title.innerHTML = Util.HTMLSanitizer.SanitizeHTML(current.title); |
| 118 |
self.setHash(current.deep); |
| 119 |
|
| 120 |
const shareable = { |
| 121 |
'url': location.href, |
| 122 |
'title': Util.getText(current.title), |
| 123 |
'image': current.src |
| 124 |
}; |
| 125 |
self.addSocial('#spotlight .spl-header', shareable); |
| 126 |
}, |
| 127 |
onclose: (idx) => { |
| 128 |
self.unsetHash(); |
| 129 |
} |
| 130 |
}); |
| 131 |
}, false); |
| 132 |
|
| 133 |
document.addEventListener('click', e => { |
| 134 |
if (!(e.target instanceof Element) || !e.target.closest('.spotlight-embed-video')) { |
| 135 |
return; |
| 136 |
} |
| 137 |
e.preventDefault(); |
| 138 |
|
| 139 |
const clicked = e.target.closest('.spotlight-embed-video'); |
| 140 |
spotlight.show([{ |
| 141 |
media: "node", |
| 142 |
src: (function(){ |
| 143 |
const iframe = document.createElement("iframe"); |
| 144 |
iframe.width = 560; |
| 145 |
iframe.height = 315; |
| 146 |
iframe.style = 'height: 315px; width: 560px;'; |
| 147 |
iframe.src = clicked.href; |
| 148 |
return iframe; |
| 149 |
}()) |
| 150 |
}]); |
| 151 |
}, false); |
| 152 |
|
| 153 |
document.addEventListener('click', e => { |
| 154 |
if (!(e.target instanceof Element) || !e.target.closest('.spotlight-video')) { |
| 155 |
return; |
| 156 |
} |
| 157 |
e.preventDefault(); |
| 158 |
|
| 159 |
const clicked = e.target.closest('.spotlight-video'); |
| 160 |
spotlight.show([{ |
| 161 |
media: "video", |
| 162 |
"src-mp4": clicked.getAttribute('href'), |
| 163 |
poster: clicked.getAttribute('data-poster') |
| 164 |
}]); |
| 165 |
}, false); |
| 166 |
} |
| 167 |
|
| 168 |
|
| 169 |
initializeForNewContainer(containerId) { |
| 170 |
this.initialize(containerId); |
| 171 |
} |
| 172 |
} |
| 173 |
|
