https://apollo-potolok.dp.ua/assets/js/main.js

1$(function() {
2    var counter = 0;
3    setInterval(() => {
4        counter++;
5    }, 1000);
6    $("#home").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'background', direction: 'vertical' });
7    $(".paroller-parallax-right").paroller({ factor: -0.3, factorXs: 0, factorSm: 0, type: 'foreground', direction: 'horizontal' })
8    $(".paroller-parallax-left").paroller({ factor: 0.3, factorXs: 0, factorSm: 0, type: 'foreground', direction: 'horizontal' })
9    $('[name=phone]').mask("+38 (000) 000 00 00");
10
11    $(".js-open-modal").click(function(e) {
12        if ($("body").hasClass("mobile-nav-active")) {
13            $("body").removeClass("mobile-nav-active");
14            $(".mobile-nav-toggle").removeClass("bi-x").addClass('bi-list');
15        }
16    })
17
18    $("[data-submit-calc]").click(function(e) {
19
20        var min = 250;
21        var max = 300;
22
23        var s = $("[name=s]").val(),
24            lustre = $("[name=lustre]").val(),
25            lights = $("[name=lights]").val(),
26            name = $("[name=name]").val(),
27            phone = $("[name=phone]").val();
28
29        console.log(s);
30
31        if (s.length != 0 && s > 10) {
32            var min_val = min * s + lustre * 220 + lights * 100;
33            var max_val = max * s + lustre * 220 + lights * 100;
34        } else {
35            var min_val = min * 10 + lustre * 220 + lights * 100;
36            var max_val = max * 10 + lustre * 220 + lights * 100;
37        }
38
39        $("#min").html(min_val + " <small>грн</small>");
40        $("#max").html(max_val + " <small>грн</small>");
41        $.ajax({
42            type: "POST",
43            url: "assets/php/send.php",
44            data: {
45                s: s,
46                lustre: lustre,
47                lights: lights,
48                name: name,
49                phone: phone,
50                total: "от " + min_val + " до " + max_val,
51                counter: counter
52            },
53        }).then(function(e) {
54            console.log('OK');
55        });
56    });
57
58});
59
60document.addEventListener('DOMContentLoaded', function() {
61
62
63    var modalButtons = document.querySelectorAll('.js-open-modal'),
64        overlay = document.querySelector('.js-overlay-modal'),
65        closeButtons = document.querySelectorAll('.js-modal-close');
66
67
68    modalButtons.forEach(function(item) {
69
70        item.addEventListener('click', function(e) {
71
72            e.preventDefault();
73
74            var modalId = this.getAttribute('data-modal'),
75                modalElem = document.querySelector('.modal_wrapper[data-modal="' + modalId + '"]');
76
77
78            modalElem.classList.add('active');
79            overlay.classList.add('active');
80        }); // end click
81
82    }); // end foreach
83
84
85    closeButtons.forEach(function(item) {
86
87        item.addEventListener('click', function(e) {
88            var parentModal = this.closest('.modal_wrapper');
89
90            parentModal.classList.remove('active');
91            overlay.classList.remove('active');
92        });
93
94    }); // end foreach
95
96
97    document.body.addEventListener('keyup', function(e) {
98        var key = e.keyCode;
99
100        if (key == 27) {
101
102            document.querySelector('.modal_wrapper.active').classList.remove('active');
103            document.querySelector('.overlay').classList.remove('active');
104        };
105    }, false);
106
107
108    overlay.addEventListener('click', function() {
109        document.querySelector('.modal_wrapper.active').classList.remove('active');
110        this.classList.remove('active');
111    });
112
113
114
115
116});
117
118(function() {
119
120
121    "use strict";
122
123    /**
124     * Easy selector helper function
125     */
126    const select = (el, all = false) => {
127        el = el.trim()
128        if (all) {
129            return [...document.querySelectorAll(el)]
130        } else {
131            return document.querySelector(el)
132        }
133    }
134
135    /**
136     * Easy event listener function
137     */
138    const on = (type, el, listener, all = false) => {
139        let selectEl = select(el, all)
140        if (selectEl) {
141            if (all) {
142                selectEl.forEach(e => e.addEventListener(type, listener))
143            } else {
144                selectEl.addEventListener(type, listener)
145            }
146        }
147    }
148
149    /**
150     * Easy on scroll event listener 
151     */
152    const onscroll = (el, listener) => {
153        el.addEventListener('scroll', listener)
154    }
155
156    /**
157     * Navbar links active state on scroll
158     */
159    let navbarlinks = select('#navbar .scrollto', true)
160    const navbarlinksActive = () => {
161        let position = window.scrollY + 200
162        navbarlinks.forEach(navbarlink => {
163            if (!navbarlink.hash) return
164            let section = select(navbarlink.hash)
165            if (!section) return
166            if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
167                navbarlink.classList.add('active')
168            } else {
169                navbarlink.classList.remove('active')
170            }
171        })
172    }
173    window.addEventListener('load', navbarlinksActive)
174    onscroll(document, navbarlinksActive)
175
176    /**
177     * Scrolls to an element with header offset
178     */
179    const scrollto = (el) => {
180        let elementPos = select(el).offsetTop
181        window.scrollTo({
182            top: elementPos,
183            behavior: 'smooth'
184        })
185    }
186
187    /**
188     * Back to top button
189     */
190    let backtotop = select('.back-to-top')
191    if (backtotop) {
192        const toggleBacktotop = () => {
193            if (window.scrollY > 100) {
194                backtotop.classList.add('active')
195            } else {
196                backtotop.classList.remove('active')
197            }
198        }
199        window.addEventListener('load', toggleBacktotop)
200        onscroll(document, toggleBacktotop)
201    }
202
203    /**
204     * Mobile nav toggle
205     */
206    on('click', '.mobile-nav-toggle', function(e) {
207        select('body').classList.toggle('mobile-nav-active')

208        this.classList.toggle('bi-list')
209        this.classList.toggle('bi-x')
210    })
211
212    /**
213     * Scrool with ofset on links with a class name .scrollto
214     */
215    on('click', '.scrollto', function(e) {
216        if (select(this.hash)) {
217            e.preventDefault()
218
219            let body = select('body')
220            if (body.classList.contains('mobile-nav-active')) {
221                body.classList.remove('mobile-nav-active')
222                let navbarToggle = select('.mobile-nav-toggle')
223                navbarToggle.classList.toggle('bi-list')
224                navbarToggle.classList.toggle('bi-x')
225            }
226            scrollto(this.hash)
227        }
228    }, true)
229
230    /**
231     * Scroll with ofset on page load with hash links in the url
232     */
233    window.addEventListener('load', () => {
234        if (window.location.hash) {
235            if (select(window.location.hash)) {
236                scrollto(window.location.hash)
237            }
238        }
239    });
240
241    /**
242     * Preloader
243     */
244    let preloader = select('#preloader');
245    if (preloader) {
246        window.addEventListener('load', () => {
247            preloader.remove()
248        });
249    }
250
251    /**
252     * Hero type effect
253     */
254    const typed = select('.typed')
255    if (typed) {
256        let typed_strings = typed.getAttribute('data-typed-items')
257        typed_strings = typed_strings.split(',')
258        new Typed('.typed', {
259            strings: typed_strings,
260            loop: true,
261            typeSpeed: 100,
262            backSpeed: 50,
263            backDelay: 100
264        });
265    }
266
267    /**
268     * Skills animation
269     */
270    let skilsContent = select('.skills-content');
271    if (skilsContent) {
272        new Waypoint({
273            element: skilsContent,
274            offset: '80%',
275            handler: function(direction) {
276                let progress = select('.progress .progress-bar', true);
277                progress.forEach((el) => {
278                    el.style.width = el.getAttribute('aria-valuenow') + '%'
279                });
280            }
281        })
282    }
283
284    /**
285     * Porfolio isotope and filter
286     */
287    window.addEventListener('load', () => {
288        let portfolioContainer = select('.portfolio-container');
289        if (portfolioContainer) {
290            let portfolioIsotope = new Isotope(portfolioContainer, {
291                itemSelector: '.portfolio-item'
292            });
293
294            let portfolioFilters = select('#portfolio-flters li', true);
295
296            on('click', '#portfolio-flters li', function(e) {
297                e.preventDefault();
298                portfolioFilters.forEach(function(el) {
299                    el.classList.remove('filter-active');
300                });
301                this.classList.add('filter-active');
302
303                portfolioIsotope.arrange({
304                    filter: this.getAttribute('data-filter')
305                });
306                portfolioIsotope.on('arrangeComplete', function() {
307                    AOS.refresh()
308                });
309            }, true);
310        }
311
312    });
313
314    /**
315     * Initiate portfolio lightbox 
316     */
317    const portfolioLightbox = GLightbox({
318        selector: '.portfolio-lightbox'
319    });
320
321    /**
322     * Initiate portfolio details lightbox 
323     */
324    const portfolioDetailsLightbox = GLightbox({
325        selector: '.portfolio-wrap',
326        width: '90%',
327        height: '90vh'
328    });
329
330    /**
331     * Portfolio details slider
332     */
333    new Swiper('.portfolio-details-slider', {
334        speed: 400,
335        loop: true,
336        autoplay: {
337            delay: 5000,
338            disableOnInteraction: false
339        },
340        pagination: {
341            el: '.swiper-pagination',
342            type: 'bullets',
343            clickable: true
344        }
345    });
346
347    /**
348     * Testimonials slider
349     */
350    new Swiper('.testimonials-slider', {
351        speed: 600,
352        loop: true,
353        autoplay: {
354            delay: 5000,
355            disableOnInteraction: false
356        },
357        slidesPerView: 'auto',
358        pagination: {
359            el: '.swiper-pagination',
360            type: 'bullets',
361            clickable: true
362        }
363    });
364
365    /**
366     * Animation on scroll
367     */
368    window.addEventListener('load', () => {
369        AOS.init({
370            duration: 1000,
371            easing: 'ease-in-out',
372            once: true,
373            mirror: false
374        })
375    });
376
377})()