Skip to content

Commit 6ca5862

Browse files
dimovpetardimovpetar
committed
refactor(popup): Move all mediaRange calculations to Popup
1 parent 7ed652e commit 6ca5862

File tree

3 files changed

+72
-24
lines changed

3 files changed

+72
-24
lines changed

‎packages/main/src/Dialog.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -329,10 +329,7 @@ class Dialog extends Popup {
329329

330330
_show() {
331331
super._show();
332-
requestAnimationFrame(() => {
333-
this._updateMediaRange(); // TODO: Carefully put in Popup
334-
this._center();
335-
});
332+
requestAnimationFrame(this._center.bind(this));
336333
}
337334

338335
onBeforeRendering() {

‎packages/main/src/Popup.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -270,10 +270,6 @@ abstract class Popup extends UI5Element {
270270
}
271271

272272
onAfterRendering() {
273-
renderFinished().then(() => {
274-
this._updateMediaRange();
275-
});
276-
277273
if (this.open) {
278274
this._registerResizeHandler();
279275
} else {
@@ -358,11 +354,6 @@ abstract class Popup extends UI5Element {
358354

359355
this._show();
360356
this._opened = true;
361-
362-
if (this.getDomRef()) {
363-
this._updateMediaRange();
364-
}
365-
366357
this._addOpenedPopup();
367358

368359
this.open = true;
@@ -611,6 +602,8 @@ abstract class Popup extends UI5Element {
611602
if (this.isConnected) {
612603
this.setAttribute("popover", "manual");
613604
this.showPopover();
605+
606+
requestAnimationFrame(this._updateMediaRange.bind(this));
614607
}
615608
}
616609

‎packages/main/test/pages/Dialog.html‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
</head>
2525

2626
<body>
27-
<ui5-button id="btnUnwanted">Open dialog with unwanted animation</ui5-button>
2827
<div class="wrapper">
2928
<div>
3029
<ui5-segmented-button id="theme-switch">
@@ -96,6 +95,9 @@
9695
<br>
9796
<br>
9897
<ui5-button id="open-big-content">Open dialog with big content</ui5-button>
98+
<br>
99+
<br>
100+
<ui5-button id="open-big-dynamic-content">Open dynamic dialog with big content</ui5-button>
99101
</div>
100102
<ui5-block-layer></ui5-block-layer>
101103

@@ -872,16 +874,6 @@
872874
</ui5-dialog>
873875

874876
<script>
875-
document.getElementById("btnUnwanted").addEventListener("click", function () {
876-
const dialog = document.createElement("ui5-dialog");
877-
const child1 = `<div data-v-f5de9ea6="" data-v-d7dd9f52="" class="header" slot="header" design="Header"><h3 data-v-f5de9ea6="" automation-id="contactEmailFormModal-header">Contact form</h3><udex-control-button data-v-f5de9ea6="" automation-id="contactEmailFormModal-headerCloseButton" slot="endContent" icon-only="" has-icon="" accessible-name="close button"><template shadowrootmode="open" shadowrootdelegatesfocus=""></template></udex-control-button></div>`
878-
const child2 = `<div data-v-d7dd9f52="" class="modal-content" automation-id="contactEmailForm-modalContent"><div data-v-d7dd9f52="" class="modal-form-header" automation-id="contactEmailForm-modalFormHeader"><div data-v-9c54a22e="" data-v-d7dd9f52="" class="header-container" automation-id="contactEmailForm-contactEmailHeader"><div data-v-9c54a22e="" class="relative block h-full max-w-[130px]" automation-id="partnerProfilePage-partnerLogo-root"><div automation-id="partnerProfilePage-partnerLogo" class="border-grey-2 block h-[62px] w-[62px] rounded-sm border bg-white flex justify-center items-center !w-[60px] !h-[60px] !border-none"><img class="h-full w-full object-contain" src="/sap/details/api//media/storage/0000225382/1740396106410-0000225382.png" automation-id="partnerProfilePage-partnerLogo-img"></div></div><div data-v-9c54a22e="" class="HeadingMediumM-size"><div data-v-9c54a22e="">Contact SEIDOR</div><div data-v-9c54a22e=""></div></div></div></div><form data-v-a57c5c36="" data-v-d7dd9f52="" automation-id="contactEmailForm-contactEmailFormContent"><div data-v-a57c5c36="" class="form-field-wrapper mobile-only"><div data-v-a57c5c36="" class="newsletter-option"><p data-v-a57c5c36="" class="newsletter-label">Stay informed about our updates</p><udex-checkbox data-v-a57c5c36="" id="newsletter" tabindex="-1" automation-id="newsletter-option"><template shadowrootmode="open"></template></udex-checkbox><small data-v-a57c5c36="" class="newsletter-info">You can unsubscribe at any time.</small></div></div><div data-v-a57c5c36="" class="system-field alternate-view"><udex-text-field data-v-a57c5c36="" id="referral_code" name="referral_code" placeholder="Enter your referral code" tabindex="-1" automation-id="referral-code-input"><template shadowrootmode="open"></template></udex-text-field><small data-v-a57c5c36="" class="field-hint">Enter code above</small></div><udex-message-strip data-v-a57c5c36="" status-type="Icon" class="mb-8"><template shadowrootmode="open"></template><div data-v-a57c5c36="" class="flex items-center justify-between gap-4"><span data-v-a57c5c36="" class="body-s-size">We suggest to read some tips before selecting a Partner</span><udex-button data-v-a57c5c36="" class="flex shrink-0 justify-center" id="custom-usage-patterns-forms-learn-more" accessible-name="Read Tips before Selecting a Partner" udex-button=""><template shadowrootmode="open" shadowrootdelegatesfocus=""></template>Read Tips</udex-button></div></udex-message-strip><div data-v-a57c5c36="" class="HeadingMediumXXXS-size mb-4" automation-id="contactEmailFormContent-personalDetailsTitle">Personal Details</div><div data-v-a57c5c36="" class="flex flex-col gap-1.5 max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetails"><div data-v-a57c5c36="" class="flex justify-between gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetailsNames"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="firstNameError" supporting-text="" automation-id="contactEmailFormContent-firstName"><template shadowrootmode="open"></template></udex-text-field><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="lastNameError" supporting-text="" automation-id="contactEmailFormContent-lastName"><template shadowrootmode="open"></template></udex-text-field></div><div data-v-a57c5c36="" class="flex justify-between gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-personalDetailsContacts"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="emailError" supporting-text="" automation-id="contactEmailFormContent-email"><template shadowrootmode="open"></template></udex-text-field><udex-phone-number-field data-v-a57c5c36="" id="udex-phone-number-field" value-state="Standard" automation-id="contactEmailFormContent-phoneNumber"><template shadowrootmode="open"></template></udex-phone-number-field></div></div><div data-v-a57c5c36="" class="HeadingMediumXXXS-size mb-4" automation-id="contactEmailFormContent-companyDetailsTitle">Company Details</div><div data-v-a57c5c36="" class="mb-1 flex flex-col gap-1.5" automation-id="contactEmailFormContent-companyDetails"><div data-v-a57c5c36="" class="flex gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-companyDetailsInputs"><udex-text-field data-v-a57c5c36="" value-state="Standard" aria-describedby="companyError" supporting-text="" automation-id="contactEmailFormContent-companyName"><template shadowrootmode="open"></template></udex-text-field><udex-country-selector data-v-a57c5c36="" id="country-selector" value-state="Standard" width="380px" search-placeholder="Search Countries and Regions" supporting-text="" automation-id="contactEmailFormContent-countrySelector" value=""><template shadowrootmode="open"></template></udex-country-selector></div><div data-v-a57c5c36="" class="flex gap-6 max-[850px]:flex-col max-[850px]:gap-2" automation-id="contactEmailFormContent-companyDetailsInputs"><udex-select-box data-v-a57c5c36="" value-state="Standard" supporting-text="" value=""><template shadowrootmode="open"></template><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item><udex-select-box-item data-v-a57c5c36=""></udex-select-box-item></udex-select-box></div></div><udex-textarea data-v-a57c5c36="" id="textarea" value-state="Standard" supporting-text="" automation-id="contactEmailFormContent-comments"><template shadowrootmode="open"></template></udex-textarea><div data-v-1f58e182="" data-v-a57c5c36="" class="agreement body-s-size" automation-id="contactEmailFormContent-agreement"><div data-v-1f58e182="" class="checkbox-agreement-wrapper" automation-id="contactEmailForm-checkboxWrapper"><udex-checkbox data-v-1f58e182="" value-state="Standard" automation-id="contactEmailForm-checkbox"><template shadowrootmode="open"></template></udex-checkbox><span data-v-1f58e182="" automation-id="contactEmailForm-agreementText"> I agree that SAP will share this data with SEIDOR so that they can contact me regarding my request. * <udex-link data-v-1f58e182="" automation-id="contactEmailForm-privacyLink"><template shadowrootmode="open"></template>View Privacy Statement.</udex-link></span></div><!----></div><div data-v-a57c5c36="" class="mt-6" automation-id="contactEmailFormContent-recaptcha"></div><!----><udex-button data-v-a57c5c36="" class="mt-6" id="custom-usage-patterns-forms-submit" accessible-name="Contact Sales Submit" udex-button="" automation-id="contactEmailFormContent-submitButton"><template shadowrootmode="open" shadowrootdelegatesfocus=""></template>Send</udex-button></form></div>`;
879-
880-
dialog.innerHTML = child1 + child2;
881-
document.body.appendChild(dialog);
882-
dialog.open = true;
883-
});
884-
885877
cbCompact.addEventListener("ui5-change", function () {
886878
document.body.classList.toggle("ui5-content-density-compact", cbCompact.checked);
887879
});
@@ -1138,6 +1130,72 @@
11381130
document.getElementById("open-big-content").addEventListener("click", function () {
11391131
window["dlgBigContent"].open = true;
11401132
});
1133+
1134+
document.getElementById("open-big-dynamic-content").addEventListener("click", function () {
1135+
const dialog = document.createElement("ui5-dialog");
1136+
const child1 = `
1137+
<div slot="header" design="Header">
1138+
<h3>Random Title</h3>
1139+
</div>
1140+
`;
1141+
1142+
const child2 = `
1143+
<div>
1144+
<div>
1145+
<div>
1146+
<div>
1147+
<div>
1148+
<img src="randomImage.png">
1149+
</div>
1150+
</div>
1151+
<div>
1152+
<div>Contact RANDOM CORP</div>
1153+
<div>Some subtitle</div>
1154+
</div>
1155+
</div>
1156+
</div>
1157+
<form>
1158+
<div>
1159+
<div>
1160+
<p>Subscribe to our newsletter</p>
1161+
<small>No spam, only updates.</small>
1162+
</div>
1163+
</div>
1164+
<div>
1165+
<small>Hint: Use a valid code</small>
1166+
</div>
1167+
<div>Your Info</div>
1168+
<div>
1169+
<div>
1170+
</div>
1171+
<div>
1172+
</div>
1173+
</div>
1174+
<div>Company Info</div>
1175+
<div>
1176+
<div>
1177+
</div>
1178+
<div>
1179+
</div>
1180+
</div>
1181+
<div></div>
1182+
<div>
1183+
<div>
1184+
<span>
1185+
I agree to the random terms and conditions.
1186+
Read Privacy Policy.
1187+
</span>
1188+
</div>
1189+
</div>
1190+
<div></div>
1191+
</form>
1192+
</div>
1193+
`;
1194+
1195+
dialog.innerHTML = child1 + child2;
1196+
document.body.appendChild(dialog);
1197+
dialog.open = true;
1198+
});
11411199
</script>
11421200
</body>
11431201

0 commit comments

Comments
 (0)