nirvana-msu / yii2-infinite-scroll Goto Github PK

Yii2 extension for infinite-scroll jQuery plugin

License: MIT License

PHP 100.00%

infinite-scroll-plugin yii2-extension php

yii2-infinite-scroll's Introduction

yii2-infinite-scroll

Yii2 extension for infinite-scroll jQuery plugin, providing scrolling functionality for widgets such as ListView. It renders a hyperlink that leads to subsequent page of a target and registers infinite-scroll jQuery plugin which uses javascript to fetch and append content for subsequent pages, gracefully degrading to complete page reload when javascript is disabled.

Several behaviours allowing to customize scroll behavior are provided out of the box, including twitter-style manual trigger, local scroll in overflow div, masonry integration and others.

At the moment this extention only supports v2.x of infinite-scroll plugin.

Resources

Yii2 extension page
Infinite-Scroll jQuery plugin documentation

Installation

Composer

Add extension to your composer.json and update your dependencies as usual, e.g. by running composer update

{
    "require": {
        "nirvana-msu/yii2-infinite-scroll": "1.0.*@dev"
    }
}

Widget Configuration

In addition to most of the properties that LinkPager provides, this widget also allows you to configure:

$widgetId string owner widget id, required
$itemsCssClass string CSS class of a tag that encapsulates items, required
$pluginOptions array infinite-scroll jQuery plugin options. For more information refer to infinite-scroll documentation
$contentLoadedCallback string|JsExpression javascript callback to be executed on loading the content via ajax call

Sample Usage

Plugin works by appending fetched items to the end of parent container, so it is required to configure layout property of parent ListView widget, wrapping {items} into e.g. div container with some class (to be used as a selector). It is possible to configure all selectors that widget initializes plugin with to fit your project requirements, but it general it is enough to set itemCssClass (class of that wrapping tag that we created) and widgetId (which would ensure multiple plugins on the same page would not conflict).

So the minimal required configuration would look like this:

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
    ],
]);

An example illustrating how to customize some widget / plugin options:

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
            'class' => 'btn btn-lg btn-block',
        ],
        'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]);

License

Extension is released under MIT license, same as underlying jQuery plugin.

yii2-infinite-scroll's People

Contributors

Stargazers

Watchers

Forkers

yed3t dlds shi-yang vulehd toxor88 znatali jozephol dmitry-kulikov ulrica1994 handsowe feilife lazyknightx dezinger webrepin hanliux shushenghong yunusbarlas borisa-dev

yii2-infinite-scroll's Issues

Plugin overwrites client settings

I write in view file

[ 'loadOnScroll' => false, 'scrollThreshold' => false, 'prefill' => false, ], ] ?>

On page, I don't see options loadOnScroll
Because in file InfiniteScrollPager.php line 245
$pluginOptions = array_filter($this->pluginOptions);
filtering my settings

"$(...).masonry is not a function" error after appending new items

Hello! I got this error after appending new items. How can I fix it?
$(...).masonry is not a function at HTMLDivElement.infscr_callback_masonry (masonry-isotope.js?v=1515518008:18) at opts.callback (jquery.infinitescroll.js?v=1515518008:179) at infscr_loadcallback [as _loadcallback] (jquery.infinitescroll.js?v=1515518008:403) at HTMLDivElement.infscr_ajax_callback (jquery.infinitescroll.js?v=1515518008:575) at HTMLDivElement.<anonymous> (jquery.js?v=1513603849:9872) at Function.each (jquery.js?v=1513603849:362) at jQuery.fn.init.each (jquery.js?v=1513603849:157) at Object.<anonymous> (jquery.js?v=1513603849:9871) at fire (jquery.js?v=1513603849:3317) at Object.fireWith [as resolveWith] (jquery.js?v=1513603849:3447)``

How/Can I use this with jquery masonry?

I was wondering can this be integrated with jquery masonry so that when more items are loaded the masonry is reapplied.

I know jquery masonry has append but not sure how i'd integrate it so that it's triggered when the new items are loaded.

Thanks any direction is appreciated.

Uncaught ReferenceError

Uncaught ReferenceError: afterAjaxListViewUpdate is not defined at index:998

Extension does not work with version 3 of jquery-infinite-scroll.

Recently was released version 3 of https://github.com/metafizzy/infinite-scroll, but this extension is incompatible with it. For reference
https://github.com/metafizzy/infinite-scroll/releases/tag/v3.0.0
https://infinite-scroll.com/extras.html#upgrading-from-v2
So now after installing through composer extension will not work.
I suggest

restrict version of infinite-scroll in current master and release version 1 of yii2-infinite-scroll;
update code of yii2-infinite-scroll to work with version 3 of infinite-scroll and release version 2 of yii2-infinite-scroll.

As result there will be yii2-infinite-scroll version 1 for legacy projects and yii2-infinite-scroll version 2 for future.

Uncaught SyntaxError: Unexpected token )

Can you give me an example when using \yii\data\Pagination?

My code:
Controller action:

  function actionIndex()
  {
      $query = Article::find()->where(['status' => 1]);
      $countQuery = clone $query;
      $pages = new Pagination(['totalCount' => $countQuery->count()]);
      $models = $query->offset($pages->offset)
          ->limit($pages->limit)
          ->all();

      return $this->render('index', [
           'models' => $models,
           'pages' => $pages,
      ]);
  }

in the View:

<div class="post-all">
  <?php foreach ($models as $model) {
      // display $model here
  } ?>
</div>

  // display pagination
<?= InfiniteScrollPager::widget([
      'pagination' => $pages,
     'itemsCssClass' => 'post-all',
  ]);
?>

But it appears an error：Uncaught SyntaxError: Unexpected token )

PHP closing tag

Hi! How about merge this pull request? #8

After pjax call infinite pagination call two times!

After my pjax call. infinite pagination call two times and display double result. means
for example http://mysite.com/frontend/web/site/index?page=2&per-page=2 call two times in console and render one page result two times. :(
please help!
Here is my code!

<?php $pjax = Pjax::begin(); ?>
<div class="well pr_box">
    <?= Html::beginForm(['site/index'], 'post', ['data-pjax' => '', 'class' => 'form-horizontal']); ?>
    <h4>What's New</h4>

    <div class="form-group" style="padding:14px;">

        <?= Html::textarea('status_update', '', ['class' => 'form-control']) ?>
    </div>
    <ul class="list-inline">

        <li><a href=""> <i class="fa fa-picture-o"></i></a></li>

        <?= Html::submitButton('Submit', ['class' => 'btn btn-success right-side']) ?>
    </ul>

    <?= Html::endForm() ?>
</div>
<?php echo ListView::widget([
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'options' => [
        'tag' => 'div',
    ],
    'dataProvider' => $listDataProvider,
    'itemView' => function ($model, $key, $index, $widget) {
        $itemContent = $this->render('_list_item', ['model' => $model]);
        /* Display an Advertisement after the first list item */
        return $itemContent;
        /* Or if you just want to display the list item only: */
    },
    'itemOptions' => [
        'tag' => false, 'class' => 'item',
    ],
    'summary' => '',

    /* do not display {summary} */
    // 'layout' => '{items}{pager}',
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        //'pjaxContainer' => $pjax->id,
        //  'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more',
        // 'linkOptions' => [
        //     'class' => 'btn btn-lg btn-block text-center',
        // ],
        'pluginOptions' => [
            'loading' => [
                //'msgText' => "<p class='text-center'>Loading next set of items...</p>",
                'finishedMsg' => "<p class='text-center'>No more items to load</p>",
                //'img' => 'http://google.com',
            ],
            //  'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]); ?>
<?php Pjax::end(); ?>`

Javascript console error using default example/demo

I get the following error in console:

Uncaught ReferenceError: afterAjaxListViewUpdate is not defined

This is what gets outputted as source:

<script type="text/javascript">$('#my-listview-id .items').infinitescroll({"loading":{"msgText":"   <em>Loading next set of items...</em>","finishedMsg":"<em>No more items to load</em>","img":"/assets/3b698b34/ajax-loader.gif"},"behavior":"twitter","maxPage":3,"contentSelector":"#my-listview-id .items","itemSelector":"#my-listview-id .items >","navSelector":"#my-listview-id ul.pagination","nextSelector":"#my-listview-id ul.pagination li.next a:first"}, afterAjaxListViewUpdate);</script>

Below is my configuration:

<?php

echo ListView::widget([
    'dataProvider' => $dataProvider,
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'itemView' => '_index',
    'itemOptions' => ['class' => 'item col-sm-4 col-md-3'],
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
        'class' => 'btn btn-lg btn-block',
        ],
           'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_MASONRY,
        ],
    ],
]);

?>

Reverse Infinite Scroll Feature

Hello,

Do you have anything planned for such a feature?

Something like replicating the Facebook Messages system. Basically, instead of triggering the event on scrolling down, it would trigger it on scrolling up.

Thanks

No on loaded event?

Is there an on loaded event? I need it to re-declare a javascript function after it finished loading

Cannot load next set of items if using div container's scrollbar

I have a listview using this extension inside a div container. It can load the next set of items if I use browser's vertical scrollbar, but not with div container's scrollbar. Does it only reacts to browser's scrollbar?

Javascript error on overriding errorCallback

Hi there,
Great work on the plugin, thinking about trying to help out getting this to work with infinite scroll 3.0. I'm using all the right libs for now (v2), and trying to get the errorCallback function to work when results finished (done):
'pluginOptions' => [
...,
'errorCallback' => 'function () { console.log("done");}'
]

However, I'm getting this javascript console error on 'done' event:
TypeError: opts.errorCallback.call is not a function

Any ideas?

Finally, I'd also like for the "Load more" button to not show on the final items displayed. The functionality now is on the last page of items to load, the "Load more" buttons is displayed. Only when this button is clicked, and loading image appears (but no more records retrieved because there is no more), does the 'finishedMsg' appear.

I'm basically trying to display a message at the end of all items loading that says "done" and doesn't fade away, doesn't require clicking "load more" to display this.

Thanks!
Tony