var EGallery =
(function(modules){
var installedModules={};
function __webpack_require__(moduleId){
if(installedModules[moduleId]){
return installedModules[moduleId].exports;
}
var module=installedModules[moduleId]={
i: moduleId,
l: false,
exports: {}
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.l=true;
return module.exports;
}
__webpack_require__.m=modules;
__webpack_require__.c=installedModules;
__webpack_require__.d=function(exports, name, getter){
if(!__webpack_require__.o(exports, name)){
Object.defineProperty(exports, name, { enumerable: true, get: getter });
}
};
__webpack_require__.r=function(exports){
if(typeof Symbol!=='undefined'&&Symbol.toStringTag){
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
}
Object.defineProperty(exports, '__esModule', { value: true });
};
__webpack_require__.t=function(value, mode){
if(mode & 1) value=__webpack_require__(value);
if(mode & 8) return value;
if((mode & 4)&&typeof value==='object'&&value&&value.__esModule) return value;
var ns=Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns, 'default', { enumerable: true, value: value });
if(mode & 2&&typeof value!='string') for(var key in value) __webpack_require__.d(ns, key, function(key){ return value[key]; }.bind(null, key));
return ns;
};
__webpack_require__.n=function(module){
var getter=module&&module.__esModule ?
function getDefault(){ return module['default']; } :
function getModuleExports(){ return module; };
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o=function(object, property){ return Object.prototype.hasOwnProperty.call(object, property); };
__webpack_require__.p="";
return __webpack_require__(__webpack_require__.s="./src/js/e-gallery.js");
})
({
"./node_modules/@babel/runtime/helpers/assertThisInitialized.js":
(function(module, exports){
function _assertThisInitialized(self){
if(self===void 0){
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
module.exports=_assertThisInitialized;
}),
"./node_modules/@babel/runtime/helpers/classCallCheck.js":
(function(module, exports){
function _classCallCheck(instance, Constructor){
if(!(instance instanceof Constructor)){
throw new TypeError("Cannot call a class as a function");
}}
module.exports=_classCallCheck;
}),
"./node_modules/@babel/runtime/helpers/createClass.js":
(function(module, exports){
function _defineProperties(target, props){
for (var i=0; i < props.length; i++){
var descriptor=props[i];
descriptor.enumerable=descriptor.enumerable||false;
descriptor.configurable=true;
if("value" in descriptor) descriptor.writable=true;
Object.defineProperty(target, descriptor.key, descriptor);
}}
function _createClass(Constructor, protoProps, staticProps){
if(protoProps) _defineProperties(Constructor.prototype, protoProps);
if(staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
module.exports=_createClass;
}),
"./node_modules/@babel/runtime/helpers/getPrototypeOf.js":
(function(module, exports){
function _getPrototypeOf(o){
module.exports=_getPrototypeOf=Object.setPrototypeOf ? Object.getPrototypeOf:function _getPrototypeOf(o){
return o.__proto__||Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
module.exports=_getPrototypeOf;
}),
"./node_modules/@babel/runtime/helpers/inherits.js":
(function(module, exports, __webpack_require__){
var setPrototypeOf=__webpack_require__( "./node_modules/@babel/runtime/helpers/setPrototypeOf.js");
function _inherits(subClass, superClass){
if(typeof superClass!=="function"&&superClass!==null){
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype=Object.create(superClass&&superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}});
if(superClass) setPrototypeOf(subClass, superClass);
}
module.exports=_inherits;
}),
"./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js":
(function(module, exports, __webpack_require__){
var _typeof=__webpack_require__( "./node_modules/@babel/runtime/helpers/typeof.js");
var assertThisInitialized=__webpack_require__( "./node_modules/@babel/runtime/helpers/assertThisInitialized.js");
function _possibleConstructorReturn(self, call){
if(call&&(_typeof(call)==="object"||typeof call==="function")){
return call;
}
return assertThisInitialized(self);
}
module.exports=_possibleConstructorReturn;
}),
"./node_modules/@babel/runtime/helpers/setPrototypeOf.js":
(function(module, exports){
function _setPrototypeOf(o, p){
module.exports=_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o, p){
o.__proto__=p;
return o;
};
return _setPrototypeOf(o, p);
}
module.exports=_setPrototypeOf;
}),
"./node_modules/@babel/runtime/helpers/typeof.js":
(function(module, exports){
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); }
function _typeof2(obj){
if(typeof Symbol==="function"&&_typeof3(Symbol.iterator)==="symbol"){
_typeof2=function _typeof2(obj){
return _typeof3(obj);
};}else{
_typeof2=function _typeof2(obj){
return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype ? "symbol":_typeof3(obj);
};}
return _typeof2(obj);
}
function _typeof(obj){
if(typeof Symbol==="function"&&_typeof2(Symbol.iterator)==="symbol"){
module.exports=_typeof=function _typeof(obj){
return _typeof2(obj);
};}else{
module.exports=_typeof=function _typeof(obj){
return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype ? "symbol":_typeof2(obj);
};}
return _typeof(obj);
}
module.exports=_typeof;
}),
"./src/js/e-gallery.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return EGallery; });
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./node_modules/@babel/runtime/helpers/classCallCheck.js");
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__( "./node_modules/@babel/runtime/helpers/createClass.js");
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
var _types_grid__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__( "./src/js/types/grid.js");
var _types_justified__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__( "./src/js/types/justified.js");
var _types_masonry__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__( "./src/js/types/masonry.js");
var _scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__( "./src/scss/e-gallery.scss");
var _scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(_scss_e_gallery_scss__WEBPACK_IMPORTED_MODULE_5__);
var EGallery =
function (){
function EGallery(userSettings){
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, EGallery);
this.userSettings=userSettings;
this.initGalleriesTypes();
this.createGallery();
}
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(EGallery, [{
key: "getDefaultSettings",
value: function getDefaultSettings(){
return {
container: null,
items: null,
type: 'grid',
tags: [],
overlay: false,
overlayTemplate: '<div class="{{ classesPrefix }}{{ classes.overlayTitle }}">{{ title }}</div><div class="{{ classesPrefix }}{{ classes.overlayDescription }}">{{ description }}</div>',
columns: 5,
horizontalGap: 10,
verticalGap: 10,
rtl: false,
animationDuration: 350,
lazyLoad: false,
classesPrefix: 'e-gallery-',
classes: {
container: 'container',
item: 'item',
image: 'image',
overlay: 'overlay',
overlayTitle: 'overlay__title',
overlayDescription: 'overlay__description',
link: 'link',
firstRowItem: 'first-row-item',
animated: '-animated',
hidden: 'item--hidden',
lazyLoad: '-lazyload',
imageLoaded: 'image-loaded'
},
selectors: {
items: '.e-gallery-item',
image: '.e-gallery-image'
},
breakpoints: {
1024: {
horizontalGap: 5,
verticalGap: 5,
columns: 4
},
768: {
horizontalGap: 1,
verticalGap: 1,
columns: 2
}}
};}}, {
key: "initGalleriesTypes",
value: function initGalleriesTypes(){
this.galleriesTypes={
grid: _types_grid__WEBPACK_IMPORTED_MODULE_2__["default"],
justified: _types_justified__WEBPACK_IMPORTED_MODULE_3__["default"],
masonry: _types_masonry__WEBPACK_IMPORTED_MODULE_4__["default"]
};}}, {
key: "createGallery",
value: function createGallery(){
var settings=jQuery.extend(this.getDefaultSettings(), this.userSettings);
var GalleryHandlerType=this.galleriesTypes[settings.type];
this.galleryHandler=new GalleryHandlerType(settings);
}}, {
key: "setSettings",
value: function setSettings(key, value){
this.galleryHandler.setSettings(key, value);
}}, {
key: "destroy",
value: function destroy(){
this.galleryHandler.destroy();
}}]);
return EGallery;
}();
}),
"./src/js/types/base.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return BaseGalleryType; });
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./node_modules/@babel/runtime/helpers/classCallCheck.js");
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__( "./node_modules/@babel/runtime/helpers/createClass.js");
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
var _utils__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__( "./src/js/utils/index.js");
var BaseGalleryType =
function (){
function BaseGalleryType(settings){
var _this=this;
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, BaseGalleryType);
this.settings=jQuery.extend(true, this.getDefaultSettings(), settings);
this.$container=jQuery(this.settings.container);
this.timeouts=[];
this.initElements();
this.prepareGallery();
var oldRunGallery=this.runGallery.bind(this);
this.runGallery=this.debounce(function (){
for (var _len=arguments.length, args=new Array(_len), _key=0; _key < _len; _key++){
args[_key]=arguments[_key];
}
if(_this.settings.lazyLoad){
oldRunGallery.apply(void 0, args);
}else{
_this.allImagesPromise.then(function (){
return oldRunGallery.apply(void 0, args);
});
}}, 300);
if(this.settings.lazyLoad){
this.handleScroll=this.debounce(function (){
return _this.lazyLoadImages();
}, 16);
}
this.bindEvents();
this.runGallery();
}
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(BaseGalleryType, [{
key: "getDefaultSettings",
value: function getDefaultSettings(){
return {};}}, {
key: "getItemClass",
value: function getItemClass(className){
return this.settings.classesPrefix + className;
}}, {
key: "initElements",
value: function initElements(){
this.elements={
$window: jQuery(window)
};
var directionClass='-' + (this.settings.rtl ? 'rtl':'ltr');
var containerClasses=this.getItemClass(this.settings.classes.container) + ' ' + this.getItemClass(this.settings.type) + ' ' + this.getItemClass(directionClass);
if(this.settings.lazyLoad){
containerClasses +=' ' + this.getItemClass(this.settings.classes.lazyLoad);
}
this.$container.addClass(containerClasses);
}}, {
key: "bindEvents",
value: function bindEvents(){
this.elements.$window.on('resize', this.runGallery);
if(this.settings.lazyLoad){
this.elements.$window.on('scroll', this.handleScroll);
}}
}, {
key: "getNestedObjectData",
value: function getNestedObjectData(object, key){
var keyStack=key.split('.'),
currentKey=keyStack.splice(0, 1);
if(!keyStack.length){
return {
object: object,
key: key
};}
return this.getNestedObjectData(object[currentKey], keyStack.join('.'));
}}, {
key: "getTemplateArgs",
value: function getTemplateArgs(args, key){
var nestedObjectData=this.getNestedObjectData(args, key);
return nestedObjectData.object[nestedObjectData.key]||'';
}}, {
key: "getCurrentBreakpoint",
value: function getCurrentBreakpoint(){
var breakpoints=Object.keys(this.settings.breakpoints).map(Number).sort(function (a, b){
return a - b;
});
var currentBreakpoint=0;
breakpoints.some(function (breakpoint){
if(innerWidth < breakpoint){
currentBreakpoint=breakpoint;
return true;
}
return false;
});
return currentBreakpoint;
}}, {
key: "getCurrentDeviceSetting",
value: function getCurrentDeviceSetting(settingKey){
var currentBreakpoint=this.getCurrentBreakpoint();
if(currentBreakpoint){
return this.settings.breakpoints[currentBreakpoint][settingKey];
}
return this.settings[settingKey];
}}, {
key: "getActiveItems",
value: function getActiveItems(){
var returnIndexes=arguments.length > 0&&arguments[0]!==undefined ? arguments[0]:false;
var activeTags=this.settings.tags,
activeIndexes=[];
if(!activeTags.length){
if(returnIndexes){
this.$items.each(function (index){
activeIndexes.push(index);
});
return activeIndexes;
}
return this.$items;
}
var filteredItems=this.$items.filter(function (index, item){
var itemTags=item.dataset.eGalleryTags;
if(!itemTags){
return false;
}
itemTags=itemTags.split(/[ ,]+/);
if(activeTags.some(function (tag){
return itemTags.includes(tag);
})){
if(returnIndexes){
activeIndexes.push(index);
}
return true;
}
return false;
});
if(returnIndexes){
return activeIndexes;
}
return filteredItems;
}}, {
key: "getImageData",
value: function getImageData(index){
if(this.settings.tags.length){
index=this.getActiveItems(true)[index];
}
return this.imagesData[index];
}}, {
key: "compileTemplate",
value: function compileTemplate(template, args){
var _this2=this;
return template.replace(/{{([^}]+)}}/g, function (match, placeholder){
return _this2.getTemplateArgs(args, placeholder.trim());
});
}}, {
key: "createOverlay",
value: function createOverlay(overlayData){
var _this$settings=this.settings,
classes=_this$settings.classes,
overlayTemplate=_this$settings.overlayTemplate,
$overlay=jQuery('<div>', {
"class": this.getItemClass(classes.overlay)
}),
overlayContent=this.compileTemplate(overlayTemplate, jQuery.extend(true, this.settings, overlayData));
$overlay.html(overlayContent);
return $overlay;
}}, {
key: "createItem",
value: function createItem(itemData){
var classes=this.settings.classes,
$item=jQuery('<div>', {
"class": this.getItemClass(classes.item),
'data-e-gallery-tags': itemData.tags
}),
$image=jQuery('<div>', {
"class": this.getItemClass(classes.image)
});
var $overlay;
if(!this.settings.lazyLoad){
$image.css('background-image', 'url(' + itemData.thumbnail + ')');
}
if(this.settings.overlay){
$overlay=this.createOverlay(itemData);
}
var $contentWrapper=$item;
if(itemData.url){
$contentWrapper=jQuery('<a>', {
"class": this.getItemClass(classes.link),
href: itemData.url
});
$item.html($contentWrapper);
}
$contentWrapper.html($image);
if($overlay){
$contentWrapper.append($overlay);
}
return $item;
}}, {
key: "debounce",
value: function debounce(func, wait){
var _this3=this;
var timeout;
return function (){
for (var _len2=arguments.length, args=new Array(_len2), _key2=0; _key2 < _len2; _key2++){
args[_key2]=arguments[_key2];
}
clearTimeout(timeout);
timeout=setTimeout(function (){
return func.apply(void 0, args);
}, wait);
_this3.timeouts.push(timeout);
};}}, {
key: "buildGallery",
value: function buildGallery(){
var _this4=this;
var items=this.settings.items;
this.$items=jQuery();
items.forEach(function (item){
var $item=_this4.createItem(item);
_this4.$items=_this4.$items.add($item);
_this4.$container.append($item);
});
}}, {
key: "loadImages",
value: function loadImages(){
var _this5=this;
var allPromises=[];
this.settings.items.forEach(function (item, index){
var image=new Image(),
promise=new Promise(function (resolve){
image.onload=resolve;
});
allPromises.push(promise);
promise.then(function (){
return _this5.calculateImageSize(image, index);
});
image.src=item.thumbnail;
});
this.allImagesPromise=Promise.all(allPromises);
}}, {
key: "lazyLoadImages",
value: function lazyLoadImages(){
var _this6=this;
if(this.lazyLoadComplete){
return;
}
var $items=this.getActiveItems(),
itemsIndexes=this.getActiveItems(true);
$items.each(function (index, item){
var itemData=_this6.settings.items[itemsIndexes[index]];
if(itemData.loading||!Object(_utils__WEBPACK_IMPORTED_MODULE_2__["elementInView"])(item)){
return true;
}
itemData.loading=true;
var $item=jQuery(item),
image=new Image(),
promise=new Promise(function (resolve){
image.onload=resolve;
});
promise.then(function (){
$item.find(_this6.settings.selectors.image).css('background-image', 'url("' + itemData.thumbnail + '")').addClass(_this6.getItemClass(_this6.settings.classes.imageLoaded));
_this6.loadedItemsCount++;
if(_this6.loadedItemsCount===_this6.settings.items.length){
_this6.lazyLoadComplete=true;
}});
image.src=itemData.thumbnail;
return true;
});
}}, {
key: "calculateImageSize",
value: function calculateImageSize(image, index){
this.imagesData[index]={
width: image.width,
height: image.height,
ratio: image.width / image.height
};}}, {
key: "createImagesData",
value: function createImagesData(){
var _this7=this;
this.settings.items.forEach(function (item, index){
return _this7.calculateImageSize(item, index);
});
}}, {
key: "makeGalleryFromContent",
value: function makeGalleryFromContent(){
var selectors=this.settings.selectors,
isLazyLoad=this.settings.lazyLoad,
items=[];
this.$items=this.$container.find(selectors.items);
this.$items.each(function (index, item){
var $image=jQuery(item).find(selectors.image);
items[index]={
thumbnail: $image.data('thumbnail')
};
if(isLazyLoad){
items[index].width=$image.data('width');
items[index].height=$image.data('height');
}else{
$image.css('background-image', "url(\"".concat($image.data('thumbnail'), "\")"));
}});
this.settings.items=items;
}}, {
key: "prepareGallery",
value: function prepareGallery(){
if(this.settings.items){
this.buildGallery();
}else{
this.makeGalleryFromContent();
}
this.imagesData=[];
if(this.settings.lazyLoad){
this.loadedItemsCount=0;
this.lazyLoadComplete=false;
this.createImagesData();
}else{
this.loadImages();
}}
}, {
key: "runGallery",
value: function runGallery(refresh){
var _this8=this;
var containerStyle=this.$container[0].style;
containerStyle.setProperty('--hgap', this.getCurrentDeviceSetting('horizontalGap') + 'px');
containerStyle.setProperty('--vgap', this.getCurrentDeviceSetting('verticalGap') + 'px');
containerStyle.setProperty('--animation-duration', this.settings.animationDuration + 'ms');
this.$items.addClass(this.getItemClass(this.settings.classes.hidden));
this.getActiveItems().removeClass(this.getItemClass(this.settings.classes.hidden));
if(this.settings.lazyLoad){
setTimeout(function (){
return _this8.lazyLoadImages();
}, 300);
}
this.run(refresh);
}}, {
key: "setSettings",
value: function setSettings(key, value){
var nestedObjectData=this.getNestedObjectData(this.settings, key);
if(nestedObjectData.object){
nestedObjectData.object[nestedObjectData.key]=value;
this.runGallery(true);
}}
}, {
key: "unbindEvents",
value: function unbindEvents(){
this.elements.$window.off('resize', this.runGallery);
}}, {
key: "destroy",
value: function destroy(){
this.unbindEvents();
this.$container.empty();
this.timeouts.forEach(function (timeout){
return clearTimeout(timeout);
});
}}]);
return BaseGalleryType;
}();
}),
"./src/js/types/grid.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return Grid; });
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./node_modules/@babel/runtime/helpers/classCallCheck.js");
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__( "./node_modules/@babel/runtime/helpers/createClass.js");
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__( "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js");
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__);
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__( "./node_modules/@babel/runtime/helpers/getPrototypeOf.js");
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__);
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__( "./node_modules/@babel/runtime/helpers/inherits.js");
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__);
var _base__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__( "./src/js/types/base.js");
var Grid =
function (_BaseGalleryType){
_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Grid, _BaseGalleryType);
function Grid(){
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Grid);
return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Grid).apply(this, arguments));
}
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Grid, [{
key: "getDefaultSettings",
value: function getDefaultSettings(){
return {
aspectRatio: '16:9'
};}}, {
key: "setItemsPosition",
value: function setItemsPosition(){
var columns=this.getCurrentDeviceSetting('columns');
this.getActiveItems().each(function (index, item){
item.style.setProperty('--column', index % columns);
item.style.setProperty('--row', Math.floor(index / columns));
});
}}, {
key: "setContainerSize",
value: function setContainerSize(){
var columns=this.getCurrentDeviceSetting('columns'),
rows=Math.ceil(this.getActiveItems().length / columns),
containerStyle=this.$container[0].style;
containerStyle.setProperty('--columns', columns);
containerStyle.setProperty('--rows', rows);
var itemWidth=this.getActiveItems().width(),
aspectRatio=this.settings.aspectRatio.split(':'),
aspectRatioPercents=aspectRatio[1] / aspectRatio[0],
itemHeight=aspectRatioPercents * itemWidth,
totalHeight=itemHeight * rows + this.getCurrentDeviceSetting('horizontalGap') * (rows - 1),
calculatedAspectRatio=totalHeight / this.$container.width() * 100;
containerStyle.setProperty('--aspect-ratio', aspectRatioPercents * 100 + '%');
containerStyle.setProperty('--container-aspect-ratio', calculatedAspectRatio + '%');
}}, {
key: "run",
value: function run(){
var _this=this;
var animatedClass=this.getItemClass(this.settings.classes.animated);
this.$container.addClass(animatedClass);
setTimeout(function (){
_this.setItemsPosition();
_this.setContainerSize();
setTimeout(function (){
return _this.$container.removeClass(animatedClass);
}, _this.settings.animationDuration);
}, 50);
}}]);
return Grid;
}(_base__WEBPACK_IMPORTED_MODULE_5__["default"]);
}),
"./src/js/types/justified.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return Justified; });
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./node_modules/@babel/runtime/helpers/classCallCheck.js");
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__( "./node_modules/@babel/runtime/helpers/createClass.js");
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__( "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js");
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__);
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__( "./node_modules/@babel/runtime/helpers/getPrototypeOf.js");
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__);
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__( "./node_modules/@babel/runtime/helpers/inherits.js");
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__);
var _base__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__( "./src/js/types/base.js");
var Justified =
function (_BaseGalleryType){
_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Justified, _BaseGalleryType);
function Justified(){
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Justified);
return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Justified).apply(this, arguments));
}
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Justified, [{
key: "getDefaultSettings",
value: function getDefaultSettings(){
return {
idealRowHeight: 200,
lastRow: 'auto',
breakpoints: {
1024: {
idealRowHeight: 150
},
768: {
idealRowHeight: 100
}}
};}}, {
key: "run",
value: function run(){
this.rowsHeights=[];
this.rowsCount=0;
this.containerWidth=this.$container.width();
this.makeJustifiedRow(0);
}}, {
key: "makeJustifiedRow",
value: function makeJustifiedRow(startIndex){
var oldRowWidth=0;
for (var index=startIndex;; index++){
var imageData=this.getImageData(index);
var itemComputedWidth=Math.round(this.getCurrentDeviceSetting('idealRowHeight') * imageData.ratio);
if(itemComputedWidth > this.containerWidth){
itemComputedWidth=this.containerWidth;
}
var newRowWidth=oldRowWidth + itemComputedWidth;
if(newRowWidth > this.containerWidth){
var oldDiff=this.containerWidth - oldRowWidth,
newDiff=newRowWidth - this.containerWidth;
if(oldDiff < newDiff){
this.fitImagesInContainer(startIndex, index, oldRowWidth);
this.rowsCount++;
this.makeJustifiedRow(index);
break;
}}
var isLastItem=index===this.getActiveItems().length - 1;
imageData.computedWidth=itemComputedWidth;
if(isLastItem){
var lastRowMode=this.getCurrentDeviceSetting('lastRow');
if('hide'!==lastRowMode){
var totalRowWidth='fit'===lastRowMode||0.7 <=newRowWidth / this.containerWidth ? newRowWidth:this.containerWidth;
this.fitImagesInContainer(startIndex, index + 1, totalRowWidth);
}
this.inflateGalleryHeight();
break;
}
oldRowWidth=newRowWidth;
}}
}, {
key: "fitImagesInContainer",
value: function fitImagesInContainer(startIndex, endIndex, rowWidth){
var gapCount=endIndex - startIndex - 1,
$items=this.getActiveItems();
var aggregatedWidth=0;
for (var index=startIndex; index < endIndex; index++){
var imageData=this.getImageData(index),
percentWidth=imageData.computedWidth / rowWidth,
item=$items.get(index),
firstRowItemClass=this.getItemClass(this.settings.classes.firstRowItem);
item.style.setProperty('--item-width', percentWidth);
item.style.setProperty('--gap-count', gapCount);
item.style.setProperty('--item-height', imageData.height / imageData.width * 100 + '%');
item.style.setProperty('--item-start', aggregatedWidth);
item.style.setProperty('--item-row-index', index - startIndex);
aggregatedWidth +=percentWidth;
if(index===startIndex){
item.classList.add(firstRowItemClass);
var imagePxWidth=percentWidth * (this.containerWidth - gapCount * this.getCurrentDeviceSetting('horizontalGap'));
this.rowsHeights.push(imagePxWidth / imageData.ratio);
}else{
item.classList.remove(firstRowItemClass);
}}
}}, {
key: "inflateGalleryHeight",
value: function inflateGalleryHeight(){
var totalRowsHeight=this.rowsHeights.reduce(function (total, item){
return total + item;
}),
finalContainerHeight=totalRowsHeight + this.rowsCount * this.getCurrentDeviceSetting('verticalGap'),
containerAspectRatio=finalContainerHeight / this.containerWidth,
percentRowsHeights=this.rowsHeights.map(function (rowHeight){
return rowHeight / finalContainerHeight * 100;
});
var currentRow=-1,
accumulatedTop=0;
this.getActiveItems().each(function (index, item){
var itemRowIndex=item.style.getPropertyValue('--item-row-index'),
isFirstItem='0'===itemRowIndex;
if(isFirstItem){
currentRow++;
if(currentRow){
accumulatedTop +=percentRowsHeights[currentRow - 1];
}}
item.style.setProperty('--item-top', accumulatedTop + '%');
item.style.setProperty('--item-height', percentRowsHeights[currentRow] + '%');
item.style.setProperty('--row', currentRow);
});
this.$container[0].style.setProperty('--container-aspect-ratio', containerAspectRatio);
}}]);
return Justified;
}(_base__WEBPACK_IMPORTED_MODULE_5__["default"]);
}),
"./src/js/types/masonry.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return Masonry; });
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./node_modules/@babel/runtime/helpers/classCallCheck.js");
var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__( "./node_modules/@babel/runtime/helpers/createClass.js");
var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__( "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js");
var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__);
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__( "./node_modules/@babel/runtime/helpers/getPrototypeOf.js");
var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__);
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__( "./node_modules/@babel/runtime/helpers/inherits.js");
var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__);
var _base__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__( "./src/js/types/base.js");
var Masonry =
function (_BaseGalleryType){
_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(Masonry, _BaseGalleryType);
function Masonry(){
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Masonry);
return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2___default()(this, _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3___default()(Masonry).apply(this, arguments));
}
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Masonry, [{
key: "run",
value: function run(refresh){
var _this=this;
var currentBreakpoint=this.getCurrentBreakpoint();
if(!refresh&&currentBreakpoint===this.currentBreakpoint){
return;
}
this.currentBreakpoint=currentBreakpoint;
var heights=[],
itemsInColumn=[],
aggregatedHeights=[],
columns=this.getCurrentDeviceSetting('columns'),
containerWidth=this.$container.width(),
horizontalGap=this.getCurrentDeviceSetting('horizontalGap'),
itemWidth=(containerWidth - horizontalGap * (columns - 1)) / columns,
$items=this.getActiveItems();
var naturalColumnHeight=0;
for (var i=0; i < columns; i++){
itemsInColumn[i]=0;
heights[i]=0;
}
$items.each(function (index, item){
var imageData=_this.getImageData(index),
itemHeight=itemWidth / imageData.ratio;
var indexAtRow=index % columns;
naturalColumnHeight=heights[indexAtRow];
jQuery.each(heights, function (colNumber, currentColHeight){
if(currentColHeight&&naturalColumnHeight > currentColHeight + 5){
naturalColumnHeight=currentColHeight;
indexAtRow=colNumber;
}});
aggregatedHeights[index]=heights[indexAtRow];
heights[indexAtRow] +=itemHeight;
item.style.setProperty('--item-height', imageData.height / imageData.width * 100 + '%');
item.style.setProperty('--column', indexAtRow);
item.style.setProperty('--items-in-column', itemsInColumn[indexAtRow]);
itemsInColumn[indexAtRow]++;
});
var highestColumn=Math.max.apply(Math, heights),
highestColumnIndex=heights.indexOf(highestColumn),
rows=itemsInColumn[highestColumnIndex],
highestColumnsGapsCount=rows - 1,
containerAspectRatio=highestColumn / containerWidth;
this.$container[0].style.setProperty('--columns', columns);
this.$container[0].style.setProperty('--highest-column-gap-count', highestColumnsGapsCount);
this.$container.css('padding-bottom', containerAspectRatio * 100 + '%');
$items.each(function (index, item){
var percentHeight=aggregatedHeights[index] ? aggregatedHeights[index] / highestColumn * 100:0;
item.style.setProperty('--percent-height', percentHeight + '%');
});
}}]);
return Masonry;
}(_base__WEBPACK_IMPORTED_MODULE_5__["default"]);
}),
"./src/js/utils/element-in-view.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "default", function(){ return elementInView; });
function elementInView(element){
var elementPart=arguments.length > 1&&arguments[1]!==undefined ? arguments[1]:'top';
var elementTop=element.getBoundingClientRect().top,
elementHeight=element.offsetHeight,
elementBottom=elementTop + elementHeight;
var elementPosition;
if('middle'===elementPart){
elementPosition=elementTop + elementHeight / 2;
}else if('bottom'===elementPart){
elementPosition=elementBottom;
}else{
elementPosition=elementTop;
}
return elementPosition <=innerHeight&&elementBottom >=0;
}
}),
"./src/js/utils/index.js":
(function(module, __webpack_exports__, __webpack_require__){
"use strict";
__webpack_require__.r(__webpack_exports__);
var _element_in_view__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__( "./src/js/utils/element-in-view.js");
__webpack_require__.d(__webpack_exports__, "elementInView", function(){ return _element_in_view__WEBPACK_IMPORTED_MODULE_0__["default"]; });
}),
"./src/scss/e-gallery.scss":
(function(module, exports, __webpack_require__){
})
})["default"];