Initial work on the editbar.

lib/gollum/frontend/app.rb

@@ -62,12 +62,12 @@ module Precious
     end
 
     post '/create/:name' do
-      page = params[:name]
+      name = params[:name]
       wiki = Gollum::Wiki.new($path)
 
       format = params[:format].intern
 
-      wiki.write_page(page, format, params[:content], commit_message)
+      wiki.write_page(name, format, params[:content], commit_message)
       redirect "/#{name}"
     end
 

lib/gollum/frontend/public/css/editbar.css

@@ -0,0 +1,84 @@
+#editbar {
+  border-left: 1px solid #888;
+  border-top: 1px solid #888;
+  border-right:  1px solid #888;
+  width: 100%;
+  background: white;
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#EBF1FF));
+  background: -moz-linear-gradient(top,  #fff,  #EBF1FF);
+  overflow: hidden;
+}
+
+  #editbar .group {
+    float: left;
+    height: 26px;
+    margin: 3px;
+    padding-right: 6px;
+  }
+
+  #editbar .group-separator {
+    border-right: 1px solid #ddd;
+  }
+
+    #editbar .button {
+      width: 22px;
+      height: 22px;
+      background: url(/images/buttons.png);
+      text-indent: -100px;
+      cursor: pointer;
+      overflow: hidden;
+      padding: 2px;
+      display: block;
+      float: left;
+    }
+
+    #editbar .bold {
+      background-position: 2px -142px;
+    }
+
+    #editbar .italic {
+      background-position: 2px -862px;
+    }
+
+    #editbar .link {
+      background-position: 2px -1654px;
+    }
+
+    #editbar .image {
+      background-position: 2px -1438px;
+    }
+
+  #editbar .tab {
+    float: left;
+    display: block;
+    font-family: sans-serif;
+    font-size: 13px;
+  }
+
+    #editbar .tab a {
+      cursor: pointer;
+      display: inline-block;
+      float: left;
+      height: 26px;
+      padding-left: 18px;
+      padding-right: 12px;
+      line-height: 26px;
+      text-decoration: none;
+      background-image: url(/images/twiddle-right.png);
+      background-position: 0 50%;
+      background-repeat: no-repeat;
+      color: blue;
+    }
+
+    #editbar .tab a.open {
+      background-image: url(/images/twiddle-down.png);
+      color: #333;
+    }
+
+      #editbar .tab a.open:hover {
+      text-decoration: none;
+    }
+
+    #editbar .tab a:hover {
+      text-decoration: underline;
+    }

lib/gollum/frontend/public/javascript/gollum.js

@@ -0,0 +1,82 @@
+Gollum = {
+  encloseStrategy: function(prefix, content, suffix) {
+    return {
+      type: 'enclose',
+      content: content,
+      prefix: prefix,
+      suffix: suffix
+    }
+  },
+
+  enclose: function(el, format, kind) {
+    var cfg = Gollum.Formats[format][kind]
+    var sel = el.getSelectionRange()
+    if (sel.start == sel.end) {
+      el.insertText(cfg.prefix + cfg.content + cfg.suffix, sel.start, sel.start, false)
+      el.setSelectionRange(sel.start + cfg.prefix.length, sel.start + cfg.prefix.length + cfg.content.length)
+    } else {
+      el.insertText(cfg.prefix + el.getSelectedText() + cfg.suffix, sel.start, sel.end, false)
+    }
+  }
+}
+
+Gollum.Formats = {
+  asciidoc: {
+    bold: Gollum.encloseStrategy('*', 'bold text', '*'),
+    italic: Gollum.encloseStrategy('_', 'italic text', '_')
+  },
+  creole: {
+    bold: Gollum.encloseStrategy('**', 'bold text', '**'),
+    italic: Gollum.encloseStrategy('//', 'italic text', '//')
+  },
+  markdown: {
+    bold: Gollum.encloseStrategy('**', 'bold text', '**'),
+    italic: Gollum.encloseStrategy('*', 'italic text', '*')
+  },
+  org: {
+    bold: Gollum.encloseStrategy('*', 'bold text', '*'),
+    italic: Gollum.encloseStrategy('/', 'italic text', '/')
+  },
+  pod: {
+    bold: Gollum.encloseStrategy('B<', 'bold text', '>'),
+    italic: Gollum.encloseStrategy('I<', 'italic text', '>')
+  },
+  rest: {
+    bold: Gollum.encloseStrategy('**', 'bold text', '**'),
+    italic: Gollum.encloseStrategy('*', 'italic text', '*')
+  },
+  rdoc: {
+    bold: Gollum.encloseStrategy('*', 'bold text', '*'),
+    italic: Gollum.encloseStrategy('_', 'italic text', '_')
+  },
+  roff: {
+    bold: Gollum.encloseStrategy('\\fB', 'bold text', '\\fP'),
+    italic: Gollum.encloseStrategy('\\fI', 'italic text', '\\fP')
+  },
+  textile: {
+    bold: Gollum.encloseStrategy('*', 'bold text', '*'),
+    italic: Gollum.encloseStrategy('_', 'italic text', '_')
+  }
+}
+
+$(function(){
+  /* Version selector */
+
+  $('#versions_select').change(function() {
+    location.href = this.value
+  })
+
+  /* EditBar */
+
+  $('#editbar .bold').click(function() {
+    var el = $('#guides .write textarea')
+    var format = $('#guides .write select[name=format] option:selected').attr('value')
+    Gollum.enclose(el, format, 'bold')
+  })
+
+  $('#editbar .italic').click(function() {
+    var el = $('#guides .write textarea')
+    var format = $('#guides .write select[name=format] option:selected').attr('value')
+    Gollum.enclose(el, format, 'italic')
+  })
+})

lib/gollum/frontend/public/javascript/jquery.text_selection-1.0.0.min.js

@@ -0,0 +1 @@
+(function(B){var A=(function(){var C=(typeof document.selection!=="undefined"&&typeof document.selection.createRange!=="undefined");return{getSelectionRange:function(F){var J,D,E,I,H,G;F.focus();if(typeof F.selectionStart!=="undefined"){J=F.selectionStart;D=F.selectionEnd;}else{if(C){E=document.selection.createRange();I=E.text.length;if(E.parentElement()!==F){throw ("Unable to get selection range.");}if(F.type==="textarea"){H=E.duplicate();H.moveToElementText(F);H.setEndPoint("EndToEnd",E);J=H.text.length-I;}else{G=F.createTextRange();G.setEndPoint("EndToStart",E);J=G.text.length;}D=J+I;}else{throw ("Unable to get selection range.");}}return{start:J,end:D};},getSelectionStart:function(D){return this.getSelectionRange(D).start;},getSelectionEnd:function(D){return this.getSelectionRange(D).end;},setSelectionRange:function(F,H,D){var G,E;F.focus();if(typeof D==="undefined"){D=H;}if(typeof F.selectionStart!=="undefined"){F.setSelectionRange(H,D);}else{if(C){G=F.value;E=F.createTextRange();D-=H+G.slice(H+1,D).split("\n").length-1;H-=G.slice(0,H).split("\n").length-1;E.move("character",H);E.moveEnd("character",D);E.select();}else{throw ("Unable to set selection range.");}}},getSelectedText:function(E){var D=this.getSelectionRange(E);return E.value.substring(D.start,D.end);},insertText:function(E,I,D,F,K){F=F||D;var L=I.length,J=D+L,G=E.value.substring(0,D),H=E.value.substr(F);E.value=G+I+H;if(K===true){this.setSelectionRange(E,D,J);}else{this.setSelectionRange(E,J);}},replaceSelectedText:function(E,G,F){var D=this.getSelectionRange(E);this.insertText(E,G,D.start,D.end,F);},wrapSelectedText:function(E,G,D,F){var H=G+this.getSelectedText(E)+D;this.replaceSelectedText(E,H,F);}};})();window.Selection=A;B.fn.extend({getSelectionRange:function(){return A.getSelectionRange(this[0]);},getSelectionStart:function(){return A.getSelectionStart(this[0]);},getSelectionEnd:function(){return A.getSelectionEnd(this[0]);},getSelectedText:function(){return A.getSelectedText(this[0]);},setSelectionRange:function(D,C){return this.each(function(){A.setSelectionRange(this,D,C);});},insertText:function(E,F,C,D){return this.each(function(){A.insertText(this,E,F,C,D);});},replaceSelectedText:function(D,C){return this.each(function(){A.replaceSelectedText(this,D,C);});},wrapSelectedText:function(E,C,D){return this.each(function(){A.wrapSelectedText(this,E,C,D);});}});})(jQuery);

lib/gollum/frontend/templates/edit.mustache

@@ -12,7 +12,27 @@
       </select>
     </label>
     <label>
-      Body
+      <div id="editbar">
+        <div class="group group-separator">
+          <span title="Bold" class="bold button">Bold</span>
+          <span title="Italic" class="italic button">Italic</span>
+        </div>
+        <div class="group">
+          <span title="Link" class="link button">Link</span>
+          <span title="Image" class="image button">Image</span>
+        </div>
+        <div class="group">
+          <span class="tab">
+            <a class="open" href="">Advanced</a>
+          </span>
+          <span class="tab">
+            <a href="">Special Characters</a>
+          </span>
+          <span class="tab">
+            <a href="">Help</a>
+          </span>
+        </div>
+      </div>
       <textarea name="content">{{content}}</textarea>
     </label>
     <label>

lib/gollum/frontend/templates/layout.mustache

@@ -7,7 +7,10 @@
     <link rel="stylesheet" href="/css/screen.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="/css/gollum.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="/css/syntax.css" type="text/css" charset="utf-8" />
-    <script src="/javascript/jquery-1.4.2.min.js" type="text/javascript" />
+    <link rel="stylesheet" href="/css/editbar.css" type="text/css" charset="utf-8" />
+    <script src="/javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
+    <script src="/javascript/jquery.text_selection-1.0.0.min.js" type="text/javascript"></script>
+    <script src="/javascript/gollum.js" type="text/javascript"></script>
   </head>
 
   <body>

lib/gollum/frontend/templates/page.mustache

@@ -25,9 +25,3 @@
     </select>
   </div>
 </div>
-
-<script type="text/javascript">
-  $('#versions_select').change(function() {
-    location.href = this.value
-  })
-</script>