').text(value.street).html() + ' st., bld. ' + $('
').text(value.building).html();
55 | $(element).html(html);
56 | },
57 |
58 | /**
59 | Gets value from element's html
60 |
61 | @method html2value(html)
62 | **/
63 | html2value: function(html) {
64 | /*
65 | you may write parsing method to get value by element's html
66 | e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
67 | but for complex structures it's not recommended.
68 | Better set value directly via javascript, e.g.
69 | editable({
70 | value: {
71 | city: "Moscow",
72 | street: "Lenina",
73 | building: "15"
74 | }
75 | });
76 | */
77 | return null;
78 | },
79 |
80 | /**
81 | Converts value to string.
82 | It is used in internal comparing (not for sending to server).
83 |
84 | @method value2str(value)
85 | **/
86 | value2str: function(value) {
87 | var str = '';
88 | if(value) {
89 | for(var k in value) {
90 | str = str + k + ':' + value[k] + ';';
91 | }
92 | }
93 | return str;
94 | },
95 |
96 | /*
97 | Converts string to value. Used for reading value from 'data-value' attribute.
98 |
99 | @method str2value(str)
100 | */
101 | str2value: function(str) {
102 | /*
103 | this is mainly for parsing value defined in data-value attribute.
104 | If you will always set value by javascript, no need to overwrite it
105 | */
106 | return str;
107 | },
108 |
109 | /**
110 | Sets value of input.
111 |
112 | @method value2input(value)
113 | @param {mixed} value
114 | **/
115 | value2input: function(value) {
116 | if(!value) {
117 | return;
118 | }
119 | this.$input.filter('[name="city"]').val(value.city);
120 | this.$input.filter('[name="street"]').val(value.street);
121 | this.$input.filter('[name="building"]').val(value.building);
122 | },
123 |
124 | /**
125 | Returns value of input.
126 |
127 | @method input2value()
128 | **/
129 | input2value: function() {
130 | return {
131 | city: this.$input.filter('[name="city"]').val(),
132 | street: this.$input.filter('[name="street"]').val(),
133 | building: this.$input.filter('[name="building"]').val()
134 | };
135 | },
136 |
137 | /**
138 | Activates input: sets focus on the first field.
139 |
140 | @method activate()
141 | **/
142 | activate: function() {
143 | this.$input.filter('[name="city"]').focus();
144 | },
145 |
146 | /**
147 | Attaches handler to submit form in case of 'showbuttons=false' mode
148 |
149 | @method autosubmit()
150 | **/
151 | autosubmit: function() {
152 | this.$input.keydown(function (e) {
153 | if (e.which === 13) {
154 | $(this).closest('form').submit();
155 | }
156 | });
157 | }
158 | });
159 |
160 | Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
161 | tpl: '
'+
162 | '
'+
163 | '
',
164 |
165 | inputclass: ''
166 | });
167 |
168 | $.fn.editabletypes.address = Address;
169 |
170 | }(window.jQuery));
--------------------------------------------------------------------------------
/test/view_helpers_test.rb:
--------------------------------------------------------------------------------
1 | require 'test_helper'
2 |
3 | class ViewHelpersTest < ActionView::TestCase
4 | include X::Editable::Rails::ViewHelpers
5 |
6 | class Subject < OpenStruct
7 | include ActiveModel::Model
8 |
9 | attr_accessor :id, :name, :content, :active
10 |
11 | def self.model_name
12 | ActiveModel::Name.new(self, nil, "Page")
13 | end
14 |
15 | def initialize(attributes={})
16 | super(attributes.merge(id: 1, name: "test subject"))
17 | end
18 | end
19 |
20 | test "editable should escape unsafe values" do
21 | subject = Subject.new(content: "
unsafe content
")
22 | assert_match %r{<h1>unsafe content</h1>},
23 | editable(subject, :content),
24 | "ViewHelpers#editable should escape unsafe content"
25 | end
26 |
27 | test "editable should NOT escape safe values" do
28 | subject = Subject.new(content: "
html_safe'd content
".html_safe)
29 | assert_match %r{
html_safe'd content
},
30 | editable(subject, :content),
31 | "ViewHelpers#editable should not escape safe content"
32 |
33 | subject.content = "safe content"
34 | assert_match %r{safe content},
35 | editable(subject, :content),
36 | "ViewHelpers#editable should not escape safe content"
37 | end
38 |
39 | test "editable should generate content tag with html options" do
40 | subject = Subject.new
41 |
42 | assert_match %r{
]+id="subject-id"},
43 | editable(subject, :name, html: { id: 'subject-id' }),
44 | "ViewHelpers#editable should generate content tag with html options"
45 |
46 | assert_match %r{]+name="subject\[name\]"},
47 | editable(subject, :name, html: { name: 'subject[name]' }),
48 | "ViewHelpers#editable should generate content tag with html options"
49 |
50 | assert_match %r{]+title="First Title"},
51 | editable(subject, :name, title: "First Title", html: { title: 'Second Title' }),
52 | "ViewHelpers#editable should generate content tag with html options"
53 | end
54 |
55 | test "editable should generate content tag with data attributes" do
56 | subject = Subject.new
57 |
58 | assert_match %r{]+data-model="page"},
59 | editable(subject, :name),
60 | "ViewHelpers#editable should generate content tag with data attributes"
61 |
62 | assert_no_match %r{]+data-model="page"},
63 | editable(subject, :name, model: "custom"),
64 | "ViewHelpers#editable should generate content tag with data attributes"
65 | end
66 |
67 | test "editable should generate content tag with the current value" do
68 | subject_1 = Subject.new(content: "foo")
69 |
70 | assert_match %r{]+>foo},
71 | editable(subject_1, :content),
72 | "ViewHelpers#editable should generate content tag with the current value"
73 |
74 | assert_match %r{]+>foo},
75 | editable(subject_1, :content, type: "select", source: ["foo", "bar"]),
76 | "ViewHelpers#editable should generate content tag with the current value"
77 |
78 | assert_match %r{]+>Foo},
79 | editable(subject_1, :content, type: "select", source: [["foo", "Foo"], ["bar", "Bar"]]),
80 | "ViewHelpers#editable should generate content tag with the current value"
81 |
82 | assert_match %r{]+>Foo},
83 | editable(subject_1, :content, type: "select", source: { "foo" => "Foo", "bar" => "Bar" }),
84 | "ViewHelpers#editable should generate content tag with the current value"
85 |
86 | assert_match %r{]+>Foo},
87 | editable(subject_1, :content, type: "select", source: [{ text: "Foo", value: "foo" }, { text: "Bar", value: "bar" }]),
88 | "ViewHelpers#editable should generate content tag with the current value"
89 |
90 | refute_match %r{data-source=},
91 | editable(subject_1, :content, type: "select"),
92 | "ViewHelpers#editable should generate content tag without source"
93 |
94 | subject_2 = Subject.new(active: true)
95 |
96 | assert_match %r{]+>Yes},
97 | editable(subject_2, :active),
98 | "ViewHelpers#editable should generate content tag with the current value"
99 | end
100 |
101 | test "editable should store the source url as a data attribute" do
102 | subject = Subject.new
103 | assert_match %r{]+data-source="http://example.org"},
104 | editable(subject, :name, type: "select",
105 | source: "http://example.org"),
106 | "ViewHelpers#editable should generate content tag with url source as a data attribute"
107 | end
108 |
109 | test "editable should generate content tag without current value" do
110 | subject_1 = Subject.new(content: nil)
111 |
112 | assert_match %r{]+>},
113 | editable(subject_1, :content),
114 | "ViewHelpers#editable should generate content tag with the current value"
115 |
116 | assert_match %r{]+>},
117 | editable(subject_1, :content, type: "select", source: ["foo", "bar"]),
118 | "ViewHelpers#editable should generate content tag with the current value"
119 |
120 | assert_match %r{]+>},
121 | editable(subject_1, :content, type: "select", source: [["foo", "Foo"], ["bar", "Bar"]]),
122 | "ViewHelpers#editable should generate content tag with the current value"
123 |
124 | assert_match %r{]+>},
125 | editable(subject_1, :content, type: "select", source: { "foo" => "Foo", "bar" => "Bar" }),
126 | "ViewHelpers#editable should generate content tag with the current value"
127 |
128 | assert_match %r{]+>},
129 | editable(subject_1, :content, type: "select", source: [{ text: "Foo", value: "foo" }, { text: "Bar", value: "bar" }]),
130 | "ViewHelpers#editable should generate content tag with the current value"
131 | end
132 |
133 | private
134 |
135 | def view_helpers_test_subject_path(subject)
136 | "/#{subject.to_param}"
137 | end
138 |
139 | def xeditable?(*args)
140 | true
141 | end
142 | end
143 |
--------------------------------------------------------------------------------
/lib/x-editable-rails/view_helpers.rb:
--------------------------------------------------------------------------------
1 | require 'base64'
2 |
3 | module X
4 | module Editable
5 | module Rails
6 | module ViewHelpers
7 | #
8 | # Options determine how the HTML tag is rendered and the remaining options are converted to data-* attributes.
9 | #
10 | # options:
11 | # tag: tag name of element returned
12 | # class: "class" attribute on element
13 | # placeholder: "placeholder" attribute on element
14 | # title: "title" attribute on element (defaults to placeholder)
15 | # data: "data-*" attributes on element
16 | # source: a Hash of friendly display values used by input elements based on (object) value
17 | # - boolean shorthand ['Enabled', 'Disabled'] becomes { '1' => 'Enabled', '0' => 'Disabled' }
18 | # - enumerable shorthand ['Yes', 'No', 'Maybe'] becomes { 'Yes' => 'Yes', 'No' => 'No', 'Maybe' => 'Maybe' }
19 | # classes: a Hash of classes to add based on the value (same format and shorthands as source)
20 | # value: override the object's value
21 | #
22 | def editable(object, method, options = {})
23 | options = Configuration.method_options_for(object, method).deep_merge(options).with_indifferent_access
24 | # merge data attributes for backwards-compatibility
25 | options.merge! options.delete(:data){ Hash.new }
26 |
27 | url = options.delete(:url){ polymorphic_path(object) }
28 | object = object.last if object.kind_of?(Array)
29 | value = options.delete(:value){ object.send(method) }
30 | source = options[:source] ? format_source(options.delete(:source), value) : default_source_for(value)
31 | classes = format_source(options.delete(:classes), value)
32 | error = options.delete(:e)
33 | html_options = options.delete(:html){ Hash.new }
34 |
35 | if xeditable?(object)
36 | model = object.class.model_name.param_key
37 | nid = options.delete(:nid)
38 | nested = options.delete(:nested)
39 | title = options.delete(:title) do
40 | klass = nested ? object.class.const_get(nested.to_s.classify) : object.class
41 | klass.human_attribute_name(method)
42 | end
43 |
44 | output_value = output_value_for(value)
45 | css_list = options.delete(:class).to_s.split(/\s+/).unshift('editable')
46 | css_list << classes[output_value] if classes
47 | type = options.delete(:type){ default_type_for(value) }
48 | css = css_list.compact.uniq.join(' ')
49 | tag = options.delete(:tag){ 'span' }
50 | placeholder = options.delete(:placeholder){ title }
51 |
52 | # any remaining options become data attributes
53 | data = {
54 | type: type,
55 | model: model,
56 | name: method,
57 | value: ( type == 'wysihtml5' ? Base64.encode64(output_value) : output_value ),
58 | placeholder: placeholder,
59 | classes: classes,
60 | source: source,
61 | url: url,
62 | nested: nested,
63 | nid: nid
64 | }.merge(options.symbolize_keys)
65 |
66 | data.reject!{|_, value| value.nil?}
67 |
68 | html_options.update({
69 | class: css,
70 | title: title,
71 | data: data
72 | })
73 |
74 | content_tag tag, html_options do
75 | if %w(select checklist).include?(data[:type].to_s) && !source.is_a?(String)
76 | source = normalize_source(source)
77 | content = source.detect { |t| output_value == output_value_for(t[0]) }
78 | content.present? ? content[1] : ""
79 | else
80 | safe_join(source_values_for(value, source), tag(:br))
81 | end
82 | end
83 | else
84 | error || safe_join(source_values_for(value || options[:emptytext], source), tag(:br))
85 | end
86 | end
87 |
88 | private
89 |
90 | def normalize_source(source)
91 | return [] unless source
92 | source.map do |el|
93 | if el.is_a? Array
94 | el
95 | else
96 | [el[:value], el[:text]]
97 | end
98 | end
99 | end
100 |
101 | def output_value_for(value)
102 | value = case value
103 | when TrueClass
104 | '1'
105 | when FalseClass
106 | '0'
107 | when NilClass
108 | ''
109 | when Array
110 | value.map{|item| output_value_for item}.join(',')
111 | else
112 | value.to_s
113 | end
114 |
115 | value
116 | end
117 |
118 | def source_values_for(value, source = nil)
119 | source ||= default_source_for value
120 |
121 | values = Array.wrap(value)
122 |
123 | if source && ( source.first.is_a?(String) || source.kind_of?(Hash) )
124 | values.map{|item| source[output_value_for item]}
125 | else
126 | values
127 | end
128 | end
129 |
130 | def default_type_for(value)
131 | case value
132 | when TrueClass, FalseClass
133 | 'select'
134 | when Array
135 | 'checklist'
136 | else
137 | 'text'
138 | end
139 | end
140 |
141 | def default_source_for(value)
142 | case value
143 | when TrueClass, FalseClass
144 | { '1' => 'Yes', '0' => 'No' }
145 | end
146 | end
147 |
148 | # helper method that take some shorthand source definitions and reformats them
149 | def format_source(source, value)
150 | formatted_source = case value
151 | when TrueClass, FalseClass
152 | if source.is_a?(Array) && source.first.is_a?(String) && source.size == 2
153 | { '1' => source[0], '0' => source[1] }
154 | end
155 | else
156 | if source.is_a?(Array) && source.first.is_a?(String)
157 | source.map { |v| { value: v, text: v } }
158 | end
159 | end
160 |
161 | formatted_source || source
162 | end
163 |
164 | end
165 | end
166 | end
167 | end
168 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # X::Editable::Rails
2 |
3 | [](https://travis-ci.org/werein/x-editable-rails) [](https://codeclimate.com/github/werein/x-editable-rails) [](https://codeclimate.com/github/werein/x-editable-rails) [](https://badge.fury.io/rb/x-editable-rails) [](https://gemnasium.com/werein/x-editable-rails)
4 |
5 | X-editable for Rails
6 |
7 | ## Live demo
8 |
9 | Checkout live demo [here](https://x-editable-rails.herokuapp.com/?denied=true)
10 |
11 | ## Installation
12 |
13 | Add this line to your application's Gemfile:
14 |
15 | gem 'x-editable-rails'
16 |
17 | And then execute:
18 |
19 | $ bundle
20 |
21 | Or install it yourself as:
22 |
23 | $ gem install x-editable-rails
24 |
25 | ## Usage
26 |
27 | ### Assets
28 |
29 | Choose between the following javascripts:
30 |
31 | * bootstrap-editable
32 | * bootstrap2-editable
33 | * jqueryui-editable
34 | * jquery-editable-poshytip
35 |
36 | You'll also need to include editable/rails in your scripts for this to work.
37 |
38 | ```coffee
39 | #= require editable/bootstrap-editable
40 | #= require editable/rails
41 | ```
42 |
43 | Choose the corresponding stylesheets:
44 |
45 | * bootstrap-editable
46 | * bootstrap2-editable
47 | * jqueryui-editable
48 | * jquery-editable
49 |
50 | ```scss
51 | // as CSS
52 | *= require editable/bootstrap-editable
53 |
54 | // or SCSS
55 | @import "editable/bootstrap-editable";
56 | ```
57 |
58 | Enable editing with jQuery:
59 |
60 | ```coffee
61 | $('.editable').editable()
62 | ```
63 |
64 | For custom inputs like the Wysihtml5 editor, add these dependencies:
65 |
66 | ```coffee
67 | #= require editable/bootstrap-editable
68 | #= require editable/inputs-ext/wysihtml5
69 | #= require editable/inputs-ext/bootstrap-wysihtml5
70 | #= require editable/inputs-ext/wysihtml5-editable
71 | #= require editable/rails
72 | ```
73 |
74 | And related stylesheets:
75 |
76 | ```css
77 | //= require editable/bootstrap-editable
78 | //= require editable/inputs-ext/bootstrap-wysihtml5
79 | //= require editable/inputs-ext/wysiwyg-color
80 | ```
81 |
82 | ### Making Things Editable
83 |
84 | `x-editable-rails` provides a helper method in your view to make your model values editable.
85 | By default, you need to specify the model and property that should be editable.
86 | A `span` element is rendered with `data-*` attributes used by `x-editable`.
87 |
88 | ```ruby
89 | # the editable object and the attribute to edit
90 | %h1= editable @model, :name
91 | ```
92 |
93 | You can customize the tag name and title attribute:
94 |
95 | * **tag** - `span` by default.
96 | * **title** - The model and attribute name are used to create a capitalized title
97 |
98 | The `editable` helper method automatically adds these `data-*` attributes used by [x-editable](http://vitalets.github.io/x-editable/docs.html).
99 |
100 | * **url** - Uses the `polymorphic_path(model)` helper method.
101 | * **source** - Only populated if the value is a boolean to convert `true` or `false` to "Yes" and "No".
102 | * **value** - Uses `model.name`. If `model.name` were a boolean value or if a `source` is specified, the `source` text would be displayed rather than the raw value. (Presumably the value is an ID and the source would have the text associated with that value.)
103 | * **placeholder** - Uses the `title` value by default
104 |
105 | ```ruby
106 | # editable object, what_you_want_update, e: exception - when is xeditable? false or can? :edit, object is false
107 | %h1= editable @model, :name, url: model_path, value: @model.name.upcase
108 | ```
109 |
110 | Here are some special features to enhance what's baked into [x-editable](http://vitalets.github.io/x-editable/docs.html):
111 |
112 | * **type** - The type of input is automatically detected. By default, if the value is a boolean, the `type` is "select" with a built-in `source` that outputs "Yes" and "No" (unless another `source` is specified).
113 | * **source** - In addition to hashes or arrays of hashes, you can also use an array of strings for a simpler structure if the name and value are the same:
114 |
115 | ```ruby
116 | source = [ "Active", "Disabled" ]
117 | editable @model, :enabled, source: source
118 | ```
119 |
120 | * **value** - This option will override the `model.name` value
121 | * **classes** - This is a custom option for `x-editable-rails` that will change the editable element's CSS class based on the selected value. Use the `source` hash structure to map a CSS class name to a value. (This [functionality](vendor/assets/javascripts/editable/rails/data_classes.js.coffee) is toggled when the value changes and the "save" event is triggered.)
122 |
123 | ```ruby
124 | source = [ "Active", "Disabled" ]
125 | classes = { "Active" => "label-success", "Disabled" => "label-default" }
126 | editable @model, :enabled, source: source, classes: classes, class: "label"
127 | ```
128 |
129 | * **nested** - Name of a nested attributes (such as [globalize](https://github.com/globalize/globalize)'s `translations`)
130 | * **nid** - ID of the nested attribute
131 |
132 | ```ruby
133 | %h1= editable @model, :name, nested: :translations, nid: @model.translation.id
134 |
135 | # example of nested resource
136 | %h1= editable [picture.gallery, picture], :name, nested: :translations, nid: picture.translation.id
137 | ```
138 |
139 | ### Authorization
140 |
141 | Add a helper method to your controllers to indicate if `x-editable` should be enabled.
142 |
143 | ```ruby
144 | def xeditable? object = nil
145 | true # Or something like current_user.xeditable?
146 | end
147 | ```
148 |
149 | You can use [CanCan](https://github.com/ryanb/cancan) and checks the `:edit` permission for the model being edited.
150 |
151 | ```ruby
152 | def xeditable? object = nil
153 | can?(:edit, object) ? true : false
154 | end
155 | ```
156 |
157 | * **e** - Specify a custom (error) message to display if the value isn't editable
158 |
159 | ### "Don't Repeat Yourself" Templates
160 |
161 | To make your views cleaner, you can specify all your options for each class and attribute in a YAML configuration file.
162 | Attributes where the `title` or `placeholder` are not different except maybe capitalized can be left out because they are automatically capitalized when rendered (see above).
163 |
164 | This example uses the `MailingList` class and its attributes.
165 | The attribute value can be a string, which is used as the `title` and `placeholder`.
166 | If you want to specify other options, create a hash of options.
167 |
168 | Install configuration file like this: `rails g x_editable_rails:install`, this step is not necessary
169 |
170 | ```yaml
171 | class_options:
172 | MailingList:
173 | # Specify placeholder text for each attribute or a Hash of options
174 | name: Mailing list name
175 | enabled:
176 | type: select
177 | source:
178 | - Active
179 | - Disabled
180 | reply_email:
181 | type: email
182 | title: Reply-to email
183 | User:
184 | email:
185 | type: email
186 | password:
187 | type: password
188 | mailing_lists:
189 | type: select
190 | # specify a URL to get source via AJAX (see x-editable docs)
191 | source: <%= ::Rails.application.routes.url_helpers.mailing_lists_source_path %>
192 | ```
193 |
194 | Now you can specify your editable fields without options because they will be inherited from your YAML config.
195 |
196 | ```ruby
197 | model = MailingList.new
198 |
199 | editable model, :name # type: "text", title: "Mailing list name"
200 | editable model, :enabled # type: "select", title: "Enabled", source: [ "Active", "Disabled" ]
201 | ```
202 |
203 | ### Examples
204 |
205 | Gem also contains demo application with integrated x-editable
206 |
207 | ```
208 | cd test/dummy
209 | rake db:migrate
210 | rake db:seed
211 | rails g x_editable_rails:install # optional, it generate config example
212 | rails s
213 | ```
214 |
215 | ## Contributing
216 |
217 | 1. Fork it
218 | 2. Create your feature branch (`git checkout -b my-new-feature`)
219 | 3. Commit your changes (`git commit -am 'Add some feature'`)
220 | 4. Push to the branch (`git push origin my-new-feature`)
221 | 5. Create new Pull Request
222 |
--------------------------------------------------------------------------------
/vendor/assets/javascripts/editable/inputs-ext/bootstrap-wysihtml5.js:
--------------------------------------------------------------------------------
1 | !function($, wysi) {
2 | "use strict";
3 |
4 | var tpl = {
5 | "font-styles": function(locale, options) {
6 | var size = (options && options.size) ? ' btn-'+options.size : '';
7 | return "" +
8 | "" +
9 | " " + locale.font_styles.normal + " " +
10 | "" +
11 | "" +
17 | "";
18 | },
19 |
20 | "emphasis": function(locale, options) {
21 | var size = (options && options.size) ? ' btn-'+options.size : '';
22 | return "" +
23 | "" +
28 | "";
29 | },
30 |
31 | "lists": function(locale, options) {
32 | var size = (options && options.size) ? ' btn-'+options.size : '';
33 | return "" +
34 | "" +
35 | "
" +
36 | "
" +
37 | "
" +
38 | "
" +
39 | "
" +
47 | "" +
51 | "
" +
52 | "" +
53 | "
" +
54 | "" +
58 | "
" +
67 | "" +
71 | "
" +
72 | "" +
73 | "
" +
74 | "" +
78 | "
awesome
comment!