LilSchool/web/src/js/modules/popup.js

import $ from 'jquery';
import {api} from './api';

var selectedWeekdays = {};
$(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=([a-zA-Z]+)(&.)?/.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.modalVideo({ channel });
    });

    let body = $('body'),
        popup = $('.popup.visible.open');

    body.on('click', '[data-popup]', function(e){
        const $this = $(this);
        let data = $this.data('popup');
        if(! data) {
          return true;
        }
        e.preventDefault();
        e.stopPropagation();

        popup = $(data);
        showPopup();

        let is_extend = false;

        if(data === '.js-popup-buy') {
            console.log('reset selected');
            $('[data-day]').prop('checked', false);

            if ($this.text() === 'продлить') {
                //data-purchased
                //restore purchased selection
                console.log('restore purchased');
                $('[data-purchased]').each(function(){
                    $('[data-day='+$(this).data('purchased')+']').prop('checked', true);
                });
                is_extend = true;
            }
            if(! window.LIL_STORE.user.id) {
                const $btn = popup.find('.buy__btn');
                $btn.click(function(event) {
                    event.preventDefault();
                    hidePopup().then(() => {
                        popup = $('.js-popup-auth');
                        popup.data('next-url', $btn.attr('href'));
                        showPopup();
                    });
                });
            }
        }
        if( data === '.js-popup-auth') {
            let nextUrl = $this.data('auth-next-url');
            if(nextUrl === 'href') {
                nextUrl = $this.attr('href');
            }
            popup.data('next-url', nextUrl);
        }

        if($this.data('day')) {
            let day = $this.data('day');
            $('[data-day='+day+']').prop('checked', true);
        }

        if(!is_extend && !$this.data('day')) {
            console.log('check all');
            $('[data-day]').each(function(){
                $(this).prop('checked', true);
            });
        }

        updateCart();
    });

    $('.js-popup-close').on('click', function(e){
        e.preventDefault();
        hidePopup();
    });

    body.on('click', '.js-outer', function(){
        if (popup !== undefined) {
            hidePopup();
        }
    });

    $('.js-popup-wrap').on('click', function(e){
        e.stopPropagation();
    });

    $(document).keyup(function(e){
      if (e.keyCode === 27) hidePopup();
    });

    function showPopup(){
        body.addClass('no-scroll');
        popup.addClass('open');
        return new Promise((resolve) => {
          setTimeout(function(){
              popup.addClass('visible');
              resolve();
          }, 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();
            }, 300);
        });
    }

    $(document).on('change', '[data-day]', function(){
        updateCart();
    });

    $(document).on('change', '[data-bonuses]', function(){
        updateCart();
    });

    function updateCart(){
        var $orderPrice = $('.order_price_text');
        var days = ['', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
        var weekdays = [], daysText = [];
        var $bonuses = $('.buy__bonuses');
        var $bonusesCheckbox = $('[data-bonuses]');
        var useBonuses = $bonusesCheckbox.prop('checked');
        var bonuses = +$bonusesCheckbox.data('bonuses');
        $('[data-day]').each(function() {
            var weekday = $(this).data('day');
            if($(this).is(':checked')) {
                weekdays.push(weekday);
                daysText.push(days[weekday]);
            }
        });

        if(weekdays.length){
            api.getPaymentAmount({ user: window.LIL_STORE.user.id, weekdays: weekdays })
            .then((response) => {
                var text = '';
                var amount = +response.data.amount;
                if(bonuses && bonuses >= amount){
                  $bonuses.show();
                }
                if(useBonuses){
                    amount = 0;
                }
                if(response.data.price != amount) {
                    text = '<del>' + response.data.price+'</del> ' + amount + 'р.';
                } else {
                    text = amount + 'p.';
                }
                $orderPrice.html(text);
            });
        }
        else {
            $orderPrice.html('0p.');
        }

        $('.order__days').html((daysText.length) ? daysText.join(', '):'Ничего не выбрано');
        var link = $('.but_btn_popup').data('link');
        link = link+'?'+decodeURIComponent($.param({weekdays: weekdays, use_bonuses: useBonuses || ''}, true));
        $('.but_btn_popup').attr('href', link);
    }
});