activeadmin_dynamic_fields 0.2.8 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b1a35cc8fb49264ee130c088dd680bde833cecdcb1fd5f2544b7111369c4f74
-  data.tar.gz: 5d72305f05e98728adcb05d03e2d3ffea6fc3c5707544de12c3a045691d45467
+  metadata.gz: 1af148e7cd9d7704c902e17fdb022acbb1c0c2012bf423f9be6e4ae92cdb6f5f
+  data.tar.gz: ad108b3ae42ba846251dcab61487e68809e4cfaf21e453039a7ad3cb0cb22bd8
 SHA512:
-  metadata.gz: a334732f34e9636c60dd6ba376fe0331fc7dbfddb50e5e7c78b7b294758381dacd85ca51a6a61b85b936a937e4d140a467b2f6fd6baf4952599878cbc7ffbfac
-  data.tar.gz: c9dd461761fff9e2194368ff22404fca87c688399798ea67ab17bdd292c5dcd2aff7eedd7f16fe44b30a17bc3eb4d76d43ada098ba4b25f57557844d9807a6e6
+  metadata.gz: 0c76b4cb42b90bf7c88c4cafbbab1bb40f8fa61efbaa8acef0cb3230c6dd2f3eea3b0bf88413431c2a275538ef7c1f37aa0463a2445f0e2a61eae17b189955b5
+  data.tar.gz: d09b1cfe869567e5634236a31385608800375be5cef690b5ee1c420d2cba8a5018f642c5bec0d2996078338a8bdfa0499c02d839e264b9704fb5581e5659d44d

data/README.md

@@ -1,27 +1,26 @@
-# ActiveAdmin Dynamic Fields [![Gem Version](https://badge.fury.io/rb/activeadmin_dynamic_fields.svg)](https://badge.fury.io/rb/activeadmin_dynamic_fields)
+# ActiveAdmin Dynamic Fields [![Gem Version](https://badge.fury.io/rb/activeadmin_dynamic_fields.svg)](https://badge.fury.io/rb/activeadmin_dynamic_fields) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_dynamic_fields.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_dynamic_fields)
 
-An Active Admin plugin to add dynamic behaviors to fields.
+An Active Admin plugin to add dynamic behaviors to some fields.
 
 Features:
-
 - set conditional checks on fields
-- trigger some actions on other fields
+- trigger actions on target elements
 - inline field editing
 - create links to load some content in a dialog
 
 The easiest way to show how this plugin works is looking the examples [below](#examples).
 
 ## Install
-
 - Add to your Gemfile: `gem 'activeadmin_dynamic_fields'`
 - Execute bundle
 - Add at the end of your ActiveAdmin javascripts (_app/assets/javascripts/active_admin.js_):
-`//= require activeadmin/dynamic_fields`
 
-## Options
+```js
+//= require activeadmin/dynamic_fields
+```
 
+## Options
 Options are passed to fields using *input_html* parameter as *data* attributes:
-
 - **data-if**: check a condition, values:
   + **checked**: check if a checkbox is checked
   + **not_checked**: check if a checkbox is not checked
@@ -32,7 +31,7 @@ Options are passed to fields using *input_html* parameter as *data* attributes:
 - **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-action**: the action to trigger, values:
+- **data-then**: the action to trigger (alias **data-action**), values:
   + **hide**: hides elements
   + **slide**: hides elements (using sliding)
   + **fade**: hides elements (using fading)
@@ -42,16 +41,17 @@ Options are passed to fields using *input_html* parameter as *data* attributes:
 - **data-function**: check the return value of a custom function
 - **data-arg**: argument passed to the custom set function (as array of strings)
 
+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).
+
 ## Examples
 
 ### Dynamic fields examples
-
 - A checkbox that hides other fields if is checked (ex. model *Article*):
 
 ```rb
 form do |f|
   f.inputs 'Article' do
-    f.input :published, input_html: { data: { if: 'checked', action: 'hide', target: '.grp1' } }
+    f.input :published, input_html: { data: { if: 'checked', then: 'hide', target: '.grp1' } }
     f.input :online_date, wrapper_html: { class: 'grp1' }
     f.input :draft_notes, wrapper_html: { class: 'grp1' }
   end
@@ -61,31 +61,31 @@ end
 
 - Add 3 classes (*first*, *second*, *third*) if a checkbox is not checked:
 
-`f.input :published, input_html: { data: { if: 'not_checked', action: 'addClass first second third', target: '.grp1' } }`
+`f.input :published, input_html: { data: { if: 'not_checked', then: 'addClass first second third', target: '.grp1' } }`
 
 - Set another field value if a string field is blank:
 
-`f.input :title, input_html: { data: { if: 'blank', action: 'setValue 10', target: '#article_position' } }`
+`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-action': 'slide', 'data-target': '#article_description_input' }`
+`f.input :title, input_html: { 'data-function': 'title_empty', 'data-then': 'slide', 'data-target': '#article_description_input' }`
 
 ```js
-function title_empty( el ) {
-  return ( $('#article_title').val().trim() === '' );
+function title_empty(el) {
+  return ($('#article_title').val().trim() === '');
 }
 ```
 
 - Call a callback function as action:
 
-`f.input :published, input_html: { data: { if: 'checked', action: 'callback set_title', args: '["Unpublished !"]' } }`
+`f.input :published, input_html: { data: { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' } }`
 
 ```js
-function set_title( args ) {
-  if( $('#article_title').val().trim() === '' ) {
-    $('#article_title').val( args[0] );
-    $('#article_title').trigger( 'change' );
+function set_title(args) {
+  if($('#article_title').val().trim() === '') {
+    $('#article_title').val(args[0]);
+    $('#article_title').trigger('change');
   }
 }
 ```
@@ -95,15 +95,14 @@ function set_title( args ) {
 `f2.input :category, as: :select, collection: [ [ 'Cat 1', 'cat1' ], [ 'Cat 2', 'cat2' ], [ 'Cat 3', 'cat3' ] ], input_html: { 'data-function': 'on_change_category' }`
 
 ```js
-function on_change_category( el ) {
-  var target = el.closest( 'fieldset' ).find( '.pub' );
-  target.prop( 'checked', ( el.val() == 'cat2' ) );
-  target.trigger( 'change' );
+function on_change_category(el) {
+  var target = el.closest('fieldset').find('.pub');
+  target.prop('checked', (el.val() == 'cat2');
+  target.trigger('change');
 }
 ```
 
 ### Inline editing examples
-
 - Prepare a custom member action to save data, an *update* helper function is available (third parameter is optional, allow to filter using strong parameters):
 
 ```rb
@@ -141,7 +140,6 @@ end
 ```
 
 ### Dialog example
-
 Example with 2 models: *Author* and *Article*
 
 Prepare the content dialog - in Active Admin Author config:
@@ -185,15 +183,13 @@ end
 The link url is loaded via AJAX before opening the dialog.
 
 ## Do you like it? Star it!
-
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 
 Take a look at [other ActiveAdmin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
 
 ## Contributors
-
 - [Mattia Roccoberton](http://blocknot.es): author
+- The good guys that opened issues and pull requests from time to time
 
 ## License
-
-[MIT](LICENSE.txt)
+The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

data/app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -1,209 +1,199 @@
-// Evaluate a condition
-function dfEvalCondition(el, args, on_change) {
-  if(args.fn) {
-    if(args.fn && window[args.fn]) return !window[args.fn](el);
-    else console.log('Warning - activeadmin_dynamic_fields: ' + args.fn + '() not available [1]');
-  }
-  else if(args.if == 'checked') {
-    return el.is(':checked');
-  }
-  else if(args.if == 'not_checked') {
-    return !el.is(':checked');
-  }
-  else if(args.if == 'blank') {
-    return el.val().length === 0 || !el.val().trim();
-  }
-  else if(args.if == 'not_blank') {
-    return el.val().length !== 0 && el.val().trim();
-  }
-  else if(args.if == 'changed') {
-    return on_change;
-  }
-  else if(args.eq) {
-    return el.val() == args.eq;
-  }
-  else if(args.not) {
-    return el.val() != args.not;
-  }
-  return undefined;
-}
-
-// Prepare a field
-function dfSetupField(el) {
-  var action = el.data('action');
-  var target, args = {};
-  args.if = el.data('if');
-  args.eq = el.data('eq');
-  args.not = el.data('not');
-  args.fn = el.data('function');
-  if(el.data('target')) target = el.closest('fieldset').find(el.data('target'));  // closest find for has many associations
-  else if(el.data('gtarget')) target = $(el.data('gtarget'));
-  if(action == 'hide') {
-    if(dfEvalCondition(el, args, false)) target.hide();
-    else target.show();
-    el.on('change', function(event) {
-      if(dfEvalCondition($(this), args, true)) target.hide();
-      else target.show();
-    });
-  }
-  else if(action == 'slide') {
-    if(dfEvalCondition(el, args, false)) target.slideDown();
-    else target.slideUp();
-    el.on('change', function(event) {
-      if(dfEvalCondition($(this), args, true)) target.slideDown();
-      else target.slideUp();
-    });
+(function () {
+  'use strict'
+
+  const ACTIONS = {
+    addClass: (el, name) => el.addClass(name),
+    callback: (el, name) => {
+      if (window[name]) window[name](el.data('args'))
+      else {
+        el.attr('data-df-errors', 'callback function not found')
+        console.warn(`activeadmin_dynamic_fields callback function not found: ${name}`)
+      }
+    },
+    fade: el => el.fadeOut(),
+    hide: el => el.hide(),
+    setValue: (el, value) => dfSetValue(el, value),
+    slide: el => el.slideUp()
   }
-  else if(action == 'fade') {
-    if(dfEvalCondition(el, args, false)) target.fadeIn();
-    else target.fadeOut();
-    el.on('change', function(event) {
-      if(dfEvalCondition($(this), args, true)) target.fadeIn();
-      else target.fadeOut();
-    });
+
+  const CONDITIONS = {
+    blank: el => el.val().length === 0 || !el.val().trim(),
+    changed: _el => true,
+    checked: el => el.is(':checked'),
+    eq: (el, value) => el.val() == value,
+    not: (el, value) => el.val() != value,
+    not_blank: el => el.val().trim(),
+    not_checked: el => !el.is(':checked')
   }
-  else if(action.substr(0, 8) == 'setValue') {
-    var val = action.substr(8).trim();
-    if(dfEvalCondition(el, args, false)) dfSetValue(target, val);
-    el.on('change', function(event) {
-      if(dfEvalCondition($(this), args, true)) dfSetValue(target, val);
-    });
+
+  const REVERSE_ACTIONS = {
+    addClass: (el, name) => el.removeClass(name),
+    fade: el => el.fadeIn(),
+    hide: el => el.show(),
+    slide: el => el.slideDown()
   }
-  else if(action.substr(0, 8) == 'callback') {
-    var cb = action.substr(8).trim();
-    if(cb && window[cb]) {
-      if(dfEvalCondition(el, args, false)) window[cb](el.data('args'));
-      el.on('change', function(event) {
-        if(dfEvalCondition($(this), args, true)) window[cb](el.data('args'));
-      });
+
+  function dfEvalCondition(el) {
+    let condition = CONDITIONS[el.data('if')]
+    let condition_arg
+
+    if(!condition && el.data('eq')) {
+      condition = CONDITIONS['eq']
+      condition_arg = el.data('eq')
     }
-    else console.log('Warning - activeadmin_dynamic_fields: ' + cb + '() not available [2]');
+    if(!condition && el.data('not')) {
+      condition = CONDITIONS['not']
+      condition_arg = el.data('not')
+    }
+    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')}`)
+      }
+    }
+
+    return [condition, condition_arg]
   }
-  else if(action.substr(0, 8) == 'addClass') {
-    var classes = action.substr(8).trim();
-    if(dfEvalCondition(el, args, false)) target.removeClass(classes);
-    else target.addClass(classes);
-    el.on('change', function(event) {
-      if(dfEvalCondition($(this), args, true)) target.removeClass(classes);
-      else target.addClass(classes);
-    });
+
+  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)
+    })
   }
-  else if(args.fn) {  // function without action
-    dfEvalCondition(el, args, false);
-    el.on('change', function(event) {
-      dfEvalCondition(el, args, 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')
   }
-}
-
-// Set the value of an element
-function dfSetValue(el, val) {
-  if(el.attr('type') != 'checkbox') el.val(val);
-  else el.prop('checked', val == '1');
-  el.trigger('change');
-}
-
-// Inline update - must be called binded on the editing element
-function dfUpdateField() {
-  if($(this).data('loading') != '1') {
-    $(this).data('loading', '1');
-    var _this = $(this);
-    var type = $(this).data('field-type');
-    var new_value;
-    if(type == 'boolean') new_value = !$(this).data('field-value');
-    else if(type == 'select') new_value = $(this).val();
-    else new_value = $(this).text();
-    var data = {};
-    data[$(this).data('field')] = new_value;
-    $.ajax({
-      context: _this,
-      data: { data: data },
-      method: 'POST',
-      url: $(this).data('save-url'),
-      complete: function(req, status) {
-        $(this).data('loading', '0');
-      },
-      success: function(data, status, req) {
-        if(data.status == 'error') {
-          if($(this).data('show-errors')) {
-            var result = '';
-            var message = data.message;
-            for(var key in message) {
-              if(typeof(message[key]) === 'object') {
-                if(result) result += ' - ';
-                result += key + ': ' + message[key].join('; ');
+
+  // Inline update - must be called binded on the editing element
+  function dfUpdateField() {
+    if ($(this).data('loading') != '1') {
+      $(this).data('loading', '1');
+      let _this = $(this);
+      let type = $(this).data('field-type');
+      let new_value;
+      if (type == 'boolean') new_value = !$(this).data('field-value');
+      else if (type == 'select') new_value = $(this).val();
+      else new_value = $(this).text();
+      let data = {};
+      data[$(this).data('field')] = new_value;
+      $.ajax({
+        context: _this,
+        data: { data: data },
+        method: 'POST',
+        url: $(this).data('save-url'),
+        complete: function (req, status) {
+          $(this).data('loading', '0');
+        },
+        success: function (data, status, req) {
+          if (data.status == 'error') {
+            if ($(this).data('show-errors')) {
+              let result = '';
+              let message = data.message;
+              for (let key in message) {
+                if (typeof (message[key]) === 'object') {
+                  if (result) result += ' - ';
+                  result += key + ': ' + message[key].join('; ');
+                }
               }
+              if (result) alert(result);
             }
-            if(result) alert(result);
           }
-        }
-        else {
-          $(this).data('field-value', new_value);
-          if($(this).data('content')) {
-            var old_text = $(this).text();
-            var old_class = $(this).attr('class');
-            var content = $($(this).data('content'));
-            $(this).text(content.text());
-            $(this).attr('class', content.attr('class'));
-            content.text(old_text);
-            content.attr('class', old_class);
-            $(this).data('content', content);
+          else {
+            $(this).data('field-value', new_value);
+            if ($(this).data('content')) {
+              let old_text = $(this).text();
+              let old_class = $(this).attr('class');
+              let content = $($(this).data('content'));
+              $(this).text(content.text());
+              $(this).attr('class', content.attr('class'));
+              content.text(old_text);
+              content.attr('class', old_class);
+              $(this).data('content', content);
+            }
           }
         }
-      }
-    });
-  }
-}
-
-// Init
-$(document).ready(function() {
-  // Setup dynamic fields
-  $('.active_admin .input [data-if], .active_admin .input [data-function], .active_admin .input [data-eq], .active_admin .input [data-not]').each(function() {
-    dfSetupField($(this));
-  });
-  // Setup dynamic fields for has many associations
-  $('.active_admin .has_many_container').on('has_many_add:after', function(e, fieldset, container) {
-    $('.active_admin .input [data-if], .active_admin .input [data-function], .active_admin .input [data-eq], .active_admin .input [data-not]').each(function() {
-      dfSetupField($(this));
-    });
-  });
-  // Set dialog icon link
-  $('.active_admin [data-df-icon]').each(function() {
-    $(this).append(' »');  // ' •'
-  });
-  // Open content in dialog
-  $('.active_admin [data-df-dialog]').on('click', function(event) {
-    event.preventDefault();
-    $(this).blur();
-    if($('#df-dialog').data('loading') != '1') {
-      $('#df-dialog').data('loading', '1');
-      if($('#df-dialog').length == 0) $('body').append('<div id="df-dialog"></div>');
-      var title = $(this).attr('title');
-      $.ajax({
-        url: $(this).attr('href'),
-        complete: function(req, status) {
-          $('#df-dialog').data('loading', '0');
-        },
-        success: function(data, status, req) {
-          if(title) $('#df-dialog').attr('title', title);
-          $('#df-dialog').html(data);
-          $('#df-dialog').dialog({ modal: true });
-        },
       });
     }
-  });
-  // Inline editing
-  $('[data-field][data-field-type="boolean"][data-save-url]').each(function() {
-    $(this).on('click', $.proxy(dfUpdateField, $(this)));
-  });
-  $('[data-field][data-field-type="string"][data-save-url]').each(function() {
-    $(this).data('field-value', $(this).text());
-    var fnUpdate = $.proxy(dfUpdateField, $(this));
-    $(this).on('blur', function() {
-      if($(this).data('field-value') != $(this).text()) fnUpdate();
-    });
-  });
-  $('[data-field][data-field-type="select"][data-save-url]').each(function() {
-    $(this).on('change', $.proxy(dfUpdateField, $(this)));
-  });
-});
+  }
+
+  // Init
+  $(document).ready(function () {
+    // 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))
+    })
+
+    // Setup dynamic fields for associations
+    $('.active_admin .has_many_container').on('has_many_add:after', () => {
+      $(selectors).each(function () {
+        dfInitField($(this))
+      })  
+    })
+
+    // Set dialog icon link
+    $('.active_admin [data-df-icon]').each(function () {
+      $(this).append(' &raquo;')
+    })
+
+    // Open content in dialog
+    $('.active_admin [data-df-dialog]').on('click', function (event) {
+      event.preventDefault()
+      $(this).blur()
+      if ($('#df-dialog').data('loading') != '1') {
+        $('#df-dialog').data('loading', '1')
+        if ($('#df-dialog').length == 0) $('body').append('<div id="df-dialog"></div>')
+        let title = $(this).attr('title')
+        $.ajax({
+          url: $(this).attr('href'),
+          complete: function (req, status) {
+            $('#df-dialog').data('loading', '0')
+          },
+          success: function (data, status, req) {
+            if (title) $('#df-dialog').attr('title', title)
+            $('#df-dialog').html(data)
+            $('#df-dialog').dialog({ modal: true })
+          },
+        })
+      }
+    })
+
+    // Inline editing
+    $('[data-field][data-field-type="boolean"][data-save-url]').each(function () {
+      $(this).on('click', $.proxy(dfUpdateField, $(this)))
+    })
+    $('[data-field][data-field-type="string"][data-save-url]').each(function () {
+      $(this).data('field-value', $(this).text())
+      let fnUpdate = $.proxy(dfUpdateField, $(this))
+      $(this).on('blur', function () {
+        if ($(this).data('field-value') != $(this).text()) fnUpdate()
+      })
+    })
+    $('[data-field][data-field-type="select"][data-save-url]').each(function () {
+      $(this).on('change', $.proxy(dfUpdateField, $(this)))
+    })
+  })
+})()

data/lib/activeadmin/dynamic_fields/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_dynamic_fields
 version: !ruby/object:Gem::Version
-  version: 0.2.8
+  version: 0.3.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-28 00:00:00.000000000 Z
+date: 2020-09-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -109,33 +109,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 4.0.1
 - !ruby/object:Gem::Dependency
-  name: selenium-webdriver
+  name: rubocop
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.142.7
+        version: 0.90.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.142.7
+        version: 0.90.0
 - !ruby/object:Gem::Dependency
-  name: simplecov
+  name: selenium-webdriver
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.19.0
+        version: 3.142.7
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.19.0
+        version: 3.142.7
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement