Tweak @mentions implementation for the twitter client:

Add css for mentions and stream tabs
Implement fetching older mentions

diff --git a/horde/js/twitterclient.js b/horde/js/twitterclient.js
index b0a2d49..8ca0e1f 100644 (file)
--- a/horde/js/twitterclient.js
+++ b/horde/js/twitterclient.js
@@ -11,7 +11,10 @@ var Horde_Twitter = Class.create({
    inReplyTo: '',
    oldestId: null,
    newestId: null,
+   oldestMention: null,
+   newestMention: null,
    instanceid: null,
+   activeTab: 'stream',
 
    /**
     * Const'r
@@ -112,18 +115,30 @@ var Horde_Twitter = Class.create({
      * @param integer page  The page number to retrieve.
      */
     getOlderEntries: function() {
-        var params = {
+        var callback, params = {
             actionID: 'getPage',
             i: this.instanceid
         };
 
-        if (this.oldestId) {
-            params.max_id = this.oldestId;
+        switch (this.activeTab) {
+        case 'stream':
+            if (this.oldestId) {
+                params.max_id = this.oldestId;
+            }
+            callback = this._getOlderEntriesCallback.bind(this);
+            break;
+        case 'mentions':
+            if (this.oldestMention) {
+                params.max_id = this.oldestMention;
+            }
+            callback = this._getOlderMentionsCallback.bind(this);
+            params.mentions = 1;
+            break;
         }
         new Ajax.Request(this.opts.endpoint, {
             method: 'post',
             parameters: params,
-            onSuccess: this._getOlderEntriesCallback.bind(this),
+            onSuccess: callback,
             onFailure: function() {
                 $(this.opts.spinner).toggle();
             }
@@ -162,16 +177,36 @@ var Horde_Twitter = Class.create({
     },
 
     /**
-     * Callback for updateStream request. Updates display, remembers the oldest
-     * id we know about.
+     * Callback for updateStream request for older stream entries. Updates
+     * display, remembers the oldest id we know about.
      *
+     * @param object response  The response object from the Ajax request.
      */
     _getOlderEntriesCallback: function(response) {
         var content = response.responseJSON.c;
-        this.oldestId = response.responseJSON.o;
-        var h = $(this.opts.content).scrollHeight
-        $(this.opts.content).insert(content);
-        $(this.opts.content).scrollTop = h;
+        if (response.responseJSON.o) {
+            this.oldestId = response.responseJSON.o;
+            var h = $(this.opts.content).scrollHeight
+            $(this.opts.content).insert(content);
+            $(this.opts.content).scrollTop = h;
+        }
+    },
+
+    /**
+     * Callback for updateStream request for older mentions. Updates display,
+     * remembers the oldest id we know about.
+     *
+     * @param object response  The response object from the Ajax request.
+     */
+    _getOlderMentionsCallback: function(response) {
+        var content = response.responseJSON.c;
+        // If no more available, the oldest id will be null
+        if (response.responseJSON.o) {
+            this.oldestMention = response.responseJSON.o;
+            var h = $(this.opts.mentions).scrollHeight
+            $(this.opts.mentions).insert(content);
+            $(this.opts.mentions).scrollTop = h;
+        }
     },
 
     /**
@@ -208,22 +243,22 @@ var Horde_Twitter = Class.create({
      */
     _getNewMentionsCallback: function(response) {
         var content = response.responseJSON.c;
-        //if (response.responseJSON.n != this.newestId) {
+        if (response.responseJSON.n != this.newestMention) {
             var h = $(this.opts.mentions).scrollHeight
             $(this.opts.mentions).insert({ 'top': content });
             // Don't scroll if it's the first request.
-            if (this.newestId) {
+            if (this.newestMention) {
                 $(this.opts.mentions).scrollTop = h;
             } else {
                 $(this.opts.mentions).scrollTop = 0;
             }
-            //this.newestId = response.responseJSON.n;
+            this.newestMention = response.responseJSON.n;
 
-            // First time we've been called, record the oldest one as well.'
-            //if (!this.oldestId) {
-            //    this.oldestId = response.responseJSON.o;
-            //}
-        //}
+            // First time we've been called, record the oldest one as well.
+            if (!this.oldestMention) {
+                this.oldestMention = response.responseJSON.o;
+            }
+        }
         //new PeriodicalExecuter(function(pe) { this.getNewMentions(); pe.stop(); }.bind(this), this.opts.refreshrate );
     },
 
@@ -267,15 +302,30 @@ var Horde_Twitter = Class.create({
 
     showMentions: function()
     {
-        $(this.opts.content).hide();
-        this.getNewEntries('mentions');
-        $(this.opts.mentions).show();
+        if (this.activeTab != 'mentions') {
+            this.toggleTabs();
+            $(this.opts.content).hide();
+            this.getNewEntries('mentions');
+            $(this.opts.mentions).show();
+            this.activeTab = 'mentions';
+        }
     },
 
     showStream: function()
     {
-        $(this.opts.mentions).hide();
-        $(this.opts.content).show();
+        if (this.activeTab != 'stream') {
+            this.toggleTabs();
+            $(this.opts.mentions).hide();
+            $(this.opts.content).show();
+            this.activeTab = 'stream';
+        }
+
+    },
+
+    toggleTabs: function()
+    {
+        $(this.opts.contenttab).toggleClassName('activeTab');
+        $(this.opts.mentiontab).toggleClassName('activeTab');
     },
 
     /**

diff --git a/horde/lib/Block/twitter_timeline.php b/horde/lib/Block/twitter_timeline.php
index 1035a50..001cb50 100644 (file)
--- a/horde/lib/Block/twitter_timeline.php
+++ b/horde/lib/Block/twitter_timeline.php
@@ -148,6 +148,8 @@ class Horde_Block_Horde_twitter_timeline extends Horde_Block
                input: '{$instance}_newStatus',
                spinner: '{$instance}_loading',
                content: '{$instance}_stream',
+               contenttab: '{$instance}_contenttab',
+               mentiontab: '{$instance}_mentiontab',
                mentions: '{$instance}_mentions',
                endpoint: '{$endpoint}',
                inreplyto: '{$inReplyToNode}',

diff --git a/horde/templates/block/twitter-layout.html.php b/horde/templates/block/twitter-layout.html.php
index 0975dfb..44821d4 100644 (file)
--- a/horde/templates/block/twitter-layout.html.php
+++ b/horde/templates/block/twitter-layout.html.php
@@ -18,10 +18,14 @@
    <?php echo $this->loadingImg ?>
    <div id="currentStatus" style="margin:10px;"><strong><?php echo _("Latest")?></strong> <?php echo $this->latestStatus ?> - <span class="fbstreaminfo"><?php echo $this->latestDate ?></span></div>
  </div>
- <div>
-   <a href="#" onclick="Horde['twitter<?php echo $this->instance ?>'].showStream();"><?php echo _("Stream")?></a>
-   <a href="#" onclick="Horde['twitter<?php echo $this->instance ?>'].showMentions();"><?php echo _("Mentions") ?></a>
+ <div class="tabset">
+  <ul>
+   <li id="<?php echo $this->instance ?>_contenttab" class="activeTab"><a href="#" onclick="Horde['twitter<?php echo $this->instance ?>'].showStream();"><?php echo _("Stream")?></a></li>
+   <li id="<?php echo $this->instance ?>_mentiontab"><a href="#" onclick="Horde['twitter<?php echo $this->instance ?>'].showMentions();"><?php echo _("Mentions") ?></a></li>
+  </ul>
  </div>
+
+    <div class="clear">&nbsp;</div>
  <div style="height:<?php echo $this->bodyHeight ?>px; overflow-y:auto;" id="<?php echo $this->instance ?>_twitter_body">
    <div id="<?php echo $this->instance ?>_stream"></div>
    <div id="<?php echo $this->instance ?>_mentions"></div>