Merge pull request #8 from blocknotes/feature/js-refactoring-3

JS refactoring (3)

Author: blocknotes

README.md

@@ -20,7 +20,9 @@ The easiest way to show how this plugin works is looking the examples [below](#e
 ```
 
 ## Options
-Options are passed to fields using *input_html* parameter as *data* attributes:
+Options are passed to fields using *input_html* parameter as *data* attributes.
+
+Conditions:
 - **data-if**: check a condition, values:
   + **checked**: check if a checkbox is checked
   + **not_checked**: check if a checkbox is not checked
@@ -29,17 +31,22 @@ Options are passed to fields using *input_html* parameter as *data* attributes:
   + **changed**: check if the value of an input is changed (dirty)
 - **data-eq**: check if a field has a specific value
 - **data-not**: check if a field hasn't a specific value
-- **data-target**: target css selector (from parent fieldset, look for the closest match)
-- **data-gtarget**: target css selector globally
-- **data-then**: the action to trigger (alias **data-action**), values:
+- **data-function**: check the return value of a custom function
+
+Actions:
+- **data-then**: action to trigger (alias **data-action**), values:
   + **hide**: hides elements
   + **slide**: hides elements (using sliding)
   + **fade**: hides elements (using fading)
   + **addClass**: adds classes
   + **setValue**: set a value
-  + **callback**: call a function
-- **data-function**: check the return value of a custom function
-- **data-arg**: argument passed to the custom set function (as array of strings)
+  + **callback**: call a function (with arguments: **data-args**)
+- **data-else**: action to trigger when the condition check is not true
+- **data-args**: arguments passed to the callback function
+
+Targets:
+- **data-target**: target css selector (from parent fieldset, look for the closest match)
+- **data-gtarget**: target css selector globally
 
 A check condition or a custom check function are required. A trigger action is required too, unless you are using a custom function (in that case it is optional).
 
@@ -59,17 +66,25 @@ form do |f|
 end
 ```
 
-- Add 3 classes (*first*, *second*, *third*) if a checkbox is not checked:
+- Add 3 classes (*first*, *second*, *third*) if a checkbox is not checked, else add "forth" class:
 
-`f.input :published, input_html: { data: { if: 'not_checked', then: 'addClass first second third', target: '.grp1' } }`
+```rb
+data = { if: 'not_checked', then: 'addClass first second third', target: '.grp1', else: 'addClass forth' }
+f.input :published, input_html: { data: data }
+```
 
 - Set another field value if a string field is blank:
 
-`f.input :title, input_html: { data: { if: 'blank', then: 'setValue 10', target: '#article_position' } }`
+```rb
+f.input :title, input_html: { data: { if: 'blank', then: 'setValue 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):
 
-`f.input :title, input_html: { 'data-function': 'title_empty', 'data-then': 'slide', 'data-target': '#article_description_input' }`
+```rb
+attrs = { 'data-function': 'title_empty', 'data-then': 'slide', 'data-target': '#article_description_input' }
+f.input :title, input_html: attrs
+```
 
 ```js
 function title_empty(el) {
@@ -79,7 +94,10 @@ function title_empty(el) {
 
 - Call a callback function as action:
 
-`f.input :published, input_html: { data: { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' } }`
+```rb
+data = { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' }
+f.input :published, input_html: { data: data }
+```
 
 ```js
 function set_title(args) {
@@ -92,7 +110,10 @@ function set_title(args) {
 
 - Custom function without action:
 
-`f2.input :category, as: :select, collection: [ [ 'Cat 1', 'cat1' ], [ 'Cat 2', 'cat2' ], [ 'Cat 3', 'cat3' ] ], input_html: { 'data-function': 'on_change_category' }`
+```rb
+collection = [['Cat 1', 'cat1'], ['Cat 2', 'cat2'], ['Cat 3', 'cat3']]
+f2.input :category, as: :select, collection: collection, input_html: { 'data-function': 'on_change_category' }
+```
 
 ```js
 function on_change_category(el) {

app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -12,7 +12,11 @@
     },
     fade: el => el.fadeOut(),
     hide: el => el.hide(),
-    setValue: (el, value) => dfSetValue(el, value),
+    setValue: (el, value) => {
+      if (el.attr('type') == 'checkbox') el.prop('checked', value == '1')
+      else el.val(value)
+      el.trigger('change')
+    },
     slide: el => el.slideUp()
   }
 
@@ -33,58 +37,65 @@
     slide: el => el.slideDown()
   }
 
-  function dfEvalCondition(el) {
-    let condition = CONDITIONS[el.data('if')]
-    let condition_arg
+  class Field {
+    constructor(el) {
+      const action = el.data('then') || el.data('action') || ''
+      const action_name = action.split(' ', 1)[0]
+      const else_action = el.data('else') || ''
+      const else_action_name = else_action.split(' ', 1)[0]
+
+      this.el = el
+      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.condition = CONDITIONS[el.data('if')]
+      if (!this.condition && el.data('eq')) {
+        [this.condition, this.condition_arg] = [CONDITIONS['eq'], el.data('eq')]
+      }
+      if (!this.condition && el.data('not')) {
+        [this.condition, this.condition_arg] = [CONDITIONS['not'], el.data('not')]
+      }
+      this.custom_function = el.data('function')
+      if (!this.condition && this.custom_function) {
+        this.condition = window[this.custom_function]
+        if (!this.condition) {
+          el.attr('data-df-errors', 'custom function not found')
+          console.warn(`activeadmin_dynamic_fields custom function not found: ${this.custom_function}`)
+        }
+      }
 
-    if(!condition && el.data('eq')) {
-      condition = CONDITIONS['eq']
-      condition_arg = el.data('eq')
-    }
-    if(!condition && el.data('not')) {
-      condition = CONDITIONS['not']
-      condition_arg = el.data('not')
+      // closest find for has many associations
+      if (el.data('target')) this.target = el.closest('fieldset').find(el.data('target'))
+      else if (el.data('gtarget')) this.target = $(el.data('gtarget'))
+      if (action_name == 'callback') this.target = el
     }
-    if(!condition && el.data('function')) {
-      condition = window[el.data('function')]
-      if(!condition) {
-        el.attr('data-df-errors', 'custom function not found')
-        console.warn(`activeadmin_dynamic_fields custom function not found: ${el.data('function')}`)
+
+    apply(el) {
+      if (this.condition(el, this.condition_arg)) {
+        if (this.else_reverse_action) this.else_reverse_action(this.target, this.else_action_arg)
+        this.action(this.target, this.action_arg)
+      }
+      else {
+        if (this.reverse_action) this.reverse_action(this.target, this.action_arg)
+        if (this.else_action) this.else_action(this.target, this.else_action_arg)
       }
     }
 
-    return [condition, condition_arg]
-  }
+    is_valid() {
+      if (!this.condition) return false
+      if (!this.action && !this.custom_function) return false
 
-  function dfInitField(el) {
-    const [condition, condition_arg] = dfEvalCondition(el)
-    const action_name = (el.data('then') || el.data('action') || '').substr(0, 8)
-    const action = ACTIONS[action_name]
-    const arg = (el.data('then') || el.data('action') || '').substr(9)
-    const reverse_action = REVERSE_ACTIONS[action_name]
-    if (typeof condition === 'undefined') return
-    if (typeof action === 'undefined' && !el.data('function')) return
-
-    // closest find for has many associations
-    let target
-    if (el.data('target')) target = el.closest('fieldset').find(el.data('target'))
-    else if (el.data('gtarget')) target = $(el.data('gtarget'))
-    if (action_name == 'callback') target = el
-
-    if (condition(el, condition_arg) && el.data('if') != 'changed') action(target, arg)
-    else if (reverse_action) reverse_action(target, arg)
-
-    el.on('change', () => {
-      if (condition(el, condition_arg)) action(target, arg)
-      else if (reverse_action) reverse_action(target, arg)
-    })
-  }
+      return true
+    }
 
-  // Set the value of an element
-  function dfSetValue(el, val) {
-    if (el.attr('type') == 'checkbox') el.prop('checked', val == '1')
-    else el.val(val)
-    el.trigger('change')
+    setup() {
+      if (!this.is_valid()) return
+      if (this.el.data('if') != 'changed') this.apply(this.el)
+      this.el.on('change', () => this.apply(this.el))  
+    }
   }
 
   // Inline update - must be called binded on the editing element
@@ -144,14 +155,14 @@
     // Setup dynamic fields
     const selectors = '.active_admin .input [data-if], .active_admin .input [data-eq], .active_admin .input [data-not], .active_admin .input [data-function]'
     $(selectors).each(function () {
-      dfInitField($(this))
+      new Field($(this)).setup()
     })
 
     // Setup dynamic fields for associations
     $('.active_admin .has_many_container').on('has_many_add:after', () => {
       $(selectors).each(function () {
-        dfInitField($(this))
-      })  
+        new Field($(this)).setup()
+      })
     })
 
     // Set dialog icon link

spec/dummy/app/admin/posts.rb

@@ -143,7 +143,9 @@ def add_field(form, name, type, data, override_options = {})
       df302 = { if: 'checked', then: 'addClass 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' }
+      add_field(f, :data_field_321, :boolean, df321)
     end
 
     f.inputs 'Tags' do

spec/system/dynamic_fields_spec.rb

@@ -143,6 +143,13 @@
 
       find('#post_data_field_302').click # checks that using simply "target" will not work
       expect(page).not_to have_css('body.active_admin.red')
+
+      # --- else
+      expect(page).not_to have_css('#post_data_field_321_input label.red')
+      expect(page).to have_css('#post_data_field_321_input label.green')
+      find('#post_data_field_321').click
+      expect(page).to have_css('#post_data_field_321_input label.red')
+      expect(page).not_to have_css('#post_data_field_321_input label.green')
     end
   end