Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-popup): Events do not bubble #1981

Merged
merged 1 commit into from
Jul 27, 2020
Merged

refactor(ui5-popup): Events do not bubble #1981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/base/src/UI5Element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,10 +644,11 @@ class UI5Element extends HTMLElement {
* @param name - name of the event
* @param data - additional data for the event
* @param cancelable - true, if the user can call preventDefault on the event object
* @param bubbles - true, if the event bubbles
* @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise
*/
fireEvent(name, data, cancelable) {
const eventResult = this._fireEvent(name, data, cancelable);
fireEvent(name, data, cancelable = false, bubbles = true) {
const eventResult = this._fireEvent(name, data, cancelable, bubbles);
const camelCaseEventName = kebabToCamelCase(name);

if (camelCaseEventName !== name) {
Expand All @@ -657,13 +658,13 @@ class UI5Element extends HTMLElement {
return eventResult;
}

_fireEvent(name, data, cancelable) {
_fireEvent(name, data, cancelable = false, bubbles = true) {
let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"

const noConflictEvent = new CustomEvent(`ui5-${name}`, {
detail: data,
composed: false,
bubbles: true,
bubbles,
cancelable,
});

Expand All @@ -677,7 +678,7 @@ class UI5Element extends HTMLElement {
const customEvent = new CustomEvent(name, {
detail: data,
composed: false,
bubbles: true,
bubbles,
cancelable,
});

Expand Down
32 changes: 19 additions & 13 deletions packages/main/src/Popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,35 +89,34 @@ const metadata = {
events: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {

/**
* Fired before the component is opened.
* Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.
*
* @public
* @event sap.ui.webcomponents.main.Popup#before-open
*/

"before-open": {},

/**
* Fired after the component is opened.
* Fired after the component is opened. This event does not bubble.
*
* @public
* @event sap.ui.webcomponents.main.Popup#after-open
*/

"after-open": {},

/**
* Fired before the component is closed.
* Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
*
* @public
* @event sap.ui.webcomponents.main.Popup#before-close
* @param {Boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
*/

"before-close": {
escPressed: { type: Boolean },
},

/**
* Fired after the component is closed.
* Fired after the component is closed. This event does not bubble.
*
* @public
* @event sap.ui.webcomponents.main.Popup#after-close
Expand Down Expand Up @@ -297,6 +296,11 @@ class Popup extends UI5Element {
* @public
*/
open(preventInitialFocus) {
const prevented = !this.fireEvent("before-open", {}, true, false);
if (prevented) {
return;
}

if (this.isModal) {
// create static area item ref for block layer
this.getStaticAreaItemDomRef();
Expand All @@ -306,9 +310,7 @@ class Popup extends UI5Element {

this._zIndex = getNextZIndex();
this.style.zIndex = this._zIndex;

this._focusedElementBeforeOpen = getFocusedElement();
this.fireEvent("before-open", {});
this.show();

if (!this._disableInitialFocus && !preventInitialFocus) {
Expand All @@ -318,7 +320,7 @@ class Popup extends UI5Element {
this._addOpenedPopup();

this.opened = true;
this.fireEvent("after-open", {});
this.fireEvent("after-open", {}, false, false);
}

/**
Expand All @@ -334,8 +336,12 @@ class Popup extends UI5Element {
* @public
*/
close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
const prevented = !this.fireEvent("before-close", { escPressed }, true);
if (prevented || !this.opened) {
if (!this.opened) {
return;
}

const prevented = !this.fireEvent("before-close", { escPressed }, true, false);
if (prevented) {
return;
}

Expand All @@ -355,7 +361,7 @@ class Popup extends UI5Element {
this.resetFocus();
}

this.fireEvent("after-close", {});
this.fireEvent("after-close", {}, false, false);
}

/**
Expand Down