diff --git a/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html b/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html new file mode 100644 index 00000000000..c07a72aea3f --- /dev/null +++ b/components/dialog/demo/dialog-fullscreen-in-iframe-contents.html @@ -0,0 +1,42 @@ + + + + + d2l-dialog-fullscreen (iframe contents) + + + + + + Open Dialog + + +

This dialog is rendered inside an iframe that is smaller than the browser viewport. It uses the ifrau backdrop service to size itself to the iframe's available space rather than the full window.

+

Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker

+

Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

+

Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

+

Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker

+

Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

+ Save + Cancel +
+ + + + diff --git a/components/dialog/demo/dialog-fullscreen-in-iframe.html b/components/dialog/demo/dialog-fullscreen-in-iframe.html new file mode 100644 index 00000000000..99fc0e61b8b --- /dev/null +++ b/components/dialog/demo/dialog-fullscreen-in-iframe.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + +

Fullscreen Dialog inside a constrained iframe

+ +

The dashed box below is a fixed-size iframe (smaller than the browser viewport) hosting a page that opens a d2l-dialog-fullscreen. This simulates the dialog being embedded in a product iframe that doesn't fill the whole window, relying on the ifrau backdrop service to size itself to the available iframe space.

+ +
+ + + +
+ + + diff --git a/components/dialog/dialog-mixin.js b/components/dialog/dialog-mixin.js index be94f4730e4..d007de920bd 100644 --- a/components/dialog/dialog-mixin.js +++ b/components/dialog/dialog-mixin.js @@ -116,6 +116,7 @@ export const DialogMixin = superclass => class extends superclass { const ifrauDialogService = await tryGetIfrauBackdropService(); if (this.opened) { if (ifrauDialogService) { + this.#ifrauDialogService = ifrauDialogService; this._ifrauContextInfo = await ifrauDialogService.showBackdrop(); this._inIframe = true; } @@ -125,6 +126,7 @@ export const DialogMixin = superclass => class extends superclass { ifrauDialogService.hideBackdrop(); this._ifrauContextInfo = null; } + this.#ifrauDialogService = null; this._close(); } } @@ -165,6 +167,7 @@ export const DialogMixin = superclass => class extends superclass { } #useNativeInitialized = false; + #ifrauDialogService = null; #handleMvcDialogOpen = () => { // native dialogs on top layer will be stacked on non-native dialogs regardless of z-index @@ -182,6 +185,7 @@ export const DialogMixin = superclass => class extends superclass { }; #updateSize = async() => { + if (this._inIframe && this.#ifrauDialogService) this._ifrauContextInfo = await this.#ifrauDialogService.getContextInfo(); if (this._autoSize) { if (this._ifrauContextInfo) { if (this._ifrauContextInfo.top > defaultMargin.top) { diff --git a/components/dialog/test/dialog-ifrau.vdiff.js b/components/dialog/test/dialog-ifrau.vdiff.js index e9d9f95c5f8..f7a483c3e96 100644 --- a/components/dialog/test/dialog-ifrau.vdiff.js +++ b/components/dialog/test/dialog-ifrau.vdiff.js @@ -34,6 +34,7 @@ describe('dialog-ifrau', () => { ); await ifrauHost.registerService('dialogWC', '0.1', { + getContextInfo: () => ({ availableHeight: ifrau.availableHeight, top: ifrau.top }), showBackdrop: () => { return { availableHeight: ifrau.availableHeight, diff --git a/index.html b/index.html index 618b50f5eb3..69365387614 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@

Components

  • d2l-dialog (Nested)
  • d2l-dialog-confirm
  • d2l-dialog-fullscreen
  • +
  • d2l-dialog-fullscreen (iFramed)