| 1 |
import {Core} from "./Core"; |
| 2 |
import * as Util from "./Util"; |
| 3 |
import {JustifiedGrid} from "./Layouts/Justified"; |
| 4 |
import {Masonry} from "./Layouts/Masonry"; |
| 5 |
import {MasonryHorizontal} from "./Layouts/MasonryHorizontal"; |
| 6 |
import {Mosaic} from "./Layouts/Mosaic"; |
| 7 |
import {Tooltip} from "./Components/Tooltip"; |
| 8 |
import {Modal} from "./Components/Modal"; |
| 9 |
|
| 10 |
let spinners = 0; |
| 11 |
|
| 12 |
const bypassPopup = data => { |
| 13 |
Core.hideLoading(); |
| 14 |
let panel; |
| 15 |
if (data instanceof Element) { |
| 16 |
panel = data; |
| 17 |
} |
| 18 |
else { |
| 19 |
panel = Util.getElement(data).firstElementChild; |
| 20 |
} |
| 21 |
|
| 22 |
Util.hide(panel); |
| 23 |
const images = panel.querySelectorAll('img'); |
| 24 |
images.forEach(image => { |
| 25 |
if ((image.getAttribute('src') === null || image.getAttribute('src') === '') && image.getAttribute('data-src') !== null) { |
| 26 |
image.setAttribute('src', image.getAttribute('data-src')); |
| 27 |
image.removeAttribute('data-src'); |
| 28 |
} |
| 29 |
}); |
| 30 |
document.body.appendChild(panel); |
| 31 |
Core.moveHTML5External(); |
| 32 |
const lightbox = Core.getLightbox(); |
| 33 |
if (lightbox !== undefined && lightbox !== null) { |
| 34 |
lightbox.initializeForNewContainer('#' + panel.getAttribute('id')); |
| 35 |
} |
| 36 |
|
| 37 |
const thumbs = panel.querySelectorAll('.photonic-lb'); |
| 38 |
if (thumbs.length > 0) { |
| 39 |
Core.setDeep('#' + thumbs[0].getAttribute('data-photonic-deep')); |
| 40 |
|
| 41 |
const evt = new MouseEvent('click', { |
| 42 |
bubbles: true, |
| 43 |
cancelable: true, |
| 44 |
view: window |
| 45 |
}); |
| 46 |
// If cancelled, don't dispatch our event |
| 47 |
!thumbs[0].dispatchEvent(evt); |
| 48 |
} |
| 49 |
}; |
| 50 |
|
| 51 |
const displayPopup = (data, provider, popup, panelId) => { |
| 52 |
const safePanelId = panelId.replace('.', '\\.'); // FOR EXISTING ELEMENTS WHICH NEED SANITIZED PANELID |
| 53 |
const div = Util.getElement(data).firstElementChild; |
| 54 |
const grid = div.querySelector('.modal-gallery'); |
| 55 |
|
| 56 |
const doImageLayout = () => { |
| 57 |
const popupPanel = document.querySelector('#photonic-' + provider + '-' + popup + '-' + safePanelId); |
| 58 |
if (popupPanel) { |
| 59 |
popupPanel.appendChild(div); |
| 60 |
Util.show(popupPanel); |
| 61 |
} |
| 62 |
|
| 63 |
Modal(div, { |
| 64 |
modalTarget: 'photonic-' + provider + '-panel-' + safePanelId, |
| 65 |
color: '#000', |
| 66 |
width: Photonic_JS.gallery_panel_width + '%', |
| 67 |
closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%' |
| 68 |
}); |
| 69 |
Core.moveHTML5External(); |
| 70 |
const lightbox = Core.getLightbox(); |
| 71 |
if (lightbox !== undefined && lightbox !== null) { |
| 72 |
lightbox.initializeForNewContainer('#' + div.getAttribute('id')); |
| 73 |
} |
| 74 |
|
| 75 |
Tooltip('[data-photonic-tooltip]', '.photonic-tooltip-container'); |
| 76 |
Core.hideLoading(); |
| 77 |
}; |
| 78 |
|
| 79 |
if (grid.classList.contains('sizes-present')) { |
| 80 |
Core.watchForImages(grid); |
| 81 |
doImageLayout(); |
| 82 |
} |
| 83 |
else { |
| 84 |
Core.waitForImages(grid).then(() => { |
| 85 |
doImageLayout(); |
| 86 |
}); |
| 87 |
} |
| 88 |
}; |
| 89 |
|
| 90 |
const redisplayPopupContents = (provider, panelId, panel, args) => { |
| 91 |
const panelEl = Util.getElement(panel); |
| 92 |
if ('show' === args['popup']) { |
| 93 |
Core.hideLoading(); |
| 94 |
Modal(panelEl, { |
| 95 |
modalTarget: 'photonic-' + provider + '-panel-' + panelId, |
| 96 |
color: '#000', |
| 97 |
width: Photonic_JS.gallery_panel_width + '%', |
| 98 |
closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%' |
| 99 |
}); |
| 100 |
} |
| 101 |
else { |
| 102 |
bypassPopup(document.getElementById('photonic-' + provider + '-panel-' + panelId)); |
| 103 |
} |
| 104 |
}; |
| 105 |
|
| 106 |
export const processRequest = (provider, type, identifier, args) => { |
| 107 |
args['action'] = 'photonic_display_level_2_contents'; |
| 108 |
Util.post(Photonic_JS.ajaxurl, args, function(data) { |
| 109 |
if (data.substr(0, Photonic_JS.password_failed.length) === Photonic_JS.password_failed) { |
| 110 |
Core.hideLoading(); |
| 111 |
const prompter = '#photonic-' + provider + '-' + type + '-prompter-' + identifier; |
| 112 |
const prompterDialog = Core.prompterList[prompter]; |
| 113 |
if (prompterDialog !== undefined && prompterDialog !== null) { |
| 114 |
prompterDialog.show(); |
| 115 |
} |
| 116 |
} |
| 117 |
else { |
| 118 |
if ('show' === args['popup']) { |
| 119 |
displayPopup(data, provider, type, identifier); |
| 120 |
} |
| 121 |
else { |
| 122 |
if (data !== '') { |
| 123 |
bypassPopup(data); |
| 124 |
} |
| 125 |
else { |
| 126 |
Core.hideLoading(); |
| 127 |
} |
| 128 |
} |
| 129 |
} |
| 130 |
}); |
| 131 |
}; |
| 132 |
|
| 133 |
export const displayLevel2 = (provider, type, args) => { |
| 134 |
const identifier = args['panel_id'].substr(('photonic-' + provider + '-' + type + '-thumb-').length); |
| 135 |
const panel = '#photonic-' + provider + '-panel-' + identifier; |
| 136 |
|
| 137 |
let existing = document.getElementById('photonic-' + provider + '-panel-' + identifier); |
| 138 |
|
| 139 |
if (existing == null) { |
| 140 |
existing = document.getElementById(args['panel_id']); |
| 141 |
if (existing.classList.contains('photonic-' + provider + '-passworded')) { |
| 142 |
Core.initializePasswordPrompter(`#photonic-${provider}-${type}-prompter-${identifier}`); |
| 143 |
} |
| 144 |
else { |
| 145 |
Core.showSpinner(); |
| 146 |
processRequest(provider, type, identifier, args); |
| 147 |
} |
| 148 |
} |
| 149 |
else { |
| 150 |
Core.showSpinner(); |
| 151 |
redisplayPopupContents(provider, identifier, panel, args); |
| 152 |
} |
| 153 |
}; |
| 154 |
|
| 155 |
export const processL3Request = (clicked, header, args) => { |
| 156 |
args['action'] = 'photonic_display_level_3_contents'; |
| 157 |
Core.showSpinner(); |
| 158 |
const lightbox = Core.getLightbox(); |
| 159 |
Util.post(Photonic_JS.ajaxurl, args, function(data){ |
| 160 |
const insert = Util.getElement(data); |
| 161 |
if (header) { |
| 162 |
const layout = insert.querySelector('.photonic-level-2-container'); |
| 163 |
|
| 164 |
const container = header.parentNode; |
| 165 |
let returnedStream = insert.firstElementChild; |
| 166 |
const collectionId = args.node.substr('flickr-collection-'.length); |
| 167 |
returnedStream.setAttribute('id', args.stream + '-' + collectionId); |
| 168 |
container.insertBefore(returnedStream, header.nextSibling); |
| 169 |
|
| 170 |
if (layout.classList.contains('photonic-random-layout')) { |
| 171 |
JustifiedGrid(false, false, null, lightbox); |
| 172 |
} |
| 173 |
else if (layout.classList.contains('photonic-mosaic-layout')) { |
| 174 |
Mosaic(false, false); |
| 175 |
} |
| 176 |
else if (layout.classList.contains('photonic-masonry-layout')) { |
| 177 |
Masonry(false, false); |
| 178 |
} |
| 179 |
else if (layout.classList.contains('photonic-masonry-horizontal-layout')) { |
| 180 |
MasonryHorizontal(false, false); |
| 181 |
} |
| 182 |
else if (layout.classList.contains('sizes-present')) { |
| 183 |
Core.watchForImages(layout); |
| 184 |
} |
| 185 |
|
| 186 |
const level2 = returnedStream.querySelectorAll('.photonic-level-2'); |
| 187 |
|
| 188 |
level2.forEach(function(item) { |
| 189 |
item.style.display = 'inline-block'; |
| 190 |
}); |
| 191 |
|
| 192 |
Tooltip('[data-photonic-tooltip]', '.photonic-tooltip-container'); |
| 193 |
|
| 194 |
clicked.classList.remove('photonic-level-3-expand-plus'); |
| 195 |
clicked.classList.add('photonic-level-3-expand-up'); |
| 196 |
clicked.setAttribute('title', Photonic_JS.minimize_panel === undefined ? 'Hide' : Photonic_JS.minimize_panel); |
| 197 |
} |
| 198 |
Core.hideLoading(); |
| 199 |
}); |
| 200 |
}; |
| 201 |
|
| 202 |
export const lazyLoad = evt => { |
| 203 |
spinners++; |
| 204 |
Core.showSpinner(); |
| 205 |
const clicked = evt.currentTarget; |
| 206 |
const shortcode = clicked.getAttribute('data-photonic-shortcode'); |
| 207 |
const args = { |
| 208 |
'action': 'photonic_lazy_load', |
| 209 |
'shortcode': shortcode |
| 210 |
}; |
| 211 |
|
| 212 |
const countdownSpinners = () => { |
| 213 |
spinners--; |
| 214 |
|
| 215 |
if (spinners <= 0) { |
| 216 |
Core.hideLoading(); |
| 217 |
} |
| 218 |
}; |
| 219 |
|
| 220 |
Util.post(Photonic_JS.ajaxurl, args, data => { |
| 221 |
let div = document.createElement('div'); |
| 222 |
div.innerHTML = data; |
| 223 |
div = div.firstElementChild; |
| 224 |
if (div) { |
| 225 |
const divId = div.getAttribute('id'); |
| 226 |
const divClass = divId.substring(0, divId.lastIndexOf('-')); |
| 227 |
|
| 228 |
const streams = document.documentElement.querySelectorAll('.' + divClass); |
| 229 |
let max = 0; |
| 230 |
streams.forEach(stream => { |
| 231 |
let streamId = stream.getAttribute('id'); |
| 232 |
streamId = streamId.substring(streamId.lastIndexOf('-') + 1); |
| 233 |
streamId = parseInt(streamId, 10); |
| 234 |
max = Math.max(max, streamId); |
| 235 |
}); |
| 236 |
max = max + 1; |
| 237 |
|
| 238 |
const regex = new RegExp(divId, 'gi'); |
| 239 |
div.innerHTML = data.replace(regex, divClass + '-' + max) |
| 240 |
.replace('photonic-slideshow-' + divId.substring(divId.lastIndexOf('-') + 1), 'photonic-slideshow-' + max); |
| 241 |
div = div.firstElementChild; |
| 242 |
// Level 2 elements get their own ids, which need to be readjusted because the back-end always assigns them a gallery_index of 1 |
| 243 |
div.querySelectorAll('figure.photonic-level-2').forEach((figure) => { |
| 244 |
if (figure.getAttribute('id') != null) { |
| 245 |
let figId = figure.getAttribute('id'); |
| 246 |
let modId = figId.substring(0, figId.lastIndexOf('-') + 1) + max; // Replace last part of id with the "max" |
| 247 |
figure.setAttribute('id', modId); |
| 248 |
|
| 249 |
let anchor = figure.querySelector('a'); |
| 250 |
if (anchor.getAttribute('id') != null) { |
| 251 |
let anchorId = anchor.getAttribute('id'); |
| 252 |
let modAnchorId = anchorId.substring(0, anchorId.lastIndexOf('-') + 1) + max; // Replace last part of id with the "max" |
| 253 |
anchor.setAttribute('id', modAnchorId); |
| 254 |
} |
| 255 |
|
| 256 |
let prompter = figure.querySelector('.photonic-password-prompter'); |
| 257 |
if (prompter != null && prompter.getAttribute('id') != null) { |
| 258 |
let prompterId = prompter.getAttribute('id'); |
| 259 |
let modPrompterId = prompterId.substring(0, prompterId.lastIndexOf('-') + 1) + max; // Replace last part of id with the "max" |
| 260 |
prompter.setAttribute('id', modPrompterId); |
| 261 |
} |
| 262 |
} |
| 263 |
}); |
| 264 |
|
| 265 |
clicked.insertAdjacentElement('afterend', div); |
| 266 |
|
| 267 |
const newDivId = divClass + '-' + max; |
| 268 |
|
| 269 |
let lightbox = Core.getLightbox(); |
| 270 |
if (lightbox !== undefined && lightbox !== null) { |
| 271 |
lightbox.initializeForNewContainer('#' + div.getAttribute('id')); |
| 272 |
} |
| 273 |
|
| 274 |
if (document.querySelectorAll('#' + newDivId + ' .photonic-random-layout').length > 0) { |
| 275 |
JustifiedGrid(false, true, '#' + newDivId + ' .photonic-random-layout', lightbox); |
| 276 |
spinners--; |
| 277 |
} |
| 278 |
else if (document.querySelectorAll('#' + newDivId + ' .photonic-masonry-layout').length > 0) { |
| 279 |
Masonry(false, true, '#' + newDivId + ' .photonic-masonry-layout'); |
| 280 |
spinners--; |
| 281 |
} |
| 282 |
else if (document.querySelectorAll('#' + newDivId + ' .photonic-masonry-horizontal-layout').length > 0) { |
| 283 |
MasonryHorizontal(false, true, '#' + newDivId + ' .photonic-masonry-horizontal-layout'); |
| 284 |
spinners--; |
| 285 |
} |
| 286 |
else if (document.querySelectorAll('#' + newDivId + ' .photonic-mosaic-layout').length > 0) { |
| 287 |
Mosaic(false, true, '#' + newDivId + ' .photonic-mosaic-layout'); |
| 288 |
spinners--; |
| 289 |
} |
| 290 |
// Slider(document.querySelector('#photonic-slideshow-' + max)); |
| 291 |
|
| 292 |
if (div.classList.contains('sizes-present') || (div.querySelector('.sizes-present') !== null)) { |
| 293 |
Core.watchForImages(div); |
| 294 |
Core.standardizeTitleWidths(); |
| 295 |
countdownSpinners(); |
| 296 |
} |
| 297 |
else { |
| 298 |
Core.waitForImages(div).then(() => { |
| 299 |
const standard = document.documentElement.querySelectorAll('#' + newDivId + ' .photonic-standard-layout .photonic-level-1, ' + '#' + newDivId + ' .photonic-standard-layout .photonic-level-2'); |
| 300 |
standard.forEach(image => { |
| 301 |
image.style.display = 'inline-block'; |
| 302 |
}); |
| 303 |
Core.standardizeTitleWidths(); |
| 304 |
countdownSpinners(); |
| 305 |
}); |
| 306 |
} |
| 307 |
Core.moveHTML5External(); |
| 308 |
|
| 309 |
clicked.parentNode.removeChild(clicked); |
| 310 |
|
| 311 |
Tooltip('[data-photonic-tooltip]', '.photonic-tooltip-container'); |
| 312 |
|
| 313 |
if (spinners <= 0) { |
| 314 |
Core.hideLoading(); |
| 315 |
} |
| 316 |
} |
| 317 |
}); |
| 318 |
}; |
| 319 |
|
| 320 |
|
