https://grandsad.ru/templates/sad/resource/js/rs.indialog.js

1/* jQuery-плагин, позволяющий открывать во всплывающих окнах любой контент.
2Если будет загружен контент с формой, то данная форма автоматически станет AJAX формой,
3результат отправки такой формы будет отображен в том же окне */
4
5/*
6* Абстрактный объект диалогового окна. По умолчанию используем плагин magnificPopup.
7* Здесь можно объявить любой jQuery плагин для модальных окон
8*/
9$.rsAbstractDialogModule = {
10    /**
11     * Открывает модальное окно
12     * @param html Содержимое окна
13     * @param onOpen callback, вызываемый после открытия окна
14     * @param options объект, любые дополнительные свойства
15     */
16    open: function(html, onOpen, options) {
17        $.magnificPopup.close();
18        $.magnificPopup.open($.extend({
19            items: {
20                src: html,
21                type: 'inline'
22            },
23            callbacks: {
24                open:onOpen
25            },
26            mainClass: 'rs-dialog'
27        }, options));
28
29    },
30
31    /**
32     * Обновляет содержимое уже открытого окна
33     *
34     * @param html Содержимое окна
35     * @param onOpen callback, вызываемый после открытия окна
36     * @param options объект, любые дополнительные свойства
37     */
38    reopen: function(html, onOpen, width, options) {
39        $.rsAbstractDialogModule.open(html, onOpen, width, options);
40    },
41
42    /**
43     * Закрывает модальное окно
44     */
45    close: function() {
46        $.magnificPopup.close();
47    },
48
49    /**
50     * Возвращает класс корневого блока окна
51     * @returns {string}
52     */
53    getDialogRootClass: function() {
54        return '.mfp-wrap.rs-dialog'
55    },
56
57    /**
58     * Отображает индикатор загрузки внутри окна
59     */
60    showLoader: function() {
61        $('.mfp-content').append('<div class="rs-client-loading"></div>');
62    },
63
64    /**
65     * Скрывает идентификатор загрузки внутри окна
66     */
67    hideLoader: function() {
68        $('.mfp-content .rs-client-loading').remove();
69    }
70};
71
72
73$.extend({
74    /**
75     * Загружает контент в диалоговом окне. Зависит от jquery.form
76     */
77    openDialog: function (options) {
78
79        options = $.extend({
80            url: '',
81            data: null,
82            callback: null,
83            colorboxOptions: {},
84            bindSubmit: true
85        }, options);
86
87        var xhr,
88            colorBoxParams = $.extend(
89            { //Отображаем диалог в режиме ожидания данных
90                callbacks: {
91                    close: function () {
92                        if (xhr)
93                            xhr.abort();
94                    }
95                }
96            }, options.colorboxOptions);
97
98        var showOverlay = function() {
99            var overlay = $('<div id="rs-overlay" class="mfp-bg"/>').appendTo('body');
100            $(window).on('keypress.inDialog', function(e) {
101                if (e.keyCode == 27) {
102                    if (xhr) {
103                        xhr.abort();
104                    }
105                    hideOverlay();
106                }
107            });
108        },
109
110        hideOverlay = function() {
111            $('#rs-overlay').remove();
112            $(window).off('.inDialog');
113        };
114
115        var onComplete = function (response) {
116            if (options.bindSubmit) {
117
118                $('.mfp-content').each(function () {
119                    var content = this;
120                    $(content).trigger('new-content');
121
122                    $('form', this).each(function () {
123
124                        var new_action = $(this).attr('data-ajax-action');
125                        if (typeof(new_action) != 'undefined') {
126                            $(this).attr('action', new_action);
127                        }
128
129                        $(this).ajaxForm({
130                            dataType: 'json',
131                            data: {dialogWrap: 1},
132                            beforeSubmit: function (arr, form, options) {
133                                $('button[type="submit"], input[type="submit"]', form).attr('disabled', 'disabled'); //Защита от двойного клика
134                                $.rsAbstractDialogModule.showLoader();
135                            },
136                            success: function (response) {
137                                if (response.closeDialog) {
138                                    $.magnificPopup.close();
139                                }
140                                if (response.reloadPage) {
141                                    location.reload();
142                                    return;
143                                }
144
145                                if (!response.closeDialog) {
146                                    $(content).empty();
147                                    var html = $('<div>').hide().appendTo('body').append(response.html);
148                                    var data = html.children();
149
150                                    $.rsAbstractDialogModule.reopen(data, function() {
151                                        onComplete(response);
152                                    });
153
154                                }
155                            },
156                            complete: function() {
157                                $.rsAbstractDialogModule.hideLoader();
158                            }
159                        });
160
161                    });
162                });
163            }
164            if (options.callback) options.callback(response);
165        };
166
167        var param = options.url.indexOf('?') == -1 ? '?dialogWrap=1' : '&dialogWrap=1';
168
169        //Выполняем GET запрос
170        showOverlay();
171        $.rsAbstractDialogModule.close();
172
173        xhr = $.get(options.url + param, options.data, function (response) {
174            //Вставляем HTML в DOM для выполнения JavaScript и получения параметров окна
175            var html = $('<div>').hide()
176                                 .appendTo('body')
177                                 .append(response.html);
178
179            var dialogData = html.find('[data-dialog-options]').data('dialogOptions');
180            if (dialogData) {
181                colorBoxParams = $.extend(colorBoxParams, dialogData);
182            }
183
184            var data = html.children()
185
186            $.rsAbstractDialogModule.open(data, function() {
187                onComplete(response);
188            });
189
190        }, 'json').always(function() {
191            hideOverlay();
192        });
193
194        return false;

195    }
196});
197
198$(function() {
199
200    //Открываем любую ссылку с классом rs-in-dialog во всплывающем окне (inDialog - старый класс для совместимости)
201    $('body').on('click', '.rs-in-dialog, .inDialog', function(e) {
202        if (!$(this).is('.disabled')) {
203            var url = $(this).data('url') ? $(this).data('url') : $(this).attr('href');
204            if ($(this).data('href')){ //Для совместимости
205                url = $(this).data('href');
206            }
207            $.openDialog({
208                url: url
209            });
210        }
211        e.preventDefault();
212    });
213
214});