| 1 |
import {Lightbox} from "./Lightbox"; |
| 2 |
import * as Util from "../Util"; |
| 3 |
|
| 4 |
export class PhotonicBigPicture extends Lightbox { |
| 5 |
constructor() { |
| 6 |
super(); |
| 7 |
} |
| 8 |
|
| 9 |
soloImages() { |
| 10 |
const solos = super.soloImages(); |
| 11 |
solos.forEach(solo => { |
| 12 |
solo.addEventListener('click', e => { |
| 13 |
e.preventDefault(); |
| 14 |
const img = solo.querySelector('img'); |
| 15 |
let title = solo.getAttribute('data-title') || solo.getAttribute('title') || Util.getText(img.getAttribute('alt')); |
| 16 |
if (title != null) { |
| 17 |
img.setAttribute('data-caption', title); |
| 18 |
} |
| 19 |
BigPicture({ |
| 20 |
el: img, |
| 21 |
}); |
| 22 |
}); |
| 23 |
}); |
| 24 |
}; |
| 25 |
|
| 26 |
hostedVideo(a) { |
| 27 |
const self = this; |
| 28 |
const html5 = a.getAttribute('href').match(new RegExp(/(\.mp4|\.webm|\.ogg)/i)), |
| 29 |
css = a.classList.contains('photonic-lb'); |
| 30 |
|
| 31 |
let options = { |
| 32 |
el: a, |
| 33 |
onError: () => { |
| 34 |
console.log('There was an error loading the video ' + a.getAttribute('href')); |
| 35 |
}, |
| 36 |
}; |
| 37 |
if (html5 !== null && !css) { |
| 38 |
a.classList.add(Photonic_JS.lightbox_library + "-html5-video"); |
| 39 |
options.vidSrc = a.getAttribute('href'); |
| 40 |
} |
| 41 |
else if (a.classList.contains(Photonic_JS.lightbox_library + '-video')) { |
| 42 |
// YouTube or Vimeo |
| 43 |
const youTube = self.catchYouTubeURL(a.getAttribute('href')), |
| 44 |
vimeo = self.catchVimeoURL(a.getAttribute('href')); |
| 45 |
if (youTube) { |
| 46 |
options.ytSrc = youTube.url; |
| 47 |
} |
| 48 |
else if (vimeo) { |
| 49 |
options.vimeoSrc = vimeo; |
| 50 |
} |
| 51 |
} |
| 52 |
if (Object.keys(options).length > 2) { |
| 53 |
if (a.getAttribute('title') != null) { |
| 54 |
a.setAttribute('data-caption', Util.getText(a.getAttribute('title'))); |
| 55 |
} |
| 56 |
a.addEventListener('click', e => { |
| 57 |
e.preventDefault(); |
| 58 |
BigPicture(options); |
| 59 |
}); |
| 60 |
} |
| 61 |
}; |
| 62 |
|
| 63 |
initialize(selector, destroy) { |
| 64 |
this.handleSolos(); |
| 65 |
const self = this; |
| 66 |
|
| 67 |
let selection; |
| 68 |
if (selector == null) { |
| 69 |
selection = document.querySelectorAll('.photonic-level-1-container'); |
| 70 |
} |
| 71 |
else if (selector instanceof NodeList) { |
| 72 |
selection = selector; |
| 73 |
} |
| 74 |
else if (selector instanceof Element) { |
| 75 |
selection = [selector]; |
| 76 |
} |
| 77 |
else { |
| 78 |
selection = document.querySelectorAll(selector); |
| 79 |
} |
| 80 |
|
| 81 |
selection.forEach(current => { |
| 82 |
const galleryId = current.getAttribute('id'); |
| 83 |
const items = current.querySelectorAll('.photonic-lb'); |
| 84 |
items.forEach(item => { |
| 85 |
item.setAttribute('data-caption', item.getAttribute('data-title')); |
| 86 |
item.addEventListener('click', e => { |
| 87 |
e.preventDefault(); |
| 88 |
let options = { |
| 89 |
el: item, |
| 90 |
gallery: '#' + galleryId, |
| 91 |
loop: Photonic_JS.lightbox_loop, |
| 92 |
onError: () => { |
| 93 |
console.log('There was an error loading the image, ' + item.getAttribute('href')) |
| 94 |
}, |
| 95 |
animationStart: () => { |
| 96 |
self.setHash(item); |
| 97 |
const shareable = { |
| 98 |
'url': location.href, |
| 99 |
'title': Util.getText(item.getAttribute('data-title')), |
| 100 |
'image': item.getAttribute('href') |
| 101 |
}; |
| 102 |
self.addSocial('#bp_container', shareable); |
| 103 |
}, |
| 104 |
onChangeImage: (a) => { |
| 105 |
if (a.length === 2) { |
| 106 |
if (a[1].el && a[1].el.getAttribute('data-photonic-deep') !== undefined) { |
| 107 |
self.setHash(a[1].el); |
| 108 |
const shareable = { |
| 109 |
'url': location.href, |
| 110 |
'title': Util.getText(item.getAttribute('data-title')), |
| 111 |
'image': item.getAttribute('href') |
| 112 |
}; |
| 113 |
self.addSocial('#bp_container', shareable); |
| 114 |
} |
| 115 |
} |
| 116 |
}, |
| 117 |
onClose: () => { |
| 118 |
self.unsetHash(); |
| 119 |
} |
| 120 |
}; |
| 121 |
if (item.getAttribute('data-photonic-media-type') === 'video') { |
| 122 |
options.vidSrc = item.getAttribute('href'); |
| 123 |
} |
| 124 |
|
| 125 |
BigPicture(options); |
| 126 |
}); |
| 127 |
}); |
| 128 |
}); |
| 129 |
}; |
| 130 |
|
| 131 |
initializeForNewContainer(containerId) { |
| 132 |
this.initialize(containerId); |
| 133 |
} |
| 134 |
} |
| 135 |
|
