Upgrade to Enyo/Onyx 2.1.1
[blerg.git] / www / jssrc / blerg / Welcome.js
1 enyo.kind({
2     name: "blerg.Welcome",
3     statics: {
4         locationDetect: function(l) {
5             if (l.hash.match(/^(#\/?)?$/))
6                 return {kind: "blerg.Welcome"}
7             else
8                 return false;
9         }
10     },
11     components: [
12         {components: [
13             {style: "float: right; text-align: center; margin: 0 0 1em 1em;", components: [
14                 {style: "font-size: 14pt; margin-bottom: 4pt;", content: "Curious? Click this unbelievably obnoxious button!"},
15                 {kind: "onyx.Button", content: "I want to Blërg!", style: "font-size: 40pt; padding: 1em; background-color: #C0F; color: #F88;", onclick: "startSignup"}
16             ]}
17         ]},
18         {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>'},
19         {name: "moreLink", kind: "blerg.Link", onNavigate: "loadMore", content: "Tell me more..."},
20         {style: "clear: both;"},
21         {name: "contentBox", allowHtml: true},
22         {classes: "latest", components: [
23             {tag: "h2", content: "Latest posts"},
24             {name: "latestPosts", classes: "latest-posts", onmouseover: "pauseTicker", onmouseout: "startTicker"},
25             {tag: "h2", content: "Latest tags"},
26             {name: "latestTags", classes: "latest-tags"}
27         ]}
28     ],
29     create: function() {
30         this.inherited(arguments);
31
32         this.bubble("onSetTitle", {section: "Welcome!"});
33         this.loadLatest();
34     },
35     destroy: function() {
36         this.stopTicker();
37         this.inherited(arguments);
38     },
39     loadMore: function() {
40         var req = new enyo.Ajax({
41             url: "/welcome.html",
42             handleAs: "text"
43         });
44         req.response(function(inSender, inResponse) {
45             this.$.contentBox.setContent(inResponse);
46             this.$.moreLink.hide();
47         }.bind(this));
48         req.go();
49     },
50     startSignup: function() {
51         this.bubble('onStartSignup');
52     },
53     loadLatest: function() {
54         var req = new enyo.Ajax({
55             url: baseURL + '/latest.json'
56         });
57         req.response(function(inSender, inResponse) {
58             this.$.latestTags.destroyComponents();
59             for (var i = 0; i < inResponse.tags.length; i++) {
60                 var v = inResponse.tags[i];
61                 this.$.latestTags.createComponent({
62                     kind: "blerg.Link",
63                     href: baseURL + "/#/tag/" + v,
64                     content: "#" + v,
65                     classes: "ref"
66                 });
67                 this.$.latestTags.createComponent({tag: null, content: " "});
68             }
69             this.$.latestTags.render();
70
71             this.$.latestPosts.destroyComponents();
72             for (var i = 0; i < inResponse.records.length; i++) {
73                 var v = inResponse.records[i];
74                 this.$.latestPosts.createComponent({kind: "blerg.BriefRecord"}, v);
75             }
76             this.$.latestPosts.render();
77             this.startTickerCycle();
78         }.bind(this));
79         req.go();
80     },
81     startTickerCycle: function() {
82         this.tickerTimeout = setTimeout(function() {
83             this.$.latestPosts.node.scrollTop = 0;
84             this.startTicker();
85         }.bind(this), 2500);
86     },
87     startTicker: function() {
88         if (this.tickerInterval)
89             return;
90         this.tickerInterval = setInterval(this.ticker.bind(this), 100);
91     },
92     pauseTicker: function() {
93         clearInterval(this.tickerInterval);
94         this.tickerInterval = null;
95     },
96     stopTicker: function() {
97         clearTimeout(this.tickerTimeout);
98         this.tickerTimeout = null;
99         clearInterval(this.tickerInterval);
100         this.tickerInterval = null;
101     },
102     ticker: function() {
103         var n = this.$.latestPosts.node;
104         if (n.scrollTop < n.scrollHeight - n.clientHeight) {
105             n.scrollTop += 2;
106         } else {
107             this.stopTicker();
108             this.startTickerCycle();
109         }
110     }
111 });