New feature: addStyle action

Author: blocknotes

README.md

@@ -39,6 +39,7 @@ Actions:
   + **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"`)
   + **callback**: call a function (with arguments: **data-args**) (ex. `"data-then": "callback a_fun"`)

app/assets/javascripts/activeadmin/dynamic_fields.js

@@ -3,6 +3,13 @@
 
   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 {
@@ -33,6 +40,9 @@
 
   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()

spec/dummy/app/admin/posts.rb

@@ -38,8 +38,8 @@
   end
 
   form do |f|
-    def add_field(form, name, type, data, override_options = {})
-      options = { as: type, input_html: { data: data }, hint: data.inspect }
+    def add_field(form, name, type, data, override_options = {}, extra_attrs = {})
+      options = { as: type, input_html: { data: data }.merge(extra_attrs), hint: data.inspect }
       options.merge! override_options
       form.input name, options
     end
@@ -139,6 +139,10 @@ def add_field(form, name, type, data, override_options = {})
       df271 = { if: 'checked', then: 'setText 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; color: red', 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' }
       add_field(f, :data_field_301, :boolean, df301)

spec/system/dynamic_fields_spec.rb

@@ -139,6 +139,13 @@
       find('#post_data_field_271').click
       expect(find('#post_data_field_271_input .inline-hints').text).to eq 'data test'
 
+      # --- addStyle
+      expect(find('#post_data_field_281')[:style]).to eq 'margin-right: 20px;'
+      find('#post_data_field_281').click
+      expect(find('#post_data_field_281')[:style]).to eq 'margin-right: 20px; font-size: 10px; color: red;'
+      find('#post_data_field_281').click
+      expect(find('#post_data_field_281')[:style]).to eq 'margin-right: 20px;'
+
       # --- gtarget
       expect(page).not_to have_css('body.active_admin.red')
       find('#post_data_field_301').click