Ghost/ghost/admin/app/components/gh-billing-modal.js
Nazar Gargol 5d59670ac3 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

54 lines
1.2 KiB
JavaScript

/* global key */
import Component from '@ember/component';
import {computed} from '@ember/object';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
export default Component.extend({
billing: service(),
visibilityClass: computed('billing.billingWindowOpen', function () {
return this.billing.get('billingWindowOpen') ? 'gh-billing' : 'gh-billing closed';
}),
didInsertElement() {
this._super(...arguments);
this._setupShortcuts();
},
willDestroyElement() {
this._super(...arguments);
this._removeShortcuts();
},
actions: {
closeModal() {
this.billing.closeBillingWindow();
}
},
_setupShortcuts() {
run(function () {
document.activeElement.blur();
});
this._previousKeymasterScope = key.getScope();
key('enter', 'modal', () => {
this.send('confirm');
});
key('escape', 'modal', () => {
this.send('closeModal');
});
key.setScope('modal');
},
_removeShortcuts() {
key.unbind('enter', 'modal');
key.unbind('escape', 'modal');
key.setScope(this._previousKeymasterScope);
}
});