\n
\n - ");
if (elementSettings.custom_style_list == 'hm-toc-slide-style') {
htmlul += "<".concat(elementSettings.html_tag, " class=\"hm-toc-title\">").concat(elementSettings.widget_title, "").concat(elementSettings.html_tag, ">");
} else {
htmlul += "<".concat(elementSettings.html_tag, " class=\"hm-toc-title\">").concat(elementSettings.widget_title, "").concat(elementSettings.html_tag, ">");
}
htmlul += "<".concat(settings.listWrapperTag, " class=\"hm-toc-items-inner\">");
for (var i = 0; i < this.headingsData.length; i++) {
var list = '';
var currentItemDot = this.headingsData[i];
if (level > currentItemDot.level) {
break;
}
var listItemTextClasses = settings.classes.listItemText;
if (0 === currentItemDot.level) {
// If the current list item is a top level item, give it the first level class
listItemTextClasses += " " + settings.classes.firstLevelListItem;
}
if (level === currentItemDot.level) {
list += "
- ");
if ('bullets' === elementSettings.marker_view && icon && elementSettings.custom_style_list == 'hm-toc-slide-style') {
list += "");
}
list += "").concat(currentItemDot.text, "");
list += "
";
}
htmlul += list;
}
htmlul += "".concat(settings.listWrapperTag, ">");
htmlul += " \n
";
}
return htmlul;
},
getNestedLevel: function getNestedLevel(level) {
var settings = this.getSettings(),
elementSettings = this.getElementSettings(),
icon = this.getElementSettings("icon");
var html = '';
// Open new list/nested list
html += "<" + settings.listWrapperTag + ' class="' + settings.classes.listWrapper + '">';
// for each list item, build its markup.
while (this.listItemPointer < this.headingsData.length) {
var currentItem = this.headingsData[this.listItemPointer];
var listItemTextClasses = settings.classes.listItemText;
if (0 === currentItem.level) {
// If the current list item is a top level item, give it the first level class
listItemTextClasses += " " + settings.classes.firstLevelListItem;
}
if (level > currentItem.level) {
break;
}
if (level === currentItem.level) {
html += '
';
html += '';
var liContent = '
' + currentItem.text + "";
// If list type is bullets, add the bullet icon as an
tag
if ("bullets" === elementSettings.marker_view && icon) {
liContent = '' + liContent;
}
html += liContent;
html += " ";
this.listItemPointer++;
var nextItem = this.headingsData[this.listItemPointer];
if (nextItem && level < nextItem.level) {
// If a new nested list has to be created under the current item,
// this entire method is called recursively (outside the while loop, a list wrapper is created)
html += this.getNestedLevel(nextItem.level);
}
html += "";
}
}
html += "" + settings.listWrapperTag + ">";
return html;
},
handleNoHeadingsFound: function handleNoHeadingsFound() {
var _messages = 'No headings were found on this page.';
if (elementorFrontend.isEditMode()) {
return this.elements.$tocBody.html(_messages);
}
},
collapseOnInit: function collapseOnInit() {
var $self = this;
var minimizedOn = this.getElementSettings("minimized_on"),
currentDeviceMode = elementorFrontend.getCurrentDeviceMode();
if ("" !== minimizedOn && "array" !== typeof minimizedOn) {
minimizedOn = [minimizedOn];
}
if (0 !== minimizedOn.length && "object" === _typeof(minimizedOn)) {
minimizedOn.forEach(function (value) {
if ("desktop" === value[0] && "desktop" == currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.xxl || "tablet" === value[0] && "tablet" === currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.lg || "mobile" === value[0] && "mobile" === currentDeviceMode && $(window).width() < elementorFrontend.config.breakpoints.md) {
$self.collapseBox();
}
});
}
},
getHeadingAnchorLink: function getHeadingAnchorLink(index, classes) {
var headingID = this.elements.$headings[index].id,
wrapperID = this.elements.$headings[index].closest('.elementor-widget').id;
var anchorLink = '';
if (headingID) {
anchorLink = headingID;
} else if (wrapperID) {
// If the heading itself has an ID, we don't want to overwrite it
anchorLink = wrapperID;
} // If there is no existing ID, use the heading text to create a semantic ID
if (headingID || wrapperID) {
jQuery(this.elements.$headings[index]).data('hasOwnID', true);
} else {
anchorLink = "".concat(classes.headingAnchor, "-").concat(index);
}
return anchorLink;
},
setHeadingsData: function setHeadingsData() {
var $this = this;
this.headingsData = [];
var classes = this.getSettings("classes");
// Create an array for simplifying TOC list creation
this.elements.$headings.each(function (index, element) {
var anchorLink = $this.getHeadingAnchorLink(index, classes);
$this.headingsData.push({
tag: +element.nodeName.slice(1),
text: element.textContent,
anchorLink: anchorLink
});
});
},
run: function run() {
var elementSettings = this.getElementSettings();
this.elements.$headings = this.getHeadings();
if (!this.elements.$headings.length) {
return this.handleNoHeadingsFound();
}
this.setHeadingsData();
if (!elementorFrontend.isEditMode()) {
this.addAnchorsBeforeHeadings();
}
this.populateTOC();
if (elementSettings.minimize_box) {
this.collapseOnInit();
}
if (elementSettings.sticky_toc_toggle) {
this.handleStickyToc();
}
if ("" !== elementSettings.scroll_offset.size) {
this.setOffset();
}
},
expandBox: function expandBox() {
var boxHeight = this.getCurrentDeviceSetting("min_height");
this.$element.removeClass(this.getSettings("classes.collapsed"));
this.elements.$tocBody.slideDown();
// return container to the full height in case a min-height is defined by the user
this.elements.$widgetContainer.css("min-height", boxHeight.size + boxHeight.unit);
},
collapseBox: function collapseBox() {
this.$element.addClass(this.getSettings("classes.collapsed"));
this.elements.$tocBody.slideUp();
// close container in case a min-height is defined by the user
this.elements.$widgetContainer.css("min-height", "0px");
},
onInit: function onInit() {
var $self = this;
this.initElements();
this.bindEvents();
jQuery(document).ready(function () {
$self.run();
});
},
onListItemClick: function onListItemClick(event) {
var $self = this;
this.itemClicked = true;
setTimeout(function () {
return $self.itemClicked = false;
}, 2000);
var $clickedItem = jQuery(event.target),
$list = $clickedItem.parent().next(),
collapseNestedList = this.getElementSettings("collapse_subitems");
if ("SPAN" == $clickedItem[0].tagName && 'yes' == this.getElementSettings("custom_style")) {
$clickedItem = jQuery(event.currentTarget);
}
var listIsActive = void 0;
if (collapseNestedList && $clickedItem.hasClass(this.getSettings("classes.firstLevelListItem"))) {
if ($list.is(":visible")) {
listIsActive = true;
}
}
this.activateItem($clickedItem);
if (collapseNestedList && listIsActive) {
$list.slideUp();
}
},
handleStickyToc: function handleStickyToc() {
var elementSettings = this.getElementSettings();
var currentDeviceMode = elementorFrontend.getCurrentDeviceMode();
var $devices = elementSettings.sticky_toc_disable_on;
var target = this.getID();
var type = elementSettings.sticky_toc_type;
if ("in-place" === type) {
var parentWidth = target.parent().parent().outerWidth();
target.css("width", parentWidth);
} else if ("custom-position" === type) {
var parentWidth = target.parent().parent().outerWidth();
target.css("width", parentWidth);
}
if (-1 == $.inArray(currentDeviceMode, $devices)) {
target.removeClass('floating-toc');
$(window).off('scroll', this.stickyScroll);
return;
}
$(window).on('scroll', $.proxy(this.stickyScroll, this));
},
stickyScroll: function stickyScroll() {
var target = this.getID();
var elementSettings = this.getElementSettings();
var item = document.querySelector(".ha-table-of-contents");
var bound, tocHeight;
bound = item.getBoundingClientRect();
tocHeight = target.outerHeight();
if (target.hasClass("floating-toc")) {
target.parent().parent().css("height", tocHeight);
} else {
target.parent().parent().css("height", '');
}
if (bound.y + bound.height / 2 < 0) {
if (target.hasClass('floating-toc')) {
return;
}
target.addClass("floating-toc");
} else {
if (!target.hasClass('floating-toc')) {
return;
}
target.removeClass("floating-toc");
}
},
scrollToTop: function scrollToTop() {
var $self = this;
var scrollTo = this.getElementSettings("scroll_to_top_option");
if ("window_top" === scrollTo) {
$("html, body").animate({
scrollTop: 0
}, 250);
} else {
var $id = this.getID().parents('.ha-table-of-contents');
$("html, body").animate({
scrollTop: $($id).offset().top - 60
}, 1000);
}
},
getID: function getID() {
return $("#ha-toc-" + this.$element[0].attributes["data-id"].nodeValue);
}
});
elementorFrontend.hooks.addAction("frontend/element_ready/ha-table-of-contents.default", function ($scope) {
elementorFrontend.elementsHandler.addHandler(HaTOC, {
$element: $scope
});
});
//creativeSlider
var HaCreativeSlider = function HaCreativeSlider($scope) {
var $rcContainer = $scope.find('.ha-creative-slider-container');
if ($rcContainer) {
// var $haCsWidth = window.innerWidth;
var $haCsWidth = $(window).width();
var $haCsNextSelector = parseInt($haCsWidth) <= 767 ? $rcContainer.find('.ha_cs_mobile_next') : $rcContainer.find('.ha_cc_next_wrapper');
var $haCsPrevSelector = parseInt($haCsWidth) <= 767 ? $rcContainer.find('.ha_cs_mobile_prev') : $rcContainer.find('.ha_cc_prev_wrapper');
var csTextItemDelay = parseInt($haCsWidth) <= 767 ? 40 : 30;
var csImageItemDelay = 40;
var csPrevItemsOwl = $rcContainer.find('.ha_cc_prev_items');
var csTextItemsOwl = $rcContainer.find('.ha_cc_text_items');
var csImageItemsOwl = $rcContainer.find('.ha_cc_inner_image_items');
var csNextItemsOwl = $rcContainer.find('.ha_cc_next_items');
var csPrevNavOptions = {
loop: true,
dots: false,
nav: false,
items: 1,
autoplay: false,
smartSpeed: 500,
touchDrag: false,
mouseDrag: false,
rewind: true,
startPosition: -1
};
var csNextNavOptions = {
loop: true,
dots: false,
nav: false,
items: 1,
autoplay: false,
smartSpeed: 500,
touchDrag: false,
mouseDrag: false,
rewind: true,
startPosition: 1
};
var csGeneralOptions = {
loop: true,
dots: false,
nav: false,
items: 1,
autoplay: false,
smartSpeed: 1000,
touchDrag: false,
mouseDrag: false,
singleItem: true,
animateOut: 'fadeOutRight',
animateIn: 'fadeInLeft',
rewind: true
};
}
csPrevItemsOwl.owlCarousel(csPrevNavOptions);
csNextItemsOwl.owlCarousel(csNextNavOptions);
csTextItemsOwl.owlCarousel(csGeneralOptions);
csImageItemsOwl.owlCarousel(csGeneralOptions);
window.parent.addEventListener('message', function (e) {
if ('ha_cs_reinit' == e.data) {
csTextItemsOwl.owlCarousel('refresh');
csImageItemsOwl.owlCarousel('refresh');
}
});
$($haCsPrevSelector).click(function (e) {
e.preventDefault();
csPrevItemsOwl.trigger('prev.owl.carousel');
csNextItemsOwl.trigger('prev.owl.carousel');
setTimeout(function () {
csTextItemsOwl.trigger('prev.owl.carousel');
}, csTextItemDelay);
setTimeout(function () {
csImageItemsOwl.trigger('prev.owl.carousel');
}, csTextItemDelay + csImageItemDelay);
});
$($haCsNextSelector).click(function (e) {
e.preventDefault();
csPrevItemsOwl.trigger('next.owl.carousel');
csNextItemsOwl.trigger('next.owl.carousel');
setTimeout(function () {
csTextItemsOwl.trigger('next.owl.carousel');
}, csTextItemDelay);
setTimeout(function () {
csImageItemsOwl.trigger('next.owl.carousel');
}, csTextItemDelay + csImageItemDelay);
});
};
elementorFrontend.hooks.addAction('frontend/element_ready/ha-creative-slider.default', HaCreativeSlider);
//Advanced Comparison Table
var AdvancedComparisonTable = function AdvancedComparisonTable($scope) {
var nav = $scope.find('ul.ha-adct-table-responsive-nav');
var rows = $scope.find(".ha-adct-row, .ha-adct-child-row");
var collapse = $scope.find(".ha-adct-collapse-icon-wrap");
// console.log(rows);
var pos = 2;
nav.on("click", "li", function () {
var pos = $(this).index() + 2;
// console.log( pos );
rows.find(".ha-adct-column:not(:eq(0))").hide();
$scope.find(".ha-adct-column:nth-child(" + pos + ")").css("display", "flex");
nav.find("li").removeClass("active");
$(this).addClass("active");
});
collapse.on("click", function () {
var row_wrap = $(this).closest('.ha-adct-row-wrap');
// console.log( row_wrap );
$(this).toggleClass('open');
row_wrap.find('.ha-adct-child-row-wrap').slideToggle("slow");
// row_wrap.find('.ha-adct-child-row-wrap .ha-adct-column').slideToggle("slow");
// $('.ha-adct-heading').slideToggle("slow");
});
// Initialize the media query
//var mediaQuery = window.matchMedia("(min-width: 767px)");
// console.log(mediaQuery);
var mode = $('body').attr('data-elementor-device-mode');
var w_width = $(window).outerWidth(true);
function hideAndShowColumn(mode) {
if ('tablet' == mode || 'mobile_extra' == mode || 'mobile' == mode) {
rows.find(".ha-adct-column:not(:eq(0))").hide();
$scope.find(".ha-adct-column:nth-child(" + pos + ")").css("display", "flex");
} else {
rows.find(".ha-adct-column").removeAttr("style");
}
}
;
hideAndShowColumn(mode);
$(window).on('resize', function (e) {
var mode = $('body').attr('data-elementor-device-mode');
var w_resize_width = $(window).outerWidth(true);
if (w_width != w_resize_width) {
w_width = w_resize_width;
hideAndShowColumn(mode);
}
});
};
elementorFrontend.hooks.addAction('frontend/element_ready/ha-advanced-comparison-table.default', AdvancedComparisonTable);
//Title Tips
var TitleTips = function TitleTips($scope) {
var element = $scope.find('.ha-flip-box-inner');
var items = $scope.find('.ha-title-tips-hover li > a');
var rect = $scope.find('.ha-title-tips-hover')[0].getBoundingClientRect();
if ($scope.find('.ha-title-tips-hover').hasClass('swap')) {
var wrapper = $scope.find('.ha-title-tips-hover');
var anchor_item = $scope.find('.ha-title-tips-hover-item.have-image');
var figure = $scope.find('figure');
var Work = {
_register: {
hover: {
active: !1,
currentX: 0,
currentY: 0,
targetX: 0,
targetY: 0
}
},
_init: function _init() {
this._base(), this._events();
},
_base: function _base() {
figure.find('img').each(function () {
var item = $(this);
// console.log( item.height() );
item.attr("height_ratio", item.height());
});
requestAnimationFrame(function () {
Work._interaction.hover.move_image();
});
},
_events: function _events() {
anchor_item.on("mouseenter", "a", function () {
Work._interaction.hover.image($(this));
});
anchor_item.on("mouseleave", "a", function () {
Work._interaction.hover.leave();
});
anchor_item.on("mousemove", "a", function (e) {
Work._interaction.hover.move(e);
});
},
_functions: {
round: function round(e, t) {
var t = void 0 === t ? 100 : Math.pow(10, t);
return Math.round(e * t) / t;
}
},
_interaction: {
hover: {
image: function image(e) {
e.parents("li").addClass("active").removeClass("not-selected").siblings().removeClass("active").addClass("not-selected");
if (!Work._register.hover.visible && (Work._register.hover.currentX || Work._register.hover.currentY)) {
Work._register.hover.visible = !0;
figure.addClass("visible");
}
// $img = $('#work-hover img[project="' + e.attr("href") + '"]');
var $img = figure.find('img[data-filter-id="' + e.attr("data-filter-id") + '"]');
$img.addClass("active").siblings(".active").removeClass("active").addClass("was-active");
// console.log($img);
// console.log($img.height());
// figure.get()[0].style.setProperty("--height_ratio", ( Math.floor(Math.random() * (500 - 150 + 1) ) + 150 ) + 'px' );
// figure.get()[0].style.setProperty("--height_ratio", ( $img.height() ) + 'px' );
figure.get()[0].style.setProperty("--height_ratio", $img.attr("height_ratio") + 'px');
// .style.setProperty("--height_ratio", $img.attr("height_ratio")),
clearTimeout(figure.prop("leave"));
clearTimeout(figure.prop("animate"));
figure.addClass("animate").prop("animate", setTimeout(function () {
figure.removeClass("animate").find("img.was-active").removeClass("was-active");
}, 400));
},
leave: function leave() {
anchor_item.removeClass("active not-selected");
clearTimeout(figure.prop("leave"));
clearTimeout(figure.prop("active"));
figure.prop("leave", setTimeout(function () {
// Work._register.hover.visible = !1;
Work._register.hover.visible = false;
figure.removeClass("visible");
}, 1));
figure.prop("active", setTimeout(function () {
Work._register.hover.active = !1;
}, 2e3));
},
move: function move(e) {
var currentReact = e.currentTarget.getBoundingClientRect();
var currentWrapperReact = wrapper.get()[0].getBoundingClientRect();
var targetMiddle = currentReact.top + currentReact.height / 2;
Work._register.hover.active || (Work._register.hover.active = !0, requestAnimationFrame(function () {
Work._interaction.hover.move_image();
}), clearTimeout(figure.prop("active")), figure.prop("active", setTimeout(function () {
Work._register.hover.active = !1;
}, 2e3)));
// var react = $("#work-projects").get()[0].getBoundingClientRect();
var s = 0;
var targetItem = anchor_item.find('a').offset().left - 40;
if ($scope.hasClass('ha_title_tips_img_pos--left')) {
// Work._register.hover.targetX = currentReact.left - figure.width(); // for left side
Work._register.hover.targetX = -(figure.width() + 10); // for left side
} else {
Work._register.hover.targetX = currentReact.width + 10; // for right side
}
// Work._register.hover.targetY = targetMiddle;
Work._register.hover.targetY = e.pageY - (currentWrapperReact.top + window.scrollY);
if (!Work._register.hover.visible && (Work._register.hover.currentX || Work._register.hover.currentY)) {
Work._register.hover.visible = true;
figure.addClass("visible");
}
},
move_image: function move_image() {
if (figure.length) {
Work._register.hover.currentX += (Work._register.hover.targetX - Work._register.hover.currentX) * 0.09;
Work._register.hover.currentY += (Work._register.hover.targetY - Work._register.hover.currentY) * 0.09;
figure.get()[0].style.transform = " translate3d(\n\t\t\t\t\t\t\t\t\t\t".concat(Work._functions.round(Work._register.hover.currentX), "px,\n\t\t\t\t\t\t\t\t\t\t").concat(Work._functions.round(Work._register.hover.currentY), "px, 0px\n\t\t\t\t\t\t\t\t\t)");
if (Work._register.hover.active) {
requestAnimationFrame(function () {
Work._interaction.hover.move_image();
});
}
}
}
}
}
};
Work._init();
}
};
elementorFrontend.hooks.addAction('frontend/element_ready/ha-title-tips.default', TitleTips);
// Loop Tab
var LoopTabBase = elementorModules.frontend.handlers.Base.extend({
onInit: function onInit() {
elementorModules.frontend.handlers.Base.prototype.onInit.apply(this, arguments);
this.wrapper = this.$element.find(".ha-loop-tab-wrapper");
this.run();
},
onElementChange: debounce(function (changedProp) {
var $keys = ['tab_action', 'tab_transition_delay', 'tab_nav_item_width', 'tab_nav_item_height', 'tab_nav_item_border_radius', 'tab_nav_item_stroke_width'];
if ($keys.indexOf(changedProp) !== -1) {
this.run();
}
}, 300),
getReadySettings: function getReadySettings() {
var settings = {};
var tab_action = this.getElementSettings('tab_action');
if (tab_action) settings.tab_action = tab_action;
var tab_transition_delay = this.getElementSettings('tab_transition_delay');
if (tab_transition_delay) settings.tab_transition_delay = tab_transition_delay;
var item_width = this.getElementSettings('tab_nav_item_width');
if (item_width) settings.item_width = item_width['size'];
var item_height = this.getElementSettings('tab_nav_item_height');
if (item_height) settings.item_height = item_height['size'];
var stroke_ry = this.getElementSettings('tab_nav_item_border_radius');
if (stroke_ry) settings.stroke_ry = stroke_ry['size'];
var stroke_width = this.getElementSettings('tab_nav_item_stroke_width');
if (stroke_width) settings.stroke_width = stroke_width['size'];
return $.extend({}, this.getSettings(), settings);
},
run: function run() {
var settings = this.getReadySettings();
var currentIndex = 0;
var isHovered = false;
var nextIndex = 1;
var animationInProgress = false;
var pillBorderAnim = undefined;
var hoverMode = settings.tab_action === 'on_hover';
var $wrapper = this.wrapper;
var tabs = $wrapper.find(".ha-loop-tab-nav-item");
var contents = $wrapper.find(".ha-loop-tab_content");
var animationTime = settings.tab_transition_delay || 8000;
var itemWidth = settings.item_width || 280;
var itemHeight = settings.item_height && settings.item_height >= 45 ? settings.item_height : settings.item_height ? 45 : 65;
var maxRY = parseFloat(itemHeight / 2);
var strokeRY = settings.stroke_ry >= maxRY ? maxRY : settings.stroke_ry;
var strokeWidth = settings.stroke_width || 2;
var initialBgColor = '';
var parentElement = $wrapper.parents('.e-parent');
if (parentElement.length > 0) {
parentElement.css({
position: 'relative',
overflow: 'inherit'
});
// Append background containers for each tab
tabs.each(function (idx, tab) {
var bgColor = $(tab).attr('container-bgcolors');
initialBgColor = idx === 0 && bgColor ? JSON.parse(bgColor) : '';
parentElement.append("
"));
if (initialBgColor != '') {
$(".ha-loop-tab-bgcontainer-".concat(currentIndex)).addClass("ha-loop-tab-active-bg");
}
});
}
// Hadling HoverMode of mobile devices
window.addEventListener("resize", function () {
if (window.innerWidth <= 767) {
hoverMode = false;
} else {
hoverMode = settings.tab_action === 'on_hover';
}
});
if (window.innerWidth <= 767) {
hoverMode = false;
} else {
hoverMode = settings.tab_action === 'on_hover';
}
// Tab Navigation hadling
var handleAnimationEnd = function handleAnimationEnd(targetIndex) {
return function () {
if (!animationInProgress) return;
animationInProgress = false;
// Hide the SVG for the previous tab
var previousTab = $(tabs[currentIndex]);
if (previousTab.find('.tab-border')[0].width > 0) {
var _previousTab$find$;
previousTab.find('.tab-border').css({
visibility: "hidden",
strokeDashoffset: (_previousTab$find$ = previousTab.find('.tab-border')[0]) === null || _previousTab$find$ === void 0 ? void 0 : _previousTab$find$.getTotalLength()
});
}
activateTab(targetIndex);
// Hide the SVG for the active tab
var activeTab = $(tabs[targetIndex]);
activeTab.find('.tab-border').css({
visibility: "hidden"
});
// Only for mobile device
smoothScrollTabs(tabs[targetIndex]);
// Add unique class to the corresponding background container
$(".ha-loop-tab-bgcontainer").removeClass("ha-loop-tab-active-bg");
$(".ha-loop-tab-bgcontainer-".concat(targetIndex)).addClass("ha-loop-tab-active-bg");
requestAnimationFrame(function () {
startSvgAnimation((targetIndex + 1) % tabs.length);
});
};
};
// Tab animation handling
var startSvgAnimation = function startSvgAnimation(index) {
if (hoverMode || animationInProgress) return;
tabs.removeClass("filling");
var $nextTab = $(tabs[index]);
var svgElement = $nextTab.find('.tab-svg')[0];
if (!svgElement) return;
if (window.innerWidth <= 767) {
svgElement.setAttribute('width', 130);
svgElement.setAttribute('height', 55);
svgElement.setAttribute('viewBox', "0 0 130 55");
svgElement.style.width = 130 + 'px';
svgElement.style.height = 55 + 'px';
} else {
svgElement.setAttribute('width', itemWidth);
svgElement.setAttribute('height', itemHeight + 2);
svgElement.setAttribute('viewBox', "0 0 ".concat(itemWidth, " ").concat(itemHeight));
svgElement.style.height = itemHeight + 2 + 'px';
}
var borderElement = $nextTab.find('.tab-border')[0];
if (!borderElement) return;
// Make SVG visible only when animation starts
$nextTab.find('.tab-border').css("visibility", "visible");
if (borderElement.getBBox().width !== 0) {
if (window.innerWidth <= 767) {
strokeWidth = 2;
borderElement.style.width = 127 + 'px';
borderElement.style.height = 52 + 'px';
borderElement.style.x = 1;
borderElement.style.y = 1;
borderElement.setAttribute('x', 1);
borderElement.setAttribute('y', 1);
borderElement.setAttribute('rx', 26);
borderElement.setAttribute('ry', 26);
// Set styles
borderElement.style.rx = 26;
borderElement.style.ry = 26;
} else {
// Set attr
if (strokeWidth > 4) {
borderElement.setAttribute('x', 3);
borderElement.setAttribute('y', 3);
} else if (strokeWidth > 2) {
borderElement.setAttribute('x', 2);
borderElement.setAttribute('y', 2);
} else {
borderElement.setAttribute('x', 1);
borderElement.setAttribute('y', 1);
}
borderElement.setAttribute('rx', strokeRY);
borderElement.setAttribute('ry', strokeRY);
// Set styles
borderElement.style.rx = strokeRY;
borderElement.style.ry = strokeRY;
if (strokeWidth > 4) {
borderElement.style.width = itemWidth - strokeWidth + 'px';
borderElement.style.height = itemHeight - strokeWidth + 'px';
borderElement.style.x = 3;
borderElement.style.y = 3;
} else if (strokeWidth > 2) {
borderElement.style.width = itemWidth - 1 - strokeWidth + 'px';
borderElement.style.height = itemHeight - 2 + 'px';
borderElement.style.x = 2;
} else {
borderElement.style.width = itemWidth - 2 + 'px';
borderElement.style.height = itemHeight - 2 + 'px';
borderElement.style.x = 1;
borderElement.style.y = 1;
}
}
var length = borderElement.getTotalLength() + 5;
borderElement.style.strokeDasharray = length.toString();
borderElement.style.strokeDashoffset = length.toString();
// Create animation
pillBorderAnim = borderElement.animate([{
strokeDashoffset: length,
strokeWidth: strokeWidth
}, {
strokeDashoffset: 0,
strokeWidth: strokeWidth,
offset: 0.98,
easing: "cubic-bezier(0.11, 0, 0.5, 0)"
}, {
strokeDashoffset: 0,
strokeWidth: strokeWidth,
easing: "ease-out"
}], {
duration: animationTime,
delay: 0,
fill: "forwards"
});
}
if (!pillBorderAnim) return;
// Ensure animation finishes correctly and triggers the next tab
pillBorderAnim.onfinish = handleAnimationEnd(index);
$nextTab.addClass("filling");
animationInProgress = true;
nextIndex = index;
};
var activateTab = function activateTab(index) {
currentIndex = index;
tabs.removeClass("active");
contents.removeClass("active");
$(tabs[index]).addClass("active");
$(contents[index]).addClass("active");
};
// Hover handling
tabs.hover(function () {
if (window.innerWidth <= 767) return;
if (hoverMode) {
var index = $(this).index();
activateTab(index);
// Update the active background container
$(".ha-loop-tab-bgcontainer").removeClass("ha-loop-tab-active-bg");
$(".ha-loop-tab-bgcontainer-".concat(index)).addClass("ha-loop-tab-active-bg");
return;
}
isHovered = true;
var $thisTab = $(this);
var borderElement = $thisTab.find(".tab-border")[0];
// Pause only if this tab is the one currently animating
if ($thisTab.hasClass("filling") && borderElement && animationInProgress && pillBorderAnim) {
pillBorderAnim.pause();
}
}, function () {
if (window.innerWidth <= 767) return;
if (hoverMode) return;
isHovered = false;
var $thisTab = $(this);
var borderElement = $thisTab.find(".tab-border")[0];
// Resume only if this tab was animating
if ($thisTab.hasClass("filling") && borderElement && animationInProgress && pillBorderAnim) {
pillBorderAnim.play();
}
});
// Click handling
tabs.click(function (e) {
var clickedTab = $(e.currentTarget);
var clickedIndex = clickedTab.index();
if (clickedIndex === currentIndex) return;
// Cancel any ongoing animation
if (animationInProgress && pillBorderAnim) {
pillBorderAnim.cancel();
animationInProgress = false;
}
// Hide all SVGs before setting the new active one
tabs.find(".tab-border").css({
visibility: "hidden",
strokeDashoffset: function strokeDashoffset() {
return this.getTotalLength();
}
});
// Activate the clicked tab
activateTab(clickedIndex);
// Update the active background container
$(".ha-loop-tab-bgcontainer").removeClass("ha-loop-tab-active-bg");
$(".ha-loop-tab-bgcontainer-".concat(clickedIndex)).addClass("ha-loop-tab-active-bg");
var nextTabIndex = (clickedIndex + 1) % tabs.length;
setTimeout(function () {
startSvgAnimation(nextTabIndex);
}, 200);
smoothScrollTabs(e.currentTarget);
});
// Double-click handling only applicable for mobile
tabs.dblclick(function (e) {
if (window.innerWidth > 767) return;
var clickedTab = $(e.currentTarget);
var clickedIndex = clickedTab.index();
animationInProgress = true;
// Stop all animations when double-clicked
if (animationInProgress && pillBorderAnim) {
pillBorderAnim.cancel();
}
});
// Only for mobile devices
var smoothScrollTabs = function smoothScrollTabs(clickedTab) {
if (window.innerWidth > 767) return;
var container = $wrapper.find('.ha-loop-tab-nav')[0];
if (!container) return;
var containerRect = container.getBoundingClientRect();
var itemRect = clickedTab.getBoundingClientRect();
var scrollPosition = container.scrollLeft + (itemRect.left - containerRect.left) - containerRect.width / 3 + itemRect.width / 3;
container.scrollTo({
left: scrollPosition,
behavior: 'smooth'
});
};
// Initial setup
activateTab(0);
startSvgAnimation(1);
window.addEventListener("resize", function () {
activateTab(0);
startSvgAnimation(1);
});
}
});
// Loop Tab
elementorFrontend.hooks.addAction("frontend/element_ready/ha-loop-tab.default", function ($scope) {
elementorFrontend.elementsHandler.addHandler(LoopTabBase, {
$element: $scope
});
});
});
})(jQuery, Happy, window);