Update to 1.7.3

Author: digikid

CHANGELOG.md

@@ -2,6 +2,30 @@
 
 Все заметные изменения задокументированы в этом файле.
 
+[1.7.3]: https://github.com/digikid/gulp-project/releases/tag/1.7.3
+
+## [1.7.3] - 2022-03-16
+
+### Добавлено
+- Компонент Component для инициализации новых компонентов
+- Компонент Warning для отображения ошибок в компонентах
+
+### Исправлено
+- Ошибки в компоненте Select
+- Ошибки операций деления в SASS файлах
+- Исправление мелких ошибок, рефакторинг кода
+
+### Обновлено
+- Все компоненты переписаны с использованием ES6 классов
+- Компонент Form разделен на компоненты Select, Phone и Datepicker
+- Компоненты Date и Scrollable переименованы в Datepicker и Scrollbar
+- Обновлены вспомогательные функции для объектов и массивов
+- Обновление списка зависимостей и устранение уязвимостей
+
+### Удалено
+- Компонент Form
+- Вспомогательные функции для jQuery компонентов
+
 [1.7.2]: https://github.com/digikid/gulp-project/releases/tag/1.7.2
 
 ## [1.7.2] - 2022-02-09
@@ -19,15 +43,15 @@
 ### Добавлено
 - Создание ZIP-архивов при запуске задачи `abstract` (через параметр `config.abstract.zip`)
 
+### Исправлено
+- Содержимое архива с исходными файлами больше не ограничено директорией `/src`
+- Исправление мелких ошибок
+
 ### Обновлено
 - Поддержка ECMAScript модулей включена по умолчанию
 - В качестве компилятора SASS используется sass вместо node-sass
 - Параметры для задачи `zip` вынесены в `config.zip`
 
-### Исправлено
-- Содержимое архива с исходными файлами больше не ограничено директорией `/src`
-- Исправление мелких ошибок
-
 ### Удалено
 - Параметр `es6`
 - Устаревший модуль node-sass исключен из списка зависимостей
@@ -93,9 +117,11 @@
 ### Исправлено
 - Перемещение пользовательских настроек в отдельный файл конфигурации
 - Оптимизация структуры проекта и рефакторинг кода
-- Обновление списка зависимостей и устранение уязвимостей
 - Удаление неиспользуемого кода, исправление мелких ошибок
 
+### Обновлено
+- Обновление списка зависимостей и устранение уязвимостей
+
 ### Удалено
 - Минификация HTML файлов
 - Плагин jpegtran заменен на mozjpeg для лучшей компрессии изображений

gulp/boilerplate/js/components/component.js

@@ -0,0 +1,138 @@
+import $ from 'jquery';
+
+import Warning from './warning';
+
+import { isObject, mergeDeep } from '../utils/object';
+
+export default class Component {
+    constructor(title, defaults, ...args) {
+        const [selector, params = {}] = args;
+
+        if (!this.check(args)) {
+            return;
+        };
+
+        const options = mergeDeep(defaults, params);
+
+        const target = this.getTarget(selector);
+
+        const warning = new Warning(title);
+
+        this.title = title;
+        this.selector = selector;
+        this.defaults = defaults;
+        this.params = params;
+        this.options = options;
+        this.target = target;
+        this.warning = warning;
+    };
+
+    init(cb) {
+        const { target, selector, options } = this;
+
+        if (typeof cb === 'function') {
+            target.forEach(el => cb.call(this, el, options));
+        };
+    };
+
+    check(args) {
+        const { warning } = this;
+
+        const [selector, params] = args;
+
+        const selectorTypes = [
+            HTMLElement,
+            $
+        ];
+
+        const isTypeValid = selectorTypes.reduce((acc, type) => {
+            return acc && ((typeof selector === 'string') || NodeList.prototype.isPrototypeOf(selector) || (selector instanceof type));
+        }, true);
+
+        if (!selector) {
+            warning.show('Не определен селектор');
+
+            return;
+        };
+
+        if (!isTypeValid) {
+            warning.show('Неверный тип селектора');
+
+            return;
+        };
+
+        if (params && !isObject(params)) {
+            warning.show('Неверный формат параметров');
+
+            return;
+        };
+
+        return true;
+    };
+
+    validate(cb) {
+        const { selector, params, warning } = this;
+
+        if (cb && typeof cb === 'function') {
+            return cb.call({
+                selector,
+                params,
+                warning
+            });
+        };
+    };
+
+    getTarget(selector) {
+        if (typeof selector === 'string') {
+            return Array.from(document.querySelectorAll(selector));
+        };
+
+        if (NodeList.prototype.isPrototypeOf(selector)) {
+            return Array.from(selector);
+        };
+
+        if (selector instanceof $) {
+            return selector.get();
+        };
+
+        if (selector instanceof HTMLElement) {
+            return [selector];
+        };
+    };
+
+    parseDataSelector = id => {
+        const { selector: s } = this;
+
+        const reg = /\[|\]|data-/gi;
+
+        if ((typeof s === 'string') && reg.test(s)) {
+            const base = s.replace(reg, '');
+            const attr = id ? `data-${base}-${id}` : `data-${base}`;
+            const selector = `[${attr}]`;
+
+            return {
+                base,
+                attr,
+                selector
+            };
+        } else {
+            throw new Error('Невалидный селектор');
+        };
+    };
+
+    parseDataOptions = el => {
+        const { parseDataSelector } = this;
+
+        const { attr } = parseDataSelector.call(this, 'options');
+
+        const str = $(el).attr(attr);
+
+        try {
+            JSON.parse(str);
+        } catch (e) {
+            return {};
+        };
+
+        return JSON.parse(str);
+    };
+};

gulp/boilerplate/js/components/datepicker.js

@@ -0,0 +1,45 @@
+import $ from 'jquery';
+import AirDatepicker from 'air-datepicker';
+
+import Component from './component';
+
+import { disable as disableScroll, enable as enableScroll } from '../utils/scroll';
+
+const title = 'Datepicker';
+
+const defaults = {
+    autoClose: true,
+    minDate: new Date()
+};
+
+export default class extends Component {
+    constructor(...args) {
+        super(title, defaults, ...args);
+
+        this.init();
+    };
+
+    init() {
+        const { onShow, onHide } = this;
+
+        super.init((el, options) => {
+            new AirDatepicker(el, {
+                ...options,
+                onShow,
+                onHide
+            });
+        });
+    };
+
+    onShow(isFinished) {
+        if (isFinished) {
+            disableScroll();
+        };
+    };
+
+    onHide(isFinished) {
+        if (isFinished) {
+            enableScroll();
+        };
+    };
+};

gulp/boilerplate/js/jquery/plugins/fancybox.js renamed to gulp/boilerplate/js/components/fancybox.js

@@ -1,6 +1,10 @@
 import $ from 'jquery';
 import { Fancybox } from '@fancyapps/ui';
 
+import Component from './component';
+
+const title = 'Fancybox';
+
 const l10n = {
     CLOSE: 'Закрыть',
     NEXT: 'Вперед',
@@ -19,6 +23,7 @@ const defaults = {
     dragToClose: false,
     showClass: 'fancybox-fadeIn',
     hideClass: 'fancybox-fadeOut',
+    closeSelector: '[data-close]',
     Thumbs: {
         Carousel: {
             Sync: {
@@ -37,21 +42,53 @@ const defaults = {
     l10n
 };
 
-export default function(options = {}) {
-    const settings = $.extend(true, {}, defaults, options);
-    const selector = $(this).data('selector');
+export default class extends Component {
+    constructor(...args) {
+        super(title, defaults, ...args);
+
+        this.init();
+    };
+
+    validate() {
+        const { selector, warning } = this;
+
+        if (typeof selector !== 'string') {
+            warning.show('Неверный тип селектора!');
+
+            return false;
+        };
+
+        return true;
+    };
+
+    init() {
+        const { selector, options, close, validate } = this;
+        const { closeSelector } = options;
+
+        if (!super.validate(validate)) {
+            return;
+        };
+
+        Fancybox.bind(selector, options);
 
-    const { closeSelector } = settings;
+        if (closeSelector) {
+            $(document).on('click', closeSelector, e => {
+                e.preventDefault();
 
-    $.settings.fancybox = settings;
+                close();
+            });
+        };
+    };
 
-    Fancybox.bind(selector, settings);
+    close = () => Fancybox.close();
 
-    $(closeSelector).click(e => {
-        e.preventDefault();
+    open = id => {
+        const { close, options } = this;
 
-        Fancybox.close();
-    });
+        close();
 
-    return this;
+        Fancybox.show([{
+            src: `#modal-${id}`
+        }], options);
+    };
 };