Skip to content

Commit

Permalink
LPS-122449 Remove {delegate} usage of metal-dom in JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@kresimir-coko
kresimir-coko committed Nov 10, 2020
1 parent cab4127 commit 6a65c90
Show file tree
Hide file tree
Showing 11 changed files with 60 additions and 61 deletions.
6 changes: 3 additions & 3 deletions ...esources/META-INF/resources/account_entries_admin/js/PersonAccountEntryEventHandler.es.js
View file
Expand Up @@ -12,7 +12,7 @@
* details.
*/

import {PortletBase, openSelectionModal} from 'frontend-js-web';
import {PortletBase, delegate, openSelectionModal} from 'frontend-js-web';
import * as dom from 'metal-dom';
import {EventHandler} from 'metal-events';
import {Config} from 'metal-state';
Expand All @@ -39,7 +39,7 @@ class PersonAccountEntryEventHandler extends PortletBase {
);

this.eventHandler_.add(
dom.delegate(
delegate(
this.container,
'click',
this.removeUserLinkSelector,
Expand All @@ -53,7 +53,7 @@ class PersonAccountEntryEventHandler extends PortletBase {
*/
detached() {
super.detached();
this.eventHandler_.removeAllListeners();
this.eventHandler_.dispose();
}

_handleOnSelect(selectedItemData) {
Expand Down
9 changes: 5 additions & 4 deletions ...web/src/main/resources/META-INF/resources/adaptive_media/js/EditAdaptiveMediaConfig.es.js
View file
Expand Up @@ -12,9 +12,8 @@
* details.
*/

import {PortletBase, normalizeFriendlyURL} from 'frontend-js-web';
import {PortletBase, delegate, normalizeFriendlyURL} from 'frontend-js-web';
import core from 'metal';
import dom from 'metal-dom';

const VALID_INPUT_KEYS = new Set([
'0',
Expand Down Expand Up @@ -52,8 +51,10 @@ class EditAdaptiveMediaConfig extends PortletBase {
const idOptions = this.one('#idOptions');

if (idOptions) {
dom.delegate(idOptions, 'change', 'input[type="radio"]', (event) =>
this.onChangeUuidOptions_(event.delegateTarget)
delegate(idOptions, 'change', 'input[type="radio"]', (event) =>
this.onChangeUuidOptions_(
event.target.closest('input[type="radio"]')
)
);
}

Expand Down
15 changes: 7 additions & 8 deletions ...s/asset/asset-list-web/src/main/resources/META-INF/resources/js/TopLinkEventHandler.es.js
View file
Expand Up @@ -12,30 +12,29 @@
* details.
*/

import {PortletBase} from 'frontend-js-web';
import dom from 'metal-dom';
import {PortletBase, delegate} from 'frontend-js-web';

export default class TopLinkEventHandler extends PortletBase {
attached() {
this._delegateHandler = dom.delegate(
this._delegateHandler = delegate(
document.body,
'click',
'a',
(event) => {
const openerWindow = Liferay.Util.getTop();

if (openerWindow && event.delegateTarget.target === '_top') {
const delegateTarget = event.target.closest('a');

if (openerWindow && delegateTarget.target === '_top') {
event.preventDefault();

openerWindow.Liferay.Util.navigate(
event.delegateTarget.href
);
openerWindow.Liferay.Util.navigate(delegateTarget.href);
}
}
);
}

dispose() {
this._delegateHandler.removeListener();
this._delegateHandler.dispose();
}
}
6 changes: 3 additions & 3 deletions .../frontend-js/frontend-js-alert-support-web/src/main/resources/META-INF/resources/index.js
View file
Expand Up @@ -12,20 +12,20 @@
* details.
*/

import dom from 'metal-dom';
import {delegate} from 'frontend-js-web';

let handle;

export default () => {
if (!handle) {
handle = dom.delegate(
handle = delegate(
document.body,
'click',
'[data-dismiss="liferay-alert"]',
(event) => {
event.preventDefault();

const container = event.delegateTarget.closest('.alert');
const container = event.target.closest('.alert');

if (container) {
container.parentNode.removeChild(container);
Expand Down
5 changes: 3 additions & 2 deletions ...rontend-js-collapse-support-web/src/main/resources/META-INF/resources/CollapseProvider.js
View file
Expand Up @@ -12,6 +12,7 @@
* details.
*/

import {delegate} from 'frontend-js-web';
import dom from 'metal-dom';

const CssClass = {
Expand Down Expand Up @@ -43,7 +44,7 @@ class CollapseProvider {

this._setTransitionEndEvent();

dom.delegate(
delegate(
document.body,
'click',
Selector.TRIGGER,
Expand Down Expand Up @@ -196,7 +197,7 @@ class CollapseProvider {
}

_onTriggerClick = (event) => {
const trigger = event.delegateTarget;
const trigger = event.target.closest(Selector.TRIGGER);

if (trigger.tagName === 'A') {
event.preventDefault();
Expand Down
13 changes: 4 additions & 9 deletions ...rontend-js-dropdown-support-web/src/main/resources/META-INF/resources/DropdownProvider.js
View file
Expand Up @@ -13,7 +13,7 @@
*/

import domAlign from 'dom-align';
import dom from 'metal-dom';
import {delegate} from 'frontend-js-web';

const CssClass = {
SHOW: 'show',
Expand All @@ -39,19 +39,14 @@ class DropdownProvider {
return Liferay.DropdownProvider;
}

dom.delegate(
delegate(
document.body,
'click',
Selector.TRIGGER,
this._onTriggerClick
);

dom.delegate(
document.body,
'keydown',
Selector.TRIGGER,
this._onKeyDown
);
delegate(document.body, 'keydown', Selector.TRIGGER, this._onKeyDown);

Liferay.DropdownProvider = this;
}
Expand Down Expand Up @@ -143,7 +138,7 @@ class DropdownProvider {
};

_onTriggerClick = (event) => {
const trigger = event.delegateTarget;
const trigger = event.target.closest(Selector.TRIGGER);

if (trigger.tagName === 'A') {
event.preventDefault();
Expand Down
5 changes: 3 additions & 2 deletions ...end-js/frontend-js-tabs-support-web/src/main/resources/META-INF/resources/TabsProvider.js
View file
Expand Up @@ -12,6 +12,7 @@
* details.
*/

import {delegate} from 'frontend-js-web';
import dom from 'metal-dom';

const CssClass = {
Expand All @@ -36,7 +37,7 @@ class TabsProvider {

this._setTransitionEndEvent();

dom.delegate(
delegate(
document.body,
'click',
Selector.TRIGGER,
Expand Down Expand Up @@ -129,7 +130,7 @@ class TabsProvider {
}

_onTriggerClick = (event) => {
const trigger = event.delegateTarget;
const trigger = event.target.closest(Selector.TRIGGER);

if (trigger.tagName === 'A') {
event.preventDefault();
Expand Down
26 changes: 12 additions & 14 deletions ...rontend-js/frontend-js-tooltip-support-web/src/main/resources/META-INF/resources/index.js
View file
Expand Up @@ -14,7 +14,7 @@

import ClayTooltip from '@clayui/tooltip';
import {render, useTimeout} from 'frontend-js-react-web';
import dom from 'metal-dom';
import {delegate} from 'frontend-js-web';
import {Align} from 'metal-position';
import React, {
useEffect,
Expand Down Expand Up @@ -155,36 +155,34 @@ const TooltipProvider = () => {

useEffect(() => {
const TRIGGER_SHOW_HANDLES = TRIGGER_SHOW_EVENTS.map((eventName) => {
return dom.delegate(
return delegate(
document.body,
eventName,
SELECTOR_TRIGGER,
(event) =>
dispatch({target: event.delegateTarget, type: 'show'})
dispatch({
target: event.target.closest(SELECTOR_TRIGGER),
type: 'show',
})
);
});

const TRIGGER_HIDE_HANDLES = TRIGGER_HIDE_EVENTS.map((eventName) => {
return dom.delegate(
document.body,
eventName,
SELECTOR_TRIGGER,
() => {
dispatch({type: 'hide'});
return delegate(document.body, eventName, SELECTOR_TRIGGER, () => {
dispatch({type: 'hide'});

restoreTitle(state.target);
}
);
restoreTitle(state.target);
});
});

const TOOLTIP_ENTER = dom.delegate(
const TOOLTIP_ENTER = delegate(
document.body,
'mouseenter',
SELECTOR_TOOLTIP,
() => dispatch({target: state.target, type: 'show'})
);

const TOOLTIP_LEAVE = dom.delegate(
const TOOLTIP_LEAVE = delegate(
document.body,
'mouseleave',
SELECTOR_TOOLTIP,
Expand Down
23 changes: 14 additions & 9 deletions ...s/frontend-js-web/src/main/resources/META-INF/resources/liferay/DynamicInlineScroll.es.js
View file
Expand Up @@ -17,6 +17,7 @@ import dom from 'metal-dom';
import {EventHandler} from 'metal-events';

import PortletBase from './PortletBase.es';
import {delegate} from './delegate/delegate.es';

/**
* Appends list item elements to dropdown menus with inline-scrollers on scroll
Expand All @@ -42,7 +43,7 @@ class DynamicInlineScroll extends PortletBase {
rootNode = rootNode || document;

this.eventHandler_.add(
dom.delegate(
delegate(
rootNode,
'scroll',
'ul.pagination ul.inline-scroller',
Expand All @@ -57,7 +58,7 @@ class DynamicInlineScroll extends PortletBase {
detached() {
super.detached();

this.eventHandler_.removeAllListeners();
this.eventHandler_.dispose();
}

/**
Expand Down Expand Up @@ -150,16 +151,20 @@ class DynamicInlineScroll extends PortletBase {
*/
onScroll_(event) {
const {cur, initialPages, pages} = this;
const {target} = event;
const delegateTarget = event.target.closest(
'ul.pagination ul.inline-scroller'
);

let pageIndex = this.getNumber_(target.getAttribute('data-page-index'));
let pageIndex = this.getNumber_(
delegateTarget.getAttribute('data-page-index')
);
let pageIndexMax = this.getNumber_(
target.getAttribute('data-max-index')
delegateTarget.getAttribute('data-max-index')
);

if (pageIndex === 0) {
const pageIndexCurrent = this.getNumber_(
target.getAttribute('data-current-index')
delegateTarget.getAttribute('data-current-index')
);

if (pageIndexCurrent === 0) {
Expand All @@ -177,10 +182,10 @@ class DynamicInlineScroll extends PortletBase {
if (
cur <= pages &&
pageIndex < pageIndexMax &&
target.getAttribute('scrollTop') >=
target.getAttribute('scrollHeight') - 300
delegateTarget.getAttribute('scrollTop') >=
delegateTarget.getAttribute('scrollHeight') - 300
) {
this.addListItem_(target, pageIndex);
this.addListItem_(delegateTarget, pageIndex);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions .../frontend-js/frontend-js-web/src/main/resources/META-INF/resources/liferay/modal/Modal.js
View file
Expand Up @@ -17,11 +17,11 @@ import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayModal, {useModal} from '@clayui/modal';
import classNames from 'classnames';
import {render} from 'frontend-js-react-web';
import dom from 'metal-dom';
import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useRef, useState} from 'react';

import './Modal.scss';
import delegate from '../delegate/delegate.es';
import navigate from '../util/navigate.es';

const Modal = ({
Expand Down Expand Up @@ -452,14 +452,14 @@ class Iframe extends React.Component {
}

if (this.delegateHandler) {
this.delegateHandler.removeListener();
this.delegateHandler.dispose();
}
}

onLoadHandler = () => {
const iframeWindow = this.iframeRef.current.contentWindow;

this.delegateHandler = dom.delegate(
this.delegateHandler = delegate(
iframeWindow.document,
'click',
'.btn-cancel,.lfr-hide-dialog',
Expand Down
7 changes: 3 additions & 4 deletions ...s/META-INF/resources/repository_entry_browser/js/ItemSelectorRepositoryEntryBrowser.es.js
View file
Expand Up @@ -14,8 +14,7 @@

import {ClayAlert} from 'clay-alert';
import {render} from 'frontend-js-react-web';
import {PortletBase} from 'frontend-js-web';
import dom from 'metal-dom';
import {PortletBase, delegate} from 'frontend-js-web';
import {EventHandler} from 'metal-events';
import {Config} from 'metal-state';
import ReactDOM from 'react-dom';
Expand Down Expand Up @@ -116,8 +115,8 @@ class ItemSelectorRepositoryEntryBrowser extends PortletBase {
*/
_bindEvents() {
this._eventHandler.add(
dom.delegate(this.rootNode, 'click', '.item-preview', (event) =>
this._onItemSelected(event.delegateTarget.dataset)
delegate(this.rootNode, 'click', '.item-preview', (event) =>
this._onItemSelected(event.target.closest('.item-preview').dataset)
)
);

Expand Down

0 comments on commit 6a65c90

Please sign in to comment.