Skip to content

Commit 262dd2d

Browse files
vladitasevvladitasev
committed
refactor(ui5-popup): Move more common functionality to Popup.js (#1853)
1 parent f85c7e2 commit 262dd2d

15 files changed

+355
-326
lines changed

‎packages/main/bundle.esm.js

-2
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,6 @@ import StandardListItem from "./dist/StandardListItem.js";
7878
import CustomListItem from "./dist/CustomListItem.js";
7979
import GroupHeaderListItem from "./dist/GroupHeaderListItem.js";
8080

81-
82-
8381
// used in test pages
8482
import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
8583
window.RenderScheduler = RenderScheduler;

‎packages/main/src/Dialog.hbs

+20-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
{{>include "./Popup.hbs"}}
1+
{{>include "./Popup.hbs"}}
2+
3+
{{#*inline "beforeContent"}}
4+
<header class="ui5-popup-header-root" id="ui5-popup-header">
5+
{{#if header.length }}
6+
<slot name="header"></slot>
7+
{{else}}
8+
<h2 class="ui5-popup-header-text">{{headerText}}</h2>
9+
{{/if}}
10+
</header>
11+
{{/inline}}
12+
13+
{{#*inline "afterContent"}}
14+
{{#if footer.length }}
15+
<footer class="ui5-popup-footer-root">
16+
<slot name="footer"></slot>
17+
</footer>
18+
{{/if}}
19+
{{/inline}}
20+

‎packages/main/src/Dialog.js

+57-61
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,54 @@
11
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
2-
import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
3-
42
import Popup from "./Popup.js";
3+
54
// Template
65
import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
7-
86
// Styles
7+
import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
98
import dialogCSS from "./generated/themes/Dialog.css.js";
10-
import { getFocusedElement } from "./popup-utils/PopupUtils.js";
119

1210
/**
1311
* @public
1412
*/
1513
const metadata = {
1614
tag: "ui5-dialog",
15+
slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
16+
/**
17+
* Defines the header HTML Element.
18+
*
19+
* @type {HTMLElement[]}
20+
* @slot
21+
* @public
22+
*/
23+
header: {
24+
type: HTMLElement,
25+
},
26+
27+
/**
28+
* Defines the footer HTML Element.
29+
*
30+
* @type {HTMLElement[]}
31+
* @slot
32+
* @public
33+
*/
34+
footer: {
35+
type: HTMLElement,
36+
},
37+
},
1738
properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
39+
/**
40+
* Defines the header text.
41+
* <br><br>
42+
* <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
43+
*
44+
* @type {string}
45+
* @defaultvalue ""
46+
* @public
47+
*/
48+
headerText: {
49+
type: String,
50+
},
51+
1852
/**
1953
* Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
2054
* <br><br>
@@ -29,6 +63,9 @@ const metadata = {
2963
type: Boolean,
3064
},
3165

66+
/**
67+
* @private
68+
*/
3269
onPhone: {
3370
type: Boolean,
3471
},
@@ -78,75 +115,34 @@ class Dialog extends Popup {
78115
}
79116

80117
static get styles() {
81-
return [Popup.styles, dialogCSS];
118+
return [PopupsCommonCss, dialogCSS];
82119
}
83120

84-
constructor() {
85-
super();
86-
121+
onBeforeRendering() {
87122
this.onPhone = isPhone();
88123
}
89124

90-
/**
91-
* Opens the <code>ui5-dialog</code>.
92-
* @public
93-
*/
94-
open() {
95-
super.open();
96-
97-
this._focusedElementBeforeOpen = getFocusedElement();
98-
this.fireEvent("before-open", {});
99-
this.show();
100-
this.applyInitialFocus();
101-
102-
Dialog.blockBodyScrolling();
103-
104-
addOpenedPopup(this);
105-
this.opened = true;
106-
this.fireEvent("after-open", {});
107-
}
108-
109-
/**
110-
* Closes the <code>ui5-dialog</code>.
111-
* @public
112-
*/
113-
close(escPressed) {
114-
const prevented = !this.fireEvent("before-close", { escPressed }, true);
115-
116-
if (prevented || !this.opened) {
117-
return;
118-
}
119-
120-
super.close();
121-
this.hide();
122-
this.opened = false;
123-
124-
this.fireEvent("after-close", {});
125-
126-
removeOpenedPopup(this);
127-
Dialog.unblockBodyScrolling();
128-
129-
if (this._focusedElementBeforeOpen && !this._disableInitialFocus) {
130-
this._focusedElementBeforeOpen.focus();
131-
}
125+
get isModal() { // Required by Popup.js
126+
return true;
132127
}
133128

134-
onExitDOM() {
135-
if (this.isOpen()) {
136-
Dialog.unblockBodyScrolling();
137-
}
129+
get _ariaLabelledBy() { // Required by Popup.js
130+
return "ui5-popup-header";
138131
}
139132

140-
get isModal() {
133+
get _ariaModal() { // Required by Popup.js
141134
return true;
142135
}
143136

144-
get _displayFooter() {
145-
return true;
146-
}
147-
148-
get _displayHeader() {
149-
return true;
137+
get classes() {
138+
return {
139+
root: {
140+
"ui5-popup-root": true,
141+
},
142+
content: {
143+
"ui5-popup-content": true,
144+
},
145+
};
150146
}
151147
}
152148

‎packages/main/src/Popover.hbs

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
{{>include "./Popup.hbs"}}
22

3-
{{#*inline "beforeHeader"}}
3+
{{#*inline "beforeContent"}}
44
<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
5-
{{/inline}}
5+
6+
{{#if _displayHeader}}
7+
<header class="ui5-popup-header-root" id="ui5-popup-header">
8+
{{#if header.length }}
9+
<slot name="header"></slot>
10+
{{else}}
11+
<h2 class="ui5-popup-header-text">{{headerText}}</h2>
12+
{{/if}}
13+
</header>
14+
{{/if}}
15+
{{/inline}}
16+
17+
{{#*inline "afterContent"}}
18+
{{#if _displayFooter}}
19+
{{#if footer.length }}
20+
<footer class="ui5-popup-footer-root">
21+
<slot name="footer"></slot>
22+
</footer>
23+
{{/if}}
24+
{{/if}}
25+
{{/inline}}

0 commit comments

Comments
 (0)