\n
\n `;\n\t}\n\n\t_createModal({\n\t\ttemplate,\n\t\tonDismiss\n\t}) {\n\n\t\tif (!template) {\n\t\t\treturn false;\n\t\t}\n\n\t\tlet $modal;\n\t\twindow.$body.append(template);\n\t\t$modal = $('#modalContactForm');\n\n\t\t$modal.modal('show');\n\t\t$modal.on('hidden.bs.modal', () => {\n\t\t\tif (typeof onDismiss === 'function') {\n\t\t\t\tonDismiss();\n\t\t\t}\n\t\t\t$modal.modal('dispose').remove();\n\t\t});\n\t}\n\n}\n","/* ======================================================================== */\n/* 39. FormAJAX */\n/* ======================================================================== */\nclass FormAJAX extends Form {\n\n constructor(options) {\n super(options);\n this.inputClassError = 'form__error';\n this.method = this.$target.attr('method');\n this.action = this.$target.attr('action');\n this.messages = {\n success: this.$target.attr('data-message-success'),\n error: this.$target.attr('data-message-error')\n };\n this._validate();\n }\n\n _validate() {\n const self = this;\n\n this.$target.validate({\n errorElement: 'span',\n errorPlacement: (error, element) => {\n error.appendTo(element.parent()).addClass(self.inputClassError);\n },\n submitHandler: (form) => {\n self._submit(form);\n }\n });\n }\n\n _submit() {\n const self = this;\n\n $.ajax({\n type: self.$target.attr('method'),\n url: self.$target.attr('action'),\n data: self.$target.serialize()\n }).done(() => {\n self._createModal({\n template: self._getModalTemplate({\n icon: './img/general/icon-success.svg',\n message: self.messages.success\n }),\n onDismiss: () => {\n self.$target.trigger('reset');\n self._floatLabels();\n }\n });\n }).fail(() => {\n self._createModal({\n template: self._getModalTemplate({\n icon: './img/general/icon-error.svg',\n message: self.messages.error\n })\n });\n });\n }\n\n}\n","/* ======================================================================== */\n/* 40. gmap */\n/* ======================================================================== */\nclass GMap extends BaseComponent {\n\n\tconstructor({\n\t\tscope,\n\t\ttarget\n\t}) {\n\t\tsuper({\n\t\t\tscope,\n\t\t\ttarget\n\t\t});\n\t}\n\n\tset() {\n\t\tthis.prevInfoWindow = false;\n\t\tthis.$container = this.$target.find('.gmap__container');\n\t\tthis.$markers = this.$target.find('.gmap__marker');\n\n\t\tthis.zoom = parseInt(this.$target.data('gmap-zoom'));\n\t\tthis.styles = this._parseStyles(this.$target.attr('data-gmap-snazzy-styles'));\n\t}\n\n\trun() {\n\t\tif (typeof window.google !== 'undefined' && typeof window.google.maps !== 'undefined' && this.$container.length) {\n\t\t\tthis._createMap();\n\t\t}\n\t}\n\n\t_parseStyles(styles) {\n\t\tif (!styles) {\n\t\t\treturn false;\n\t\t}\n\n\t\ttry {\n\t\t\treturn JSON.parse(styles);\n\t\t} catch (err) {\n\t\t\tconsole.error('Google Map: Invalid Snazzy Styles Array!');\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t_createMap() {\n\n\t\tconst\n\t\t\tself = this,\n\t\t\targsMap = {\n\t\t\t\tcenter: new google.maps.LatLng(0, 0),\n\t\t\t\tzoom: this.zoom,\n\t\t\t\tscrollwheel: false\n\t\t\t};\n\n\t\tif (this.styles) {\n\t\t\t$.extend(argsMap, {\n\t\t\t\tstyles: this.styles\n\t\t\t});\n\t\t}\n\n\t\tthis.map = new google.maps.Map(this.$container[0], argsMap);\n\t\tthis.map.markers = [];\n\n\t\tthis.$markers.each(function () {\n\t\t\tself._createMarker($(this));\n\t\t});\n\n\t\tthis._centerMap(this.zoom);\n\t}\n\n\t_createMarker($marker) {\n\n\t\tif (!$marker.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst\n\t\t\tMARKER_LAT = parseFloat($marker.attr('data-marker-lat')),\n\t\t\tMARKER_LON = parseFloat($marker.attr('data-marker-lon')),\n\t\t\tMARKER_IMG = $marker.attr('data-marker-img'),\n\t\t\tMARKER_WIDTH = $marker.attr('data-marker-width'),\n\t\t\tMARKER_HEIGHT = $marker.attr('data-marker-height'),\n\t\t\tMARKER_CONTENT = $marker.attr('data-marker-content');\n\n\t\tlet marker;\n\n\t\t/**\n\t\t * Marker\n\t\t */\n\t\tconst argsMarker = {\n\t\t\tposition: new google.maps.LatLng(MARKER_LAT, MARKER_LON),\n\t\t\tmap: this.map\n\t\t};\n\n\t\tif (MARKER_IMG) {\n\t\t\t$.extend(argsMarker, {\n\t\t\t\ticon: {\n\t\t\t\t\turl: MARKER_IMG\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tif (MARKER_IMG && MARKER_WIDTH && MARKER_HEIGHT) {\n\t\t\t$.extend(argsMarker.icon, {\n\t\t\t\tscaledSize: new google.maps.Size(MARKER_WIDTH, MARKER_HEIGHT)\n\t\t\t});\n\t\t}\n\n\t\tmarker = new google.maps.Marker(argsMarker);\n\t\tthis.map.markers.push(marker);\n\n\t\t/**\n\t\t * Info Window (Content)\n\t\t */\n\t\tthis._createInfoWindow({\n\t\t\tmarker,\n\t\t\tcontent: MARKER_CONTENT\n\t\t});\n\n\t}\n\n\t_createInfoWindow({\n\t\tmarker,\n\t\tcontent = ''\n\t}) {\n\t\tif (content) {\n\t\t\tconst infoWindow = new google.maps.InfoWindow({\n\t\t\t\tcontent: content\n\t\t\t});\n\n\t\t\tmarker.addListener('click', () => {\n\t\t\t\tif (this.prevInfoWindow) {\n\t\t\t\t\tthis.prevInfoWindow.close();\n\t\t\t\t}\n\n\t\t\t\tthis.prevInfoWindow = infoWindow;\n\n\t\t\t\tinfoWindow.open(this.map, marker);\n\t\t\t});\n\t\t}\n\t}\n\n\t_centerMap(zoom) {\n\t\tconst bounds = new google.maps.LatLngBounds();\n\n\t\t$.each(this.map.markers, function () {\n\t\t\tconst item = this;\n\n\t\t\tif (typeof item.position !== 'undefined') {\n\n\t\t\t\tconst\n\t\t\t\t\tlat = item.position.lat(),\n\t\t\t\t\tlng = item.position.lng(),\n\t\t\t\t\tnewZoom = new google.maps.LatLng(lat, lng);\n\n\t\t\t\tbounds.extend(newZoom);\n\t\t\t}\n\t\t});\n\n\t\t// center single marker\n\t\tif (this.map.markers.length == 1) {\n\t\t\tthis.map.setCenter(bounds.getCenter());\n\t\t\tthis.map.setZoom(zoom);\n\t\t} else { // fit bounds to multiple markers\n\t\t\tthis.map.fitBounds(bounds);\n\t\t}\n\t}\n}\n","/* ======================================================================== */\n/* 41. grid */\n/* ======================================================================== */\nclass Grid extends BaseComponent {\n\n constructor({\n target,\n scope\n }) {\n super({\n target,\n scope\n });\n this.lazyInstance = new LazyLoad({\n scope\n });\n this.$lazyImages = this.$target.find('img[data-src]');\n this.isotopeInstance;\n this._layoutImages();\n this._layoutLazyImages();\n\n return this.isotopeInstance;\n }\n\n run() {\n this.isotopeInstance = this.$target.isotope({\n itemSelector: '.js-grid__item',\n columnWidth: '.js-grid__sizer',\n percentPosition: true,\n horizontalOrder: true,\n });\n }\n\n _layoutImages() {\n this.$target\n .imagesLoaded()\n .progress(() => {\n this.isotopeInstance.isotope('layout');\n })\n .done(() => {\n setTimeout(() => {\n this.isotopeInstance.isotope('layout');\n }, 300);\n });\n }\n\n _layoutLazyImages() {\n this.lazyInstance.loadImages({\n target: this.$lazyImages,\n callback: () => {\n this._layoutImages();\n }\n });\n }\n\n}\n","/* ======================================================================== */\n/* 42. Header */\n/* ======================================================================== */\nclass Header {\n constructor() {\n this.$header = $('#page-header');\n this.$controls = this.$header.find('.header__controls');\n this.$stickyHeader = this.$header.filter('.js-header-sticky');\n this.$adminBar = $('#wpadminbar');\n this.$burger = $('#js-burger');\n this.$curtain = $('#js-header-curtain');\n this.$curtainTransition = $('#js-header-curtain-transition');\n this.$overlay = $('.header__wrapper-overlay-menu');\n this.burgerOpenClass = 'header__burger_opened';\n this.$headerColumns = this.$header.find('.header__col');\n this.$headerLeft = this.$header.find('.header__col-left');\n this.$overlayWidgets = this.$header.find('.header__wrapper-overlay-widgets');\n\n // Menu\n this.$menuOverlay = this.$overlay.find('.js-menu-overlay');\n this.$menuLinks = this.$overlay.find('.menu-overlay > li > a');\n this.selectedClass = 'selected';\n this.openClass = 'opened';\n\n // Submenu\n this.$submenu = this.$overlay.find('.menu-overlay .sub-menu');\n this.$submenuButton = $('#js-submenu-back');\n this.$submenuOpeners = this.$overlay.find('.menu-item-has-children > a');\n this.$submenuLinks = this.$submenu.find('> li > a');\n\n // Sticky\n this.stickyScene = undefined;\n this.stickyClass = 'header_sticky';\n\n this.setMenu();\n this.run();\n }\n\n run() {\n this.overlayBackground = this.$header.attr('data-arts-header-overlay-background');\n this.stickyTheme = this.$stickyHeader.attr('data-arts-header-sticky-theme');\n\n if (typeof this.stickyScene !== 'undefined') {\n this.stickyScene.destroy(true);\n }\n\n this.timeline = new gsap.timeline();\n\n this._correctTopOffset();\n this._stick();\n this._bindEvents();\n }\n\n setBurger(open = false) {\n if (open) {\n this.$header.addClass(this.openClass);\n this.$burger.addClass(this.burgerOpenClass);\n } else {\n this.$header.removeClass(this.openClass);\n this.$burger.removeClass(this.burgerOpenClass);\n }\n }\n\n setMenu() {\n \n if (this.$overlay.length) {\n gsap.set(this.$overlay, {\n autoAlpha: 0,\n display: 'none'\n });\n }\n if (this.$submenu.length) {\n gsap.set(this.$submenu, {\n autoAlpha: 0\n });\n }\n \n if (this.$submenuButton.length) {\n gsap.set(this.$submenuButton, {\n autoAlpha: 0\n });\n }\n \n this.$submenu.removeClass(this.openClass);\n this.$header.removeClass(this.openClass);\n this.$burger.removeClass(this.burgerOpenClass);\n \n if (this.$menuLinks.length) {\n gsap.effects.hideLines(this.$menuLinks, {\n autoAlpha: 1,\n y: '-100%',\n duration: 0,\n });\n }\n \n if (this.$submenuLinks.length) {\n gsap.effects.hideLines(this.$submenuLinks, {\n autoAlpha: 1,\n y: '-100%',\n duration: 0,\n });\n }\n \n if (this.$overlayWidgets.length) {\n gsap.effects.hideLines(this.$overlayWidgets, {\n autoAlpha: 1,\n y: this._isMediumScreen() ? '-100%' : '100%',\n duration: 0\n });\n }\n \n if (this.$curtain.length) {\n gsap.set(this.$curtain, {\n display: 'none'\n });\n }\n \n }\n\n openMenu() {\n return this.timeline\n .clear()\n .set(this.$curtain, {\n display: 'block',\n })\n .setCurtain(this.$curtain, {\n background: this.overlayBackground,\n y: '100%'\n })\n .set(this.$overlay, {\n autoAlpha: 1,\n display: 'flex'\n })\n .add([() => {\n this._setTransition(true);\n this._unstick();\n\n }])\n .set(this.$adminBar, {\n position: 'fixed',\n })\n .to(this.$headerLeft, {\n duration: 1.2,\n x: 30,\n autoAlpha: 0,\n ease: 'expo.inOut'\n }, 'start')\n .moveCurtain(this.$curtain, {\n duration: 1.2,\n y: '0%',\n }, 'start')\n .add(() => {\n this.$header.addClass(this.openClass);\n }, '-=0.6')\n .add([\n gsap.effects.animateLines(this.$menuLinks, {\n stagger: {\n amount: 0.2,\n from: 'end'\n },\n duration: 1.2,\n ease: 'power4.out'\n }),\n gsap.effects.animateLines(this.$overlayWidgets, {\n stagger: {\n amount: 0.2,\n from: this._isMediumScreen() ? 'end' : 'start'\n },\n duration: 1.2,\n ease: 'power4.out'\n })\n ], '-=0.6')\n .add(() => {\n this._setTransition(false);\n }, '-=0.6')\n .timeScale(window.theme.animations.timeScale.overlayMenuOpen || 1);\n }\n\n closeMenu(force = false) {\n\n if (!this.$header.hasClass(this.openClass) && !force) {\n return this.timeline;\n }\n\n const\n $submenuLinksCurrent = this.$submenu.filter(`.${this.openClass}`).find(this.$submenuLinks);\n\n return this.timeline\n .clear()\n .add(() => {\n this._setTransition(true);\n this._stick();\n\n if (typeof window.SB !== 'undefined' && window.SB.offset.y >= 1) {\n this.$stickyHeader.addClass(this.stickyClass);\n }\n })\n .to(this.$headerLeft, {\n duration: 1.2,\n x: 0,\n autoAlpha: 1,\n ease: 'expo.inOut'\n }, 'start')\n .to(this.$submenuButton, {\n x: -10,\n autoAlpha: 0,\n duration: 0.3,\n ease: 'expo.inOut'\n }, 'start')\n .moveCurtain(this.$curtain, {\n duration: 1.2,\n y: '-100%',\n curve: 'bottom'\n }, 'start')\n .add(() => {\n this.$header.removeClass(this.openClass);\n }, '-=0.9')\n .add(gsap.effects.hideLines([$submenuLinksCurrent, this.$menuLinks, this.$overlayWidgets], {\n stagger: {\n amount: 0,\n from: 'end'\n },\n y: '100%',\n duration: 0.6,\n }), 'start')\n .add(() => {\n this.$header.attr('data-arts-header-animation', '');\n }, '-=0.3')\n .add(() => {\n this.setMenu();\n })\n .timeScale(window.theme.animations.timeScale.overlayMenuClose || 1);\n }\n\n closeMenuTransition(force = false) {\n\n if (!this.$header.hasClass(this.openClass) && !force) {\n return this.timeline;\n }\n\n const\n $submenuLinksCurrent = this.$submenu.filter(`.${this.openClass}`).find(this.$submenuLinks);\n\n return this.timeline\n .clear()\n .add(() => {\n this._setTransition(true);\n // Scroll.restoreScrollTop();\n this._stick();\n\n if (typeof window.SB !== 'undefined' && window.SB.offset.y >= 1) {\n this.$stickyHeader.addClass(this.stickyClass);\n }\n })\n .to(this.$headerLeft, {\n duration: 1.2,\n x: 0,\n autoAlpha: 1,\n ease: 'expo.inOut'\n }, 'start')\n .to(this.$submenuButton, {\n x: -10,\n autoAlpha: 0,\n duration: 0.3,\n ease: 'expo.inOut'\n }, 'start')\n .add(() => {\n this.$header.removeClass(this.openClass);\n }, '-=0.9')\n .add(gsap.effects.hideLines([$submenuLinksCurrent, this.$menuLinks, this.$overlayWidgets], {\n stagger: {\n amount: 0,\n from: 'end'\n },\n y: '100%',\n duration: 0.6,\n }), 'start')\n .add(() => {\n this.$header.attr('data-arts-header-animation', '');\n }, '-=0.3')\n .add(() => {\n this.setMenu();\n });\n }\n\n _bindEvents() {\n const self = this;\n\n if (this.$adminBar.length) {\n window.$window.on('resize', debounce(this._correctTopOffset, 250));\n }\n\n if (this.$burger.length) {\n this.$burger.off('click').on('click', (e) => {\n e.preventDefault();\n\n if (this._isInTransition()) {\n return;\n }\n\n if (this.$burger.hasClass(this.burgerOpenClass)) {\n this.closeMenu();\n this.$burger.removeClass(this.burgerOpenClass);\n } else {\n this.openMenu();\n this.$burger.addClass(this.burgerOpenClass);\n }\n });\n }\n\n if (this.$submenuOpeners.length) {\n this.$submenuOpeners.on('click', function (e) {\n e.preventDefault();\n\n if (self._isInTransition()) {\n return;\n }\n\n const\n $el = $(this),\n $currentMenu = $el.parents('ul'),\n $submenu = $el.next('.sub-menu');\n\n $el.addClass(self.linkSelectedClass);\n\n self._openSubmenu({\n submenu: $submenu,\n currentMenu: $currentMenu\n });\n });\n }\n\n if (this.$submenuButton.length) {\n this.$submenuButton.on('click', (e) => {\n e.preventDefault();\n\n if (self._isInTransition()) {\n return;\n }\n\n const $submenu = this.$submenu.filter(`.${this.openClass}`),\n $prevMenu = $submenu.parent('li').parent('ul');\n\n self._closeSubmenu({\n submenu: $submenu,\n currentMenu: $prevMenu\n });\n });\n }\n\n window.$window\n .on('arts/preloader/end', () => {\n gsap.to(this.$headerColumns, {\n autoAlpha: 1,\n stagger: 0.2,\n duration: 0.6\n });\n })\n .on('arts/barba/transition/start', () => {\n this.$controls.addClass('pointer-events-none');\n this._unstick();\n })\n .on('arts/barba/transition/end', () => {\n this.$controls.removeClass('pointer-events-none');\n });\n }\n\n isOverlayOpened() {\n return this.$header.hasClass(this.openClass);\n }\n\n _isMediumScreen() {\n return window.Modernizr.mq('(max-width: 991px)');\n }\n\n _isInTransition() {\n return this.$header.attr('data-arts-header-animation') === 'intransition';\n }\n\n _setTransition(inTransition = true) {\n return this.$header.attr('data-arts-header-animation', inTransition ? 'intransition' : '');\n }\n\n _correctTopOffset() {\n const top = this.$adminBar.height() || 0;\n\n gsap.to(this.$header, {\n duration: 0.6,\n top\n });\n }\n\n _stick() {\n if (!this.$stickyHeader.length) {\n return;\n }\n\n this.stickyScene = new $.ScrollMagic.Scene({\n offset: '1px',\n })\n .setClassToggle(this.$stickyHeader, [this.stickyTheme, this.stickyClass].join(' '))\n .addTo(window.SMController);\n }\n\n _unstick() {\n if (!this.$stickyHeader.length || !this.stickyScene) {\n return;\n }\n\n this.stickyScene.destroy(true);\n this.stickyScene = undefined;\n this.$stickyHeader.removeClass(this.stickyClass);\n }\n\n _openSubmenu({\n submenu,\n currentMenu\n }) {\n const\n $currentLinks = currentMenu.find('> li > a .menu-overlay__item-wrapper'),\n $submenuLinks = submenu.find('> li > a .menu-overlay__item-wrapper');\n\n this.timeline\n .clear()\n .add(() => {\n this._setTransition(true);\n this.$submenu.removeClass(this.openClass);\n submenu.not(this.$menuOverlay).addClass(this.openClass);\n\n if (this.$submenu.hasClass(this.openClass)) {\n gsap.to(this.$submenuButton, {\n autoAlpha: 1,\n x: 0,\n duration: 0.3\n });\n\n if (this._isMediumScreen()) {\n gsap.effects.hideLines(this.$overlayWidgets, {\n stagger: {\n amount: 0.1,\n from: 'end'\n },\n y: '100%',\n duration: 1.2,\n ease: 'power4.out',\n });\n }\n } else {\n gsap.to(this.$submenuButton, {\n autoAlpha: 0,\n x: -10,\n duration: 0.3\n });\n\n gsap.effects.animateLines(this.$overlayWidgets, {\n stagger: {\n amount: 0.2,\n from: 'end'\n },\n duration: 1.2,\n ease: 'power4.out',\n });\n }\n })\n .set(submenu, {\n autoAlpha: 1,\n zIndex: 100\n })\n .add(gsap.effects.hideLines($currentLinks, {\n stagger: {\n amount: 0.2,\n from: 'end'\n },\n y: '100%',\n duration: 1.2,\n ease: 'power4.out'\n }))\n .add(gsap.effects.animateLines($submenuLinks, {\n stagger: {\n amount: 0.2,\n from: 'end'\n },\n duration: 1.2,\n ease: 'power4.out'\n }), '-=1.0')\n .add(() => {\n this.$menuLinks.removeClass(this.openClass);\n this._setTransition(false);\n }, '-=0.6')\n .timeScale(1.25);\n }\n\n _closeSubmenu({\n submenu,\n currentMenu\n }) {\n const\n $currentLinks = currentMenu.find('> li > a .menu-overlay__item-wrapper'),\n $submenuLinks = submenu.find('> li > a .menu-overlay__item-wrapper');\n\n this.timeline\n .clear()\n .add(() => {\n this._setTransition(true);\n this.$submenu.removeClass(this.openClass);\n currentMenu.not(this.$menuOverlay).addClass(this.openClass);\n\n if (this.$submenu.hasClass(this.openClass)) {\n gsap.to(this.$submenuButton, {\n autoAlpha: 1,\n x: 0,\n duration: 0.3\n });\n\n if (this._isMediumScreen()) {\n gsap.effects.hideLines(this.$overlayWidgets, {\n stagger: {\n amount: 0.1,\n from: 'start'\n },\n y: '100%',\n duration: 1.2,\n ease: 'power4.out',\n });\n }\n } else {\n gsap.to(this.$submenuButton, {\n autoAlpha: 0,\n x: -10,\n duration: 0.3\n });\n\n gsap.effects.animateLines(this.$overlayWidgets, {\n stagger: {\n amount: 0.2,\n from: 'start'\n },\n duration: 1.2,\n ease: 'power4.out',\n });\n }\n })\n .set(submenu, {\n zIndex: -1\n })\n .add(gsap.effects.animateLines($currentLinks, {\n y: '100%',\n duration: 0\n }), 'start')\n .add(gsap.effects.hideLines($submenuLinks, {\n stagger: {\n amount: 0.1,\n from: 'start'\n },\n y: '-100%',\n duration: 1.2,\n ease: 'power4.out'\n }))\n .add(\n gsap.effects.animateLines($currentLinks, {\n stagger: {\n amount: 0.2,\n from: 'start'\n },\n duration: 1.2,\n ease: 'power4.out'\n }), '-=1.0')\n .set(submenu, {\n autoAlpha: 0,\n })\n .add(() => {\n this._setTransition(false);\n }, '-=0.6')\n .timeScale(1.25);\n }\n}\n","/* ======================================================================== */\n/* 43. lazyLoad */\n/* ======================================================================== */\nclass LazyLoad {\n\tconstructor({\n\t\tscope,\n\t\tsetPaddingBottom = false,\n\t\trun = false\n\t}) {\n\t\tthis.$scope = scope || window.$document;\n\t\tthis.$images = this.$scope.find('img[data-src]:not(.swiper-lazy)');\n\t\tthis.$backgrounds = this.$scope.find('.lazy-bg[data-src]');\n\n\t\tif (setPaddingBottom) {\n\t\t\tthis.setPaddingBottom();\n\t\t}\n\n\t\tif (run) {\n\t\t\tthis.run();\n\t\t}\n\n\t\tthis._bindEvents();\n\n\t}\n\n\t_bindEvents() {\n\t\twindow.$window.on('arts/barba/transition/start arts/barba/transition/end arts/grid/filter', () => {\n\t\t\tthis.run();\n\t\t});\n\t}\n\n\tsetPaddingBottom() {\n\t\tthis.$images.each(function () {\n\t\t\tconst $el = $(this),\n\t\t\t\t$elParent = $el.parent(),\n\t\t\t\telWidth = $el.attr('width') || 0,\n\t\t\t\telHeight = $el.attr('height') || 0,\n\t\t\t\telPB = parseFloat((elHeight / elWidth) * 100); // padding-bottom hack\n\n\t\t\t// we need both width and height of element\n\t\t\t// to calculate proper value for \"padding-bottom\" hack\n\t\t\tif (!elWidth || !elHeight) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// position image absolutely\n\t\t\tgsap.set($el, {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t});\n\n\t\t\t// set padding-bottom to the parent element so it will\n\t\t\t// create the needed space for the image\n\t\t\tgsap.set($elParent, {\n\t\t\t\tposition: 'relative',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tpaddingBottom: elPB + '%'\n\t\t\t});\n\t\t});\n\t}\n\n\trun() {\n\t\tthis.loadImages({\n\t\t\ttarget: this.$images\n\t\t});\n\t\tthis.loadBackgrounds({\n\t\t\ttarget: this.$backgrounds\n\t\t});\n\t}\n\n\tloadBackgrounds({\n\t\ttarget,\n\t\tcallback\n\t}) {\n\t\tif (target && target.length) {\n\t\t\tconst instance = target.Lazy({\n\t\t\t\tthreshold: 1000,\n\t\t\t\tchainable: false,\n\t\t\t\tafterLoad: (el) => {\n\t\t\t\t\t$(el).addClass('lazy-bg_loaded');\n\n\t\t\t\t\tif (typeof callback === 'function') {\n\t\t\t\t\t\tcallback();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tsetTimeout(() => {\n\t\t\t\tinstance.update();\n\t\t\t}, 50);\n\t\t}\n\t}\n\n\tloadImages({\n\t\ttarget,\n\t\tcallback\n\t}) {\n\t\tif (target && target.length) {\n\t\t\tconst instance = target.Lazy({\n\t\t\t\tthreshold: 1000,\n\t\t\t\tchainable: false,\n\t\t\t\tafterLoad: (el) => {\n\t\t\t\t\tconst\n\t\t\t\t\t\t$el = $(el),\n\t\t\t\t\t\t$elParent = $el.parent();\n\n\t\t\t\t\t$el.imagesLoaded({\n\t\t\t\t\t\tbackground: true\n\t\t\t\t\t}).always(() => {\n\t\t\t\t\t\t$elParent.addClass('lazy_loaded');\n\t\t\t\t\t});\n\n\t\t\t\t\tif (typeof callback === 'function') {\n\t\t\t\t\t\tcallback();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tsetTimeout(() => {\n\t\t\t\tinstance.update();\n\t\t\t}, 50);\n\t\t}\n\t}\n}\n","/* ======================================================================== */\n/* 44. Magnetic */\n/* ======================================================================== */\nclass Magnetic extends BaseComponent {\n\n\tconstructor({\n\t\tscope,\n\t\ttarget,\n\t\tdistance\n\t}) {\n\t\tsuper({\n\t\t\ttarget,\n\t\t\tscope\n\t\t});\n\t\tthis.defaultDistance = 40;\n\t\tthis.distance = distance || this.defaultDistance;\n\t}\n\n\trun() {\n\t\tthis._bindEvents();\n\t}\n\n\t_bindEvents() {\n\t\tconst self = this;\n\n\t\tthis.$scope.on('mousemove', (event) => {\n\t\t\tthis.$target.each(function () {\n\t\t\t\tconst $el = $(this);\n\n\t\t\t\tself._magnifyElement({\n\t\t\t\t\telement: $el,\n\t\t\t\t\tevent,\n\t\t\t\t\tdistance: $el.data('arts-magnetic-distance') || self.distance\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t_magnifyElement({\n\t\telement,\n\t\tevent,\n\t\tdistance\n\t}) {\n\n\t\tconst\n\t\t\tcenterX = element.offset().left + element.width() / 2,\n\t\t\tcenterY = element.offset().top + element.height() / 2,\n\t\t\tdeltaX = Math.floor((centerX - event.pageX)) * -.5,\n\t\t\tdeltaY = Math.floor((centerY - event.pageY)) * -.5,\n\t\t\ttargetDistance = this._calcDistance({\n\t\t\t\telement: element,\n\t\t\t\tmouseX: event.pageX,\n\t\t\t\tmouseY: event.pageY\n\t\t\t});\n\n\t\tif (targetDistance < distance) {\n\t\t\tgsap.to(element, {\n\t\t\t\tduration: 0.3,\n\t\t\t\ty: deltaY,\n\t\t\t\tx: deltaX\n\t\t\t});\n\t\t} else {\n\t\t\tgsap.to(element, {\n\t\t\t\tduration: 0.3,\n\t\t\t\ty: 0,\n\t\t\t\tx: 0\n\t\t\t});\n\t\t}\n\n\t}\n\n\t_calcDistance({\n\t\telement,\n\t\tmouseX,\n\t\tmouseY\n\t}) {\n\t\treturn Math.floor(Math.sqrt(Math.pow(mouseX - (element.offset().left + (element.width() / 2)), 2) + Math.pow(mouseY - (element.offset().top + (element.height() / 2)), 2)));\n\t}\n\n}\n","/* ======================================================================== */\n/* 45. PageIndicator */\n/* ======================================================================== */\nconst PageIndicator = function ($scope) {\n\n\tconst\n\t\t$target = $scope.find('.js-page-indicator'),\n\t\t$triggers = $scope.find('.js-page-indicator-trigger');\n\n\tif (!$target.length) {\n\t\treturn;\n\t}\n\n\t$triggers.each(function () {\n\n\t\tlet $current = $(this);\n\n\t\t$current\n\t\t\t.on('mouseenter touchstart', function () {\n\n\t\t\t})\n\t\t\t.on('mouseleave touchend', function () {\n\n\t\t\t});\n\n\t});\n\n}\n","/* ======================================================================== */\n/* 46. ArtsParallax */\n/* ======================================================================== */\nclass ArtsParallax {\n\n constructor({\n target,\n factor,\n ScrollMagicController,\n SmoothScrollBarController,\n }) {\n this.$target = target;\n this.factor = factor || 0.3;\n this.SMController = ScrollMagicController;\n this.SBController = SmoothScrollBarController;\n this.run();\n }\n\n run() {\n const self = this;\n\n this.$target.each(function () {\n const\n $el = $(this),\n $parallaxTarget = $el.find('> *').length ? $el.find('> *') : $el,\n distanceToY = $el.data('arts-parallax-y') || 0,\n distanceToX = $el.data('arts-parallax-x') || 0,\n factorEl = parseFloat($el.data('arts-parallax-factor')) || parseFloat(self.factor);\n\n let\n tl = new gsap.timeline(),\n factorScale = 1 + Math.abs(factorEl),\n factorTo = Math.abs(factorEl) * 100,\n factorFrom = -1 * Math.abs(factorEl) * 100,\n sceneDuration = window.innerHeight + $parallaxTarget.height() * (factorScale * 2);\n\n // wrong calculated height\n if (sceneDuration - window.innerHeight < 50) {\n sceneDuration = window.innerHeight + $el.parent().height() * (factorScale * 2);\n }\n\n if (!$parallaxTarget.length && !distanceToX && !distanceToY) {\n return;\n }\n\n if (factorFrom > 0) {\n factorScale = factorScale * factorScale;\n factorTo = self.factor * 100;\n }\n\n // normal element (no scale)\n if ($el.data('arts-parallax') === 'element') {\n tl = self._getParallaxTimeline({\n element: $el,\n toY: distanceToY,\n toX: distanceToX\n });\n } else { // background or \n
\n \n ![](\"./img/general/icon-close.svg\"/)
\n \n ![\"\"/](\"${icon}\")
\n \n \n \n
\n