Merge branch 'hotfix/popup-fix' into 'master'

не работают попапы на некоторых устройствах See merge request lilschool/site!363
7 years ago · c9c304ccaa
parent 25754326cc 426304e4fe
commit c9c304ccaa
1 changed files with 135 additions and 135 deletions
--- a/web/src/js/modules/popup.js
+++ b/web/src/js/modules/popup.js
@ -15,6 +15,38 @@ $(document).ready(function () {
        popup = $('.popup.visible.open'),
        prevPopup = null;

+    function showPopup(){
+        if(! popup && popupName){
+            popup = $(popupName);
+        }
+        body.addClass('no-scroll');
+        popup.addClass('open');
+        return new Promise((resolve) => {
+          setTimeout(function(){
+              popup.addClass('visible');
+              resolve();
+              $(document).trigger('popup-opened', [popup]);
+          }, 100);
+        });
+    }
+
+    function hidePopup(){
+        body.removeClass('no-scroll');
+        popup.removeClass('visible');
+        popup.data('next-url', null);
+
+        if($('#password-reset__sent').is(':visible')) {
+            window.location.reload();
+        }
+        return new Promise((resolve) => {
+            setTimeout(function(){
+                popup.removeClass('open');
+                resolve();
+                $(document).trigger('popup-closed', [popup]);
+            }, 300);
+        });
+    }
+
    // CAPTURE EMAIL
    const EMAIL_CAPTURED_COOKIE = 'email-captured';

@ -67,104 +99,6 @@ $(document).ready(function () {
        });
    };

-    $(".js-video-modal").each(function(){
-        const $this = $(this);
-        const url = $this.data('videoUrl');
-        if(! url){
-            return;
-        }
-        let data;
-        let videoId;
-        let channel;
-        if(url.indexOf('youtu.be') > -1){
-            videoId = url.split('youtu.be/')[1];
-            channel = 'youtube';
-        }
-        if(url.indexOf('youtube.com') > -1 && url.indexOf('watch') > -1){
-            const m = /[?&]v=([^&]+)(&.+)?$/.exec(url);
-            channel = 'youtube';
-            videoId = m && m[1];
-        }
-        if(url.indexOf('vimeo.com') > -1){
-            const split = url.split('/');
-            channel = 'vimeo';
-            videoId = split[split.length - 1];
-        }
-        $this.attr('data-video-id', videoId);
-        $this.attr('data-video-url', '');
-        $this.attr('data-channel', channel);
-        $this.modalVideo({ channel, jsapi: true });
-    });
-
-    $(".js-video-modal").on('player-created', e => {
-        if(window.LIL_STORE.user.id || $(e.target).data('trialLesson') && Cookies.get(EMAIL_CAPTURED_COOKIE)
-          || ! $(e.target).data('freeLesson')){
-            return;
-        }
-        const channel = $(e.target).data('channel');
-        const player = e.detail.player;
-        let timeout = null;
-        const freeLesson = $(e.target).data('freeLesson')
-        const interval = 1000 * (freeLesson ? 180 : 60); // 1 min
-        const pauseVideo = () => {
-            timeout = setTimeout(() => {
-                clearTimeout(timeout);
-                const $modalVideo = $('.modal-video');
-                if(! $modalVideo.length){
-                    return;
-                }
-                if(channel == 'youtube'){
-                    player.pauseVideo();
-                }
-                else if(channel == 'vimeo'){
-                    player.pause();
-                }
-                $modalVideo.css('opacity', 0);
-                if(freeLesson){
-                    popup = $('.js-popup-auth');
-                    showPopup();
-                }
-                else{
-                    captureEmail(true).then(() => {
-                        $modalVideo.css('opacity', 1);
-                        Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
-                        if(channel == 'youtube'){
-                            player.playVideo();
-                        }
-                        else if(channel == 'vimeo'){
-                            player.play();
-                        }
-                    }).catch(() => {
-                        $('.modal-video').remove();
-                    });
-                }
-            }, interval);
-        }
-        if(channel == 'youtube'){
-            window.onYTPlayerStateChange = (event) => {
-                if(event.data == YT.PlayerState.PLAYING && ! timeout){
-                    pauseVideo();
-                }
-                if(event.data == YT.PlayerState.ENDED && timeout){
-                    clearTimeout(timeout);
-                }
-            }
-            player.addEventListener('onStateChange', 'onYTPlayerStateChange');
-        }
-        else if (channel == 'vimeo'){
-            player.on('play', () => {
-                if(! timeout){
-                    pauseVideo();
-                }
-            })
-            player.on('ended', () => {
-                if(timeout){
-                    clearTimeout(timeout);
-                }
-            });
-        }
-    });
-
    body.on('click', '[data-popup]', function(e){
        const $this = $(this);
        let data = $this.data('popup');
@ -176,7 +110,7 @@ $(document).ready(function () {

        popup = $(data);

-        if(data === '.js-popup-buy') {
+        if(data == '.js-popup-buy') {
            popup.data('date-start', $this.data('date-start') || '');
            popup.data('day', $this.data('day') || '');
            popup.data('is-camp', $this.data('is-camp') || '');
@ -229,7 +163,7 @@ $(document).ready(function () {
            updateCart();
        }

-        if(data === '.js-popup-course-buy'){
+        if(data == '.js-popup-course-buy'){
            const updateCourseCart = () => {
                const $orderPrice = popup.find('.order_price_text');
                const useBonuses = $bonusesCheckbox.prop('checked');
@ -270,7 +204,7 @@ $(document).ready(function () {
            popup.data('next-url', nextUrl);
        }

-        if( data === '.js-popup-enter-gift-code') {
+        if( data == '.js-popup-enter-gift-code') {
            const $giftCode = popup.find('.enter-gift-code__code');
            const $giftError = popup.find('.enter-gift-code__error');
            $giftCode.val('');
@ -287,7 +221,7 @@ $(document).ready(function () {

        const showDef = showPopup();

-        if( data === '.js-popup-auth') {
+        if( data == '.js-popup-auth') {
            showDef.then(() => {
                const login = popup.find('.js-auth-login');
                const pass = popup.find('.js-auth-pass');
@ -296,7 +230,7 @@ $(document).ready(function () {
            });
        }

-        if(data === '.js-popup-ref-link') {
+        if(data == '.js-popup-ref-link') {
            showDef.then(() => {
                $('#referrer-url').select();
            });
@ -333,6 +267,104 @@ $(document).ready(function () {
        showPopup();
    }

+    $(".js-video-modal").each(function(){
+        const $this = $(this);
+        const url = $this.data('videoUrl');
+        if(! url){
+            return;
+        }
+        let data;
+        let videoId;
+        let channel;
+        if(url.indexOf('youtu.be') > -1){
+            videoId = url.split('youtu.be/')[1];
+            channel = 'youtube';
+        }
+        if(url.indexOf('youtube.com') > -1 && url.indexOf('watch') > -1){
+            const m = /[?&]v=([^&]+)(&.+)?$/.exec(url);
+            channel = 'youtube';
+            videoId = m && m[1];
+        }
+        if(url.indexOf('vimeo.com') > -1){
+            const split = url.split('/');
+            channel = 'vimeo';
+            videoId = split[split.length - 1];
+        }
+        $this.attr('data-video-id', videoId);
+        $this.attr('data-video-url', '');
+        $this.attr('data-channel', channel);
+        $this.modalVideo({ channel, jsapi: true });
+    });
+
+    $(".js-video-modal").on('player-created', e => {
+        if(window.LIL_STORE.user.id || $(e.target).data('trialLesson') && Cookies.get(EMAIL_CAPTURED_COOKIE)
+          || ! $(e.target).data('freeLesson')){
+            return;
+        }
+        const channel = $(e.target).data('channel');
+        const player = e.detail.player;
+        let timeout = null;
+        const freeLesson = $(e.target).data('freeLesson')
+        const interval = 1000 * (freeLesson ? 180 : 60); // 1 min
+        const pauseVideo = () => {
+            timeout = setTimeout(() => {
+                clearTimeout(timeout);
+                const $modalVideo = $('.modal-video');
+                if(! $modalVideo.length){
+                    return;
+                }
+                if(channel == 'youtube'){
+                    player.pauseVideo();
+                }
+                else if(channel == 'vimeo'){
+                    player.pause();
+                }
+                $modalVideo.css('opacity', 0);
+                if(freeLesson){
+                    popup = $('.js-popup-auth');
+                    showPopup();
+                }
+                else{
+                    captureEmail(true).then(() => {
+                        $modalVideo.css('opacity', 1);
+                        Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
+                        if(channel == 'youtube'){
+                            player.playVideo();
+                        }
+                        else if(channel == 'vimeo'){
+                            player.play();
+                        }
+                    }).catch(() => {
+                        $('.modal-video').remove();
+                    });
+                }
+            }, interval);
+        }
+        if(channel == 'youtube'){
+            window.onYTPlayerStateChange = (event) => {
+                if(event.data == YT.PlayerState.PLAYING && ! timeout){
+                    pauseVideo();
+                }
+                if(event.data == YT.PlayerState.ENDED && timeout){
+                    clearTimeout(timeout);
+                }
+            }
+            player.addEventListener('onStateChange', 'onYTPlayerStateChange');
+        }
+        else if (channel == 'vimeo'){
+            player.on('play', () => {
+                if(! timeout){
+                    pauseVideo();
+                }
+            })
+            player.on('ended', () => {
+                if(timeout){
+                    clearTimeout(timeout);
+                }
+            });
+        }
+    });
+
    if(window.LIL_STORE.user.id && window.LIL_STORE.user.hasNewBonuses && window.LIL_STORE.user.bonus > 0){
        $(document).ready(() => {
            popup = $('.js-popup-bonuses-came');
@ -382,38 +414,6 @@ $(document).ready(function () {
        });
    }

-    function showPopup(){
-        if(! popup && popupName){
-            popup = $(popupName);
-        }
-        body.addClass('no-scroll');
-        popup.addClass('open');
-        return new Promise((resolve) => {
-          setTimeout(function(){
-              popup.addClass('visible');
-              resolve();
-              $(document).trigger('popup-opened', [popup]);
-          }, 100);
-        });
-    }
-
-    function hidePopup(){
-        body.removeClass('no-scroll');
-        popup.removeClass('visible');
-        popup.data('next-url', null);
-
-        if($('#password-reset__sent').is(':visible')) {
-            window.location.reload();
-        }
-        return new Promise((resolve) => {
-            setTimeout(function(){
-                popup.removeClass('open');
-                resolve();
-                $(document).trigger('popup-closed', [popup]);
-            }, 300);
-        });
-    }
-
    function updateCart(){
        var link = popup.find('.but_btn_popup').data('link');
        var $order = popup.find('.order');