Add post formatting help

diff --git a/www/css/blerg.css b/www/css/blerg.css
index f0e5568..cec598b 100644 (file)
--- a/www/css/blerg.css
+++ b/www/css/blerg.css
@@ -37,15 +37,18 @@ a > img {
        text-shadow: black 0px 2px;
 }
 
-.blerg-header a {
-       color: inherit;
+.blerg-header h1 a {
        text-decoration: none;
 }
 
-.blerg-header a:hover {
+.blerg-header h1 a:hover {
        text-decoration: underline;
 }
 
+.blerg-header a {
+       color: inherit;
+}
+
 .blerg-header h2 {
        margin: 0;
        font-size: 28px;
@@ -202,6 +205,34 @@ h1, h2, h3 {
        color: #8F8F8F;
 }
 
+.record h1 {
+       font-size: 18pt;
+       margin: 1em 0;
+}
+
+.record h2 {
+       font-size: 16pt;
+       margin: 1em 0;
+}
+
+.record h3 {
+       font-size: 14pt;
+       margin: 1em 0;
+}
+
+.record h4 {
+       font-size: 14pt;
+       font-weight: normal;
+       margin: 1em 0;
+}
+
+.record h5 {
+       font-size: 14pt;
+       font-weight: normal;
+       font-style: italic;
+       margin: 1em 0;
+}
+
 .latest h2 {
        font-size: 16pt;
 }
@@ -268,3 +299,7 @@ h1, h2, h3 {
        color: red;
        font-weight: bold;
 }
+
+table.help td {
+       padding: 2pt 8pt;
+}

diff --git a/www/doc/post_help.html b/www/doc/post_help.html
new file mode 100644 (file)
index 0000000..a30c1f1
--- /dev/null
+++ b/www/doc/post_help.html
@@ -0,0 +1,113 @@
+<h2>Post Help</h2>
+
+<p>Blërg supports a limited subset of Markdown/wiki style formatting.
+
+<h3>Tags and Mentions</h3>
+<table class="help">
+  <tr>
+    <td>#bananas</td>
+    <td>&rArr;</td>
+    <td><a href="#/tag/bananas">#bananas</a></td>
+  </tr>
+  <tr>
+    <td>@bananymous</td>
+    <td>&rArr;</td>
+    <td><a href="#bananymous">@bananymous</a></td>
+  </tr>
+</table>
+
+<h3>Text Style</h3>
+<table class="help">
+  <tr>
+    <td>*A Christmas Carol*</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <i>A Christmas Carol</i>
+    </td>
+  </tr>
+  <tr>
+    <td>**2 Legit 2 Quit**</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <b>2 Legit 2 Quit</b>
+    </td>
+  </tr>
+  <tr>
+    <td># First-level Title
+    <br>## Second-level Title
+    <br>### Third-level Title
+    <br>#### Fourth-level Title
+    <br>##### Fifth-level Title
+    </td>
+    <td>&rArr;</td>
+    <td class="record">
+      <h1>First-level Title</h1>
+      <h2>Second-level Title</h2>
+      <h3>Third-level Title</h3>
+      <h4>Fourth-level Title</h4>
+      <h5>Fifth-level Title</h5>
+    </td>
+    <td>(Also works for = instead of #)</td>
+  </tr>
+</table>
+
+<h3>Lists</h3>
+<table class="help">
+  <tr>
+    <td>* one fish
+    <br>* two fish
+    <br>* red fish
+    <br>* blue fish
+    </td>
+    <td>&rArr;</td>
+    <td class="record">
+      <ul style="margin: 0">
+        <li>one fish</li>
+        <li>two fish</li>
+        <li>red fish</li>
+        <li>blue fish</li>
+      </ul>
+    </td>
+  </tr>
+</table>
+
+<h3>Quoting</h3>
+<table class="help">
+  <tr>
+    <td>&gt; Something someone else said</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <div class="quote">Something someone else said</i>
+    </td>
+  </tr>
+</table>
+
+<h3>Links</h3>
+<table class="help">
+  <tr>
+    <td>http://any.url</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <a href="http://any.url">http://any.url</a>
+    </td>
+  </tr>
+  <tr>
+    <td>[A Descriptive Name](http://any.url)</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <a href="http://any.url">A Descriptive Name</a>
+    </td>
+  </tr>
+  <tr>
+    <td>[A Descriptive Name](http://any.url/audio.mp3)
+    <br>[A Descriptive Name](http://any.url/audio audio:mp3)</td>
+    <td>&rArr;</td>
+    <td class="record">
+      <a href="http://any.url/audio">A Descriptive Name</a>
+      <a href="http://any.url/audio" onclick="play_audio()"><img src="/images/play.png"></a>
+    </td>
+    <td>(Where the audio format is supported. Blërg recognizes mp3, ogg, and wav.)</td>
+  </tr>
+</table>
+
+<p>

diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js
index 0c72a99..79ab126 100644 (file)
--- a/www/jssrc/blerg/Post.js
+++ b/www/jssrc/blerg/Post.js
@@ -9,7 +9,12 @@ enyo.kind({
     },
     resizePostContentTimeout: null,
     components: [
-        {tag: "h2", content: "What's on your mind?"},
+        {name: "helpContent", allowHtml: true, showing: false},
+        {style: "position: relative", components: [
+            {tag: "h2", content: "What's on your mind?", style: "width: 75%",},
+            {name: "showHelpLink", kind: "blerg.Link", onNavigate: "showHelp", content: "Help!", style: "position: absolute; right: 1pt; bottom: 1pt; font-weight: bold; font-size: large"},
+            {name: "hideHelpLink", kind: "blerg.Link", onNavigate: "hideHelp", content: "Hide Help", style: "position: absolute; right: 1pt; bottom: 1pt; font-weight: bold; font-size: large", showing: false}
+        ]},
         {kind: "onyx.InputDecorator", components: [
             {name: "postContent", classes: "content", kind: "onyx.TextArea", onkeydown: "resizePostContent", attributes: {tabindex: 4}}
         ]},
@@ -88,5 +93,25 @@ enyo.kind({
     loggedOut: function() {
         this.$.postButton.setDisabled(true);
         this.$.loginReminder.show();
+    },
+    showHelp: function() {
+        this.$.helpContent.show();
+        this.$.showHelpLink.hide();
+        this.$.hideHelpLink.show();
+        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();
+        }
+    },
+    hideHelp: function() {
+        this.$.helpContent.hide();
+        this.$.showHelpLink.show();
+        this.$.hideHelpLink.hide();
     }
 });