Allow the number of feed items to be adjusted (and saved for the session)
authorEdward Lee <edilee@mozilla.com>
Sat, 14 Mar 2009 11:40:48 -0500
changeset 142 d9b268f0a477
parent 141 1c2e5a6bdcbc
child 143 ea4afd57253a
push id101
push useredward.lee@engineering.uiuc.edu
push dateSat, 14 Mar 2009 16:41:14 +0000
Allow the number of feed items to be adjusted (and saved for the session)
chrome/content/init.js
chrome/content/text.html
modules/sites.js
--- a/chrome/content/init.js
+++ b/chrome/content/init.js
@@ -1,14 +1,15 @@
 let (C = Components) {
   const Cc = C.classes;
   const Ci = C.interfaces;
   const Cu = C.utils;
 }
 
+Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://abouttab/abouttab.js");
 Cu.import("resource://abouttab/clipboard.js");
 Cu.import("resource://abouttab/feeds.js");
 Cu.import("resource://abouttab/sites.js");
 
 let isMac = navigator.platform.search("Mac") == 0;
 
 function toURI(uriString) {
--- a/chrome/content/text.html
+++ b/chrome/content/text.html
@@ -58,16 +58,18 @@
   #freq>ol img.favicon{ width: 16px; height: 16px; display:inline-block;}
   #freq>ol img.handle{ position: relative; top: 3px; cursor: move; padding-left: 8px;}
 
   #freq>ol edit, #freq>ol done{ font-size: 90%; opacity: .4; font-style: italic;}
   #freq>ol done{ opacity: 1; display: none; position: absolute;}
   #freq>ol edit:hover, #freq>ol done:hover{ text-decoration: underline;}
 
   #freq>ol .siteCheck{ display: none; position: absolute;}
+  #freq>ol .feedPlus{ display: none; position: absolute;}
+  #freq>ol .feedMinus{ display: none; position: absolute;}
 
   #freq>ol .options{ padding-left: 23px; color: #cc2200; padding-top: 10px; display: none;}
   #freq>ol .hover-actions{ display: inline-block; float:right; display: none;}
 
   #freq li ul{ list-style: none; padding-left: 0; color:#666; padding-top: 5px;}
   #freq li li{ color: #666; line-height: 14pt;}
 
   /*------- Action Button ----------*/
@@ -211,23 +213,29 @@
     <name></name>
 
     <div class="hover-actions">
       <edit>edit</edit>
       <img class="handle" src="chrome://abouttab/content/gfx/handle.png"/>
     </div>
     <done>done</done>
 
+    <ul class="rss">
+      <li>Configure feeds!</li>
+    </ul>
     <ul class="rss"></ul>
+
     <div class="options">
       Configuration options go here: remove, rename, etc. <br/>
       <input type="text" value="feed url"/>
       <button>Done</button>
     </div>
     <input type="checkbox" class="siteCheck" checked="checked"/>
+    <input type="radio" class="feedMinus" checked="checked"/>
+    <input type="radio" class="feedPlus" checked="checked"/>
   </li>
 </div>
 
 <script type="text/javascript;version=1.8">
 
 let maxSites = 10;
 Sites.get(maxSites).forEach( addSite );
 
@@ -257,16 +265,35 @@ function addSite( item ) {
         opacity = 1;
         text = "done";
       }
 
       el.find(":not(done)").fadeTo("slow", opacity);
       done.text(text);
     });
 
+  let updateFeedDesc = function() {
+    let vis = feeds.find("li:visible").length;
+    let hid = feeds.find("li:hidden").length;
+    let visFeeds = vis + " " + PluralForm.get(vis, "feed;feeds");
+    feedDesc.find("li").text(visFeeds + " shown (" + hid + " hidden)");
+
+    feedMinus.attr("disabled", vis == 0);
+    feedPlus.attr("disabled", hid == 0);
+  };
+
+  let feedPlus = el.find(".feedPlus").
+    click(function(event) {
+      feeds.find("li:hidden").slice(0, 1).slideDown("fast", updateFeedDesc);
+    });
+  let feedMinus = el.find(".feedMinus").
+    click(function(event) {
+      feeds.find("li:visible").slice(-1).slideUp("fast", updateFeedDesc);
+    });
+
   // Define some hover/unhover used by the site and subelements
   let elHover = function() {
     // Don't show styles/click behavior if editing
     if (isEdit)
       return;
 
     el.mousedown(openURI).
       css("cursor", "pointer");
@@ -312,39 +339,63 @@ function addSite( item ) {
 
     // Show checkbox for site where favicon is
     let iPos = icon.offset();
     siteCheck.css("top", iPos.top + "px").
       css("left", iPos.left - 3 + "px").
       attr("checked", true).
       fadeIn();
     icon.fadeOut();
+
+    // Show options to configure feeds if we have feeds
+    if (feeds.data("feed")) {
+      updateFeedDesc();
+      feedDesc.slideDown();
+
+      feedPlus.css("top", iPos.top + 20 + "px").
+        css("left", iPos.left + 7 + "px").
+        fadeIn();
+      feedMinus.css("top", iPos.top + 20 + "px").
+        css("left", iPos.left - 13 + "px").
+        fadeIn();
+    }
   });
 
   let done = el.find("done").click(function(){
     isEdit = false;
     done.fadeOut();
     edit.fadeIn();
     siteCheck.fadeOut();
     icon.fadeIn();
+    feedDesc.slideUp();
+    feedPlus.fadeOut();
+    feedMinus.fadeOut();
 
     // Remove the site if it's not checked when finishing
     if (!siteCheck.is(":checked")) {
       Sites.remove(getPos(el));
       el.slideUp("fast", function() {
         el.remove();
         window.location.reload();
       });
     }
+
+    // Record how many feeds the user wants shown
+    item.feeds = feeds.find("li:visible").length;
   });
 
   // Get feeds for the site
+  let feedDesc = el.find(".rss").slice(0, 1).hide();
+  let feeds = el.find(".rss").slice(1);
   let onFeed = function(feed) {
-    for (let i = 0; i < 3 && i < feed.length; i++) {
-      $("<li/>").
+    if (feed.length > 0)
+      feeds.data("feed", feed);
+
+    for (let i = 0; i < feed.length; i++) {
+      let feedItem = $("<li/>").
         append(feed[i].title).
         data("site", feed[i]).
         hover(function() {
           elUnhover();
 
           // Don't show styles/click behavior if editing
           if (isEdit)
             return;
@@ -355,17 +406,21 @@ function addSite( item ) {
             css("text-decoration", "underline");
         }, function() {
           elHover();
           $(this).
             unbind("mousedown").
             css("cursor", "default").
             css("text-decoration", "inherit");
         }).
-        appendTo( el.find(".rss") );
+        appendTo(feeds);
+
+      // Only show however many feeds the site item says to
+      if (i >= item.feeds)
+        feedItem.hide();
     }
   };
   Feeds.get(item.id, onFeed);
 
   $("#sites").append( el );
 }
 
 // TODO: Clean this up and move it to another file.
--- a/modules/sites.js
+++ b/modules/sites.js
@@ -93,16 +93,19 @@ let Sites = {
           getFaviconLinkForIcon(toURI(row.favicon)).spec;
 
         // Fix up the title by trimming subtitles, trailing splitters («·»–—•)
         let title = row.fullTitle.split(/[-.:<!>;,\|\/\u00ab\u00b7\u00bb\u2013\u2014\u2022]+( |$)/)[0];
         // Show the domain incase we don't have a title
         if (!title)
           title = row.uri.match(/:\/*(?:www.)?([^\/]+)/)[1];
         row.title = title;
+
+        // Default show only 3 feeds
+        row.feeds = 3;
   
         cache.push(row);
       }
     }
     catch(ex) {
       Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService).
         logStringMessage(ex);
     }