{"version":3,"file":"wcf-addons-pro.js","names":["$","adminbar_height","height","fn","wcf_tilt","options","_this","settings","extend","maxTilt","perspective","easing","scale","speed","reset","css","transition","concat","each","index","item","mousemove","e","cx","window","innerWidth","cy","innerHeight","dx","clientX","dy","clientY","tiltx","tilty","transform","mouseleave","on","device_width","width","elementorBreakpoints","elementorFrontend","config","responsive","activeBreakpoints","Modules","elementorModules","frontend","handlers","Base","gsap","_typeof","gsap_mm","matchMedia","horizontal_scroll","bindEvents","run","isEdit","getElementSettings","sections","$element","children","element","hasClass","length","addClass","match_media_key","breakpoint","value","to","xPercent","ease","scrollTrigger","trigger","pin","scrub","add","hover_image","find","append","setTimeout","image","mouseenter","delay","duration","autoAlpha","contentBox","getBoundingClientRect","x","y","set","mouse_move_effect","move_area","move_effect","getTypedValue","isNaN","Number","moveX","moveY","customConfig","get_custom_config","windowWidth","windowHeight","xPosPercent","yPosPercent","defaults","Object","assign","_this2","custom","data","properties","split","map","el","replace","property","filter","f","l","hooks","addAction","$scope","elementsHandler","addHandler","cursor_hover_effect","widget_id","getID","text","cursor","prepend","getWidgetType","findElement","yPercent","setCursorX","quickTo","setCursorY","tl","timeline","paused","opacity","document","play","html","reverse","_i","_arr","$skin","scroll_elements","links","images","data_navigation","data_image","start","end","pinSpacing","markers","scrollTo","autoKill","removeClass","i","section","ScrollTrigger","create","onToggle","self","isActive","onStart","_targets","cursor_enable","getKitSettings","cursor_follower","hide","show","setCursorFollowerX","setCursorFollowerY","advance_portfolio","animationSettings","animate_portfolio_content_five","animate_portfolio_content_three","animate_portfolio_content_four","animate_portfolio_content_eight","section_title","portfolioline","portfolio","t1","position","rotateX","arguments","undefined","skewSetter","clamp","utils","smoother","ScrollSmoother","smooth","smoothTouch","normalizeScroll","ignoreMobileResize","onUpdate","getVelocity","onStop","slider","go","dir","playing","up","part","next","appendChild","_objectSpread","animOptions","then","remove","down","current","slide_item","p","parts","createElement","href","attr","className","innerHTML","Math","max","wheel","clearTimeout","scrollTimeout","deltaY","querySelector","style","display","cols","main","getElementById","col","setProperty","push","Power4","easeInOut","addEventListener","alls","querySelectorAll","classList","advance_portfolio_skin","applyFilters","_iterator","_createForOfIteratorHelper","_step","s","n","done","err","advance_portfolio_nine","items","total","addFilter","new_slider","toggle_switcher","checked","toggle_pane","toggle_label","change","toggleClass","filter_gallery","mixitUp","mixitup","magnificPopup","type","wrapper_link","anchor","click","Tilt_Effect","table_of_content","getDefaultSettings","elementSettings","listWrapperTag","marker_view","selectors","widgetContainer","postContentContainer","expandButton","collapseButton","body","headerTitle","classes","listWrapper","listItem","listTextWrapper","firstLevelListItem","listItemText","activeItem","headingAnchor","collapsed","getDefaultElements","getSettings","$pageContainer","getContainer","$widgetContainer","$expandButton","$collapseButton","$tocBody","$listItems","container","jQuery","$documentWrapper","parents","getHeadings","tags","headings_by_tags","join","excludedSelectors","exclude_headings_by_selector","elements","not","heading","closest","handleNoHeadingsFound","noHeadingsText","getHeadingAnchorLink","headingID","$headings","id","wrapperID","anchorLink","setHeadingsData","_this3","headingsData","tag","nodeName","slice","textContent","addAnchorsBeforeHeadings","_this4","before","activateItem","$listItem","deactivateActiveItem","$activeItem","$activeList","parent","eq","stop","slideDown","$activeToBe","is","_this$getSettings","contains","slideUp","followAnchor","_this5","anchorSelector","hash","$anchor","decodeURIComponent","waypoint","direction","itemClicked","viewportItems","$listItemTexts","offset","triggerOnce","keys","followAnchors","_this6","populateTOC","listItemPointer","hierarchical_view","createNestedList","createFlatList","onListItemClick","bind","isEditMode","_this7","forEach","level","currentOrderedItem","getNestedLevel","icon","renderedIcon","experimentalFeatures","e_font_icon_svg","rendered_tag","currentItem","listItemTextClasses","liContent","nextItem","collapseBodyListener","_this8","minimize_box","expandBox","event","triggerClickOnEnterSpace","collapseBox","collapse_subitems","target","slideToggle","_this9","$clickedItem","$list","collapseNestedList","listIsActive","changeFocus","boxHeight","getCurrentDeviceSetting","size","unit","ENTER_KEY","SPACE_KEY","keyCode","currentTarget","stopPropagation","breakpoints","getActiveBreakpointsList","withDesktop","minimizedOn","currentDeviceMode","getCurrentDeviceMode","isCollapsed","indexOf","image_accordion","_this10","expand","accordionItems","openAccordion","single","Advanced_tooltip","onInit","content","animation","showArrow","tooltip","parseHTML","scrollToTop","progressPath","pathLength","getTotalLength","WebkitTransition","strokeDasharray","strokeDashoffset","updateProgress","scroll","scrollTop","progress","top","behavior","preloader","ready","scrollIndicator","handleScrollIndicator","maxHeight","scrollHeight","widthPercentage","scrollY","wcf_header_settings","header"],"sources":["wcf-addons-pro.js"],"sourcesContent":["/* global WCF_ADDONS_JS */\r\n(function ($) {\r\n /**\r\n * @param $scope The Widget wrapper element as a jQuery element\r\n * @param $ The jQuery alias\r\n */\r\n let adminbar_height = $('#wpadminbar').height();\r\n\r\n //tilt\r\n $.fn.wcf_tilt = function (options) {\r\n this.settings = $.extend({\r\n maxTilt: 20,\r\n perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.\r\n easing: \"cubic-bezier(.03,.98,.52,.99)\", // Easing on enter/exit.\r\n scale: 1, // 2 = 200%, 1.5 = 150%, etc..\r\n speed: 3000, // Speed of the enter/exit transition.\r\n reset: true, // If the tilt effect has to be reset on exit.\r\n }, options);\r\n\r\n $(this).css({ transition: `all ${this.settings.speed}ms ${this.settings.easing}` });\r\n\r\n $(this).each((index, item) => {\r\n\r\n $(item).mousemove((e) => {\r\n let cx = window.innerWidth / 2;\r\n let cy = window.innerHeight / 2;\r\n\r\n let dx = e.clientX - cx;\r\n let dy = e.clientY - cy;\r\n\r\n let tiltx = (dy / cy) * this.settings.maxTilt;\r\n let tilty = -(dx / cx) * this.settings.maxTilt;\r\n\r\n $(item).css({ transform: `perspective(${this.settings.perspective}px) rotateX(${tiltx}deg) rotateY(${tilty}deg) scale3d(${this.settings.scale},${this.settings.scale},${this.settings.scale})` })\r\n })\r\n\r\n if (this.settings.reset) {\r\n $(item).mouseleave((e) => {\r\n $(item).css({ transform: '' })\r\n })\r\n }\r\n })\r\n }\r\n\r\n // Make sure you run this code under Elementor.\r\n $(window).on('elementor/frontend/init', function () {\r\n const device_width = $(window).width();\r\n const elementorBreakpoints = elementorFrontend.config.responsive.activeBreakpoints;\r\n const Modules = elementorModules.frontend.handlers.Base;\r\n\r\n\r\n //gsap related\r\n if ('object' === typeof gsap) {\r\n\r\n let gsap_mm = gsap.matchMedia();\r\n\r\n //horizontal scroll\r\n const horizontal_scroll = Modules.extend({\r\n bindEvents: function bindEvents() {\r\n this.run();\r\n },\r\n\r\n run: function run() {\r\n\r\n if (this.isEdit) {\r\n return;\r\n }\r\n\r\n if ('yes' !== this.getElementSettings('wcf_enable_horizontal_scroll')) {\r\n return;\r\n }\r\n\r\n let sections = this.$element.children();\r\n let element = this.$element;\r\n let width = this.getElementSettings('horizontal_scroll_width');\r\n width = width['size'] + width['unit'];\r\n\r\n if (this.$element.hasClass('e-con-boxed')) {\r\n element = this.$element.children();\r\n sections = this.$element.children('.e-con-inner').children();\r\n }\r\n if (!sections.length) {\r\n return\r\n }\r\n element.addClass('wcf-horizontal-scroll')\r\n\r\n let match_media_key = 'all';\r\n\r\n //if has min max key\r\n if (this.getElementSettings('horizontal_scroll_breakpoint')) {\r\n const breakpoint = elementorBreakpoints[this.getElementSettings('horizontal_scroll_breakpoint')].value + 1;\r\n match_media_key = 'min-width: ' + breakpoint + 'px';\r\n }\r\n\r\n if ('all' === match_media_key) {\r\n element.css({ 'width': width, 'max-width': width, 'transition': 'none', 'height': '100%' });\r\n sections.css({ 'transition': 'none', 'height': '100%' })\r\n gsap.to(sections, {\r\n xPercent: -100 * (sections.length - 1),\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: element,\r\n pin: true,\r\n scrub: 1,\r\n // // base vertical scrolling on how wide the container is so it feels more natural.\r\n // end: \"+=3500\", if height is not vh create an extra space\r\n }\r\n });\r\n return () => {\r\n // custom cleanup code here (runs when it STOPS matching)\r\n element.css({\r\n 'width': 'var(--width)',\r\n 'max-width': 'min(100%,var(--width))',\r\n 'height': 'auto'\r\n });\r\n };\r\n } else {\r\n gsap_mm.add(`(${match_media_key})`, () => {\r\n element.css({\r\n 'width': width,\r\n 'max-width': width,\r\n 'transition': 'none',\r\n 'height': '100%'\r\n });\r\n sections.css({ 'transition': 'none', 'height': '100%' })\r\n gsap.to(sections, {\r\n xPercent: -100 * (sections.length - 1),\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: element,\r\n pin: true,\r\n scrub: 1,\r\n // // base vertical scrolling on how wide the container is so it feels more natural.\r\n // end: \"+=3500\", if height is not vh create an extra space\r\n }\r\n });\r\n return () => {\r\n // custom cleanup code here (runs when it STOPS matching)\r\n element.css({\r\n 'width': 'var(--width)',\r\n 'max-width': 'min(100%,var(--width))',\r\n 'height': 'auto'\r\n });\r\n };\r\n });\r\n }\r\n },\r\n });\r\n\r\n //image hover effect\r\n const hover_image = Modules.extend({\r\n bindEvents: function bindEvents() {\r\n this.run();\r\n },\r\n\r\n run: function run() {\r\n if (this.getElementSettings('wcf_enable_hover_image')) {\r\n\r\n if (this.isEdit && !this.getElementSettings('wcf_enable_hover_image_editor')) {\r\n return;\r\n }\r\n\r\n const element = $(this.$element);\r\n\r\n if (0 === element.find('.wcf-image-hover').length) {\r\n element.append('
');\r\n }\r\n\r\n setTimeout(() => {\r\n\r\n const image = $(element.find('.wcf-image-hover'));\r\n\r\n $(element).mouseenter(function (e) {\r\n gsap.to(image, { delay: 0, duration: 0, autoAlpha: 1 })\r\n });\r\n\r\n $(element).mouseleave(function (e) {\r\n gsap.to(image, { delay: 0, duration: 0, autoAlpha: 0 })\r\n });\r\n\r\n $(element).mousemove(function (e) {\r\n\r\n const contentBox = element[0].getBoundingClientRect();\r\n\r\n const dx = e.clientX - contentBox.x;\r\n const dy = e.clientY - contentBox.y;\r\n\r\n gsap.set(image, { delay: 0, duration: 0, x: dx, y: dy })\r\n });\r\n\r\n }, 100);\r\n\r\n }\r\n\r\n },\r\n });\r\n\r\n //mouse hover effect\r\n const mouse_move_effect = Modules.extend({\r\n bindEvents: function bindEvents() {\r\n this.run();\r\n },\r\n\r\n run: function run() {\r\n\r\n if (this.isEdit) {\r\n return;\r\n }\r\n\r\n if (!this.getElementSettings('wcf_enable_mouse_move_effect')) {\r\n return;\r\n }\r\n\r\n let move_area = this.$element;\r\n\r\n if ('custom' === this.getElementSettings('wcf_mouse_move_area_trigger')) {\r\n move_area = $(this.getElementSettings('wcf_custom_mouse_move_area'));\r\n }\r\n\r\n move_area.on('mousemove', this.move_effect)\r\n },\r\n\r\n getTypedValue: function (value) {\r\n\r\n if (!isNaN(Number(value)) && (value !== true && value !== false)) {\r\n return Number(value);\r\n } else {\r\n\r\n if (value == 'true') {\r\n return true\r\n } else if (value == 'false') {\r\n return false\r\n } else {\r\n return value\r\n }\r\n }\r\n },\r\n\r\n move_effect: function (e) {\r\n const moveX = this.getElementSettings('wcf_mouse_move_x');\r\n const moveY = this.getElementSettings('wcf_mouse_move_y');\r\n const duration = this.getElementSettings('wcf_mouse_move_duration');\r\n const customConfig = this.get_custom_config();\r\n\r\n // Get window width and height\r\n const windowWidth = window.innerWidth;\r\n const windowHeight = window.innerHeight;\r\n\r\n // Calculate the percentage of the cursor's position relative to the screen\r\n const xPosPercent = e.clientX / windowWidth - 0.5;\r\n const yPosPercent = e.clientY / windowHeight - 0.5;\r\n\r\n const defaults = {\r\n x: xPosPercent * moveX,\r\n y: yPosPercent * moveY,\r\n ease: \"power3.out\",\r\n duration: duration,\r\n }\r\n\r\n const config = Object.assign({}, customConfig, defaults);\r\n\r\n // GSAP animation to move the image\r\n gsap.to(this.$element, config);\r\n },\r\n\r\n get_custom_config: function () {\r\n const custom = this.getElementSettings('wcf_mouse_move_custom');\r\n let data = {};\r\n if (!custom) {\r\n return data\r\n }\r\n\r\n if (custom.length) {\r\n const properties = custom.split(\",\");\r\n properties.map((el) => {\r\n\r\n // console.log(el)\r\n\r\n if (0 === el.replace(/\\s/g, '').length) {\r\n return;\r\n }\r\n\r\n let property = el.split(\":\").filter((e) => 0 !== e.replace(/\\s/g, '').length)\r\n\r\n if (2 !== property.length) {\r\n return;\r\n }\r\n\r\n // First item of the array\r\n let f = property[0].replace(/\\s/g, '');\r\n\r\n // Last item of the array\r\n let l = property[property.length - 1].replace(/\\s/g, '');\r\n\r\n\r\n data[f] = this.getTypedValue(l);\r\n\r\n });\r\n }\r\n return data;\r\n }\r\n });\r\n elementorFrontend.hooks.addAction('frontend/element_ready/widget', function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(mouse_move_effect, {\r\n $element: $scope\r\n });\r\n });\r\n elementorFrontend.hooks.addAction('frontend/element_ready/container', function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(mouse_move_effect, {\r\n $element: $scope\r\n });\r\n });\r\n\r\n //cursor hover effect\r\n const cursor_hover_effect = Modules.extend({\r\n bindEvents: function bindEvents() {\r\n this.run();\r\n },\r\n\r\n run: function run() {\r\n\r\n if (this.getElementSettings('wcf_enable_cursor_hover_effect')) {\r\n const widget_id = this.getID();\r\n const text = this.getElementSettings('wcf_enable_cursor_hover_effect_text');\r\n\r\n let cursor = $(`.wcf-hover-cursor-effect.active-${widget_id}`);\r\n\r\n if (this.isEdit && !this.getElementSettings('wcf_enable_cursor_hover_effect_editor')) {\r\n cursor.css({ 'display': 'none' })\r\n return;\r\n }\r\n\r\n cursor.css({ 'display': 'flex' })\r\n\r\n if (!$(`.wcf-hover-cursor-effect.active-${widget_id}`).length) {\r\n $('body').prepend(``);\r\n }\r\n\r\n cursor = $(`.wcf-hover-cursor-effect.active-${widget_id}`);\r\n\r\n let element = $(this.$element);\r\n\r\n if ('wcf--a-portfolio' === this.getWidgetType()) {\r\n element = $(this.findElement('article'))\r\n }\r\n\r\n gsap.set(cursor, {\r\n xPercent: -50,\r\n yPercent: -50,\r\n scale: 0\r\n });\r\n\r\n const setCursorX = gsap.quickTo(cursor, \"x\", {\r\n duration: 0.6,\r\n ease: \"expo\"\r\n });\r\n\r\n const setCursorY = gsap.quickTo(cursor, \"y\", {\r\n duration: 0.6,\r\n ease: \"expo\"\r\n });\r\n\r\n const tl = gsap.timeline({\r\n paused: true\r\n });\r\n\r\n tl.to(cursor, {\r\n scale: 1,\r\n opacity: 1,\r\n duration: 0.5,\r\n ease: \"expo.inOut\"\r\n });\r\n\r\n $(document).mousemove(function (e) {\r\n setCursorX(e.clientX);\r\n setCursorY(e.clientY);\r\n });\r\n\r\n $(element).mouseenter((e) => {\r\n tl.play();\r\n cursor.html(text);\r\n });\r\n\r\n $(element).mouseleave((e) => {\r\n tl.reverse();\r\n });\r\n }\r\n },\r\n\r\n });\r\n\r\n for (const $skin of [\r\n 'skin-portfolio-one',\r\n 'skin-portfolio-two',\r\n 'skin-portfolio-three',\r\n 'skin-portfolio-four',\r\n 'skin-portfolio-five',\r\n 'skin-portfolio-six',\r\n 'skin-portfolio-seven',\r\n 'skin-portfolio-eight',\r\n 'skin-portfolio-nine',\r\n ]) {\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--a-portfolio.${$skin}`, function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(cursor_hover_effect, {\r\n $element: $scope\r\n });\r\n });\r\n }\r\n elementorFrontend.hooks.addAction('frontend/element_ready/container', function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(hover_image, {\r\n $element: $scope\r\n });\r\n elementorFrontend.elementsHandler.addHandler(cursor_hover_effect, {\r\n $element: $scope\r\n });\r\n elementorFrontend.elementsHandler.addHandler(horizontal_scroll, {\r\n $element: $scope\r\n });\r\n });\r\n\r\n //scroll elements\r\n const scroll_elements = function ($scope) {\r\n const links = $(\".scroll-title\", $scope);\r\n const images = $(\".image-wrap img\", $scope);\r\n const sections = $(\".single-content\", $scope);\r\n const data_navigation = $('.wcf--scroll-elements', $scope).data('navigation')\r\n const data_image = $('.wcf--scroll-elements', $scope).data('image')\r\n\r\n if ('yes' === data_navigation) {\r\n gsap.timeline({\r\n scrollTrigger: {\r\n trigger: $scope,\r\n start: \"top top\",\r\n end: \"bottom bottom\",\r\n pin: $('.scroll-nav-bar', $scope),\r\n pinSpacing: false,\r\n scrub: true,\r\n markers: false\r\n }\r\n });\r\n\r\n links.each((index, item) => {\r\n $(item).on('click', function (e) {\r\n gsap.to(window, {\r\n duration: 1,\r\n scrollTo: { y: sections[index], autoKill: true, ease: \"power2\" }\r\n });\r\n links.removeClass(\"active\");\r\n $(this).addClass(\"active\");\r\n })\r\n })\r\n }\r\n\r\n if ('yes' === data_image) {\r\n gsap.timeline({\r\n scrollTrigger: {\r\n trigger: $scope,\r\n pin: $('.scroll-images', $scope),\r\n pinSpacing: false,\r\n start: \"top top\",\r\n end: \"bottom bottom\",\r\n markers: false\r\n }\r\n })\r\n }\r\n\r\n if ('yes' === data_navigation || 'yes' === data_image) {\r\n sections.each((i, section) => {\r\n ScrollTrigger.create({\r\n trigger: section,\r\n start: \"top center\",\r\n end: \"bottom center\",\r\n markers: false,\r\n onToggle: self => {\r\n if (self.isActive) {\r\n if ('yes' === data_navigation) {\r\n gsap.to(links[i], {\r\n scale: 1, //1.3\r\n onStart: function () {\r\n $(this._targets).addClass('active')\r\n }\r\n })\r\n }\r\n if ('yes' === data_image) {\r\n gsap.to(images[i], {\r\n opacity: 1,\r\n duration: 1,\r\n scale: 1,\r\n })\r\n }\r\n\r\n } else {\r\n if ('yes' === data_navigation) {\r\n gsap.to(links[i], {\r\n scale: 1,\r\n onStart: function () {\r\n $(this._targets).removeClass('active')\r\n }\r\n })\r\n }\r\n if ('yes' === data_image) {\r\n gsap.to(images[i], {\r\n opacity: 0,\r\n duration: 1,\r\n scale: 1.2,\r\n })\r\n }\r\n }\r\n }\r\n });\r\n })\r\n }\r\n }\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--scroll-elements.default`, scroll_elements);\r\n\r\n //wcf cursor\r\n const cursor = function () {\r\n\r\n const cursor_enable = elementorFrontend.getKitSettings('wcf_enable_cursor');\r\n\r\n if (!cursor_enable) {\r\n return;\r\n }\r\n\r\n const cursor = $('.wcf-cursor');\r\n const cursor_follower = $('.wcf-cursor-follower');\r\n\r\n const breakpoint = elementorBreakpoints[elementorFrontend.getKitSettings('wcf_cursor_breakpoint')].value;\r\n\r\n if ($(window).width() < breakpoint) {\r\n cursor.hide()\r\n cursor_follower.hide()\r\n return;\r\n }\r\n\r\n cursor.css('display', 'flex')\r\n cursor_follower.show()\r\n\r\n\r\n gsap.set(cursor, {\r\n xPercent: -50,\r\n yPercent: -50,\r\n scale: 0\r\n });\r\n\r\n gsap.set(cursor_follower, {\r\n xPercent: -50,\r\n yPercent: -50,\r\n scale: 0\r\n });\r\n\r\n const setCursorX = gsap.quickTo(cursor, \"x\", {\r\n duration: 0.6,\r\n ease: \"power4.out\"\r\n });\r\n\r\n const setCursorFollowerX = gsap.quickTo(cursor_follower, \"x\", {\r\n duration: 0.6,\r\n ease: \"power4.out\"\r\n });\r\n\r\n const setCursorY = gsap.quickTo(cursor, \"y\", {\r\n duration: 0.6,\r\n ease: \"power4.out\"\r\n });\r\n\r\n const setCursorFollowerY = gsap.quickTo(cursor_follower, \"y\", {\r\n duration: 0.6,\r\n ease: \"power4.out\"\r\n });\r\n\r\n const tl = gsap.timeline({\r\n paused: true\r\n });\r\n\r\n tl.to(cursor, {\r\n scale: 1,\r\n opacity: 1,\r\n duration: 0.5,\r\n ease: \"power4.out\"\r\n });\r\n\r\n tl.to(cursor_follower, {\r\n scale: 1,\r\n opacity: 1,\r\n duration: 0.5,\r\n ease: \"power4.out\"\r\n });\r\n\r\n $(document).mousemove(function (e) {\r\n tl.play();\r\n setCursorX(e.clientX);\r\n setCursorY(e.clientY);\r\n setCursorFollowerX(e.clientX);\r\n setCursorFollowerY(e.clientY);\r\n });\r\n }\r\n\r\n cursor();\r\n\r\n //advance portfolio\r\n const advance_portfolio = function ($scope) {\r\n\r\n const animationSettings = $('.wcf--advance-portfolio', $scope).data('animation-settings');\r\n\r\n if ('yes' === animationSettings['enable']) {\r\n\r\n if ('skin-portfolio-five' === animationSettings['skin']) {\r\n animate_portfolio_content_five($scope);\r\n }\r\n\r\n if ($scope.hasClass('elementor-element-edit-mode') && '' === animationSettings['enable_editor']) {\r\n return;\r\n }\r\n\r\n if (animationSettings['breakpoint']) {\r\n const breakpoint = elementorBreakpoints[animationSettings['breakpoint']].value;\r\n gsap_mm.add(`(${'min-width: ' + breakpoint + 'px'})`, () => {\r\n\r\n if ('skin-portfolio-three' === animationSettings['skin']) {\r\n animate_portfolio_content_three($scope, animationSettings);\r\n }\r\n\r\n if ('skin-portfolio-four' === animationSettings['skin']) {\r\n animate_portfolio_content_four($scope, animationSettings);\r\n }\r\n });\r\n\r\n } else {\r\n if ('skin-portfolio-three' === animationSettings['skin']) {\r\n animate_portfolio_content_three($scope, animationSettings);\r\n }\r\n\r\n if ('skin-portfolio-four' === animationSettings['skin']) {\r\n animate_portfolio_content_four($scope, animationSettings);\r\n }\r\n }\r\n }\r\n\r\n if ('skin-portfolio-eight' === animationSettings['skin']) {\r\n animate_portfolio_content_eight($scope, animationSettings);\r\n }\r\n\r\n };\r\n const animate_portfolio_content_three = function ($scope, animationSettings) {\r\n\r\n const section_title = $('.section-title', $scope)\r\n\r\n //add the pre styles\r\n $('.item', $scope).css({\r\n 'scale': 0.5,\r\n 'opacity': 0,\r\n '-webkit-transform': 'perspective(4000px) rotateX(90deg)',\r\n 'transform': 'perspective(4000px) rotateX(90deg)',\r\n })\r\n\r\n let portfolioline = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: $scope,\r\n start: animationSettings['pin_area_start'],\r\n pin: section_title,\r\n end: animationSettings['pin_area_end'],\r\n markers: false,\r\n pinSpacing: false,\r\n scrub: 1,\r\n }\r\n })\r\n\r\n portfolioline.to(section_title, {\r\n scale: 3,\r\n duration: 1\r\n })\r\n\r\n portfolioline.to(section_title, {\r\n scale: 1,\r\n duration: 1\r\n }, \"+=2\")\r\n\r\n\r\n $('.item', $scope).each((index, portfolio) => {\r\n\r\n gsap.set(portfolio, { opacity: 0.7 })\r\n let t1 = gsap.timeline()\r\n\r\n t1.set(portfolio, {\r\n position: \"relative\",\r\n })\r\n t1.to(portfolio, {\r\n scrollTrigger: {\r\n trigger: portfolio,\r\n scrub: 2,\r\n duration: 1.5,\r\n start: \"top bottom+=100\",\r\n end: \"bottom center\",\r\n markers: false\r\n },\r\n scale: 1,\r\n opacity: 1,\r\n rotateX: 0,\r\n })\r\n });\r\n };\r\n const animate_portfolio_content_four = function ($scope, animationSettings = []) {\r\n\r\n let skewSetter = gsap.quickTo($('.wcf--advance-portfolio.skin-portfolio-four img'), \"skewY\"),\r\n clamp = gsap.utils.clamp(-15, 15);\r\n\r\n const smoother = ScrollSmoother.create({\r\n smooth: 1.35,\r\n smoothTouch: false,\r\n normalizeScroll: false,\r\n ignoreMobileResize: true,\r\n onUpdate: self => skewSetter(clamp(self.getVelocity() / -80)),\r\n onStop: () => skewSetter(0)\r\n });\r\n\r\n };\r\n const animate_portfolio_content_five = function ($scope) {\r\n $('.item', $scope).wcf_tilt();\r\n };\r\n const animate_portfolio_content_eight = function ($scope, animationSettings) {\r\n\r\n let slider = $(\".slider_items\", $scope);\r\n\r\n if (slider) {\r\n document.querySelector(\".slider_items\").style.display = 'none';\r\n let cols = 1;\r\n if ($(window).width() > 767) {\r\n cols = 3;\r\n }\r\n //not working properly\r\n // console.log(device_width)\r\n\r\n const main = document.getElementById(\"main-\" + animationSettings['skin']);\r\n let parts = [];\r\n\r\n var slide_item = $('.slide_item', $scope)\r\n\r\n let current = 0;\r\n let playing = false;\r\n\r\n for (let col = 0; col < cols; col++) {\r\n let part = document.createElement(\"div\");\r\n part.className = \"part\";\r\n let el = document.createElement(\"a\");\r\n el.className = \"section\";\r\n el.href = $(slide_item[current]).find('a').attr('href');\r\n\r\n el.innerHTML = slide_item[current].innerHTML;\r\n\r\n part.style.setProperty(\"--x\", -100 * col + \"%\");\r\n part.style.setProperty(\"--image-width\", $(main).width() + 'px');\r\n part.appendChild(el);\r\n main.appendChild(part);\r\n parts.push(part);\r\n }\r\n\r\n\r\n // Rollover UP & Down Mouse Wheel Navigation\r\n let animOptions = {\r\n duration: 2.3,\r\n ease: Power4.easeInOut\r\n };\r\n\r\n function go(dir) {\r\n if (!playing) {\r\n playing = true;\r\n if (current + dir < 0) current = slide_item.length - 1;\r\n else if (current + dir >= slide_item.length) current = 0;\r\n else current += dir;\r\n\r\n function up(part, next) {\r\n part.appendChild(next);\r\n gsap\r\n .to(part, { ...animOptions, y: -window.innerHeight })\r\n .then(function () {\r\n part.children[0].remove();\r\n gsap.to(part, { duration: 0, y: 0 });\r\n });\r\n }\r\n\r\n function down(part, next) {\r\n part.prepend(next);\r\n gsap.to(part, { duration: 0, y: -window.innerHeight });\r\n gsap.to(part, { ...animOptions, y: 0 }).then(function () {\r\n part.children[1].remove();\r\n playing = false;\r\n });\r\n }\r\n\r\n for (let p in parts) {\r\n let part = parts[p];\r\n\r\n let next = document.createElement(\"a\");\r\n next.href = $(slide_item[current]).find('a').attr('href');\r\n next.className = \"section\";\r\n\r\n next.innerHTML = slide_item[current].innerHTML;\r\n\r\n if ((p - Math.max(0, dir)) % 2) {\r\n down(part, next);\r\n } else {\r\n up(part, next);\r\n }\r\n }\r\n }\r\n }\r\n\r\n //Mouse Wheel Scroll Transition\r\n let scrollTimeout;\r\n\r\n function wheel(e) {\r\n clearTimeout(scrollTimeout);\r\n setTimeout(function () {\r\n if (e.deltaY < -40) {\r\n go(-1);\r\n } else if (e.deltaY >= 40) {\r\n go(1);\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener(\"mousewheel\", wheel, false);\r\n window.addEventListener(\"wheel\", wheel, false);\r\n\r\n let alls = document.querySelectorAll(`#main-${animationSettings['skin']} .part`);\r\n alls[0].classList.add('showed');\r\n }\r\n\r\n };\r\n\r\n const advance_portfolio_skin = elementorFrontend.hooks.applyFilters('wcf/widgets/a-portfolio', [\r\n 'skin-portfolio-three',\r\n 'skin-portfolio-four',\r\n 'skin-portfolio-five',\r\n 'skin-portfolio-eight',\r\n ]);\r\n for (const $skin of advance_portfolio_skin) {\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--a-portfolio.${$skin}`, advance_portfolio);\r\n }\r\n\r\n const advance_portfolio_nine = function ($scope) {\r\n let items = $('.item', $scope);\r\n\r\n let total = items.length\r\n if (total < 10) {\r\n total = '0' + total\r\n }\r\n $('.total', $scope).html(total)\r\n\r\n gsap.timeline({\r\n scrollTrigger: {\r\n trigger: $scope,\r\n start: \"top top\",\r\n end: \"bottom bottom\",\r\n pin: $('.widget_header', $scope),\r\n pinSpacing: false,\r\n scrub: true,\r\n markers: false\r\n }\r\n });\r\n\r\n items.each((i, item) => {\r\n ScrollTrigger.create({\r\n trigger: item,\r\n start: \"top center\",\r\n end: \"bottom center\",\r\n markers: false,\r\n onToggle: self => {\r\n if (self.isActive) {\r\n $('.current', $scope).html(i + 1);\r\n }\r\n }\r\n });\r\n })\r\n };\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--a-portfolio.skin-portfolio-nine`, advance_portfolio_nine);\r\n }\r\n\r\n //slider\r\n elementorFrontend.hooks.addFilter('wcf/widgets/slider', function (el) {\r\n const new_slider = {\r\n 'a-portfolio': [\r\n \"skin-portfolio-one\",\r\n \"skin-portfolio-two\",\r\n \"skin-portfolio-six\",\r\n \"skin-portfolio-seven\"\r\n ]\r\n }\r\n return Object.assign({}, el, new_slider);\r\n })\r\n\r\n //Toggle Switcher\r\n const toggle_switcher = function ($scope) {\r\n const checked = $(\"input\", $scope);\r\n const toggle_pane = $(\".toggle-pane\", $scope);\r\n const toggle_label = $(\".before_label, .after_label\", $scope);\r\n\r\n checked.change(function () {\r\n toggle_pane.toggleClass('show');\r\n toggle_label.toggleClass('active');\r\n })\r\n }\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--toggle-switch.default`, toggle_switcher);\r\n\r\n //filterable Gallery\r\n const filter_gallery = function ($scope) {\r\n const mixitUp = $('.gallery-wrapper', $scope)\r\n if (mixitUp.length) {\r\n mixitup(mixitUp);\r\n }\r\n\r\n //popup\r\n $('.gallery-item', $scope).magnificPopup({\r\n type: 'iframe'\r\n });\r\n }\r\n elementorFrontend.hooks.addAction(`frontend/element_ready/wcf--filterable-gallery.default`, filter_gallery);\r\n\r\n //wrapper Link\r\n const wrapper_link = function ($scope) {\r\n const attr = $scope.data('wcf-wrapper-link');\r\n\r\n if (undefined === attr) {\r\n return\r\n }\r\n\r\n $scope.on('click', function () {\r\n let anchor = document.createElement('a')\r\n $(anchor).attr(attr);\r\n anchor.click();\r\n });\r\n };\r\n elementorFrontend.hooks.addAction('frontend/element_ready/container', wrapper_link);\r\n\r\n //Tilt Effect\r\n const Tilt_Effect = Modules.extend({\r\n run: function run() {\r\n\r\n if ('yes' !== this.getElementSettings('wcf_enable_tilt')) {\r\n return;\r\n }\r\n\r\n if (this.isEdit && !this.getElementSettings('wcf_enable_tilt_editor')) {\r\n return;\r\n }\r\n\r\n\r\n let settings = {}\r\n\r\n let maxTilt = this.getElementSettings('wcf_max_tilt');\r\n let perspective = this.getElementSettings('wcf_tilt_perspective');\r\n let scale = this.getElementSettings('wcf_tilt_scale');\r\n let speed = this.getElementSettings('wcf_tilt_speed');\r\n\r\n if (maxTilt) {\r\n settings.maxTilt = maxTilt;\r\n }\r\n\r\n if (maxTilt) {\r\n settings.perspective = perspective;\r\n }\r\n\r\n if (maxTilt) {\r\n settings.scale = scale;\r\n }\r\n\r\n if (maxTilt) {\r\n settings.speed = speed;\r\n }\r\n\r\n this.$element.wcf_tilt(settings);\r\n },\r\n bindEvents: function bindEvents() {\r\n this.run();\r\n },\r\n\r\n });\r\n\r\n elementorFrontend.hooks.addAction('frontend/element_ready/widget', function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(Tilt_Effect, {\r\n $element: $scope\r\n });\r\n });\r\n\r\n elementorFrontend.hooks.addAction('frontend/element_ready/container', function ($scope) {\r\n elementorFrontend.elementsHandler.addHandler(Tilt_Effect, {\r\n $element: $scope\r\n });\r\n });\r\n\r\n //table of content\r\n const table_of_content = Modules.extend({\r\n getDefaultSettings: function getDefaultSettings() {\r\n const elementSettings = this.getElementSettings(),\r\n listWrapperTag = 'numbers' === elementSettings.marker_view ? 'ol' : 'ul';\r\n return {\r\n selectors: {\r\n widgetContainer: '.elementor-widget-container',\r\n postContentContainer: '.elementor:not([data-elementor-type=\"header\"]):not([data-elementor-type=\"footer\"]):not([data-elementor-type=\"popup\"])',\r\n expandButton: '.toc__toggle-button--expand',\r\n collapseButton: '.toc__toggle-button--collapse',\r\n body: '.toc__body',\r\n headerTitle: '.toc__header-title'\r\n },\r\n classes: {\r\n anchor: 'elementor-menu-anchor',\r\n listWrapper: 'toc__list-wrapper',\r\n listItem: 'toc__list-item',\r\n listTextWrapper: 'toc__list-item-text-wrapper',\r\n firstLevelListItem: 'toc__top-level',\r\n listItemText: 'toc__list-item-text',\r\n activeItem: 'elementor-item-active',\r\n headingAnchor: 'toc__heading-anchor',\r\n collapsed: 'toc--collapsed'\r\n },\r\n listWrapperTag\r\n };\r\n },\r\n getDefaultElements: function getDefaultElements() {\r\n const settings = this.getSettings();\r\n return {\r\n $pageContainer: this.getContainer(),\r\n $widgetContainer: this.$element.find(settings.selectors.widgetContainer),\r\n $expandButton: this.$element.find(settings.selectors.expandButton),\r\n $collapseButton: this.$element.find(settings.selectors.collapseButton),\r\n $tocBody: this.$element.find(settings.selectors.body),\r\n $listItems: this.$element.find('.' + settings.classes.listItem)\r\n };\r\n },\r\n getContainer: function getContainer() {\r\n const elementSettings = this.getElementSettings();\r\n\r\n // If there is a custom container defined by the user, use it as the headings-scan container\r\n if (elementSettings.container) {\r\n return jQuery(elementSettings.container);\r\n }\r\n\r\n // Get the document wrapper element in which the TOC is located\r\n const $documentWrapper = this.$element.parents('.elementor');\r\n\r\n // If the TOC container is a popup, only scan the popup for headings\r\n if ('popup' === $documentWrapper.attr('data-elementor-type')) {\r\n return $documentWrapper;\r\n }\r\n\r\n // If the TOC container is anything other than a popup, scan only the post/page content for headings\r\n const settings = this.getSettings();\r\n return jQuery(settings.selectors.postContentContainer);\r\n },\r\n getHeadings: function () {\r\n // Get all headings from document by user-selected tags\r\n const elementSettings = this.getElementSettings(),\r\n tags = elementSettings.headings_by_tags.join(','),\r\n selectors = this.getSettings('selectors'),\r\n excludedSelectors = elementSettings.exclude_headings_by_selector;\r\n return this.elements.$pageContainer.find(tags).not(selectors.headerTitle).filter((index, heading) => {\r\n return !jQuery(heading).closest(excludedSelectors).length; // Handle excluded selectors if there are any\r\n });\r\n },\r\n handleNoHeadingsFound: function () {\r\n const noHeadingsText = 'No headings were found on this page.';\r\n return this.elements.$tocBody.html(noHeadingsText);\r\n },\r\n getHeadingAnchorLink: function (index, classes) {\r\n const headingID = this.elements.$headings[index].id,\r\n wrapperID = this.elements.$headings[index].closest('.elementor-widget').id;\r\n let anchorLink = '';\r\n if (headingID) {\r\n anchorLink = headingID;\r\n } else if (wrapperID) {\r\n // If the heading itself has an ID, we don't want to overwrite it\r\n anchorLink = wrapperID;\r\n }\r\n\r\n // If there is no existing ID, use the heading text to create a semantic ID\r\n if (headingID || wrapperID) {\r\n jQuery(this.elements.$headings[index]).data('hasOwnID', true);\r\n } else {\r\n anchorLink = `${classes.headingAnchor}-${index}`;\r\n }\r\n return anchorLink;\r\n },\r\n setHeadingsData: function () {\r\n this.headingsData = [];\r\n const classes = this.getSettings('classes');\r\n\r\n // Create an array for simplifying TOC list creation\r\n this.elements.$headings.each((index, element) => {\r\n const anchorLink = this.getHeadingAnchorLink(index, classes);\r\n this.headingsData.push({\r\n tag: +element.nodeName.slice(1),\r\n text: element.textContent,\r\n anchorLink\r\n });\r\n });\r\n },\r\n addAnchorsBeforeHeadings: function () {\r\n const classes = this.getSettings('classes');\r\n\r\n // Add an anchor element right before each TOC heading to create anchors for TOC links\r\n this.elements.$headings.before(index => {\r\n // Check if the heading element itself has an ID, or if it is a widget which includes a main heading element, whether the widget wrapper has an ID\r\n if (jQuery(this.elements.$headings[index]).data('hasOwnID')) {\r\n return;\r\n }\r\n return ``;\r\n });\r\n },\r\n activateItem: function ($listItem) {\r\n const classes = this.getSettings('classes');\r\n this.deactivateActiveItem($listItem);\r\n $listItem.addClass(classes.activeItem);\r\n this.$activeItem = $listItem;\r\n if (!this.getElementSettings('collapse_subitems')) {\r\n return;\r\n }\r\n let $activeList;\r\n if ($listItem.hasClass(classes.firstLevelListItem)) {\r\n $activeList = $listItem.parent().next();\r\n } else {\r\n $activeList = $listItem.parents('.' + classes.listWrapper).eq(-2);\r\n }\r\n if (!$activeList.length) {\r\n delete this.$activeList;\r\n return;\r\n }\r\n this.$activeList = $activeList;\r\n this.$activeList.stop().slideDown();\r\n },\r\n deactivateActiveItem: function ($activeToBe) {\r\n if (!this.$activeItem || this.$activeItem.is($activeToBe)) {\r\n return;\r\n }\r\n const {\r\n classes\r\n } = this.getSettings();\r\n this.$activeItem.removeClass(classes.activeItem);\r\n if (this.$activeList && (!$activeToBe || !this.$activeList[0].contains($activeToBe[0]))) {\r\n this.$activeList.slideUp();\r\n }\r\n },\r\n followAnchor: function ($element, index) {\r\n const anchorSelector = $element[0].hash;\r\n let $anchor;\r\n try {\r\n // `decodeURIComponent` for UTF8 characters in the hash.\r\n $anchor = jQuery(decodeURIComponent(anchorSelector));\r\n } catch (e) {\r\n return;\r\n }\r\n\r\n elementorFrontend.waypoint($anchor, direction => {\r\n if (this.itemClicked) {\r\n return;\r\n }\r\n const id = $anchor.attr('id');\r\n if ('down' === direction) {\r\n this.viewportItems[id] = true;\r\n this.activateItem($element);\r\n } else {\r\n delete this.viewportItems[id];\r\n this.activateItem(this.$listItemTexts.eq(index - 1));\r\n }\r\n }, {\r\n offset: 'bottom-in-view',\r\n triggerOnce: false\r\n });\r\n elementorFrontend.waypoint($anchor, direction => {\r\n if (this.itemClicked) {\r\n return;\r\n }\r\n const id = $anchor.attr('id');\r\n if ('down' === direction) {\r\n delete this.viewportItems[id];\r\n if (Object.keys(this.viewportItems).length) {\r\n this.activateItem(this.$listItemTexts.eq(index + 1));\r\n }\r\n } else {\r\n this.viewportItems[id] = true;\r\n this.activateItem($element);\r\n }\r\n }, {\r\n offset: 0,\r\n triggerOnce: false\r\n });\r\n },\r\n followAnchors: function () {\r\n this.$listItemTexts.each((index, element) => this.followAnchor(jQuery(element), index));\r\n },\r\n populateTOC: function () {\r\n this.listItemPointer = 0;\r\n const elementSettings = this.getElementSettings();\r\n if (elementSettings.hierarchical_view) {\r\n this.createNestedList();\r\n } else {\r\n this.createFlatList();\r\n }\r\n this.$listItemTexts = this.$element.find('.toc__list-item-text');\r\n this.$listItemTexts.on('click', this.onListItemClick.bind(this));\r\n if (!elementorFrontend.isEditMode()) {\r\n this.followAnchors();\r\n }\r\n },\r\n createNestedList: function () {\r\n this.headingsData.forEach((heading, index) => {\r\n heading.level = 0;\r\n for (let i = index - 1; i >= 0; i--) {\r\n const currentOrderedItem = this.headingsData[i];\r\n if (currentOrderedItem.tag <= heading.tag) {\r\n heading.level = currentOrderedItem.level;\r\n if (currentOrderedItem.tag < heading.tag) {\r\n heading.level++;\r\n }\r\n break;\r\n }\r\n }\r\n });\r\n this.elements.$tocBody.html(this.getNestedLevel(0));\r\n },\r\n createFlatList: function () {\r\n this.elements.$tocBody.html(this.getNestedLevel());\r\n },\r\n getNestedLevel: function (level) {\r\n const settings = this.getSettings(),\r\n elementSettings = this.getElementSettings(),\r\n icon = this.getElementSettings('icon');\r\n let renderedIcon;\r\n if (icon) {\r\n // We generate the icon markup in PHP and make it available via get_frontend_settings(). As a result, the\r\n // rendered icon is not available in the editor, so in the editor we use the regular tag.\r\n if (elementorFrontend.config.experimentalFeatures.e_font_icon_svg && !elementorFrontend.isEditMode()) {\r\n renderedIcon = icon.rendered_tag;\r\n } else {\r\n renderedIcon = ``;\r\n }\r\n }\r\n\r\n // Open new list/nested list\r\n let html = `<${settings.listWrapperTag} class=\"${settings.classes.listWrapper}\">`;\r\n\r\n // For each list item, build its markup.\r\n while (this.listItemPointer < this.headingsData.length) {\r\n const currentItem = this.headingsData[this.listItemPointer];\r\n let listItemTextClasses = settings.classes.listItemText;\r\n if (0 === currentItem.level) {\r\n // If the current list item is a top level item, give it the first level class\r\n listItemTextClasses += ' ' + settings.classes.firstLevelListItem;\r\n }\r\n if (level > currentItem.level) {\r\n break;\r\n }\r\n if (level === currentItem.level) {\r\n html += `