I want to make a chat system in my web application which is made with Yii2, at the moment I am using ListView for rendering the chat messages and yii2-scroll-pager extension for loading more messages. but the problem is ListView renders items in the order and scroll-pager fires load more even when I scroll down to the last item but what I want to achieve is, that I should not scroll down instead I should scroll up to load more messages, for example.
Current state
- Message 1
- Message 2
- Message 3
- Message 4
- Message 5 – when I scroll down to this message it fires load more event.
Desired outcome
- Message 5 – when I scroll up to this item event of loading more items should be fired.
- Message 4
- Message 3
- Message 2
- Message 1
Here is my current stage of code.
View File
<?=
\yii\widgets\ListView::widget([
'itemOptions' => ['tag' => false],
'options' => [
'tag' => 'ul',
'class' => 'chat-message',
'id' => 'chat-messages'
],
'dataProvider' => $msgDataProvider,
'itemView' => "_chat_item",
'summary' => '',
'pager' => [
'class'=> \kop\y2sp\ScrollPager::className(),
'triggerOffset' => $msgDataProvider->pagination->pageSize,
'enabledExtensions' => [
ScrollPager::EXTENSION_TRIGGER,
ScrollPager::EXTENSION_PAGING,
ScrollPager::EXTENSION_NONE_LEFT,
ScrollPager::EXTENSION_SPINNER
],
'container' => "#chat-messages",
'item' => ".message-item",
'paginationSelector' => '#chat-messages .pagination',
'overflowContainer' => '.scrollbar-wrapper',
'noneLeftText' => 'No more messages.'
]
]); ?>
Controller
public function actionInbox()
{
$thread = 2;
$dataProvider = new ActiveDataProvider([
'query' => Chat::find()
->where(['from_user' => $thread, 'to_user' => \Yii::$app->user->getId()])
->orWhere(['from_user' => \Yii::$app->user->getId(), 'to_user' => $thread]),
'pagination' => [
'pageSize' => 5
],
'sort' => [
'defaultOrder' => [
'id' => SORT_DESC,
]
],
]);
return $this->render("inbox", ['dataProvider' => $dataProvider]);
}
