Add Page Preview, fix weirdness in app.rb

lib/gollum/frontend/app.rb

@@ -80,10 +80,13 @@ module Precious
     end
 
     post '/preview' do
-      format = params['wiki_format']
-      data = params['text']
+      @name = params['page']
+      format = params['format']
+      data = params['content']
       wiki = Gollum::Wiki.new(settings.gollum_path)
-      wiki.preview_page("Preview", data, format).formatted_data
+      @page = wiki.preview_page("Preview", data, format)
+      @content = @page.formatted_data
+      mustache :page
     end
 
     get '/history/:name' do

lib/gollum/frontend/public/css/editor.css

@@ -236,6 +236,7 @@ a#function-image:hover span { background-position: -324px -28px; }
   color: #333;
   cursor: pointer;
   display: block;
+  float: left;
   font-size: 1.2em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: bold;
@@ -360,4 +361,50 @@ a#function-image:hover span { background-position: -324px -28px; }
   margin: 0.7em 0;
   padding: 0.5em;
   width: 98%;
+}
+
+/* @control minibutton */
+
+#gollum-editor a.minibutton,
+#gollum-editor a.minibutton:visited {
+  background-color: #f7f7f7;
+  border: 1px solid #d4d4d4;
+  color: #333;
+  cursor: pointer;
+  display: block;
+  font-size: 1.2em;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  line-height: 1.2em;
+  margin: 0 0 0 0.8em;
+  padding: 0.5em 1em;
+
+  text-shadow: 0 1px 0 #fff;
+
+  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f4f4f4', endColorstr='#ececec');
+  background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec));
+  background: -moz-linear-gradient(top, #f4f4f4, #ececec);
+
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+#gollum-editor a.minibutton:hover {
+  background: #3072b3;
+  border-color: #518cc6 #518cc6 #2a65a0;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  text-decoration: none;
+
+  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#599bdc', endColorstr='#3072b3');
+  background: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3072b3));
+  background: -moz-linear-gradient(top, #599bdc, #3072b3);
+}
+
+
+#gollum-editor #gollum-editor-preview {
+  float: left;
+  font-weight: normal;
+  padding: left;
 }

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

@@ -413,7 +413,7 @@ ul.actions {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
- }
+}
 
  ul.actions li {
    float: left;

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

@@ -54,6 +54,23 @@
         });
       }
       
+      if ( EditorHas.previewButton() ) {
+        var formAction = 
+        $('#gollum-editor #gollum-editor-preview').click(function() {
+          // make a dummy form, submit to new target window
+          // get form fields
+          var oldAction = $('#gollum-editor form').attr('action');
+          var $form = $($('#gollum-editor form').get(0));
+          $form.attr('action', '/preview');
+          $form.attr('target', '_blank');
+          $form.submit();
+          
+          
+          $form.attr('action', oldAction);
+          $form.removeAttr('target');
+        });
+      }
+      
       // Initialize the function bar by loading proper definitions
       if ( EditorHas.functionBar() ) {
         
@@ -281,6 +298,10 @@
       return ( $('input#gollum-editor-message-field').length > 0 );
     },
     
+    previewButton: function() {
+      return ( $('#gollum-editor #gollum-editor-preview').length );
+    },
+    
     titleDisplayed: function() {
       return ( ActiveOptions.NewFile );
     }

lib/gollum/frontend/templates/edit.mustache

@@ -8,10 +8,8 @@
        class="action-page-history">Page History</a></li>
   </ul>
 </div>
-<div id="wiki-content">
-  <div class="has-rightbar">
-    {{>editor}}
-  </div>
+<div id="wiki-content"> 
+  {{>editor}}
 </div>
 </div>
 <script type="text/javascript">

lib/gollum/frontend/templates/editor.mustache

@@ -1,4 +1,4 @@
-<div id="gollum-editor">
+<div id="gollum-editor" data-escaped-name="{{escaped_name}}" class="{{#is_create_page}}create{{/is_create_page}}{{#is_edit_page}}edit{{/is_edit_page}}">
 {{#is_create_page}}
 <form name="gollum-editor" action="/create/{{escaped_name}}" method="post">
 {{/is_create_page}}
@@ -80,6 +80,7 @@
     
     <span class="jaws"><br></span>
     <input type="submit" id="gollum-editor-submit" value="Save" title="Save current changes">
+    <a href="javascript:void(0)" id="gollum-editor-preview" class="minibutton" title="Preview this Page">Preview</a>
   </fieldset>
 </form>
 </div>