activeadmin_dynamic_fields 0.2.8 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b1a35cc8fb49264ee130c088dd680bde833cecdcb1fd5f2544b7111369c4f74
-  data.tar.gz: 5d72305f05e98728adcb05d03e2d3ffea6fc3c5707544de12c3a045691d45467
+  metadata.gz: '019f2b81ed1552f13f57b73141860957f4869b10de1f018a289aa8724cc23ec1'
+  data.tar.gz: 4ed1bb60f5b1ddef1a3d870296d8548faa18cc36db5adadb8271f0c655c769f6
 SHA512:
-  metadata.gz: a334732f34e9636c60dd6ba376fe0331fc7dbfddb50e5e7c78b7b294758381dacd85ca51a6a61b85b936a937e4d140a467b2f6fd6baf4952599878cbc7ffbfac
-  data.tar.gz: c9dd461761fff9e2194368ff22404fca87c688399798ea67ab17bdd292c5dcd2aff7eedd7f16fe44b30a17bc3eb4d76d43ada098ba4b25f57557844d9807a6e6
+  metadata.gz: b07cc4e73b801ef79ee52b52a6c82117d7e966a2f1eadb0e415e00c608456c02f2c14694c2fc41037ad381c9c0c3bfbf1c0ed96c0c6d13bd0ce3335c38dc1e11
+  data.tar.gz: c0aa33df12ef6ed16927a49bb9b93d0fcffeffc6f20b661f11edb350544f12e550f90fd5fa5870a43154c0097995bbb02f2f80f24e1ff821eddc2d0fa60e613d

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

@@ -1,57 +1,68 @@
-# 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 are passed to fields using *input_html* parameter as *data* attributes:
+## Options
+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
+  + **checked**: check if a checkbox is checked (ex. `"data-if": "checked"`)
   + **not_checked**: check if a checkbox is not checked
   + **blank**: check if a field is blank
   + **not_blank**: check if a field is not blank
   + **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-action**: the action to trigger, values:
-  + **hide**: hides elements
+- **data-eq**: check if a field has a specific value (ex. `"data-eq": "42"`)
+- **data-not**: check if a field has not a specific value
+- **data-match**: check if a field match a regexp
+- **data-mismatch**: check if a field doesn't match a regexp (ex. `"data-mismatch": "^\d+$"`)
+- **data-function**: check the return value of a custom function (ex. `"data-function": "my_check"`)
+
+Actions:
+- **data-then**: action to trigger (alias **data-action**), values:
+  + **hide**: hides elements (ex. `"data-then": "hide", "data-target": ".errors"`)
   + **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)
+  + **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"`)
+  + **callback**: call a function (with arguments: **data-args**) (ex. `"data-then": "callback a_fun"`)
+- **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).
 
 ## 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
@@ -59,51 +70,64 @@ 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', action: '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', action: '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-action': '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 ) {
-  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 !"]' } }`
+```rb
+data = { if: 'checked', then: 'callback set_title', args: '["Unpublished !"]' }
+f.input :published, input_html: { data: data }
+```
 
 ```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');
   }
 }
 ```
 
 - 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 ) {
-  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 +165,6 @@ end
 ```
 
 ### Dialog example
-
 Example with 2 models: *Author* and *Article*
 
 Prepare the content dialog - in Active Admin Author config:
@@ -185,15 +208,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/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

@@ -1,209 +1,241 @@
-// 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),
+    addStyle: (el, extra_style) => {
+      let style = (el.attr('style') || '').trim()
+      if (!style.includes(extra_style)) {
+        if (style) style = style.replace(/;$/, '') + '; ' // ensure style ends with ;
+        el.attr('style', `${style}${extra_style}`)
+      }
+    },
+    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(),
+    setText: (el, text) => el.text(text),
+    setValue: (el, value) => {
+      if (el.attr('type') == 'checkbox') el.prop('checked', value == '1')
+      else el.val(value)
+      el.trigger('change')
+    },
+    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,
+    match: (el, regexp) => regexp.test(el.val()),
+    mismatch: (el, regexp) => !regexp.test(el.val()),
+    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),
+    addStyle: (el, extra_style) => {
+      if(el.attr('style')) el.attr('style', el.attr('style').replace(extra_style, ''))
+    },
+    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'));
-      });
+
+  class Field {
+    constructor(el) {
+      this.el = el
+      const action_name = this.evaluateAction()
+      const result = this.evaluateCondition()
+      this.condition = result.condition
+      this.condition_arg = result.condition_arg
+      this.evaluateTarget(action_name)
     }
-    else console.log('Warning - activeadmin_dynamic_fields: ' + cb + '() not available [2]');
-  }
-  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);
-    });
-  }
-  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.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('; ');
-              }
-            }
-            if(result) alert(result);
-          }
-        }
+
+    apply() {
+      if (this.condition(this.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)
+      }
+    }
+
+    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]
+
+      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]
+
+      return action_name
+    }
+
+    evaluateCondition() {
+      let value = CONDITIONS[this.el.data('if')?.trim()]
+      if (value) return { condition: value }
+      if (value = this.el.data('eq')) return { condition: CONDITIONS['eq'], condition_arg: value }
+      if (value = this.el.data('not')) return { condition: CONDITIONS['not'], condition_arg: value }
+      if (value = this.el.data('match')) return { condition: CONDITIONS['match'], condition_arg: new RegExp(value) }
+      if (value = this.el.data('mismatch')) return { condition: CONDITIONS['mismatch'], condition_arg: new RegExp(value) }
+
+      this.custom_function = this.el.data('function')
+      if (this.custom_function) {
+        value = window[this.custom_function]
+        if (value) return { condition: value }
         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);
-          }
+          this.el.attr('data-df-errors', 'custom function not found')
+          console.warn(`activeadmin_dynamic_fields custom function not found: ${this.custom_function}`)
         }
       }
-    });
+
+      return {}
+    }
+
+    evaluateTarget(action_name) {
+      // closest find for has many associations
+      if (this.el.data('target')) this.target = this.el.closest('fieldset').find(this.el.data('target'))
+      else if (this.el.data('gtarget')) this.target = $(this.el.data('gtarget'))
+      if (action_name == 'callback') this.target = this.el
+    }
+
+    isValid() {
+      if (!this.condition) return false
+      if (!this.action && !this.custom_function) return false
+
+      return true
+    }
+
+    setup() {
+      if (!this.isValid()) return
+      if (this.el.data('if') != 'changed') this.apply()
+      this.el.on('change', () => this.apply())  
+    }
   }
-}
-
-// 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');
+
+  // 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({
-        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 });
+        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);
+            }
+          }
+          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);
+            }
+          }
+        }
       });
     }
-  });
-  // 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-match], .active_admin .input [data-mismatch], .active_admin .input [data-function]'
+    $(selectors).each(function () {
+      new Field($(this)).setup()
+    })
+
+    // Setup dynamic fields for associations
+    $('.active_admin .has_many_container').on('has_many_add:after', () => {
+      $(selectors).each(function () {
+        new Field($(this)).setup()
+      })
+    })
+
+    // 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.5.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.5.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-28 00:00:00.000000000 Z
+date: 2020-10-04 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