web-dev-qa-db-ja.com

無限スクロールの進行状況インジケーターを表示します

WebサイトでDrupal 8 Views Infinite Scrollモジュールを使用しています。

ビューの下部にあるボタンをクリックして、クリックすると、さらに多くのノードがビューに読み込まれます。

Infinite Scroll Ajaxがリクエストを出しているときに、ビューを操作して進行状況インジケーターまたは読み込みアイコンを表示するにはどうすればよいですか？

現在、ポケットベルの設定にはオプションはありませんが、[もっと読み込む]ボタンをクリックすると、アニメーションgifがビューの上部にあるインジケーターを表示するため、ドキュメント化されたプロジェクトに混乱します。

VIEWS INFINITE SCROLL

これはDrupal 7の場合にのみ適用されますか？

views8ajax
1
cwiggo

以下のようにできました。

以下をcustom.jsファイルに追加してください

// Sets the fullscreen progress indicator.
(function ($) {
  'use strict';
  Drupal.behaviors.privacyPolicyLinked = {
    attach: function (context) {
      Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
        this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
        $('body .pager').before(this.progress.element);
      };
    }
  };
})(jQuery);

そして、あなたのcustom.cssで、以下のようにあなたのスタイルを追加してください

.ajax-progress-fullscreen {
  background: url($assetsPath + '/images/status-active.gif') no-repeat center center;
  min-height: 16px;
  opacity: .9;
  padding: 3px;
  vertical-align: middle;
  width: 16px;
  position: relative;
}
3
Hello Universe

ビューの無限スクロールモジュールで作業するときに、カスタムテーマの一部として「スロバー」を追加するために私がすばやくやったことは次のとおりです。

/modules/views_infinite_scroll/templates/views-infinite-scroll-pager.html.twigを/themes/mytheme/templates/views[optional]/views-infinite-scroll-pager.html.twigにコピーし、テンプレートをカスタマイズして追加しましたどきどき。私の場合でも、アニメーション化されていないフォントの素晴らしい時計アイコンを表示しました（好きなようにできます）。

{#
/**
 * @file
 * The views infinite scroll pager template.
 */
#}

{% if items.next %}
<ul{{ attributes }}>
  <li class="pager__item">
    <a class="button" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"><i class="fa fa-clock-o"></i> {{ options.button_text }}</a>
  </li>
</ul>
{% endif %}

None of the edits were visible yet because the module's js adds a .visually-hidden class to the pager when the page loads, if infinite scrolling with auto-load happening. I added this to my theme's css to override this:
/* infinate scroll module override (.visually-hidden styles added to infinate scroll pager) */

.js-pager__items {
  position: relative !important;
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
  Word-wrap: inherit;
  opacity: 0.5;
  animation: throb 0.5s 0.5s infinite;
}

@keyframes throb {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

もう少しテキストを磨くために、ビューページャーの設定で[さらに読み込む]を[もっと読み込む...]に変更しました。キャッシュをクリアしました...結果は、ajaxスクロールページのロードの前にあるときにページの一番下までスクロールすると、ボタン（またはリンク、Bootstrapボタンを表示する親テーマ）内にスロバーがあり、「Loading More ...」というテキストが含まれています。ロードされると、ボタンは非表示になり、コンテンツが置き換えられます。ボタンがリンクされているため、 JavaScriptが有効になっていないため、JavaScriptをクリックして結果の次のページを読み込むことができます。

これでもっと多くの作業ができると確信していますが、それは簡単な解決策です。悪い方向に進んだ場合、私は追加の考えを受け入れます。

証明 https://www.drupal.org/project/views_infinite_scroll/issues/2829014#comment-1185807

0
mailfox