| 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 |
