https://aravia.ru/local/templates/main/js/modal-ajax.js

1$(function(){
2
3    //для получение модального окна достаточно добавить на кнопку .js-ajax-modal
4    //data-modal - название фалйа с модалкой, расположенный в /local/templates/main/include/modal
5    //data-modal-id - #idselector модального окна, обязательно с #
6    //также можно вызать напрямую window.modalAjax.getModal он вернет промис при выполнении которого можно обрабатывать данные пришедшие через ajax
7    //и выполнять какие-либо пост обработки
8    //если окно уже загружено(при вовторном клике) запрос делаться не будет и вызовется старое окно
9    //если нужно каждый раз новое окно, в кнопку закрыти окна .js-modal-close добавить data-modal-remove - #idselector модального окна
10    const isAuthPage = !!document.getElementById('aravia-auth-app');
11
12     window.modalAjax = {
13        init: function(){
14            if (isAuthPage) return;
15            let url = new URL(location.href);
16            let showAuth = url.searchParams.get('showAuth');
17            let showRegistration = url.searchParams.get('showRegistration');
18            if (showAuth == 'Y' || showRegistration == 'Y') {
19                let promise = modalAjax.getModal('auth', '#modalAuth');
20                if(!!promise){
21                    promise.then(function(data){
22                        if(!!data){
23                            $('body').append(data);
24                            modalAjax.update('#modalAuth');
25                        }
26                        $('body').removeClass('loading');
27                    });
28                }
29            }
30        },
31        initEvent: function (){
32            $(document).on('click', '.js-ajax-modal', function(e){
33                e.preventDefault();
34                let that = $(this);
35                let modal = that.attr('data-modal');
36                let modalId = that.attr('data-modal-id');
37                let promise = modalAjax.getModal(modal, modalId);
38                if(!!promise){
39                    promise.then(function(data){
40                        //let html = $(data).html();
41                        if(!!data){
42                            $('body').append(data);
43                            modalAjax.update(modalId);
44                        }
45                        $('body').removeClass('loading');
46                    });
47                }
48
49            });
50            $(document).on('click', '.js-modal-close', function(e){
51                e.preventDefault();
52                let idRemoveModal = $(this).attr('data-modal-remove');
53                if(idRemoveModal){
54                    $(idRemoveModal).remove();
55                }
56                modalAjax.clearPendingIntentIfAuthOpen();
57                modalAjax.closeAll();
58            });
59            // закрытие только если mousedown и click оба на подложке - иначе выделение текста ложно триггерит закрытие
60            let modalMousedownOnBackdrop = false;
61            $(document).on('mousedown', '.js-modal-block', function(e){
62                modalMousedownOnBackdrop = e.target === this;
63            });
64            $(document).on('click', '.js-modal-block', function(e){
65                if (e.target === this && modalMousedownOnBackdrop) {
66                    modalAjax.clearPendingIntentIfAuthOpen();
67                    modalAjax.closeAll();
68                }
69            });
70            $(document).on('keyup', function(e){
71                if (e.key === 'Escape' && $('.js-modal-block:visible').length) {
72                    modalAjax.clearPendingIntentIfAuthOpen();
73                    modalAjax.closeAll();
74                }
75            });
76        },
77        closeAll: function(){
78            $('.js-modal-block').hide();
79            $('body').removeClass('modal-open');
80            $('.modal-backdrop').remove();
81        },
82        // сброс PendingIntent при явном закрытии модалки авторизации пользователем
83        clearPendingIntentIfAuthOpen: function(){
84            if ($('#modalAuth').is(':visible')) {
85                window.PendingIntent.clear();
86            }
87        },
88        update: function(modalId){
89            let modal = $(modalId);
90            if(modal.length > 0){
91                $('body').addClass('modal-open');
92                $('body').append('<div class="modal-backdrop fade show"></div>');
93                modal.addClass('show').show();
94            }
95        },
96        getModal: function(modal, modalId){
97            let promise = false;

98            if(!!modal && !!modalId){
99                if($(modalId).length > 0){
100                    modalAjax.update(modalId);
101                }
102                else{
103                    $('body').addClass('loading');
104                    let url = '/local/templates/main/include/modal/'+modal+'.php';
105                    promise = modalAjax.ajax(url);
106                }
107            }
108            return promise;
109        },
110         getModalWithData: function(modal, modalId, requestData){
111             let promise = false;
112             if(!!modal && !!modalId){
113                 if($(modalId).length > 0){
114                     modalAjax.update(modalId);
115                 }
116                 else{
117                     $('body').addClass('loading');
118                     let url = '/local/templates/main/include/modal/'+modal+'.php';
119                     promise = modalAjax.ajax(url, requestData);
120                 }
121             }
122             return promise;
123         },
124         ajax: function(url, requestData = {}){
125             return $.ajax({
126                 type:'POST',
127                 url: url,
128                 data: requestData,
129                 error:function(data){
130                     $('body').removeClass('loading');
131                     console.log('error');
132                     console.log(data); //ошибки сервера
133                 }
134             });
135         }
136    }
137    window.modalAjax.init();
138    window.modalAjax.initEvent();
139
140});