enyo.kind({
- name: "blerg.Welcome",
- statics: {
- locationDetect: function(l) {
- if (l.hash.match(/^(#\/?)?$/))
- return {kind: "blerg.Welcome"}
- else
- return false;
- }
- },
- components: [
- {components: [
- {style: "float: right; text-align: center; margin: 0 0 1em 1em", components: [
- {style: "font-size: 14pt; margin-bottom: 4pt", content: "Curious? Click this unbelievably obnoxious button!"},
- {kind: "onyx.Button", content: "I want to Blërg!", style: "font-size: 40pt; padding: 1em; background-color: #C0F; color: #F88", onclick: "startSignup"}
- ]}
- ]},
- {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", 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"}
- ],
- rendered: function() {
- this.inherited(arguments);
+ name: "blerg.Welcome",
+ statics: {
+ locationDetect: function(l) {
+ if (l.hash.match(/^(#\/?)?$/))
+ return {kind: "blerg.Welcome"}
+ else
+ return false;
+ }
+ },
+ components: [
+ {components: [
+ {style: "float: right; text-align: center; margin: 0 0 1em 1em;", components: [
+ {style: "font-size: 14pt; margin-bottom: 4pt;", content: "Curious? Click this unbelievably obnoxious button!"},
+ {kind: "onyx.Button", content: "I want to Blërg!", classes: "signup-button", onclick: "startSignup"}
+ ]}
+ ]},
+ {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", onNavigate: "loadMore", content: "Tell me more..."},
+ {style: "clear: both;"},
+ {name: "contentBox", allowHtml: true},
+ {classes: "latest", components: [
+ {classes: "latest-posts", components: [
+ {name: "latestPostsScroller", classes: "latest-scroller", onmouseover: "pauseTicker", onmouseout: "startTicker", components: [
+ {tag: "h2", content: "Latest posts"},
+ {name: "latestPosts"}
+ ]}
+ ]},
+ {classes: "latest-tags", components: [
+ {classes: "latest-scroller", components: [
+ {tag: "h2", content: "Latest tags"},
+ {name: "latestTags"}
+ ]}
+ ]}
+ ]}
+ ],
+ create: function() {
+ this.inherited(arguments);
- this.bubble("onSetTitle", {section: "Welcome!"});
- },
- loadMore: function() {
- var req = new enyo.Ajax({
- url: "/welcome.html",
- handleAs: "text"
- });
- req.response(function(inSender, inResponse) {
- this.$.contentBox.setContent(inResponse);
- this.$.moreLink.hide();
- }.bind(this));
- req.go();
- },
- startSignup: function() {
- this.bubble('onStartSignup');
- }
+ this.bubble("onSetTitle", {section: "Welcome!"});
+ this.loadLatest();
+ },
+ destroy: function() {
+ this.stopTicker();
+ this.inherited(arguments);
+ },
+ loadMore: function() {
+ var req = new enyo.Ajax({
+ url: "/welcome.html",
+ handleAs: "text"
+ });
+ req.response(function(inSender, inResponse) {
+ this.$.contentBox.setContent(inResponse);
+ this.$.moreLink.hide();
+ }.bind(this));
+ req.go();
+ },
+ 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({tag: null, 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() {
+ var starter = function() {
+ if (this.$.latestPostsScroller.hasNode()) {
+ var n = this.$.latestPostsScroller.node;
+ if (n.scrollTop >= n.scrollHeight - n.clientHeight)
+ n.scrollTop = 0;
+ this.startTicker();
+ } else {
+ this.tickerTimeout = setTimeout(starter, 1000);
+ }
+ }.bind(this)
+ this.tickerTimeout = setTimeout(starter, 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.$.latestPostsScroller.node;
+ if (n.scrollTop < n.scrollHeight - n.clientHeight) {
+ n.scrollTop += 2;
+ } else {
+ this.stopTicker();
+ this.startTickerCycle();
+ }
+ }
});