Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.It would be great if it would be possible to allow passing custom parameters / initialisation settings to the international telephone library.
Currently Drupal.behaviors.webformTelephoneInternational is hardcoded to
$telephone.intlTelInput({
'nationalMode': false
});
For my project I needed to pass an initial country other than the default (US). I didn't want to create a custom UI for this as it would probably be very tied to the specific javascript library and maybe venture in the feature-creep territory. So made use of webform's handy "custom properties":
As seen in the image, it relies currently on an array named intlTelSettings to store all custom properties to be passed to the intl-tel-input library
This is a proof of concept that actually works perfectly for my use-case but maybe there is a better/more robust way?
Patch incoming.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | pass_custom_settings_to-2859002-10.patch | 5.08 KB | jrockowitz |
| |||
| #8 | pass_custom_settings_to-2859002-8.patch | 5.02 KB | jrockowitz |
| |||
| #7 | pass_custom_settings_to-2859002-7.patch | 1.72 KB | jrockowitz |
| |||
| #4 | custom_intl_tel_settings-2859002-4.patch | 1.7 KB | ptsimard |
| |||
| intl_tel_settings.png | 17.51 KB | ptsimard | |
Comments
Comment #2
ptsimard CreditAttribution: ptsimard commentedHere is the patch. I did not include any documentation for this custom parameter since I want some feedback on this approach first.
Comment #3
ptsimard CreditAttribution: ptsimard commentedSimplified the code
Comment #4
ptsimard CreditAttribution: ptsimard commentedImproved error checking on javascript. Previous patches were not working when not using custom parameters.
Comment #5
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThe Webform module allows custom JS and CSS to be injected globally or into a specified form. This feature allows developers to completely override an element's JS.
For example, a developer could redeclare
Drupal.behaviors.webformTelephoneInternational. What is not ideal is that the developer would have to override the entire behavior. I am starting to think if all webform element related JS was refactored to support overriding just the default options for an element, this could solve a lot of problems.For example, a developer code override just
Drupal.webform.telephone.options. The key benefit of allowing options overridden is developers can also specify custom JS functions and behaviors.Comment #6
ptsimard CreditAttribution: ptsimard commentedI like your options overriding approach. I like that you want to take care of both the UX and the DX.
My main concern and first stab at this issue was to indeed override
Drupal.behaviors.webformTelephoneInternationalentirely. The issue for me of doing that is twofold:Which is why I went this way of passing default parameters. I concede that my patch is very custom to that particular telephone element and is not a very good generalized solution/creates non-obvious behavior.
Comment #7
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThe attached patch allows
Drupal.webform.telephoneInternational.optionsto be overridden and includes an example in /form/test-element-telephone. The approach can be applied to all JS widgets.Still, I think you have made a very reasonable argument that initial country should be customizable via the UI.
Comment #8
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThis patch adds full support for initial country. I think this feature is worth adding as well as overridable options, in a new ticket)
Comment #9
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented@ptsimard Please see [@2859943]. I am going to commit the patch from #2859943 first and then reroll the patch from comment #8.
The options override is very powerful. For example, we can now change the color of the signature pad's pen using the below JS snippet.
Drupal.webform.signaturePad.options.penColor = 'red';Comment #10
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedHere is the rerolled patch.
Comment #12
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedI committed the patch, please download and review the latest dev release.