Some changes to make things suck less on small screens

[blerg.git] / www / jssrc / blerg / Post.js

diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js
index 6e120a0..b4ab559 100644 (file)
--- a/www/jssrc/blerg/Post.js
+++ b/www/jssrc/blerg/Post.js
@@ -1,27 +1,142 @@
 enyo.kind({
-       name: "blerg.Post",
-       kind: "Control",
-       classes: "blerg-post",
-       components: [
-               {tag: "h2", content: "What's on your mind?"},
-               {kind: "onyx.InputDecorator", components: [
-                       {name: "postContent", classes: "content", kind: "onyx.TextArea", onkeydown: "resizePostContent"}
-               ]},
-               {classes: "buttons", components: [
-                       {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative"},
-                       {kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative"}
-               ]}
-       ],
-       getData: function() {
-               return this.$.postContent.getValue();
-       },
-       setData: function(inVal) {
-               this.$.postContent.setValue(inVal);
-       },
-       closePost: function() {
-               this.hide();
-       },
-       doPost: function() {
-               this.bubble('onPost', {data: this.getData()});
-       }
+    name: "blerg.Post",
+    kind: "FittableRows",
+    classes: "blerg-post",
+    handlers: {
+        onPostVisibility: "postVisibilityUpdate",
+        onLogin: "loggedIn",
+        onLogout: "loggedOut",
+        onkeydown: "keyHandler"
+    },
+    components: [
+        {tag: "h2", content: "What's on your mind?"},
+        {kind: "onyx.InputDecorator", alwaysLooksFocused: true, classes: "content-decorator", fit: true, components: [
+            {name: "postContent", kind: "onyx.TextArea", classes: "content", onkeyup: "updatePreview", attributes: {tabindex: 4}}
+        ]},
+        {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);
+    },
+    getData: function() {
+        return this.$.postContent.getValue();
+    },
+    setData: function(inVal) {
+        this.$.postContent.setValue(inVal);
+    },
+    closePost: function() {
+        this.bubble('onPostVisibility', {showing: false});
+    },
+    doPost: function() {
+        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.$.postContent.node.blur();
+            setTimeout(function() {
+                this.hide();
+                this.removeClass('exit');
+            }.bind(this), 500);
+        }
+        this.addRemoveClass('enter', inEvent.showing);
+        this.addRemoveClass('exit', !inEvent.showing);
+    },
+    updatePreview: function(inSender, inEvent) {
+        this.$.preview.setContent(blerg.Util.blergFormat(this.getData()));
+    },
+    loggedIn: function() {
+        this.$.postButton.setDisabled(false);
+        this.$.loginReminder.hide();
+    },
+    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();
+        }
+    }
 });