Skip to content

Commit

Permalink
Implemented built-in help for the body editor widget. Provides help f…
Browse files Browse the repository at this point in the history 
…or dynamic blog context and for Markdown as well.
  • Loading branch information
@lethain
lethain committed Jun 2, 2008
1 parent 32fd06b commit ed9fbcb
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 0 deletions.
56 changes: 56 additions & 0 deletions media/lifeflow/editor/editor.css
View file
Expand Up @@ -441,4 +441,60 @@ div.files div.add {

#render p {
padding-bottom: 20px;
}

/* Styling for help portions. */

div.help {
background-color: #CCCCFF;
margin-left: 10%;
margin-right: 10%;
width: 60%;
position: absolute;
z-index: 100;
display: none;
}

div.help div.section {
display: none;
}
div.help div.selected {
display: block;
}

div.help div.editor-headers {
overflow: auto;
border: dashed 1px white;
padding-bottom: 5px;
}

div.help a.section {
margin-right: 16px;
float: left;
}

div.help td.label {
color: grey;
}

div.help a.close {
float: right;
}

div.help div.editor-internal {
}

div.help span.syntax {
color: grey;
}

div.help span.variable {
color: red;
margin: 0px;
padding: 0px;
}


a.help {
float: right;
}
7 changes: 7 additions & 0 deletions templates/lifeflow/editor/body_editor_widget.html
View file
Expand Up @@ -23,6 +23,11 @@
$("#text").hover(function(){},function(){ update(); });
$("#use_markdown").change(function(){ update(); });
});

var show_editor_help = function() {
$("#editor-help").show();
}

</script>

<div class="editing">
Expand All @@ -34,6 +39,8 @@
</select>
</div>
<div class="writing">
<a class="help" onclick="show_editor_help();">help</a>
{% include "lifeflow/editor/editor_tags_help.html" %}
<textarea id="text" class="writing">{{ object.body }}</textarea>
</div>
<div class="buttons writing-buttons">
Expand Down
113 changes: 113 additions & 0 deletions templates/lifeflow/editor/editor_tags_help.html
View file
@@ -0,0 +1,113 @@

<div id="editor-help" class="help">
<div class="editor-headers">
<a class="section" onclick="$('#dbc-help').hide(); $('#markdown-help').show();">Markdown</a>
<a class="section" onclick="$('#markdown-help').hide(); $('#dbc-help').show();" >Dynamic Blog Context Markup</a>
<a onclick="$('#editor-help').hide();" class="close">close</a>
</div>
<br>

<div id="editor-internal">
<div class="section selected" id="markdown-help">
<p> Markdown is a humane markup language created by John Gruber.
<table>
<tr>
<td class="label"> Inlined Links </td>
<td> <span class="variable">[</span>this is a link<span class="variable">](</span>http://lethain.com/ <span class="variable">"</span>A blog.<span class="variable">")</span> </td>
</tr>
<tr>
<td class="label"> Reference Links </td>
<td> <span class="variable">[</span>blog<span class="variable">]:</span> http://lethain.com/ <span class="variable">"</span>A blog<span class="variable">"</span><br> Never <span class="variable">[</span>read this trash<span class="variable">][</span>blog<span class="variable">]</span>! </td>
</tr>
<tr>
<td class="label"> Bold </td>
<td> <span class="variable">**</span>I am upset, as per usual.<span class="variable">**</span></td>
</tr>
<tr>
<td class="label"> Italics</td>
<td> <span class="variable">*</span>I am making a crucial point.<span class="variable">*</span> </td>
</tr>
<tr>
<td class="label">H1 </td>
<td> <span class="variable">#</span>This is an H1.</td>
</tr>
<tr>
<td class="label"> H4 </td>
<td> <span class="variable">####</span>This is an H4.</td>
</tr>
<tr>
<td class="label"> Blockquote </td>
<td> <span class="variable">>></span> This is all in a quote. </td>
</tr>

</table>
</div>
<div class="section" id="dbc-help">

<p>Dynamic Blog Context is a set of keywords exposing LifeFlow functionality in Markdown formated text. In LifeFlow, the brackets for reference style links in Markdown become a helpful mini-language. An example of using this mini-language:

<blockquote>If you're interested [take a look at the project][project lifeflow]. I have written [about it a fair bit as well][tag lifeflow]. </blockquote>

<h3> Supported Tags </h3>
<table>
<tr>
<td><span class="syntax">[tag <span class="variable">slug</span>]</span></td>
<td>Creates a link to the tag with @slug.</td>
</tr>
<tr>
<td><span class="syntax">[comment <span class="variable">pk</span>]</span></td>
<td>Creates a link to the comment with @pk (works with comments posted on any entry).</td>
</tr>
<tr>
<td><span class="syntax">[project <span class="variable">slug</span>]</span></td>
<td>Creates a link to the project with @slug.</td>
</tr>
<tr>
<td><span class="syntax">[author]</span></td>
<td>Creates a link to the author's biography page if there is one author, if there are more or less authors then it creates a link to the /author/ page. </td>
</tr>
<tr>
<td><span class="syntax">[comments]</span></td>
<td>Creates a link to the comment division for the current entry.</td>
</tr>
<tr>
<td><span class="syntax">[projects]</span></td>
<td>Creates a link to the /projects/ page. </td>
</tr>
<tr>
<td><span class="syntax">[series]</span></td>
<td>Creates a link to the /articles/ page.</td>
</tr>
<tr>
<td><span class="syntax">[tags]</span></td>
<td>Creates a link to the site's tag cloud.</td>
</tr>
<tr>
<td><span class="syntax">[previous]</span></td>
<td> Link to the previous entry. </td>
</tr>
<tr>
<td><span class="syntax">[next]</span></td>
<td>Link to the next entry. </td>
</tr>
<tr>
<td><span class="syntax">[series <span class="variable">nth</span>]</span></td>
<td>Link to the @nth entry in the series. </td>
</tr>
<tr>
<td><span class="syntax">[series <span class="variable">slug nth</span>]</span></td>
<td>Link to the @nth entry in series with slug @slug. </td>
</tr>
<tr>
<td><span class="syntax">[file <span class="variable">name</span>]</span></td>
<td>Link to the file (image or otherwise) with @name. </td>
</tr>
<tr>
<td><span class="syntax">[f <span class="variable">name</span>]</span></td>
<td>A shortcut for <span class="syntax">[file <span class="variable">name</span>]</span>. </td>
</tr>
</table>

</div>
</div>
</div>

0 comments on commit ed9fbcb

Please sign in to comment.