Move to a simple paginated system instead of the infinite scroll one

Fix #575

app/widgets/CommunityPosts/CommunityPosts.php

@@ -68,7 +68,7 @@ class CommunityPosts extends \Movim\Widget\Base
 
         $slugify = new Slugify;
         $this->rpc(
-            ($paginated) ? 'MovimTpl.append' : 'MovimTpl.fill',
+            'MovimTpl.fill',
             '#communityposts.'.$slugify->slugify('c'.$origin.'_'.$node), $html);
         $this->rpc('MovimUtils.enhanceArticlesContent');
     }
@@ -83,15 +83,7 @@ class CommunityPosts extends \Movim\Widget\Base
     {
         if (!$this->validateServerNode($origin, $node)) return;
 
-        // https://github.com/maranda/metronome/issues/236
-        /*if ($node == 'urn:xmpp:microblog:0') {
-            $r = new GetItems;
-        } else {*/
-            $r = new GetItems;
-        //}
-
-        if (!isset($before)) $before = 'empty';
-
+        $r = new GetItems;
         $r->setTo($origin)
           ->setNode($node)
           ->setPaging($this->_paging)
@@ -194,6 +186,11 @@ class CommunityPosts extends \Movim\Widget\Base
         $view->assign('last', $last);
         $view->assign('count', $count);
 
+        $view->assign('goback', $this->route(
+            $node == 'urn:xmpp:microblog:0' ? 'contact' : 'community',
+            [$origin, $node, $last]
+        ));
+
         $html = $view->draw('_communityposts');
 
         return $html;

app/widgets/CommunityPosts/_communityposts.tpl

@@ -28,12 +28,14 @@
 {/if}
 
 {if="$last"}
-<ul class="list active thick">
-    <li onclick="CommunityPosts_ajaxGetItems('{$server}', '{$node}', '{$last}'); this.parentNode.parentNode.removeChild(this.parentNode);">
-        <span class="icon primary gray">
-            <i class="material-icons">restore</i>
-        </span>
-        <p class="normal center">{$c->__('post.older')}</p>
-    </li>
+<ul class="list active thick" id="goback">
+    <a href="{$goback}">
+        <li>
+            <span class="icon primary gray">
+                <i class="material-icons">restore</i>
+            </span>
+            <p class="normal center">{$c->__('post.older')}</p>
+        </li>
+    </a>
 </ul>
 {/if}

app/widgets/CommunityPosts/communityposts.js

@@ -3,6 +3,6 @@ MovimWebsocket.attach(function() {
     if (parts.params.length > 0) {
         var node = (parts.params[1] == undefined) ? 'urn:xmpp:microblog:0' : parts.params[1];
 
-        CommunityPosts_ajaxGetItems(parts.params[0], node);
+        CommunityPosts_ajaxGetItems(parts.params[0], node, parts.params[2]);
     }
 });

app/widgets/Menu/Menu.php

@@ -133,12 +133,7 @@ class Menu extends \Movim\Widget\Base
     {
         $html = $this->prepareList($type, $server, $node, $page);
 
-        if ($page > 0) {
-            $this->rpc('MovimTpl.append', '#menu_wrapper', $html);
-        } else {
-            $this->rpc('MovimTpl.fill', '#menu_widget', $html);
-        }
-
+        $this->rpc('MovimTpl.fill', '#menu_widget', $html);
         $this->rpc('MovimUtils.enhanceArticlesContent');
         $this->rpc('Menu.refresh');
     }
@@ -184,12 +179,12 @@ class Menu extends \Movim\Widget\Base
 
         $next = $page + 1;
 
-        $view->assign('history', $this->call('ajaxGetAll', $next));
+        $view->assign('goback', $this->route('news', $next));
 
         if ($type == 'news') {
-            $view->assign('history', $this->call('ajaxGetNews', $next));
+            $view->assign('goback', $this->route('news', $next, [], 'communities'));
         } elseif ($type == 'feed') {
-            $view->assign('history', $this->call('ajaxGetFeed', $next));
+            $view->assign('goback', $this->route('news', $next, [], 'contacts'));
         }
 
         $view->assign('items', $items

app/widgets/Menu/_menu_list.tpl

@@ -1,28 +1,26 @@
-{if="$page == 0"}
-    <header>
-        <ul class="tabs wide">
-            <li {if="$type == 'all'"}class="active"{/if}>
-                <a href="#" onclick="Menu_ajaxGetAll(); Menu.setLoad(this);">{$c->__('menu.all')}</a>
-            </li>
-            <li {if="$type == 'news'"}class="active"{/if} >
-                <a href="#communities" class="on_desktop" onclick="Menu_ajaxGetNews(); Menu.setLoad(this);" title="{$c->__('page.news')}">
-                    {$c->__('page.communities')}
-                </a>
-                <a href="#communities" class="on_mobile" onclick="Menu_ajaxGetNews(); Menu.setLoad(this);" title="{$c->__('page.news')}">
-                    <i class="material-icons">group_work</i>
-                </a>
-            </li>
-            <li {if="$type == 'feed'"}class="active"{/if}>
-                <a href="#contacts" class="on_desktop" onclick="Menu_ajaxGetFeed(); Menu.setLoad(this);" title="{$c->__('page.feed')}">
-                    {$c->__('page.contacts')}
-                </a>
-                <a href="#contacts" class="on_mobile" onclick="Menu_ajaxGetFeed(); Menu.setLoad(this);" title="{$c->__('page.feed')}">
-                    <i class="material-icons">people</i>
-                </a>
-            </li>
-        </ul>
-    </header>
-{/if}
+<header>
+    <ul class="tabs wide">
+        <li {if="$type == 'all'"}class="active"{/if}>
+            <a href="#" onclick="Menu_ajaxGetAll(); Menu.setLoad(this);">{$c->__('menu.all')}</a>
+        </li>
+        <li {if="$type == 'news'"}class="active"{/if} >
+            <a href="#communities" class="on_desktop" onclick="Menu_ajaxGetNews(); Menu.setLoad(this);" title="{$c->__('page.news')}">
+                {$c->__('page.communities')}
+            </a>
+            <a href="#communities" class="on_mobile" onclick="Menu_ajaxGetNews(); Menu.setLoad(this);" title="{$c->__('page.news')}">
+                <i class="material-icons">group_work</i>
+            </a>
+        </li>
+        <li {if="$type == 'feed'"}class="active"{/if}>
+            <a href="#contacts" class="on_desktop" onclick="Menu_ajaxGetFeed(); Menu.setLoad(this);" title="{$c->__('page.feed')}">
+                {$c->__('page.contacts')}
+            </a>
+            <a href="#contacts" class="on_mobile" onclick="Menu_ajaxGetFeed(); Menu.setLoad(this);" title="{$c->__('page.feed')}">
+                <i class="material-icons">people</i>
+            </a>
+        </li>
+    </ul>
+</header>
 
 {if="$type == 'me' && $c->getUser()->hasPubsub() && $page == 0"}
     <ul class="list active on_desktop flex">
@@ -52,10 +50,8 @@
 {/if}
 
 {if="$items->isNotEmpty()"}
-    {if="$page == 0"}
-        <div id="menu_refresh"></div>
-        <div class="list card shadow" id="menu_wrapper">
-    {/if}
+    <div id="menu_refresh"></div>
+    <div class="list card shadow" id="menu_wrapper">
 
     {loop="$items"}
         <div id="{$value->nodeid|cleanupId}" class="block large">
@@ -64,18 +60,18 @@
     {/loop}
     {if="count($items) == $paging"}
         <ul class="list active thick">
-            <li id="history" class="large" onclick="{$history} this.parentNode.removeChild(this);">
-                <span class="icon primary gray">
-                    <i class="material-icons">history</i>
-                </span>
-                <p class="normal center line">{$c->__('post.older')}</p>
-            </li>
+            <a href="{$goback}">
+                <li id="history" class="large">
+                        <span class="icon primary gray">
+                            <i class="material-icons">history</i>
+                        </span>
+                    <p class="normal center line">{$c->__('post.older')}</p>
+                </li>
+            </a>
         </ul>
     {/if}
 
-    {if="$page == 0"}
-        </div>
-    {/if}
+    </div>
 {elseif="$page == 0"}
     <div id="menu_refresh"></div>
     <br/>

app/widgets/Menu/menu.js

@@ -1,21 +1,22 @@
 var Menu = {
     init: function() {
-        var parts = MovimUtils.urlParts();
+        let parts = MovimUtils.urlParts();
+        let page = parts.params[0] !== undefined ? parseInt(parts.params[0]) : 0;
 
         if (parts.hash != '') {
             switch (parts.hash) {
                 case 'communities':
-                    Menu_ajaxGetNews();
+                    Menu_ajaxGetNews(page);
                     break;
                 case 'contacts':
-                    Menu_ajaxGetFeed();
+                    Menu_ajaxGetFeed(page);
                     break;
                 case 'blog':
-                    Menu_ajaxGetMe();
+                    Menu_ajaxGetMe(page);
                     break;
             }
         } else {
-            Menu_ajaxGetAll();
+            Menu_ajaxGetAll(page);
         }
     },