Mercurial > wiki
changeset 5:06e8c49e9dec
Wikicreole markup is now editable. Also refactored things a bit so that variables have better names, DRY is preserved better.
author | Atul Varma <varmaa@toolness.com> |
---|---|
date | Sun, 01 Feb 2009 13:33:26 -0800 |
parents | 01313b55ed09 |
children | fb233578283c |
files | wiki.css wiki.js |
diffstat | 2 files changed, 29 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/wiki.css Sun Feb 01 13:15:55 2009 -0800 +++ b/wiki.css Sun Feb 01 13:33:26 2009 -0800 @@ -10,7 +10,11 @@ margin: 0 auto; } -.wikiedit { +.creole-markup { + display: none; +} + +.wiki-edit { font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace; font-size: 10pt;
--- a/wiki.js Sun Feb 01 13:15:55 2009 -0800 +++ b/wiki.js Sun Feb 01 13:33:26 2009 -0800 @@ -2,34 +2,42 @@ eventHandlers: {} }; -App.eventHandlers.makeEditable = function makeEditable(aEvt) { +App.eventHandlers.editPart = function editPart(aEvt) { if (!aEvt.shiftKey) return; aEvt.preventDefault(); - var item = this; - var newItem = $('<textarea class="wikiedit"></textarea>'); - $(newItem).attr("value", $(item).html()); + var part = this; + var editablePart = $('<textarea class="wiki-edit"></textarea>'); + $(editablePart).attr("value", $(".creole-markup", part).text()); function setScrollHeight() { - var scrollHeight = $(newItem).get(0).scrollHeight; - $(newItem).height(scrollHeight); + var scrollHeight = $(editablePart).get(0).scrollHeight; + $(editablePart).height(scrollHeight); } - $(newItem).blur( + $(editablePart).blur( function() { - var html = $(newItem).attr("value"); - $(item).html(html); - $(item).mousedown(App.eventHandlers.makeEditable); - $(newItem).replaceWith(item); + var markup = $(editablePart).attr("value"); + $(editablePart).replaceWith(App.createPart(markup)); }); - $(newItem).keyup(setScrollHeight); - $(item).replaceWith(newItem); + $(editablePart).keyup(setScrollHeight); + $(part).replaceWith(editablePart); setScrollHeight(); - $(newItem).focus(); + $(editablePart).focus(); +}; + +App.createPart = function createPart(markup) { + var partDiv = $('<div class="part"></div>'); + var markupDiv = $('<div class="creole-markup"></div>'); + markupDiv.text(markup); + App.creole.parse(partDiv.get(0), markup); + partDiv.mousedown(App.eventHandlers.editPart); + partDiv.append(markupDiv); + return partDiv; }; App.processMarkup = function processMarkup(text) { @@ -37,11 +45,8 @@ jQuery.each( parts, function(i) { - var part = this; - var partDiv = $('<div class="wiki"></div>'); - App.creole.parse(partDiv.get(0), part); - partDiv.mousedown(App.eventHandlers.makeEditable); - $("#content").append(partDiv); + var partMarkup = this.toString(); + $("#content").append(App.createPart(partMarkup)); } ); };