https://www.infomir.eu/js/js_new_page/common.js

1
2
3
4jQuery(window).scroll(function() {
5    if ($('.pl.animated').length>0){
6        $('.pl.animated').get(0).play()
7        $('.pl').removeClass('pl')
8    }
9    h=$(window).height();
10    // проверка на докрутку до определенного элемента
11    //var scroll_picca =jQuery('.section1').offset().top;
12    //console.log(scroll_picca) ;// выводим в консоль смещение  элемента пицца
13    //если мы докрутили до нужного элемента
14    // if (jQuery('.productComp-screen3').length>0){
15    //     if (jQuery(this).scrollTop() > jQuery('.productComp-screen3').offset().top && jQuery(this).scrollTop() < jQuery('.productComp-screen3').offset().top+jQuery('.productComp-screen3').height()) {
16    //         // создаем эффекты и анимацию
17    //         $(".comparison-screen1.drift").fadeIn(200);
18    //
19    //     }else{
20    //         $(".comparison-screen1.drift").fadeOut(200);
21    //
22    //     }
23    // }
24});
25
26$("body").on("click", "a[href^='#']", function(event) {
27    event.preventDefault();
28
29    var id = $(this).attr('href');
30
31    // Прерываем если после # ничего нет
32    if (!id || id === '#') return;
33
34    var $target = $(id);
35
36    // Прерываем если элемент не найден
37    if (!$target.length) return;
38
39    var top = $target.offset().top;
40
41    $('body,html').animate({ scrollTop: top }, 1500);
42    $('.scrolled').fadeIn(300);
43    setTimeout(function() {
44        $('.scrolled').fadeOut(300);
45    }, 1200);
46});
47
48
49
50var divisor = document.getElementById("divisor"),
51slider = document.getElementById("slider");
52function moveDivisor() { 
53  divisor.style.width = slider.value+"%";
54}
55
56$('.tg li').click(function(){
57  $('.tg li').removeClass('active')
58  $(this).addClass('active')
59  ind=$(this).index();
60  $('.sl .tv-wrapp').fadeOut(0)
61  $('.sl .tv-wrapp:eq('+(ind)+')').fadeIn(300)
62})
63
64$('.accordion .top span').click(function(){
65  btm=$(this).parent().next();
66  $('.accordion .top span').not(this).removeClass('active')
67  $('.accordion .bottom').not(btm).slideUp(500)
68  $(this).toggleClass('active')
69
70  btm.slideToggle(500)
71})
72
73
74$('.faq .top').click(function(){
75  btm=$(this).next();
76  notme=$(this)
77  $('.faq .top').not(notme).removeClass('active')
78  $('.faq .bottom-wrap').not(btm).slideUp(500)
79  $(this).toggleClass('active')
80
81  btm.slideToggle(500)
82})
83
84
85$('.play').magnificPopup({
86 type: 'iframe'
87 /*tLoading: 'Загрузка изображения #%curr%...',
88 gallery: {
89     enabled: true,
90     navigateByImgClick: true,
91     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
92 }*/
93 });
94
95
96
97
98
99
100//slider
101
102jQuery(document).ready(function($){
103    var dragging = false,
104        scrolling = false,
105        resizing = false;
106    //cache jQuery objects
107    var imageComparisonContainers = $('.cd-image-container');
108    //check if the .cd-image-container is in the viewport 
109    //if yes, animate it
110    checkPosition(imageComparisonContainers);
111    $(window).on('scroll', function(){
112        if( !scrolling) {
113            scrolling =  true;
114            ( !window.requestAnimationFrame )
115                ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)
116                : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});
117        }
118    });
119    
120    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
121    imageComparisonContainers.each(function(){
122        var actual = $(this);
123        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
124    });
125
126    //upadate images label visibility
127    $(window).on('resize', function(){
128        if( !resizing) {
129            resizing =  true;
130            ( !window.requestAnimationFrame )
131                ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)
132                : requestAnimationFrame(function(){checkLabel(imageComparisonContainers

132);});
133        }
134    });
135
136    function checkPosition(container) {
137        container.each(function(){
138            var actualContainer = $(this);
139            if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
140                actualContainer.addClass('is-visible');
141            }
142        });
143
144        scrolling = false;
145    }
146
147    function checkLabel(container) {
148        container.each(function(){
149            var actual = $(this);
150            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
151            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
152        });
153
154        resizing = false;
155    }
156
157    //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
158    function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
159        dragElement.on("mousedown vmousedown", function(e) {
160            dragElement.addClass('draggable');
161            resizeElement.addClass('resizable');
162
163            var dragWidth = dragElement.outerWidth(),
164                xPosition = dragElement.offset().left + dragWidth - e.pageX,
165                containerOffset = container.offset().left,
166                containerWidth = container.outerWidth(),
167                minLeft = containerOffset + 10,
168                maxLeft = containerOffset + containerWidth - dragWidth - 10;
169            
170            dragElement.parents().on("mousemove vmousemove", function(e) {
171                if( !dragging) {
172                    dragging =  true;
173                    ( !window.requestAnimationFrame )
174                        ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)
175                        : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});
176                }
177            }).on("mouseup vmouseup", function(e){
178                dragElement.removeClass('draggable');
179                resizeElement.removeClass('resizable');
180            });
181            e.preventDefault();
182        }).on("mouseup vmouseup", function(e) {
183            dragElement.removeClass('draggable');
184            resizeElement.removeClass('resizable');
185        });
186    }
187
188    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
189        var leftValue = e.pageX + xPosition - dragWidth;   
190        //constrain the draggable element to move inside his container
191        if(leftValue < minLeft ) {
192            leftValue = minLeft;
193        } else if ( leftValue > maxLeft) {
194            leftValue = maxLeft;
195        }
196
197        var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
198        
199        $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
200            $(this).removeClass('draggable');
201            resizeElement.removeClass('resizable');
202        });
203
204        $('.resizable').css('width', widthValue); 
205
206        updateLabel(labelResizeElement, resizeElement, 'left');
207        updateLabel(labelContainer, resizeElement, 'right');
208        dragging =  false;
209    }
210
211    function updateLabel(label, resizeElement, position) {
212        if(position == 'left') {
213            ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
214        } else {
215            ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
216        }
217    }
218});
219//slider end
220
221
222st=-45;
223
224$(function(){
225   var mouseX = 0, mouseY = 0; 
226   // Визначає межі, за якими буде рухатися об'єкт
227   $(document).on('mousemove','.move-wrap',function(e){
228       if (searchModuleRoot) {
229           fuf=searchModuleRoot.querySelector('.animated-container').style.display="none";
230       }
231  $('#button-load .fake').fadeOut(0)
232        $('.cur').css('opacity','1')
233      var offset = $('.move-wrap').offset();
234      mouseX = Math.min(e.pageX - offset.left);
235      mouseY = Math.min(e.pageY - offset.top);

236      // Шукає координати курсора
237      if (mouseX < 0) mouseX = 0;
238      // З якого моменту (координат) починати рух за курсором
239      if (mouseY < 0) mouseY = 0;
240      var follower = $('.cur');
241      follower.css({left:mouseX, top:mouseY-60});
242      // Якщо курсор знаходиться поза веб-сторінки на момент завантаження, то встановить об'єкт в координатах x = 0, y = 0.
243  
244   });
245   $(document).on('mouseleave','.move-wrap',function(e){
246        $('.cur').css('opacity','0')
247        setTimeout(function(){
248            if (searchModuleRoot) {
249                fuf = searchModuleRoot.querySelector('.animated-container').style.display = "block";
250            }
251    $('#button-load .fake').fadeIn(0)
252  },500)
253    })
254
255const searchModule = document.querySelector('#view3d');
256const searchModuleRoot = searchModule && searchModule.shadowRoot;
257
258if (searchModuleRoot) {
259    const title = searchModuleRoot.querySelector('.bar');
260    var time = 1;
261    var initialOffset = '440';
262    var i = 1
263    int=setInterval(function(){
264      load=title.getAttribute('style');
265      load=parseFloat(load.replace( /[^\d\.]*/g, ''));
266      console.log(load);
267      //$('.circle_animation').css('stroke-dashoffset',440-(load*440));
268      if (load==1){
269        clearInterval(int)
270        $('.cur').addClass('nofake')
271      }
272    },50)
273  
274}
275
276/*$('.move-wrap').hover(function(){
277  fuf=searchModuleRoot.querySelector('.animated-container').style.display="none";
278  $('#button-load .fake').fadeOut(0)
279  //fuf.fadeOut(0)
280},function(){
281  setTimeout(function(){
282    fuf=searchModuleRoot.querySelector('.animated-container').style.display="block";
283    $('#button-load .fake').fadeIn(0)
284  },500)
285  
286  //searchModuleRoot.querySelector('.animated-container').css('display','block');
287})*/
288
289
290
291/*$('.move-wrap').on('mousedown', function(e){
292    $('.move-wrap').on('mousemove', function(e){
293        //$('#view3d').attr('camera-orbit','-'+mouseX+'deg 75deg 9m')
294        $('#view3d').find('.userInput').addClass('noh')
295    });  
296}); 
297$('.move-wrap').mouseup(function(){
298    $('.move-wrap').off('mousemove')
299    $('#view3d').find('.userInput').removeClass('noh')
300});*/
301/*
302var $body = $('.move-wrap');
303$body.on('mousedown', function (evt) {
304  $body.on('mouseup mousemove', function handler(evt) {
305    if (evt.type === 'mouseup') {
306      //console.log('click')
307    } else {
308      $('#view3d').attr('camera-orbit','-'+mouseX+'deg 75deg 9m')
309    }
310    $body.off('mouseup mousemove', handler);
311  });
312});*/
313
314
315
316   // В даному випадку це значення визначає, наскільки плавно і швидко буде відбуватися рух
317});
318
319
320$(document).ready(function(){
321
322if ($('.auto-carousel').length>0){
323  var $owl = $('.auto-carousel');
324
325
326$owl.children().each( function( index ) {
327  $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
328});
329
330$owl.owlCarousel({
331  center: false,
332  loop: true,
333  autoplay:true,
334autoplayTimeout:3000,
335autoplayHoverPause:true,
336margin:30,
337    nav: false,
338    dont:false,
339    pagination : false,
340    responsiveClass:true,
341    responsive:{
342      300:{
343            items:1
344        },
345
346        993:{
347            items:1
348        }
349    }
350
351});
352}
353
354if ($('.slider.owl-carousel').length>0){
355  var $owl = $('.slider.owl-carousel');
356
357
358$owl.children().each( function( index ) {
359  $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
360});
361/*$owl.owlCarousel({
362  center: false,
363  loop: true,
364  autoplay:true,
365autoplayTimeout:3000,
366autoplayHoverPause:true,
367margin:30,
368    nav: true,
369    dont:false,
370    pagination : false,
371    responsiveClass:true,
372    onInitialized:carouselInitialized($owl),
373    navText: ['<img src="img/left-arrow.svg">', '<img src="img/right-arrow.svg">'],
374    responsive:{
375      300:{
376            items:1
377        },
378
379        993:{
380            items:1
381        }
382    }
383
384});*/
385//$('.slider').append('<div class="slider-counter"></div>')
386

387$(".slider.owl-carousel")
388  .on("initialized.owl.carousel changed.owl.carousel", function(e) {
389    if (!e.namespace) {
390      return;
391    }
392    $(this).parent().find('.slider-counter').text(
393      e.relatedTarget.relative(e.item.index) + 1 + "/" + e.item.count
394    );
395  }).owlCarousel({
396  center: false,
397  loop: true,
398  autoplay:false,
399//autoplayTimeout:3000,
400//autoplayHoverPause:true,
401margin:30,
402    nav: true,
403    dont:false,
404    pagination : false,
405    responsiveClass:true,
406    navText: ['<img src="https://www.infomir.eu/images/img_new_page/left-arrow.svg">', '<img src="https://www.infomir.eu/images/img_new_page/right-arrow.svg">'],
407    responsive:{
408      300:{
409            items:1,
410            nav:false,
411            dots:true
412        },
413
414        1025:{
415            items:1,
416            dots:false
417        }
418    }
419})
420
421}
422});
423
424if ($('.parthners-slider.owl-carousel').length>0){
425  var $owl = $('.parthners-slider.owl-carousel');
426
427
428$owl.children().each( function( index ) {
429  $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
430});
431
432$owl.owlCarousel({
433    nav: true,
434    center: false,
435    loop: true,
436    autoplay:true,
437    autoplayTimeout:3000,
438    autoplayHoverPause:true,
439    margin:30,
440    pagination : false,
441    responsiveClass:true,
442    navText: ['<img src="https://www.infomir.eu/images/img_new_page/left-arrow.svg">', '<img src="https://www.infomir.eu/images/img_new_page/right-arrow.svg">'],
443    responsive:{
444      300:{
445            items:1
446        },
447
448        993:{
449            items:3,
450        }
451    }
452
453});
454}
455
456function getBase64(file) {
457   var reader = new FileReader();
458   reader.readAsDataURL(file);
459   reader.onload = function () {
460     //console.log(reader.size);
461     $('.logo1 img').attr('src',reader.result);
462     $('.logo2 img').attr('src',reader.result);
463   };
464   reader.onerror = function (error) {
465     console.log('Error: ', error);
466   };
467}
468
469$('input[type="file"]').change(function(){
470    var file = document.querySelector('input[type="file"]').files[0];
471    if (file.size>200000){
472        $('.fileerr').slideDown(200)
473    }else{
474        $('.fileerr').slideUp(200)
475      getBase64(file); // prints the base64 string  
476    }
477    
478})
479
480
481$(document).on('click','.top-popup span, .popup-closer',function(){
482    $('.compare-popup-wrap').fadeOut(200)
483})
484$(document).on('click','.add-new',function(){
485    $('.compare-popup-wrap').fadeIn(200)
486})
487
488
489var appIcons = document.querySelectorAll('.apps .right>img');
490
491if (appIcons.length != 0) {
492
493    var i = 0;
494
495    setInterval(() => {
496        if (i == 0) {
497            appIcons[appIcons.length - 1].style.cssText = `
498                transform: scale(1);
499                z-index: 1;
500            `
501        }
502        if (i < appIcons.length) {
503            appIcons[i].style.cssText = `
504                transform: scale(1.5);
505                z-index: 5;
506            `
507            if (i >= 1) {
508                appIcons[i - 1].style.cssText = `
509                transform: scale(1);
510                z-index: 1;
511            `
512            }
513            i++;
514            return null;
515        }
516        i = 0;
517    }, 1000)
518}
519
520var blockOut = document.querySelector('#chars .pd-productComp');
521var block = document.querySelector('.comparison-screen1');
522
523if (blockOut || block) {
524
525    var config = {
526        rootMargin: '-200px 0px 0px 0px',
527    };
528
529    observer = new IntersectionObserver((entries) => {
530        entries.forEach(entry => {
531            if (entry.intersectionRatio > 0) {
532                $(".comparison-screen1.drift").fadeOut(200);
533            }else {
534                if (document.documentElement.scrollTop > 300){
535                    $(".comparison-screen1.drift").fadeIn(200);
536                }
537            }
538        });
539    }, config);
540
541    observerBottom = new IntersectionObserver((entries) => {
542        entries.forEach(entry => {
543            if (entry.intersectionRatio > 0) {
544                if (document.documentElement.scrollTop > 300) {
545                    $(".comparison-screen1.drift").fadeIn(200);
546                }
547            }else {
548                $(".comparison-screen1.drift").fadeOut(200);
549            }
550        });
551    });
552
553    observer.observe(block);
554    observerBottom.observe(blockOut);
555}