e-gallery.js (49904B)
1 /*! E-Gallery v1.2.0 by Elementor */ 2 var EGallery = 3 /******/ (function(modules) { // webpackBootstrap 4 /******/ // The module cache 5 /******/ var installedModules = {}; 6 /******/ 7 /******/ // The require function 8 /******/ function __webpack_require__(moduleId) { 9 /******/ 10 /******/ // Check if module is in cache 11 /******/ if(installedModules[moduleId]) { 12 /******/ return installedModules[moduleId].exports; 13 /******/ } 14 /******/ // Create a new module (and put it into the cache) 15 /******/ var module = installedModules[moduleId] = { 16 /******/ i: moduleId, 17 /******/ l: false, 18 /******/ exports: {} 19 /******/ }; 20 /******/ 21 /******/ // Execute the module function 22 /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 23 /******/ 24 /******/ // Flag the module as loaded 25 /******/ module.l = true; 26 /******/ 27 /******/ // Return the exports of the module 28 /******/ return module.exports; 29 /******/ } 30 /******/ 31 /******/ 32 /******/ // expose the modules object (__webpack_modules__) 33 /******/ __webpack_require__.m = modules; 34 /******/ 35 /******/ // expose the module cache 36 /******/ __webpack_require__.c = installedModules; 37 /******/ 38 /******/ // define getter function for harmony exports 39 /******/ __webpack_require__.d = function(exports, name, getter) { 40 /******/ if(!__webpack_require__.o(exports, name)) { 41 /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 42 /******/ } 43 /******/ }; 44 /******/ 45 /******/ // define __esModule on exports 46 /******/ __webpack_require__.r = function(exports) { 47 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 48 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 49 /******/ } 50 /******/ Object.defineProperty(exports, '__esModule', { value: true }); 51 /******/ }; 52 /******/ 53 /******/ // create a fake namespace object 54 /******/ // mode & 1: value is a module id, require it 55 /******/ // mode & 2: merge all properties of value into the ns 56 /******/ // mode & 4: return value when already ns object 57 /******/ // mode & 8|1: behave like require 58 /******/ __webpack_require__.t = function(value, mode) { 59 /******/ if(mode & 1) value = __webpack_require__(value); 60 /******/ if(mode & 8) return value; 61 /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 62 /******/ var ns = Object.create(null); 63 /******/ __webpack_require__.r(ns); 64 /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 65 /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 66 /******/ return ns; 67 /******/ }; 68 /******/ 69 /******/ // getDefaultExport function for compatibility with non-harmony modules 70 /******/ __webpack_require__.n = function(module) { 71 /******/ var getter = module && module.__esModule ? 72 /******/ function getDefault() { return module['default']; } : 73 /******/ function getModuleExports() { return module; }; 74 /******/ __webpack_require__.d(getter, 'a', getter); 75 /******/ return getter; 76 /******/ }; 77 /******/ 78 /******/ // Object.prototype.hasOwnProperty.call 79 /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 80 /******/ 81 /******/ // __webpack_public_path__ 82 /******/ __webpack_require__.p = ""; 83 /******/ 84 /******/ 85 /******/ // Load entry module and return exports 86 /******/ return __webpack_require__(__webpack_require__.s = "./src/js/e-gallery.js"); 87 /******/ }) 88 /************************************************************************/ 89 /******/ ({ 90 91 /***/ "./node_modules/@babel/runtime/helpers/assertThisInitialized.js": 92 /*!**********************************************************************!*\ 93 !*** ./node_modules/@babel/runtime/helpers/assertThisInitialized.js ***! 94 \**********************************************************************/ 95 /*! no static exports found */ 96 /***/ (function(module, exports) { 97 98 function _assertThisInitialized(self) { 99 if (self === void 0) { 100 throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 101 } 102 103 return self; 104 } 105 106 module.exports = _assertThisInitialized; 107 108 /***/ }), 109 110 /***/ "./node_modules/@babel/runtime/helpers/classCallCheck.js": 111 /*!***************************************************************!*\ 112 !*** ./node_modules/@babel/runtime/helpers/classCallCheck.js ***! 113 \***************************************************************/ 114 /*! no static exports found */ 115 /***/ (function(module, exports) { 116 117 function _classCallCheck(instance, Constructor) { 118 if (!(instance instanceof Constructor)) { 119 throw new TypeError("Cannot call a class as a function"); 120 } 121 } 122 123 module.exports = _classCallCheck; 124 125 /***/ }), 126 127 /***/ "./node_modules/@babel/runtime/helpers/createClass.js": 128 /*!************************************************************!*\ 129 !*** ./node_modules/@babel/runtime/helpers/createClass.js ***! 130 \************************************************************/ 131 /*! no static exports found */ 132 /***/ (function(module, exports) { 133 134 function _defineProperties(target, props) { 135 for (var i = 0; i < props.length; i++) { 136 var descriptor = props[i]; 137 descriptor.enumerable = descriptor.enumerable || false; 138 descriptor.configurable = true; 139 if ("value" in descriptor) descriptor.writable = true; 140 Object.defineProperty(target, descriptor.key, descriptor); 141 } 142 } 143 144 function _createClass(Constructor, protoProps, staticProps) { 145 if (protoProps) _defineProperties(Constructor.prototype, protoProps); 146 if (staticProps) _defineProperties(Constructor, staticProps); 147 return Constructor; 148 } 149 150 module.exports = _createClass; 151 152 /***/ }), 153 154 /***/ "./node_modules/@babel/runtime/helpers/getPrototypeOf.js": 155 /*!***************************************************************!*\ 156 !*** ./node_modules/@babel/runtime/helpers/getPrototypeOf.js ***! 157 \***************************************************************/ 158 /*! no static exports found */ 159 /***/ (function(module, exports) { 160 161 function _getPrototypeOf(o) { 162 module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { 163 return o.__proto__ || Object.getPrototypeOf(o); 164 }; 165 return _getPrototypeOf(o); 166 } 167 168 module.exports = _getPrototypeOf; 169 170 /***/ }), 171 172 /***/ "./node_modules/@babel/runtime/helpers/inherits.js": 173 /*!*********************************************************!*\ 174 !*** ./node_modules/@babel/runtime/helpers/inherits.js ***! 175 \*********************************************************/ 176 /*! no static exports found */ 177 /***/ (function(module, exports, __webpack_require__) { 178 179 var setPrototypeOf = __webpack_require__(/*! ./setPrototypeOf */ "./node_modules/@babel/runtime/helpers/setPrototypeOf.js"); 180 181 function _inherits(subClass, superClass) { 182 if (typeof superClass !== "function" && superClass !== null) { 183 throw new TypeError("Super expression must either be null or a function"); 184 } 185 186 subClass.prototype = Object.create(superClass && superClass.prototype, { 187 constructor: { 188 value: subClass, 189 writable: true, 190 configurable: true 191 } 192 }); 193 if (superClass) setPrototypeOf(subClass, superClass); 194 } 195 196 module.exports = _inherits; 197 198 /***/ }), 199 200 /***/ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js": 201 /*!**************************************************************************!*\ 202 !*** ./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js ***! 203 \**************************************************************************/ 204 /*! no static exports found */ 205 /***/ (function(module, exports, __webpack_require__) { 206 207 var _typeof = __webpack_require__(/*! ../helpers/typeof */ "./node_modules/@babel/runtime/helpers/typeof.js"); 208 209 var assertThisInitialized = __webpack_require__(/*! ./assertThisInitialized */ "./node_modules/@babel/runtime/helpers/assertThisInitialized.js"); 210 211 function _possibleConstructorReturn(self, call) { 212 if (call && (_typeof(call) === "object" || typeof call === "function")) { 213 return call; 214 } 215 216 return assertThisInitialized(self); 217 } 218 219 module.exports = _possibleConstructorReturn; 220 221 /***/ }), 222 223 /***/ "./node_modules/@babel/runtime/helpers/setPrototypeOf.js": 224 /*!***************************************************************!*\ 225 !*** ./node_modules/@babel/runtime/helpers/setPrototypeOf.js ***! 226 \***************************************************************/ 227 /*! no static exports found */ 228 /***/ (function(module, exports) { 229 230 function _setPrototypeOf(o, p) { 231 module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { 232 o.__proto__ = p; 233 return o; 234 }; 235 236 return _setPrototypeOf(o, p); 237 } 238 239 module.exports = _setPrototypeOf; 240 241 /***/ }), 242 243 /***/ "./node_modules/@babel/runtime/helpers/typeof.js": 244 /*!*******************************************************!*\ 245 !*** ./node_modules/@babel/runtime/helpers/typeof.js ***! 246 \*******************************************************/ 247 /*! no static exports found */ 248 /***/ (function(module, exports) { 249 250 function _typeof3(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof3 = function _typeof3(obj) { return typeof obj; }; } else { _typeof3 = function _typeof3(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof3(obj); } 251 252 function _typeof2(obj) { 253 if (typeof Symbol === "function" && _typeof3(Symbol.iterator) === "symbol") { 254 _typeof2 = function _typeof2(obj) { 255 return _typeof3(obj); 256 }; 257 } else { 258 _typeof2 = function _typeof2(obj) { 259 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof3(obj); 260 }; 261 } 262 263 return _typeof2(obj); 264 } 265 266 function _typeof(obj) { 267 if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") { 268 module.exports = _typeof = function _typeof(obj) { 269 return _typeof2(obj); 270 }; 271 } else { 272 module.exports = _typeof = function _typeof(obj) { 273 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj); 274 }; 275 } 276 277 return _typeof(obj); 278 } 279 280 module.exports = _typeof; 281 282 /***/ }), 283 284 /***/ "./src/js/e-gallery.js": 285 /*!*****************************!*\ 286 !*** ./src/js/e-gallery.js ***! 287 \*****************************/ 288 /*! exports provided: default */ 289 /***/ (function(module, __webpack_exports__, __webpack_require__) { 290 291 "use strict"; 292 __webpack_require__.r(__webpack_exports__); 293 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return EGallery; }); 294 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"); 295 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__); 296 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"); 297 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__); 298 /* harmony import */ var _types_grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./types/grid */ "./src/js/types/grid.js"); 299 /* harmony import */ var _types_justified__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./types/justified */ "./src/js/types/justified.js"); 300 /* harmony import */ var _types_masonry__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./types/masonry */ "./src/js/types/masonry.js"); 301 /* harmony import */ var _scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../scss/e-gallery.scss */ "./src/scss/e-gallery.scss"); 302 /* harmony import */ var _scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5__); 303 304 305 306 307 308 309 310 var EGallery = 311 /*#__PURE__*/ 312 function () { 313 function EGallery(userSettings) { 314 _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, EGallery); 315 316 this.userSettings = userSettings; 317 this.initGalleriesTypes(); 318 this.createGallery(); 319 } 320 321 _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(EGallery, [{ 322 key: "getDefaultSettings", 323 value: function getDefaultSettings() { 324 return { 325 container: null, 326 items: null, 327 type: 'grid', 328 tags: [], 329 overlay: false, 330 overlayTemplate: '<div class="{{ classesPrefix }}{{ classes.overlayTitle }}">{{ title }}</div><div class="{{ classesPrefix }}{{ classes.overlayDescription }}">{{ description }}</div>', 331 columns: 5, 332 horizontalGap: 10, 333 verticalGap: 10, 334 rtl: false, 335 animationDuration: 350, 336 lazyLoad: false, 337 classesPrefix: 'e-gallery-', 338 classes: { 339 container: 'container', 340 item: 'item', 341 image: 'image', 342 overlay: 'overlay', 343 overlayTitle: 'overlay__title', 344 overlayDescription: 'overlay__description', 345 link: 'link', 346 firstRowItem: 'first-row-item', 347 animated: '-animated', 348 hidden: 'item--hidden', 349 lazyLoad: '-lazyload', 350 imageLoaded: 'image-loaded' 351 }, 352 selectors: { 353 items: '.e-gallery-item', 354 image: '.e-gallery-image' 355 }, 356 breakpoints: { 357 1024: { 358 horizontalGap: 5, 359 verticalGap: 5, 360 columns: 4 361 }, 362 768: { 363 horizontalGap: 1, 364 verticalGap: 1, 365 columns: 2 366 } 367 } 368 }; 369 } 370 }, { 371 key: "initGalleriesTypes", 372 value: function initGalleriesTypes() { 373 this.galleriesTypes = { 374 grid: _types_grid__WEBPACK_IMPORTED_MODULE_2__["default"], 375 justified: _types_justified__WEBPACK_IMPORTED_MODULE_3__["default"], 376 masonry: _types_masonry__WEBPACK_IMPORTED_MODULE_4__["default"] 377 }; 378 } 379 }, { 380 key: "createGallery", 381 value: function createGallery() { 382 var settings = jQuery.extend(this.getDefaultSettings(), this.userSettings); 383 var GalleryHandlerType = this.galleriesTypes[settings.type]; 384 this.galleryHandler = new GalleryHandlerType(settings); 385 } 386 }, { 387 key: "setSettings", 388 value: function setSettings(key, value) { 389 this.galleryHandler.setSettings(key, value); 390 } 391 }, { 392 key: "destroy", 393 value: function destroy() { 394 this.galleryHandler.destroy(); 395 } 396 }]); 397 398 return EGallery; 399 }(); 400 401 402 403 /***/ }), 404 405 /***/ "./src/js/types/base.js": 406 /*!******************************!*\ 407 !*** ./src/js/types/base.js ***! 408 \******************************/ 409 /*! exports provided: default */ 410 /***/ (function(module, __webpack_exports__, __webpack_require__) { 411 412 "use strict"; 413 __webpack_require__.r(__webpack_exports__); 414 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return BaseGalleryType; }); 415 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"); 416 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__); 417 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"); 418 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__); 419 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ "./src/js/utils/index.js"); 420 421 422 423 424 var BaseGalleryType = 425 /*#__PURE__*/ 426 function () { 427 function BaseGalleryType(settings) { 428 var _this = this; 429 430 _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, BaseGalleryType); 431 432 this.settings = jQuery.extend(true, this.getDefaultSettings(), settings); 433 this.$container = jQuery(this.settings.container); 434 this.timeouts = []; 435 this.initElements(); 436 this.prepareGallery(); 437 var oldRunGallery = this.runGallery.bind(this); 438 this.runGallery = this.debounce(function () { 439 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 440 args[_key] = arguments[_key]; 441 } 442 443 if (_this.settings.lazyLoad) { 444 oldRunGallery.apply(void 0, args); 445 } else { 446 _this.allImagesPromise.then(function () { 447 return oldRunGallery.apply(void 0, args); 448 }); 449 } 450 }, 300); 451 452 if (this.settings.lazyLoad) { 453 this.handleScroll = this.debounce(function () { 454 return _this.lazyLoadImages(); 455 }, 16); 456 } 457 458 this.bindEvents(); 459 this.runGallery(); 460 } 461 462 _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(BaseGalleryType, [{ 463 key: "getDefaultSettings", 464 value: function getDefaultSettings() { 465 return {}; 466 } 467 }, { 468 key: "getItemClass", 469 value: function getItemClass(className) { 470 return this.settings.classesPrefix + className; 471 } 472 }, { 473 key: "initElements", 474 value: function initElements() { 475 this.elements = { 476 $window: jQuery(window) 477 }; 478 var directionClass = '-' + (this.settings.rtl ? 'rtl' : 'ltr'); 479 var containerClasses = this.getItemClass(this.settings.classes.container) + ' ' + this.getItemClass(this.settings.type) + ' ' + this.getItemClass(directionClass); 480 481 if (this.settings.lazyLoad) { 482 containerClasses += ' ' + this.getItemClass(this.settings.classes.lazyLoad); 483 } 484 485 this.$container.addClass(containerClasses); 486 } 487 }, { 488 key: "bindEvents", 489 value: function bindEvents() { 490 this.elements.$window.on('resize', this.runGallery); 491 492 if (this.settings.lazyLoad) { 493 this.elements.$window.on('scroll', this.handleScroll); 494 } 495 } 496 }, { 497 key: "getNestedObjectData", 498 value: function getNestedObjectData(object, key) { 499 var keyStack = key.split('.'), 500 currentKey = keyStack.splice(0, 1); 501 502 if (!keyStack.length) { 503 return { 504 object: object, 505 key: key 506 }; 507 } 508 509 return this.getNestedObjectData(object[currentKey], keyStack.join('.')); 510 } 511 }, { 512 key: "getTemplateArgs", 513 value: function getTemplateArgs(args, key) { 514 var nestedObjectData = this.getNestedObjectData(args, key); 515 return nestedObjectData.object[nestedObjectData.key] || ''; 516 } 517 }, { 518 key: "getCurrentBreakpoint", 519 value: function getCurrentBreakpoint() { 520 var breakpoints = Object.keys(this.settings.breakpoints).map(Number).sort(function (a, b) { 521 return a - b; 522 }); 523 var currentBreakpoint = 0; 524 breakpoints.some(function (breakpoint) { 525 if (innerWidth < breakpoint) { 526 currentBreakpoint = breakpoint; 527 return true; 528 } 529 530 return false; 531 }); 532 return currentBreakpoint; 533 } 534 }, { 535 key: "getCurrentDeviceSetting", 536 value: function getCurrentDeviceSetting(settingKey) { 537 var currentBreakpoint = this.getCurrentBreakpoint(); 538 539 if (currentBreakpoint) { 540 return this.settings.breakpoints[currentBreakpoint][settingKey]; 541 } 542 543 return this.settings[settingKey]; 544 } 545 }, { 546 key: "getActiveItems", 547 value: function getActiveItems() { 548 var returnIndexes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; 549 var activeTags = this.settings.tags, 550 activeIndexes = []; 551 552 if (!activeTags.length) { 553 if (returnIndexes) { 554 this.$items.each(function (index) { 555 activeIndexes.push(index); 556 }); 557 return activeIndexes; 558 } 559 560 return this.$items; 561 } 562 563 var filteredItems = this.$items.filter(function (index, item) { 564 var itemTags = item.dataset.eGalleryTags; 565 566 if (!itemTags) { 567 return false; 568 } 569 570 itemTags = itemTags.split(/[ ,]+/); 571 572 if (activeTags.some(function (tag) { 573 return itemTags.includes(tag); 574 })) { 575 if (returnIndexes) { 576 activeIndexes.push(index); 577 } 578 579 return true; 580 } 581 582 return false; 583 }); 584 585 if (returnIndexes) { 586 return activeIndexes; 587 } 588 589 return filteredItems; 590 } 591 }, { 592 key: "getImageData", 593 value: function getImageData(index) { 594 if (this.settings.tags.length) { 595 index = this.getActiveItems(true)[index]; 596 } 597 598 return this.imagesData[index]; 599 } 600 }, { 601 key: "compileTemplate", 602 value: function compileTemplate(template, args) { 603 var _this2 = this; 604 605 return template.replace(/{{([^}]+)}}/g, function (match, placeholder) { 606 return _this2.getTemplateArgs(args, placeholder.trim()); 607 }); 608 } 609 }, { 610 key: "createOverlay", 611 value: function createOverlay(overlayData) { 612 var _this$settings = this.settings, 613 classes = _this$settings.classes, 614 overlayTemplate = _this$settings.overlayTemplate, 615 $overlay = jQuery('<div>', { 616 "class": this.getItemClass(classes.overlay) 617 }), 618 overlayContent = this.compileTemplate(overlayTemplate, jQuery.extend(true, this.settings, overlayData)); 619 $overlay.html(overlayContent); 620 return $overlay; 621 } 622 }, { 623 key: "createItem", 624 value: function createItem(itemData) { 625 var classes = this.settings.classes, 626 $item = jQuery('<div>', { 627 "class": this.getItemClass(classes.item), 628 'data-e-gallery-tags': itemData.tags 629 }), 630 $image = jQuery('<div>', { 631 "class": this.getItemClass(classes.image) 632 }); 633 var $overlay; 634 635 if (!this.settings.lazyLoad) { 636 $image.css('background-image', 'url(' + itemData.thumbnail + ')'); 637 } 638 639 if (this.settings.overlay) { 640 $overlay = this.createOverlay(itemData); 641 } 642 643 var $contentWrapper = $item; 644 645 if (itemData.url) { 646 $contentWrapper = jQuery('<a>', { 647 "class": this.getItemClass(classes.link), 648 href: itemData.url 649 }); 650 $item.html($contentWrapper); 651 } 652 653 $contentWrapper.html($image); 654 655 if ($overlay) { 656 $contentWrapper.append($overlay); 657 } 658 659 return $item; 660 } 661 }, { 662 key: "debounce", 663 value: function debounce(func, wait) { 664 var _this3 = this; 665 666 var timeout; 667 return function () { 668 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 669 args[_key2] = arguments[_key2]; 670 } 671 672 clearTimeout(timeout); 673 timeout = setTimeout(function () { 674 return func.apply(void 0, args); 675 }, wait); 676 677 _this3.timeouts.push(timeout); 678 }; 679 } 680 }, { 681 key: "buildGallery", 682 value: function buildGallery() { 683 var _this4 = this; 684 685 var items = this.settings.items; 686 this.$items = jQuery(); 687 items.forEach(function (item) { 688 var $item = _this4.createItem(item); 689 690 _this4.$items = _this4.$items.add($item); 691 692 _this4.$container.append($item); 693 }); 694 } 695 }, { 696 key: "loadImages", 697 value: function loadImages() { 698 var _this5 = this; 699 700 var allPromises = []; 701 this.settings.items.forEach(function (item, index) { 702 var image = new Image(), 703 promise = new Promise(function (resolve) { 704 image.onload = resolve; 705 }); 706 allPromises.push(promise); 707 promise.then(function () { 708 return _this5.calculateImageSize(image, index); 709 }); 710 image.src = item.thumbnail; 711 }); 712 this.allImagesPromise = Promise.all(allPromises); 713 } 714 }, { 715 key: "lazyLoadImages", 716 value: function lazyLoadImages() { 717 var _this6 = this; 718 719 if (this.lazyLoadComplete) { 720 return; 721 } 722 723 var $items = this.getActiveItems(), 724 itemsIndexes = this.getActiveItems(true); 725 $items.each(function (index, item) { 726 var itemData = _this6.settings.items[itemsIndexes[index]]; 727 728 if (itemData.loading || !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["elementInView"])(item)) { 729 return true; 730 } 731 732 itemData.loading = true; 733 var $item = jQuery(item), 734 image = new Image(), 735 promise = new Promise(function (resolve) { 736 image.onload = resolve; 737 }); 738 promise.then(function () { 739 $item.find(_this6.settings.selectors.image).css('background-image', 'url("' + itemData.thumbnail + '")').addClass(_this6.getItemClass(_this6.settings.classes.imageLoaded)); 740 _this6.loadedItemsCount++; 741 742 if (_this6.loadedItemsCount === _this6.settings.items.length) { 743 _this6.lazyLoadComplete = true; 744 } 745 }); 746 image.src = itemData.thumbnail; 747 return true; 748 }); 749 } 750 }, { 751 key: "calculateImageSize", 752 value: function calculateImageSize(image, index) { 753 this.imagesData[index] = { 754 width: image.width, 755 height: image.height, 756 ratio: image.width / image.height 757 }; 758 } 759 }, { 760 key: "createImagesData", 761 value: function createImagesData() { 762 var _this7 = this; 763 764 this.settings.items.forEach(function (item, index) { 765 return _this7.calculateImageSize(item, index); 766 }); 767 } 768 }, { 769 key: "makeGalleryFromContent", 770 value: function makeGalleryFromContent() { 771 var selectors = this.settings.selectors, 772 isLazyLoad = this.settings.lazyLoad, 773 items = []; 774 this.$items = this.$container.find(selectors.items); 775 this.$items.each(function (index, item) { 776 var $image = jQuery(item).find(selectors.image); 777 items[index] = { 778 thumbnail: $image.data('thumbnail') 779 }; 780 781 if (isLazyLoad) { 782 items[index].width = $image.data('width'); 783 items[index].height = $image.data('height'); 784 } else { 785 $image.css('background-image', "url(\"".concat($image.data('thumbnail'), "\")")); 786 } 787 }); 788 this.settings.items = items; 789 } 790 }, { 791 key: "prepareGallery", 792 value: function prepareGallery() { 793 if (this.settings.items) { 794 this.buildGallery(); 795 } else { 796 this.makeGalleryFromContent(); 797 } 798 799 this.imagesData = []; 800 801 if (this.settings.lazyLoad) { 802 this.loadedItemsCount = 0; 803 this.lazyLoadComplete = false; 804 this.createImagesData(); 805 } else { 806 this.loadImages(); 807 } 808 } 809 }, { 810 key: "runGallery", 811 value: function runGallery(refresh) { 812 var _this8 = this; 813 814 var containerStyle = this.$container[0].style; 815 containerStyle.setProperty('--hgap', this.getCurrentDeviceSetting('horizontalGap') + 'px'); 816 containerStyle.setProperty('--vgap', this.getCurrentDeviceSetting('verticalGap') + 'px'); 817 containerStyle.setProperty('--animation-duration', this.settings.animationDuration + 'ms'); 818 this.$items.addClass(this.getItemClass(this.settings.classes.hidden)); 819 this.getActiveItems().removeClass(this.getItemClass(this.settings.classes.hidden)); 820 821 if (this.settings.lazyLoad) { 822 setTimeout(function () { 823 return _this8.lazyLoadImages(); 824 }, 300); 825 } 826 827 this.run(refresh); 828 } 829 }, { 830 key: "setSettings", 831 value: function setSettings(key, value) { 832 var nestedObjectData = this.getNestedObjectData(this.settings, key); 833 834 if (nestedObjectData.object) { 835 nestedObjectData.object[nestedObjectData.key] = value; 836 this.runGallery(true); 837 } 838 } 839 }, { 840 key: "unbindEvents", 841 value: function unbindEvents() { 842 this.elements.$window.off('resize', this.runGallery); 843 } 844 }, { 845 key: "destroy", 846 value: function destroy() { 847 this.unbindEvents(); 848 this.$container.empty(); 849 this.timeouts.forEach(function (timeout) { 850 return clearTimeout(timeout); 851 }); 852 } 853 }]); 854 855 return BaseGalleryType; 856 }(); 857 858 859 860 /***/ }), 861 862 /***/ "./src/js/types/grid.js": 863 /*!******************************!*\ 864 !*** ./src/js/types/grid.js ***! 865 \******************************/ 866 /*! exports provided: default */ 867 /***/ (function(module, __webpack_exports__, __webpack_require__) { 868 869 "use strict"; 870 __webpack_require__.r(__webpack_exports__); 871 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Grid; }); 872 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"); 873 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__); 874 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"); 875 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__); 876 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/possibleConstructorReturn */ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js"); 877 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__); 878 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/getPrototypeOf */ "./node_modules/@babel/runtime/helpers/getPrototypeOf.js"); 879 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__); 880 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babel/runtime/helpers/inherits */ "./node_modules/@babel/runtime/helpers/inherits.js"); 881 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__); 882 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/js/types/base.js"); 883 884 885 886 887 888 889 890 var Grid = 891 /*#__PURE__*/ 892 function (_BaseGalleryType) { 893 _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Grid, _BaseGalleryType); 894 895 function Grid() { 896 _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Grid); 897 898 return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Grid).apply(this, arguments)); 899 } 900 901 _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Grid, [{ 902 key: "getDefaultSettings", 903 value: function getDefaultSettings() { 904 return { 905 aspectRatio: '16:9' 906 }; 907 } 908 }, { 909 key: "setItemsPosition", 910 value: function setItemsPosition() { 911 var columns = this.getCurrentDeviceSetting('columns'); 912 this.getActiveItems().each(function (index, item) { 913 item.style.setProperty('--column', index % columns); 914 item.style.setProperty('--row', Math.floor(index / columns)); 915 }); 916 } 917 }, { 918 key: "setContainerSize", 919 value: function setContainerSize() { 920 var columns = this.getCurrentDeviceSetting('columns'), 921 rows = Math.ceil(this.getActiveItems().length / columns), 922 containerStyle = this.$container[0].style; 923 containerStyle.setProperty('--columns', columns); 924 containerStyle.setProperty('--rows', rows); 925 var itemWidth = this.getActiveItems().width(), 926 aspectRatio = this.settings.aspectRatio.split(':'), 927 aspectRatioPercents = aspectRatio[1] / aspectRatio[0], 928 itemHeight = aspectRatioPercents * itemWidth, 929 totalHeight = itemHeight * rows + this.getCurrentDeviceSetting('horizontalGap') * (rows - 1), 930 calculatedAspectRatio = totalHeight / this.$container.width() * 100; 931 containerStyle.setProperty('--aspect-ratio', aspectRatioPercents * 100 + '%'); 932 containerStyle.setProperty('--container-aspect-ratio', calculatedAspectRatio + '%'); 933 } 934 }, { 935 key: "run", 936 value: function run() { 937 var _this = this; 938 939 var animatedClass = this.getItemClass(this.settings.classes.animated); 940 this.$container.addClass(animatedClass); 941 setTimeout(function () { 942 _this.setItemsPosition(); 943 944 _this.setContainerSize(); 945 946 setTimeout(function () { 947 return _this.$container.removeClass(animatedClass); 948 }, _this.settings.animationDuration); 949 }, 50); 950 } 951 }]); 952 953 return Grid; 954 }(_base__WEBPACK_IMPORTED_MODULE_5__["default"]); 955 956 957 958 /***/ }), 959 960 /***/ "./src/js/types/justified.js": 961 /*!***********************************!*\ 962 !*** ./src/js/types/justified.js ***! 963 \***********************************/ 964 /*! exports provided: default */ 965 /***/ (function(module, __webpack_exports__, __webpack_require__) { 966 967 "use strict"; 968 __webpack_require__.r(__webpack_exports__); 969 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Justified; }); 970 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"); 971 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__); 972 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"); 973 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__); 974 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/possibleConstructorReturn */ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js"); 975 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__); 976 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/getPrototypeOf */ "./node_modules/@babel/runtime/helpers/getPrototypeOf.js"); 977 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__); 978 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babel/runtime/helpers/inherits */ "./node_modules/@babel/runtime/helpers/inherits.js"); 979 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__); 980 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/js/types/base.js"); 981 982 983 984 985 986 987 988 var Justified = 989 /*#__PURE__*/ 990 function (_BaseGalleryType) { 991 _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Justified, _BaseGalleryType); 992 993 function Justified() { 994 _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Justified); 995 996 return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Justified).apply(this, arguments)); 997 } 998 999 _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Justified, [{ 1000 key: "getDefaultSettings", 1001 value: function getDefaultSettings() { 1002 return { 1003 idealRowHeight: 200, 1004 lastRow: 'auto', 1005 breakpoints: { 1006 1024: { 1007 idealRowHeight: 150 1008 }, 1009 768: { 1010 idealRowHeight: 100 1011 } 1012 } 1013 }; 1014 } 1015 }, { 1016 key: "run", 1017 value: function run() { 1018 this.rowsHeights = []; 1019 this.rowsCount = 0; 1020 this.containerWidth = this.$container.width(); 1021 this.makeJustifiedRow(0); 1022 } 1023 }, { 1024 key: "makeJustifiedRow", 1025 value: function makeJustifiedRow(startIndex) { 1026 var oldRowWidth = 0; 1027 1028 for (var index = startIndex;; index++) { 1029 var imageData = this.getImageData(index); 1030 var itemComputedWidth = Math.round(this.getCurrentDeviceSetting('idealRowHeight') * imageData.ratio); 1031 1032 if (itemComputedWidth > this.containerWidth) { 1033 itemComputedWidth = this.containerWidth; 1034 } 1035 1036 var newRowWidth = oldRowWidth + itemComputedWidth; 1037 1038 if (newRowWidth > this.containerWidth) { 1039 var oldDiff = this.containerWidth - oldRowWidth, 1040 newDiff = newRowWidth - this.containerWidth; 1041 1042 if (oldDiff < newDiff) { 1043 this.fitImagesInContainer(startIndex, index, oldRowWidth); 1044 this.rowsCount++; 1045 this.makeJustifiedRow(index); 1046 break; 1047 } 1048 } 1049 1050 var isLastItem = index === this.getActiveItems().length - 1; 1051 imageData.computedWidth = itemComputedWidth; 1052 1053 if (isLastItem) { 1054 var lastRowMode = this.getCurrentDeviceSetting('lastRow'); 1055 1056 if ('hide' !== lastRowMode) { 1057 var totalRowWidth = 'fit' === lastRowMode || 0.7 <= newRowWidth / this.containerWidth ? newRowWidth : this.containerWidth; 1058 this.fitImagesInContainer(startIndex, index + 1, totalRowWidth); 1059 } 1060 1061 this.inflateGalleryHeight(); 1062 break; 1063 } 1064 1065 oldRowWidth = newRowWidth; 1066 } 1067 } 1068 }, { 1069 key: "fitImagesInContainer", 1070 value: function fitImagesInContainer(startIndex, endIndex, rowWidth) { 1071 var gapCount = endIndex - startIndex - 1, 1072 $items = this.getActiveItems(); 1073 var aggregatedWidth = 0; 1074 1075 for (var index = startIndex; index < endIndex; index++) { 1076 var imageData = this.getImageData(index), 1077 percentWidth = imageData.computedWidth / rowWidth, 1078 item = $items.get(index), 1079 firstRowItemClass = this.getItemClass(this.settings.classes.firstRowItem); 1080 item.style.setProperty('--item-width', percentWidth); 1081 item.style.setProperty('--gap-count', gapCount); 1082 item.style.setProperty('--item-height', imageData.height / imageData.width * 100 + '%'); 1083 item.style.setProperty('--item-start', aggregatedWidth); 1084 item.style.setProperty('--item-row-index', index - startIndex); 1085 aggregatedWidth += percentWidth; 1086 1087 if (index === startIndex) { 1088 item.classList.add(firstRowItemClass); 1089 var imagePxWidth = percentWidth * (this.containerWidth - gapCount * this.getCurrentDeviceSetting('horizontalGap')); 1090 this.rowsHeights.push(imagePxWidth / imageData.ratio); 1091 } else { 1092 item.classList.remove(firstRowItemClass); 1093 } 1094 } 1095 } 1096 }, { 1097 key: "inflateGalleryHeight", 1098 value: function inflateGalleryHeight() { 1099 var totalRowsHeight = this.rowsHeights.reduce(function (total, item) { 1100 return total + item; 1101 }), 1102 finalContainerHeight = totalRowsHeight + this.rowsCount * this.getCurrentDeviceSetting('verticalGap'), 1103 containerAspectRatio = finalContainerHeight / this.containerWidth, 1104 percentRowsHeights = this.rowsHeights.map(function (rowHeight) { 1105 return rowHeight / finalContainerHeight * 100; 1106 }); 1107 var currentRow = -1, 1108 accumulatedTop = 0; 1109 this.getActiveItems().each(function (index, item) { 1110 var itemRowIndex = item.style.getPropertyValue('--item-row-index'), 1111 isFirstItem = '0' === itemRowIndex; 1112 1113 if (isFirstItem) { 1114 currentRow++; 1115 1116 if (currentRow) { 1117 accumulatedTop += percentRowsHeights[currentRow - 1]; 1118 } 1119 } 1120 1121 item.style.setProperty('--item-top', accumulatedTop + '%'); 1122 item.style.setProperty('--item-height', percentRowsHeights[currentRow] + '%'); 1123 item.style.setProperty('--row', currentRow); 1124 }); 1125 this.$container[0].style.setProperty('--container-aspect-ratio', containerAspectRatio); 1126 } 1127 }]); 1128 1129 return Justified; 1130 }(_base__WEBPACK_IMPORTED_MODULE_5__["default"]); 1131 1132 1133 1134 /***/ }), 1135 1136 /***/ "./src/js/types/masonry.js": 1137 /*!*********************************!*\ 1138 !*** ./src/js/types/masonry.js ***! 1139 \*********************************/ 1140 /*! exports provided: default */ 1141 /***/ (function(module, __webpack_exports__, __webpack_require__) { 1142 1143 "use strict"; 1144 __webpack_require__.r(__webpack_exports__); 1145 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Masonry; }); 1146 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"); 1147 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__); 1148 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"); 1149 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__); 1150 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/possibleConstructorReturn */ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js"); 1151 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__); 1152 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/getPrototypeOf */ "./node_modules/@babel/runtime/helpers/getPrototypeOf.js"); 1153 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__); 1154 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babel/runtime/helpers/inherits */ "./node_modules/@babel/runtime/helpers/inherits.js"); 1155 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__); 1156 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/js/types/base.js"); 1157 1158 1159 1160 1161 1162 1163 1164 var Masonry = 1165 /*#__PURE__*/ 1166 function (_BaseGalleryType) { 1167 _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Masonry, _BaseGalleryType); 1168 1169 function Masonry() { 1170 _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Masonry); 1171 1172 return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Masonry).apply(this, arguments)); 1173 } 1174 1175 _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Masonry, [{ 1176 key: "run", 1177 value: function run(refresh) { 1178 var _this = this; 1179 1180 var currentBreakpoint = this.getCurrentBreakpoint(); 1181 1182 if (!refresh && currentBreakpoint === this.currentBreakpoint) { 1183 return; 1184 } 1185 1186 this.currentBreakpoint = currentBreakpoint; 1187 var heights = [], 1188 itemsInColumn = [], 1189 aggregatedHeights = [], 1190 columns = this.getCurrentDeviceSetting('columns'), 1191 containerWidth = this.$container.width(), 1192 horizontalGap = this.getCurrentDeviceSetting('horizontalGap'), 1193 itemWidth = (containerWidth - horizontalGap * (columns - 1)) / columns, 1194 $items = this.getActiveItems(); 1195 var naturalColumnHeight = 0; 1196 1197 for (var i = 0; i < columns; i++) { 1198 itemsInColumn[i] = 0; 1199 heights[i] = 0; 1200 } 1201 1202 $items.each(function (index, item) { 1203 var imageData = _this.getImageData(index), 1204 itemHeight = itemWidth / imageData.ratio; 1205 1206 var indexAtRow = index % columns; 1207 naturalColumnHeight = heights[indexAtRow]; 1208 jQuery.each(heights, function (colNumber, currentColHeight) { 1209 if (currentColHeight && naturalColumnHeight > currentColHeight + 5) { 1210 naturalColumnHeight = currentColHeight; 1211 indexAtRow = colNumber; 1212 } 1213 }); 1214 aggregatedHeights[index] = heights[indexAtRow]; 1215 heights[indexAtRow] += itemHeight; 1216 item.style.setProperty('--item-height', imageData.height / imageData.width * 100 + '%'); 1217 item.style.setProperty('--column', indexAtRow); 1218 item.style.setProperty('--items-in-column', itemsInColumn[indexAtRow]); 1219 itemsInColumn[indexAtRow]++; 1220 }); 1221 var highestColumn = Math.max.apply(Math, heights), 1222 highestColumnIndex = heights.indexOf(highestColumn), 1223 rows = itemsInColumn[highestColumnIndex], 1224 highestColumnsGapsCount = rows - 1, 1225 containerAspectRatio = highestColumn / containerWidth; 1226 this.$container[0].style.setProperty('--columns', columns); 1227 this.$container[0].style.setProperty('--highest-column-gap-count', highestColumnsGapsCount); 1228 this.$container.css('padding-bottom', containerAspectRatio * 100 + '%'); 1229 $items.each(function (index, item) { 1230 var percentHeight = aggregatedHeights[index] ? aggregatedHeights[index] / highestColumn * 100 : 0; 1231 item.style.setProperty('--percent-height', percentHeight + '%'); 1232 }); 1233 } 1234 }]); 1235 1236 return Masonry; 1237 }(_base__WEBPACK_IMPORTED_MODULE_5__["default"]); 1238 1239 1240 1241 /***/ }), 1242 1243 /***/ "./src/js/utils/element-in-view.js": 1244 /*!*****************************************!*\ 1245 !*** ./src/js/utils/element-in-view.js ***! 1246 \*****************************************/ 1247 /*! exports provided: default */ 1248 /***/ (function(module, __webpack_exports__, __webpack_require__) { 1249 1250 "use strict"; 1251 __webpack_require__.r(__webpack_exports__); 1252 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return elementInView; }); 1253 function elementInView(element) { 1254 var elementPart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top'; 1255 var elementTop = element.getBoundingClientRect().top, 1256 elementHeight = element.offsetHeight, 1257 elementBottom = elementTop + elementHeight; 1258 var elementPosition; 1259 1260 if ('middle' === elementPart) { 1261 elementPosition = elementTop + elementHeight / 2; 1262 } else if ('bottom' === elementPart) { 1263 elementPosition = elementBottom; 1264 } else { 1265 elementPosition = elementTop; 1266 } 1267 1268 return elementPosition <= innerHeight && elementBottom >= 0; 1269 } 1270 1271 /***/ }), 1272 1273 /***/ "./src/js/utils/index.js": 1274 /*!*******************************!*\ 1275 !*** ./src/js/utils/index.js ***! 1276 \*******************************/ 1277 /*! exports provided: elementInView */ 1278 /***/ (function(module, __webpack_exports__, __webpack_require__) { 1279 1280 "use strict"; 1281 __webpack_require__.r(__webpack_exports__); 1282 /* harmony import */ var _element_in_view__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./element-in-view */ "./src/js/utils/element-in-view.js"); 1283 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "elementInView", function() { return _element_in_view__WEBPACK_IMPORTED_MODULE_0__["default"]; }); 1284 1285 1286 1287 /***/ }), 1288 1289 /***/ "./src/scss/e-gallery.scss": 1290 /*!*********************************!*\ 1291 !*** ./src/scss/e-gallery.scss ***! 1292 \*********************************/ 1293 /*! no static exports found */ 1294 /***/ (function(module, exports, __webpack_require__) { 1295 1296 // extracted by mini-css-extract-plugin 1297 1298 /***/ }) 1299 1300 /******/ })["default"]; 1301 //# sourceMappingURL=e-gallery.js.map