enyo.kind({
name: "blerg.Post",
- kind: "Control",
+ kind: "FittableRows",
classes: "blerg-post",
handlers: {
onPostVisibility: "postVisibilityUpdate",
onLogin: "loggedIn",
- onLogout: "loggedOut"
+ onLogout: "loggedOut",
+ onkeydown: "keyHandler"
},
- resizePostContentTimeout: null,
components: [
{tag: "h2", content: "What's on your mind?"},
- {kind: "onyx.InputDecorator", components: [
- {name: "postContent", classes: "content", kind: "onyx.TextArea", onkeydown: "resizePostContent", attributes: {tabindex: 4}}
+ {kind: "onyx.InputDecorator", alwaysLooksFocused: true, classes: "content-decorator", fit: true, components: [
+ {name: "postContent", kind: "onyx.TextArea", classes: "content", onkeyup: "updatePreview", attributes: {tabindex: 4}}
]},
- {classes: "buttons", components: [
- {name: "loginReminder", tag: "span", classes: "blerg-error", style: "margin-right: 8px; vertical-align: 60%", content: "You must log in before posting."},
- {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative", attributes: {tabindex: 6}},
- {name: "postButton", kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative", disabled: true, attributes: {tabindex: 5}}
- ]}
+ {name: "toolbar", classes: "toolbar", components: [
+ {classes: "buttons", fit: true, components: [
+ {name: "loginReminder", tag: "span", classes: "blerg-error", style: "margin-right: 8px", content: "You must log in before posting."},
+ {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative", attributes: {tabindex: 6}},
+ {name: "postButton", kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative", disabled: true, attributes: {tabindex: 5}}
+ ]},
+ {classes: "switcher", components: [
+ {kind: "onyx.RadioGroup", onActivate: "switchBottomPanel", components: [
+ {name: "replyButton", content: "Replying to", showing: false},
+ {name: "previewButton", content: "Preview"},
+ {content: "Help"}
+ ]}
+ ]}
+ ]},
+ {name: "bottomPanel", kind: "Panels", classes: "bottom-panel", draggable: false, fit: true, components: [
+ {kind: "Scroller", components: [
+ {name: "replyView", classes: "record", allowHtml: true},
+ ]},
+ {kind: "Scroller", components: [
+ {name: "preview", classes: "record", allowHtml: true},
+ ]},
+ {kind: "Scroller", components: [
+ {name: "helpContent", allowHtml: true},
+ ]}
+ ]},
+ {name: "api", kind: "blerg.API",
+ onPostSuccessful: "postSuccessful",
+ onPostFailed: "postFailed"}
],
create: function() {
this.inherited(arguments);
this.bubble('onPostVisibility', {showing: false});
},
doPost: function() {
- this.bubble('onPost', {data: this.getData()});
+ this.$.api.post(this.getData());
+ },
+ postSuccessful: function() {
+ this.setData('');
+ this.closePost();
+ if (location.hash != '#' + blerg.API.username) {
+ location.hash = '#' + blerg.API.username
+ this.bubble('onNavigate');
+ } else {
+ this.bubble('onReload');
+ }
+ },
+ postFailed: function() {
+ alert('Could not post!');
},
postVisibilityUpdate: function(inSender, inEvent) {
if (inEvent.showing) {
this.show();
this.$.postContent.focus();
+
if (inEvent.data && this.getData() == "") {
this.setData(inEvent.data);
this.$.postContent.node.setSelectionRange(inEvent.data.length, inEvent.data.length);
+ this.updatePreview();
+ }
+
+ if (inEvent.replyto) {
+ this.$.replyButton.show();
+ this.$.replyButton.setActive(true);
+ this.$.replyView.setContent(inEvent.replyto);
+ } else {
+ this.$.replyButton.hide();
+ this.$.previewButton.setActive(true);
}
+
+ // Need to reflow manually because this is hidden by default
+ this.$.toolbar.reflow();
+ this.reflow();
} else {
- this.hide();
+ this.$.postContent.node.blur();
+ setTimeout(function() {
+ this.hide();
+ this.removeClass('exit');
+ }.bind(this), 500);
}
+ this.addRemoveClass('enter', inEvent.showing);
+ this.addRemoveClass('exit', !inEvent.showing);
},
- 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);
+ updatePreview: function(inSender, inEvent) {
+ this.$.preview.setContent(blerg.Util.blergFormat(this.getData()));
},
loggedIn: function() {
this.$.postButton.setDisabled(false);
loggedOut: function() {
this.$.postButton.setDisabled(true);
this.$.loginReminder.show();
+ },
+ loadHelp: function() {
+ if (this.$.helpContent.getContent() == '') {
+ var req = new enyo.Ajax({
+ url: baseURL + '/doc/post_help.html',
+ handleAs: 'text'
+ });
+ req.response(function(inSender, inResponse) {
+ this.$.helpContent.setContent(inResponse);
+ }.bind(this));
+ req.go();
+ }
+ },
+ switchBottomPanel: function(inSender, inEvent) {
+ var active = inSender.getActive();
+ var index = inSender.children.indexOf(active);
+ this.$.bottomPanel.setIndex(index);
+ if (index == 2) {
+ this.loadHelp();
+ }
+ },
+ keyHandler: function(inSender, inEvent) {
+ if (inEvent.which == 27) {
+ this.closePost();
+ }
}
});