https://yug-frost.ru/resource/js/core6/rs.jscore.js

1/**
2 * Общий глобальный корневой JS-объект темы оформления ReadyScript.
3 * Зависит от corelang.js
4 */
5window.RsJsCore = {
6    /**
7     * Здесь можно хранить любые переменные, характеризующие текущее состояние страницы.
8     * Это общая глобальная переменная между всеми плагинами и компонентами. Например, здесь можно хранить флаг о том, что
9     * сейчас на сайте идет загрузка чего-то и отображен overlay, значит нужно приостановить другие действия,
10     * которые могут вызвать конфликт, например повторное выполнение аналогичного действия.
11     */
12    state: {},
13
14    /**
15     * Здесь размещаются любые полезные статические функции общего назначения.
16     * Пример вызова: RsJsCore.utils.fetchJSON(...);
17     */
18    utils: {
19        /**
20         * Эмитирует логику работы jQuery().on(event, selector, callback).
21         * Запускает callback, когда element получает событие eventName, возникшее на элементе selector
22         * Возвращает элемент, соответствующий selector в свойстве event.rsTarget
23         *
24         * @param eventName Имя события
25         * @param selector Селектор, на котором ожидается событие
26         * @param callback Callback-функция
27         * @param element Элемент, на котором ожидается событие. По умолчанию document
28         */
29        on(eventName, selector, callback, element) {
30            element = element ? element : document;
31            element.addEventListener(eventName, (event) => {
32                event.rsTarget = event.target.closest(selector);
33                if (event.rsTarget) {
34                    callback(event);
35                }
36            });
37        },
38        /**
39         * Выполняет запрос к удаленному серверу и ожидает от него ответ в формате JSON. Обертка над системной fetch.
40         * Данная функция обрабатывает ошибочные ответы и визуализирует их.
41         *
42         * @param url
43         * @param options
44         * @returns {Promise<any>}
45         */
46        fetchJSON(url, options) {
47            let defaults = {
48                credentials:'include',
49                headers: {
50                    'X-Requested-With': 'XMLHttpRequest'
51                }
52            };
53
54            let parameters = {...defaults, ...options};
55            return fetch(url, parameters)
56                .then((response) => {
57                    if (!response.ok) {
58                        throw new Error(lang.t('Некорректный статус ответа сервера. ' + response.statusText));
59                        return;
60                    }
61                    return response.json()
62                        .then((json) => {
63                            if (RsJsCore.settings.utils.fetchResponseHandler) {
64                                return RsJsCore.settings.utils.fetchResponseHandler(json, {
65                                    url:url,
66                                    fetchOptions:parameters
67                                });
68                            }
69                            return json;
70                        })
71                        .then((json) => {
72                            if (json.reloadPage) {
73                                //Перезагрузка страницы всегда методом GET
74                                location.replace(window.location.href);
75                            }
76                            if (json.windowRedirect) {
77                                location.href = json.windowRedirect;
78                            }
79
80                            return json;
81                        });
82                }).catch((error) => {
83                    if (error.name !== 'AbortError') {
84                        if (RsJsCore.plugins.toast) { //Если установлен плагин, для отображения тостов, то отображем ошибку
85                            RsJsCore.plugins.toast.show(lang.t('Ошибка'), error.message, {
86                                className: 'error'
87                            });
88                        }
89                        throw error;
90                    }
91                });
92        },
93        /**
94         * Возвращает строку, где первая буква всегда прописная
95         *
96         * @param name
97         * @returns {string}
98         */
99        getLowerCamelName(name) {
100            return name[0].toLowerCase() + name.slice(1);
101        }
102    },
103
104    plugins: {},
105    components: {},
106    /**
107     * Секция для перегрузки настроек компонентов.
108     * Подключайте кастомные настройки до загрузки компонента.
109     *
110     * Пример использования:
111     * RsJsCore.settings.component.listProducts = {...тут кастомные настройки...}
112     */
113    settings: {
114        component: {},
115        plugin: {},
116        utils: {
117            /**
118             * Ожидается callback, который будет вызываться первым на получение всех данных через fetchJSON
119             * callback будет вызываться со следующими аргументами:
120             * callback(json, {url, fetchOptions}), где json - возвращаемый сервером json, url - адрес запроса, fetchOptions - параметры запроса
121             * если callback вернет json, то выполнение стандартных подписчиков .then() продолжится.
122             * если callback вернет Promise.reject(), то выполнение стандартных подписчиков .then() не состоится.
123             */
124            fetchResponseHandler:null
125        }
126    },
127    /**
128     * Регистрирует объект плагина
129     *
130     * @param key
131     * @param plugin
132     */
133    addPlugin(plugin, key) {
134        if (!key) {
135            key = this.utils.getLowerCamelName(plugin.constructor.name);
136        }
137        this.plugins[key] = plugin;
138    },
139
140    /**
141     * Регистрирует объект компонента
142     *
143     * @param component
144     * @param key
145     */
146    addComponent(component, key) {
147        if (!key) {
148            key = this.utils.getLowerCamelName(component.constructor.name);
149        }
150        this.components[key] = component;
151    },
152
153    /**
154     * Здесь размещаются базовые классы для различных сущностей
155     */
156    classes: {
157        /**
158         * Базовый класс для любых классов, содержащих логику поведения компонента или целой страницы.
159         * Пример: Компонент "Оформление заказа" - обеспечивает корректную работу всей страницы
160         * Компонент "Отзывы о товаре", компонент "Блок выбора города",...
161         */
162        component: class {
163            constructor() {
164                this.utils = RsJsCore.utils;
165                this.plugins = RsJsCore.plugins;
166                RsJsCore.addComponent(this);
167            }
168
169            getExtendsSettings() {
170                let selfName = this.utils.getLowerCamelName(this.constructor.name);
171                if (RsJsCore.settings.component[selfName]) {
172                    return RsJsCore.settings.component[selfName];
173                }
174                return {};
175            }
176        },
177
178        /**
179         * Базовый класс для любых классов-плагинов. Плагин - это объект, который используется
180         * несколькими компонентами. Пример: модальные окна, работа с cookie, ...
181         */
182        plugin: class {
183            constructor() {
184                this.utils = RsJsCore.utils;
185                this.plugins = RsJsCore.plugins;
186                RsJsCore.addPlugin(this);
187            }
188
189            getExtendsSettings() {
190                let selfName = this.utils.getLowerCamelName(this.constructor.name);

191                if (RsJsCore.settings.plugin[selfName]) {
192                    return RsJsCore.settings.plugin[selfName];
193                }
194                return {};
195            }
196        }
197    },
198
199    /**
200     * Инициализирует запуск lifecycle методов в компонентах
201     */
202    init() {
203        document.addEventListener('DOMContentLoaded', (event) => {
204            for(let key in this.components) {
205                if (typeof(this.components[key].onDocumentReady) == 'function') {
206                    this.components[key].onDocumentReady.call(this.components[key], event);
207                }
208                if (typeof(this.components[key].onContentReady) == 'function') {
209                    this.components[key].onContentReady.call(this.components[key], event);
210                }
211            }
212
213            //Событие выполняется, когда все компоненты уже выполнили onDocumentReady,
214            for(let key in this.components) {
215                if (typeof (this.components[key].onAfterDocumentReady) == 'function') {
216                    this.components[key].onAfterDocumentReady.call(this.components[key], event);
217                }
218            }
219        });
220
221        document.addEventListener('new-content', (event) => {
222            for(let key in this.components) {
223                if (typeof(this.components[key].onContentReady) == 'function') {
224                    this.components[key].onContentReady.call(this.components[key], event);
225                }
226            }
227        });
228    }
229};
230
231RsJsCore.init();