1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Ghost-Admin/app/components/gh-billing-iframe.js
Nazar Gargol 1cf3573d12 Fixed browser URL syncronization with embeded iframe state
no issue

- Opted in to use explicit `hisotry.replaceState` and setting iframe's `src` using assignment instead of tracking it through computed property. This allows for tighter control over when iframe's history is updated which was causing problems when `src` was bound to computed property
- Added billing page metadata. This way browser history records appear with nicer signature
- Removed "update button" iframe and rewrote "global iframe" to not use modals. This allows to have single iframe on a page, which simplifies `postMessage` communication and preserve history inside iframe to be able to navigate it after closure
- Added route change handler responding to BMA app route changes. Allows to sync browser URL visible to the user with active route in BMA iframe. The sync is based on `hisory.replaceState` method that makes sure singular history records are kept in the browser history
- Added nested wildcard billing route. This is meant to catch all the nested routes inside of BMA iframe
2020-05-22 14:44:37 +12:00

43 lines
1.7 KiB
JavaScript

import Component from '@ember/component';
import {inject as service} from '@ember/service';
export default Component.extend({
billing: service(),
config: service(),
ghostPaths: service(),
ajax: service(),
didInsertElement() {
let fetchingSubscription = false;
this.billing.getBillingIframe().src = this.billing.getIframeURL();
window.addEventListener('message', (event) => {
if (event && event.data && event.data.request === 'token') {
const ghostIdentityUrl = this.get('ghostPaths.url').api('identities');
this.ajax.request(ghostIdentityUrl).then((response) => {
const token = response && response.identities && response.identities[0] && response.identities[0].token;
this.billing.getBillingIframe().contentWindow.postMessage({
request: 'token',
response: token
}, '*');
});
// NOTE: the handler is placed here to avoid additional logic to check if iframe has loaded
// receiving a 'token' request is an indication that page is ready
if (!fetchingSubscription && !this.billing.get('subscription')) {
fetchingSubscription = true;
this.billing.getBillingIframe().contentWindow.postMessage({
query: 'getSubscription',
response: 'subscription'
}, '*');
}
}
if (event && event.data && event.data.subscription) {
this.billing.set('subscription', event.data.subscription);
}
});
}
});