| 1 |
/*! elementor - v3.26.0 - 19-12-2024 */ |
| 2 |
"use strict"; |
| 3 |
(self["webpackChunkelementor"] = self["webpackChunkelementor"] || []).push([["lightbox"],{ |
| 4 |
|
| 5 |
/***/ "../assets/dev/js/frontend/utils/icons/e-icons.js": |
| 6 |
/*!********************************************************!*\ |
| 7 |
!*** ../assets/dev/js/frontend/utils/icons/e-icons.js ***! |
| 8 |
\********************************************************/ |
| 9 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 10 |
|
| 11 |
|
| 12 |
|
| 13 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 14 |
Object.defineProperty(exports, "__esModule", ({ |
| 15 |
value: true |
| 16 |
})); |
| 17 |
exports.zoomOutBold = exports.zoomInBold = exports.twitter = exports.shareArrow = exports.pinterest = exports.loading = exports.frameMinimize = exports.frameExpand = exports.facebook = exports.downloadBold = exports.close = exports.chevronRight = exports.chevronLeft = void 0; |
| 18 |
var _manager = _interopRequireDefault(__webpack_require__(/*! ./manager */ "../assets/dev/js/frontend/utils/icons/manager.js")); |
| 19 |
// This file is automatically generated, please don't change anything in this file. |
| 20 |
|
| 21 |
const iconsManager = new _manager.default('eicon'); |
| 22 |
const chevronLeft = exports.chevronLeft = { |
| 23 |
get element() { |
| 24 |
const svgData = { |
| 25 |
path: 'M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z', |
| 26 |
width: 1000, |
| 27 |
height: 1000 |
| 28 |
}; |
| 29 |
return iconsManager.createSvgElement('chevron-left', svgData); |
| 30 |
} |
| 31 |
}; |
| 32 |
const chevronRight = exports.chevronRight = { |
| 33 |
get element() { |
| 34 |
const svgData = { |
| 35 |
path: 'M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z', |
| 36 |
width: 1000, |
| 37 |
height: 1000 |
| 38 |
}; |
| 39 |
return iconsManager.createSvgElement('chevron-right', svgData); |
| 40 |
} |
| 41 |
}; |
| 42 |
const close = exports.close = { |
| 43 |
get element() { |
| 44 |
const svgData = { |
| 45 |
path: 'M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z', |
| 46 |
width: 1000, |
| 47 |
height: 1000 |
| 48 |
}; |
| 49 |
return iconsManager.createSvgElement('close', svgData); |
| 50 |
} |
| 51 |
}; |
| 52 |
const downloadBold = exports.downloadBold = { |
| 53 |
get element() { |
| 54 |
const svgData = { |
| 55 |
path: 'M572 42H428C405 42 385 61 385 85V385H228C197 385 180 424 203 447L475 719C489 732 511 732 524 719L797 447C819 424 803 385 771 385H614V85C615 61 595 42 572 42ZM958 915V715C958 691 939 672 915 672H653L565 760C529 796 471 796 435 760L347 672H85C61 672 42 691 42 715V915C42 939 61 958 85 958H915C939 958 958 939 958 915ZM736 873C736 853 720 837 700 837 681 837 665 853 665 873 665 892 681 908 700 908 720 908 736 892 736 873ZM815 837C835 837 851 853 851 873 851 892 835 908 815 908 795 908 779 892 779 873 779 853 795 837 815 837Z', |
| 56 |
width: 1000, |
| 57 |
height: 1000 |
| 58 |
}; |
| 59 |
return iconsManager.createSvgElement('download-bold', svgData); |
| 60 |
} |
| 61 |
}; |
| 62 |
const facebook = exports.facebook = { |
| 63 |
get element() { |
| 64 |
const svgData = { |
| 65 |
path: 'M858 42H142C88 42 42 87 42 142V863C42 913 88 958 142 958H421V646H292V500H421V387C421 258 496 192 613 192 667 192 725 200 725 200V325H663C600 325 579 362 579 404V500H721L700 646H583V958H863C917 958 963 913 963 858V142C958 87 913 42 858 42L858 42Z', |
| 66 |
width: 1000, |
| 67 |
height: 1000 |
| 68 |
}; |
| 69 |
return iconsManager.createSvgElement('facebook', svgData); |
| 70 |
} |
| 71 |
}; |
| 72 |
const frameExpand = exports.frameExpand = { |
| 73 |
get element() { |
| 74 |
const svgData = { |
| 75 |
path: 'M863 583C890 583 914 605 916 632L917 637V863L916 868C914 893 893 914 868 916L863 917H638L632 916C607 914 586 893 584 868L583 863 584 857C586 832 607 811 632 809L638 808H808V637L809 632C811 605 835 583 863 583ZM138 583C165 583 189 605 191 632L192 637V808H363C390 808 414 830 416 857L417 863C417 890 395 914 368 916L363 917H138C110 917 86 895 84 868L83 863V637C83 607 108 583 138 583ZM863 83C890 83 914 105 916 132L917 137V362C917 392 893 417 863 417 835 417 811 395 809 368L808 362V192H638C610 192 586 170 584 143L583 137C583 110 605 86 632 84L638 83H863ZM363 83L368 84C393 86 414 107 416 132L417 137 416 143C414 168 393 189 368 191L363 192H192V362L191 368C189 395 165 417 138 417S86 395 84 368L83 362V137L84 132C86 107 107 86 132 84L138 83H363Z', |
| 76 |
width: 1000, |
| 77 |
height: 1000 |
| 78 |
}; |
| 79 |
return iconsManager.createSvgElement('frame-expand', svgData); |
| 80 |
} |
| 81 |
}; |
| 82 |
const frameMinimize = exports.frameMinimize = { |
| 83 |
get element() { |
| 84 |
const svgData = { |
| 85 |
path: 'M363 583C392 583 413 604 417 633L417 637V863C417 892 392 917 363 917 333 917 313 896 308 867L308 863V692H138C108 692 88 671 83 642L83 637C83 608 104 587 133 583L138 583H363ZM638 583C608 583 588 604 583 633L583 637V863C583 892 608 917 638 917 667 917 688 896 692 867L692 863V692H863C892 692 913 671 917 642L917 637C917 608 896 587 867 583L863 583H638ZM363 417C392 417 413 396 417 367L417 362V137C417 108 392 83 363 83 333 83 313 104 308 133L308 137V308H138C108 308 88 329 83 358L83 362C83 392 104 412 133 417L138 417H363ZM638 417C608 417 588 396 583 367L583 362V137C583 108 608 83 638 83 667 83 688 104 692 133L692 137V308H863C892 308 913 329 917 358L917 362C917 392 896 412 867 417L863 417H638Z', |
| 86 |
width: 1000, |
| 87 |
height: 1000 |
| 88 |
}; |
| 89 |
return iconsManager.createSvgElement('frame-minimize', svgData); |
| 90 |
} |
| 91 |
}; |
| 92 |
const loading = exports.loading = { |
| 93 |
get element() { |
| 94 |
const svgData = { |
| 95 |
path: 'M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z', |
| 96 |
width: 1000, |
| 97 |
height: 1000 |
| 98 |
}; |
| 99 |
return iconsManager.createSvgElement('loading', svgData); |
| 100 |
} |
| 101 |
}; |
| 102 |
const pinterest = exports.pinterest = { |
| 103 |
get element() { |
| 104 |
const svgData = { |
| 105 |
path: 'M950 496C950 746 746 950 496 950 450 950 404 942 363 929 379 900 408 850 421 808 425 787 450 700 450 700 467 729 508 754 554 754 692 754 792 629 792 471 792 321 671 208 513 208 317 208 213 342 213 483 213 550 250 633 304 658 313 662 317 662 321 654 321 650 329 617 333 604 333 600 333 596 329 592 313 567 296 525 296 487 288 387 367 292 496 292 608 292 688 367 688 475 688 600 625 683 546 683 500 683 467 646 479 600 492 546 517 487 517 450 517 417 500 387 458 387 413 387 375 433 375 496 375 537 388 562 388 562S342 754 333 787C325 825 329 883 333 917 163 854 42 687 42 496 42 246 246 42 496 42S950 246 950 496Z', |
| 106 |
width: 1000, |
| 107 |
height: 1000 |
| 108 |
}; |
| 109 |
return iconsManager.createSvgElement('pinterest', svgData); |
| 110 |
} |
| 111 |
}; |
| 112 |
const shareArrow = exports.shareArrow = { |
| 113 |
get element() { |
| 114 |
const svgData = { |
| 115 |
path: 'M946 383L667 133C642 112 604 129 604 162V292C238 296 71 637 42 812 238 587 363 521 604 517V658C604 692 642 708 667 687L946 442C963 425 963 400 946 383Z', |
| 116 |
width: 1000, |
| 117 |
height: 1000 |
| 118 |
}; |
| 119 |
return iconsManager.createSvgElement('share-arrow', svgData); |
| 120 |
} |
| 121 |
}; |
| 122 |
const twitter = exports.twitter = { |
| 123 |
get element() { |
| 124 |
const svgData = { |
| 125 |
path: 'M863 312C863 321 863 329 863 337 863 587 675 871 329 871 221 871 125 842 42 787 58 787 71 792 88 792 175 792 254 762 321 712 238 712 171 658 146 583 158 583 171 587 183 587 200 587 217 583 233 579 146 562 83 487 83 396V387C108 400 138 408 167 412 117 379 83 321 83 254 83 221 92 187 108 158 200 271 342 346 496 354 492 342 492 325 492 312 492 208 575 125 679 125 733 125 783 146 817 183 858 175 900 158 938 137 925 179 896 217 854 242 892 237 929 229 963 212 933 250 900 283 863 312Z', |
| 126 |
width: 1000, |
| 127 |
height: 1000 |
| 128 |
}; |
| 129 |
return iconsManager.createSvgElement('twitter', svgData); |
| 130 |
} |
| 131 |
}; |
| 132 |
const zoomInBold = exports.zoomInBold = { |
| 133 |
get element() { |
| 134 |
const svgData = { |
| 135 |
path: 'M388 383V312C388 283 413 258 442 258 471 258 496 283 496 312V383H567C596 383 621 408 621 437S596 492 567 492H496V562C496 592 471 617 442 617 413 617 388 592 388 562V492H317C288 492 263 467 263 437S288 383 317 383H388ZM654 733C592 779 517 804 438 804 233 804 71 642 71 437S233 71 438 71 804 233 804 437C804 521 779 596 733 654L896 817C917 837 917 871 896 892 875 913 842 913 821 892L654 733ZM438 696C579 696 696 579 696 437S579 179 438 179 179 296 179 437 296 696 438 696Z', |
| 136 |
width: 1000, |
| 137 |
height: 1000 |
| 138 |
}; |
| 139 |
return iconsManager.createSvgElement('zoom-in-bold', svgData); |
| 140 |
} |
| 141 |
}; |
| 142 |
const zoomOutBold = exports.zoomOutBold = { |
| 143 |
get element() { |
| 144 |
const svgData = { |
| 145 |
path: 'M750 683L946 879C963 896 963 929 946 946 929 963 896 967 879 946L683 750C617 804 533 833 438 833 221 833 42 654 42 437S221 42 438 42 833 221 833 437C833 529 800 612 750 683ZM296 392H575C600 392 621 412 621 442 621 467 600 487 575 487H296C271 487 250 467 250 442 250 412 271 392 296 392ZM438 737C604 737 738 604 738 437S604 137 438 137 138 271 138 437 271 737 438 737Z', |
| 146 |
width: 1000, |
| 147 |
height: 1000 |
| 148 |
}; |
| 149 |
return iconsManager.createSvgElement('zoom-out-bold', svgData); |
| 150 |
} |
| 151 |
}; |
| 152 |
|
| 153 |
/***/ }), |
| 154 |
|
| 155 |
/***/ "../assets/dev/js/frontend/utils/icons/manager.js": |
| 156 |
/*!********************************************************!*\ |
| 157 |
!*** ../assets/dev/js/frontend/utils/icons/manager.js ***! |
| 158 |
\********************************************************/ |
| 159 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 160 |
|
| 161 |
|
| 162 |
|
| 163 |
Object.defineProperty(exports, "__esModule", ({ |
| 164 |
value: true |
| 165 |
})); |
| 166 |
exports["default"] = void 0; |
| 167 |
__webpack_require__(/*! core-js/modules/es.array.includes.js */ "../node_modules/core-js/modules/es.array.includes.js"); |
| 168 |
__webpack_require__(/*! core-js/modules/es.array.push.js */ "../node_modules/core-js/modules/es.array.push.js"); |
| 169 |
class IconsManager { |
| 170 |
static symbolsContainer; |
| 171 |
static iconsUsageList = []; |
| 172 |
constructor(elementsPrefix) { |
| 173 |
this.prefix = `${elementsPrefix}-`; |
| 174 |
this.createSvgSymbolsContainer(); |
| 175 |
} |
| 176 |
createSvgElement(name, _ref) { |
| 177 |
let { |
| 178 |
path, |
| 179 |
width, |
| 180 |
height |
| 181 |
} = _ref; |
| 182 |
const iconName = this.prefix + name, |
| 183 |
iconSelector = '#' + this.prefix + name; |
| 184 |
|
| 185 |
// Create symbol if not exist yet. |
| 186 |
if (!IconsManager.iconsUsageList.includes(iconName)) { |
| 187 |
if (!IconsManager.symbolsContainer.querySelector(iconSelector)) { |
| 188 |
const symbol = this.createSymbolElement({ |
| 189 |
id: iconName, |
| 190 |
path, |
| 191 |
width, |
| 192 |
height |
| 193 |
}); |
| 194 |
IconsManager.symbolsContainer.appendChild(symbol); |
| 195 |
} |
| 196 |
IconsManager.iconsUsageList.push(iconName); |
| 197 |
} |
| 198 |
return this.createSvgIconElement({ |
| 199 |
iconName, |
| 200 |
iconSelector |
| 201 |
}); |
| 202 |
} |
| 203 |
createSvgNode(tag, _ref2) { |
| 204 |
let { |
| 205 |
props = {}, |
| 206 |
attrs = {} |
| 207 |
} = _ref2; |
| 208 |
const node = document.createElementNS('http://www.w3.org/2000/svg', tag); |
| 209 |
Object.keys(props).map(key => node[key] = props[key]); |
| 210 |
Object.keys(attrs).map(key => node.setAttributeNS(null, key, attrs[key])); |
| 211 |
return node; |
| 212 |
} |
| 213 |
createSvgIconElement(_ref3) { |
| 214 |
let { |
| 215 |
iconName, |
| 216 |
iconSelector |
| 217 |
} = _ref3; |
| 218 |
return this.createSvgNode('svg', { |
| 219 |
props: { |
| 220 |
innerHTML: '<use xlink:href="' + iconSelector + '" />' |
| 221 |
}, |
| 222 |
attrs: { |
| 223 |
class: 'e-font-icon-svg e-' + iconName |
| 224 |
} |
| 225 |
}); |
| 226 |
} |
| 227 |
createSvgSymbolsContainer() { |
| 228 |
if (!IconsManager.symbolsContainer) { |
| 229 |
const symbolsContainerId = 'e-font-icon-svg-symbols'; |
| 230 |
IconsManager.symbolsContainer = document.getElementById(symbolsContainerId); |
| 231 |
if (!IconsManager.symbolsContainer) { |
| 232 |
IconsManager.symbolsContainer = this.createSvgNode('svg', { |
| 233 |
attrs: { |
| 234 |
style: 'display: none;', |
| 235 |
class: symbolsContainerId |
| 236 |
} |
| 237 |
}); |
| 238 |
document.body.appendChild(IconsManager.symbolsContainer); |
| 239 |
} |
| 240 |
} |
| 241 |
} |
| 242 |
createSymbolElement(_ref4) { |
| 243 |
let { |
| 244 |
id, |
| 245 |
path, |
| 246 |
width, |
| 247 |
height |
| 248 |
} = _ref4; |
| 249 |
return this.createSvgNode('symbol', { |
| 250 |
props: { |
| 251 |
innerHTML: '<path d="' + path + '"></path>', |
| 252 |
id |
| 253 |
}, |
| 254 |
attrs: { |
| 255 |
viewBox: '0 0 ' + width + ' ' + height |
| 256 |
} |
| 257 |
}); |
| 258 |
} |
| 259 |
} |
| 260 |
exports["default"] = IconsManager; |
| 261 |
|
| 262 |
/***/ }), |
| 263 |
|
| 264 |
/***/ "../assets/dev/js/frontend/utils/lightbox/lightbox.js": |
| 265 |
/*!************************************************************!*\ |
| 266 |
!*** ../assets/dev/js/frontend/utils/lightbox/lightbox.js ***! |
| 267 |
\************************************************************/ |
| 268 |
/***/ ((module, __unused_webpack_exports, __webpack_require__) => { |
| 269 |
|
| 270 |
|
| 271 |
|
| 272 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 273 |
__webpack_require__(/*! core-js/modules/es.array.push.js */ "../node_modules/core-js/modules/es.array.push.js"); |
| 274 |
var _screenfull = _interopRequireDefault(__webpack_require__(/*! ./screenfull */ "../assets/dev/js/frontend/utils/lightbox/screenfull.js")); |
| 275 |
var _eIcons = __webpack_require__(/*! @elementor/e-icons */ "../assets/dev/js/frontend/utils/icons/e-icons.js"); |
| 276 |
module.exports = elementorModules.ViewModule.extend({ |
| 277 |
oldAnimation: null, |
| 278 |
swiper: null, |
| 279 |
player: null, |
| 280 |
isFontIconSvgExperiment: elementorFrontend.config.experimentalFeatures.e_font_icon_svg, |
| 281 |
getDefaultSettings() { |
| 282 |
return { |
| 283 |
classes: { |
| 284 |
item: 'elementor-lightbox-item', |
| 285 |
image: 'elementor-lightbox-image', |
| 286 |
videoContainer: 'elementor-video-container', |
| 287 |
videoWrapper: 'elementor-video-wrapper', |
| 288 |
playButton: 'elementor-custom-embed-play', |
| 289 |
playButtonIcon: 'fa', |
| 290 |
playing: 'elementor-playing', |
| 291 |
hidden: 'elementor-hidden', |
| 292 |
invisible: 'elementor-invisible', |
| 293 |
preventClose: 'elementor-lightbox-prevent-close', |
| 294 |
slideshow: { |
| 295 |
container: 'swiper', |
| 296 |
slidesWrapper: 'swiper-wrapper', |
| 297 |
prevButton: 'elementor-swiper-button elementor-swiper-button-prev', |
| 298 |
nextButton: 'elementor-swiper-button elementor-swiper-button-next', |
| 299 |
prevButtonIcon: 'eicon-chevron-left', |
| 300 |
nextButtonIcon: 'eicon-chevron-right', |
| 301 |
slide: 'swiper-slide', |
| 302 |
header: 'elementor-slideshow__header', |
| 303 |
footer: 'elementor-slideshow__footer', |
| 304 |
title: 'elementor-slideshow__title', |
| 305 |
description: 'elementor-slideshow__description', |
| 306 |
counter: 'elementor-slideshow__counter', |
| 307 |
iconExpand: 'eicon-frame-expand', |
| 308 |
iconShrink: 'eicon-frame-minimize', |
| 309 |
iconZoomIn: 'eicon-zoom-in-bold', |
| 310 |
iconZoomOut: 'eicon-zoom-out-bold', |
| 311 |
iconShare: 'eicon-share-arrow', |
| 312 |
shareMenu: 'elementor-slideshow__share-menu', |
| 313 |
shareLinks: 'elementor-slideshow__share-links', |
| 314 |
hideUiVisibility: 'elementor-slideshow--ui-hidden', |
| 315 |
shareMode: 'elementor-slideshow--share-mode', |
| 316 |
fullscreenMode: 'elementor-slideshow--fullscreen-mode', |
| 317 |
zoomMode: 'elementor-slideshow--zoom-mode' |
| 318 |
} |
| 319 |
}, |
| 320 |
selectors: { |
| 321 |
image: '.elementor-lightbox-image', |
| 322 |
links: 'a, [data-elementor-lightbox]', |
| 323 |
slideshow: { |
| 324 |
activeSlide: '.swiper-slide-active', |
| 325 |
prevSlide: '.swiper-slide-prev', |
| 326 |
nextSlide: '.swiper-slide-next' |
| 327 |
} |
| 328 |
}, |
| 329 |
modalOptions: { |
| 330 |
id: 'elementor-lightbox', |
| 331 |
entranceAnimation: 'zoomIn', |
| 332 |
videoAspectRatio: 169, |
| 333 |
position: { |
| 334 |
enable: false |
| 335 |
} |
| 336 |
} |
| 337 |
}; |
| 338 |
}, |
| 339 |
getModal() { |
| 340 |
if (!module.exports.modal) { |
| 341 |
this.initModal(); |
| 342 |
} |
| 343 |
return module.exports.modal; |
| 344 |
}, |
| 345 |
initModal() { |
| 346 |
const closeIcon = {}; |
| 347 |
|
| 348 |
// If the experiment is active the closeIcon should be an entire SVG element otherwise it should pass the eicon class name. |
| 349 |
if (this.isFontIconSvgExperiment) { |
| 350 |
closeIcon.iconElement = _eIcons.close.element; |
| 351 |
} else { |
| 352 |
closeIcon.iconClass = 'eicon-close'; |
| 353 |
} |
| 354 |
const modal = module.exports.modal = elementorFrontend.getDialogsManager().createWidget('lightbox', { |
| 355 |
className: 'elementor-lightbox', |
| 356 |
closeButton: true, |
| 357 |
closeButtonOptions: { |
| 358 |
...closeIcon, |
| 359 |
attributes: { |
| 360 |
role: 'button', |
| 361 |
tabindex: 0, |
| 362 |
'aria-label': elementorFrontend.config.i18n.close + ' (Esc)' |
| 363 |
} |
| 364 |
}, |
| 365 |
selectors: { |
| 366 |
preventClose: '.' + this.getSettings('classes.preventClose') |
| 367 |
}, |
| 368 |
hide: { |
| 369 |
onClick: true |
| 370 |
} |
| 371 |
}); |
| 372 |
modal.on('hide', function () { |
| 373 |
modal.setMessage(''); |
| 374 |
}); |
| 375 |
}, |
| 376 |
showModal(options) { |
| 377 |
if (options.url && !options.url.startsWith('http')) { |
| 378 |
return; |
| 379 |
} |
| 380 |
this.elements.$closeButton = this.getModal().getElements('closeButton'); |
| 381 |
this.$buttons = this.elements.$closeButton; |
| 382 |
this.focusedButton = null; |
| 383 |
const self = this, |
| 384 |
defaultOptions = self.getDefaultSettings().modalOptions; |
| 385 |
self.id = options.id; |
| 386 |
self.setSettings('modalOptions', jQuery.extend(defaultOptions, options.modalOptions)); |
| 387 |
const modal = self.getModal(); |
| 388 |
modal.setID(self.getSettings('modalOptions.id')); |
| 389 |
modal.onShow = function () { |
| 390 |
DialogsManager.getWidgetType('lightbox').prototype.onShow.apply(modal, arguments); |
| 391 |
self.setEntranceAnimation(); |
| 392 |
}; |
| 393 |
modal.onHide = function () { |
| 394 |
DialogsManager.getWidgetType('lightbox').prototype.onHide.apply(modal, arguments); |
| 395 |
modal.getElements('message').removeClass('animated'); |
| 396 |
if (_screenfull.default.isFullscreen) { |
| 397 |
self.deactivateFullscreen(); |
| 398 |
} |
| 399 |
self.unbindHotKeys(); |
| 400 |
}; |
| 401 |
switch (options.type) { |
| 402 |
case 'video': |
| 403 |
self.setVideoContent(options); |
| 404 |
break; |
| 405 |
case 'image': |
| 406 |
{ |
| 407 |
const slides = [{ |
| 408 |
image: options.url, |
| 409 |
index: 0, |
| 410 |
title: options.title, |
| 411 |
description: options.description, |
| 412 |
hash: options.hash |
| 413 |
}]; |
| 414 |
options.slideshow = { |
| 415 |
slides, |
| 416 |
swiper: { |
| 417 |
loop: false, |
| 418 |
pagination: false |
| 419 |
} |
| 420 |
}; |
| 421 |
self.setSlideshowContent(options.slideshow); |
| 422 |
break; |
| 423 |
} |
| 424 |
case 'slideshow': |
| 425 |
self.setSlideshowContent(options.slideshow); |
| 426 |
break; |
| 427 |
default: |
| 428 |
self.setHTMLContent(options.html); |
| 429 |
} |
| 430 |
modal.show(); |
| 431 |
}, |
| 432 |
createLightbox(element) { |
| 433 |
let lightboxData = {}; |
| 434 |
if (element.dataset.elementorLightbox) { |
| 435 |
lightboxData = JSON.parse(element.dataset.elementorLightbox); |
| 436 |
} |
| 437 |
if (lightboxData.type && 'slideshow' !== lightboxData.type) { |
| 438 |
this.showModal(lightboxData); |
| 439 |
return; |
| 440 |
} |
| 441 |
if (!element.dataset.elementorLightboxSlideshow) { |
| 442 |
const slideshowID = 'single-img'; |
| 443 |
this.showModal({ |
| 444 |
type: 'image', |
| 445 |
id: slideshowID, |
| 446 |
url: element.href, |
| 447 |
hash: element.getAttribute('data-e-action-hash'), |
| 448 |
title: element.dataset.elementorLightboxTitle, |
| 449 |
description: element.dataset.elementorLightboxDescription, |
| 450 |
modalOptions: { |
| 451 |
id: 'elementor-lightbox-slideshow-' + slideshowID |
| 452 |
} |
| 453 |
}); |
| 454 |
return; |
| 455 |
} |
| 456 |
const initialSlideURL = element.dataset.elementorLightboxVideo || element.href; |
| 457 |
this.openSlideshow(element.dataset.elementorLightboxSlideshow, initialSlideURL); |
| 458 |
}, |
| 459 |
setHTMLContent(html) { |
| 460 |
if (window.elementorCommon) { |
| 461 |
elementorDevTools.deprecation.deprecated('elementorFrontend.utils.lightbox.setHTMLContent()', '3.1.4'); |
| 462 |
} |
| 463 |
this.getModal().setMessage(html); |
| 464 |
}, |
| 465 |
setVideoContent(options) { |
| 466 |
const $ = jQuery; |
| 467 |
let $videoElement; |
| 468 |
if ('hosted' === options.videoType) { |
| 469 |
const videoParams = $.extend({ |
| 470 |
src: options.url, |
| 471 |
autoplay: '' |
| 472 |
}, options.videoParams); |
| 473 |
$videoElement = $('<video>', videoParams); |
| 474 |
} else { |
| 475 |
let apiProvider; |
| 476 |
if (-1 !== options.url.indexOf('vimeo.com')) { |
| 477 |
apiProvider = elementorFrontend.utils.vimeo; |
| 478 |
} else if (options.url.match(/^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com|youtube-nocookie\.com)/)) { |
| 479 |
apiProvider = elementorFrontend.utils.youtube; |
| 480 |
} else { |
| 481 |
return; |
| 482 |
} |
| 483 |
$videoElement = $('<iframe>', { |
| 484 |
allowfullscreen: 1 |
| 485 |
}); |
| 486 |
if ('yes' === options.autoplay) { |
| 487 |
$videoElement.attr('allow', 'autoplay'); |
| 488 |
$videoElement.attr('src', apiProvider.getAutoplayURL(options.url)); |
| 489 |
} else { |
| 490 |
$videoElement.attr('src', options.url); |
| 491 |
} |
| 492 |
} |
| 493 |
const classes = this.getSettings('classes'), |
| 494 |
aspectRatio = this.getRatioDictionry(this.getSettings('modalOptions.videoAspectRatio')), |
| 495 |
$videoContainer = $('<div>', { |
| 496 |
class: `${classes.videoContainer} ${classes.preventClose}` |
| 497 |
}), |
| 498 |
$videoWrapper = $('<div>', { |
| 499 |
class: `${classes.videoWrapper} elementor-video-${this.getRatioType(aspectRatio)}`, |
| 500 |
style: '--video-aspect-ratio: ' + aspectRatio |
| 501 |
}); |
| 502 |
$videoWrapper.append($videoElement); |
| 503 |
$videoContainer.append($videoWrapper); |
| 504 |
const modal = this.getModal(); |
| 505 |
modal.setMessage($videoContainer); |
| 506 |
const onHideMethod = modal.onHide; |
| 507 |
modal.onHide = function () { |
| 508 |
onHideMethod(); |
| 509 |
this.$buttons = jQuery(); |
| 510 |
this.focusedButton = null; |
| 511 |
modal.getElements('message').removeClass('elementor-video-wrapper'); |
| 512 |
}; |
| 513 |
}, |
| 514 |
getRatioDictionry(ratio) { |
| 515 |
const aspectRatiosDictionary = { |
| 516 |
219: 2.33333, |
| 517 |
// 21/9 |
| 518 |
169: 1.77777, |
| 519 |
// 16/9 |
| 520 |
43: 1.33333, |
| 521 |
// 4/3 |
| 522 |
32: 1.5, |
| 523 |
// 3/2 |
| 524 |
11: 1, |
| 525 |
// 1/1 |
| 526 |
916: 0.5625 // 9/16 |
| 527 |
}; |
| 528 |
return aspectRatiosDictionary[ratio] || ratio; |
| 529 |
}, |
| 530 |
getRatioType(ratio) { |
| 531 |
let type = ''; |
| 532 |
if (1 === ratio) { |
| 533 |
type = 'square'; |
| 534 |
} else { |
| 535 |
type = ratio < 1 ? 'portrait' : 'landscape'; |
| 536 |
} |
| 537 |
return type; |
| 538 |
}, |
| 539 |
getShareLinks() { |
| 540 |
const { |
| 541 |
i18n |
| 542 |
} = elementorFrontend.config, |
| 543 |
socialNetworks = { |
| 544 |
facebook: { |
| 545 |
label: i18n.shareOnFacebook, |
| 546 |
iconElement: _eIcons.facebook |
| 547 |
}, |
| 548 |
twitter: { |
| 549 |
label: i18n.shareOnTwitter, |
| 550 |
iconElement: _eIcons.twitter |
| 551 |
}, |
| 552 |
pinterest: { |
| 553 |
label: i18n.pinIt, |
| 554 |
iconElement: _eIcons.pinterest |
| 555 |
} |
| 556 |
}, |
| 557 |
$ = jQuery, |
| 558 |
classes = this.getSettings('classes'), |
| 559 |
selectors = this.getSettings('selectors'), |
| 560 |
$linkList = $('<div>', { |
| 561 |
class: classes.slideshow.shareLinks |
| 562 |
}), |
| 563 |
$activeSlide = this.getSlide('active'), |
| 564 |
$image = $activeSlide.find(selectors.image), |
| 565 |
videoUrl = $activeSlide.data('elementor-slideshow-video'); |
| 566 |
let itemUrl; |
| 567 |
if (videoUrl) { |
| 568 |
itemUrl = videoUrl; |
| 569 |
} else { |
| 570 |
itemUrl = $image.attr('src'); |
| 571 |
} |
| 572 |
$.each(socialNetworks, (key, data) => { |
| 573 |
const networkLabel = data.label, |
| 574 |
$link = $('<a>', { |
| 575 |
href: this.createShareLink(key, itemUrl, $activeSlide.attr('data-e-action-hash')), |
| 576 |
target: '_blank' |
| 577 |
}).text(networkLabel), |
| 578 |
$socialNetworkIconElement = this.isFontIconSvgExperiment ? $(data.iconElement.element) : $('<i>', { |
| 579 |
class: 'eicon-' + key, |
| 580 |
'aria-hidden': 'true' |
| 581 |
}); |
| 582 |
$link.prepend($socialNetworkIconElement); |
| 583 |
$linkList.append($link); |
| 584 |
}); |
| 585 |
if (!videoUrl) { |
| 586 |
const $downloadIcon = this.isFontIconSvgExperiment ? $(_eIcons.downloadBold.element) : $('<i>', { |
| 587 |
class: 'eicon-download-bold' |
| 588 |
}); |
| 589 |
$downloadIcon.attr('aria-label', i18n.download); |
| 590 |
$linkList.append($('<a>', { |
| 591 |
href: itemUrl, |
| 592 |
download: '' |
| 593 |
}).text(i18n.downloadImage).prepend($downloadIcon)); |
| 594 |
} |
| 595 |
return $linkList; |
| 596 |
}, |
| 597 |
createShareLink(networkName, itemUrl) { |
| 598 |
let hash = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; |
| 599 |
const options = {}; |
| 600 |
if ('pinterest' === networkName) { |
| 601 |
options.image = encodeURIComponent(itemUrl); |
| 602 |
} else { |
| 603 |
options.url = encodeURIComponent(location.href.replace(/#.*/, '') + hash); |
| 604 |
} |
| 605 |
return ShareLink.getNetworkLink(networkName, options); |
| 606 |
}, |
| 607 |
getSlideshowHeader() { |
| 608 |
const { |
| 609 |
i18n |
| 610 |
} = elementorFrontend.config, |
| 611 |
$ = jQuery, |
| 612 |
showCounter = 'yes' === elementorFrontend.getKitSettings('lightbox_enable_counter'), |
| 613 |
showFullscreen = 'yes' === elementorFrontend.getKitSettings('lightbox_enable_fullscreen'), |
| 614 |
showZoom = 'yes' === elementorFrontend.getKitSettings('lightbox_enable_zoom'), |
| 615 |
showShare = 'yes' === elementorFrontend.getKitSettings('lightbox_enable_share'), |
| 616 |
classes = this.getSettings('classes'), |
| 617 |
slideshowClasses = classes.slideshow, |
| 618 |
elements = this.elements; |
| 619 |
if (!(showCounter || showFullscreen || showZoom || showShare)) { |
| 620 |
return; |
| 621 |
} |
| 622 |
elements.$header = $('<header>', { |
| 623 |
class: slideshowClasses.header + ' ' + classes.preventClose |
| 624 |
}); |
| 625 |
if (showShare) { |
| 626 |
const iconElement = this.isFontIconSvgExperiment ? _eIcons.shareArrow.element : '<i>'; |
| 627 |
elements.$iconShare = $(iconElement, { |
| 628 |
class: slideshowClasses.iconShare, |
| 629 |
role: 'button', |
| 630 |
tabindex: 0, |
| 631 |
'aria-label': i18n.share, |
| 632 |
'aria-expanded': false |
| 633 |
}).append($('<span>')); |
| 634 |
const $shareLinks = $('<div>'); |
| 635 |
$shareLinks.on('click', e => { |
| 636 |
e.stopPropagation(); |
| 637 |
}); |
| 638 |
elements.$shareMenu = $('<div>', { |
| 639 |
class: slideshowClasses.shareMenu |
| 640 |
}).append($shareLinks); |
| 641 |
elements.$iconShare.add(elements.$shareMenu).on('click', this.toggleShareMenu); |
| 642 |
elements.$header.append(elements.$iconShare, elements.$shareMenu); |
| 643 |
this.$buttons = this.$buttons.add(elements.$iconShare); |
| 644 |
} |
| 645 |
if (showZoom) { |
| 646 |
const iconElement = this.isFontIconSvgExperiment ? _eIcons.zoomInBold.element : '<i>', |
| 647 |
showZoomElements = [], |
| 648 |
showZoomAttrs = { |
| 649 |
role: 'switch', |
| 650 |
tabindex: 0, |
| 651 |
'aria-checked': false, |
| 652 |
'aria-label': i18n.zoom |
| 653 |
}, |
| 654 |
zoomAttrs = { |
| 655 |
...showZoomAttrs |
| 656 |
}; |
| 657 |
if (!this.isFontIconSvgExperiment) { |
| 658 |
zoomAttrs.class = slideshowClasses.iconZoomIn; |
| 659 |
} |
| 660 |
elements.$iconZoom = $(iconElement).attr(zoomAttrs).on('click', this.toggleZoomMode); |
| 661 |
showZoomElements.push(elements.$iconZoom); |
| 662 |
if (this.isFontIconSvgExperiment) { |
| 663 |
elements.$iconZoomOut = $(_eIcons.zoomOutBold.element).attr(showZoomAttrs).addClass(classes.hidden).on('click', this.toggleZoomMode); |
| 664 |
showZoomElements.push(elements.$iconZoomOut); |
| 665 |
} |
| 666 |
elements.$header.append(showZoomElements); |
| 667 |
this.$buttons = this.$buttons.add(showZoomElements); |
| 668 |
} |
| 669 |
if (showFullscreen) { |
| 670 |
const iconElement = this.isFontIconSvgExperiment ? _eIcons.frameExpand.element : '<i>', |
| 671 |
fullScreenElements = [], |
| 672 |
fullScreenAttrs = { |
| 673 |
role: 'switch', |
| 674 |
tabindex: 0, |
| 675 |
'aria-checked': false, |
| 676 |
'aria-label': i18n.fullscreen |
| 677 |
}, |
| 678 |
expandAttrs = { |
| 679 |
...fullScreenAttrs |
| 680 |
}; |
| 681 |
|
| 682 |
// Only if the experiment is not active, we use the class-name in order to render the icon. |
| 683 |
if (!this.isFontIconSvgExperiment) { |
| 684 |
expandAttrs.class = slideshowClasses.iconExpand; |
| 685 |
} |
| 686 |
elements.$iconExpand = $(iconElement).append($('<span>'), $('<span>')).attr(expandAttrs).on('click', this.toggleFullscreen); |
| 687 |
fullScreenElements.push(elements.$iconExpand); |
| 688 |
if (this.isFontIconSvgExperiment) { |
| 689 |
elements.$iconMinimize = $(_eIcons.frameMinimize.element).attr(fullScreenAttrs).addClass(classes.hidden).on('click', this.toggleFullscreen); |
| 690 |
fullScreenElements.push(elements.$iconMinimize); |
| 691 |
} |
| 692 |
elements.$header.append(fullScreenElements); |
| 693 |
this.$buttons = this.$buttons.add(fullScreenElements); |
| 694 |
} |
| 695 |
if (showCounter) { |
| 696 |
elements.$counter = $('<span>', { |
| 697 |
class: slideshowClasses.counter |
| 698 |
}); |
| 699 |
elements.$header.append(elements.$counter); |
| 700 |
} |
| 701 |
return elements.$header; |
| 702 |
}, |
| 703 |
toggleFullscreen() { |
| 704 |
if (_screenfull.default.isFullscreen) { |
| 705 |
this.deactivateFullscreen(); |
| 706 |
} else if (_screenfull.default.isEnabled) { |
| 707 |
this.activateFullscreen(); |
| 708 |
} |
| 709 |
}, |
| 710 |
toggleZoomMode() { |
| 711 |
if (1 !== this.swiper.zoom.scale) { |
| 712 |
this.deactivateZoom(); |
| 713 |
} else { |
| 714 |
this.activateZoom(); |
| 715 |
} |
| 716 |
}, |
| 717 |
toggleShareMenu() { |
| 718 |
if (this.shareMode) { |
| 719 |
this.deactivateShareMode(); |
| 720 |
} else { |
| 721 |
this.elements.$shareMenu.html(this.getShareLinks()); |
| 722 |
this.activateShareMode(); |
| 723 |
} |
| 724 |
}, |
| 725 |
activateShareMode() { |
| 726 |
const classes = this.getSettings('classes'); |
| 727 |
this.elements.$container.addClass(classes.slideshow.shareMode); |
| 728 |
this.elements.$iconShare.attr('aria-expanded', true); |
| 729 |
|
| 730 |
// Prevent swiper interactions while in share mode |
| 731 |
this.swiper.detachEvents(); |
| 732 |
|
| 733 |
// Temporarily replace tabbable buttons with share-menu items |
| 734 |
this.$originalButtons = this.$buttons; |
| 735 |
this.$buttons = this.elements.$iconShare.add(this.elements.$shareMenu.find('a')); |
| 736 |
this.shareMode = true; |
| 737 |
}, |
| 738 |
deactivateShareMode() { |
| 739 |
const classes = this.getSettings('classes'); |
| 740 |
this.elements.$container.removeClass(classes.slideshow.shareMode); |
| 741 |
this.elements.$iconShare.attr('aria-expanded', false); |
| 742 |
this.swiper.attachEvents(); |
| 743 |
this.$buttons = this.$originalButtons; |
| 744 |
this.shareMode = false; |
| 745 |
}, |
| 746 |
activateFullscreen() { |
| 747 |
const classes = this.getSettings('classes'); |
| 748 |
_screenfull.default.request(this.elements.$container.parents('.dialog-widget')[0]); |
| 749 |
if (this.isFontIconSvgExperiment) { |
| 750 |
this.elements.$iconExpand.addClass(classes.hidden).attr('aria-checked', 'false'); |
| 751 |
this.elements.$iconMinimize.removeClass(classes.hidden).attr('aria-checked', 'true'); |
| 752 |
} else { |
| 753 |
this.elements.$iconExpand.removeClass(classes.slideshow.iconExpand).addClass(classes.slideshow.iconShrink).attr('aria-checked', 'true'); |
| 754 |
} |
| 755 |
this.elements.$container.addClass(classes.slideshow.fullscreenMode); |
| 756 |
}, |
| 757 |
deactivateFullscreen() { |
| 758 |
const classes = this.getSettings('classes'); |
| 759 |
_screenfull.default.exit(); |
| 760 |
if (this.isFontIconSvgExperiment) { |
| 761 |
this.elements.$iconExpand.removeClass(classes.hidden).attr('aria-checked', 'true'); |
| 762 |
this.elements.$iconMinimize.addClass(classes.hidden).attr('aria-checked', 'false'); |
| 763 |
} else { |
| 764 |
this.elements.$iconExpand.removeClass(classes.slideshow.iconShrink).addClass(classes.slideshow.iconExpand).attr('aria-checked', 'false'); |
| 765 |
} |
| 766 |
this.elements.$container.removeClass(classes.slideshow.fullscreenMode); |
| 767 |
}, |
| 768 |
activateZoom() { |
| 769 |
const swiper = this.swiper, |
| 770 |
elements = this.elements, |
| 771 |
classes = this.getSettings('classes'); |
| 772 |
swiper.zoom.in(); |
| 773 |
swiper.allowSlideNext = false; |
| 774 |
swiper.allowSlidePrev = false; |
| 775 |
swiper.allowTouchMove = false; |
| 776 |
elements.$container.addClass(classes.slideshow.zoomMode); |
| 777 |
if (this.isFontIconSvgExperiment) { |
| 778 |
elements.$iconZoom.addClass(classes.hidden).attr('aria-checked', 'false'); |
| 779 |
elements.$iconZoomOut.removeClass(classes.hidden).attr('aria-checked', 'true'); |
| 780 |
} else { |
| 781 |
elements.$iconZoom.removeClass(classes.slideshow.iconZoomIn).addClass(classes.slideshow.iconZoomOut); |
| 782 |
} |
| 783 |
}, |
| 784 |
deactivateZoom() { |
| 785 |
const swiper = this.swiper, |
| 786 |
elements = this.elements, |
| 787 |
classes = this.getSettings('classes'); |
| 788 |
swiper.zoom.out(); |
| 789 |
swiper.allowSlideNext = true; |
| 790 |
swiper.allowSlidePrev = true; |
| 791 |
swiper.allowTouchMove = true; |
| 792 |
elements.$container.removeClass(classes.slideshow.zoomMode); |
| 793 |
if (this.isFontIconSvgExperiment) { |
| 794 |
elements.$iconZoom.removeClass(classes.hidden).attr('aria-checked', 'true'); |
| 795 |
elements.$iconZoomOut.addClass(classes.hidden).attr('aria-checked', 'false'); |
| 796 |
} else { |
| 797 |
elements.$iconZoom.removeClass(classes.slideshow.iconZoomOut).addClass(classes.slideshow.iconZoomIn); |
| 798 |
} |
| 799 |
}, |
| 800 |
getSlideshowFooter() { |
| 801 |
const $ = jQuery, |
| 802 |
classes = this.getSettings('classes'), |
| 803 |
$footer = $('<footer>', { |
| 804 |
class: classes.slideshow.footer + ' ' + classes.preventClose |
| 805 |
}), |
| 806 |
$title = $('<div>', { |
| 807 |
class: classes.slideshow.title |
| 808 |
}), |
| 809 |
$description = $('<div>', { |
| 810 |
class: classes.slideshow.description |
| 811 |
}); |
| 812 |
$footer.append($title, $description); |
| 813 |
return $footer; |
| 814 |
}, |
| 815 |
setSlideshowContent(options) { |
| 816 |
const { |
| 817 |
i18n |
| 818 |
} = elementorFrontend.config, |
| 819 |
$ = jQuery, |
| 820 |
isSingleSlide = 1 === options.slides.length, |
| 821 |
hasTitle = '' !== elementorFrontend.getKitSettings('lightbox_title_src'), |
| 822 |
hasDescription = '' !== elementorFrontend.getKitSettings('lightbox_description_src'), |
| 823 |
showFooter = hasTitle || hasDescription, |
| 824 |
classes = this.getSettings('classes'), |
| 825 |
slideshowClasses = classes.slideshow, |
| 826 |
$container = $('<div>', { |
| 827 |
class: slideshowClasses.container |
| 828 |
}), |
| 829 |
$slidesWrapper = $('<div>', { |
| 830 |
class: slideshowClasses.slidesWrapper |
| 831 |
}); |
| 832 |
let $prevButton, $nextButton; |
| 833 |
options.slides.forEach(slide => { |
| 834 |
let slideClass = slideshowClasses.slide + ' ' + classes.item; |
| 835 |
if (slide.video) { |
| 836 |
slideClass += ' ' + classes.video; |
| 837 |
} |
| 838 |
const $slide = $('<div>', { |
| 839 |
class: slideClass |
| 840 |
}); |
| 841 |
if (slide.video) { |
| 842 |
$slide.attr('data-elementor-slideshow-video', slide.video); |
| 843 |
const playVideoLoadingElement = this.isFontIconSvgExperiment ? _eIcons.loading.element : '<i>', |
| 844 |
$playIcon = $('<div>', { |
| 845 |
class: classes.playButton |
| 846 |
}).html($(playVideoLoadingElement).attr('aria-label', i18n.playVideo).addClass(classes.playButtonIcon)); |
| 847 |
$slide.append($playIcon); |
| 848 |
} else { |
| 849 |
const $zoomContainer = $('<div>', { |
| 850 |
class: 'swiper-zoom-container' |
| 851 |
}), |
| 852 |
$slidePlaceholder = $('<div class="swiper-lazy-preloader"></div>'), |
| 853 |
imageAttributes = { |
| 854 |
'data-src': slide.image, |
| 855 |
class: classes.image + ' ' + classes.preventClose + ' swiper-lazy' |
| 856 |
}; |
| 857 |
if (slide.title) { |
| 858 |
imageAttributes['data-title'] = slide.title; |
| 859 |
imageAttributes.alt = slide.title; |
| 860 |
} |
| 861 |
if (slide.description) { |
| 862 |
imageAttributes['data-description'] = slide.description; |
| 863 |
imageAttributes.alt += ' - ' + slide.description; |
| 864 |
} |
| 865 |
const $slideImage = $('<img>', imageAttributes); |
| 866 |
$zoomContainer.append([$slideImage, $slidePlaceholder]); |
| 867 |
$slide.append($zoomContainer); |
| 868 |
} |
| 869 |
if (slide.hash) { |
| 870 |
$slide.attr('data-e-action-hash', slide.hash); |
| 871 |
} |
| 872 |
$slidesWrapper.append($slide); |
| 873 |
}); |
| 874 |
this.elements.$container = $container; |
| 875 |
this.elements.$header = this.getSlideshowHeader(); |
| 876 |
$container.prepend(this.elements.$header).append($slidesWrapper); |
| 877 |
if (!isSingleSlide) { |
| 878 |
const $prevButtonIcon = this.isFontIconSvgExperiment ? $(_eIcons.chevronLeft.element) : $('<i>', { |
| 879 |
class: slideshowClasses.prevButtonIcon, |
| 880 |
'aria-hidden': 'true' |
| 881 |
}), |
| 882 |
$nextButtonIcon = this.isFontIconSvgExperiment ? $(_eIcons.chevronRight.element) : $('<i>', { |
| 883 |
class: slideshowClasses.nextButtonIcon, |
| 884 |
'aria-hidden': 'true' |
| 885 |
}), |
| 886 |
$prevButtonLabel = $('<span>', { |
| 887 |
class: 'screen-reader-text' |
| 888 |
}).html(i18n.previous), |
| 889 |
$nextButtonLabel = $('<span>', { |
| 890 |
class: 'screen-reader-text' |
| 891 |
}).html(i18n.next); |
| 892 |
$prevButton = $('<div>', { |
| 893 |
class: slideshowClasses.prevButton + ' ' + classes.preventClose |
| 894 |
}).append($prevButtonIcon, $prevButtonLabel); |
| 895 |
$nextButton = $('<div>', { |
| 896 |
class: slideshowClasses.nextButton + ' ' + classes.preventClose |
| 897 |
}).append($nextButtonIcon, $nextButtonLabel); |
| 898 |
$container.append($nextButton, $prevButton); |
| 899 |
this.$buttons = this.$buttons.add($nextButton).add($prevButton); |
| 900 |
} |
| 901 |
if (showFooter) { |
| 902 |
this.elements.$footer = this.getSlideshowFooter(); |
| 903 |
$container.append(this.elements.$footer); |
| 904 |
} |
| 905 |
this.setSettings('hideUiTimeout', ''); |
| 906 |
$container.on('click mousemove keypress', this.showLightboxUi); |
| 907 |
const modal = this.getModal(); |
| 908 |
modal.setMessage($container); |
| 909 |
const onShowMethod = modal.onShow; |
| 910 |
modal.onShow = async () => { |
| 911 |
onShowMethod(); |
| 912 |
const swiperOptions = { |
| 913 |
pagination: { |
| 914 |
el: '.' + slideshowClasses.counter, |
| 915 |
type: 'fraction' |
| 916 |
}, |
| 917 |
on: { |
| 918 |
slideChangeTransitionEnd: this.onSlideChange |
| 919 |
}, |
| 920 |
lazy: { |
| 921 |
loadPrevNext: true |
| 922 |
}, |
| 923 |
zoom: true, |
| 924 |
spaceBetween: 100, |
| 925 |
grabCursor: true, |
| 926 |
runCallbacksOnInit: false, |
| 927 |
loop: true, |
| 928 |
keyboard: true, |
| 929 |
handleElementorBreakpoints: true |
| 930 |
}; |
| 931 |
if (!isSingleSlide) { |
| 932 |
swiperOptions.navigation = { |
| 933 |
prevEl: $prevButton[0], |
| 934 |
nextEl: $nextButton[0] |
| 935 |
}; |
| 936 |
} |
| 937 |
if (options.swiper) { |
| 938 |
$.extend(swiperOptions, options.swiper); |
| 939 |
} |
| 940 |
const Swiper = elementorFrontend.utils.swiper; |
| 941 |
this.swiper = await new Swiper($container, swiperOptions); |
| 942 |
|
| 943 |
// Expose the swiper instance in the frontend |
| 944 |
$container.data('swiper', this.swiper); |
| 945 |
this.playSlideVideo(); |
| 946 |
if (showFooter) { |
| 947 |
this.updateFooterText(); |
| 948 |
} |
| 949 |
this.bindHotKeys(); |
| 950 |
this.makeButtonsAccessible(); |
| 951 |
}; |
| 952 |
}, |
| 953 |
makeButtonsAccessible() { |
| 954 |
this.$buttons.attr('tabindex', 0).on('keypress', event => { |
| 955 |
const ENTER_KEY = 13, |
| 956 |
SPACE_KEY = 32; |
| 957 |
if (ENTER_KEY === event.which || SPACE_KEY === event.which) { |
| 958 |
jQuery(event.currentTarget).trigger('click'); |
| 959 |
} |
| 960 |
}); |
| 961 |
}, |
| 962 |
showLightboxUi() { |
| 963 |
const slideshowClasses = this.getSettings('classes').slideshow; |
| 964 |
this.elements.$container.removeClass(slideshowClasses.hideUiVisibility); |
| 965 |
clearTimeout(this.getSettings('hideUiTimeout')); |
| 966 |
this.setSettings('hideUiTimeout', setTimeout(() => { |
| 967 |
if (!this.shareMode) { |
| 968 |
this.elements.$container.addClass(slideshowClasses.hideUiVisibility); |
| 969 |
} |
| 970 |
}, 3500)); |
| 971 |
}, |
| 972 |
bindHotKeys() { |
| 973 |
this.getModal().getElements('window').on('keydown', this.activeKeyDown); |
| 974 |
}, |
| 975 |
unbindHotKeys() { |
| 976 |
this.getModal().getElements('window').off('keydown', this.activeKeyDown); |
| 977 |
}, |
| 978 |
activeKeyDown(event) { |
| 979 |
this.showLightboxUi(); |
| 980 |
const TAB_KEY = 9; |
| 981 |
if (event.which === TAB_KEY) { |
| 982 |
const $buttons = this.$buttons; |
| 983 |
let focusedButton, |
| 984 |
isFirst = false, |
| 985 |
isLast = false; |
| 986 |
$buttons.each(index => { |
| 987 |
const item = $buttons[index]; |
| 988 |
if (jQuery(item).is(':focus')) { |
| 989 |
focusedButton = item; |
| 990 |
isFirst = 0 === index; |
| 991 |
isLast = $buttons.length - 1 === index; |
| 992 |
return false; |
| 993 |
} |
| 994 |
}); |
| 995 |
if (event.shiftKey) { |
| 996 |
if (isFirst) { |
| 997 |
event.preventDefault(); |
| 998 |
$buttons.last().trigger('focus'); |
| 999 |
} |
| 1000 |
} else if (isLast || !focusedButton) { |
| 1001 |
event.preventDefault(); |
| 1002 |
$buttons.first().trigger('focus'); |
| 1003 |
} |
| 1004 |
} |
| 1005 |
}, |
| 1006 |
getSlide(slideState) { |
| 1007 |
return jQuery(this.swiper.slides).filter(this.getSettings('selectors.slideshow.' + slideState + 'Slide')); |
| 1008 |
}, |
| 1009 |
updateFooterText() { |
| 1010 |
if (!this.elements.$footer) { |
| 1011 |
return; |
| 1012 |
} |
| 1013 |
const classes = this.getSettings('classes'), |
| 1014 |
$activeSlide = this.getSlide('active'), |
| 1015 |
$image = $activeSlide.find('.elementor-lightbox-image'), |
| 1016 |
titleText = $image.data('title'), |
| 1017 |
descriptionText = $image.data('description'), |
| 1018 |
$title = this.elements.$footer.find('.' + classes.slideshow.title), |
| 1019 |
$description = this.elements.$footer.find('.' + classes.slideshow.description); |
| 1020 |
$title.text(titleText || ''); |
| 1021 |
$description.text(descriptionText || ''); |
| 1022 |
}, |
| 1023 |
playSlideVideo() { |
| 1024 |
const $activeSlide = this.getSlide('active'), |
| 1025 |
videoURL = $activeSlide.data('elementor-slideshow-video'); |
| 1026 |
if (!videoURL) { |
| 1027 |
return; |
| 1028 |
} |
| 1029 |
const classes = this.getSettings('classes'), |
| 1030 |
aspectRatio = this.getRatioDictionry(this.getSettings('modalOptions.videoAspectRatio')), |
| 1031 |
$videoContainer = jQuery('<div>', { |
| 1032 |
class: classes.videoContainer + ' ' + classes.invisible |
| 1033 |
}), |
| 1034 |
$videoWrapper = jQuery('<div>', { |
| 1035 |
class: `${classes.videoWrapper} elementor-video-${this.getRatioType(aspectRatio)}`, |
| 1036 |
style: '--video-aspect-ratio: ' + aspectRatio |
| 1037 |
}), |
| 1038 |
$playIcon = $activeSlide.children('.' + classes.playButton); |
| 1039 |
let videoType, apiProvider; |
| 1040 |
$videoContainer.append($videoWrapper); |
| 1041 |
$activeSlide.append($videoContainer); |
| 1042 |
if (-1 !== videoURL.indexOf('vimeo.com')) { |
| 1043 |
videoType = 'vimeo'; |
| 1044 |
apiProvider = elementorFrontend.utils.vimeo; |
| 1045 |
} else if (videoURL.match(/^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com)/)) { |
| 1046 |
videoType = 'youtube'; |
| 1047 |
apiProvider = elementorFrontend.utils.youtube; |
| 1048 |
} |
| 1049 |
const videoID = apiProvider.getVideoIDFromURL(videoURL); |
| 1050 |
apiProvider.onApiReady(apiObject => { |
| 1051 |
if ('youtube' === videoType) { |
| 1052 |
this.prepareYTVideo(apiObject, videoID, $videoContainer, $videoWrapper, $playIcon); |
| 1053 |
} else if ('vimeo' === videoType) { |
| 1054 |
this.prepareVimeoVideo(apiObject, videoURL, $videoContainer, $videoWrapper, $playIcon); |
| 1055 |
} |
| 1056 |
}); |
| 1057 |
$playIcon.addClass(classes.playing).removeClass(classes.hidden); |
| 1058 |
}, |
| 1059 |
prepareYTVideo(YT, videoID, $videoContainer, $videoWrapper, $playIcon) { |
| 1060 |
const classes = this.getSettings('classes'), |
| 1061 |
$videoPlaceholderElement = jQuery('<div>'); |
| 1062 |
let startStateCode = YT.PlayerState.PLAYING; |
| 1063 |
$videoWrapper.append($videoPlaceholderElement); |
| 1064 |
|
| 1065 |
// Since version 67, Chrome doesn't fire the `PLAYING` state at start time |
| 1066 |
if (window.chrome) { |
| 1067 |
startStateCode = YT.PlayerState.UNSTARTED; |
| 1068 |
} |
| 1069 |
$videoContainer.addClass('elementor-loading' + ' ' + classes.invisible); |
| 1070 |
this.player = new YT.Player($videoPlaceholderElement[0], { |
| 1071 |
videoId: videoID, |
| 1072 |
events: { |
| 1073 |
onReady: () => { |
| 1074 |
$playIcon.addClass(classes.hidden); |
| 1075 |
$videoContainer.removeClass(classes.invisible); |
| 1076 |
this.player.playVideo(); |
| 1077 |
}, |
| 1078 |
onStateChange: event => { |
| 1079 |
if (event.data === startStateCode) { |
| 1080 |
$videoContainer.removeClass('elementor-loading' + ' ' + classes.invisible); |
| 1081 |
} |
| 1082 |
} |
| 1083 |
}, |
| 1084 |
playerVars: { |
| 1085 |
controls: 0, |
| 1086 |
rel: 0 |
| 1087 |
} |
| 1088 |
}); |
| 1089 |
}, |
| 1090 |
prepareVimeoVideo(Vimeo, videoURL, $videoContainer, $videoWrapper, $playIcon) { |
| 1091 |
const classes = this.getSettings('classes'), |
| 1092 |
vimeoOptions = { |
| 1093 |
url: videoURL, |
| 1094 |
autoplay: true, |
| 1095 |
transparent: false, |
| 1096 |
playsinline: false |
| 1097 |
}; |
| 1098 |
this.player = new Vimeo.Player($videoWrapper, vimeoOptions); |
| 1099 |
this.player.ready().then(() => { |
| 1100 |
$playIcon.addClass(classes.hidden); |
| 1101 |
$videoContainer.removeClass(classes.invisible); |
| 1102 |
}); |
| 1103 |
}, |
| 1104 |
setEntranceAnimation(animation) { |
| 1105 |
animation = animation || elementorFrontend.getCurrentDeviceSetting(this.getSettings('modalOptions'), 'entranceAnimation'); |
| 1106 |
const $widgetMessage = this.getModal().getElements('message'); |
| 1107 |
if (this.oldAnimation) { |
| 1108 |
$widgetMessage.removeClass(this.oldAnimation); |
| 1109 |
} |
| 1110 |
this.oldAnimation = animation; |
| 1111 |
if (animation) { |
| 1112 |
$widgetMessage.addClass('animated ' + animation); |
| 1113 |
} |
| 1114 |
}, |
| 1115 |
openSlideshow(slideshowID, initialSlideURL) { |
| 1116 |
const $allSlideshowLinks = jQuery(this.getSettings('selectors.links')).filter((index, element) => { |
| 1117 |
const $element = jQuery(element); |
| 1118 |
return slideshowID === element.dataset.elementorLightboxSlideshow && !$element.parent('.swiper-slide-duplicate').length && !$element.parents('.slick-cloned').length; |
| 1119 |
}); |
| 1120 |
const slides = []; |
| 1121 |
let initialSlideIndex = 0; |
| 1122 |
$allSlideshowLinks.each(function () { |
| 1123 |
const slideVideo = this.dataset.elementorLightboxVideo; |
| 1124 |
let slideIndex = this.dataset.elementorLightboxIndex; |
| 1125 |
if (undefined === slideIndex) { |
| 1126 |
slideIndex = $allSlideshowLinks.index(this); |
| 1127 |
} |
| 1128 |
if (initialSlideURL === this.href || slideVideo && initialSlideURL === slideVideo) { |
| 1129 |
initialSlideIndex = slideIndex; |
| 1130 |
} |
| 1131 |
const slideData = { |
| 1132 |
image: this.href, |
| 1133 |
index: slideIndex, |
| 1134 |
title: this.dataset.elementorLightboxTitle, |
| 1135 |
description: this.dataset.elementorLightboxDescription, |
| 1136 |
hash: this.getAttribute('data-e-action-hash') |
| 1137 |
}; |
| 1138 |
if (slideVideo) { |
| 1139 |
slideData.video = slideVideo; |
| 1140 |
} |
| 1141 |
slides.push(slideData); |
| 1142 |
}); |
| 1143 |
slides.sort((a, b) => a.index - b.index); |
| 1144 |
this.showModal({ |
| 1145 |
type: 'slideshow', |
| 1146 |
id: slideshowID, |
| 1147 |
modalOptions: { |
| 1148 |
id: 'elementor-lightbox-slideshow-' + slideshowID |
| 1149 |
}, |
| 1150 |
slideshow: { |
| 1151 |
slides, |
| 1152 |
swiper: { |
| 1153 |
initialSlide: +initialSlideIndex |
| 1154 |
} |
| 1155 |
} |
| 1156 |
}); |
| 1157 |
}, |
| 1158 |
onSlideChange() { |
| 1159 |
this.getSlide('prev').add(this.getSlide('next')).add(this.getSlide('active')).find('.' + this.getSettings('classes.videoWrapper')).remove(); |
| 1160 |
this.playSlideVideo(); |
| 1161 |
this.updateFooterText(); |
| 1162 |
} |
| 1163 |
}); |
| 1164 |
|
| 1165 |
/***/ }), |
| 1166 |
|
| 1167 |
/***/ "../assets/dev/js/frontend/utils/lightbox/screenfull.js": |
| 1168 |
/*!**************************************************************!*\ |
| 1169 |
!*** ../assets/dev/js/frontend/utils/lightbox/screenfull.js ***! |
| 1170 |
\**************************************************************/ |
| 1171 |
/***/ ((module) => { |
| 1172 |
|
| 1173 |
|
| 1174 |
|
| 1175 |
(function () { |
| 1176 |
'use strict'; |
| 1177 |
|
| 1178 |
var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {}; |
| 1179 |
var isCommonjs = true && module.exports; |
| 1180 |
var fn = function () { |
| 1181 |
var val; |
| 1182 |
var fnMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror'], |
| 1183 |
// New WebKit |
| 1184 |
['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror'], |
| 1185 |
// Old WebKit |
| 1186 |
['webkitRequestFullScreen', 'webkitCancelFullScreen', 'webkitCurrentFullScreenElement', 'webkitCancelFullScreen', 'webkitfullscreenchange', 'webkitfullscreenerror'], ['mozRequestFullScreen', 'mozCancelFullScreen', 'mozFullScreenElement', 'mozFullScreenEnabled', 'mozfullscreenchange', 'mozfullscreenerror'], ['msRequestFullscreen', 'msExitFullscreen', 'msFullscreenElement', 'msFullscreenEnabled', 'MSFullscreenChange', 'MSFullscreenError']]; |
| 1187 |
var i = 0; |
| 1188 |
var l = fnMap.length; |
| 1189 |
var ret = {}; |
| 1190 |
for (; i < l; i++) { |
| 1191 |
val = fnMap[i]; |
| 1192 |
if (val && val[1] in document) { |
| 1193 |
var valLength = val.length; |
| 1194 |
for (i = 0; i < valLength; i++) { |
| 1195 |
ret[fnMap[0][i]] = val[i]; |
| 1196 |
} |
| 1197 |
return ret; |
| 1198 |
} |
| 1199 |
} |
| 1200 |
return false; |
| 1201 |
}(); |
| 1202 |
var eventNameMap = { |
| 1203 |
change: fn.fullscreenchange, |
| 1204 |
error: fn.fullscreenerror |
| 1205 |
}; |
| 1206 |
var screenfull = { |
| 1207 |
request(element) { |
| 1208 |
return new Promise(function (resolve, reject) { |
| 1209 |
var onFullScreenEntered = function () { |
| 1210 |
this.off('change', onFullScreenEntered); |
| 1211 |
resolve(); |
| 1212 |
}.bind(this); |
| 1213 |
this.on('change', onFullScreenEntered); |
| 1214 |
element = element || document.documentElement; |
| 1215 |
Promise.resolve(element[fn.requestFullscreen]()).catch(reject); |
| 1216 |
}.bind(this)); |
| 1217 |
}, |
| 1218 |
exit() { |
| 1219 |
return new Promise(function (resolve, reject) { |
| 1220 |
if (!this.isFullscreen) { |
| 1221 |
resolve(); |
| 1222 |
return; |
| 1223 |
} |
| 1224 |
var onFullScreenExit = function () { |
| 1225 |
this.off('change', onFullScreenExit); |
| 1226 |
resolve(); |
| 1227 |
}.bind(this); |
| 1228 |
this.on('change', onFullScreenExit); |
| 1229 |
Promise.resolve(document[fn.exitFullscreen]()).catch(reject); |
| 1230 |
}.bind(this)); |
| 1231 |
}, |
| 1232 |
toggle(element) { |
| 1233 |
return this.isFullscreen ? this.exit() : this.request(element); |
| 1234 |
}, |
| 1235 |
onchange(callback) { |
| 1236 |
this.on('change', callback); |
| 1237 |
}, |
| 1238 |
onerror(callback) { |
| 1239 |
this.on('error', callback); |
| 1240 |
}, |
| 1241 |
on(event, callback) { |
| 1242 |
var eventName = eventNameMap[event]; |
| 1243 |
if (eventName) { |
| 1244 |
document.addEventListener(eventName, callback, false); |
| 1245 |
} |
| 1246 |
}, |
| 1247 |
off(event, callback) { |
| 1248 |
var eventName = eventNameMap[event]; |
| 1249 |
if (eventName) { |
| 1250 |
document.removeEventListener(eventName, callback, false); |
| 1251 |
} |
| 1252 |
}, |
| 1253 |
raw: fn |
| 1254 |
}; |
| 1255 |
if (!fn) { |
| 1256 |
if (isCommonjs) { |
| 1257 |
module.exports = { |
| 1258 |
isEnabled: false |
| 1259 |
}; |
| 1260 |
} else { |
| 1261 |
window.screenfull = { |
| 1262 |
isEnabled: false |
| 1263 |
}; |
| 1264 |
} |
| 1265 |
return; |
| 1266 |
} |
| 1267 |
Object.defineProperties(screenfull, { |
| 1268 |
isFullscreen: { |
| 1269 |
get() { |
| 1270 |
return Boolean(document[fn.fullscreenElement]); |
| 1271 |
} |
| 1272 |
}, |
| 1273 |
element: { |
| 1274 |
enumerable: true, |
| 1275 |
get() { |
| 1276 |
return document[fn.fullscreenElement]; |
| 1277 |
} |
| 1278 |
}, |
| 1279 |
isEnabled: { |
| 1280 |
enumerable: true, |
| 1281 |
get() { |
| 1282 |
// Coerce to boolean in case of old WebKit |
| 1283 |
return Boolean(document[fn.fullscreenEnabled]); |
| 1284 |
} |
| 1285 |
} |
| 1286 |
}); |
| 1287 |
if (isCommonjs) { |
| 1288 |
module.exports = screenfull; |
| 1289 |
} else { |
| 1290 |
window.screenfull = screenfull; |
| 1291 |
} |
| 1292 |
})(); |
| 1293 |
|
| 1294 |
/***/ }) |
| 1295 |
|
| 1296 |
}]); |
| 1297 |
//# sourceMappingURL=lightbox.796e05223323a487677f.bundle.js.map |
