www/jssrc/blerg/Post.js

   1 enyo.kind({
   2     name: "blerg.Post",
   3     kind: "FittableRows",
   4     classes: "blerg-post",
   5     handlers: {
   6         onPostVisibility: "postVisibilityUpdate",
   7         onLogin: "loggedIn",
   8         onLogout: "loggedOut",
   9         onkeydown: "keyHandler"
  10     },
  11     components: [
  12         {tag: "h2", content: "What's on your mind?"},
  13         {kind: "onyx.InputDecorator", alwaysLooksFocused: true, classes: "content-decorator", fit: true, components: [
  14             {name: "postContent", kind: "onyx.TextArea", classes: "content", onkeyup: "updatePreview", attributes: {tabindex: 4}}
  15         ]},
  16         {name: "toolbar", classes: "toolbar", components: [
  17             {classes: "buttons", fit: true, components: [
  18                 {name: "loginReminder", tag: "span", classes: "blerg-error", style: "margin-right: 8px", content: "You must log in before posting."},
  19                 {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative", attributes: {tabindex: 6}},
  20                 {name: "postButton", kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative", disabled: true, attributes: {tabindex: 5}}
  21             ]},
  22             {classes: "switcher", components: [
  23                 {kind: "onyx.RadioGroup", onActivate: "switchBottomPanel", components: [
  24                     {name: "replyButton", content: "Replying to", showing: false},
  25                     {name: "previewButton", content: "Preview"},
  26                     {content: "Help"}
  27                 ]}
  28             ]}
  29         ]},
  30         {name: "bottomPanel", kind: "Panels", classes: "bottom-panel", draggable: false, fit: true, components: [
  31             {kind: "Scroller", components: [
  32                 {name: "replyView", classes: "record", allowHtml: true},
  33             ]},
  34             {kind: "Scroller", components: [
  35                 {name: "preview", classes: "record", allowHtml: true},
  36             ]},
  37             {kind: "Scroller", components: [
  38                 {name: "helpContent", allowHtml: true},
  39             ]}
  40         ]},
  41         {name: "api", kind: "blerg.API",
  42          onPostSuccessful: "postSuccessful",
  43          onPostFailed: "postFailed"}
  44     ],
  45     create: function() {
  46         this.inherited(arguments);
  47     },
  48     getData: function() {
  49         return this.$.postContent.getValue();
  50     },
  51     setData: function(inVal) {
  52         this.$.postContent.setValue(inVal);
  53     },
  54     closePost: function() {
  55         this.bubble('onPostVisibility', {showing: false});
  56     },
  57     doPost: function() {
  58         this.$.api.post(this.getData());
  59     },
  60     postSuccessful: function() {
  61         this.setData('');
  62         this.closePost();
  63         if (location.hash != '#' + blerg.API.username) {
  64             location.hash = '#' + blerg.API.username
  65             this.bubble('onNavigate');
  66         } else {
  67             this.bubble('onReload');
  68         }
  69     },
  70     postFailed: function() {
  71         alert('Could not post!');
  72     },
  73     postVisibilityUpdate: function(inSender, inEvent) {
  74         if (inEvent.showing) {
  75             this.show();
  76             this.$.postContent.focus();
  77
  78             if (inEvent.data && this.getData() == "") {
  79                 this.setData(inEvent.data);
  80                 this.$.postContent.node.setSelectionRange(inEvent.data.length, inEvent.data.length);
  81                 this.updatePreview();
  82             }
  83
  84             if (inEvent.replyto) {
  85                 this.$.replyButton.show();
  86                 this.$.replyButton.setActive(true);
  87                 this.$.replyView.setContent(inEvent.replyto);
  88             } else {
  89                 this.$.replyButton.hide();
  90                 this.$.previewButton.setActive(true);
  91             }
  92
  93             // Need to reflow manually because this is hidden by default
  94             this.$.toolbar.reflow();
  95             this.reflow();
  96         } else {
  97             this.$.postContent.node.blur();
  98             setTimeout(function() {
  99                 this.hide();
 100                 this.removeClass('exit');
 101             }.bind(this), 500);
 102         }
 103         this.addRemoveClass('enter', inEvent.showing);
 104         this.addRemoveClass('exit', !inEvent.showing);
 105     },
 106     updatePreview: function(inSender, inEvent) {
 107         this.$.preview.setContent(blerg.Util.blergFormat(this.getData()));
 108     },
 109     loggedIn: function() {
 110         this.$.postButton.setDisabled(false);
 111         this.$.loginReminder.hide();
 112     },
 113     loggedOut: function() {
 114         this.$.postButton.setDisabled(true);
 115         this.$.loginReminder.show();
 116     },
 117     loadHelp: function() {
 118         if (this.$.helpContent.getContent() == '') {
 119             var req = new enyo.Ajax({
 120                 url: baseURL + '/doc/post_help.html',
 121                 handleAs: 'text'
 122             });
 123             req.response(function(inSender, inResponse) {
 124                 this.$.helpContent.setContent(inResponse);
 125             }.bind(this));
 126             req.go();
 127         }
 128     },
 129     switchBottomPanel: function(inSender, inEvent) {
 130         var active = inSender.getActive();
 131         var index = inSender.children.indexOf(active);
 132         this.$.bottomPanel.setIndex(index);
 133         if (index == 2) {
 134             this.loadHelp();
 135         }
 136     },
 137     keyHandler: function(inSender, inEvent) {
 138         if (inEvent.which == 27) {
 139             this.closePost();
 140         }
 141     }
 142 });