Skip to content

Commit 4cbe3de

Browse files
MapTo0MapTo0
authoredMay 15, 2019
fix: prevent dual event dispatching in no conflict mode (#363)
- all controls should now listen for prefixed events ui5-* - all test run with no conflict setting, therefore test pages should interact with ui5-* events - both events are now dispatched in normal mode - in no conflict mode - just the prefixed event is dispatched Fixes: #304
·
v./29.5v0.0.0-7b49a7ff1
1 parent 4b64a9c commit 4cbe3de

39 files changed

+128
-130
lines changed
 

‎packages/base/src/Configuration.js

+5
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ const getWCNoConflict = () => {
3737
return CONFIGURATION["xx-wc-no-conflict"];
3838
};
3939

40+
const _setWCNoConflict = value => {
41+
CONFIGURATION["xx-wc-no-conflict"] = value;
42+
};
43+
4044
/* Calendar stuff */
4145
const getCalendarType = () => {
4246
if (CONFIGURATION.calendarType) {
@@ -125,6 +129,7 @@ export {
125129
getCalendarType,
126130
getLocale,
127131
_setTheme,
132+
_setWCNoConflict,
128133
getSupportedLanguages,
129134
getOriginInfo,
130135
};

‎packages/base/src/UI5Element.js

+16-25
Original file line numberDiff line numberDiff line change
@@ -502,29 +502,32 @@ class UI5Element extends HTMLElement {
502502
*/
503503
fireEvent(name, data, cancelable) {
504504
let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
505+
const noConflict = getWCNoConflict();
505506

506-
let customEvent = new CustomEvent(name, {
507+
const noConflictEvent = new CustomEvent(`ui5-${name}`, {
507508
detail: data,
508509
composed: false,
509510
bubbles: true,
510511
cancelable,
511512
});
512513

513-
// This will be false if the normal event is prevented
514-
const normalEventResult = this.dispatchEvent(customEvent);
514+
// This will be false if the compat event is prevented
515+
compatEventResult = this.dispatchEvent(noConflictEvent);
515516

516-
if (UI5Element.noConflictEvents.includes(name)) {
517-
customEvent = new CustomEvent(`ui5-${name}`, {
518-
detail: data,
519-
composed: false,
520-
bubbles: true,
521-
cancelable,
522-
});
523-
524-
// This will be false if the compat event is prevented
525-
compatEventResult = this.dispatchEvent(customEvent);
517+
if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
518+
return compatEventResult;
526519
}
527520

521+
const customEvent = new CustomEvent(name, {
522+
detail: data,
523+
composed: false,
524+
bubbles: true,
525+
cancelable,
526+
});
527+
528+
// This will be false if the normal event is prevented
529+
const normalEventResult = this.dispatchEvent(customEvent);
530+
528531
// Return false if any of the two events was prevented (its result was false).
529532
return normalEventResult && compatEventResult;
530533
}
@@ -610,18 +613,6 @@ class UI5Element extends HTMLElement {
610613
},
611614
});
612615
}
613-
614-
static get noConflictEvents() {
615-
if (!this._noConflictEvents) {
616-
const noConflictConfig = getWCNoConflict();
617-
this._noConflictEvents = [];
618-
if (typeof noConflictConfig === "object" && typeof noConflictConfig.events === "string") {
619-
this._noConflictEvents = noConflictConfig.events.split(",").map(evtName => evtName.trim());
620-
}
621-
}
622-
623-
return this._noConflictEvents;
624-
}
625616
}
626617
const kebabToCamelCase = string => toCamelCase(string.split("-"));
627618
const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

‎packages/main/src/Calendar.hbs

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
month-text="{{ctr._header.monthText}}"
66
year-text="{{ctr._header.yearText}}"
77
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
8-
@pressPrevious="{{ctr._header.onPressPrevious}}"
9-
@pressNext="{{ctr._header.onPressNext}}"
10-
@btn1Press="{{ctr._header.onBtn1Press}}"
11-
@btn2Press="{{ctr._header.onBtn2Press}}"
8+
@ui5-pressPrevious="{{ctr._header.onPressPrevious}}"
9+
@ui5-pressNext="{{ctr._header.onPressNext}}"
10+
@ui5-btn1Press="{{ctr._header.onBtn1Press}}"
11+
@ui5-btn2Press="{{ctr._header.onBtn2Press}}"
1212
></ui5-calendar-header>
1313

1414
<div id="{{ctr._id}}-content" class="sapUiCalContent">
@@ -20,8 +20,8 @@
2020
._hidden="{{ctr._oMonth._hidden}}"
2121
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
2222
timestamp="{{ctr._oMonth.timestamp}}"
23-
@selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
24-
@navigate="{{ctr._oMonth.onNavigate}}"
23+
@ui5-selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
24+
@ui5-navigate="{{ctr._oMonth.onNavigate}}"
2525
></ui5-daypicker>
2626

2727
<ui5-month-picker
@@ -30,7 +30,7 @@
3030
._hidden="{{ctr._monthPicker._hidden}}"
3131
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
3232
timestamp="{{ctr._monthPicker.timestamp}}"
33-
@selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
33+
@ui5-selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
3434
></ui5-month-picker>
3535

3636
<ui5-yearpicker
@@ -40,7 +40,7 @@
4040
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
4141
timestamp="{{ctr._yearPicker.timestamp}}"
4242
._selectedYear="{{ctr._yearPicker._selectedYear}}"
43-
@selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
43+
@ui5-selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
4444
></ui5-yearpicker>
4545
</div>
4646
</div>

‎packages/main/src/DatePicker.hbs

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
?disabled="{{ctr.disabled}}"
1212
?readonly="{{ctr.readonly}}"
1313
value-state="{{ctr.valueState}}"
14-
@change="{{ctr._input.onChange}}"
15-
@input="{{ctr._input.onLiveChange}}"
14+
@ui5-change="{{ctr._input.onChange}}"
15+
@ui5-input="{{ctr._input.onLiveChange}}"
1616
data-sap-focus-ref
1717
>
1818
{{#if showIcon}}
@@ -35,8 +35,8 @@
3535
horizontal-align="{{ctr._popover.horizontalAlign}}"
3636
stay-open-on-scroll="{{ctr._popover.stayOpenOnScroll}}"
3737
.customClasses="{{ctr._popover._customClasses}}"
38-
@afterClose="{{ctr._popover.afterClose}}"
39-
@afterOpen="{{ctr._popover.afterOpen}}"
38+
@ui5-afterClose="{{ctr._popover.afterClose}}"
39+
@ui5-afterOpen="{{ctr._popover.afterOpen}}"
4040
>
4141
<ui5-calendar
4242
id="{{ctr._id}}-calendar"
@@ -45,7 +45,7 @@
4545
format-pattern="{{ctr._calendar.formatPattern}}"
4646
timestamp="{{ctr._calendar.timestamp}}"
4747
.selectedDates="{{ctr._calendar.selectedDates}}"
48-
@selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
48+
@ui5-selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
4949
></ui5-calendar>
5050
</ui5-popover>
5151

‎packages/main/src/List.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -243,11 +243,11 @@ class List extends UI5Element {
243243

244244
this._previouslySelectedItem = null;
245245

246-
this.addEventListener("_press", this.onItemPress.bind(this));
247-
this.addEventListener("_focused", this.onItemFocused.bind(this));
248-
this.addEventListener("_forwardAfter", this.onForwardAfter.bind(this));
249-
this.addEventListener("_forwardBefore", this.onForwardBefore.bind(this));
250-
this.addEventListener("_selectionRequested", this.onSelectionRequested.bind(this));
246+
this.addEventListener("ui5-_press", this.onItemPress.bind(this));
247+
this.addEventListener("ui5-_focused", this.onItemFocused.bind(this));
248+
this.addEventListener("ui5-_forwardAfter", this.onForwardAfter.bind(this));
249+
this.addEventListener("ui5-_forwardBefore", this.onForwardBefore.bind(this));
250+
this.addEventListener("ui5-_selectionRequested", this.onSelectionRequested.bind(this));
251251
}
252252

253253
onBeforeRendering() {

‎packages/main/src/ListItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
id="{{ctr._id}}-deleteSelectionControl"
4949
type="Transparent"
5050
icon="sap-icon://decline"
51-
@press="{{ctr._fnOnDelete}}"
51+
@ui5-press="{{ctr._fnOnDelete}}"
5252
></ui5-button>
5353
</div>
5454
{{/if}}

‎packages/main/src/MessageStrip.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
class="{{classes.closeIcon}}"
1111
src="sap-icon://decline"
1212
tabindex="0"
13-
@press="{{ctr._closeButton.press}}">
13+
@ui5-press="{{ctr._closeButton.press}}">
1414
</ui5-icon>
1515
{{/unless}}
1616
</div>

‎packages/main/src/Panel.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
tabindex="{{iconTabIndex}}"
1717
aria-expanded="{{expanded}}"
1818
aria-labelledby="{{ariaLabelledBy}}"
19-
@press="{{ctr._icon.press}}"
19+
@ui5-press="{{ctr._icon.press}}"
2020
></ui5-icon>
2121
{{> header}}
2222
</header>

‎packages/main/src/Select.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
<ui5-icon
2626
src="sap-icon://slim-arrow-down"
2727
class="sapWCSelectDropDownIcon"
28-
@press="{{ctr._fnClickSelectBox}}"
28+
@ui5-press="{{ctr._fnClickSelectBox}}"
2929
></ui5-icon>
3030
</div>

‎packages/main/src/ShellBar.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{{/if}}
2828

2929
<ui5-popover class="sapWCShellBarMenuPopover" hide-header placement-type="Bottom">
30-
<ui5-list separators="None" mode="SingleSelect" @itemPress={{ctr._menuItemPress}}>
30+
<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{ctr._menuItemPress}}>
3131
{{#each ctr.menuItems}}
3232
<slot name="{{this._slot}}"></slot>
3333
{{/each}}
@@ -58,7 +58,7 @@
5858
src="{{this.src}}"
5959
id="{{this.id}}"
6060
style="{{this.style}}"
61-
@press={{this.press}}>
61+
@ui5-press={{this.press}}>
6262
</ui5-icon>
6363
{{else}}
6464
<div
@@ -76,13 +76,13 @@
7676
</div>
7777

7878
<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
79-
<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
79+
<ui5-list separators="None" @ui5-itemPress="{{ctr._actionList.itemPress}}">
8080
{{#each _hiddenIcons}}
8181
<ui5-li
8282
data-ui5-external-action-item-id="{{this.refItemid}}"
8383
icon="{{this.src}}"
8484
type="Active"
85-
@_press="{{this.press}}"
85+
@ui5-_press="{{this.press}}"
8686
>{{this.text}}
8787
</ui5-li>
8888
{{/each}}

‎packages/main/src/Suggestions.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,10 @@ class Suggestions {
118118

119119
_attachItemsListeners() {
120120
const list = this._getList();
121-
list.removeEventListener("itemPress", this.fnOnSuggestionItemPress);
122-
list.addEventListener("itemPress", this.fnOnSuggestionItemPress);
123-
list.removeEventListener("itemFocused", this.fnOnSuggestionItemFocus);
124-
list.addEventListener("itemFocused", this.fnOnSuggestionItemFocus);
121+
list.removeEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
122+
list.addEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
123+
list.removeEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
124+
list.addEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
125125
}
126126

127127
_attachPopupListeners() {
@@ -130,12 +130,12 @@ class Suggestions {
130130
}
131131

132132
if (!this.attachedAfterOpened) {
133-
this._getPopover().addEventListener("afterOpen", this._onOpen.bind(this));
133+
this._getPopover().addEventListener("ui5-afterOpen", this._onOpen.bind(this));
134134
this.attachedAfterOpened = true;
135135
}
136136

137137
if (!this.attachedAfterClose) {
138-
this._getPopover().addEventListener("afterClose", this._onClose.bind(this));
138+
this._getPopover().addEventListener("ui5-afterClose", this._onClose.bind(this));
139139
this.attachedAfterClose = true;
140140
}
141141
}

‎packages/main/src/TabContainer.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div {{> controlData}} class="{{classes.main}}">
22
<div class="{{classes.header}}" id="{{ctr._id}}-header">
3-
<ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
3+
<ui5-icon @ui5-press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
44

55
<!-- tab items -->
66
<div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer">
@@ -42,12 +42,12 @@
4242
</ul>
4343
</div>
4444

45-
<ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
45+
<ui5-icon @ui5-press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
4646

4747
<!-- overflow button -->
4848
{{#if ctr.showOverflow}}
4949
<ui5-button
50-
@press="{{ctr._overflowButton.click}}"
50+
@ui5-press="{{ctr._overflowButton.click}}"
5151
class="{{classes.overflowButton}}"
5252
icon="sap-icon://slim-arrow-down"
5353
type="Transparent"
@@ -73,7 +73,7 @@
7373
hide-header
7474
placement-type="Bottom"
7575
horizontal-align="Right">
76-
<ui5-list @itemPress="{{ctr._overflowList.click}}">
76+
<ui5-list @ui5-itemPress="{{ctr._overflowList.click}}">
7777
{{#each renderItems}}
7878
{{#unless this.isSeparator}}
7979
<ui5-li-custom id="{{this.item._id}}"

‎packages/main/src/Table.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,8 @@ class Table extends UI5Element {
181181

182182
this.rows.forEach(row => {
183183
row._columnsInfo = columnSettings;
184-
row.removeEventListener("_focused", this.fnOnRowFocused);
185-
row.addEventListener("_focused", this.fnOnRowFocused);
184+
row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
185+
row.addEventListener("ui5-_focused", this.fnOnRowFocused);
186186
});
187187
}
188188

‎packages/main/src/TimelineItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
{{#*inline "itemName"}}
2727
{{#if ctr.itemNameClickable}}
28-
<ui5-link @press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
28+
<ui5-link @ui5-press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
2929
{{/if}}
3030

3131
{{#unless ctr.itemNameClickable}}

‎packages/main/test/sap/ui/webcomponents/main/pages/Button.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
var counter = 0;
157157

158158
[button, disabledButton].forEach(function (el) {
159-
el.addEventListener("press", function(event) {
159+
el.addEventListener("ui5-press", function(event) {
160160
counter += 1;
161161
input.value = counter;
162162
});

‎packages/main/test/sap/ui/webcomponents/main/pages/Card.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</ui5-card>
4545

4646
<script>
47-
card.addEventListener("headerPress", function (event) {
47+
card.addEventListener("ui5-headerPress", function (event) {
4848
console.log(event);
4949
field.value = parseInt(field.value) + 1;
5050
});

‎packages/main/test/sap/ui/webcomponents/main/pages/CheckBox.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
var counter = 0;
3838

3939
[checkBox1, checkBox2].forEach(function(el) {
40-
el.addEventListener("change", function(event) {
40+
el.addEventListener("ui5-change", function(event) {
4141
counter += 1;
4242
input.value = counter;
4343
});

‎packages/main/test/sap/ui/webcomponents/main/pages/DatePicker.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@ <h3>japanese calendar type</h3>
9292
dp.addEventListener('keydown', function() { console.log('keydown')});
9393
dp.addEventListener('blur', function() { console.log('blur')});
9494

95-
dp.addEventListener('change', function(e) {
95+
dp.addEventListener('ui5-change', function(e) {
9696
console.log('change: ', e.detail);
9797
labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
9898
});
99-
dp.addEventListener('liveChange', function(e) {
99+
dp.addEventListener('ui5-liveChange', function(e) {
100100
console.log('liveChange: ', e.detail);
101101
labelLiveChange.innerHTML = 'liveChange: ' + JSON.stringify(e.detail);
102102
});

‎packages/main/test/sap/ui/webcomponents/main/pages/DatePicker_test_page.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@
6262
document.querySelector('#lbl').innerHTML = ++counter;
6363
}
6464

65-
document.querySelector("#dp5").addEventListener("change", increaseCounter);
66-
document.querySelector("#dp8").addEventListener("change", increaseCounter);
67-
document.querySelector("#dp13").addEventListener("change", function(e) {
65+
document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
66+
document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
67+
document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
6868
document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
6969
document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
7070
});

‎packages/main/test/sap/ui/webcomponents/main/pages/Dialog.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
</ui5-dialog>
4040

4141
<script>
42-
btnOpenDialog.addEventListener("press", function() {
42+
btnOpenDialog.addEventListener("ui5-press", function() {
4343
dialog.open();
4444
});
45-
btnCloseDialog.addEventListener("press", function() {
45+
btnCloseDialog.addEventListener("ui5-press", function() {
4646
dialog.close();
4747
});
4848
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Eventing.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<script>
2323
var link = document.getElementById("defaultPreventedLink");
24-
link.addEventListener("press", function(event) {
24+
link.addEventListener("ui5-press", function(event) {
2525
event.preventDefault();
2626
});
2727
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Input.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ <h3> Input type 'URL'</h3>
9292
var labelLiveChange = document.getElementById('myLabelLiveChange');
9393
var labelSubmit = document.getElementById('myLabelSubmit');
9494

95-
input.addEventListener("input", function (event) {
95+
input.addEventListener("ui5-input", function (event) {
9696
var value = event.target.value;
9797
var suggestionItems = [];
9898

@@ -117,47 +117,47 @@ <h3> Input type 'URL'</h3>
117117
labelLiveChange.innerHTML = "Event [input] :: " + value;
118118
});
119119

120-
input.addEventListener("suggestionItemSelect", function (event) {
120+
input.addEventListener("ui5-suggestionItemSelect", function (event) {
121121
var item = event.detail.item;
122122
label.innerHTML = "Event [suggestionSelectEvent] :: " + item.id;
123123
suggestionSelectedCounter += 1;
124124
inputResult.value = suggestionSelectedCounter;
125125
});
126126

127-
input.addEventListener("change", function (event) {
127+
input.addEventListener("ui5-change", function (event) {
128128
labelChange.innerHTML = "Event [change] :: " + event.target.value;
129129
});
130130

131-
input.addEventListener("submit", function (event) {
131+
input.addEventListener("ui5-submit", function (event) {
132132
labelSubmit.innerHTML = "Event [submit] :: " + event.target.value;
133133
});
134134

135135
var changeCounter = 0;
136136
var inputCounter = 0;
137137
var suggestionSelectedCounter = 0;
138138

139-
input1.addEventListener("change", function (event) {
139+
input1.addEventListener("ui5-change", function (event) {
140140
changeCounter += 1;
141141
inputResult.value = changeCounter;
142142
});
143143

144-
input2.addEventListener("input", function (event) {
144+
input2.addEventListener("ui5-input", function (event) {
145145
inputCounter += 1;
146146
inputLiveChangeResult.value = inputCounter;
147147
});
148148

149-
myInput2.addEventListener("suggestionItemSelect", function (event) {
149+
myInput2.addEventListener("ui5-suggestionItemSelect", function (event) {
150150
var item = event.detail.item;
151151
suggestionSelectedCounter += 1;
152152
inputResult.value = suggestionSelectedCounter;
153153
});
154154

155155
var inputChangeResultCounter = 0;
156156

157-
inputChange.addEventListener("submit", function (event) {
157+
inputChange.addEventListener("ui5-submit", function (event) {
158158
inputChange.value = "Changed via API";
159159
});
160-
inputChange.addEventListener("change", function (event) {
160+
inputChange.addEventListener("ui5-change", function (event) {
161161
inputChangeResult.value = ++inputChangeResultCounter;
162162
});
163163
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Link.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h2>Link types</h2>
6767
var input = document.querySelector("#helper-input");
6868

6969
[link, disLink].forEach(function(element) {
70-
element.addEventListener("press", function(event) {
70+
element.addEventListener("ui5-press", function(event) {
7171
input.value = parseInt(input.value) + 1;
7272
});
7373
});

‎packages/main/test/sap/ui/webcomponents/main/pages/List.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ <h3 id="infoLbl">Items 3/3</h3>
206206
infoLbl.innerHTML = "Items " + info[count];
207207
};
208208

209-
list.addEventListener("itemDelete", function (event) {
209+
list.addEventListener("ui5-itemDelete", function (event) {
210210
var item = event.detail.item;
211211
var newItems = list.items.filter(function (x) {
212212
return x.id !== item.id;
@@ -220,30 +220,30 @@ <h3 id="infoLbl">Items 3/3</h3>
220220
updateInfo(newItems.length);
221221
});
222222

223-
resetBtn.addEventListener("press", resetList);
223+
resetBtn.addEventListener("ui5-press", resetList);
224224

225-
singleSelectList.addEventListener("selectionChange", function (event) {
225+
singleSelectList.addEventListener("ui5-selectionChange", function (event) {
226226
var selectedItems = event.detail.items;
227227

228228
alert("Selection changed: " + selectedItems.map(item => item.id).join("/"));
229229
});
230230

231-
singleSelectEndList.addEventListener("itemPress", function (event) {
231+
singleSelectEndList.addEventListener("ui5-itemPress", function (event) {
232232
var pressedItem = event.detail.item;
233233
lblItemPress.innerHTML = "Event] itemPress :: " + pressedItem.id;
234234
});
235235

236-
singleSelectEndList.addEventListener("selectionChange", function (event) {
236+
singleSelectEndList.addEventListener("ui5-selectionChange", function (event) {
237237
var selectedItems = event.detail.items;
238238
lblSelectionChange.innerHTML = "|Event] selectionChange :: " + selectedItems.map(item => item.id).join("/");
239239
});
240240

241-
multiSelectList.addEventListener("itemPress", function (event) {
241+
multiSelectList.addEventListener("ui5-itemPress", function (event) {
242242
var pressedItem = event.detail.item;
243243
lblItemPress2.innerHTML = "Event] itemPress :: " + pressedItem.id;
244244
});
245245

246-
multiSelectList.addEventListener("selectionChange", function (event) {
246+
multiSelectList.addEventListener("ui5-selectionChange", function (event) {
247247
var selectedItems = event.detail.items;
248248
lblSelectionChange2.innerHTML = "Event] selectionChange :: " + selectedItems.map(item => item.id).join("/");
249249
});

‎packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@
5151
document.querySelector("#lblResult").innerHTML = e.detail.item.innerHTML + ": " + ++itemDeleteCounter;
5252
}
5353

54-
list1.addEventListener("itemDelete", deleteItemHandler);
54+
list1.addEventListener("ui5-itemDelete", deleteItemHandler);
5555

56-
listEvents.addEventListener("itemPress", function (event) {
56+
listEvents.addEventListener("ui5-itemPress", function (event) {
5757
itemPressCounter += 1;
5858
itemPressResultField.value = itemPressCounter;
5959
});
6060

61-
listEvents.addEventListener("selectionChange", function (event) {
61+
listEvents.addEventListener("ui5-selectionChange", function (event) {
6262
selectionChangeCounter += 1;
6363
selectionChangeResultField.value = selectionChangeCounter;
6464
});

‎packages/main/test/sap/ui/webcomponents/main/pages/MessageStrip.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
<script>
5050
var counter = 0;
51-
messageStrip.addEventListener("close", function() {
51+
messageStrip.addEventListener("ui5-close", function() {
5252
inputField.value = ++counter;
5353
});
5454
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Panel.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,20 @@
2727

2828
<script>
2929
document.addEventListener("DOMContentLoaded", function () {
30-
panel1.addEventListener("toggle", function (event) {
30+
panel1.addEventListener("ui5-toggle", function (event) {
3131
console.log(event);
3232
event.target.headerText = event.target.collapsed ? "Click to expand!" : "Click to collapse!";
3333
field1.value = parseInt(field1.value) + 1;
3434
});
35-
panel2.addEventListener("toggle", function (event) {
35+
panel2.addEventListener("ui5-toggle", function (event) {
3636
field2.value = parseInt(field2.value) + 1;
3737
});
3838

3939
var button = document.getElementById("b1");
4040
var panel = document.getElementById("p1");
4141
var label = document.getElementById("l1");
4242

43-
button.addEventListener("press", function () {
43+
button.addEventListener("ui5-press", function () {
4444
var d = document.createElement("ui5-label");
4545
var newText = Math.random().toString();
4646
d.innerHTML = newText;

‎packages/main/test/sap/ui/webcomponents/main/pages/Popover.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<ui5-input id="field"></ui5-input>
4545

4646
<script>
47-
btnOpenPopover.addEventListener("press", function() {
47+
btnOpenPopover.addEventListener("ui5-press", function() {
4848
popoverToOpen.openBy(btnOpenPopover);
4949
});
5050
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,13 @@ <h1>ui5-radiobutton</h1>
8383
var groupEventCounter = 0;
8484

8585
[window["rb1"], window["rb2"], window["rb3"], window["rb4"]].forEach(function(radio) {
86-
radio.addEventListener("select", function(event) {
86+
radio.addEventListener("ui5-select", function(event) {
8787
counter += 1;
8888
window["field"].value = counter;
8989
});
9090
})
9191

92-
radioGroup.addEventListener("select", function(e) {
92+
radioGroup.addEventListener("ui5-select", function(e) {
9393
var radio = e.target;
9494
lblRadioGroup.innerHTML = radio.text;
9595
lblEventCounter.innerHTML = ++groupEventCounter;

‎packages/main/test/sap/ui/webcomponents/main/pages/Select.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,18 @@ <h2> Change event counter holder</h2>
6464
var counter = 0;
6565

6666
// Select
67-
select.addEventListener("change", function(e) {
67+
select.addEventListener("ui5-change", function(e) {
6868
lbl.innerHTML = "selected item :: " + e.detail.selectedItem.textContent + " :: " + (++counter);
6969
inputResult.value = counter;
7070
});
7171

72-
select2.addEventListener("change", function(e) {
72+
select2.addEventListener("ui5-change", function(e) {
7373
++counter;
7474
inputResult.value = counter;
7575
});
7676

7777
// Input with Suggestions
78-
input.addEventListener("input", function (event) {
78+
input.addEventListener("ui5-input", function (event) {
7979
var value = event.target.value;
8080
var suggestionItems = [];
8181

@@ -100,7 +100,7 @@ <h2> Change event counter holder</h2>
100100

101101

102102
// HCB button
103-
btn.addEventListener("press", function(event) {
103+
btn.addEventListener("ui5-press", function(event) {
104104
const hcb = event.target.pressed;
105105
const styles = hcb ? "background:#333;color:palegoldenrod;" : "background:#fff;color:#333;";
106106
const theme = hcb ? "sap_belize_hcb" : "sap_fiori_3";
@@ -125,7 +125,7 @@ <h2> Change event counter holder</h2>
125125

126126
var initialItemsHTML = "";
127127

128-
addItemsBtn.addEventListener("press", event => {
128+
addItemsBtn.addEventListener("ui5-press", event => {
129129
initialItemsHTML = select.innerHTML;
130130

131131
var li = document.createElement('ui5-li');
@@ -137,7 +137,7 @@ <h2> Change event counter holder</h2>
137137
select.appendChild(li);
138138
});
139139

140-
restoreItemsBtn.addEventListener("press", event => {
140+
restoreItemsBtn.addEventListener("ui5-press", event => {
141141
select.innerHTML = initialItemsHTML;
142142
});
143143
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -163,33 +163,33 @@
163163
</ui5-input>
164164

165165
<script>
166-
shellbar.addEventListener("profilePress", function(event) {
166+
shellbar.addEventListener("ui5-profilePress", function(event) {
167167
popover.openBy(event.detail.targetRef);
168168
window["press-input"].value = "Profile";
169169
});
170170

171-
shellbar.addEventListener("notificationsPress", function(event) {
171+
shellbar.addEventListener("ui5-notificationsPress", function(event) {
172172
window["press-input"].value = "Notifications"
173173
});
174174

175-
shellbar.addEventListener("productSwitchPress", function(event) {
175+
shellbar.addEventListener("ui5-productSwitchPress", function(event) {
176176
window["press-input"].value = "Product Switch"
177177
});
178178

179-
shellbar.addEventListener("logoPress", function(event) {
179+
shellbar.addEventListener("ui5-logoPress", function(event) {
180180
window["press-input"].value = "Logo"
181181
});
182182

183-
shellbar.addEventListener("coPilotPress", function(event) {
183+
shellbar.addEventListener("ui5-coPilotPress", function(event) {
184184
window["press-input"].value = "CoPilot"
185185
});
186186

187-
shellbar.addEventListener("menuItemPress", function(event) {
187+
shellbar.addEventListener("ui5-menuItemPress", function(event) {
188188
window["press-input"].value = event.detail.item.textContent;
189189
});
190190

191191
["disc", "call"].forEach(function(id) {
192-
window[id].addEventListener("press", function(event) {
192+
window[id].addEventListener("ui5-press", function(event) {
193193
window["press-input"].value = event.target.id;
194194
});
195195
});

‎packages/main/test/sap/ui/webcomponents/main/pages/Simple.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
<script>
4848
var l = document.getElementById("l");
49-
l.addEventListener("press", function(e) {
49+
l.addEventListener("ui5-press", function(e) {
5050
e.preventDefault();
5151
});
5252
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Switch.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ <h3>Custom Switch</h3>
6868
<script>
6969
var counter = 0;
7070

71-
sw.addEventListener("change", function(e) {
71+
sw.addEventListener("ui5-change", function(e) {
7272
lbl.innerHTML = e.target.checked + " : " + (++counter);
7373
field.value = counter;
7474
});

‎packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ <h2>Result</h2>
184184
<script>
185185
var result = document.getElementById("result");
186186

187-
document.getElementById("tabContainer1").addEventListener("itemSelect", function (event) {
187+
document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
188188
document.getElementById("result").innerHTML = event.detail.item.text;
189189
});
190190
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2930,11 +2930,11 @@
29302930
document.getElementById("tbl").stickyColumnHeader = !document.getElementById("tbl").stickyColumnHeader
29312931
});
29322932

2933-
document.getElementById("size-btn-650").addEventListener("press", event => {
2933+
document.getElementById("size-btn-650").addEventListener("ui5-press", event => {
29342934
document.getElementById("tbl").style.width = "650px";
29352935
});
29362936

2937-
document.getElementById("size-btn-500").addEventListener("press", event => {
2937+
document.getElementById("size-btn-500").addEventListener("ui5-press", event => {
29382938
document.getElementById("tbl").style.width = "500px";
29392939
});
29402940
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ <h2>Result</h2>
104104
<script>
105105
var result = document.getElementById("result");
106106

107-
document.getElementById("test-item").addEventListener("itemNamePress", function (event) {
107+
document.getElementById("test-item").addEventListener("ui5-itemNamePress", function (event) {
108108
result.innerHTML = event.target.getAttribute("item-name");
109109
});
110110
</script>

‎packages/main/test/sap/ui/webcomponents/main/pages/ToggleButton.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ <h2>Result</h2>
9696
<script>
9797
var result = document.getElementById("result");
9898

99-
document.getElementById("main-sample").addEventListener("press", function (event) {
99+
document.getElementById("main-sample").addEventListener("ui5-press", function (event) {
100100
var target = event.target;
101101

102102
if (target.classList.contains("toggleButton")) {

‎packages/main/test/sap/ui/webcomponents/main/pages/modules/Popups.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
function onload() {
22
// web component dialog
33
var wcBtnOpenDialog = document.querySelector('.wcBtnOpenDialog');
4-
wcBtnOpenDialog.addEventListener('press', function () {
4+
wcBtnOpenDialog.addEventListener('ui5-press', function () {
55
var wcDialog = document.querySelector('.wcDialog');
66
wcDialog.open();
77
});
88

99
var wcBtnCloseDialog = document.querySelector('.wcBtnCloseDialog');
10-
wcBtnCloseDialog.addEventListener('press', function () {
10+
wcBtnCloseDialog.addEventListener('ui5-press', function () {
1111
var wcDialog = document.querySelector('.wcDialog');
1212
wcDialog.close();
1313
});
1414

1515
var wcBtnOpenNewDialog = document.querySelector('.wcBtnOpenNewDialog');
16-
wcBtnOpenNewDialog.addEventListener('press', function () {
16+
wcBtnOpenNewDialog.addEventListener('ui5-press', function () {
1717
var wcNewDialog = document.querySelector('.wcNewDialog');
1818
wcNewDialog.open();
1919
});
2020

2121
var wcBtnOpenNewDialogPopover = document.querySelector('.wcBtnOpenNewDialogPopover');
22-
wcBtnOpenNewDialogPopover.addEventListener('press', function () {
22+
wcBtnOpenNewDialogPopover.addEventListener('ui5-press', function () {
2323
var wcNewDialogPopover = document.querySelector('.wcNewDialogPopover');
2424
wcNewDialogPopover.openBy(wcBtnOpenNewDialogPopover);
2525
});
2626

2727
// web component popover
2828
var wcBtnOpenPopover = document.querySelector('.wcBtnOpenPopover');
29-
wcBtnOpenPopover.addEventListener('press', function () {
29+
wcBtnOpenPopover.addEventListener('ui5-press', function () {
3030
var wcPopover = document.querySelector('.wcPopover');
3131
wcPopover.openBy(wcBtnOpenPopover);
3232
});
3333

3434
var wcBtnClosePopover = document.querySelector('.wcBtnClosePopover');
35-
wcBtnClosePopover.addEventListener('press', function () {
35+
wcBtnClosePopover.addEventListener('ui5-press', function () {
3636
var wcPopover = document.querySelector('.wcPopover');
3737
wcPopover.close();
3838
});
3939

4040
var wcBtnOpenNewPopover = document.querySelector('.wcBtnOpenNewPopover');
41-
wcBtnOpenNewPopover.addEventListener('press', function () {
41+
wcBtnOpenNewPopover.addEventListener('ui5-press', function () {
4242
var wcNewPopover = document.querySelector('.wcNewPopover');
4343
wcNewPopover.openBy(wcBtnOpenNewPopover);
4444
});
4545

4646
var wcBtnOpenNewPopoverDialog11 = document.querySelector('.wcBtnOpenNewPopoverDialog11');
47-
wcBtnOpenNewPopoverDialog11.addEventListener('press', function () {
47+
wcBtnOpenNewPopoverDialog11.addEventListener('ui5-press', function () {
4848
var wcNewPopoverDialog11 = document.querySelector('.wcNewPopoverDialog11');
4949
wcNewPopoverDialog11.open();
5050
});

‎packages/main/wdio.conf.js

+2
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,8 @@ exports.config = {
276276
const waitFor = ["click", "elementClick", "keys", "findElement", "elementClear", "elementSendKeys"];
277277
if (waitFor.includes(commandName)) {
278278
browser.executeAsync(function (done) {
279+
// run all the tests in no conflict mode
280+
window["sap-ui-webcomponents-main-bundle"].configuration._setWCNoConflict(true);
279281
RenderScheduler.whenFinished().then(done);
280282
});
281283
}

0 commit comments

Comments
 (0)
Please sign in to comment.