https://ponchikioptom.ru/bitrix/templates/optom1/assets/js/main.js

1/*--------------------------
2    Project Name: Promina
3    Version: 1.0
4    Author: 7oorof
5    Devloped by: Ahmed Abdallah ([email protected])
6    Relase Date: June 2020
7---------------------------*/
8/*---------------------------
9      Table of Contents
10    --------------------
11    01- Pre Loading
12    02- Mobile Menu
13    03- Sticky Navbar
14    04- Search Popup 
15    05- Scroll Top Button
16    06-  Scroll Top Button
17    07- Set Background-img to section 
18    08- Add active class to accordions
19    09- Load More Items
20    10- Slick Carousel
21    11- Popup Video
22    12- CounterUp
23    13- NiceSelect Plugin
24    14- portfolio Filtering and Sorting
25     
26 ----------------------------*/
27
28$(function () {
29
30    "use strict";
31
32    // Global variables
33    var $win = $(window);
34
35    /*==========  Pre Loading   ==========*/
36    setTimeout(function () {
37        $(".preloader").remove();
38    }, 2000);
39
40    /*==========   Mobile Menu   ==========*/
41    var $navToggler = $('.navbar-toggler');
42    $navToggler.on('click', function () {
43        $(this).toggleClass('actived');
44    })
45    $navToggler.on('click', function () {
46        $('.navbar-collapse').toggleClass('menu-opened');
47    })
48
49    /*==========   Sticky Navbar   ==========*/
50    $win.on('scroll', function () {
51        if ($win.width() >= 992) {
52            var $navbar = $('.sticky-navbar');
53            if ($win.scrollTop() > 200) {
54                $navbar.addClass('fixed-navbar');
55            } else {
56                $navbar.removeClass('fixed-navbar');
57            }
58        }
59    });
60
61    /*==========  Search Popup  ==========*/
62    $('.search-popup-trigger').on('click', function (e) {
63        e.preventDefault();
64        $('.search-popup').toggleClass('active', 'inActive').removeClass('inActive');
65    });
66    // Close Module Search
67    $('.search__popup-close').on('click', function () {
68        $('.search-popup').removeClass('active').addClass('inActive');
69    });
70
71    /*==========   Scroll Top Button   ==========*/
72    var $scrollTopBtn = $('#scrollTopBtn');
73    // Show Scroll Top Button
74    $win.on('scroll', function () {
75        if ($(this).scrollTop() > 700) {
76            $scrollTopBtn.addClass('actived');
77        } else {
78            $scrollTopBtn.removeClass('actived');
79        }
80    });
81    // Animate Body after Clicking on Scroll Top Button
82    $scrollTopBtn.on('click', function () {
83        $('html, body').animate({
84            scrollTop: 0
85        }, 500);
86    });
87
88    /*==========   Set Background-img to section   ==========*/
89    $('.bg-img').each(function () {
90        var imgSrc = $(this).children('img').attr('src');
91        $(this).parent().css({
92            'background-image': 'url(' + imgSrc + ')',
93            'background-size': 'cover',
94            'background-position': 'center',
95        });
96        $(this).parent().addClass('bg-img');
97        if ($(this).hasClass('background-size-auto')) {
98            $(this).parent().addClass('background-size-auto');
99        }
100        $(this).remove();
101    });
102
103    /*==========   Add active class to accordions   ==========*/
104    $('.accordion__item-header').on('click', function () {
105        $(this).parent('.accordion-item').addClass('opened');
106        $(this).parent('.accordion-item').siblings().removeClass('opened');
107    })
108    $('.accordion__item-title').on('click', function (e) {
109        e.preventDefault()
110    });
111
112    /*==========   Load More Items  ==========*/
113    function loadMore(loadMoreBtn, loadedItem) {
114        $(loadMoreBtn).on('click', function (e) {
115            e.preventDefault();
116            $(this).fadeOut();
117            $(loadedItem).fadeIn();
118        })
119    }
120
121    loadMore('.loadMoreportfolio', '.portfolio-hidden > .portfolio-item');
122
123    /*==========   Slick Carousel ==========*/
124    $('.slick-carousel').slick();
125
126    $('.slider-with-navs').slick({
127        slidesToShow: 1,
128        slidesToScroll: 1,
129        arrows: false,
130        fade: true,
131        dots: true,
132        asNavFor: '.slider-nav'
133    });
134    $('.slider-nav').slick({
135        slidesToShow: 2,
136        slidesToScroll: 1,
137        asNavFor: '.slider-with-navs',
138        dots: false,

139        arrows: false,
140        focusOnSelect: true,
141        centerMode: true,
142        centerPadding: '50px',
143        responsive: [{
144            breakpoint: 992,
145            settings: {
146                slidesToShow: 1,
147                slidesToScroll: 1,
148            }
149        }]
150    });
151
152    /*----------  slick Carousel with Filter  ----------*/
153    $('#slick-filter-buttons .nav__link').on('click', function (e) {
154        e.preventDefault();
155        $(this).addClass('active').siblings().removeClass('active');
156        var key = "." + $(this).data('value');
157
158        $('#filter-carousel').slick('slickUnfilter');
159        $('#filter-carousel').slick('slickFilter', key).slick('refresh');
160        $('#filter-carousel').slick('slickGoTo', 0);
161    });
162
163
164    /*==========  Popup Video  ==========*/
165    $('.popup-video').magnificPopup({
166        mainClass: 'mfp-fade',
167        removalDelay: 0,
168        preloader: false,
169        fixedContentPos: false,
170        type: 'iframe',
171        iframe: {
172            markup: '<div class="mfp-iframe-scaler">' +
173                '<div class="mfp-close"></div>' +
174                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
175                '</div>',
176            patterns: {
177                youtube: {
178                    index: 'youtube.com/',
179                    id: 'v=',
180                    src: '//www.youtube.com/embed/%id%?autoplay=1'
181                }
182            },
183            srcAction: 'iframe_src',
184        }
185    });
186    $('.popup-gallery-item').magnificPopup({
187        type: 'image',
188        tLoading: 'Loading image #%curr%...',
189        mainClass: 'mfp-img-mobile',
190        gallery: {
191            enabled: true,
192            navigateByImgClick: true,
193            preload: [0, 1]
194        },
195        image: {
196            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
197        }
198    });
199
200    /*==========   counterUp  ==========*/
201    $(".counter").counterUp({
202        delay: 10,
203        time: 4000
204    });
205
206    /*==========  NiceSelect Plugin  ==========*/
207    $('select').niceSelect();
208
209    /*==========   portfolio Filtering and Sorting  ==========*/
210    $("#filtered-items-wrap").mixItUp();
211    $(".portfolio-filter li a").on("click", function (e) {
212        e.preventDefault();
213    });
214
215    var contactForm = $("#contactForm"),
216        contactResult = $('.contact-result');
217    contactForm.validate({
218        debug: false,
219        submitHandler: function (contactForm) {
220            $(contactResult, contactForm).html('Please Wait...');
221            $.ajax({
222                type: "POST",
223                url: "assets/php/contact.php",
224                data: $(contactForm).serialize(),
225                timeout: 20000,
226                success: function (msg) {
227                    $(contactResult, contactForm).html('<div class="alert alert-success" role="alert"><strong>Thank you. We will contact you shortly.</strong></div>').delay(3000).fadeOut(2000);
228                },
229                error: $('.thanks').show()
230            });
231            return false;
232        }
233    });
234});