first release maybe

jmettraux · Dec 4, 2008 · 542bc81 · 542bc81
1 parent 7e178fc
commit 542bc81
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 18 deletions.
diff --git a/README.txt b/README.txt
@@ -17,6 +17,31 @@ For instance :
       "http://pipes.yahoo.com/pipes/pipe.run?_id=XGwyd_LA3RGNSAMs6icw5g");
   </script>
 
+(see http://github.com/jmettraux/pilatus/tree/master/public/index.html)
+
+
+== CSS
+
+The pipe result, once rendered will look like :
+
+  <div class="pilatus_entry">
+    <div class="pilatus_title">todo #23083 : implemented QueuedDbHistory (used in ruote-rest)</div>
+    <div class="pilatus_link">
+      <a href="http://github.com/jmettraux/ruote/commit/c36912c9bde3ff7ddbbaa48ee971acb76ccb1744">http://github.com/jmettraux/ruote/commit/c36912c9bde3ff7ddbbaa48ee971acb76ccb1744</a>
+    </div>
+    <div class="pilatus_author_name">John Mettraux</div>
+    <div class="pilatus_pubDate">2008-12-02T22:28:14-08:00</div>
+    <div class="pilatus_description">
+      <pre>m CHANGELOG.txt m lib/openwfe/extras/expool/dbhistory.rb todo #23083 : implemented QueuedDbHistory (used in ruote-rest)</pre>
+    </div>
+  </div>
+
+You can change the CSS prefix by doing
+
+  Pilatus.setCssPrefix('myprefix');
+
+before the call to Pilatus.loadAndRender(...)
+
 
 == testing
 
@@ -33,6 +58,11 @@ Pilatus comes with a tiny Ruby Rack/Mongrel application.
 then point your browser to http://localhost:4567
 
 
+== license
+
+The license is the MIT one (see LICENSE.txt)
+
+
 == source
 
 The source is under public/ (along with the demo index.html page)

diff --git a/TODO.txt b/TODO.txt
@@ -1,3 +1,4 @@
 
-[ ] tunable css_prefix
+[x] tunable css prefix
+[x] tunable entry item order
 
diff --git a/public/index.html b/public/index.html
@@ -1,7 +1,12 @@
 
 <html>
+
 <head>
+
+  <title>Pilatus, a js lib for displaying the result of a Yahoo Pipe</title>
+
   <script src='/pilatus.js'></script>
+
   <style>
     body {
       font-family: Helvetica, sans-serif;
@@ -14,10 +19,25 @@
       font-size: 2em;
     }
   </style>
+
 </head>
+
 <body>
   <div id="feed"></div>
   <script>
+
+    //Pilatus.setCssPrefix('myfeed');
+      //
+      // the default CSS prefix is 'pilatus'
+
+    //Pilatus.setItemKeys([
+    //  [ 'title' ],
+    //  [ 'author', 'name' ],
+    //  [ 'link' ]
+    //]);
+      //
+      // change the order and elements displayed for each feed entry
+
     Pilatus.loadAndRender(
       "feed", 
       "http://pipes.yahoo.com/pipes/pipe.run?_id=XGwyd_LA3RGNSAMs6icw5g");

diff --git a/public/pilatus.js b/public/pilatus.js
@@ -10,6 +10,10 @@
 
 var Pilatus = function() {
 
+  var cssPrefix = 'pilatus';
+
+  function setCssPrefix (p) { cssPrefix = p; }
+
   function createElt (parentElt, eName, eAttributes, eText) {
     var e = document.createElement(eName);
     if (eAttributes) {
@@ -40,12 +44,23 @@ var Pilatus = function() {
       { 'src': pipeUrl });
   }
 
-  var ITEM_KEYS = [
+  var itemKeys = [
     [ 'title' ],
+    [ 'link' ],
     [ 'author', 'name' ],
-    [ 'pubDate' ]
+    [ 'pubDate' ],
+    //[ 'content', 'content' ],
+    [ 'description' ]
   ];
 
+  function setItemKeys (ik) {
+    itemKeys = ik;
+  }
+
+  function linkInnerHtml (item) {
+    return '<a href="' + item.link + '">' + item.link + '</a>';
+  }
+
   function render (parentDivId, json) {
 
     var l = json.value.items.length;
@@ -58,32 +73,27 @@ var Pilatus = function() {
       var item = json.value.items[i];
 
       var eEntry = createElt(
-        parentDiv, 'div', { 'class': 'pilatus_entry' });
+        parentDiv, 'div', { 'class': cssPrefix + '_entry' });
 
-      for (var j in ITEM_KEYS) {
-        var k = ITEM_KEYS[j];
-        var kl = 'pilatus_' + k.join('_');
+      for (var j in itemKeys) {
+        var k = itemKeys[j];
+        var kl = cssPrefix + '_' + k.join('_');
         var sk = k[1];
         k = k[0];
         var v = item[k];
         if (sk) v = v[sk];
-        var e = createElt(eEntry, 'div', { 'class': kl }, v);
-      }
-
-      var eLink = createElt(eEntry, 'div', { 'class': 'pilatus_link' });
-      eLink.innerHTML = '<a href="' + item.link + '">' + item.link + '</a>';
-
-      if (item.content) {
-         var eContent = createElt(
-           eEntry, 'div', { 'class': 'pilatus_content' });
-         eContent.innerHTML = item.content.content;
+        if (k == 'link') v = linkInnerHtml(item);
+        //createElt(eEntry, 'div', { 'class': kl }, v);
+        createElt(eEntry, 'div', { 'class': kl }).innerHTML = v;
       }
     }
   }
 
   return { 
     render: render,
-    loadAndRender: loadAndRender
+    loadAndRender: loadAndRender,
+    setCssPrefix: setCssPrefix,
+    setItemKeys: setItemKeys
   };
 }();