edit_mode 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile +2 -1
- data/Gemfile.lock +11 -6
- data/lib/assets/javascripts/edit_mode/edit_mode_group.js.coffee +4 -4
- data/lib/assets/javascripts/edit_mode/make_modal.js.coffee +1 -1
- data/lib/edit_mode/version.rb +1 -1
- data/test_app/README.md +1 -0
- metadata +3 -3
- data/test_app/README.md +0 -170
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b8c8da9af88f71e7c611d676721fdc74bccd79b0
|
4
|
+
data.tar.gz: c890638b27883a0afd1d16d7b86d2ca3f71e5a4a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d32d9e17d1bae533428cde75ba6ffb10e3895faf5cede22bf2142a3fa18abc582f79253c7754ac062897b850b607f7cb21b4151b1dec67cca2b4da7c348799ad
|
7
|
+
data.tar.gz: 9a574ca2380631d544283ad97d22323e2288fc30fc126f959a4c88e4eac9947742d57afcca9e7346dcdcad248e0487a18cc891aa0b475c37fc016df2b0fc987f
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -9,7 +9,7 @@ GIT
|
|
9
9
|
PATH
|
10
10
|
remote: .
|
11
11
|
specs:
|
12
|
-
edit_mode (1.0.
|
12
|
+
edit_mode (1.0.3)
|
13
13
|
jquery-rails
|
14
14
|
jquery-turbolinks
|
15
15
|
rails (>= 3.2)
|
@@ -65,7 +65,7 @@ GEM
|
|
65
65
|
coffee-script-source (1.6.3)
|
66
66
|
diff-lcs (1.1.3)
|
67
67
|
erubis (2.7.0)
|
68
|
-
eventmachine (1.
|
68
|
+
eventmachine (1.2.3)
|
69
69
|
execjs (2.0.2)
|
70
70
|
faye-websocket (0.4.7)
|
71
71
|
eventmachine (>= 0.12.0)
|
@@ -87,7 +87,7 @@ GEM
|
|
87
87
|
turbolinks
|
88
88
|
jquery-ui-rails (4.1.0)
|
89
89
|
railties (>= 3.1.0)
|
90
|
-
json (1.8.
|
90
|
+
json (1.8.6)
|
91
91
|
launchy (2.4.3)
|
92
92
|
addressable (~> 2.3)
|
93
93
|
libv8 (3.16.14.3)
|
@@ -170,8 +170,9 @@ GEM
|
|
170
170
|
treetop (1.4.15)
|
171
171
|
polyglot
|
172
172
|
polyglot (>= 0.3.1)
|
173
|
-
turbolinks (
|
174
|
-
|
173
|
+
turbolinks (5.0.1)
|
174
|
+
turbolinks-source (~> 5)
|
175
|
+
turbolinks-source (5.0.3)
|
175
176
|
tzinfo (0.3.38)
|
176
177
|
websocket (1.0.7)
|
177
178
|
xpath (0.1.4)
|
@@ -185,12 +186,13 @@ DEPENDENCIES
|
|
185
186
|
capybara (= 1.1.2)
|
186
187
|
coffee-rails
|
187
188
|
edit_mode!
|
188
|
-
eventmachine (>= 1.
|
189
|
+
eventmachine (>= 1.2.3)
|
189
190
|
execjs
|
190
191
|
guard (= 1.0.1)
|
191
192
|
guard-rspec (= 0.5.5)
|
192
193
|
jquery-rails (>= 2.2.0)
|
193
194
|
jquery-ui-rails
|
195
|
+
json (>= 1.8.6)
|
194
196
|
launchy
|
195
197
|
nokogiri
|
196
198
|
poltergeist
|
@@ -203,3 +205,6 @@ DEPENDENCIES
|
|
203
205
|
sass-rails
|
204
206
|
sqlite3 (>= 1.3.10)
|
205
207
|
therubyracer
|
208
|
+
|
209
|
+
BUNDLED WITH
|
210
|
+
1.15.2
|
@@ -32,15 +32,15 @@ $( document ).on( "cancel", ".edit_mode_group", ->
|
|
32
32
|
|
33
33
|
edit_mode_group = $( this )
|
34
34
|
cancel_button = $( this ).find( ".cancel_button" )
|
35
|
-
|
35
|
+
|
36
36
|
# if there is a cancel button, animate it and then cancel all elements.
|
37
|
-
if cancel_button.
|
37
|
+
if cancel_button.length > 0
|
38
38
|
button_effect( cancel_button, ->
|
39
39
|
edit_mode_group.find( ".editable" ).trigger( "cancel" )
|
40
40
|
)
|
41
|
-
|
41
|
+
|
42
42
|
# if no cancel button exists, just trigger each element's cancel event.
|
43
|
-
else
|
43
|
+
else
|
44
44
|
edit_mode_group.find( ".editable" ).trigger( "cancel" )
|
45
45
|
|
46
46
|
)
|
@@ -5,7 +5,7 @@
|
|
5
5
|
# If the user clicks on the shaded (grey) area outside, the edit_mode_group is saved.
|
6
6
|
|
7
7
|
$( document ).on( "edit", ".edit_mode_group", ->
|
8
|
-
if $( document ).find( ".edit-mode-modal" ).
|
8
|
+
if $( document ).find( ".edit-mode-modal" ).length == 0
|
9
9
|
#unless $( this ).hasClass( "edit-mode-modal" )
|
10
10
|
modal_edit_mode_group = $( this )
|
11
11
|
$( this ).addClass( "edit-mode-modal" )
|
data/lib/edit_mode/version.rb
CHANGED
data/test_app/README.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
../README.md
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: edit_mode
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sebastian Fiedlschuster
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2017-07-24 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -236,7 +236,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
236
236
|
version: '0'
|
237
237
|
requirements: []
|
238
238
|
rubyforge_project:
|
239
|
-
rubygems_version: 2.
|
239
|
+
rubygems_version: 2.5.1
|
240
240
|
signing_key:
|
241
241
|
specification_version: 4
|
242
242
|
summary: Toggle an edit mode on a show view. Think of it as a grouped in-place editing.
|
data/test_app/README.md
DELETED
@@ -1,170 +0,0 @@
|
|
1
|
-
# EditMode [![Build Status](https://secure.travis-ci.org/fiedl/edit_mode.png?branch=master)](http://travis-ci.org/fiedl/edit_mode)
|
2
|
-
|
3
|
-
<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" />
|
4
|
-
|
5
|
-
*edit_mode* is a *ruby on rails gem* that allows you to toggle an edit mode on a normal show view.
|
6
|
-
Think of it as a grouped in-place editing.
|
7
|
-
This also toggles [best_in_place](https://github.com/bernat/best_in_place) fields.
|
8
|
-
|
9
|
-
The edit mode is activated by pressing an 'edit' button on a show view. This shows additional editing tools
|
10
|
-
and switches on the best_in_place form fields. When editing is finished, use 'save' or 'cancel' buttons to
|
11
|
-
quit the edit mode and return to a normal show view.
|
12
|
-
Several editing groups per page are supported. Thus, you can have several 'boxes' to edit on a page.
|
13
|
-
|
14
|
-
## Demo
|
15
|
-
|
16
|
-
You might want to have a look at [this demo app at heroku](http://edit-mode-test-app.herokuapp.com/).
|
17
|
-
|
18
|
-
The [code of this demo app can be found here](https://github.com/fiedl/edit_mode/tree/master/test_app).
|
19
|
-
|
20
|
-
## Installation
|
21
|
-
|
22
|
-
Add this line to your application's Gemfile:
|
23
|
-
|
24
|
-
gem 'edit_mode'
|
25
|
-
|
26
|
-
And then execute:
|
27
|
-
|
28
|
-
$ bundle
|
29
|
-
|
30
|
-
Or install it yourself as:
|
31
|
-
|
32
|
-
$ gem install edit_mode
|
33
|
-
|
34
|
-
### Include Assets
|
35
|
-
|
36
|
-
In `app/assets/javascripts/application.js`, add:
|
37
|
-
|
38
|
-
```javascript
|
39
|
-
//= require jquery.turbolinks
|
40
|
-
//= require edit_mode
|
41
|
-
```
|
42
|
-
|
43
|
-
If you experience trouble with javascript, check the correct loading order from [the jquery.turbolinks README](https://github.com/kossnocorp/jquery.turbolinks#usage).
|
44
|
-
|
45
|
-
In `app/assets/stylesheets/application.css`, add:
|
46
|
-
|
47
|
-
```css
|
48
|
-
/*
|
49
|
-
*...
|
50
|
-
*= require edit_mode
|
51
|
-
*/
|
52
|
-
```
|
53
|
-
|
54
|
-
## Usage
|
55
|
-
|
56
|
-
### Basic View
|
57
|
-
|
58
|
-
For a basic example, see: https://github.com/fiedl/edit_mode/blob/master/test_app/app/views/users/show.html.erb
|
59
|
-
|
60
|
-
### edit_mode_group
|
61
|
-
|
62
|
-
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.
|
63
|
-
|
64
|
-
You can also have several edit_mode_group spans on a page, as shown in the demo app.
|
65
|
-
|
66
|
-
### Tool Buttons
|
67
|
-
|
68
|
-
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:
|
69
|
-
|
70
|
-
```html
|
71
|
-
<span class="edit_mode_group">
|
72
|
-
<a class="edit_button" href="#">edit</a>
|
73
|
-
<a class="save_button" href="#">save</a>
|
74
|
-
<a class="cancel_button" href="#">cancel</a>
|
75
|
-
...
|
76
|
-
</span>
|
77
|
-
```
|
78
|
-
|
79
|
-
### show_only_in_edit_mode
|
80
|
-
|
81
|
-
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.
|
82
|
-
|
83
|
-
```html
|
84
|
-
<span class="edit_mode_group">
|
85
|
-
...
|
86
|
-
<span class="show_only_in_edit_mode">
|
87
|
-
<a href="#">add</a>
|
88
|
-
</span>
|
89
|
-
</span>
|
90
|
-
```
|
91
|
-
|
92
|
-
The same, the other way round:
|
93
|
-
|
94
|
-
```html
|
95
|
-
<span class="edit_mode_group">
|
96
|
-
...
|
97
|
-
<span class="do_not_show_in_edit_mode">
|
98
|
-
<img src="..." alt="This picture is not shown in edit mode." />
|
99
|
-
</span>
|
100
|
-
</span>
|
101
|
-
```
|
102
|
-
|
103
|
-
### best_in_place
|
104
|
-
|
105
|
-
In the edit_mode_group span, all [best_in_place](https://github.com/bernat/best_in_place) elements are toggled as well.
|
106
|
-
|
107
|
-
### '.editable' Triggers
|
108
|
-
|
109
|
-
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.
|
110
|
-
|
111
|
-
```html
|
112
|
-
<span class="edit_mode_group">
|
113
|
-
...
|
114
|
-
<span class="editable custom_element">Test</span>
|
115
|
-
</span>
|
116
|
-
```
|
117
|
-
|
118
|
-
Bind the event via JavaScript, e.g. with jQuery:
|
119
|
-
|
120
|
-
```coffee
|
121
|
-
jQuery ->
|
122
|
-
$( ".custom_element" ).bind( "edit", ->
|
123
|
-
alert( "This element has just entered edit mode." )
|
124
|
-
)
|
125
|
-
```
|
126
|
-
|
127
|
-
### Adding .editable Elements Using Ajax
|
128
|
-
|
129
|
-
If you would like to add .editable elements (e.g. `.best_in_place` elements or `.show_only_in_edit_mode` elements) using
|
130
|
-
ajax, you have to call `apply_edit_mode()` on the newly added elements in order to have them provide the proper methods
|
131
|
-
and triggers.
|
132
|
-
|
133
|
-
For example, if you have added a `<span id="my_new_edit_mode_span">...</span>` containing
|
134
|
-
the edit_mode elements using ajax, just call via javascript (jQuery):
|
135
|
-
|
136
|
-
```javascript
|
137
|
-
$( "#my_new_edit_mode_span" ).apply_edit_mode()
|
138
|
-
```
|
139
|
-
|
140
|
-
And if you want to enter edit_mode for this span, call instead:
|
141
|
-
|
142
|
-
```javascript
|
143
|
-
$( "#my_new_edit_mode_span" ).apply_edit_mode().trigger( "edit" )
|
144
|
-
```
|
145
|
-
|
146
|
-
### Deactivating the Modal
|
147
|
-
|
148
|
-
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).
|
149
|
-
|
150
|
-
## Documentation
|
151
|
-
|
152
|
-
http://rubydoc.info/github/fiedl/edit_mode/frames
|
153
|
-
|
154
|
-
## Demo App
|
155
|
-
|
156
|
-
* http://edit-mode-test-app.herokuapp.com/
|
157
|
-
* https://github.com/fiedl/edit_mode/tree/master/test_app
|
158
|
-
* Add heroku remote to git: http://stackoverflow.com/questions/5129598
|
159
|
-
* `brew install heroku-toolbelt`
|
160
|
-
* `heroku keys:add`
|
161
|
-
* `heroku git:remote -a edit-mode-test-app`
|
162
|
-
* 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))
|
163
|
-
|
164
|
-
## Contributing
|
165
|
-
|
166
|
-
1. Fork it
|
167
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
168
|
-
3. Commit your changes (`git commit -am 'Added some feature'`)
|
169
|
-
4. Push to the branch (`git push origin my-new-feature`)
|
170
|
-
5. Create new Pull Request
|