Moved the three primary user tasks into a button bar. Re-do Post resizing.
Make blerg.Link work more like old qlink. Use event propagation to cleanly
update state.
.blerg-controls {
float: right;
+ position: relative;
width: 50%;
margin-top: 8px;
margin-right: 8px;
font-size: large;
text-align: right;
+ height: 114px;
+}
+
+.blerg-controls-toolbar {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+}
+
+.blerg-controls-toolbar .onyx-button {
+ margin-left: 4pt;
+ font-size: 14pt;
+}
+
+.spew-button {
+ color: #333;
+ background-color: #0D0;
+ font-weight: bold;
+}
+
+.spew-button::after {
+ content: " ▼";
+}
+
+.spew-button.active::after {
+ content: " ▲";
}
h2 {
.blerg-post .content {
font-size: 14pt;
font-family: sans-serif;
+ height: 51pt;
}
.login {
<html>
<head>
<title>Blërg!</title>
-<link rel="stylesheet" href="css/blerg.css">
<!-- enyo dev -->
<script type="text/javascript" src="jssrc/enyo/enyo.js"></script>
<script type="text/javascript" src="jssrc/package.js"></script>
+<link rel="stylesheet" href="css/blerg.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0"/>
</head>
});
}
-var resizePostContentTimeout = null;
-function resizePostContent() {
- if (resizePostContentTimeout)
- clearTimeout(resizePostContentTimeout);
- resizePostContentTimeout = setTimeout(function() {
- var c = $('post.content');
- var lines = Math.floor(c.value.length / (100 * (c.clientWidth / 1000))) + 1;
- var m = c.value.match(/\r?\n/g);
- if (m)
- lines += m.length;
- if (lines <= 3) {
- c.style.height = "";
- } else {
- c.style.height = (lines * 17) + "pt";
- }
- resizePostContentTimeout = null;
- }, 150);
-}
-
var tickerTimer = null;
var tickerHead, tickerTail;
});
}
-function qlink(loc) {
- if (loc) {
- location.hash = loc;
- } else if (event && event.target) {
- location.href = event.target.href;
- } else {
- // Bogus qlink
- return;
- }
- lastHash = location.hash;
- urlSwitch();
- return false;
-}
-
function ExternalURLPost(m) {
this.title = decodeURIComponent(m[1]).replace(']','').replace('[','');
this.url = decodeURIComponent(m[2]);
onStartSignup: "showSignupDialog",
onTryLogin: "tryLogin",
onTryLogout: "tryLogout",
- onSetTitle: "setTitle"
+ onSetTitle: "setTitle",
+ onPostVisibility: "postVisibilityUpdate"
},
components: [
{classes: "blerg-header", components: [
this.$.signupDialog.show();
},
setTitle: function(inSender, inEvent) {
- if (inEvent.section != undefined)
- this.$.title.setSection(inEvent.section);
-
- if (inEvent.subscribed != undefined)
- this.$.title.setSubscribed(inEvent.subscribed);
-
- if (inEvent.showControls)
- this.$.title.showControls()
- else
- this.$.title.hideControls();
+ this.$.title.waterfall('onSetTitle', inEvent);
},
tryLogin: function(inSender, inEvent) {
this.$.api.login(inEvent.username, inEvent.password);
logout: function(inSender, inEvent) {
clearInterval(this.feedStatusUpdateInterval);
this.waterfall('onLogout');
+ },
+ postVisibilityUpdate: function(inSender, inEvent) {
+ this.$.post.waterfall('onPostVisibility', inEvent);
+ this.$.controls.waterfall('onPostVisibility', inEvent);
}
});
enyo.kind({
name: "blerg.Controls",
kind: "Control",
- style: "float: right",
classes: "blerg-controls",
username: null,
+ postShowing: false,
published: {
loggedIn: false
},
handlers: {
onLogin: "login",
- onLogout: "logout"
+ onLogout: "logout",
+ onPostVisibility: "postVisibilityUpdate"
},
components: [
{name: "loggedOutControls", components: [
{name: "greeting", components: [
{noDom: true, content: "Hello, "},
{name: "userlink", tag: "a"},
+ {noDom: true, content: ". "},
+ {kind: "blerg.Link", content: "Logout", onNavigate: "logoutClicked"},
{noDom: true, content: "."}
]},
- {classes: "onyx-toolbar-inline", components: [
- {kind: "onyx.Button", content: "Write", onclick: "writeClicked"},
- {kind: "onyx.Button", content: "Hearsay", onclick: "chatterClicked"},
- {kind: "onyx.Button", content: "Stalking", onclick: "feedClicked"},
- {kind: "onyx.Button", content: "Logout", onclick: "logoutClicked"}
- ]},
{components: [
- {name: "rssButton", showing: false, kind: "blerg.Link", components: [
+ {name: "rssButton", kind: "blerg.Link", showing: false, components: [
{kind: "Image", src: "/images/rss.png", width: 16, height: 16},
{noDom: true, content: " RSS"}
]}
- ]}
+ ]},
+ {classes: "blerg-controls-toolbar", components: [
+ {kind: "onyx.Button", content: "Feed Your Vanity", onclick: "chatterClicked"},
+ {kind: "onyx.Button", content: "Stalk Your Victims", onclick: "feedClicked"},
+ {name: "spewButton", kind: "onyx.Button", classes: "spew-button", content: "Spew It!", onclick: "spewToggle"}
+ ]},
]}
],
showRSS: function(url) {
},
logoutClicked: function() {
this.bubble('onTryLogout');
+ return true;
},
login: function(inSender, inEvent) {
this.$.password.setValue('');
},
logout: function(inSender, inEvent) {
this.setLoggedIn(false);
+ },
+ spewToggle: function(inSender, inEvent) {
+ this.postShowing = !this.postShowing;
+ this.bubble('onPostVisibility', {showing: this.postShowing});
+ },
+ postVisibilityUpdate: function(inSender, inEvent) {
+ this.postShowing = inEvent.showing;
+ this.$.spewButton.addRemoveClass('active', inEvent.showing);
}
});
enyo.kind({
name: "blerg.Link",
+ kind: "Control",
tag: "a",
- attributes: {href:"#"}
+ href: "#",
+ handlers: {
+ onclick: "muteLink",
+ },
+ create: function() {
+ this.inherited(arguments);
+ this.setAttribute('href', this.href);
+ },
+ muteLink: function(inSender, inEvent) {
+ inEvent.preventDefault();
+ if (this.href != '#')
+ location.href = this.href;
+ this.bubble('onNavigate');
+ return true;
+ }
});
name: "blerg.Post",
kind: "Control",
classes: "blerg-post",
+ handlers: {
+ onPostVisibility: "postVisibilityUpdate"
+ },
+ resizePostContentTimeout: null,
components: [
{tag: "h2", content: "What's on your mind?"},
{kind: "onyx.InputDecorator", components: [
this.$.postContent.setValue(inVal);
},
closePost: function() {
- this.hide();
+ this.bubble('onPostVisibility', {showing: false});
},
doPost: function() {
this.bubble('onPost', {data: this.getData()});
+ },
+ postVisibilityUpdate: function(inSender, inEvent) {
+ if (inEvent.showing)
+ this.show();
+ else
+ this.hide();
+ },
+ resizePostContent: function(inSender, inEvent) {
+ if (this.resizePostContentTimeout)
+ clearTimeout(this.resizePostContentTimeout);
+ this.resizePostContentTimeout = setTimeout(function() {
+ var n = this.$.postContent.hasNode();
+ if (!n)
+ return;
+ var c = this.getData();
+ var lines = Math.floor(c.length / (100 * (n.clientWidth / 1000))) + 1;
+ var m = c.match(/\r?\n/g);
+ if (m)
+ lines += m.length;
+ if (lines <= 3) {
+ this.$.postContent.setStyle("");
+ } else {
+ this.$.postContent.setStyle("height: " + (lines * 17) + "pt");
+ }
+ this.resizePostContentTimeout = null;
+ }.bind(this), 150);
}
});
kind: "Control",
style: "float: left; width: 40%",
published: {
- subscribed: null,
section: ""
},
+ handlers: {
+ onSetTitle: "setTitle"
+ },
components: [
{kind: "Image", classes: "logo", src: "images/blerglogo.png", attributes: {width: 125, height: 122}},
{tag: "h1", components: [
- {kind: "blerg.Link", content: "Blërg!"}
+ {kind: "blerg.Link", href: "#/", content: "Blërg!"}
]},
{tag: "h2", components: [
{name: "section", tag: "span"}
- ]},
- {name: "userControls", showing: false, components: [
- {kind: "blerg.Link", onclick: "clickChatter", content: "[chatter]"},
- {name: "subscribeLink", kind: "blerg.Link", onclick: "clickSubscribe", showing: false, content: "[stalk]"},
- {name: "unsubscribeLink", kind: "blerg.Link", onclick: "clickUnsubscribe", showing: false, content: "[stop stalking]"}
]}
],
create: function() {
this.inherited(arguments);
- this.subscribedChanged();
- },
- clickChatter: function() {
- this.bubble("onChatter");
- },
- clickSubscribe: function() {
- this.bubble("onSubscribe");
- },
- clickUnsubscribe: function() {
- this.bubble("onUnsubscribe");
- },
- subscribedChanged: function() {
- if (this.subscribed == null) {
- this.$.subscribeLink.hide();
- this.$.unsubscribeLink.hide();
- } else if (this.subscribed) {
- this.$.subscribeLink.hide();
- this.$.unsubscribeLink.show();
- } else {
- this.$.subscribeLink.show();
- this.$.unsubscribeLink.hide();
- }
},
sectionChanged: function() {
this.$.section.setContent(this.section);
},
- showControls: function() {
- this.$.userControls.hide();
- },
- hideControls: function() {
- this.$.userControls.hide();
+ setTitle: function(inSender, inEvent) {
+ if (inEvent.section)
+ this.setSection(inEvent.section);
}
});
]}
]},
{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"},
projects / blerg.git / commitdiff