Skip to content

fix(editor-modal): attach overlay to topmost same-origin window #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ignaciogros merged 4 commits into from
May 13, 2026
Merged

fix(editor-modal): attach overlay to topmost same-origin window #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1e570f
fix(editor-modal): attach overlay to topmost same-origin window
erseco Apr 29, 2026
4b354ff
Merge branch 'main' into fix/editor-modal-host-window
ignaciogros May 11, 2026
177e04b
Merge branch 'main' into fix/editor-modal-host-window
ignaciogros May 11, 2026
44b67a9
Merge branch 'main' into fix/editor-modal-host-window
ignaciogros May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 39 additions & 10 deletions amd/build/editor_modal.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,29 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
var loadingModal = null;
var isSaving = false;
var hasUnsavedChanges = false;
var hostWindow = null;
var hostDocument = null;

var getString = Str.get_string;

/**
* Resolve the topmost same-origin window so the overlay can cover the full
* viewport even when the modal is opened from inside a small frame
* (e.g. a popup-mode launcher or an embedded iframe).
* @returns {Window}
*/
var getHostWindow = function() {
var candidate = window;
try {
while (candidate.parent && candidate.parent !== candidate && candidate.parent.document) {
candidate = candidate.parent;
}
} catch (e) {
// Cross-origin parent — stay where we are.
}
return candidate;
};

/**
* Prefetch language strings used by the modal.
*/
Expand All @@ -61,7 +81,8 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
};

var createLoadingModal = function() {
var modal = document.createElement('div');
var targetDocument = hostDocument || document;
var modal = targetDocument.createElement('div');
modal.className = 'exescorm-loading-modal';
modal.id = 'exescorm-loading-modal';

Expand All @@ -77,7 +98,7 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
'<h3 class="exescorm-loading-modal__title">' + strings[0] + '</h3>' +
'<p class="exescorm-loading-modal__message">' + strings[1] + '</p>' +
'</div>';
document.body.appendChild(modal);
targetDocument.body.appendChild(modal);
return modal;
});
};
Expand Down Expand Up @@ -149,6 +170,8 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
}
var doClose = function() {
var wasShowingLoader = isSaving || (skipConfirm === true);
var activeWindow = hostWindow || window;
var activeDocument = hostDocument || document;

overlay.remove();
overlay = null;
Expand All @@ -157,9 +180,11 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
isSaving = false;
hasUnsavedChanges = false;

document.body.style.overflow = '';
window.removeEventListener('message', handleMessage);
document.removeEventListener('keydown', handleKeydown);
activeDocument.body.style.overflow = '';
activeWindow.removeEventListener('message', handleMessage);
activeDocument.removeEventListener('keydown', handleKeydown);
hostWindow = null;
hostDocument = null;

if (wasShowingLoader) {
setTimeout(function() {
Expand Down Expand Up @@ -320,15 +345,19 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
iframe.setAttribute('frameborder', '0');
overlay.appendChild(iframe);

// Append to body.
document.body.appendChild(overlay);
document.body.style.overflow = 'hidden';
// Attach the overlay to the topmost same-origin window so the modal covers
// the full viewport even when triggered from inside a small frame
// (e.g. a popup-mode launcher or an embedded iframe).
hostWindow = getHostWindow();
hostDocument = hostWindow.document;
hostDocument.body.appendChild(overlay);
hostDocument.body.style.overflow = 'hidden';

// Listen for messages from the editor iframe.
window.addEventListener('message', handleMessage);
hostWindow.addEventListener('message', handleMessage);

// Listen for Escape key.
document.addEventListener('keydown', handleKeydown);
hostDocument.addEventListener('keydown', handleKeydown);
};

return {
Expand Down
49 changes: 39 additions & 10 deletions amd/src/editor_modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,29 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
var loadingModal = null;
var isSaving = false;
var hasUnsavedChanges = false;
var hostWindow = null;
var hostDocument = null;

var getString = Str.get_string;

/**
* Resolve the topmost same-origin window so the overlay can cover the full
* viewport even when the modal is opened from inside a small frame
* (e.g. a popup-mode launcher or an embedded iframe).
* @returns {Window}
*/
var getHostWindow = function() {
var candidate = window;
try {
while (candidate.parent && candidate.parent !== candidate && candidate.parent.document) {
candidate = candidate.parent;
}
} catch (e) {
// Cross-origin parent — stay where we are.
}
return candidate;
};

/**
* Prefetch language strings used by the modal.
*/
Expand All @@ -61,7 +81,8 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
};

var createLoadingModal = function() {
var modal = document.createElement('div');
var targetDocument = hostDocument || document;
var modal = targetDocument.createElement('div');
modal.className = 'exescorm-loading-modal';
modal.id = 'exescorm-loading-modal';

Expand All @@ -77,7 +98,7 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
'<h3 class="exescorm-loading-modal__title">' + strings[0] + '</h3>' +
'<p class="exescorm-loading-modal__message">' + strings[1] + '</p>' +
'</div>';
document.body.appendChild(modal);
targetDocument.body.appendChild(modal);
return modal;
});
};
Expand Down Expand Up @@ -149,6 +170,8 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
}
var doClose = function() {
var wasShowingLoader = isSaving || (skipConfirm === true);
var activeWindow = hostWindow || window;
var activeDocument = hostDocument || document;

overlay.remove();
overlay = null;
Expand All @@ -157,9 +180,11 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
isSaving = false;
hasUnsavedChanges = false;

document.body.style.overflow = '';
window.removeEventListener('message', handleMessage);
document.removeEventListener('keydown', handleKeydown);
activeDocument.body.style.overflow = '';
activeWindow.removeEventListener('message', handleMessage);
activeDocument.removeEventListener('keydown', handleKeydown);
hostWindow = null;
hostDocument = null;

if (wasShowingLoader) {
setTimeout(function() {
Expand Down Expand Up @@ -320,15 +345,19 @@ define(['core/str', 'core/log', 'core/prefetch'], function(Str, Log, Prefetch) {
iframe.setAttribute('frameborder', '0');
overlay.appendChild(iframe);

// Append to body.
document.body.appendChild(overlay);
document.body.style.overflow = 'hidden';
// Attach the overlay to the topmost same-origin window so the modal covers
// the full viewport even when triggered from inside a small frame
// (e.g. a popup-mode launcher or an embedded iframe).
hostWindow = getHostWindow();
hostDocument = hostWindow.document;
hostDocument.body.appendChild(overlay);
hostDocument.body.style.overflow = 'hidden';

// Listen for messages from the editor iframe.
window.addEventListener('message', handleMessage);
hostWindow.addEventListener('message', handleMessage);

// Listen for Escape key.
document.addEventListener('keydown', handleKeydown);
hostDocument.addEventListener('keydown', handleKeydown);
};

return {
Expand Down
Loading