XF 2.0 XF2 JS Framework

[Selecao13]

Ссылка на девблог по сабажу:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Как я понял, есть 2 обработчика Click и Element, которые вызываются от зарезервированных атрибутов data-xf-click и тд.
А как сделать костыль, чтобы вешать вызовы на иные атрибуты (class, id, etc..)?

Хочу повесить вызовы на ссылки в PageNav чтобы реализовать подгрузку страниц без обновления страницы, как в XF1:

!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 с следующим содержимым:
   

   !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" />

Теперь перелистывание идёт без обновления страницы целиком.

 

[Captain]

И рубим себе руки за такое, кто читать будет документацию?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Selecao13]

Captain, про компрессию? До релиз версии ещё далеко, поэтому не доходил до этого пункта в мануале. Спс за поправку