Implement the use of Ctrl-E shortcut to preview posts/pages, instead …

…of live edit preview. (After some testing with live edit preview, found that it is not usable on smaller screen resolutions. Refreshing the preview on every key press is also rather irritating when the body contains external sources such as video, images, etc.)

app/views/admin/pages/_form.html.erb

@@ -1,5 +1,9 @@
+<% content_for(:head) do -%>
+  <%= javascript_include_tag 'admin/edit-preview' %>
+<% end -%>
+
 <% form.input_field_set do -%>
   <%= form.input :title %>
   <%= form.input :slug, :hint => "leave blank for an auto-generated slug based on the title" %>
-  <%= form.input :body, :hint => "<a href='http://hobix.com/textile/quick.html'>Textile enabled</a>" %>
+  <%= form.input :body, :hint => "<a href='http://hobix.com/textile/quick.html'>Textile enabled</a>. Use Ctrl+E to switch between preview and edit mode." -%>
 <% end -%>

app/views/admin/posts/_form.html.erb

@@ -1,6 +1,10 @@
+<% content_for(:head) do -%>
+  <%= javascript_include_tag 'admin/edit-preview' %>
+<% end -%>
+
 <% form.input_field_set do -%>
   <%= form.input :title -%>
-  <%= form.input :body, :hint => "<a href='http://hobix.com/textile/quick.html'>Textile enabled</a>" -%>
+  <%= form.input :body, :hint => "<a href='http://hobix.com/textile/quick.html'>Textile enabled</a>. Use Ctrl+E to switch between preview and edit mode." -%>
   <%= form.input :tag_list, :as => 'string', :required => false, :hint => 'comma separated: ruby, rails' -%>
 <% end -%>
 <% form.input_field_set do -%>

app/views/layouts/admin.html.erb

@@ -14,10 +14,8 @@
   <%= javascript_include_tag 'jquery.form.js' %>
   <%= javascript_include_tag 'jquery.easing.1.3.js' %>
   <%= javascript_include_tag 'humanmsg' %>
-  <%= javascript_include_tag 'common' %>
   <%= javascript_include_tag 'admin/shortcut' %>
   <%= javascript_include_tag 'admin/common' %>
-  <%= javascript_include_tag 'admin/live-edit-preview' %>
 
   <%= stylesheet_link_tag 'formtastic' %>
   <%= stylesheet_link_tag 'humanmsg' %>

public/javascripts/admin/edit-preview.js

@@ -0,0 +1,46 @@
+$(document).ready(function() {
+  var form = $('form.new_post, form.edit_post, form.new_page, form.edit_page');
+
+  if (form.length > 0) {
+    var dest = window.location.href;
+    if (!dest.match(/\/new$/)) {
+      dest = dest.replace(/\/\d$/, '');
+      dest = dest + '/new';
+    }
+    dest = dest + '/preview'
+
+    var toggle_preview = function() {
+      if ($('#preview').length == 0) {
+        form.hide();
+        form.after('<div id="preview"><h3>Your entry will be formatted like this:</h3><p>Use Ctrl-E to return to edit mode.</p><div class="content"><p>Please wait...</p></div></div>');
+
+        jQuery.ajax({
+          type: 'POST',
+          data: form.serialize().replace(/&*_method=\w+&*/, ''),
+          url: dest,
+          error: function() {
+            $('#preview .content').html('<p>Failed to generate preview. Toggle back to edit mode and check that all required fields are filled in and valid.</p>');
+          },
+          success: function(r) { 
+            $('#preview .content').html(r);
+          }
+        });
+      }
+      else {
+        $('#preview').remove();
+        form.show();
+      }
+    }
+
+    var ctrl_down = false;
+    $(document).keydown(function(e) {
+      if (e.which == 224 || e.which == 17) { ctrl_down = true; console.log('ctrl down'); } // Cmd || Ctrl
+    });
+    $(document).keyup(function(e) {
+      if (e.which == 224 || e.which == 17) { ctrl_down = false; console.log('ctrl up'); }
+    });
+    $(document).keypress(function(e) {
+      if (ctrl_down && e.which == 101) { toggle_preview(); } // 'E'
+    });
+  }
+});

public/stylesheets/admin.css

@@ -166,31 +166,6 @@ a {
   color: #222222;
 }
 
-/* --------- LIVE EDIT PREVIEW */
-#preview {
-  margin-left: 617px;
-  padding-bottom: 10px;
-}
-
-#preview > h3 {
-  margin: 0;
-}
-
-#preview > p {
-  margin-top: 3px;
-  font-size: 9pt;
-}
-
-#preview > p span {
-  color: #222222;
-  border-bottom: 1px dotted #222222;
-  cursor: pointer;
-}
-
-#preview .content {
-  margin-top: 30px;
-}
-
 /* -------- FORMS */
 form input,
 form select,
@@ -208,11 +183,11 @@ form.edit_page {
 
 #post_body,
 #page_body {
-  width: 550px;
+  width: 600px;
   height: 450px;
 }
 
-form fieldset { margin-bottom: 10px; width: 572px; padding: 10px; }
+form fieldset { margin-bottom: 10px; width: 622px; padding: 10px; }
 form fieldset.buttons { text-align: center; }
 form fieldset.buttons input { width: 300px; }
 
@@ -284,3 +259,30 @@ table img {
 .humanMsg .undo-link {
   display: none;
 }
+
+/* --------- EDIT PREVIEW */
+#preview {
+  padding-bottom: 10px;
+}
+
+#preview > h3 {
+  margin: 0; 
+}
+
+#preview > p {
+  color: #666666;
+  margin-top: 0.3em; 
+}
+
+#preview .content {
+  color: #222222;
+  background-color: #ececec;
+  padding: 1em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  margin-top: 1.5em;
+}
+
+#preview .content table {
+  margin-bottom: 0;
+}