|
| 1 | +/* ************************************************************************ |
| 2 | +
|
| 3 | + osparc - the simcore frontend |
| 4 | +
|
| 5 | + https://osparc.io |
| 6 | +
|
| 7 | + Copyright: |
| 8 | + 2022 IT'IS Foundation, https://itis.swiss |
| 9 | +
|
| 10 | + License: |
| 11 | + MIT: https://opensource.org/licenses/MIT |
| 12 | +
|
| 13 | + Authors: |
| 14 | + * Odei Maiz (odeimaiz) |
| 15 | +
|
| 16 | +************************************************************************ */ |
| 17 | + |
| 18 | +/* global intlTelInput */ |
| 19 | + |
| 20 | +/** |
| 21 | + * @ignore(intlTelInput) |
| 22 | + */ |
| 23 | + |
| 24 | +qx.Class.define("osparc.ui.form.IntlTelInput", { |
| 25 | + extend: qx.ui.core.Widget, |
| 26 | + implement: [qx.ui.form.IForm, qx.ui.form.IStringForm], |
| 27 | + include: [qx.ui.form.MForm, qx.ui.form.MModelProperty], |
| 28 | + |
| 29 | + construct: function() { |
| 30 | + this.base(arguments); |
| 31 | + |
| 32 | + this.setFocusable(true); |
| 33 | + |
| 34 | + this._setLayout(new qx.ui.layout.HBox()); |
| 35 | + |
| 36 | + this.getContentElement().setStyles({ |
| 37 | + "overflow": "visible" // needed for countries dropdown menu |
| 38 | + }); |
| 39 | + |
| 40 | + const randId = Math.floor(Math.random() * 100); |
| 41 | + this.__htmlId = `phone-${randId}`; |
| 42 | + const html = `<input type='tel' id='${this.__htmlId}' name='phone' autocomplete='off'>`; |
| 43 | + const phoneNumber = this.getChildControl("phone-input-field"); |
| 44 | + phoneNumber.setHtml(html); |
| 45 | + phoneNumber.addListenerOnce("appear", () => this.__convertInputToPhoneInput(), this); |
| 46 | + |
| 47 | + const themeManager = qx.theme.manager.Meta.getInstance(); |
| 48 | + themeManager.addListener("changeTheme", () => this.__updateStyle()); |
| 49 | + }, |
| 50 | + |
| 51 | + properties: { |
| 52 | + // Form-compatible property |
| 53 | + value: { |
| 54 | + check: "String", |
| 55 | + nullable: true, |
| 56 | + event: "changeValue", |
| 57 | + apply: "_applyValue" |
| 58 | + }, |
| 59 | + |
| 60 | + compactField: { |
| 61 | + check: "Boolean", |
| 62 | + init: false, |
| 63 | + nullable: false, |
| 64 | + apply: "__updateStyle", |
| 65 | + } |
| 66 | + }, |
| 67 | + |
| 68 | + members: { |
| 69 | + __htmlId: null, |
| 70 | + __inputElement: null, |
| 71 | + __phoneInput: null, |
| 72 | + |
| 73 | + _createChildControlImpl: function(id) { |
| 74 | + let control; |
| 75 | + switch (id) { |
| 76 | + case "phone-input-field": |
| 77 | + control = new qx.ui.embed.Html(); |
| 78 | + this._add(control, { flex: 1 }); |
| 79 | + break; |
| 80 | + } |
| 81 | + return control || this.base(arguments, id); |
| 82 | + }, |
| 83 | + |
| 84 | + // IStringForm interface implementation |
| 85 | + getValue: function() { |
| 86 | + return this.__phoneInput ? this.__phoneInput.getNumber() : null; |
| 87 | + }, |
| 88 | + |
| 89 | + setValue: function(value) { |
| 90 | + if (this.__phoneInput && value) { |
| 91 | + // intlTelInput doesn't have a full setter for raw numbers |
| 92 | + this.__phoneInput.setNumber(value); |
| 93 | + } |
| 94 | + this._applyValue(value); |
| 95 | + }, |
| 96 | + |
| 97 | + resetValue: function() { |
| 98 | + this.setValue(null); |
| 99 | + }, |
| 100 | + // IStringForm interface implementation |
| 101 | + |
| 102 | + // Make the widget tabbable/focusable |
| 103 | + focus: function() { |
| 104 | + if (this.__inputElement) { |
| 105 | + this.__inputElement.focus(); |
| 106 | + } else { |
| 107 | + // fallback: let qooxdoo focus the content element |
| 108 | + this.base(arguments); |
| 109 | + } |
| 110 | + }, |
| 111 | + |
| 112 | + tabFocus: function() { |
| 113 | + this.focus(); |
| 114 | + }, |
| 115 | + |
| 116 | + getFocusElement: function() { |
| 117 | + const phoneNumber = this.getChildControl("phone-input-field"); |
| 118 | + // phoneNumber is a qx.ui.embed.Html, it has a ContentElement (qx.html.Element) |
| 119 | + return phoneNumber.getContentElement(); |
| 120 | + }, |
| 121 | + // Make the widget tabbable/focusable |
| 122 | + |
| 123 | + _applyValue: function(value) { |
| 124 | + this.fireDataEvent("changeValue", value); |
| 125 | + }, |
| 126 | + |
| 127 | + validate: function() { |
| 128 | + return this.isValidNumber(); |
| 129 | + }, |
| 130 | + |
| 131 | + isValidNumber: function() { |
| 132 | + return this.__phoneInput ? this.__phoneInput.isValidNumber() : false; |
| 133 | + }, |
| 134 | + |
| 135 | + verifyPhoneNumber: function() { |
| 136 | + if (this.isValidNumber()) { |
| 137 | + this.setValid(true); |
| 138 | + } else { |
| 139 | + this.setValid(false); |
| 140 | + const validationError = this.__phoneInput.getValidationError(); |
| 141 | + const errorMap = { |
| 142 | + 0: this.tr("Invalid number"), |
| 143 | + 1: this.tr("Invalid country code"), |
| 144 | + 2: this.tr("Number too short"), |
| 145 | + 3: this.tr("Number too long") |
| 146 | + }; |
| 147 | + const errorMsg = errorMap[validationError] || this.tr("Invalid number"); |
| 148 | + this.setInvalidMessage(errorMsg); |
| 149 | + } |
| 150 | + this.__updateStyle(); |
| 151 | + }, |
| 152 | + |
| 153 | + __updateStyle: function() { |
| 154 | + const textColor = qx.theme.manager.Color.getInstance().resolve("text"); |
| 155 | + const bgColor = qx.theme.manager.Color.getInstance().resolve("input_background"); |
| 156 | + const productColor = qx.theme.manager.Color.getInstance().resolve("product-color"); |
| 157 | + const defaultBottomBorder = qx.theme.manager.Color.getInstance().resolve("default-button-active"); |
| 158 | + document.documentElement.style.setProperty('--country-list-dropdown-bg', bgColor); |
| 159 | + document.documentElement.style.setProperty('--country-list-dropdown-text', textColor); |
| 160 | + document.documentElement.style.setProperty('--tel-border-bottom-color', defaultBottomBorder); |
| 161 | + document.documentElement.style.setProperty('--tel-border-bottom-color-focused', productColor); |
| 162 | + |
| 163 | + const isCompact = this.isCompactField(); |
| 164 | + const phoneInputField = this.getChildControl("phone-input-field"); |
| 165 | + const width = isCompact ? 152 : 223; |
| 166 | + const height = isCompact ? 26 : 30; |
| 167 | + |
| 168 | + phoneInputField.set({ |
| 169 | + maxWidth: width, |
| 170 | + maxHeight: height, |
| 171 | + margin: 0, |
| 172 | + }); |
| 173 | + |
| 174 | + const phoneInput = this.__phoneInput; |
| 175 | + if (phoneInput) { |
| 176 | + phoneInput.a.style["width"] = width + "px"; |
| 177 | + phoneInput.a.style["height"] = height + "px"; |
| 178 | + phoneInput.a.style["borderWidth"] = "0px"; |
| 179 | + phoneInput.a.style["backgroundColor"] = isCompact ? "transparent" : bgColor; |
| 180 | + phoneInput.a.style["color"] = textColor; |
| 181 | + |
| 182 | + if (this.getValue() && !this.isValidNumber()) { |
| 183 | + const errorColor = qx.theme.manager.Color.getInstance().resolve("failed-red"); |
| 184 | + document.documentElement.style.setProperty('--tel-border-bottom-color', errorColor); |
| 185 | + } |
| 186 | + } |
| 187 | + }, |
| 188 | + |
| 189 | + __convertInputToPhoneInput: function() { |
| 190 | + const convertInputToPhoneInput = () => { |
| 191 | + const domElement = document.querySelector(`#${this.__htmlId}`); |
| 192 | + this.__inputElementToPhoneInput(domElement); |
| 193 | + const phoneNumber = this.getChildControl("phone-input-field"); |
| 194 | + phoneNumber.getContentElement().setStyles({ |
| 195 | + "overflow": "visible" // needed for countries dropdown menu |
| 196 | + }); |
| 197 | + this.__updateStyle(); |
| 198 | + }; |
| 199 | + |
| 200 | + const intlTelInputLib = osparc.wrapper.IntlTelInput.getInstance(); |
| 201 | + if (intlTelInputLib.getLibReady()) { |
| 202 | + convertInputToPhoneInput(); |
| 203 | + } else { |
| 204 | + intlTelInputLib.addListenerOnce("changeLibReady", e => { |
| 205 | + if (e.getData()) { |
| 206 | + convertInputToPhoneInput(); |
| 207 | + } |
| 208 | + }); |
| 209 | + } |
| 210 | + }, |
| 211 | + |
| 212 | + __inputElementToPhoneInput: function(domElement) { |
| 213 | + this.__inputElement = domElement; // keep reference to raw <input> |
| 214 | + this.__phoneInput = intlTelInput(domElement, { |
| 215 | + initialCountry: "auto", |
| 216 | + geoIpLookup: callback => { |
| 217 | + fetch("https://ipapi.co/json") |
| 218 | + .then(res => res.json()) |
| 219 | + .then(data => callback(data.country_code)) |
| 220 | + .catch(() => callback("ch")); |
| 221 | + }, |
| 222 | + preferredCountries: [], |
| 223 | + dropdownContainer: document.body, |
| 224 | + }); |
| 225 | + |
| 226 | + // Trigger validation on blur |
| 227 | + domElement.addEventListener("blur", () => this.verifyPhoneNumber()); |
| 228 | + |
| 229 | + this.__updateStyle(); |
| 230 | + } |
| 231 | + } |
| 232 | +}); |
0 commit comments