EditMode

edit_mode is a ruby on rails gem that allows you to toggle an edit mode on a normal show view. Think of it as a grouped in-place editing. This also toggles best_in_place fields.

The edit mode is activated by pressing an 'edit' button on a show view. This shows additional editing tools and switches on the best_in_place form fields. When editing is finished, use 'save' or 'cancel' buttons to quit the edit mode and return to a normal show view. Several editing groups per page are supported. Thus, you can have several 'boxes' to edit on a page.

Demo

You might want to have a look at this demo app at heroku.

The code of this demo app can be found here.

Installation

Add this line to your application's Gemfile:

gem 'edit_mode'

And then execute:

$ bundle

Or install it yourself as:

$ gem install edit_mode

Include Assets

In app/assets/javascripts/application.js, add:

//= require jquery.turbolinks
//= require edit_mode

If you experience trouble with javascript, check the correct loading order from the jquery.turbolinks README.

In app/assets/stylesheets/application.css, add:

/*
 *...
 *= require edit_mode
 */

Usage

Basic View

For a basic example, see: https://github.com/fiedl/edit_mode/blob/master/test_app/app/views/users/show.html.erb

edit_mode_group

The edit mode is toggled within a <span class="edit_mode_group"></span>. The buttons to 'edit', 'save' and 'cancel' should also be placed inside this span.

You can also have several edit_mode_group spans on a page, as shown in the demo app.

Tool Buttons

To enter and exit the edit mode, use buttons 'edit', 'save' and 'cancel'. These can be anchors, images, et cetera. They only have to have the correct css classes:

<span class="edit_mode_group">
  <a class="edit_button" href="#">edit</a>
  <a class="save_button" href="#">save</a>
  <a class="cancel_button" href="#">cancel</a>
  ...
</span>

show_only_in_edit_mode

Within the edit_mode_group span, you may place certain elements that should only be shown when in edit mode. You can use this for 'add' buttons or 'destroy' buttons.

<span class="edit_mode_group">
  ...
  <span class="show_only_in_edit_mode">
    <a href="#">add</a>
  </span>
</span>

The same, the other way round:

<span class="edit_mode_group">
  ...
  <span class="do_not_show_in_edit_mode">
    <img src="https://github.com/fiedl/edit_mode/raw/master/.." alt="This picture is not shown in edit mode." />
  </span>
</span>

best_in_place

In the edit_mode_group span, all best_in_place elements are toggled as well.

'.editable' Triggers

If you need custom behaviour inside the edit_mode_group span, you can use these triggers: For all elements of the class .editable, the events edit, save and cancel are triggered, when entering or exiting edit mode.

<span class="edit_mode_group">
  ...
  <span class="editable custom_element">Test</span>
</span>

Bind the event via JavaScript, e.g. with jQuery:

jQuery ->
  $( ".custom_element" ).bind( "edit", ->
    alert( "This element has just entered edit mode." )
  )

Adding .editable Elements Using Ajax

If you would like to add .editable elements (e.g. .best_in_place elements or .show_only_in_edit_mode elements) using ajax, you have to call apply_edit_mode() on the newly added elements in order to have them provide the proper methods and triggers.

For example, if you have added a <span id="my_new_edit_mode_span">...</span> containing the edit_mode elements using ajax, just call via javascript (jQuery):

$( "#my_new_edit_mode_span" ).apply_edit_mode()

And if you want to enter edit_mode for this span, call instead:

$( "#my_new_edit_mode_span" ).apply_edit_mode().trigger( "edit" )

Deactivating the Modal

If you do not want the edit mode span to get modal when entering the edit mode, have a look at the solution to issue #2.

Documentation

http://rubydoc.info/github/fiedl/edit_mode/frames

Demo App

http://edit-mode-test-app.herokuapp.com/
https://github.com/fiedl/edit_mode/tree/master/test_app
Add heroku remote to git: http://stackoverflow.com/questions/5129598
- brew install heroku-toolbelt
- heroku keys:add
- heroku git:remote -a edit-mode-test-app
Push test app to heroku: git subtree push --prefix test_app heroku master or git push heroku \git subtree split --prefix test_app master`:master --force` (SO)

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

fiedl / edit_mode

readme