https://ask-power.gr/templates/stratos/js/main.js

1/**
2 * @package Helix Ultimate Framework
3 * @author JoomShaper https://www.joomshaper.com
4 * @copyright Copyright (c) 2010 - 2023 JoomShaper
5 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
6 */
7
8// Preloader
9jQuery(window).on("load", function () {
10    if (jQuery(".sp-loader-with-logo").length > 0) {
11        move();
12    }
13    jQuery(".sp-pre-loader").fadeOut(500, function () {
14        jQuery(this).remove();
15    });
16});
17
18/**
19 * Move the progress bar
20 */
21function move() {
22    var elem = document.getElementById("line-load");
23    var width = 1;
24    var id = setInterval(frame, 10);
25    function frame() {
26        if (width >= 100) {
27            clearInterval(id);
28        } else {
29            width++;
30            elem.style.width = width + "%";
31        }
32    }
33}
34
35jQuery(function ($) {
36    /**
37     * Helix settings data
38     *
39     */
40    var settings = Joomla.getOptions("data") || {};
41
42    /**
43     * sticky header
44     *
45     * @param {string} className the header className
46     */
47    var handleStickiness = function (className, offsetTop) {
48        if ($("body:not(.layout-edit-iframe)").hasClass(className)) {
49            var $header = $("#sp-header");
50            var headerHeight = $header.outerHeight();
51            var $stickyHeaderPlaceholder = $(".sticky-header-placeholder");
52            let $stickyOffset = "100";
53
54            if (
55                settings.header !== undefined &&
56                settings.header.stickyOffset !== undefined
57            ) {
58                $stickyOffset = settings.header.stickyOffset || "100";
59            }
60
61            var stickyHeader = function () {
62                var scrollTop = $(window).scrollTop();
63                if (scrollTop >= offsetTop + Number($stickyOffset)) {
64                    $header.addClass("header-sticky");
65                    $stickyHeaderPlaceholder.height(headerHeight);
66                } else {
67                    if ($header.hasClass("header-sticky")) {
68                        $header.removeClass("header-sticky");
69                        $stickyHeaderPlaceholder.height("inherit");
70                    }
71                }
72            };
73
74            stickyHeader();
75            $(window).scroll(function () {
76                stickyHeader();
77            });
78
79            if ($("body").hasClass("layout-boxed")) {
80                var windowWidth = $header.parent().outerWidth();
81                $header.css({ "max-width": windowWidth, left: "auto" });
82            }
83        } else {
84            var $header = $("#sp-header");
85            if ($header.hasClass("header-sticky")) {
86                $header.removeClass("header-sticky");
87            }
88            $(window).off("scroll");
89        }
90    };
91
92    /**
93     * Calculate the header offset based on the
94     * backend preview iframe site and real site.
95     *
96     * @return  integer The offset value
97     */
98    function getHeaderOffset() {
99        /**
100         * Real site header offset top
101         *
102         */
103        let $header = $("#sp-header");
104        let stickyHeaderTop = $header.offset().top;
105
106        /**
107         * Backend edit preview iframe header offset top
108         *
109         */
110        let $backHeader = $("body.back-panel").find("#sp-header");
111        let backPanelStickyHeaderTop = null;
112
113        /**
114         * If the class .back-panel exists,
115         * that means this is from backend preview frame,
116         * then get the offset top, as it varies with the original one.
117         *
118         */
119        if ($backHeader.length > 0) {
120            backPanelStickyHeaderTop = $backHeader.offset().top;
121        }
122
123        // By Default the header offset is the original header top
124        let headerOffset = stickyHeaderTop;
125
126        /**
127         * If back panel sticky header top has value rather than null
128         * that means the device type is changes from desktop to table or mobile or vice-versa.
129         * If value found then subtract the settings topbar height from the offset top.
130         *
131         */
132        if (backPanelStickyHeaderTop !== null) {
133            headerOffset = backPanelStickyHeaderTop - settings.topbarHeight;
134            headerOffset = headerOffset < 0 ? stickyHeaderTop : headerOffset;
135        }
136
137        return headerOffset;
138    }
139
140    const headerExist = $("#sp-header");
141    if (headerExist.length > 0) {
142        handleStickiness("sticky-header", getHeaderOffset());
143    }
144
145    // go to top
146    $(window).scroll(function () {
147        if ($(this).scrollTop() > 100) {
148            $(".sp-scroll-up").fadeIn();
149        } else {
150            $(".sp-scroll-up").fadeOut(400);
151        }
152    });
153
154    $(".sp-scroll-up").click(function () {
155        $("html, body").animate(
156            {
157                scrollTop: -60,
158            },
159            600
160        );
161        return false;

162    });
163
164    //mega menu
165    $(".sp-megamenu-wrapper")
166        .parent()
167        .parent()
168        .css("position", "static")
169        .parent()
170        .css("position", "relative");
171    $(".sp-menu-full").each(function () {
172        $(this).parent().addClass("menu-justify");
173    });
174
175    // Offcanvs
176    $("#offcanvas-toggler").on("click", function (event) {
177        event.preventDefault();
178        $(".offcanvas-init").addClass("offcanvas-active");
179    });
180
181    $(".offcanvas-toggler-secondary").on("click", function (event) {
182        event.preventDefault();
183        $(".offcanvas-init").addClass("offcanvas-active");
184    });
185
186    $(".offcanvas-toggler-full").on("click", function (event) {
187        event.preventDefault();
188        $(".offcanvas-init").addClass("offcanvas-active full-offcanvas");
189    });
190
191    $(".close-offcanvas, .offcanvas-overlay").on("click", function (event) {
192        event.preventDefault();
193        $(".offcanvas-init").removeClass("offcanvas-active full-offcanvas");
194    });
195
196    $(document).on("click", ".offcanvas-inner .menu-toggler", function (event) {
197        event.preventDefault();
198        $(this)
199            .closest(".menu-parent")
200            .toggleClass("menu-parent-open")
201            .find(">.menu-child")
202            .slideToggle(400);
203    });
204
205    // Modal Menu
206    if ($("#modal-menu").length > 0) {
207        let $modalToggler = $("#modal-menu-toggler");
208        let $modalMenu = $("#modal-menu");
209        let $body = $("body");
210
211        $modalToggler.on("click", function (e) {
212            e.preventDefault();
213            $modalMenu.toggleClass("active");
214            $body.toggleClass("modal-menu-active");
215            $(this).toggleClass("active");
216        });
217
218        // modal menu close with escape
219        $(document).keyup(function (e) {
220            if (e.key == "Escape") {
221                $modalMenu.removeClass("active");
222                $modalToggler.removeClass("active");
223                $body.removeClass("modal-menu-active");
224            }
225        });
226    }
227
228    // Tooltip
229    const tooltipTriggerList = [].slice.call(
230        document.querySelectorAll('[data-bs-toggle="tooltip"], .hasTooltip')
231    );
232    tooltipTriggerList.map(function (tooltipTriggerEl) {
233        return new bootstrap.Tooltip(tooltipTriggerEl, {
234            html: true,
235        });
236    });
237
238    // Popover
239    const popoverTriggerList = [].slice.call(
240        document.querySelectorAll('[data-bs-toggle="popover"], .hasPopover')
241    );
242    popoverTriggerList.map(function (popoverTriggerEl) {
243        return new bootstrap.Popover(popoverTriggerEl);
244    });
245
246    // Article Ajax voting
247    $(".article-ratings .rating-star").on("click", function (event) {
248        event.preventDefault();
249        var $parent = $(this).closest(".article-ratings");
250
251        var request = {
252            option: "com_ajax",
253            template: template,
254            action: "rating",
255            rating: $(this).data("number"),
256            article_id: $parent.data("id"),
257            format: "json",
258        };
259
260        $.ajax({
261            type: "POST",
262            data: request,
263            beforeSend: function () {
264                $parent.find(".fa-spinner").show();
265            },
266            success: function (response) {
267                var data = $.parseJSON(response);
268                $parent.find(".ratings-count").text(data.message);
269                $parent.find(".fa-spinner").hide();
270
271                if (data.status) {
272                    $parent.find(".rating-symbol").html(data.ratings);
273                }
274
275                setTimeout(function () {
276                    $parent
277                        .find(".ratings-count")
278                        .text("(" + data.rating_count + ")");
279                }, 3000);
280            },
281        });
282    });
283
284    //  Cookie consent
285    $(".sp-cookie-allow").on("click", function (event) {
286        event.preventDefault();
287
288        var date = new Date();
289        date.setTime(date.getTime() + 30 * 24 * 60 * 60 * 1000);
290        var expires = "; expires=" + date.toGMTString();
291        document.cookie = "spcookie_status=ok" + expires + "; path=/";
292
293        $(this).closest(".sp-cookie-consent").fadeOut();
294    });
295
296    $(".btn-group label:not(.active)").click(function () {
297        var label = $(this);
298        var input = $("#" + label.attr("for"));
299
300        if (!input.prop("checked")) {
301            label
302                .closest(".btn-group")
303                .find("label")
304                .removeClass("active btn-success btn-danger btn-primary");
305            if (input.val() === "") {
306                label.addClass("active btn-primary");
307            } else if (input.val() == 0) {
308                label.addClass("active btn-danger");
309            } else {
310                label.addClass("active btn-success");
311            }
312            input.prop("checked", true);
313            input.trigger("change");
314        }
315        var parent = $(this).parents("#attrib-helix_ultimate_blog_options");
316        if (parent) {
317            showCategoryItems(parent, input.val());
318        }
319    });
320    $(".btn-group input[checked=checked]").each(function () {
321        if ($(this).val() == "") {
322            $("label[for=" + $(this).attr("id") + "]").addClass(
323                "active btn btn-primary"
324            );
325        } else if ($(this).val() == 0) {
326            $("label[for=" + $(this).attr("id") + "]").addClass(
327                "active btn btn-danger"
328            );
329        } else {
330            $("label[for=" + $(this).attr("id") + "]").addClass(
331                "active btn btn-success"
332            );
333        }
334        var parent = $(this).parents("#attrib-helix_ultimate_blog_options");
335        if (parent) {
336            parent.find("*[data-showon]").each(function () {
337                $(this).hide();
338            });
339        }
340    });
341
342    function showCategoryItems(parent, value) {
343        var controlGroup = parent.find("*[data-showon]");
344
345        controlGroup.each(function () {
346            var data = $(this).attr("data-showon");
347            data = typeof data !== "undefined" ? JSON.parse(data) : [];
348            if (data.length > 0) {
349                if (
350                    typeof data[0].values !== "undefined" &&
351                    data[0].values.includes(value)
352                ) {
353                    $(this).slideDown();
354                } else {
355                    $(this).hide();
356                }
357            }
358        });
359    }
360
361    $(window).on("scroll", function () {
362        var scrollBar = $(".sp-reading-progress-bar");
363        if (scrollBar.length > 0) {
364            var s = $(window).scrollTop(),
365                d = $(document).height(),
366                c = $(window).height();
367            var scrollPercent = (s / (d - c)) * 100;
368            const position = scrollBar.data("position");
369            if (position === "top") {
370                // var sticky = $('.header-sticky');
371                // if( sticky.length > 0 ){
372                //     sticky.css({ top: scrollBar.height() })
373                // }else{
374                //     sticky.css({ top: 0 })
375                // }
376            }
377            scrollBar.css({ width: `${scrollPercent}%` });
378        }
379    });
380
381    // Error Alert close issue fix for Joomla 3
382    var observer = new MutationObserver(function (mutations) {
383        $("#system-message-container .alert .close").attr(
384            "data-bs-dismiss",
385            "alert"
386        );
387    });
388    var target = document.querySelector("#system-message-container");
389    observer.observe(target, {
390        attributes: true,
391    });
392
393    // Select All the Gradient Button and Add Attribues of Inner Text
394    $(".gradient-button").each(function () {
395        $(this).attr("data-text", $(this).text());
396        $(this).wrapInner('<span class="inner-text"></span>');
397        // Move Icon Out of the inner Text
398        $(this).find(".fas.fa-chevron-right").appendTo($(this));
399    });
400
401    function createAnimatedScroller(selector, gap) {
402        const scroller = document.querySelector(selector);
403        if (scroller) {
404            let currentLeftValue = 0;
405            let interval = null;
406
407            // Style the wrapper and scroller
408            scroller.style.display = "flex";
409            scroller.style.whiteSpace = "nowrap";
410            scroller.style.position = "relative";
411
412            // Duplicate content for seamless scrolling
413            const content = scroller.innerHTML;
414            scroller.innerHTML = content + content;
415
416            function animationStart() {
417                interval = setInterval(animationLoop, 20);
418            }
419
420            function animationStop() {
421                clearInterval(interval);
422            }
423
424            function resetPosition() {
425                const firstChild = scroller.firstElementChild;
426                if (firstChild) {
427                    currentLeftValue = 0;
428                    scroller.style.transform = `translateX(0)`;
429                }
430            }
431
432            function animationLoop() {
433                const firstChild = scroller.firstElementChild;
434                if (!firstChild) return;
435
436                currentLeftValue -= 1;
437
438                // Reset position when first item is fully scrolled
439                if (Math.abs(currentLeftValue) >= firstChild.offsetWidth) {
440                    scroller.appendChild(firstChild);
441                    currentLeftValue = 0;
442                }
443
444                scroller.style.transform = `translateX(${currentLeftValue}px)`;
445            }
446
447            // Event listeners
448            scroller.addEventListener("mouseover", animationStop);
449            scroller.addEventListener("mouseout", animationStart);
450            window.addEventListener("resize", resetPosition);
451
452            // Start animation
453            animationStart();
454        }
455    }
456
457    // Initialize the scroller
458    createAnimatedScroller(".animated-scroller", 0);
459
460    // Carousel Image Wrapper Element
461    $(".clients-testimonial-pro .sppb-item img").each(function () {
462        $(this).wrap('<div class="sp-carousel-image"></div>');
463    });
464    // add two element inside new element
465    $(".clients-testimonial-pro .sppb-item").each(function () {
466        $message = $(this).find(".sppb-testimonial-message");
467        $footer = $(this).find(".sppb-addon-testimonial-pro-footer");
468        const $newDiv = $("<div class='sp-carousel-text'></div>");
469        $newDiv.append($message);
470        $newDiv.append($footer);
471        $(this).append($newDiv);
472    });
473});
474
475$(document)
476    .on("mouseenter", ".industry-scoller", function () {
477        $(this).css("cursor", `url('/images/drag-icon-3.svg'), grab`);
478    })
479    .on("mouseleave", ".industry-scoller", function () {
480        $(this).css("cursor", "default");
481    });