People / Spaces: Endless Scrolling (#5211)

CHANGELOG_DEV.md

@@ -5,3 +5,4 @@
 - Enh #5197: Default .htaccess - Remove Options +FollowSymLinks 
 - Enh #4495: Allow to lock comments per content
 - Enh #3688: Use Image widget in user list
+- Enh #5188: People / Spaces: Endless Scrolling

protected/humhub/modules/space/views/spaces/index.php

@@ -6,11 +6,10 @@
  */
 
 use humhub\assets\DirectoryAsset;
+use humhub\libs\Html;
 use humhub\modules\space\components\SpaceDirectoryQuery;
 use humhub\modules\space\widgets\SpaceDirectoryCard;
 use humhub\modules\space\widgets\SpaceDirectoryFilters;
-use humhub\widgets\Button;
-use humhub\widgets\LinkPager;
 use yii\web\View;
 
 /* @var $this View */
@@ -48,13 +47,9 @@ DirectoryAsset::register($this);
 </div>
 
 <?php if (!$spaces->isLastPage()) : ?>
-<div class="directory-load-more">
-    <?= Button::primary(Yii::t('SpaceModule.base', 'Load more'))
-        ->icon('fa-angle-down')
-        ->action('directory.loadMore')
-        ->options([
-            'data-current-page' => $spaces->pagination->getPage() + 1,
-            'data-total-pages' => $spaces->pagination->getPageCount(),
-        ]) ?>
-</div>
+    <?= Html::tag('div', '', [
+        'class' => 'directory-end',
+        'data-current-page' => $spaces->pagination->getPage() + 1,
+        'data-total-pages' => $spaces->pagination->getPageCount(),
+    ]) ?>
 <?php endif; ?>

protected/humhub/modules/user/views/people/index.php

@@ -5,7 +5,6 @@ use humhub\libs\Html;
 use humhub\modules\user\components\PeopleQuery;
 use humhub\modules\user\widgets\PeopleCard;
 use humhub\modules\user\widgets\PeopleFilters;
-use humhub\widgets\Button;
 use humhub\widgets\ModalButton;
 
 /* @var $this \yii\web\View */
@@ -53,13 +52,10 @@ DirectoryAsset::register($this);
 </div>
 
 <?php if (!$people->isLastPage()) : ?>
-    <div class="directory-load-more">
-        <?= Button::primary(Yii::t('UserModule.base', 'Load more'))
-            ->icon('fa-angle-down')
-            ->action('directory.loadMore')
-            ->options([
-                'data-current-page' => $people->pagination->getPage() + 1,
-                'data-total-pages' => $people->pagination->getPageCount(),
-            ]) ?>
-    </div>
+    <?= Html::tag('div', '', [
+        'class' => 'directory-end',
+        'data-current-page' => $people->pagination->getPage() + 1,
+        'data-total-pages' => $people->pagination->getPageCount(),
+        'data-ui-loader' => '',
+    ]) ?>
 <?php endif; ?>

static/js/humhub/humhub.directory.js

@@ -6,24 +6,27 @@ humhub.module('directory', function(module, require, $) {
         $(evt.$trigger).closest('form').submit();
     }
 
-    const loadMore = function(evt) {
-        const urlParams = {page: $(evt.$trigger).data('current-page') + 1};
+    const loadMore = function(directoryEndIndicator) {
+        const urlParams = {page: directoryEndIndicator.data('current-page') + 1};
 
+        $('.directory-end').data('isLoading', true);
+        loader.append(directoryEndIndicator);
         client.get(module.config.loadMoreUrl, {data: urlParams}).then(function (response) {
             $('.container-directory .card:hidden').show();
             $('.container-directory .cards').append(response.response);
-            if (urlParams.page == $(evt.$trigger).data('total-pages')) {
-                // Remove button "Load more" because the last page was loaded
-                $(evt.$trigger).parent().remove();
+            if (urlParams.page == directoryEndIndicator.data('total-pages')) {
+                // Remove the directory end indicator because the last page was loaded
+                directoryEndIndicator.remove();
             } else {
-                $(evt.$trigger).data('current-page', urlParams.page);
+                directoryEndIndicator.data('current-page', urlParams.page);
                 hideLastNotCompletedRow();
             }
         }).catch(function(err) {
             module.log.error(err, true);
             reject();
         }).finally(function() {
-            loader.reset(evt.$trigger);
+            loader.reset(directoryEndIndicator);
+            $('.directory-end').data('isLoading', false);
         });
     }
 
@@ -33,15 +36,12 @@ humhub.module('directory', function(module, require, $) {
             return;
         }
 
-        const loadMoreButton = $('.directory-load-more button');
-        if (loadMoreButton.data('current-page') === loadMoreButton.data('total-pages')) {
+        const directoryEndIndicator = $('.directory-end');
+        if (directoryEndIndicator.data('current-page') === directoryEndIndicator.data('total-pages')) {
             // No reason to hide a not completed row if current page is last
             return;
         }
 
-        // Display button to load more cards
-        loadMoreButton.parent().show();
-
         const cardsPerRow = Math.floor($('.container-directory .row').outerWidth() / $('.container-directory .card:first').width());
         const hideLastCardsNum = cardsNum % cardsPerRow;
         if (hideLastCardsNum > 0 && cardsNum > cardsPerRow) {
@@ -50,15 +50,40 @@ humhub.module('directory', function(module, require, $) {
         }
     }
 
+
+    const preventScrollLoading = function () {
+        return $('.directory-end').data('isLoading');
+    };
+
+    const initScroll = function () {
+        if (!window.IntersectionObserver) {
+            return;
+        }
+
+        const $directoryEndIndicator = $('.directory-end');
+
+        const observer = new IntersectionObserver(function (entries) {
+            if (preventScrollLoading()) {
+                return;
+            }
+
+            if (entries.length && entries[0].isIntersecting) {
+                loadMore($directoryEndIndicator);
+            }
+        });
+
+        observer.observe($directoryEndIndicator[0]);
+    }
+
     const init = function() {
         hideLastNotCompletedRow();
         $('input.form-search-filter[name=keyword]').focus();
+        initScroll();
     }
 
     module.export({
         initOnPjaxLoad: true,
         init,
         applyFilters,
-        loadMore,
     });
 });

static/less/directory.less

@@ -175,10 +175,4 @@
             }
         }
     }
-
-    .directory-load-more {
-        display: none;
-        text-align: center;
-        padding: 12px 0 15px;
-    }
 }