Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
На первую страницук этому сообщениюк последнему сообщению

Открыть новую тему     Написать ответ в эту тему

Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
define(['jquery', 'jquery/ui', 'jquery/jquery-storageapi', 'mage/mage'], function($) {
    'use strict';
    var hideProps = {}
      , showProps = {};
    hideProps.height = 'hide';
    showProps.height = 'show';
    $.widget('mage.collapsible', {
        options: {
            active: false,
            disabled: false,
            collapsible: true,
            header: '[data-role=title]',
            content: '[data-role=content]',
            trigger: '[data-role=trigger]',
            closedState: null,
            openedState: null,
            disabledState: null,
            ajaxUrlElement: '[data-ajax=true]',
            ajaxContent: false,
            loadingClass: null,
            saveState: false,
            animate: false,
            icons: {
                activeHeader: null,
                header: null
            },
            collateral: {
                element: null,
                openedState: null
            }
        },
        _create: function() {
            this.storage = $.localStorage;
            this.icons = false;
            if (typeof this.options.icons === 'string') {
                this.options.icons = $.parseJSON(this.options.icons);
            }
            this._processPanels();
            this._processState();
            this._refresh();
            if (this.options.icons.header && this.options.icons.activeHeader) {
                this._createIcons();
                this.icons = true;
            }
            this._bind('click');
            this._trigger('created');
        },
        _refresh: function() {
            this.trigger.attr('tabIndex', 0);
            if (this.options.active && !this.options.disabled) {
                if (this.options.openedState) {
                    this.element.addClass(this.options.openedState);
                }
                if (this.options.collateral.element && this.options.collateral.openedState) {
                    $(this.options.collateral.element).addClass(this.options.collateral.openedState);
                }
                if (this.options.ajaxContent) {
                    this._loadContent();
                }
                this.header.attr({
                    'aria-selected': false
                });
            } else if (this.options.disabled) {
                this.disable();
            } else {
                this.content.hide();
                if (this.options.closedState) {
                    this.element.addClass(this.options.closedState);
                }
            }
        },
        _processState: function() {
            var anchor = window.location.hash, isValid = $.mage.isValidSelector(anchor), urlPath = window.location.pathname.replace(/\./g, ''), state;
            this.stateKey = encodeURIComponent(urlPath + this.element.attr('id'));
            if (isValid && ($(this.content.find(anchor)).length > 0 || this.content.attr('id') === anchor.replace('#', ''))) {
                this.element.parents('[data-collapsible=true]').collapsible('forceActivate');
                if (!this.options.disabled) {
                    this.options.active = true;
                    if (this.options.saveState) {
                        this.storage.set(this.stateKey, true);
                    }
                }
            } else if (this.options.saveState && !this.options.disabled) {
                state = this.storage.get(this.stateKey);
                if (typeof state === 'undefined' || state === null) {
                    this.storage.set(this.stateKey, this.options.active);
                } else if (state === true) {
                    this.options.active = true;
                } else if (state === false) {
                    this.options.active = false;
                }
            }
        },
        _createIcons: function() {
            var icons = this.options.icons;
            if (icons) {
                $('<span>').addClass(icons.header).attr('data-role', 'icons').prependTo(this.header);
                if (this.options.active && !this.options.disabled) {
                    this.header.children('[data-role=icons]').removeClass(icons.header).addClass(icons.activeHeader);
                }
            }
        },
        _destroyIcons: function() {
            this.header.children('[data-role=icons]').remove();
        },
        _destroy: function() {
            var options = this.options;
            this.element.removeAttr('data-collapsible');
            this.trigger.removeAttr('tabIndex');
            if (options.openedState) {
                this.element.removeClass(options.openedState);
            }
            if (this.options.collateral.element && this.options.collateral.openedState) {
                $(this.options.collateral.element).removeClass(this.options.collateral.openedState);
            }
            if (options.closedState) {
                this.element.removeClass(options.closedState);
            }
            if (options.disabledState) {
                this.element.removeClass(options.disabledState);
            }
            if (this.icons) {
                this._destroyIcons();
            }
        },
        _processPanels: function() {
            var headers, triggers;
            this.element.attr('data-collapsible', 'true');
            if (typeof this.options.header === 'object') {
                this.header = this.options.header;
            } else {
                headers = this.element.find(this.options.header);
                if (headers.length > 0) {
                    this.header = headers.eq(0);
                } else {
                    this.header = this.element;
                }
            }
            if (typeof this.options.content === 'object') {
                this.content = this.options.content;
            } else {
                this.content = this.header.next(this.options.content).eq(0);
            }
            if (this.header.attr('id')) {
                this.content.attr('aria-labelledby', this.header.attr('id'));
            }
            if (this.content.attr('id')) {
                this.header.attr('aria-controls', this.content.attr('id'));
            }
            this.header.attr({
                'role': 'tab',
                'aria-selected': this.options.active,
                'aria-expanded': this.options.active
            });
            if (this.header.parent().attr('role') !== 'presentation') {
                this.header.parent().attr('role', 'tablist');
            }
            this.content.attr({
                'role': 'tabpanel',
                'aria-hidden': !this.options.active
            });
            if (typeof this.options.trigger === 'object') {
                this.trigger = this.options.trigger;
            } else {
                triggers = this.header.find(this.options.trigger);
                if (triggers.length > 0) {
                    this.trigger = triggers.eq(0);
                } else {
                    this.trigger = this.header;
                }
            }
        },
        _keydown: function(event) {
            var keyCode;
            if (event.altKey || event.ctrlKey) {
                return;
            }
            keyCode = $.ui.keyCode;
            switch (event.keyCode) {
            case keyCode.SPACE:
            case keyCode.ENTER:
                this._eventHandler(event);
                break;
            }
        },
        _bind: function(event) {
            var self = this;
            this.events = {
                keydown: '_keydown'
            };
            if (event) {
                $.each(event.split(' '), function(index, eventName) {
                    self.events[eventName] = '_eventHandler';
                });
            }
            this._off(this.trigger);
            if (!this.options.disabled) {
                this._on(this.trigger, this.events);
            }
        },
        disable: function() {
            this.options.disabled = true;
            this._off(this.trigger);
            this.forceDeactivate();
            if (this.options.disabledState) {
                this.element.addClass(this.options.disabledState);
            }
            this.trigger.attr('tabIndex', -1);
        },
        enable: function() {
            this.options.disabled = false;
            this._on(this.trigger, this.events);
            this.forceActivate();
            if (this.options.disabledState) {
                this.element.removeClass(this.options.disabledState);
            }
            this.trigger.attr('tabIndex', 0);
        },
        _eventHandler: function(event) {
            if (this.options.active && this.options.collapsible) {
                this.deactivate();
            } else {
                this.activate();
            }
            event.preventDefault();
        },
        _animate: function(prop) {
            var duration, easing, animate = this.options.animate;
            if (typeof animate === 'number') {
                duration = animate;
            }
            if (typeof animate === 'string') {
                animate = $.parseJSON(animate);
            }
            duration = duration || animate.duration;
            easing = animate.easing;
            this.content.animate(prop, duration, easing);
        },
        deactivate: function() {
            if (this.options.animate) {
                this._animate(hideProps);
            } else {
                this.content.hide();
            }
            this._close();
        },
        forceDeactivate: function() {
            this.content.hide();
            this._close();
        },
        _close: function() {
            this.options.active = false;
            if (this.options.saveState) {
                this.storage.set(this.stateKey, false);
            }
            if (this.options.openedState) {
                this.element.removeClass(this.options.openedState);
            }
            if (this.options.collateral.element && this.options.collateral.openedState) {
                $(this.options.collateral.element).removeClass(this.options.collateral.openedState);
            }
            if (this.options.closedState) {
                this.element.addClass(this.options.closedState);
            }
            if (this.icons) {
                this.header.children('[data-role=icons]').removeClass(this.options.icons.activeHeader).addClass(this.options.icons.header);
            }
            this.header.attr({
                'aria-selected': 'false',
                'aria-expanded': 'false'
            });
            this.content.attr({
                'aria-hidden': 'true'
            });
            this.element.trigger('dimensionsChanged', {
                opened: false
            });
        },
        activate: function() {
            if (this.options.disabled) {
                return;
            }
            if (this.options.animate) {
                this._animate(showProps);
            } else {
                if (this.content.length) {
                    this._scrollToTopIfVisible(this.content.get(0).parentElement);
                }
                this.content.show();
            }
            this._open();
        },
        forceActivate: function() {
            if (!this.options.disabled) {
                this.content.show();
                this._open();
            }
        },
        _open: function() {
            this.element.trigger('beforeOpen');
            this.options.active = true;
            if (this.options.ajaxContent) {
                this._loadContent();
            }
            if (this.options.saveState) {
                this.storage.set(this.stateKey, true);
            }
            if (this.options.openedState) {
                this.element.addClass(this.options.openedState);
            }
            if (this.options.collateral.element && this.options.collateral.openedState) {
                $(this.options.collateral.element).addClass(this.options.collateral.openedState);
            }
            if (this.options.closedState) {
                this.element.removeClass(this.options.closedState);
            }
            if (this.icons) {
                this.header.children('[data-role=icons]').removeClass(this.options.icons.header).addClass(this.options.icons.activeHeader);
            }
            this.header.attr({
                'aria-selected': 'true',
                'aria-expanded': 'true'
            });
            this.content.attr({
                'aria-hidden': 'false'
            });
            this.element.trigger('dimensionsChanged', {
                opened: true
            });
        },
        _loadContent: function() {
            var url = this.element.find(this.options.ajaxUrlElement).attr('href')
              , that = this;
            if (url) {
                that.xhr = $.get({
                    url: url,
                    dataType: 'html'
                }, function() {});
            }
            if (that.xhr && that.xhr.statusText !== 'canceled') {
                if (that.options.loadingClass) {
                    that.element.addClass(that.options.loadingClass);
                }
                that.content.attr('aria-busy', 'true');
                that.xhr.success(function(response) {
                    setTimeout(function() {
                        that.content.html(response);
                    }, 1);
                });
                that.xhr.complete(function(jqXHR, status) {
                    setTimeout(function() {
                        if (status === 'abort') {
                            that.content.stop(false, true);
                        }
                        if (that.options.loadingClass) {
                            that.element.removeClass(that.options.loadingClass);
                        }
                        that.content.removeAttr('aria-busy');
                        if (jqXHR === that.xhr) {
                            delete that.xhr;
                        }
                    }, 1);
                });
            }
        },
        _scrollToTopIfVisible: function(elem) {
            if (this._isElementOutOfViewport(elem)) {
                elem.scrollIntoView();
            }
        },
        _isElementOutOfViewport: function(elem) {
            var rect = elem.getBoundingClientRect();
            return (rect.left < 0 || rect.top < 0 || rect.right > window.innerWidth || rect.bottom > window.innerHeight);
        }
    });
    return $.mage.collapsible;
});
 

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:42 10-09-2019 | Исправлено: Mavrikii, 21:51 10-09-2019
Открыть новую тему     Написать ответ в эту тему

На первую страницук этому сообщениюк последнему сообщению

Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru