README.md in edit_mode-1.0.0 vs README.md in edit_mode-1.0.1

- old
+ new

@@ -1,16 +1,16 @@ # EditMode [![Build Status](https://secure.travis-ci.org/fiedl/edit_mode.png?branch=master)](http://travis-ci.org/fiedl/edit_mode) <img src="https://github.com/fiedl/edit_mode/raw/master/test_app/app/assets/images/screenshot.png" height="300" align="right" vspace="20" hspace="20" /> -*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. +*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](https://github.com/bernat/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. +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](http://edit-mode-test-app.herokuapp.com/). @@ -34,13 +34,16 @@ ### Include Assets In `app/assets/javascripts/application.js`, add: ```javascript +//= require jquery.turbolinks //= require edit_mode ``` - + +If you experience trouble with javascript, check the correct loading order from [the jquery.turbolinks README](https://github.com/kossnocorp/jquery.turbolinks#usage). + In `app/assets/stylesheets/application.css`, add: ```css /* *... @@ -60,11 +63,11 @@ 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: +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: ```html <span class="edit_mode_group"> <a class="edit_button" href="#">edit</a> <a class="save_button" href="#">save</a> @@ -127,30 +130,41 @@ 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): - + ```javascript $( "#my_new_edit_mode_span" ).apply_edit_mode() -``` +``` And if you want to enter edit_mode for this span, call instead: - + ```javascript $( "#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](https://github.com/fiedl/edit_mode/issues/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](http://stackoverflow.com/a/10648623/2066546)) + ## Contributing 1. Fork it 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Added some feature'`) 4. Push to the branch (`git push origin my-new-feature`) 5. Create new Pull Request - - -