From: Tom Hughes Date: Sat, 3 Mar 2012 18:40:44 +0000 (+0000) Subject: Add preview functionality to rich text controls X-Git-Tag: live~5736 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/561f2f694adc8ac57011eac1eec5929425276c59 Add preview functionality to rich text controls --- diff --git a/app/assets/javascripts/site.js b/app/assets/javascripts/site.js index 95815d44e..5d727a069 100644 --- a/app/assets/javascripts/site.js +++ b/app/assets/javascripts/site.js @@ -205,3 +205,51 @@ function makeShortCode(lat, lon, zoom) { } return str; } + +/* + * Click handler to switch a rich text control to preview mode + */ +function previewRichtext(event) { + var editor = $(this).parents(".richtext_container").find("textarea"); + var preview = $(this).parents(".richtext_container").find(".richtext_preview"); + var width = editor.outerWidth() - preview.outerWidth() + preview.innerWidth(); + var minHeight = editor.outerHeight() - preview.outerHeight() + preview.innerHeight(); + + editor.hide(); + preview.load(editor.attr("data-preview-url"), { text: editor.val() }); + preview.width(width); + preview.css("min-height", minHeight + "px"); + preview.show(); + + $(this).siblings(".richtext_doedit").prop("disabled", false); + $(this).prop("disabled", true); + + event.preventDefault(); +} + +/* + * Click handler to switch a rich text control to edit mode + */ +function editRichtext(event) { + var editor = $(this).parents(".richtext_container").find("textarea"); + var preview = $(this).parents(".richtext_container").find(".richtext_preview"); + + preview.hide(); + editor.show(); + + $(this).siblings(".richtext_dopreview").prop("disabled", false); + $(this).prop("disabled", true); + + event.preventDefault(); +} + +/* + * Setup any rich text controls + */ +$(document).ready(function () { + $(".richtext_preview").hide(); + $(".richtext_doedit").prop("disabled", true); + $(".richtext_dopreview").prop("disabled", false); + $(".richtext_doedit").click(editRichtext); + $(".richtext_dopreview").click(previewRichtext); +}); diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 479e24f75..0c2873acc 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -1040,3 +1040,61 @@ abbr.geo { vertical-align: text-bottom; border: 0; } + +/* Rules for rich text editors */ + +.richtext_container { + white-space: nowrap; + + .richtext_content { + display: inline-block; + vertical-align: top; + + .richtext_preview { + display: inline-block; + margin-top: 1px; + margin-bottom: 1px; + border: 4px solid #eee; + background-color: #eee; + white-space: normal; + + > :first-child { + margin-top: 0px; + } + } + } + + .richtext_help { + display: inline-block; + vertical-align: top; + background-color: #ddd; + margin-left: 15px; + padding: 5px 10px 10px 10px; + font-size: 12px; + + p { + margin: 0px; + } + + th { + vertical-align: top; + padding: 0px 15px 0px 0px !important; + } + + td { + font-family: fixed; + line-height: 16px; + padding: 0px !important; + } + + input.richtext_doedit { + margin-top: 5px !important; + margin-right: 10px !important; + } + + input.richtext_dopreview { + margin-top: 5px !important; + margin-left: 10px !important; + } + } +} diff --git a/app/controllers/site_controller.rb b/app/controllers/site_controller.rb index cf4465b9c..fa33deeee 100644 --- a/app/controllers/site_controller.rb +++ b/app/controllers/site_controller.rb @@ -85,4 +85,8 @@ class SiteController < ApplicationController def copyright @locale = params[:copyright_locale] || I18n.locale end + + def preview + render :text => RichText.new(params[:format], params[:text]).to_html + end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 7a72932f5..37dcf90e0 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -121,6 +121,24 @@ module ApplicationHelper Math.log(360.0 / (scale.to_f * 512.0)) / Math.log(2.0) end + def richtext_area(object_name, method, options = {}) + id = "#{object_name.to_s}_#{method.to_s}" + format = options.delete(:format) || "markdown" + + content_tag(:div, :id => "#{id}_container", :class => "richtext_container") do + output_buffer << content_tag(:div, :id => "#{id}_content", :class => "richtext_content") do + output_buffer << text_area(object_name, method, options.merge("data-preview-url" => preview_url(:format => format))) + output_buffer << content_tag(:div, "", :id => "#{id}_preview", :class => "richtext_preview") + end + + output_buffer << content_tag(:div, :id => "#{id}_help", :class => "richtext_help") do + output_buffer << render("site/#{format}_help") + output_buffer << submit_tag(I18n.t("site.richtext_area.edit"), :id => "#{id}_doedit", :class => "richtext_doedit", :disabled => true) + output_buffer << submit_tag(I18n.t("site.richtext_area.preview"), :id => "#{id}_dopreview", :class => "richtext_dopreview") + end + end + end + private def javascript_strings_for_key(key) diff --git a/app/views/diary_entry/edit.html.erb b/app/views/diary_entry/edit.html.erb index f6273a828..da409e61a 100644 --- a/app/views/diary_entry/edit.html.erb +++ b/app/views/diary_entry/edit.html.erb @@ -10,7 +10,7 @@ <%= t 'diary_entry.edit.body' -%> - <%= f.text_area :body, :cols => 80 %> + <%= richtext_area :diary_entry, :body, :cols => 80 %> <%= t 'diary_entry.edit.language' -%> diff --git a/app/views/diary_entry/view.html.erb b/app/views/diary_entry/view.html.erb index 7073aa740..1bce441b4 100644 --- a/app/views/diary_entry/view.html.erb +++ b/app/views/diary_entry/view.html.erb @@ -13,8 +13,8 @@ <%= error_messages_for 'diary_comment' %> - <%= form_for DiaryComment.new, :url => { :action => 'comment' } do |f| %> - <%= f.text_area :body, :cols => 80, :rows => 5 %> + <%= form_for :diary_comment, :url => { :action => 'comment' } do |f| %> + <%= richtext_area :diary_comment, :body, :cols => 80, :rows => 15 %>

<%= submit_tag t('diary_entry.view.save_button') %> diff --git a/app/views/message/new.html.erb b/app/views/message/new.html.erb index 113e566d8..a9dfb520f 100644 --- a/app/views/message/new.html.erb +++ b/app/views/message/new.html.erb @@ -10,7 +10,7 @@ <%= t'message.new.body' %> - <%= f.text_area :body, :cols => 80, :value => @body %> + <%= richtext_area :message, :body, :cols => 80, :value => @body %> diff --git a/app/views/site/_markdown_help.html.erb b/app/views/site/_markdown_help.html.erb new file mode 100644 index 000000000..9c03ac6fe --- /dev/null +++ b/app/views/site/_markdown_help.html.erb @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
<%= t "site.markdown_help.title" %>
<%= t "site.markdown_help.headings" %># <%= t "site.markdown_help.heading" %>
## <%= t "site.markdown_help.subheading" %>
<%= t "site.markdown_help.unordered" %>* <%= t "site.markdown_help.first" %>
* <%= t "site.markdown_help.second" %>
<%= t "site.markdown_help.ordered" %>1. <%= t "site.markdown_help.first" %>
2. <%= t "site.markdown_help.second" %>
<%= t "site.markdown_help.link" %>[<%= t "site.markdown_help.text" %>](<%= t "site.markdown_help.url" %>)
<%= t "site.markdown_help.image" %>![<%= t "site.markdown_help.alt" %>](<%= t "site.markdown_help.url" %>)
diff --git a/app/views/user/account.html.erb b/app/views/user/account.html.erb index 4f56be22a..488966491 100644 --- a/app/views/user/account.html.erb +++ b/app/views/user/account.html.erb @@ -63,7 +63,7 @@ <%= t 'user.account.profile description' %> - <%= f.text_area :description, :rows => '5', :cols => '60' %> + <%= richtext_area :user, :description, :rows => '15', :cols => '80' %> diff --git a/app/views/user_blocks/new.html.erb b/app/views/user_blocks/new.html.erb index 80854b840..f63298373 100644 --- a/app/views/user_blocks/new.html.erb +++ b/app/views/user_blocks/new.html.erb @@ -9,7 +9,7 @@

<%= f.label :reason, t('user_block.new.reason', :name => @this_user.display_name) %>
- <%= f.text_area :reason, :cols => 80, :rows => 5 %> + <%= richtext_area :user_block, :reason, :cols => 80, :rows => 20 %>

<%= label_tag 'user_block_period', t('user_block.new.period') %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 766d61918..53f3ffb56 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1404,6 +1404,23 @@ en: permissive: "Permissive access" destination: "Destination access" construction: "Roads under construction" + richtext_area: + edit: Edit + preview: Preview + markdown_help: + title: Parsed with Markdown + headings: Headings + heading: Heading + subheading: Subheading + unordered: Unordered list + ordered: Ordered list + first: First item + second: Second item + link: Link + text: Text + image: Image + alt: Alt text + url: url trace: visibility: private: "Private (only shared as anonymous, unordered points)" diff --git a/config/routes.rb b/config/routes.rb index c8d9a99ee..5408b4e71 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -122,6 +122,9 @@ OpenStreetMap::Application.routes.draw do # permalink match '/go/:code' => 'site#permalink', :via => :get, :code => /[a-zA-Z0-9_@~]+[=-]*/ + # rich text preview + match '/preview/:format' => 'site#preview', :as => :preview + # traces match '/user/:display_name/traces/tag/:tag/page/:page' => 'trace#list', :via => :get match '/user/:display_name/traces/tag/:tag' => 'trace#list', :via => :get diff --git a/test/functional/diary_entry_controller_test.rb b/test/functional/diary_entry_controller_test.rb index 7981edd95..724fb48a5 100644 --- a/test/functional/diary_entry_controller_test.rb +++ b/test/functional/diary_entry_controller_test.rb @@ -159,7 +159,9 @@ class DiaryEntryControllerTest < ActionController::TestCase assert_select "input#latitude[name='diary_entry[latitude]']", :count => 1 assert_select "input#longitude[name='diary_entry[longitude]']", :count => 1 assert_select "input[name=commit][type=submit][value=Save]", :count => 1 - assert_select "input", :count => 5 + assert_select "input[name=commit][type=submit][value=Edit]", :count => 1 + assert_select "input[name=commit][type=submit][value=Preview]", :count => 1 + assert_select "input", :count => 7 end end end diff --git a/test/functional/site_controller_test.rb b/test/functional/site_controller_test.rb index 3f9e2a145..86445e551 100644 --- a/test/functional/site_controller_test.rb +++ b/test/functional/site_controller_test.rb @@ -54,6 +54,10 @@ class SiteControllerTest < ActionController::TestCase { :path => "/go/shortcode", :method => :get }, { :controller => "site", :action => "permalink", :code => "shortcode" } ) + assert_routing( + { :path => "/preview/formatname", :method => :get }, + { :controller => "site", :action => "preview", :format => "formatname" } + ) end ## Lets check that we can get all the pages without any errors diff --git a/test/functional/user_controller_test.rb b/test/functional/user_controller_test.rb index 24daa1a6c..576eb0db9 100644 --- a/test/functional/user_controller_test.rb +++ b/test/functional/user_controller_test.rb @@ -367,7 +367,7 @@ class UserControllerTest < ActionController::TestCase assert_template :account assert_select "div#errorExplanation", false assert_select "div#notice", /^User information updated successfully/ - assert_select "table#accountForm > tr > td > textarea#user_description", user.description + assert_select "table#accountForm > tr > td > div#user_description_container > div#user_description_content > textarea#user_description", user.description # Changing name to one that exists should fail user.display_name = users(:public_user).display_name