(window["webpackJsonp_name_"] = window["webpackJsonp_name_"] || []).push([[18,34],{

/***/ 126:
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _importCss2 = __webpack_require__(46);

var _importCss3 = _interopRequireDefault(_importCss2);

var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.default = ModalImageManager;

var _transitionEvent = __webpack_require__(171);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var objectFitImages = __webpack_require__(205);
function ModalImageManager() {
    Object.keys(window.images).forEach(function (imageId) {
        new ModalImage({
            imageId: imageId,
            setting: window.images[imageId]
        });
    });
}

var ModalImage = function () {
    _createClass(ModalImage, null, [{
        key: 'default',
        get: function get() {
            return {
                imageId: null,
                setting: {}
            };
        }
    }]);

    function ModalImage() {
        var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

        _classCallCheck(this, ModalImage);

        this._params = Object.assign({}, ModalImage.default, params);
        this.init();
    }

    _createClass(ModalImage, [{
        key: 'init',
        value: function init() {
            var _this = this;

            if (!this.imageId) {
                return false;
            }
            this.image = document.querySelector('.' + this.imageId);
            if (!this.image) {
                return false;
            }
            this.imageLink = this.image.querySelector('.image-figure__link');
            if (!this.imageLink) {
                return false;
            }
            //this.imageLink.style.cssText = '';
            this.imageLinkImage = this.imageLink.querySelector('.image-figure__image');
            this.imageLink.addEventListener('click', function (event) {
                // open modal window
                _this._openModal();
            });
            if (!ModalImage.modal) {
                ModalImage._createModal();
            }
        }
    }, {
        key: '_openModal',
        value: function _openModal() {
            this.gallery = window.galleries && window.galleries[this.setting.gallery_id];
            this._createGallery();
            return this;
        }
    }, {
        key: '_createGallery',
        value: function _createGallery() {
            var _this2 = this;

            var imageClone = this.image.cloneNode(true);
            ModalImage.currentImageLink = this.image.querySelector('.image-figure__link');
            var imageLink = this.currentImageLink = imageClone.querySelector('.image-figure__link');
            imageLink.style.cssText = '';
            imageClone.className = imageClone.className.replace(/(caption-)\w+(-)\w+/g, '');
            var startPosition = 0;
            ModalImage.modalContent.innerHTML = '\n        <div class="project-carousel__wrap project-carousel_image owl-carousel ' + (this.setting.show_desc ? 'show-desc' : '') + ' ' + (this.setting.show_share ? 'show-share' : '') + '">\n            ' + (this.gallery ? this.gallery.map(function (id, index) {
                if (id !== _this2.imageId) {
                    var image = document.querySelector('.' + id);
                    if (image) {
                        var tmp = image.cloneNode(true);
                        var _imageLink = tmp.querySelector('.image-figure__link');
                        _imageLink.style.cssText = '';
                        tmp.className = tmp.className.replace(/(caption-)\w+(-)\w+/g, '');
                        return '<div class="item" data-thumb="<div style=\'background-image: url(' + window.images[id].full + ');\'></div>">' + tmp.outerHTML + '</div>';
                    }
                } else {
                    startPosition = index;
                    return '<div class="item" data-thumb="<div style=\'background-image: url(' + window.images[_this2.imageId].full + ');\'></div>">' + imageClone.outerHTML + '</div>';
                }
            }).join('') : '<div class="item" data-thumb="<div style=\'background-image: url(' + window.images[this.imageId].full + ');\'></div>">' + imageClone.outerHTML + '</div>') + '\n        </div>\n        <div class="social-shares">\n            ' + (this.setting.show_share ? this.setting.shares : '') + '\n            ' + (this.setting.show_social ? this.setting.socials : '') + '\n        </div>\n    ';
            objectFitImages('.project-modal .image-figure__link img');
            var carousel = ModalImage.modalContent.querySelectorAll('.project-carousel__wrap');
            if (carousel.length) {
                Promise.all([Promise.all(/* import() | OwlManager/OwlManager */[__webpack_require__.e(0), __webpack_require__.e(24), __webpack_require__.e(31)]).then(function() { var module = __webpack_require__(192); return typeof module === "object" && module && module.__esModule ? module : Object.assign({/* fake namespace object */}, typeof module === "object" && module, { "default": module }); }), (0, _importCss3.default)('OwlManager/OwlManager')]).then(function (proms) {
                    return proms[0];
                }).then(function (OwlManager) {
                    new OwlManager.default({
                        nodes: carousel,
                        settings: {
                            startPosition: startPosition,
                            'enable_prev_next': _this2.setting.show_prev_next,
                            'thumbs': _this2.setting.show_previews
                        }
                    });
                    ModalImage.modal.classList.add('project-modal_opened');
                    ModalImage.modalContent.style.opacity = 0;
                    var activeImageWrapper = ModalImage.modalContent.querySelector('.' + _this2.imageId + ' .image-figure__link');
                    var activeImage = activeImageWrapper.querySelector('.image-figure__image');
                    carousel[0].style.height = carousel[0].offsetHeight + 'px';
                    var imageSize = _this2.imageLinkImage.getBoundingClientRect();
                    var activeImageSize = activeImageWrapper.getBoundingClientRect();
                    var ratio = imageSize.width / imageSize.height;
                    var activeImageSizeHeight = void 0;
                    var activeImageSizeWidth = void 0;
                    var offsetTop = 0;
                    var offsetLeft = 0;
                    if (imageSize.width === imageSize.height) {
                        if (activeImageSize.width >= activeImageSize.height) {
                            activeImageSizeWidth = activeImageSizeHeight = activeImageSize.height;
                        } else {
                            activeImageSizeHeight = activeImageSizeWidth = activeImageSize.width;
                        }
                    } else if (imageSize.width > imageSize.height) {
                        activeImageSizeWidth = activeImageSize.width;
                        activeImageSizeHeight = activeImageSize.width / ratio;
                        if (activeImageSizeHeight > activeImageSize.height) {
                            activeImageSizeHeight = activeImageSize.height;
                            activeImageSizeWidth = activeImageSize.height * ratio;
                        }
                    } else {
                        activeImageSizeHeight = activeImageSize.height;
                        activeImageSizeWidth = activeImageSize.height * ratio;
                        if (activeImageSizeWidth > activeImageSize.width) {
                            activeImageSizeWidth = activeImageSize.width;
                            activeImageSizeHeight = activeImageSize.width / ratio;
                        }
                    }
                    if (activeImageSizeWidth < activeImageSize.width) {
                        offsetLeft = (activeImageSize.width - activeImageSizeWidth) / 2;
                    }
                    if (activeImageSizeHeight < activeImageSize.height) {
                        offsetTop = (activeImageSize.height - activeImageSizeHeight) / 2;
                    }
                    var timeStop = void 0;
                    window.addEventListener('resize', function () {
                        clearTimeout(timeStop);
                        timeStop = setTimeout(function () {
                            carousel[0].style.height = '';
                            carousel[0].style.height = carousel[0].offsetHeight + 'px';
                        }, 200);
                    });
                    var clone = _this2.imageLink.cloneNode(true);
                    clone.classList.add('image-figure__link-clone');
                    clone.style.cssText = '\n          width: ' + activeImageSizeWidth + 'px;\n          height: ' + activeImageSizeHeight + 'px;\n          transform: scale(' + imageSize.width / activeImageSizeWidth + ', ' + imageSize.height / activeImageSizeHeight + ') translate(' + imageSize.left + 'px, ' + imageSize.top + 'px);\n          transform-origin: ' + imageSize.left + 'px ' + imageSize.top + 'px;\n        ';
                    document.body.appendChild(clone);
                    clone.addEventListener(_transitionEvent.transitionEvent, function () {
                        var modalTransitionF = function modalTransitionF() {
                            if (clone.classList.contains('is-animating')) {
                                clone.classList.remove('is-animating');
                                clone.parentNode.removeChild(clone);
                            }
                            ModalImage.modalContent.removeEventListener(_transitionEvent.transitionEvent, modalTransitionF);
                            ModalImage.modalContent.classList.remove('has-transition');
                        };
                        ModalImage.modalContent.addEventListener(_transitionEvent.transitionEvent, modalTransitionF);
                        ModalImage.modalContent.classList.add('has-transition');
                        ModalImage.modalContent.style.opacity = '';
                    });
                    _this2.imageLink.style.opacity = 0;
                    setTimeout(function () {
                        clone.classList.add('is-animating');
                        clone.style.cssText = '\n            width: ' + activeImageSizeWidth + 'px;\n            height: ' + activeImageSizeHeight + 'px;\n            transform: scale(1) translate(' + (offsetLeft + activeImageSize.left) + 'px, ' + (offsetTop + activeImageSize.top) + 'px);\n            transform-origin: ' + (offsetLeft + activeImageSize.left) + 'px ' + (offsetTop + activeImageSize.top) + 'px;\n            transition: transform .4s ease, transform-origin .4s ease;\n          ';
                    }, 0);
                });
            }
        }
    }, {
        key: 'imageId',
        get: function get() {
            return this._params.imageId;
        }
    }, {
        key: 'setting',
        get: function get() {
            return this._params.setting;
        }
    }], [{
        key: '_createModal',
        value: function _createModal() {
            ModalImage.modal = document.createElement('div');
            ModalImage.modal.className = 'project-modal project-modal_image';
            ModalImage.modal.innerHTML = '\n      <div class="background">\n        <!--Video-->\n        <div class="layer video-layer"></div>\n        <!--Image-->\n        <div class="layer image-layer"></div>\n        <!--Pattern-->\n        <div class="layer pattern-layer"></div>\n        <!--Gradient-->\n        <div class="layer gradient-layer"></div>\n        <!--Color-->\n        <div class="layer color-layer"></div>\n      </div>\n      <div class="project-modal__close"></div>\n    ';
            ModalImage.modalClose = document.createElement('div');
            ModalImage.modalClose.className = 'project-modal__close';
            ModalImage.modalWrapper = document.createElement('div');
            ModalImage.modalWrapper.className = 'project-modal__content-wrapper';
            ModalImage.modalWrapper.innerHTML = '\n      <div class="background">\n          <!--Video-->\n          <div class="layer video-layer"></div>\n          <!--Image-->\n          <div class="layer image-layer"></div>\n          <!--Pattern-->\n          <div class="layer pattern-layer"></div>\n          <!--Gradient-->\n          <div class="layer gradient-layer"></div>\n          <!--Color-->\n          <div class="layer color-layer"></div>\n      </div>\n    ';
            ModalImage.modalContent = document.createElement('div');
            ModalImage.modalContent.className = 'project-modal__content';
            ModalImage.modalWrapper.appendChild(ModalImage.modalContent);
            ModalImage.modal.appendChild(ModalImage.modalWrapper);
            this.modal.appendChild(ModalImage.modalClose);
            ModalImage.modalWrapper.addEventListener('click', function (event) {
                event.stopPropagation();
            });
            ModalImage.modal.addEventListener('click', function (event) {
                event.currentTarget.classList.remove('project-modal_opened');
                ModalImage._closePopup();
            });
            //ModalImage.modal.addEventListener( animationEvent, event => {
            //  if ( this.modal.classList.contains( 'image-popup_closed' ) ) {
            //    this._clearPopup();
            //    this.modal.classList.remove( 'image-popup_closed' );
            //    this.isAnimated = false;
            //  } else if ( this.modal.classList.contains( 'image-popup_opened' ) ) {
            //
            //  }
            //} );
            document.body.appendChild(ModalImage.modal);
        }
    }, {
        key: '_closePopup',
        value: function _closePopup() {
            ModalImage.modal.classList.remove('project-popup_opened');
            var imageLink = ModalImage.currentImageLink;
            var closeModal = function closeModal() {
                ModalImage._clearModal();
                ModalImage.modal.removeEventListener(_transitionEvent.transitionEvent, closeModal);
                imageLink.style.transition = '';
                imageLink.style.webkitTransition = '';
            };
            ModalImage.modal.addEventListener(_transitionEvent.transitionEvent, closeModal);
            imageLink.style.transition = 'opacity .2s ease';
            imageLink.style.webkitTransition = 'opacity .2s ease';
            imageLink.style.opacity = '';
        }
    }, {
        key: '_clearModal',
        value: function _clearModal() {
            ModalImage.modalContent.innerHTML = '';
        }
    }]);

    return ModalImage;
}();

/***/ }),

/***/ 171:
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
// Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
    var t,
        el = document.createElement('fakeelement');
    var transitions = {
        'transition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    };
    for (t in transitions) {
        if (el.style[t] !== undefined) {
            return transitions[t];
        }
    }
}
var transitionEvent = exports.transitionEvent = whichTransitionEvent();

/***/ })

}]);