From c49afe4c079f97c3a337412cc39c2592c21ddece Mon Sep 17 00:00:00 2001 From: Jason Cheow Date: Mon, 17 Nov 2008 12:51:43 +0800 Subject: [PATCH] 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 | 6 +- app/views/admin/posts/_form.html.erb | 6 +- app/views/layouts/admin.html.erb | 2 - public/javascripts/admin/edit-preview.js | 46 +++++++++++++++ public/javascripts/admin/live-edit-preview.js | 57 ------------------- public/stylesheets/admin.css | 56 +++++++++--------- 6 files changed, 85 insertions(+), 88 deletions(-) create mode 100644 public/javascripts/admin/edit-preview.js delete mode 100644 public/javascripts/admin/live-edit-preview.js diff --git a/app/views/admin/pages/_form.html.erb b/app/views/admin/pages/_form.html.erb index 1c63a6e1d..dab6d32ec 100644 --- a/app/views/admin/pages/_form.html.erb +++ b/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 => "Textile enabled" %> + <%= form.input :body, :hint => "Textile enabled. Use Ctrl+E to switch between preview and edit mode." -%> <% end -%> diff --git a/app/views/admin/posts/_form.html.erb b/app/views/admin/posts/_form.html.erb index 4bc23ab14..1541d45f2 100644 --- a/app/views/admin/posts/_form.html.erb +++ b/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 => "Textile enabled" -%> + <%= form.input :body, :hint => "Textile enabled. 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 -%> diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index a53c78660..07ba0d942 100644 --- a/app/views/layouts/admin.html.erb +++ b/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' %> diff --git a/public/javascripts/admin/edit-preview.js b/public/javascripts/admin/edit-preview.js new file mode 100644 index 000000000..a61bc0cec --- /dev/null +++ b/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('

Your entry will be formatted like this:

Use Ctrl-E to return to edit mode.

Please wait...

'); + + jQuery.ajax({ + type: 'POST', + data: form.serialize().replace(/&*_method=\w+&*/, ''), + url: dest, + error: function() { + $('#preview .content').html('

Failed to generate preview. Toggle back to edit mode and check that all required fields are filled in and valid.

'); + }, + 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' + }); + } +}); diff --git a/public/javascripts/admin/live-edit-preview.js b/public/javascripts/admin/live-edit-preview.js deleted file mode 100644 index 7c4053909..000000000 --- a/public/javascripts/admin/live-edit-preview.js +++ /dev/null @@ -1,57 +0,0 @@ -$(document).ready(function() { - var form = $('.new_post, .edit_post, .new_page, .edit_page'); - var input_elements = form.find(':text, textarea'); - var textarea = $('#post_body, #page_body'); - var fetch_preview = function() { - var dest = window.location.href; - - if (!dest.endsWith('new')) { - dest = dest.replace(/\/\d$/, ''); - dest = dest + '/new'; - } - dest = dest + '/preview' - - jQuery.ajax({ - type: 'POST', - data: form.serialize().replace(/&*_method=\w+&*/, ''), - url: dest, - timeout: 2000, - error: function() { - console.log("Failed to submit"); - }, - success: function(r) { - if ($('#preview').length == 0) { - form.after('

Your entry will be formatted like this:

pause live preview

'); - } - $('#preview .content').html(r); - - var target_textarea_height = $('#preview').height() - 50; - if (target_textarea_height <= 450) { - target_textarea_height = 450; - } - textarea.height(target_textarea_height); - } - }); - }; - - $('#preview > p span').livequery('click', function() { - var text = $(this).html(); - if (text.match(/pause/)) { - $(this).html(text.replace(/pause/, 'start')); - $('#preview .content').fadeTo(100, 0.3); - } - else { - $(this).html(text.replace(/start/, 'pause')); - $('#preview .content').fadeTo(100, 1); - fetch_preview(); - } - }); - - input_elements.keyup(function() { - if ($('#preview > p span').html().match(/pause/)) { - fetch_preview.only_every(1000); - } - }); - - fetch_preview(); -}); diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index baaa557ec..906217d3d 100644 --- a/public/stylesheets/admin.css +++ b/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; +} \ No newline at end of file