[snowy] Add a toolbar and hook it up to funcooker

[Brad Taylor <btaylor src gnome org>]

commit 3bf9b6ecf49f3fb7386dc1c078c1cbcbabad8480
Author: Brad Taylor <brad getcoded net>
Date:   Sun May 3 20:54:01 2009 -0400

    Add a toolbar and hook it up to funcooker
---
 notes/templates/notes/note_detail.html |   28 +++++++++++-
 site_media/css/screen.css              |   79 +++++++++++++++++++++++++++++---
 site_media/js/funcooker.js             |   61 ++++++++++++++++++++++++-
 templates/base.html                    |    6 +--
 4 files changed, 160 insertions(+), 14 deletions(-)

diff --git a/notes/templates/notes/note_detail.html b/notes/templates/notes/note_detail.html
index f95aba7..e2a6230 100644
--- a/notes/templates/notes/note_detail.html
+++ b/notes/templates/notes/note_detail.html
@@ -13,12 +13,38 @@
 {% endblock %}
 
 {% block content %}
+<div id="toolbar">
+<h3>Text</h3>
+<p id="toolbar-text">
+<a href="javascript:fc.normalStyle();" title="Normal">A</a>
+<a href="javascript:fc.bold();" title="Bold"><b>A</b></a>
+<a href="javascript:fc.strikethrough();" title="Strikethrough"><strike>A</strike></a>
+<a href="javascript:fc.highlight();" title="Highlight"><span class="note-highlight">A</span></a>
+<a href="javascript:fc.fixedWidth();" title="Fixed Width"><span class="note-monospace">A</span></a>
+</p>
+<h3>Font Size</h3>
+<p class="note-small"><a href="javascript:fc.small();">Small</a></p>
+<p><a href="javascript:fc.normalSize();">Normal</a></p>
+<p class="note-large"><a href="javascript:fc.large();">Large</a></p>
+<p class="note-huge"><a href="javascript:fc.huge();">Huge</a></p>
+<h3>Formatting</h3>
+<p><a href="#">Bullets</a></p>
+<p><a href="#">Increase Indent</a></p>
+<p><a href="#">Decrease Indent</a></p>
+<h3>Actions</h3>
+<p><a href="#">Link</a></p>
+<p><a href="#">Delete</a></p>
+<p><a href="#">History</a></p>
+<p><a href="#">Sharing</a></p>
+</div>
 <div id="funcooker">
 {{ body|safe|linebreaksbr }}
 </div>
 <script type="text/javascript">
+var fc = null;
 $(document).ready(function() {
-    new FunCooker("#funcooker");
+    fc = new FunCooker("#funcooker");
 });
 </script>
+
 {% endblock %}
diff --git a/site_media/css/screen.css b/site_media/css/screen.css
index 1c708fb..d2235f0 100644
--- a/site_media/css/screen.css
+++ b/site_media/css/screen.css
@@ -13,7 +13,7 @@ a, a:link, a:hover, a:active, a:visited {
     text-decoration: underline;
 }
 
-h2 {
+h1 {
     color: #d3643b;
     font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
 }
@@ -66,6 +66,7 @@ table#container {
     max-width: 500px;
     
     margin: 0;
+    vertical-align: top;
 }
 
 #sidebar {
@@ -112,20 +113,84 @@ table#container {
     color: #b8dee3;
 }
 
-#content-container {
+#content {
     width: 80%;
-    margin: 0;
+    padding: 10px;
+    background-color: #edece6;
+    font-family: Candara, Verdana, Tahmoa, Arial, sans-serif;
 }
 
-#content {
-    background-color: #edece6;
+#content h1 {
+    margin: 0.2em 0 0.5em 0;
+}
+
+#toolbar {
+    float: right;
+    width: 150px;
+    padding: 8px;
+
+    background-color: #dbe1c7;
+    border: 1px solid #b7beab;
+
+    color: #6d7063;
+}
+
+#toolbar a, #toolbar a:link, #toolbar a:active, #toolbar a:visited {
+    color: #6d7063;
+    text-decoration: none;
+}
+
+#toolbar:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+#toolbar h3 {
+    margin: 0.5em 0 0.3em 0;
+
+    font-family: Candara, Verdana, Tahmoa, Arial, sans-serif;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #acb5a0;
 }
 
-#content h2, #content p {
-    padding-left: 6px;
+#toolbar #text {
+    color: #000000;
+    font-size: 1.2em;
+}
+
+#toolbar-text a, #toolbar-text a:link, #toolbar-text a:active, #toolbar-text a:visited {
+    color: #000000;
+    text-decoration: none;
+    margin-right: 0.5em;
+}
+
+#toolbar p {
+    margin: 0.2em 0 0.2em 1em;
 }
 
 #footer {
     height: 500px;
     background-color: #4e6960;
 }
+
+/* Note-specific styles */
+.note-highlight {
+    background-color: yellow;
+}
+
+.note-monospace {
+    font-family: Consolas, monospace;
+}
+
+.note-size-small {
+    font-size: 0.8em;
+}
+
+.note-size-large {
+    font-size: 1.5em;
+}
+
+.note-size-huge {
+    font-size: 2.0em;
+}
diff --git a/site_media/js/funcooker.js b/site_media/js/funcooker.js
index 8784779..2abacf4 100644
--- a/site_media/js/funcooker.js
+++ b/site_media/js/funcooker.js
@@ -32,7 +32,62 @@ var FunCooker = DUI.Class.create({
         return $.browser.mozilla;
     },
 
-    boldSelection: function() {
+    normalStyle: function() {
+        // TODO:
+    },
+
+    bold: function() {
+        this.wrapSelection(document.createElement("b"));
+        this.target.focus();
+    },
+
+    strikethrough: function() {
+        this.wrapSelection(document.createElement("strike"));
+        this.target.focus();
+    },
+
+    highlight: function() {
+        var elm = document.createElement("span");
+        $(elm).addClass("note-highlight");
+
+        this.wrapSelection(elm);
+        this.target.focus();
+    },
+
+    fixedWidth: function() {
+        var elm = document.createElement("span");
+        $(elm).addClass("note-monospace");
+
+        this.wrapSelection(elm);
+        this.target.focus();
+    },
+
+    small: function() {
+        var elm = document.createElement("span");
+        $(elm).addClass("note-size-small");
+
+        this.wrapSelection(elm);
+        this.target.focus();
+    },
+
+    normalSize: function() {
+        // TODO:
+    },
+
+    large: function() {
+        var elm = document.createElement("span");
+        $(elm).addClass("note-size-large");
+
+        this.wrapSelection(elm);
+        this.target.focus();
+    },
+
+    huge: function() {
+        var elm = document.createElement("span");
+        $(elm).addClass("note-size-huge");
+
+        this.wrapSelection(elm);
+        this.target.focus();
     },
 
     wrapSelection: function(wrapper) {
@@ -40,8 +95,10 @@ var FunCooker = DUI.Class.create({
         if (range) {
             // insure that the selection range is inside of the editor
             var parent = this.findParentById(range.commonAncestorContainer,
-                                             target.id);
+                                             this.target.id);
             if (!parent) {
+		// TODO: Fallback behavior should be to move the caret to the
+		// end of the div and wrap it.
                 return;
             }
 
diff --git a/templates/base.html b/templates/base.html
index 1692e9d..92cac00 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,7 +36,7 @@
         <div class="clear"></div>
         </div>
     </div>
-    <table id="container">
+    <table id="container" cellspacing="0" cellpadding="0">
         <tr>
             <td id="sidebar-container">
                 <div id="sidebar">
@@ -44,11 +44,9 @@
 {% endblock %}
                 </div>
             </td>
-            <td id="content-container">
-                <div id="content">
+            <td id="content">
 {% block content %}
 {% endblock %}
-                </div>
             </td>
         </tr>
     </table>