diff --git a/app/javascript/controllers/dependable_controller.js b/app/javascript/controllers/dependable_controller.js new file mode 100644 index 0000000..a836c64 --- /dev/null +++ b/app/javascript/controllers/dependable_controller.js @@ -0,0 +1,24 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static values = { + dependentsSelector: String + } + + updateDependents(event) { + if (!this.hasDependents) { return false } + + this.dependents.forEach((dependent) => { + dependent.dispatchEvent(new CustomEvent(`${this.identifier}:updated`, { detail: { event: event }, bubbles: true, cancelable: false })) + }) + } + + get hasDependents() { + return (this.dependents.length > 0) + } + + get dependents() { + if (!this.dependentsSelectorValue) { return [] } + return document.querySelectorAll(this.dependentsSelectorValue) + } +} diff --git a/app/javascript/controllers/fields/super_select_controller.js b/app/javascript/controllers/fields/super_select_controller.js index 9989e00..d44b51b 100644 --- a/app/javascript/controllers/fields/super_select_controller.js +++ b/app/javascript/controllers/fields/super_select_controller.js @@ -8,6 +8,9 @@ export default class extends Controller { acceptsNew: Boolean, enableSearch: Boolean, searchUrl: String, + // searchUrlPattern: String, + // queryStringMappings: Object, + // searchUrlParams: Object } // will be reissued as native dom events name prepended with '$' e.g. '$change', '$select2:closing', etc @@ -84,6 +87,16 @@ export default class extends Controller { // revert to original markup, remove any event listeners $(this.pluginMainEl).select2('destroy'); } + + updateSearchUrlValue(event) { + const dependentOnField = event?.detail?.event?.target + if (!dependentOnField) { return } + + const fieldName = dependentOnField.name + const fieldValue = dependentOnField.value + + // this.updateUrlParamsFrom(fieldName, fieldValue) + } initReissuePluginEventsAsNativeEvents() { this.constructor.jQueryEventsToReissue.forEach((eventName) => { @@ -99,7 +112,7 @@ export default class extends Controller { dispatchNativeEvent(event) { const nativeEventName = '$' + event.type // e.g. '$change.select2' - this.element.dispatchEvent(new CustomEvent(nativeEventName, { detail: { event: event }, bubbles: true, cancelable: false })) + this.pluginMainEl.dispatchEvent(new CustomEvent(nativeEventName, { detail: { event: event }, bubbles: true, cancelable: false })) } // https://stackoverflow.com/questions/29290389/select2-add-image-icon-to-option-dynamically diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 4dd2c7e..ac48d2c 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -9,6 +9,7 @@ import FileFieldController from './fields/file_field_controller' import PasswordController from './fields/password_controller' import PhoneController from './fields/phone_controller' import SuperSelectController from './fields/super_select_controller' +import DependableController from './dependable_controller' export const controllerDefinitions = [ [ButtonToggleController, 'fields/button_toggle_controller.js'], @@ -20,6 +21,7 @@ export const controllerDefinitions = [ [PasswordController, 'fields/password_controller.js'], [PhoneController, 'fields/phone_controller.js'], [SuperSelectController, 'fields/super_select_controller.js'], + [DependableController, 'dependable_controller.js'], ].map(function(d) { const key = d[1] const controller = d[0] @@ -39,4 +41,5 @@ export { PasswordController, PhoneController, SuperSelectController, + DependableController, } diff --git a/yarn.lock b/yarn.lock index d071511..202d965 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1012,9 +1012,9 @@ integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ== "@hotwired/stimulus@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.0.1.tgz#141f15645acaa3b133b7c247cad58ae252ffae85" - integrity sha512-oHsJhgY2cip+K2ED7vKUNd2P+BEswVhrCYcJ802DSsblJFv7mPFVk3cQKvm2vHgHeDVdnj7oOKrBbzp1u8D+KA== + version "3.2.1" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.1.tgz#e3de23623b0c52c247aba4cd5d530d257008676b" + integrity sha512-HGlzDcf9vv/EQrMJ5ZG6VWNs8Z/xMN+1o2OhV1gKiSG6CqZt5MCBB1gRg5ILiN3U0jEAxuDTNPRfBcnZBDmupQ== "@nodelib/fs.scandir@2.1.5": version "2.1.5"