XF 2.0 XF2 JS Framework

Selecao13

Проверенные
Сообщения
20
Реакции
34
Баллы
11,015
Ссылка на девблог по сабажу:
Как я понял, есть 2 обработчика Click и Element, которые вызываются от зарезервированных атрибутов data-xf-click и тд.
А как сделать костыль, чтобы вешать вызовы на иные атрибуты (class, id, etc..)?

Хочу повесить вызовы на ссылки в PageNav чтобы реализовать подгрузку страниц без обновления страницы, как в XF1:
JavaScript:
!function($, window, document, _undefined) {
    XenForo.PageLoader = function($link) {
        $link.click(function(e) {
            e.preventDefault();
            XenForo.ajax(
            $link.attr('href'), {}, function(ajaxData, textStatus) {
                if (XenForo.hasTemplateHtml(ajaxData)) {
                    new XenForo.ExtLoader(ajaxData, function() {
                        $(ajaxData.templateHtml).xfInsert('replaceAll', '.MyAddonClass', 'xfShow');
                    });
                }
            });
        });
    }
    XenForo.register('.MyAddonClass div.PageNav a[href]', 'XenForo.PageLoader');
}(jQuery, this, document);


Не стал заморачиваться с костылями, тем более весь готовый js код уже есть в comment.js, придумывать что то новое не надо.
  1. В Template Modifications редактируем page_nav -> Регулярное выражение # class="pageNav-jump|>{\$page}#isU на data-xf-click="pagenav-loader" data-container=".js-content"$0 для того чтобы назначить вызовы на кнопки перелистывания страниц.
  2. Создаём /js/myAddon/core.js с следующим содержимым:
    JavaScript:
    !function($, window, document, _undefined)
    {
        "use strict";
    
        XF.PageNavLoader = XF.Click.newHandler({
            eventNameSpace: 'XFPageNavLoaderClick',
    
            options: {
                container: null,
                target: null,
                href: null
            },
    
            $loaderTarget: null,
            $container: null,
            href: null,
            loading: false,
    
            init: function()
            {
                var container = this.options.container,
                    $container = container ? this.$target.closest(container) : this.$target,
                    target = this.options.target,
                    $target = target ? XF.findRelativeIf(target, this.$container) : $container;
    
                this.$container = $container;
    
                if ($target.length)
                {
                    this.$loaderTarget = $target;
                }
                else
                {
                    console.error('No loader target for %o', this.$target);
                    return;
                }
    
                if (!this.options.href)
                {
                    this.href = this.$target.attr('href');
                }
    
                if (!this.href)
                {
                    console.error('No href for %o', this.$target);
                }
            },
    
            click: function(e)
            {
                e.preventDefault();
    
                if (this.loading)
                {
                    return;
                }
    
                this.loading = true;
    
                var t = this;
                XF.ajax('get', this.href, null, function(data)
                {
                    if (data.html)
                    {
                        XF.setupHtmlInsert(data.html, function($html, container)
                        {
                            $html.insertAfter(t.$loaderTarget);
                            t.$container.remove();
                            if (typeof history.replaceState !== 'undefined')
                            {
                                history.replaceState("", document.title, t.href);
                            }
                        });
                    }
                }).always(function()
                {
                    t.loading = false;
                });
            }
        });
    
        XF.Click.register('pagenav-loader', 'XF.PageNavLoader');
    }
    (jQuery, window, document);
  3. В шаблоне своего аддона маркируем главный div. В моём случае это выглядит так <div class="block js-content" data-type="myAddon"> и не забываем подгрузить наш .js <xf:js src="myAddon/core.js" />

Теперь перелистывание идёт без обновления страницы целиком.
 
Последнее редактирование:
И рубим себе руки за такое, кто читать будет документацию?
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу