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 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 commentedSimplified the code
Comment #4
ptsimard commentedImproved error checking on javascript. Previous patches were not working when not using custom parameters.
Comment #5
jrockowitz 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 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 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 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 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 commentedHere is the rerolled patch.
Comment #12
jrockowitz commentedI committed the patch, please download and review the latest dev release.