Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1 lines (1 sloc) 6.05 KB
<h2>H2</h2><h1>A Simple Blog Editor</h1><br><span style="font-style: italic;">Before you read the remainer of this text ckick on </span><span style="font-weight: bold; font-style: italic;">toggle research </span><span style="font-style: italic;">button on the right-hand-side toolbar.</span><br><div style="display: block;" class="research">What you are readoning is not a nrmal web page. It is a page that is dynamically editable. Try clicking <span style="font-weight: bold;">toggle edi</span>t to make the page editable. All the buttons in the right-hand-side toolbar are fully functional with the exception of the <span style="font-weight: bold;">save</span> button. To save the result of<br>your editing you will have to have a local Erlang server running on your machine. This is because javascript programs cannot easiliy store<br>data on your local disk.<br></div><br><h2>Screen layout - the HTYNL and CSS bit<br></h2><br>This page has three main sections. A content area, where the blog is, a toolbar area on the right-hand side of the screen, and a header area.<br><br>The toolbar and header areas are fixed with a little bit of HTML and CSS magic. The HTML looks like this:<br><pre><span id="__firefox-tidy-id" style="background-color: rgb(221, 221, 255);">&lt;<span class="start-tag">body</span>&gt;</span><br> &lt;<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>&gt;&lt;/<span class="end-tag">div</span>&gt;<br> &lt;<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"right-sidebar"</span>&gt;&lt;/<span class="end-tag">div</span>&gt; <br> &lt;<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"content"</span>&gt;&lt;/<span class="end-tag">div</span>&gt;<br>&lt;/<span class="end-tag">body</span>&gt;<br></pre>And the CSS looks like this:<br><pre>body {<br> padding-top:120px;<br> padding-left:100px;<br> padding-right:320px;<br> }<br><br>div#header {<br> background-color:#aabbcc;<br> position:fixed;<br> padding-left:10px;<br> top:0;<br> left:0;<br> width:500%;<br> height:50px; <br> }<br><br> div#right-sidebar{<br> background-color:#bbccee;<br> position:fixed;<br> padding-left:20px;<br> padding-right:10px;<br> top:50px;<br> right:0;<br> width:250px; <br> height:100%;<br> }<br><br> * html body{<br> overflow:hidden;<br> } <br><br> * html div.content{<br> height:100%;<br> overflow:auto;<br> }<br><br></pre>&nbsp;&nbsp;&nbsp;&nbsp; Actually the CSS is kore complex than this, biut the important point to obseve is that the position:fixed declaration. This makes sure that the header and right-side bar remain fixed whereas the central region in scrollable.<br><br><h2>Adding the buttons<br></h2><br>Now we need some jquery magic to add a few biuttons to the toolbar. I'm only going to show you the code to add one button to the toolbar - the all important toggle <span style="font-weight: bold;">toggle edit </span>button.<br><br>Here's the code in all it's glory:<br><pre><span id="__firefox-tidy-id" style="background-color: rgb(221, 221, 255);">&lt;<span class="start-tag">script</span><span class="attribute-name"> src</span>=<span class="attribute-value">"jquery-1.3.2.min.js"</span>&gt;&lt;/<span class="end-tag">script</span>&gt;</span><br><br><span id="__firefox-tidy-id" style="background-color: rgb(221, 221, 255);">&lt;<span class="start-tag">script</span>&gt;</span><br><br>$(document).ready(function(){setup()});<br><br>function setup()<br>{<br> <br> add_regular_button(bbar, "toggle edit", <br> function(){toggle_edit()});<br><br><br><br></pre><br><br><br>I've just got back from the Erlang Factory held in London. I came back flushed with ideas and a long list of things I wanted to try. Not the least of these was couchDB. <br><p>The week before the Erlang factory I had discoveer how to make the contentEditable mode in firefow work and had thrown together a few simple edables of how to make specialiesed editors using a simple combinayion of the magnificant jQry library, contenetEdiatbale modes and Erlang.</p><p>jQuery is used to toggel content editable mode and to dynamicslly add and remove buttons to the window. This code is so simple and the result so powerful that I'm still pretty shocked at what can be achieved with so little code. <br></p><p>You'll see that some buttons come and go and that the background color of the editor changes. Azure means the content it editable. Pink means it is locked.</p><center><img style="width: 240px; height: 180px;" src="p2.jpg"></center><div style="display: none;" class="research">Add researchhere</div><p>To enter a header click on <span style="font-weight: bold;">h1</span> or <span style="font-weight: bold;">h2</span>. To save your work click on <span style="font-weight: bold;">save</span>.</p><h2>Save<br></h2><p><span style="font-style: italic;">Note that all old versions of the document are saved. Note:to save a document you must have a functioning erlang server running in the background.</span></p><h3>To Do</h3><ul><li>Add some method of editing hrefs and image URLs.</li><li>Add some reorganiser mode so we can more sections up and down<br></li><li>Add stuff to collapse uncollapse egions<br></li><li>Probably for safety we should always be able to toggle the editor mode.<br></li></ul><h2>Adding research<br></h2><br>Research can be embedded in a documented. Normally it is not show. Press <span style="font-weight: bold;">toggle research</span> to see the research that is <span style="text-decoration: line-through;">associated with</span> embedded in this&nbsp; document.<br><div style="display: none;" class="research">Research boxes are orange. You can add anything you like here to<br>help you remember what you were doing when you wrote the document.<br></div><br><h2>Styling data<br></h2><br>All data in the editor is styled with CSS. So we can achieve a consistent look-and-feel over the entire document.<br><br>Here's some erlang code in a preformatted block.<br><pre>-module(hello).<br>-compile(export_all).<br><br>main() -&gt;<br> "hello world".<br></pre>&nbsp;