Fix detaching click event
This commit is contained in:
parent
628fbfec26
commit
eceaeea394
|
@ -52,21 +52,19 @@ export default class AutocompleteHelper extends EventListenerBase<{
|
||||||
|
|
||||||
this.attachNavigation();
|
this.attachNavigation();
|
||||||
|
|
||||||
this.controller && this.controller.addHelper(this);
|
this.controller?.addHelper(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleListNavigation(enabled: boolean) {
|
public toggleListNavigation(enabled: boolean) {
|
||||||
if(enabled) {
|
if(enabled) {
|
||||||
this.attach && this.attach();
|
this.attach?.();
|
||||||
} else {
|
} else {
|
||||||
this.detach && this.detach();
|
this.detach?.();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onVisible = () => {
|
protected onVisible = () => {
|
||||||
if(this.detach) { // it can be so because 'visible' calls before animation's end
|
this.detach?.(); // it can be so because 'visible' calls before animation's end
|
||||||
this.detach();
|
|
||||||
}
|
|
||||||
|
|
||||||
const list = this.list;
|
const list = this.list;
|
||||||
const {attach, detach, resetTarget} = attachListNavigation({
|
const {attach, detach, resetTarget} = attachListNavigation({
|
||||||
|
@ -144,9 +142,7 @@ export default class AutocompleteHelper extends EventListenerBase<{
|
||||||
this.controller.hideOtherHelpers();
|
this.controller.hideOtherHelpers();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.detach) { // force detach here
|
this.detach?.(); // force detach here
|
||||||
this.detach();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const useRafs = this.controller || hide ? 0 : 2;
|
const useRafs = this.controller || hide ? 0 : 2;
|
||||||
|
|
|
@ -44,7 +44,7 @@ import findUpTag from '../../helpers/dom/findUpTag';
|
||||||
import {toast, toastNew} from '../toast';
|
import {toast, toastNew} from '../toast';
|
||||||
import {getMiddleware, Middleware} from '../../helpers/middleware';
|
import {getMiddleware, Middleware} from '../../helpers/middleware';
|
||||||
import cancelEvent from '../../helpers/dom/cancelEvent';
|
import cancelEvent from '../../helpers/dom/cancelEvent';
|
||||||
import {attachClickEvent, detachClickEvent, simulateClickEvent} from '../../helpers/dom/clickEvent';
|
import {attachClickEvent, simulateClickEvent} from '../../helpers/dom/clickEvent';
|
||||||
import htmlToDocumentFragment from '../../helpers/dom/htmlToDocumentFragment';
|
import htmlToDocumentFragment from '../../helpers/dom/htmlToDocumentFragment';
|
||||||
import reflowScrollableElement from '../../helpers/dom/reflowScrollableElement';
|
import reflowScrollableElement from '../../helpers/dom/reflowScrollableElement';
|
||||||
import replaceContent from '../../helpers/dom/replaceContent';
|
import replaceContent from '../../helpers/dom/replaceContent';
|
||||||
|
|
|
@ -16,7 +16,7 @@ import {fastRaf} from '../helpers/schedulers';
|
||||||
import SetTransition from './singleTransition';
|
import SetTransition from './singleTransition';
|
||||||
import findUpClassName from '../helpers/dom/findUpClassName';
|
import findUpClassName from '../helpers/dom/findUpClassName';
|
||||||
import cancelEvent from '../helpers/dom/cancelEvent';
|
import cancelEvent from '../helpers/dom/cancelEvent';
|
||||||
import {attachClickEvent, detachClickEvent, simulateClickEvent} from '../helpers/dom/clickEvent';
|
import {attachClickEvent, simulateClickEvent} from '../helpers/dom/clickEvent';
|
||||||
import replaceContent from '../helpers/dom/replaceContent';
|
import replaceContent from '../helpers/dom/replaceContent';
|
||||||
import windowSize from '../helpers/windowSize';
|
import windowSize from '../helpers/windowSize';
|
||||||
import {Message, MessageMedia, Poll, PollResults} from '../layer';
|
import {Message, MessageMedia, Poll, PollResults} from '../layer';
|
||||||
|
@ -207,6 +207,8 @@ export default class PollElement extends HTMLElement {
|
||||||
private sendVotePromise: Promise<void>;
|
private sendVotePromise: Promise<void>;
|
||||||
private sentVote = false;
|
private sentVote = false;
|
||||||
|
|
||||||
|
private detachClickEvent: () => void;
|
||||||
|
|
||||||
public static setMaxLength() {
|
public static setMaxLength() {
|
||||||
const width = windowSize.width <= 360 ? windowSize.width - 120 : mediaSizes.active.poll.width;
|
const width = windowSize.width <= 360 ? windowSize.width - 120 : mediaSizes.active.poll.width;
|
||||||
this.MAX_LENGTH = width + tailLength + this.MAX_OFFSET + -13.7; // 13 - position left
|
this.MAX_LENGTH = width + tailLength + this.MAX_OFFSET + -13.7; // 13 - position left
|
||||||
|
@ -446,7 +448,7 @@ export default class PollElement extends HTMLElement {
|
||||||
|
|
||||||
if(canVote) {
|
if(canVote) {
|
||||||
this.setVotersCount(results);
|
this.setVotersCount(results);
|
||||||
attachClickEvent(this, this.clickHandler);
|
this.detachClickEvent = attachClickEvent(this, this.clickHandler);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -569,9 +571,10 @@ export default class PollElement extends HTMLElement {
|
||||||
this.chosenIndexes = chosenIndexes.slice();
|
this.chosenIndexes = chosenIndexes.slice();
|
||||||
|
|
||||||
if(this.isRetracted) {
|
if(this.isRetracted) {
|
||||||
attachClickEvent(this, this.clickHandler);
|
this.detachClickEvent = attachClickEvent(this, this.clickHandler);
|
||||||
} else {
|
} else {
|
||||||
detachClickEvent(this, this.clickHandler);
|
this.detachClickEvent?.();
|
||||||
|
this.detachClickEvent = undefined;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
import fastSmoothScroll from '../fastSmoothScroll';
|
import fastSmoothScroll from '../fastSmoothScroll';
|
||||||
import cancelEvent from './cancelEvent';
|
import cancelEvent from './cancelEvent';
|
||||||
import {attachClickEvent, detachClickEvent} from './clickEvent';
|
import {attachClickEvent} from './clickEvent';
|
||||||
import findUpAsChild from './findUpAsChild';
|
import findUpAsChild from './findUpAsChild';
|
||||||
import findUpClassName from './findUpClassName';
|
import findUpClassName from './findUpClassName';
|
||||||
|
|
||||||
|
@ -147,7 +147,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let attached = false;
|
let attached = false, detachClickEvent: () => void;
|
||||||
const attach = () => {
|
const attach = () => {
|
||||||
if(attached) return;
|
if(attached) return;
|
||||||
attached = true;
|
attached = true;
|
||||||
|
@ -155,7 +155,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
|
||||||
// input.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
|
// input.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
|
||||||
document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
|
document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
|
||||||
list.addEventListener('mousemove', onMouseMove, {passive: true});
|
list.addEventListener('mousemove', onMouseMove, {passive: true});
|
||||||
attachClickEvent(list, onClick);
|
detachClickEvent = attachClickEvent(list, onClick);
|
||||||
};
|
};
|
||||||
|
|
||||||
const detach = () => {
|
const detach = () => {
|
||||||
|
@ -164,7 +164,8 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
|
||||||
// input.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
|
// input.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
|
||||||
document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
|
document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
|
||||||
list.removeEventListener('mousemove', onMouseMove);
|
list.removeEventListener('mousemove', onMouseMove);
|
||||||
detachClickEvent(list, onClick);
|
detachClickEvent();
|
||||||
|
detachClickEvent = undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const resetTarget = () => {
|
const resetTarget = () => {
|
||||||
|
|
|
@ -71,13 +71,13 @@ export function attachClickEvent(elem: HTMLElement | Window, callback: (e: /* To
|
||||||
return () => remove(CLICK_EVENT_NAME, callback, options);
|
return () => remove(CLICK_EVENT_NAME, callback, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function detachClickEvent(elem: HTMLElement | Window, callback: (e: /* TouchEvent | */MouseEvent) => void, options?: AddEventListenerOptions) {
|
// export function detachClickEvent(elem: HTMLElement | Window, callback: (e: /* TouchEvent | */MouseEvent) => void, options?: AddEventListenerOptions) {
|
||||||
// if(CLICK_EVENT_NAME === 'touchend') {
|
// // if(CLICK_EVENT_NAME === 'touchend') {
|
||||||
// elem.removeEventListener('touchstart', callback, options);
|
// // elem.removeEventListener('touchstart', callback, options);
|
||||||
// } else {
|
// // } else {
|
||||||
elem.removeEventListener(CLICK_EVENT_NAME, callback as any, options);
|
// elem.removeEventListener(CLICK_EVENT_NAME, callback as any, options);
|
||||||
// }
|
// // }
|
||||||
}
|
// }
|
||||||
|
|
||||||
export function simulateClickEvent(elem: HTMLElement) {
|
export function simulateClickEvent(elem: HTMLElement) {
|
||||||
simulateEvent(elem, CLICK_EVENT_NAME);
|
simulateEvent(elem, CLICK_EVENT_NAME);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {attachClickEvent, detachClickEvent} from './dom/clickEvent';
|
import {attachClickEvent} from './dom/clickEvent';
|
||||||
import findUpAsChild from './dom/findUpAsChild';
|
import findUpAsChild from './dom/findUpAsChild';
|
||||||
import EventListenerBase from './eventListenerBase';
|
import EventListenerBase from './eventListenerBase';
|
||||||
import ListenerSetter from './listenerSetter';
|
import ListenerSetter from './listenerSetter';
|
||||||
|
@ -37,6 +37,7 @@ export default class DropdownHover extends EventListenerBase<{
|
||||||
protected navigationItem: NavigationItem;
|
protected navigationItem: NavigationItem;
|
||||||
protected ignoreOutClickClassName: string;
|
protected ignoreOutClickClassName: string;
|
||||||
protected timeouts: {[type in DropdownHoverTimeoutType]?: number};
|
protected timeouts: {[type in DropdownHoverTimeoutType]?: number};
|
||||||
|
protected detachClickEvent: () => void;
|
||||||
|
|
||||||
constructor(options: {
|
constructor(options: {
|
||||||
element: DropdownHover['element'],
|
element: DropdownHover['element'],
|
||||||
|
@ -87,7 +88,7 @@ export default class DropdownHover extends EventListenerBase<{
|
||||||
if(ignore && !this.ignoreMouseOut.size) {
|
if(ignore && !this.ignoreMouseOut.size) {
|
||||||
this.ignoreButtons.add(button);
|
this.ignoreButtons.add(button);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
attachClickEvent(window, this.onClickOut, {capture: true});
|
this.detachClickEvent = attachClickEvent(window, this.onClickOut, {capture: true});
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -214,7 +215,8 @@ export default class DropdownHover extends EventListenerBase<{
|
||||||
this.element.classList.remove('active');
|
this.element.classList.remove('active');
|
||||||
|
|
||||||
appNavigationController.removeItem(this.navigationItem);
|
appNavigationController.removeItem(this.navigationItem);
|
||||||
detachClickEvent(window, this.onClickOut, {capture: true});
|
this.detachClickEvent?.();
|
||||||
|
this.detachClickEvent = undefined;
|
||||||
|
|
||||||
this.clearTimeout('toggle');
|
this.clearTimeout('toggle');
|
||||||
this.setTimeout('done', () => {
|
this.setTimeout('done', () => {
|
||||||
|
|
Loading…
Reference in New Issue