Extended media fixes
This commit is contained in:
parent
001c27cc08
commit
790d40fbf9
|
@ -36,7 +36,7 @@ export default class DotRenderer implements AnimationItemWrapper {
|
||||||
const dpr = this.dpr = window.devicePixelRatio;
|
const dpr = this.dpr = window.devicePixelRatio;
|
||||||
canvas.width = width * dpr;
|
canvas.width = width * dpr;
|
||||||
canvas.height = height * dpr;
|
canvas.height = height * dpr;
|
||||||
canvas.style.cssText = `position: absolute; width: 100%; height: 100%; z-index: 1;`;
|
canvas.classList.add('canvas-thumbnail', 'canvas-dots');
|
||||||
|
|
||||||
this.paused = true;
|
this.paused = true;
|
||||||
this.autoplay = true;
|
this.autoplay = true;
|
||||||
|
|
|
@ -42,8 +42,8 @@ export default class PasswordMonkey {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.passwordInputField.onVisibilityClickAdditional = () => {
|
this.passwordInputField.helpers.onVisibilityClickAdditional = () => {
|
||||||
if(this.passwordInputField.passwordVisible) {
|
if(this.passwordInputField.helpers.passwordVisible) {
|
||||||
this.animation.setDirection(1);
|
this.animation.setDirection(1);
|
||||||
this.animation.curFrame = 0;
|
this.animation.curFrame = 0;
|
||||||
this.needFrame = 16;
|
this.needFrame = 16;
|
||||||
|
|
|
@ -4,34 +4,20 @@
|
||||||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// import { IS_MOBILE_SAFARI, IS_SAFARI } from "../environment/userAgent";
|
|
||||||
import cancelEvent from '../helpers/dom/cancelEvent';
|
import cancelEvent from '../helpers/dom/cancelEvent';
|
||||||
import InputField, {InputFieldOptions} from './inputField';
|
import InputField, {InputFieldOptions} from './inputField';
|
||||||
|
|
||||||
export default class PasswordInputField extends InputField {
|
export class PasswordInputHelpers {
|
||||||
public passwordVisible = false;
|
public passwordVisible = false;
|
||||||
public toggleVisible: HTMLElement;
|
public toggleVisible: HTMLElement;
|
||||||
public onVisibilityClickAdditional: () => void;
|
public onVisibilityClickAdditional: () => void;
|
||||||
|
|
||||||
constructor(options: InputFieldOptions = {}) {
|
constructor(public container: HTMLElement, public input: HTMLInputElement) {
|
||||||
super({
|
|
||||||
plainText: true,
|
|
||||||
...options
|
|
||||||
});
|
|
||||||
|
|
||||||
const input = this.input as HTMLInputElement;
|
|
||||||
input.type = 'password';
|
input.type = 'password';
|
||||||
input.setAttribute('required', '');
|
input.setAttribute('required', '');
|
||||||
input.name = 'notsearch_password';
|
input.name = 'notsearch_password';
|
||||||
input.autocomplete = 'off';
|
input.autocomplete = 'off';
|
||||||
|
|
||||||
/* if(IS_SAFARI && !IS_MOBILE_SAFARI) {
|
|
||||||
input.setAttribute('readonly', '');
|
|
||||||
input.addEventListener('focus', () => {
|
|
||||||
input.removeAttribute('readonly');
|
|
||||||
}, {once: true});
|
|
||||||
} */
|
|
||||||
|
|
||||||
// * https://stackoverflow.com/a/35949954/6758968
|
// * https://stackoverflow.com/a/35949954/6758968
|
||||||
const stealthy = document.createElement('input');
|
const stealthy = document.createElement('input');
|
||||||
stealthy.classList.add('stealthy');
|
stealthy.classList.add('stealthy');
|
||||||
|
@ -40,11 +26,18 @@ export default class PasswordInputField extends InputField {
|
||||||
input.parentElement.prepend(stealthy);
|
input.parentElement.prepend(stealthy);
|
||||||
input.parentElement.insertBefore(stealthy.cloneNode(), input.nextSibling);
|
input.parentElement.insertBefore(stealthy.cloneNode(), input.nextSibling);
|
||||||
|
|
||||||
|
/* if(IS_SAFARI && !IS_MOBILE_SAFARI) {
|
||||||
|
input.setAttribute('readonly', '');
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.removeAttribute('readonly');
|
||||||
|
}, {once: true});
|
||||||
|
} */
|
||||||
|
|
||||||
const toggleVisible = this.toggleVisible = document.createElement('span');
|
const toggleVisible = this.toggleVisible = document.createElement('span');
|
||||||
toggleVisible.classList.add('toggle-visible', 'tgico');
|
toggleVisible.classList.add('toggle-visible', 'tgico');
|
||||||
|
|
||||||
this.container.classList.add('input-field-password');
|
container.classList.add('input-field-password');
|
||||||
this.container.append(toggleVisible);
|
container.append(toggleVisible);
|
||||||
|
|
||||||
toggleVisible.addEventListener('click', this.onVisibilityClick);
|
toggleVisible.addEventListener('click', this.onVisibilityClick);
|
||||||
toggleVisible.addEventListener('touchend', this.onVisibilityClick);
|
toggleVisible.addEventListener('touchend', this.onVisibilityClick);
|
||||||
|
@ -59,3 +52,16 @@ export default class PasswordInputField extends InputField {
|
||||||
this.onVisibilityClickAdditional && this.onVisibilityClickAdditional();
|
this.onVisibilityClickAdditional && this.onVisibilityClickAdditional();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default class PasswordInputField extends InputField {
|
||||||
|
public helpers: PasswordInputHelpers;
|
||||||
|
|
||||||
|
constructor(options: InputFieldOptions = {}) {
|
||||||
|
super({
|
||||||
|
plainText: true,
|
||||||
|
...options
|
||||||
|
});
|
||||||
|
|
||||||
|
this.helpers = new PasswordInputHelpers(this.container, this.input as HTMLInputElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -782,7 +782,7 @@ export default class PopupPayment extends PopupElement {
|
||||||
if(paymentResult._ === 'payments.paymentResult') {
|
if(paymentResult._ === 'payments.paymentResult') {
|
||||||
onConfirmed();
|
onConfirmed();
|
||||||
} else {
|
} else {
|
||||||
popupPaymentVerification = new PopupPaymentVerification(paymentResult.url);
|
popupPaymentVerification = new PopupPaymentVerification(paymentResult.url, !mediaInvoice.extended_media);
|
||||||
popupPaymentVerification.addEventListener('finish', () => {
|
popupPaymentVerification.addEventListener('finish', () => {
|
||||||
popupPaymentVerification = undefined;
|
popupPaymentVerification = undefined;
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,6 @@ import {renderImageFromUrlPromise} from '../../helpers/dom/renderImageFromUrl';
|
||||||
import noop from '../../helpers/noop';
|
import noop from '../../helpers/noop';
|
||||||
import {PaymentsPaymentForm} from '../../layer';
|
import {PaymentsPaymentForm} from '../../layer';
|
||||||
import {LangPackKey, _i18n} from '../../lib/langPack';
|
import {LangPackKey, _i18n} from '../../lib/langPack';
|
||||||
import {TelegramWebviewEvent} from '../../types';
|
|
||||||
import CheckboxField from '../checkboxField';
|
import CheckboxField from '../checkboxField';
|
||||||
import confirmationPopup from '../confirmationPopup';
|
import confirmationPopup from '../confirmationPopup';
|
||||||
import CountryInputField from '../countryInputField';
|
import CountryInputField from '../countryInputField';
|
||||||
|
@ -23,6 +22,7 @@ import Row from '../row';
|
||||||
import {SettingSection} from '../sidebarLeft';
|
import {SettingSection} from '../sidebarLeft';
|
||||||
import {getPaymentBrandIconPath, PaymentButton, PaymentsCredentialsToken} from './payment';
|
import {getPaymentBrandIconPath, PaymentButton, PaymentsCredentialsToken} from './payment';
|
||||||
import {createVerificationIframe} from './paymentVerification';
|
import {createVerificationIframe} from './paymentVerification';
|
||||||
|
import {PasswordInputHelpers} from '../passwordInputField';
|
||||||
|
|
||||||
export type PaymentCardDetails = {
|
export type PaymentCardDetails = {
|
||||||
cardNumber: string;
|
cardNumber: string;
|
||||||
|
@ -335,15 +335,34 @@ export default class PopupPaymentCard extends PopupElement<{
|
||||||
validateMethod: validateCardExpiry
|
validateMethod: validateCardExpiry
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// handle autocomplete: 01/2345 -> 01/45
|
||||||
|
expireInputField.input.addEventListener('input', () => {
|
||||||
|
let value = expireInputField.value;
|
||||||
|
if(value.length < 5) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const splitted = value.split('/');
|
||||||
|
if(splitted[1].length !== 4) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
value = [splitted[0], splitted[1].slice(2)].join('/');
|
||||||
|
expireInputField.setValueSilently(value);
|
||||||
|
}, {capture: true});
|
||||||
|
|
||||||
const cvcInputField = new InputFieldCorrected({
|
const cvcInputField = new InputFieldCorrected({
|
||||||
labelText: 'CVC',
|
labelText: 'CVC',
|
||||||
plainText: true,
|
plainText: true,
|
||||||
inputMode: 'numeric',
|
inputMode: 'numeric',
|
||||||
autocomplete: 'cc-csc',
|
autocomplete: 'cc-csc',
|
||||||
|
name: 'cvc',
|
||||||
formatMethod: () => cardFormattingPatterns.cardCvc(cardInputField.value)
|
formatMethod: () => cardFormattingPatterns.cardCvc(cardInputField.value)
|
||||||
// validateMethod: (...args) => _5AH3.a.cardCvc(cardInputField.value)(...args)
|
// validateMethod: (...args) => _5AH3.a.cardCvc(cardInputField.value)(...args)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const passwordHelpers = new PasswordInputHelpers(cvcInputField.container, cvcInputField.input as HTMLInputElement);
|
||||||
|
|
||||||
const switchFocusOrder: (InputFieldCorrected | InputField)[] = [
|
const switchFocusOrder: (InputFieldCorrected | InputField)[] = [
|
||||||
cardInputField,
|
cardInputField,
|
||||||
expireInputField,
|
expireInputField,
|
||||||
|
@ -391,11 +410,14 @@ export default class PopupPaymentCard extends PopupElement<{
|
||||||
inputFieldsRow.classList.add('input-fields-row');
|
inputFieldsRow.classList.add('input-fields-row');
|
||||||
inputFieldsRow.append(expireInputField.container, cvcInputField.container);
|
inputFieldsRow.append(expireInputField.container, cvcInputField.container);
|
||||||
|
|
||||||
cardSection.content.append(...[
|
const form = document.createElement('form');
|
||||||
|
form.append(...[
|
||||||
cardInputField.container,
|
cardInputField.container,
|
||||||
inputFieldsRow,
|
inputFieldsRow,
|
||||||
nameInputField?.container
|
nameInputField?.container
|
||||||
].filter(Boolean));
|
].filter(Boolean))
|
||||||
|
|
||||||
|
cardSection.content.append(form);
|
||||||
|
|
||||||
let billingSection: SettingSection;
|
let billingSection: SettingSection;
|
||||||
// let saveCheckboxField: CheckboxField;
|
// let saveCheckboxField: CheckboxField;
|
||||||
|
|
|
@ -37,7 +37,7 @@ export function createVerificationIframe(url: string, callback: TelegramWebviewE
|
||||||
export default class PopupPaymentVerification extends PopupElement<{
|
export default class PopupPaymentVerification extends PopupElement<{
|
||||||
finish: () => void
|
finish: () => void
|
||||||
}> {
|
}> {
|
||||||
constructor(private url: string) {
|
constructor(private url: string, private openPathAfter?: boolean) {
|
||||||
super('popup-payment popup-payment-verification', {
|
super('popup-payment popup-payment-verification', {
|
||||||
closable: true,
|
closable: true,
|
||||||
overlayClosable: true,
|
overlayClosable: true,
|
||||||
|
@ -56,7 +56,9 @@ export default class PopupPaymentVerification extends PopupElement<{
|
||||||
|
|
||||||
this.dispatchEvent('finish');
|
this.dispatchEvent('finish');
|
||||||
this.hide();
|
this.hide();
|
||||||
appImManager.openUrl('https://t.me' + event.eventData.path_full);
|
if(this.openPathAfter) {
|
||||||
|
appImManager.openUrl('https://t.me' + event.eventData.path_full);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.body.append(iframe);
|
this.body.append(iframe);
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
import IS_TOUCH_SUPPORTED from '../../environment/touchSupport';
|
import IS_TOUCH_SUPPORTED from '../../environment/touchSupport';
|
||||||
|
|
||||||
export default function placeCaretAtEnd(el: HTMLElement, ignoreTouchCheck = false, focus = true) {
|
export default function placeCaretAtEnd(el: HTMLElement, ignoreTouchCheck = false, focus = true) {
|
||||||
if(IS_TOUCH_SUPPORTED && (!ignoreTouchCheck || document.activeElement !== el)) {
|
if(IS_TOUCH_SUPPORTED && (!ignoreTouchCheck || (document.activeElement.tagName !== 'INPUT' && !(document.activeElement as HTMLElement).isContentEditable))) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -622,6 +622,14 @@ $bubble-beside-button-width: 38px;
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas-thumbnail {
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-dots {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&.emoji-big {
|
&.emoji-big {
|
||||||
--emoji-size: 1rem;
|
--emoji-size: 1rem;
|
||||||
|
@ -2884,8 +2892,12 @@ $bubble-beside-button-width: 38px;
|
||||||
.reply-markup {
|
.reply-markup {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
.bubble:not(.is-group-last) & {
|
||||||
|
margin-bottom: $bubble-margin;
|
||||||
|
}
|
||||||
|
|
||||||
&-row {
|
&-row {
|
||||||
margin-top: .3125rem;
|
margin-top: .1875rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 2.5rem;
|
min-height: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -415,7 +415,7 @@ input:focus, button:focus {
|
||||||
.input-field-input {
|
.input-field-input {
|
||||||
padding-right: 2.5rem;
|
padding-right: 2.5rem;
|
||||||
max-height: var(--height);
|
max-height: var(--height);
|
||||||
|
|
||||||
&[type="password"] {
|
&[type="password"] {
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
padding-left: calc(.875rem - var(--border-width));
|
padding-left: calc(.875rem - var(--border-width));
|
||||||
|
|
|
@ -42,13 +42,17 @@
|
||||||
|
|
||||||
.input-field {
|
.input-field {
|
||||||
--height: 3rem;
|
--height: 3rem;
|
||||||
margin: 1.25rem .5rem 0;
|
margin: .75rem .5rem 0;
|
||||||
|
|
||||||
&-input {
|
&-input {
|
||||||
--padding: .75rem;
|
--padding: .75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-fields-row .input-field {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-left-section {
|
.sidebar-left-section {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user