Add User, port simplified paging

[blerg.git] / www / jssrc / blerg / Welcome.js

diff --git a/www/jssrc/blerg/Welcome.js b/www/jssrc/blerg/Welcome.js
index f255fff..769450e 100644 (file)
--- a/www/jssrc/blerg/Welcome.js
+++ b/www/jssrc/blerg/Welcome.js
@@ -16,18 +16,25 @@ enyo.kind({
                        ]}
                ]},
                {allowHtml: true, content: '<h2>I am 12 and what is this</h2> <p>Blërg is a microblogging platform.  Or maybe a miniblogging platform.  Blërg is not sure.  Blërg is a lot like <a href="http://twitter.com/">Twitter</a>, but aims to fix some of its idiosyncracies.  Blërg does not want to be a full blogging platform like <a href="http://wordpress.com/">Wordpress</a> or <a href="http://livejournal.com/">Livejournal</a>.  Blërg is also an <a href="/doc/">open source tagged text database engine</a> written in C that does the back-end work. Blërg\'s author finds it entertaining to anthropomorphize Blërg in the third person.</p>'},
-               {name: "moreLink", kind: "blerg.Link", onclick: "loadMore", content: "Tell me more..."},
+               {name: "moreLink", kind: "blerg.Link", onNavigate: "loadMore", content: "Tell me more..."},
                {style: "clear: both"},
                {name: "contentBox", allowHtml: true},
-               {tag: "h2", content: "Latest posts"},
-               {name: "latestPosts"},
-               {tag: "h2", content: "Latest tags"},
-               {name: "latestTags"}
+               {classes: "latest", components: [
+                       {tag: "h2", content: "Latest posts"},
+                       {name: "latestPosts", classes: "latest-posts", onmouseover: "pauseTicker", onmouseout: "startTicker"},
+                       {tag: "h2", content: "Latest tags"},
+                       {name: "latestTags", classes: "latest-tags"}
+               ]}
        ],
-       rendered: function() {
+       create: function() {
                this.inherited(arguments);
 
                this.bubble("onSetTitle", {section: "Welcome!"});
+               this.loadLatest();
+       },
+       destroy: function() {
+               this.stopTicker();
+               this.inherited(arguments);
        },
        loadMore: function() {
                var req = new enyo.Ajax({
@@ -42,5 +49,63 @@ enyo.kind({
        },
        startSignup: function() {
                this.bubble('onStartSignup');
+       },
+       loadLatest: function() {
+               var req = new enyo.Ajax({
+                       url: baseURL + '/latest.json'
+               });
+               req.response(function(inSender, inResponse) {
+                       this.$.latestTags.destroyComponents();
+                       for (var i = 0; i < inResponse.tags.length; i++) {
+                               var v = inResponse.tags[i];
+                               this.$.latestTags.createComponent({
+                                       kind: "blerg.Link",
+                                       href: baseURL + "/#/tag/" + v,
+                                       content: "#" + v,
+                                       classes: "ref"
+                               });
+                               this.$.latestTags.createComponent({noDom: true, content: " "});
+                       }
+                       this.$.latestTags.render();
+
+                       this.$.latestPosts.destroyComponents();
+                       for (var i = 0; i < inResponse.records.length; i++) {
+                               var v = inResponse.records[i];
+                               this.$.latestPosts.createComponent({kind: "blerg.BriefRecord"}, v);
+                       }
+                       this.$.latestPosts.render();
+                       this.startTickerCycle();
+               }.bind(this));
+               req.go();
+       },
+       startTickerCycle: function() {
+               this.tickerTimeout = setTimeout(function() {
+                       this.$.latestPosts.node.scrollTop = 0;
+                       this.startTicker();
+               }.bind(this), 2500);
+       },
+       startTicker: function() {
+               if (this.tickerInterval)
+                       return;
+               this.tickerInterval = setInterval(this.ticker.bind(this), 100);
+       },
+       pauseTicker: function() {
+               clearInterval(this.tickerInterval);
+               this.tickerInterval = null;
+       },
+       stopTicker: function() {
+               clearTimeout(this.tickerTimeout);
+               this.tickerTimeout = null;
+               clearInterval(this.tickerInterval);
+               this.tickerInterval = null;
+       },
+       ticker: function() {
+               var n = this.$.latestPosts.node;
+               if (n.scrollTop < n.scrollHeight - n.clientHeight) {
+                       n.scrollTop += 2;
+               } else {
+                       this.stopTicker();
+                       this.startTickerCycle();
+               }
        }
 });