Skip to content

Commit 59f5354

Browse files
ilhan007ilhan007
authored
refactor(ui5-popover, ui5-responsive-popover): rename "openBy" to "showAt" (#3540)
Rename the Popover's and ResponsivePopover's "openBy" method to "showAt" to have more consistent API with the Toast and Dialog components, which have "show" method. The name "showBy" has been also discussed, but from English language perspective to "show" something "at" some place is more accurate to say and this why we picked up "showAt". BREAKING CHANGE: Popover's and ResponsivePopover's "openBy" method has been renamed to "showAt".
1 parent a58a1a4 commit 59f5354

38 files changed

+101
-101
lines changed

‎packages/base/src/util/PopupUtils.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const isClickInRect = (event, rect) => {
6262
const getClosedPopupParent = el => {
6363
const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
6464

65-
if (parent && ((parent.openBy && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
65+
if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
6666
return parent;
6767
}
6868

‎packages/fiori/src/NotificationListItemBase.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ class NotificationListItemBase extends ListItemBase {
257257

258258
async openOverflow() {
259259
const overflowPopover = await this.getOverflowPopover();
260-
overflowPopover.openBy(this.overflowButtonDOM);
260+
overflowPopover.showAt(this.overflowButtonDOM);
261261
}
262262

263263
async closeOverflow() {

‎packages/fiori/src/ShellBar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@ class ShellBar extends UI5Element {
460460

461461
if (this.hasMenuItems) {
462462
const menuPopover = await this._getMenuPopover();
463-
menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
463+
menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
464464
}
465465
},
466466
};
@@ -688,7 +688,7 @@ class ShellBar extends UI5Element {
688688

689689
_toggleActionPopover() {
690690
const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
691-
this.overflowPopover.openBy(overflowButton);
691+
this.overflowPopover.showAt(overflowButton);
692692
}
693693

694694
onEnterDOM() {

‎packages/fiori/src/SideNavigation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ class SideNavigation extends UI5Element {
242242

243243
async openPicker(opener) {
244244
const responsivePopover = await this.getPicker();
245-
responsivePopover.openBy(opener);
245+
responsivePopover.showAt(opener);
246246
}
247247

248248
async closePicker(opener) {

‎packages/fiori/src/Wizard.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -592,7 +592,7 @@ class Wizard extends UI5Element {
592592
}
593593

594594
const responsivePopover = await this._respPopover();
595-
responsivePopover.openBy(oDomTarget);
595+
responsivePopover.showAt(oDomTarget);
596596
}
597597

598598
async _onGroupedTabClick(event) {

‎packages/fiori/test/pages/NotificationListGroupItem.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ <h3>Events on ui5-list level</h3>
315315
});
316316

317317
openNotifications.addEventListener("click", function(event) {
318-
notificationsPopover.openBy(openNotifications);
318+
notificationsPopover.showAt(openNotifications);
319319
});
320320

321321
btnMakeGroupBusy.addEventListener("click", function(event) {
@@ -330,7 +330,7 @@ <h3>Events on ui5-list level</h3>
330330

331331
shellbar.addEventListener("ui5-notificationsClick", function(event) {
332332
event.preventDefault();
333-
notificationsPopover.openBy(event.detail.targetRef);
333+
notificationsPopover.showAt(event.detail.targetRef);
334334
});
335335
</script>
336336
</body>

‎packages/fiori/test/pages/NotificationListItem.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -286,12 +286,12 @@ <h3>Events on ui5-list level</h3>
286286
});
287287

288288
openNotifications.addEventListener("click", function(event) {
289-
notificationsPopover.openBy(openNotifications);
289+
notificationsPopover.showAt(openNotifications);
290290
});
291291

292292
shellbar.addEventListener("ui5-notificationsClick", function(event) {
293293
event.preventDefault();
294-
notificationsPopover.openBy(event.detail.targetRef);
294+
notificationsPopover.showAt(event.detail.targetRef);
295295
});
296296
</script>
297297
</body>

‎packages/fiori/test/pages/ShellBar.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -231,14 +231,14 @@ <h3>ShellBar in Compact</h3>
231231
});
232232

233233
shellbar.addEventListener("ui5-profileClick", function(event) {
234-
popover.openBy(event.detail.targetRef);
234+
popover.showAt(event.detail.targetRef);
235235
window["press-input"].value = "Profile";
236236
});
237237

238238
shellbar.addEventListener("ui5-notificationsClick", function(event) {
239239
window["press-input"].value = "Notifications";
240240
event.preventDefault();
241-
popover.openBy(event.detail.targetRef);
241+
popover.showAt(event.detail.targetRef);
242242
});
243243

244244
shellbar.addEventListener("ui5-productSwitchClick", function(event) {
@@ -266,12 +266,12 @@ <h3>ShellBar in Compact</h3>
266266

267267
shelbarCompact.addEventListener("ui5-notificationsClick", function(event) {
268268
event.preventDefault();
269-
popover.openBy(event.detail.targetRef);
269+
popover.showAt(event.detail.targetRef);
270270
});
271271

272272
shelbarCompact.addEventListener("ui5-productSwitchClick", function(event) {
273273
event.preventDefault();
274-
popover.openBy(event.detail.targetRef);
274+
popover.showAt(event.detail.targetRef);
275275
});
276276

277277
menuItemsSB.addEventListener("ui5-menuItemClick", function(event) {
@@ -285,7 +285,7 @@ <h3>ShellBar in Compact</h3>
285285
currenItem.addEventListener("ui5-itemClick", function(event) {
286286
event.preventDefault();
287287
window["press-input"].value = event.target.id;
288-
window["custom-item-popover"].openBy(event.detail.targetRef);
288+
window["custom-item-popover"].showAt(event.detail.targetRef);
289289
});
290290
});
291291
</script>

‎packages/fiori/test/samples/NotificationListGroupItem.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
301301
<script>
302302
shellbar.addEventListener("ui5-notifications-click", function(event) {
303303
event.preventDefault();
304-
notificationsPopover.openBy(event.detail.targetRef);
304+
notificationsPopover.showAt(event.detail.targetRef);
305305
});
306306
</script>
307307
</div>
@@ -347,7 +347,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
347347

348348
<script>
349349
shellbar.addEventListener("ui5-notifications-click", function(event) {
350-
notificationsPopover.openBy(event.detail.targetRef);
350+
notificationsPopover.showAt(event.detail.targetRef);
351351
});
352352
</script>
353353

‎packages/fiori/test/samples/NotificationListItem.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ <h3>NotificationListItem In ShellBar</h3>
221221
<script>
222222
shellbar.addEventListener("ui5-notifications-click", function(event) {
223223
event.preventDefault();
224-
notificationsPopover.openBy(event.detail.targetRef);
224+
notificationsPopover.showAt(event.detail.targetRef);
225225
});
226226
</script>
227227
</div>
@@ -260,7 +260,7 @@ <h3>NotificationListItem In ShellBar</h3>
260260

261261
<script>
262262
shellbar.addEventListener("ui5-notifications-click", function(event) {
263-
notificationsPopover.openBy(event.detail.targetRef);
263+
notificationsPopover.showAt(event.detail.targetRef);
264264
});
265265
</script>
266266

‎packages/fiori/test/samples/ProductSwitch.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ <h3>ProductSwitch within ShellBar</h3>
6868
popover.close();
6969
} else {
7070
event.preventDefault();
71-
popover.openBy(event.detail.targetRef);
71+
popover.showAt(event.detail.targetRef);
7272
}
7373
});
7474
</script>
@@ -109,7 +109,7 @@ <h3>ProductSwitch within ShellBar</h3>
109109
if (popover.opened) {
110110
popover.close();
111111
} else {
112-
popover.openBy(event.detail.targetRef);
112+
popover.showAt(event.detail.targetRef);
113113
}
114114
});
115115
</script>

‎packages/fiori/test/samples/ShellBar.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h3>ShellBar</h3>
5757

5858
<script>
5959
shellbar.addEventListener("profile-click", function(event) {
60-
window["action-popover"].openBy(event.detail.targetRef);
60+
window["action-popover"].showAt(event.detail.targetRef);
6161
});
6262
</script>
6363
</div>
@@ -107,7 +107,7 @@ <h3>ShellBar</h3>
107107

108108
<script>
109109
shellbar.addEventListener("profile-click", function(event) {
110-
popover.openBy(event.detail.targetRef);
110+
popover.showAt(event.detail.targetRef);
111111
});
112112
</script>
113113
</xmp></pre>

‎packages/main/src/ComboBox.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -479,7 +479,7 @@ class ComboBox extends UI5Element {
479479

480480
async openValueStatePopover() {
481481
this.popover = await this._getPopover();
482-
this.popover && this.popover.openBy(this);
482+
this.popover && this.popover.showAt(this);
483483
}
484484

485485
async closeValueStatePopover() {
@@ -648,7 +648,7 @@ class ComboBox extends UI5Element {
648648
}
649649

650650
_openRespPopover() {
651-
this.responsivePopover.openBy(this);
651+
this.responsivePopover.showAt(this);
652652
}
653653

654654
_filterItems(str) {

‎packages/main/src/DatePicker.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ class DatePicker extends DateComponentBase {
550550

551551
_click(event) {
552552
if (isPhone()) {
553-
this.responsivePopover.openBy(this);
553+
this.responsivePopover.showAt(this);
554554
event.preventDefault(); // prevent immediate selection of any item
555555
}
556556
}
@@ -712,7 +712,7 @@ class DatePicker extends DateComponentBase {
712712
this._calendarCurrentPicker = "day";
713713
this.responsivePopover = await this._respPopover();
714714

715-
this.responsivePopover.openBy(this);
715+
this.responsivePopover.showAt(this);
716716
}
717717

718718
togglePicker() {

‎packages/main/src/FileUploader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ class FileUploader extends UI5Element {
386386
const popover = await this._getPopover();
387387

388388
if (popover) {
389-
popover.openBy(this);
389+
popover.showAt(this);
390390
}
391391
}
392392

‎packages/main/src/Input.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -691,7 +691,7 @@ class Input extends UI5Element {
691691

692692
_click(event) {
693693
if (isPhone() && !this.readonly && this.Suggestions) {
694-
this.Suggestions.openBy(this);
694+
this.Suggestions.showAt(this);
695695
this.isRespPopoverOpen = true;
696696
}
697697
}
@@ -813,7 +813,7 @@ class Input extends UI5Element {
813813

814814
if (popover) {
815815
this._isPopoverOpen = true;
816-
popover.openBy(this);
816+
popover.showAt(this);
817817
}
818818
}
819819

‎packages/main/src/MultiComboBox.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@ class MultiComboBox extends UI5Element {
503503
if (filteredItems.length === 0) {
504504
this.allItemsPopover.close();
505505
} else {
506-
this.allItemsPopover.openBy(this);
506+
this.allItemsPopover.showAt(this);
507507
}
508508
}
509509

@@ -664,7 +664,7 @@ class MultiComboBox extends UI5Element {
664664

665665
_click(event) {
666666
if (isPhone() && !this.readonly && !this._showMorePressed) {
667-
this.allItemsPopover.openBy(this);
667+
this.allItemsPopover.showAt(this);
668668
}
669669

670670
this._showMorePressed = false;
@@ -731,7 +731,7 @@ class MultiComboBox extends UI5Element {
731731
const popover = await this._getPopover();
732732

733733
if (popover) {
734-
popover.openBy(this);
734+
popover.showAt(this);
735735
}
736736
}
737737

‎packages/main/src/Popover.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -290,14 +290,14 @@ class Popover extends Popup {
290290
}
291291

292292
/**
293-
* Opens the popover.
294-
* @param {HTMLElement} opener the element that the popover is opened by
293+
* Shows the popover.
294+
* @param {HTMLElement} opener the element that the popover is shown at
295295
* @param {boolean} preventInitialFocus prevents applying the focus inside the popover
296296
* @public
297297
* @async
298298
* @returns {Promise} Resolved when the popover is open
299299
*/
300-
async openBy(opener, preventInitialFocus = false) {
300+
async showAt(opener, preventInitialFocus = false) {
301301
if (!opener || this.opened) {
302302
return;
303303
}
@@ -337,7 +337,7 @@ class Popover extends Popup {
337337
let overflowsBottom = false;
338338
let overflowsTop = false;
339339

340-
if (closedPopupParent.openBy) {
340+
if (closedPopupParent.showAt) {
341341
const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
342342
overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
343343
overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;

‎packages/main/src/ResponsivePopover.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,13 @@ class ResponsivePopover extends Popover {
114114
}
115115

116116
/**
117-
* Opens popover on desktop and dialog on mobile.
118-
* @param {HTMLElement} opener the element that the popover is opened by
117+
* Shows popover on desktop and dialog on mobile.
118+
* @param {HTMLElement} opener the element that the popover is shown at
119119
* @public
120120
* @async
121121
* @returns {Promise} Resolves when the responsive popover is open
122122
*/
123-
async openBy(opener) {
123+
async showAt(opener) {
124124
this.style.display = this._isPhone ? "contents" : "";
125125

126126
if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
@@ -132,7 +132,7 @@ class ResponsivePopover extends Popover {
132132
if (!this.noStretch) {
133133
this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
134134
}
135-
await super.openBy(opener);
135+
await super.showAt(opener);
136136
} else {
137137
this.style.zIndex = getNextZIndex();
138138
await this._dialog.show();
@@ -156,7 +156,7 @@ class ResponsivePopover extends Popover {
156156
return this.close();
157157
}
158158

159-
this.openBy(opener);
159+
this.showAt(opener);
160160
}
161161

162162
/**

‎packages/main/src/Select.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ class Select extends UI5Element {
372372
if (this._isPickerOpen) {
373373
this.responsivePopover.close();
374374
} else {
375-
this.responsivePopover.openBy(this);
375+
this.responsivePopover.showAt(this);
376376
}
377377
}
378378

@@ -712,7 +712,7 @@ class Select extends UI5Element {
712712
async openValueStatePopover() {
713713
this.popover = await this._getPopover();
714714
if (this.popover) {
715-
this.popover.openBy(this);
715+
this.popover.showAt(this);
716716
}
717717
}
718718

‎packages/main/src/TabContainer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ class TabContainer extends UI5Element {
497497
if (this.responsivePopover.opened) {
498498
this.responsivePopover.close();
499499
} else {
500-
this.responsivePopover.openBy(button);
500+
this.responsivePopover.showAt(button);
501501
}
502502
}
503503

‎packages/main/src/TextArea.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -498,7 +498,7 @@ class TextArea extends UI5Element {
498498

499499
async openPopover() {
500500
this.popover = await this._getPopover();
501-
this.popover && this.popover.openBy(this.shadowRoot.querySelector(".ui5-textarea-inner"));
501+
this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
502502
}
503503

504504
async closePopover() {

‎packages/main/src/TimePickerBase.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ class TimePickerBase extends UI5Element {
302302
async openPicker() {
303303
this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
304304
const responsivePopover = await this._getPopover();
305-
responsivePopover.openBy(this);
305+
responsivePopover.showAt(this);
306306
this._isPickerOpen = true;
307307
}
308308

0 commit comments

Comments
 (0)