thinksimple.pl

with_preview plugin

May 17, 2009

In one of my previous posts I described how to make a preview of form data. Well, I’ve decided to create a plugin. This is my first plugin, so be nice :)

So anyway, the plugin creates a view helper method, called form_for_with_preview. It accepts all form_for arguments and additionally needs a :preview => {} option (because otherwise it’s just plain form_for, right?)

Example usage:

<% form_for_with_preview(@entry, :preview => {
  :action => preview_entries_path, 
  :preview_label => 'preview', 
  :edit_label => 'edit', 
  :preview_container => 'entry_preview', 
  :edit_container => 'entry_form_with_preview'}, 
:html => {:id => 'form'}) do |f| %>
  <div id="entry_form_with_preview">
  <%= f.error_messages %>
  <p>
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </p>
  <p>
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </p>
</div>
<div id="entry_preview"></div>
  <%= f.submit 'Create' %>
<% end %>

Available options:

  • :action – a controller action which takes data from the form and prepares a preview. Should be defined with :method => :put in config/routes.rb. Required.
  • :preview_container – id of DOM element which should display the preview. Defaults to [model_name]_preview. Must exist in DOM.
  • :edit_container – id of DOM element which should disappear after clicking ‘Preview’ button. Defaults to [model_name]_form_with_preview. If set to false then nothing will disappear. Optional.
  • :preview_button – id that will be given to ‘Preview’ button. Defaults to [model_name]_preview_button.
  • :edit_button – id that will be given to ‘Edit’ button. Defaults to [model_name]_edit_button.
  • :preview_label and :edit_label. Default to ‘Preview’ and ‘Edit’. Optional.

Get it from github.