diff --git a/README.md b/README.md index a9b9bd0..d9a5efa 100644 --- a/README.md +++ b/README.md @@ -63,13 +63,14 @@ Actions: + **hide**: hides elements (ex. `"data-then": "hide", "data-target": ".errors"`) + **slide**: hides elements (using sliding) + **fade**: hides elements (using fading) - + **addClass**: adds classes (ex. `"data-then": "addClass red"`) - + **addStyle**: adds some styles (ex. `"data-then": "addStyle color: #fb1; font-size: 12px"`) - + **setText**: set the text of an element (ex. `"data-then": "setText A sample text"`) - + **setValue**: set the value of an input element (ex. `"data-then": "setValue A sample value"`) + + **addClass**: adds classes (ex. `"data-then": "addClass", "data-args": "red"`) + + **addStyle**: adds some styles (ex. `"data-then": "addStyle", "data-args": "color: #fb1; font-size: 12px"`) + + **setText**: set the text of an element (ex. `"data-then": "setText", "data-args": "A sample text"`) + + **setValue**: set the value of an input element (ex. `"data-then": "setValue", "data-args": "A sample value"`) + **callback**: call a function (with arguments: **data-args**) (ex. `"data-then": "callback a_fun"`) +- **data-args**: arguments passed to the triggered action (or to the callback function) - **data-else**: action to trigger when the condition check is not true -- **data-args**: arguments passed to the callback function +- **data-else-args**: arguments passed to the triggered else action Targets: @@ -98,14 +99,14 @@ end - Add 3 classes (*first*, *second*, *third*) if a checkbox is not checked, else add "forth" class: ```rb -data = { if: 'not_checked', then: 'addClass first second third', target: '.grp1', else: 'addClass forth' } +data = { if: 'not_checked', then: 'addClass', args: 'first second third', target: '.grp1', else: 'addClass', 'else-args': 'forth' } f.input :published, input_html: { data: data } ``` - Set another field value if a string field is blank: ```rb -f.input :title, input_html: { data: { if: 'blank', then: 'setValue 10', target: '#article_position' } } +f.input :title, input_html: { data: { if: 'blank', then: 'setValue', args: '10', target: '#article_position' } } ``` - Use a custom function for conditional check (*title_not_empty()* must be available on global scope) (with alternative syntax for data attributes): diff --git a/app/assets/javascripts/activeadmin/dynamic_fields.js b/app/assets/javascripts/activeadmin/dynamic_fields.js index 8f269eb..29c04ba 100644 --- a/app/assets/javascripts/activeadmin/dynamic_fields.js +++ b/app/assets/javascripts/activeadmin/dynamic_fields.js @@ -77,19 +77,27 @@ } evaluateAction() { - const action = this.el.data('then') || this.el.data('action') || '' - const action_name = action.split(' ', 1)[0] - const else_action = this.el.data('else') || '' - const else_action_name = else_action.split(' ', 1)[0] + const dataAction = this.el.data('then') || this.el.data('action') || '' + const actionName = dataAction.split(' ', 1)[0] + const dataElse = this.el.data('else') || '' + const elseActionName = dataElse.split(' ', 1)[0] - this.action = ACTIONS[action_name] - this.action_arg = action.substring(action.indexOf(' ') + 1) - this.reverse_action = REVERSE_ACTIONS[action_name] - this.else_action = ACTIONS[else_action_name] - this.else_action_arg = else_action.substring(else_action.indexOf(' ') + 1) - this.else_reverse_action = REVERSE_ACTIONS[else_action_name] + this.action = ACTIONS[actionName] + if (actionName == 'callback') { + this.action_arg = dataAction.substring(dataAction.indexOf(' ') + 1) + } else { + this.action_arg = this.el.data('args') || dataAction.substring(dataAction.indexOf(' ') + 1) + } + this.reverse_action = REVERSE_ACTIONS[actionName] + this.else_action = ACTIONS[elseActionName] + if (elseActionName == 'callback') { + this.else_action_arg = dataElse.substring(dataElse.indexOf(' ') + 1) + } else { + this.else_action_arg = this.el.data('else-args') || dataElse.substring(dataElse.indexOf(' ') + 1) + } + this.else_reverse_action = REVERSE_ACTIONS[elseActionName] - return action_name + return actionName } evaluateCondition() { diff --git a/spec/dummy/app/admin/posts.rb b/spec/dummy/app/admin/posts.rb index 2d1a2fd..afeb560 100644 --- a/spec/dummy/app/admin/posts.rb +++ b/spec/dummy/app/admin/posts.rb @@ -53,79 +53,79 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {}) f.input :data_test, as: :string # --- if - df111 = { if: 'checked', then: 'addClass red', target: '#post_data_field_111_input label' } + df111 = { if: 'checked', then: 'addClass', args: 'red', target: '#post_data_field_111_input label' } add_field(f, :data_field_111, :boolean, df111) - df112 = { if: '!checked', then: 'addClass red', target: '#post_data_field_112_input label' } + df112 = { if: '!checked', then: 'addClass', args: 'red', target: '#post_data_field_112_input label' } add_field(f, :data_field_112, :boolean, df112) - df121 = { if: 'not_checked', then: 'addClass red', target: '#post_data_field_121_input label' } + df121 = { if: 'not_checked', then: 'addClass', args: 'red', target: '#post_data_field_121_input label' } add_field(f, :data_field_121, :boolean, df121) - df131 = { if: 'blank', then: 'addClass red', target: '#post_data_field_131_input label' } + df131 = { if: 'blank', then: 'addClass', args: 'red', target: '#post_data_field_131_input label' } add_field(f, :data_field_131, :string, df131) - df132 = { if: 'blank', then: 'addClass red', target: '#post_data_field_132_input label' } + df132 = { if: 'blank', then: 'addClass', args: 'red', target: '#post_data_field_132_input label' } add_field(f, :data_field_132, :text, df132) - df141 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_141_input label' } + df141 = { if: 'not_blank', then: 'addClass', args: 'red', target: '#post_data_field_141_input label' } add_field(f, :data_field_141, :string, df141) - df142 = { if: 'not_blank', then: 'addClass red', target: '#post_data_field_142_input label' } + df142 = { if: 'not_blank', then: 'addClass', args: 'red', target: '#post_data_field_142_input label' } add_field(f, :data_field_142, :text, df142) - df151 = { if: 'changed', then: 'addClass red', target: '#post_data_field_151_input label' } + df151 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_151_input label' } add_field(f, :data_field_151, :boolean, df151) - df152 = { if: 'changed', then: 'addClass red', target: '#post_data_field_152_input label' } + df152 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_152_input label' } add_field(f, :data_field_152, :string, df152) - df153 = { if: 'changed', then: 'addClass red', target: '#post_data_field_153_input label' } + df153 = { if: 'changed', then: 'addClass', args: 'red', target: '#post_data_field_153_input label' } add_field(f, :data_field_153, :text, df153) # --- eq - df161 = { eq: '161', then: 'addClass red', target: '#post_data_field_161_input label' } + df161 = { eq: '161', then: 'addClass', args: 'red', target: '#post_data_field_161_input label' } add_field(f, :data_field_161, :string, df161) - df162 = { eq: '162', then: 'addClass red', target: '#post_data_field_162_input label' } + df162 = { eq: '162', then: 'addClass', args: 'red', target: '#post_data_field_162_input label' } add_field(f, :data_field_162, :select, df162, collection: [161, 162, 163]) - df163 = { eq: '163', then: 'addClass red', target: '#post_data_field_163_input label' } + df163 = { eq: '163', then: 'addClass', args: 'red', target: '#post_data_field_163_input label' } add_field(f, :data_field_163, :text, df163) - df164 = { eq: '!164', then: 'addClass red', target: '#post_data_field_164_input label' } + df164 = { eq: '!164', then: 'addClass', args: 'red', target: '#post_data_field_164_input label' } add_field(f, :data_field_164, :string, df164) # --- not - df171 = { not: '171', then: 'addClass red', target: '#post_data_field_171_input label' } + df171 = { not: '171', then: 'addClass', args: 'red', target: '#post_data_field_171_input label' } add_field(f, :data_field_171, :string, df171) - df172 = { not: '172', then: 'addClass red', target: '#post_data_field_172_input label' } + df172 = { not: '172', then: 'addClass', args: 'red', target: '#post_data_field_172_input label' } add_field(f, :data_field_172, :select, df172, collection: [171, 172, 173]) - df173 = { not: '173', then: 'addClass red', target: '#post_data_field_173_input label' } + df173 = { not: '173', then: 'addClass', args: 'red', target: '#post_data_field_173_input label' } add_field(f, :data_field_173, :text, df173) # --- match - df181 = { match: 'Something\s', then: 'addClass red', target: '#post_data_field_181_input label' } + df181 = { match: 'Something\s', then: 'addClass', args: 'red', target: '#post_data_field_181_input label' } add_field(f, :data_field_181, :string, df181) # --- mismatch - df191 = { mismatch: '^\d+$', then: 'addClass red', target: '#post_data_field_191_input label' } + df191 = { mismatch: '^\d+$', then: 'addClass', args: 'red', target: '#post_data_field_191_input label' } add_field(f, :data_field_191, :string, df191) # --- function - df201 = { function: 'test_fun', then: 'addClass red', target: '#post_data_field_201_input label' } + df201 = { function: 'test_fun', then: 'addClass', args: 'red', target: '#post_data_field_201_input label' } add_field(f, :data_field_201, :string, df201) - df202 = { function: 'missing_fun', then: 'addClass red', target: '#post_data_field_202_input label' } + df202 = { function: 'missing_fun', then: 'addClass', args: 'red', target: '#post_data_field_202_input label' } add_field(f, :data_field_202, :string, df202) df203 = { function: 'test_fun2' } add_field(f, :data_field_203, :boolean, df203) # --- addClass - df211 = { if: 'checked', then: 'addClass red', target: '#post_data_field_211_input label' } + df211 = { if: 'checked', then: 'addClass', args: 'red', target: '#post_data_field_211_input label' } add_field(f, :data_field_211, :boolean, df211) # --- callback @@ -136,7 +136,7 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {}) add_field(f, :data_field_222, :boolean, df222) # --- setValue - df231 = { if: 'checked', then: 'setValue data test', target: '#post_data_test' } + df231 = { if: 'checked', then: 'setValue', args: 'data test', target: '#post_data_test' } add_field(f, :data_field_231, :boolean, df231) # --- hide @@ -152,23 +152,23 @@ def add_field(form, name, type, data, override_options = {}, extra_attrs = {}) add_field(f, :data_field_261, :boolean, df261) # --- setText - df271 = { if: 'checked', then: 'setText data test', target: '#post_data_field_271_input .inline-hints' } + df271 = { if: 'checked', then: 'setText', args: 'data test', target: '#post_data_field_271_input .inline-hints' } add_field(f, :data_field_271, :boolean, df271) # --- addStyle - df281 = { if: 'checked', then: 'addStyle font-size: 10px; padding: 3px', target: '#post_data_field_281' } + df281 = { if: 'checked', then: 'addStyle', args: 'font-size: 10px; padding: 3px', target: '#post_data_field_281' } add_field(f, :data_field_281, :boolean, df281, {}, { 'style': 'margin-right: 20px' }) # --- gtarget - df301 = { if: 'checked', then: 'addClass red', gtarget: 'body.active_admin' } + df301 = { if: 'checked', then: 'addClass', args: 'red', gtarget: 'body.active_admin' } add_field(f, :data_field_301, :boolean, df301) # This will not work - here only for testing: - df302 = { if: 'checked', then: 'addClass red', target: 'body.active_admin' } + df302 = { if: 'checked', then: 'addClass', args: 'red', target: 'body.active_admin' } add_field(f, :data_field_302, :boolean, df302) # --- else - df321 = { if: 'checked', then: 'addClass red', target: '#post_data_field_321_input label', else: 'addClass green' } + df321 = { if: 'checked', then: 'addClass', args: 'red', target: '#post_data_field_321_input label', else: 'addClass', "else-args": "green" } add_field(f, :data_field_321, :boolean, df321) end diff --git a/spec/system/dynamic_fields_spec.rb b/spec/system/dynamic_fields_spec.rb index d118665..747ec2d 100644 --- a/spec/system/dynamic_fields_spec.rb +++ b/spec/system/dynamic_fields_spec.rb @@ -69,7 +69,7 @@ def test_change_css(target, options = {}) it 'checks the conditions and actions', retry: 3 do # rubocop:disable RSpec/ExampleLength, RSpec/MultipleExpectations visit "/admin/posts/#{post.id}/edit" - expect(page).to have_css('#post_data_field_111[data-if="checked"][data-then="addClass red"][data-target="#post_data_field_111_input label"]') + expect(page).to have_css('#post_data_field_111[data-if="checked"][data-then="addClass"][data-args="red"][data-target="#post_data_field_111_input label"]') # --- if spec_message('check data-if condition')