bullet_train-fields 1.0.19 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 955500ace762c8286cd55318ac27669c0967adfcd5198c6c88db4542f9c553a9
-  data.tar.gz: 391e21fabc859f7ea4b209fc676d5e33a215dcc3defb14bb0726a05176d3976b
+  metadata.gz: d04eb382cf117ef08b66d7edf6db0178cb042696060de27d637b25c18202b6b9
+  data.tar.gz: 840e1a9b9975c23ac2895abf87a42aabfc442f4e3fc736a1bde34ec37f2e1960
 SHA512:
-  metadata.gz: b6ba652dfd29a7550d65b51f05b8c68e318731e0fc40064a9d21f2306442608a026a12f9f5f14e4c55d2cbc1f8da1a4d1cc410fac03916bd0da0d37ab2cadfd5
-  data.tar.gz: e70c866711efec589e7f64a4b32b42ceaa8e8b0f53487adb294ad5332bda66490e551d0db4dd620be4e26e420ba551f3b5e33390e8e341ded720901956d8942d
+  metadata.gz: 953af0dd524d37380390b1d1e612dcf636986425051f243563580e6d5616ac3b0f421c55696bbe79bf541760c343369343a5970f171a3efb4a7eaf2b7ae76db6
+  data.tar.gz: 9db0823ce9063a4195051d6984d6f1af4f556ec29fe5a99b59da2ce3d2977de0886ed7e82e17b59725bd7f92ec88ad795c9216a5efbc1571b495c032a484a664

data/app/helpers/fields/trix_editor_helper.rb

@@ -5,9 +5,4 @@ module Fields::TrixEditorHelper
   def trix_sanitize(html)
     html_sanitize(html)
   end
-
-  # TODO Confirm there are no references to this anywhere (in other repositories) and remove it.
-  def trix_content(body)
-    html_sanitize(body)
-  end
 end

data/app/javascript/controllers/fields/color_picker_controller.js

@@ -1,18 +1,32 @@
 import { Controller } from "@hotwired/stimulus"
 import '@simonwep/pickr/dist/themes/monolith.min.css'
 
-import Pickr from '@simonwep/pickr';
+import Pickr from '@simonwep/pickr'
 
-const pickerHexInputSelector = 'input.pcr-result'
+const generatedPickerHexInputSelector = 'input.pcr-result'
 
 export default class extends Controller {
-  static targets = [ "colorPickerValue", "colorField", "colorInput", "userSelectedColor", "colorOptions", "pickerContainer", "togglePickerButton", "colorButton" ];
+  static targets = [
+    'colorPickerValue',
+    'colorField',
+    'colorInput',
+    'userSelectedColor',
+    'colorOptions',
+    'pickerContainer',
+    'togglePickerButton',
+    'colorButton',
+  ]
   static values = { initialColor: String }
-  static classes = [ "colorSelected" ]
+  static classes = ['colorSelected']
 
   connect() {
     this.initPluginInstance()
-    this.colorOptions = $(this.colorOptionsTarget).find('button').map(function (_, button) { return $(button).attr('data-color'); }).get()
+    this.colorOptions = $(this.colorOptionsTarget)
+      .find('button')
+      .map(function (_, button) {
+        return $(button).attr('data-color').toLowerCase()
+      })
+      .get()
   }
 
   disconnect() {
@@ -20,60 +34,59 @@ export default class extends Controller {
   }
 
   pickColor(event) {
-    event.preventDefault();
+    event.preventDefault()
 
-    const targetEl = event.target;
-    const color = targetEl.dataset.color;
+    const targetEl = event.target
+    const color = targetEl.dataset.color
 
-    $(this.colorInputTarget).val(color);
-    $(this.colorPickerValueTarget).val(color);
-    $(this.userSelectedColorTarget).data('color', color);
-    this.highlightColorButtonsMatchingSelectedColor()
+    $(this.colorInputTarget).val(color)
+    $(this.colorPickerValueTarget).val(color)
+    $(this.userSelectedColorTarget).data('color', color)
 
-    this.pickr.setColor(color);
+    this.pickr.setColor(color)
   }
 
   pickRandomColor(event) {
-    event.preventDefault();
+    event.preventDefault()
 
-    const r = Math.floor(Math.random() * 256);
-    const g = Math.floor(Math.random() * 256);
-    const b = Math.floor(Math.random() * 256);
+    const r = Math.floor(Math.random() * 256)
+    const g = Math.floor(Math.random() * 256)
+    const b = Math.floor(Math.random() * 256)
 
-    this.pickr.setColor(`rgb ${r} ${g} ${b}`);
-    const hexColor = this.pickr.getColor().toHEXA().toString();
-    this.pickr.setColor(hexColor);
+    this.pickr.setColor(`rgb ${r} ${g} ${b}`)
+    const hexColor = this.pickr.getColor().toHEXA().toString()
+    this.pickr.setColor(hexColor)
 
-    this.showUserSelectedColor(hexColor);
+    this.showUserSelectedColor(hexColor)
   }
 
   showUserSelectedColor(color) {
-    $(this.colorInputTarget).val(color);
-    $(this.colorPickerValueTarget).val(color);
-
-    this.highlightColorButtonsMatchingSelectedColor()
+    $(this.colorInputTarget).val(color)
+    $(this.colorPickerValueTarget).val(color)
 
     $(this.userSelectedColorTarget)
-      .addClass('ring-2')
-      .addClass('ring-offset-2')
       .css('background-color', color)
       .css('--tw-ring-color', color)
       .attr('data-color', color)
-      .show();
+      .show()
   }
 
   unpickColor(event) {
-    event.preventDefault();
-    $(this.colorPickerValueTarget).val('');
-    $(this.colorInputTarget).val('');
-    $(this.userSelectedColorTarget).hide();
-    this.highlightColorButtonsMatchingSelectedColor()
+    event.preventDefault()
+    $(this.colorPickerValueTarget).val('')
+    $(this.colorInputTarget).val('')
+    $(this.userSelectedColorTarget).hide()
+    this.dispatchChangeEvent()
   }
-  
+
+  dispatchChangeEvent() {
+    this.colorInputTarget.dispatchEvent(new Event('change'))
+  }
+
   highlightColorButtonsMatchingSelectedColor() {
     this.colorButtonTargets.forEach((button) => {
       const buttonColor = button.dataset?.color
-      if (this.selectedColor !== undefined && buttonColor === this.selectedColor) {
+      if (this.selectedColor !== undefined && buttonColor.toLowerCase() === this.selectedColor.toLowerCase()) {
         button.classList.add(...this.colorSelectedClasses)
       } else {
         button.classList.remove(...this.colorSelectedClasses)
@@ -82,7 +95,7 @@ export default class extends Controller {
   }
 
   togglePickr(event) {
-    event.preventDefault();
+    event.preventDefault()
   }
 
   initPluginInstance() {
@@ -102,22 +115,28 @@ export default class extends Controller {
           input: true,
           save: true,
         },
-      }
-    });
+      },
+    })
 
     this.pickr.on('save', (color, _instance) => {
-      const hexaColor = color.toHEXA().toString()
+      const hexaColor = color.toHEXA().toString().toLowerCase()
       if (!this.colorOptions.includes(hexaColor)) {
-        this.showUserSelectedColor(hexaColor);
+        this.showUserSelectedColor(hexaColor)
       }
-      this.pickr.hide();
-    });
+      this.dispatchChangeEvent()
+      this.highlightColorButtonsMatchingSelectedColor()
+      this.pickr.hide()
+    })
   }
-  
+
   handleKeydown(event) {
-    if (!event.target.matches(pickerHexInputSelector)) { return }
-    if (event.key !== 'Enter') { return }
-    
+    if (!event.target.matches(generatedPickerHexInputSelector)) {
+      return
+    }
+    if (event.key !== 'Enter') {
+      return
+    }
+
     event.preventDefault()
     event.stopPropagation()
     this.pickr.applyColor(false)
@@ -126,7 +145,7 @@ export default class extends Controller {
   teardownPluginInstance() {
     this.pickr.destroy()
   }
-  
+
   get selectedColor() {
     return $(this.colorInputTarget).val()
   }

data/app/javascript/controllers/fields/field_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "field" ]
+  static values = {
+    original: String,
+    dirty: Boolean
+  }
+  
+  connect() {
+    this.recordOriginal()
+  }
+  
+  recordOriginal() {
+    if (!this.hasOriginalValue) {
+      this.originalValue = this.value
+    }
+    this.dispatch('original-recorded', {
+      detail: { originalValue: this.originalValue },
+      target: this.field
+    })
+  }
+  
+  revert(event) {
+    if (this.hasOriginalValue) {
+      this.value = this.originalValue
+    }
+    this.dispatch('reverted')
+  }
+  
+  get field() {
+    if (this.hasFieldTarget) {
+      return this.fieldTarget
+    }
+    return this.element
+  }
+  
+  get value() {
+    switch (this.field.type) {
+      case "checkbox":
+        return this.field.checked
+    }
+    
+    return this.field.value
+  }
+  
+  set value(newValue) {
+    switch (this.field.type) {
+      case "checkbox":
+        this.field.checked = (newValue === "true" || newValue === true)
+        break
+      default:
+        this.field.value = newValue
+        break
+    }
+  }
+}

data/app/javascript/controllers/fields/file_field_controller.js

@@ -20,7 +20,7 @@ export default class extends Controller {
         this.progressBarTarget.style.width = "0%";
         this.progressBarTarget.setAttribute("aria-valuenow", 0);
         this.progressBarTarget.parentNode.classList.remove("hidden");
-        this.progressLabel.innerText = "0%";
+        this.progressLabelTarget.innerText = "0%";
       }
     );
 

data/app/javascript/controllers/fields/super_select_controller.js

@@ -16,13 +16,13 @@ export default class extends Controller {
 
   initialize() {
     this.dispatchNativeEvent = this.dispatchNativeEvent.bind(this)
-    if (this.isSelect2LoadedOnWindowJquery) {
-      select2(window.$)
+    if (!this.isSelect2LoadedOnWindowJquery) {
+      select2()
     }
   }
 
   get isSelect2LoadedOnWindowJquery() {
-    return (window.$ !== undefined && window.$.select2 === undefined)
+    return window?.$?.fn?.select2 !== undefined
   }
 
   connect() {
@@ -40,7 +40,9 @@ export default class extends Controller {
   }
 
   initPluginInstance() {
-    let options = {};
+    let options = {
+      dropdownParent: $(this.element)
+    };
 
     if (!this.enableSearchValue) {
       options.minimumResultsForSearch = -1;

data/app/javascript/controllers/index.js

@@ -1,5 +1,6 @@
 import { identifierForContextKey } from "@hotwired/stimulus-webpack-helpers"
 
+import FieldController from './fields/field_controller'
 import ButtonToggleController from './fields/button_toggle_controller'
 import CloudinaryImageController from './fields/cloudinary_image_controller'
 import ColorPickerController from './fields/color_picker_controller'
@@ -11,6 +12,7 @@ import PhoneController from './fields/phone_controller'
 import SuperSelectController from './fields/super_select_controller'
 
 export const controllerDefinitions = [
+  [FieldController, 'fields/field_controller.js'],
   [ButtonToggleController, 'fields/button_toggle_controller.js'],
   [CloudinaryImageController, 'fields/cloudinary_image_controller.js'],
   [ColorPickerController, 'fields/color_picker_controller.js'],
@@ -30,6 +32,7 @@ export const controllerDefinitions = [
 })
 
 export {
+  FieldController,
   ButtonToggleController,
   CloudinaryImageController,
   ColorPickerController,

data/lib/bullet_train/fields/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Fields
-    VERSION = "1.0.19"
+    VERSION = "1.2.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-fields
 version: !ruby/object:Gem::Version
-  version: 1.0.19
+  version: 1.2.0
 platform: ruby
 authors:
 - Andrew Culver
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-25 00:00:00.000000000 Z
+date: 2022-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: standard
@@ -109,6 +109,7 @@ files:
 - app/javascript/controllers/fields/color_picker_controller.js
 - app/javascript/controllers/fields/date_controller.js
 - app/javascript/controllers/fields/emoji_picker_controller.js
+- app/javascript/controllers/fields/field_controller.js
 - app/javascript/controllers/fields/file_field_controller.js
 - app/javascript/controllers/fields/password_controller.js
 - app/javascript/controllers/fields/phone_controller.js