Кастомные(свои) методы jquery

Jquery позволяет создавать прототипы через свойство $.fn по сути это псевдоним prototype для любого jquery объекта. Для примера реализуем вызов кастомных модальных окон по аналогии с модалками в bootstrap с отправкой триггеров по событию открытия и скрытия окна.

const MODAL_CLASS = '.modal';
    const MODAL_ATRRIBUTE = 'data-modal';
    const MODAL_DISMISS_LOCAL_SELECTORS = '.modal__close, .modal__shadow';
    const MODAL_DISMISS_GLOBAL_SELECTOR = '[data-dismiss=modal]';

    $.fn.modal = function (action) {
        action = action || 'show';
        switch (action) {
            case 'hide':
                $(this).fadeOut('fast', function () {
                    !$(MODAL_CLASS + ':visible').length && $('body').removeClass('overflow');
                });
                $(this).trigger('hide');
                break;
            case 'show':
                $(this).fadeIn('fast');
                $(this).trigger('show');
                break;
        }
    }

    $(document).on('show hide', MODAL_CLASS, function (e) {
        switch (e.type) {
            case 'hide':
                $("[data-modal=" + e.target.id + "]").removeAttr('disabled');
                break;
            case 'show':
                $('body').addClass('overflow');
                break;
        }
    });

    $(document).on('click', '[' + MODAL_ATRRIBUTE + ']:not([disabled])', function (e) {
        e.preventDefault();
        let id = $(this).data('modal');
        $('[data-modal=' + id + ']').attr('disabled', true);
        $('#' + id).modal();
    });

    $(document).on('click', MODAL_DISMISS_LOCAL_SELECTORS, function (e) {
        e.preventDefault();
        $(this).parents(MODAL_CLASS).modal('hide');
    });

    $(document).on('click', MODAL_DISMISS_GLOBAL_SELECTOR, function (e) {
        let id = $(this).data('modal');
        id ? $(MODAL_CLASS).not('#' + id).modal('hide') : $(MODAL_CLASS).modal('hide');
    });

const MODAL_CLASS = '.modal';

const MODAL_ATRRIBUTE = 'data-modal';

const MODAL_DISMISS_LOCAL_SELECTORS = '.modal__close, .modal__shadow';

const MODAL_DISMISS_GLOBAL_SELECTOR = '[data-dismiss=modal]';

$.fn.modal = function (action) {

action = action || 'show';

switch (action) {

case 'hide':

$(this).fadeOut('fast', function () {

!$(MODAL_CLASS + ':visible').length && $('body').removeClass('overflow');

});

$(this).trigger('hide');

break;

case 'show':

$(this).fadeIn('fast');

$(this).trigger('show');

break;

}

$(document).on('show hide', MODAL_CLASS, function (e) {

switch (e.type) {

case 'hide':

$("[data-modal=" + e.target.id + "]").removeAttr('disabled');

break;

case 'show':

$('body').addClass('overflow');

break;

}

});

$(document).on('click', '[' + MODAL_ATRRIBUTE + ']:not([disabled])', function (e) {

e.preventDefault();

let id = $(this).data('modal');

$('[data-modal=' + id + ']').attr('disabled', true);

$('#' + id).modal();

});

$(document).on('click', MODAL_DISMISS_LOCAL_SELECTORS, function (e) {

e.preventDefault();

$(this).parents(MODAL_CLASS).modal('hide');

});

$(document).on('click', MODAL_DISMISS_GLOBAL_SELECTOR, function (e) {

let id = $(this).data('modal');

id ? $(MODAL_CLASS).not('#' + id).modal('hide') : $(MODAL_CLASS).modal('hide');

});

Оставить комментарий Отменить ответ