From 55431b133192e59138a51591d7ef4ef20b6ceb52 Mon Sep 17 00:00:00 2001 From: Chip Black Date: Mon, 16 Apr 2012 01:13:19 -0700 Subject: [PATCH] Redesign user tasks 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. --- www/css/blerg.css | 28 +++++++++++++++++++++++++ www/index.html | 2 +- www/js/blerg.js | 33 ----------------------------- www/jssrc/blerg/Blerg.js | 18 +++++++--------- www/jssrc/blerg/Controls.js | 31 +++++++++++++++++++--------- www/jssrc/blerg/Link.js | 17 ++++++++++++++- www/jssrc/blerg/Post.js | 32 ++++++++++++++++++++++++++++- www/jssrc/blerg/Title.js | 41 +++++++------------------------------ www/jssrc/blerg/Welcome.js | 2 +- 9 files changed, 112 insertions(+), 92 deletions(-) diff --git a/www/css/blerg.css b/www/css/blerg.css index 10e8ed5..2230014 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -54,11 +54,38 @@ a > img { .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 { @@ -111,6 +138,7 @@ h1, h2, h3 { .blerg-post .content { font-size: 14pt; font-family: sans-serif; + height: 51pt; } .login { diff --git a/www/index.html b/www/index.html index 9c78587..2404be1 100644 --- a/www/index.html +++ b/www/index.html @@ -5,11 +5,11 @@ Blërg! - + diff --git a/www/js/blerg.js b/www/js/blerg.js index 6d555b8..fc93a5e 100644 --- a/www/js/blerg.js +++ b/www/js/blerg.js @@ -721,25 +721,6 @@ function unsubscribe() { }); } -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; @@ -816,20 +797,6 @@ function loadLatest() { }); } -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]); diff --git a/www/jssrc/blerg/Blerg.js b/www/jssrc/blerg/Blerg.js index 2a571a8..31d28a8 100644 --- a/www/jssrc/blerg/Blerg.js +++ b/www/jssrc/blerg/Blerg.js @@ -6,7 +6,8 @@ enyo.kind({ onStartSignup: "showSignupDialog", onTryLogin: "tryLogin", onTryLogout: "tryLogout", - onSetTitle: "setTitle" + onSetTitle: "setTitle", + onPostVisibility: "postVisibilityUpdate" }, components: [ {classes: "blerg-header", components: [ @@ -71,16 +72,7 @@ enyo.kind({ 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); @@ -102,5 +94,9 @@ enyo.kind({ logout: function(inSender, inEvent) { clearInterval(this.feedStatusUpdateInterval); this.waterfall('onLogout'); + }, + postVisibilityUpdate: function(inSender, inEvent) { + this.$.post.waterfall('onPostVisibility', inEvent); + this.$.controls.waterfall('onPostVisibility', inEvent); } }); diff --git a/www/jssrc/blerg/Controls.js b/www/jssrc/blerg/Controls.js index 508cd60..f23f63f 100644 --- a/www/jssrc/blerg/Controls.js +++ b/www/jssrc/blerg/Controls.js @@ -1,15 +1,16 @@ 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: [ @@ -29,20 +30,21 @@ enyo.kind({ {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) { @@ -72,6 +74,7 @@ enyo.kind({ }, logoutClicked: function() { this.bubble('onTryLogout'); + return true; }, login: function(inSender, inEvent) { this.$.password.setValue(''); @@ -82,5 +85,13 @@ enyo.kind({ }, 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); } }); diff --git a/www/jssrc/blerg/Link.js b/www/jssrc/blerg/Link.js index 929e1a5..bb2d8d3 100644 --- a/www/jssrc/blerg/Link.js +++ b/www/jssrc/blerg/Link.js @@ -1,5 +1,20 @@ 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; + } }); diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js index 6e120a0..3ab4197 100644 --- a/www/jssrc/blerg/Post.js +++ b/www/jssrc/blerg/Post.js @@ -2,6 +2,10 @@ enyo.kind({ 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: [ @@ -19,9 +23,35 @@ enyo.kind({ 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); } }); diff --git a/www/jssrc/blerg/Title.js b/www/jssrc/blerg/Title.js index 8fa9dbc..bd82520 100644 --- a/www/jssrc/blerg/Title.js +++ b/www/jssrc/blerg/Title.js @@ -3,55 +3,28 @@ enyo.kind({ 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); } }); diff --git a/www/jssrc/blerg/Welcome.js b/www/jssrc/blerg/Welcome.js index f255fff..2ac7bde 100644 --- a/www/jssrc/blerg/Welcome.js +++ b/www/jssrc/blerg/Welcome.js @@ -16,7 +16,7 @@ enyo.kind({ ]} ]}, {allowHtml: true, content: '

I am 12 and what is this

Blërg is a microblogging platform. Or maybe a miniblogging platform. Blërg is not sure. Blërg is a lot like Twitter, but aims to fix some of its idiosyncracies. Blërg does not want to be a full blogging platform like Wordpress or Livejournal. Blërg is also an open source tagged text database engine written in C that does the back-end work. Blërg\'s author finds it entertaining to anthropomorphize Blërg in the third person.

'}, - {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"}, -- 2.34.1