activeadmin_dynamic_fields 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1af148e7cd9d7704c902e17fdb022acbb1c0c2012bf423f9be6e4ae92cdb6f5f
-  data.tar.gz: ad108b3ae42ba846251dcab61487e68809e4cfaf21e453039a7ad3cb0cb22bd8
+  metadata.gz: bf72bdd2f498f04dd656b044b1b711cd1e4962ad98d9190807ac9b4bfa423ba0
+  data.tar.gz: 036c3c43e6b00ed99b900f21216b824b00dccbf3a3d871cdfa331080f30eceb3
 SHA512:
-  metadata.gz: 0c76b4cb42b90bf7c88c4cafbbab1bb40f8fa61efbaa8acef0cb3230c6dd2f3eea3b0bf88413431c2a275538ef7c1f37aa0463a2445f0e2a61eae17b189955b5
-  data.tar.gz: d09b1cfe869567e5634236a31385608800375be5cef690b5ee1c420d2cba8a5018f642c5bec0d2996078338a8bdfa0499c02d839e264b9704fb5581e5659d44d
+  metadata.gz: 94007fc44295a8e251f011ef78884c31a03904e53d264bc9b5aa716645c268a0c3a7343f75b0831f790a36b14f1dcdb03ea6a87fb8e819accb36b871c5617f14
+  data.tar.gz: bc6beec26ce12eb2f40c70cc8b9fd12f3cdd416ecf735380fd77343d395e7e7b3f2665cfc2fed8a8339651dcbc12db1eaaae3ce7c6019b5cf6bdf133c4390e31

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2017 Mattia Roccoberton
+Copyright (c) 2017-2020 Mattia Roccoberton
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

data/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) {

data/Rakefile

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-require 'bundler/gem_tasks'
+require "bundler/gem_tasks"

data/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

data/lib/activeadmin/dynamic_fields/version.rb

@@ -2,6 +2,6 @@
 
 module ActiveAdmin
   module DynamicFields
-    VERSION = '0.3.0'
+    VERSION = '0.4.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_dynamic_fields
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-17 00:00:00.000000000 Z
+date: 2020-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin