morethanwords
3 years ago
13 changed files with 452 additions and 241 deletions
@ -0,0 +1,88 @@ |
|||||||
|
/* |
||||||
|
* https://github.com/morethanwords/tweb
|
||||||
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
||||||
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||||
|
*/ |
||||||
|
|
||||||
|
import InputField from "../inputField"; |
||||||
|
import PopupElement from "."; |
||||||
|
import { attachClickEvent } from "../../helpers/dom/clickEvent"; |
||||||
|
import EditPeer from "../editPeer"; |
||||||
|
import { _i18n } from "../../lib/langPack"; |
||||||
|
import TelInputField from "../telInputField"; |
||||||
|
import appUsersManager from "../../lib/appManagers/appUsersManager"; |
||||||
|
import { formatPhoneNumber } from "../../helpers/formatPhoneNumber"; |
||||||
|
import { toastNew } from "../toast"; |
||||||
|
|
||||||
|
export default class PopupCreateContact extends PopupElement { |
||||||
|
constructor() { |
||||||
|
super('popup-create-contact popup-send-photo popup-new-media', null, {closable: true, withConfirm: 'Add'}); |
||||||
|
|
||||||
|
_i18n(this.title, 'AddContactTitle'); |
||||||
|
|
||||||
|
attachClickEvent(this.btnConfirm, () => { |
||||||
|
const promise = appUsersManager.importContact(nameInputField.value, lastNameInputField.value, telInputField.value); |
||||||
|
|
||||||
|
promise.then(() => { |
||||||
|
this.hide(); |
||||||
|
}, (err) => { |
||||||
|
if(err.type === 'NO_USER') { |
||||||
|
toastNew({langPackKey: 'Contacts.PhoneNumber.NotRegistred'}); |
||||||
|
editPeer.disabled = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
editPeer.lockWithPromise(promise); |
||||||
|
}, {listenerSetter: this.listenerSetter}); |
||||||
|
|
||||||
|
const inputFields: InputField[] = []; |
||||||
|
const div = document.createElement('div'); |
||||||
|
div.classList.add('name-fields'); |
||||||
|
const nameInputField = new InputField({ |
||||||
|
label: 'FirstName', |
||||||
|
name: 'create-contact-name', |
||||||
|
maxLength: 70, |
||||||
|
required: true |
||||||
|
}); |
||||||
|
const lastNameInputField = new InputField({ |
||||||
|
label: 'LastName', |
||||||
|
name: 'create-contact-lastname', |
||||||
|
maxLength: 70 |
||||||
|
}); |
||||||
|
const telInputField = new TelInputField({required: true}); |
||||||
|
inputFields.push(nameInputField, lastNameInputField, telInputField); |
||||||
|
|
||||||
|
const onInput = () => { |
||||||
|
const name = nameInputField.value + ' ' + lastNameInputField.value; |
||||||
|
// const abbr = RichTextProcessor.getAbbreviation(name);
|
||||||
|
editPeer.avatarElem.setAttribute('peer-title', name); |
||||||
|
editPeer.avatarElem.update(); |
||||||
|
}; |
||||||
|
|
||||||
|
this.listenerSetter.add(nameInputField.input)('input', onInput); |
||||||
|
this.listenerSetter.add(lastNameInputField.input)('input', onInput); |
||||||
|
|
||||||
|
const user = appUsersManager.getSelf(); |
||||||
|
const formatted = formatPhoneNumber(user.phone); |
||||||
|
if(formatted) { |
||||||
|
telInputField.validate = () => { |
||||||
|
return !!telInputField.value.match(/\d/); |
||||||
|
}; |
||||||
|
|
||||||
|
telInputField.value = '+' + formatted.code.country_code; |
||||||
|
} |
||||||
|
|
||||||
|
const editPeer = new EditPeer({ |
||||||
|
inputFields, |
||||||
|
listenerSetter: this.listenerSetter, |
||||||
|
doNotEditAvatar: true, |
||||||
|
nextBtn: this.btnConfirm, |
||||||
|
avatarSize: 100 |
||||||
|
}); |
||||||
|
|
||||||
|
div.append(nameInputField.container, lastNameInputField.container, editPeer.avatarElem); |
||||||
|
this.container.append(div, telInputField.container); |
||||||
|
|
||||||
|
this.show(); |
||||||
|
} |
||||||
|
} |
@ -1,14 +0,0 @@ |
|||||||
/* |
|
||||||
* https://github.com/morethanwords/tweb
|
|
||||||
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
||||||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
||||||
*/ |
|
||||||
|
|
||||||
import { SliderSuperTab } from "../../slider"; |
|
||||||
|
|
||||||
export default class AppAddContactTab extends SliderSuperTab { |
|
||||||
protected init() { |
|
||||||
this.container.classList.add('add-contact-container'); |
|
||||||
this.setTitle('AddContactTitle'); |
|
||||||
} |
|
||||||
} |
|
@ -0,0 +1,110 @@ |
|||||||
|
/* |
||||||
|
* https://github.com/morethanwords/tweb
|
||||||
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
||||||
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||||
|
*/ |
||||||
|
|
||||||
|
import placeCaretAtEnd from "../helpers/dom/placeCaretAtEnd"; |
||||||
|
import { formatPhoneNumber } from "../helpers/formatPhoneNumber"; |
||||||
|
import { isApple, isAndroid, isAppleMobile } from "../helpers/userAgent"; |
||||||
|
import { HelpCountry, HelpCountryCode } from "../layer"; |
||||||
|
import InputField, { InputFieldOptions } from "./inputField"; |
||||||
|
|
||||||
|
export default class TelInputField extends InputField { |
||||||
|
private pasted = false; |
||||||
|
public lastValue = ''; |
||||||
|
|
||||||
|
constructor(options: InputFieldOptions & { |
||||||
|
onInput?: (formatted: ReturnType<typeof formatPhoneNumber>) => void |
||||||
|
} = {}) { |
||||||
|
super({ |
||||||
|
label: 'Contacts.PhoneNumber.Placeholder', |
||||||
|
//plainText: true,
|
||||||
|
name: 'phone', |
||||||
|
...options |
||||||
|
}); |
||||||
|
|
||||||
|
this.container.classList.add('input-field-phone'); |
||||||
|
|
||||||
|
let telEl = this.input; |
||||||
|
if(telEl instanceof HTMLInputElement) { |
||||||
|
telEl.type = 'tel'; |
||||||
|
telEl.autocomplete = 'rr55RandomRR55'; |
||||||
|
} else { |
||||||
|
telEl.inputMode = 'decimal'; |
||||||
|
|
||||||
|
const pixelRatio = window.devicePixelRatio; |
||||||
|
if(pixelRatio > 1) { |
||||||
|
let letterSpacing: number; |
||||||
|
if(isApple) { |
||||||
|
letterSpacing = pixelRatio * -.16; |
||||||
|
} else if(isAndroid) { |
||||||
|
letterSpacing = 0; |
||||||
|
} |
||||||
|
|
||||||
|
telEl.style.setProperty('--letter-spacing', letterSpacing + 'px'); |
||||||
|
} |
||||||
|
|
||||||
|
const originalFunc = this.setValueSilently.bind(this); |
||||||
|
this.setValueSilently = (value) => { |
||||||
|
originalFunc(value); |
||||||
|
placeCaretAtEnd(this.input, true); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
telEl.addEventListener('input', () => { |
||||||
|
//console.log('input', this.value);
|
||||||
|
telEl.classList.remove('error'); |
||||||
|
|
||||||
|
const value = this.value; |
||||||
|
const diff = Math.abs(value.length - this.lastValue.length); |
||||||
|
if(diff > 1 && !this.pasted && isAppleMobile) { |
||||||
|
this.setValueSilently(this.lastValue + value); |
||||||
|
} |
||||||
|
|
||||||
|
this.pasted = false; |
||||||
|
|
||||||
|
this.setLabel(); |
||||||
|
|
||||||
|
let formattedPhoneNumber: ReturnType<typeof formatPhoneNumber>; |
||||||
|
let formatted: string, country: HelpCountry, countryCode: HelpCountryCode, leftPattern = ''; |
||||||
|
if(this.value.replace(/\++/, '+') === '+') { |
||||||
|
this.setValueSilently('+'); |
||||||
|
} else { |
||||||
|
formattedPhoneNumber = formatPhoneNumber(this.value); |
||||||
|
formatted = formattedPhoneNumber.formatted; |
||||||
|
country = formattedPhoneNumber.country; |
||||||
|
leftPattern = formattedPhoneNumber.leftPattern; |
||||||
|
countryCode = formattedPhoneNumber.code; |
||||||
|
this.setValueSilently(this.lastValue = formatted ? '+' + formatted : ''); |
||||||
|
} |
||||||
|
|
||||||
|
telEl.dataset.leftPattern = leftPattern/* .replace(/X/g, '0') */; |
||||||
|
|
||||||
|
//console.log(formatted, country);
|
||||||
|
|
||||||
|
options.onInput && options.onInput(formattedPhoneNumber); |
||||||
|
}); |
||||||
|
|
||||||
|
telEl.addEventListener('paste', () => { |
||||||
|
this.pasted = true; |
||||||
|
//console.log('paste', telEl.value);
|
||||||
|
}); |
||||||
|
|
||||||
|
/* telEl.addEventListener('change', (e) => { |
||||||
|
console.log('change', telEl.value); |
||||||
|
}); */ |
||||||
|
|
||||||
|
telEl.addEventListener('keypress', (e) => { |
||||||
|
//console.log('keypress', this.value);
|
||||||
|
if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && e.key !== 'Backspace' && !(e.key === '+' && e.shiftKey/* && !this.value */)) { |
||||||
|
e.preventDefault(); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
/* telEl.addEventListener('focus', function(this: typeof telEl, e) { |
||||||
|
this.removeAttribute('readonly'); // fix autocomplete
|
||||||
|
});*/ |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue