edit_mode 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 [](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
|