Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.

Commit

Permalink
- add form initialized event
Browse files Browse the repository at this point in the history
- post all events as messages to parent window when in iframe.
- handle setfields message posted from the parent window
  • Loading branch information
punkch committed Aug 17, 2022
1 parent 658aba9 commit 361e6ed
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 12 deletions.
64 changes: 52 additions & 12 deletions public/js/src/module/controller-webform.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ function init(formEl, data, loadErrors = []) {
if (loadErrors.length > 0) {
throw loadErrors;
}

form.view.html.dispatchEvent(events.FormInitialized());
return form;
});
}
Expand Down Expand Up @@ -821,17 +821,16 @@ function _setEventHandlers(survey) {
});

if (inIframe() && settings.parentWindowOrigin) {
document.addEventListener(
events.SubmissionSuccess().type,
postEventAsMessageToParentWindow
);
document.addEventListener(
events.Edited().type,
postEventAsMessageToParentWindow
);
document.addEventListener(
events.Close().type,
postEventAsMessageToParentWindow
Object.keys(events).forEach((eventName) => {
document.addEventListener(
events[eventName]().type,
postEventAsMessageToParentWindow
);
});
window.addEventListener(
'message',
processMessageFromParentWindow,
false
);
}

Expand Down Expand Up @@ -918,9 +917,50 @@ function postEventAsMessageToParentWindow(event) {
}
}

/**
* Handles messages from parent window when in iframe.
* https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#the_dispatched_event
*
* @param {Object} event The dispatched event object for the message
* @param {String} event.origin The origin of the window that sent the message
* @param {Object} event.source The window object that sent the message
* @param {Object} event.data The object passed from the other window
* @param {String} event.data.type The type (or command) of the message passed. Currently the only supported type is 'setfields'
* @param {Object} event.data.content Type specific content of the message.
* For the setfields type, it is expected to be a key / value map of field paths and their URI encoded values that should be set.
*/
function processMessageFromParentWindow(event) {
const { origin, data: payload } = event;

if (origin !== settings.parentWindowOrigin) {
// bail, if the message is not sent from the expected origin
return;
}

const { type, content } = payload;

switch (type) {
case 'setfields':
Object.keys(content).forEach((fieldName) => {
const inputs = document.getElementsByName(fieldName);
inputs.forEach((inputElement) => {
form.input.setVal(
inputElement,
decodeURIComponent(content[fieldName])
);
inputElement.dispatchEvent(events.Change());
});
});
break;
default:
break;
}
}

export default {
init,
setLogoutLinkVisibility,
inIframe,
postEventAsMessageToParentWindow,
processMessageFromParentWindow,
};
4 changes: 4 additions & 0 deletions public/js/src/module/event.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ events.ApplicationUpdated = function () {
return new CustomEvent('applicationupdated', { bubbles: true });
};

events.FormInitialized = function() {
return new CustomEvent('forminitialized', { bubbles: true });
};

events.FormUpdated = function () {
return new CustomEvent('formupdated', { bubbles: true });
};
Expand Down

0 comments on commit 361e6ed

Please sign in to comment.