mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-30 14:22:07 +03:00
7b443d4b63
no issue
The `config` service has been a source of confusion when writing with modern Ember patterns because it's use of the deprecated `ProxyMixin` forced all property access/setting to go via `.get()` and `.set()` whereas the rest of the system has mostly (there are a few other uses of ProxyObjects remaining) eliminated the use of the non-native get/set methods.
- removed use of `ProxyMixin` in the `config` service by grabbing the API response after fetching and using `Object.defineProperty()` to add native getters/setters that pass through to a tracked object holding the API response data. Ember's autotracking automatically works across the native getters/setters so we can then use the service as if it was any other native object
- updated all code to use `config.{attrName}` directly for getting/setting instead of `.get()` and `.set()`
- removed unnecessary async around `config.availableTimezones` which wasn't making any async calls
100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import {action} from '@ember/object';
|
|
import {inject as service} from '@ember/service';
|
|
import {task, timeout} from 'ember-concurrency';
|
|
import {tracked} from '@glimmer/tracking';
|
|
|
|
export default class GhSiteIframeComponent extends Component {
|
|
@service config;
|
|
|
|
@tracked isInvisible = this.args.invisibleUntilLoaded;
|
|
|
|
willDestroy() {
|
|
super.willDestroy?.(...arguments);
|
|
|
|
if (this.messageListener) {
|
|
window.removeEventListener('message', this.messageListener);
|
|
}
|
|
this.args.onDestroyed?.();
|
|
}
|
|
|
|
get srcUrl() {
|
|
const srcUrl = new URL(this.args.src || `${this.config.blogUrl}/`);
|
|
|
|
if (this.args.guid) {
|
|
srcUrl.searchParams.set('v', this.args.guid);
|
|
}
|
|
|
|
return srcUrl.href;
|
|
}
|
|
|
|
@action
|
|
resetSrcAttribute(iframe) {
|
|
// reset the src attribute and force reload each time the guid changes
|
|
// - allows for a click on the navigation item to reset back to the homepage
|
|
// or a portal preview modal to force a reload so it can fetch server-side data
|
|
if (this.args.guid !== this._lastGuid) {
|
|
if (iframe) {
|
|
if (this.args.invisibleUntilLoaded) {
|
|
this.isInvisible = true;
|
|
}
|
|
|
|
try {
|
|
if (iframe.contentWindow.location.href !== this.srcUrl) {
|
|
iframe.contentWindow.location = this.srcUrl;
|
|
} else {
|
|
iframe.contentWindow.location.reload();
|
|
}
|
|
} catch (e) {
|
|
if (e.name === 'SecurityError') {
|
|
iframe.src = this.srcUrl;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this._lastGuid = this.args.guid;
|
|
}
|
|
|
|
@action
|
|
onLoad(event) {
|
|
this.iframe = event.target;
|
|
|
|
if (this.args.invisibleUntilLoaded && typeof this.args.invisibleUntilLoaded === 'boolean') {
|
|
this.makeVisible.perform();
|
|
} else {
|
|
this.args.onLoad?.(this.iframe);
|
|
}
|
|
}
|
|
|
|
@action
|
|
attachMessageListener() {
|
|
if (typeof this.args.invisibleUntilLoaded === 'string') {
|
|
this.messageListener = (event) => {
|
|
if (this.isDestroying || this.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
const srcURL = new URL(this.srcUrl);
|
|
const originURL = new URL(event.origin);
|
|
|
|
if (originURL.origin === srcURL.origin) {
|
|
if (event.data === this.args.invisibleUntilLoaded || event.data.type === this.args.invisibleUntilLoaded) {
|
|
this.makeVisible.perform();
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('message', this.messageListener, true);
|
|
}
|
|
}
|
|
|
|
@task
|
|
*makeVisible() {
|
|
// give any scripts a bit of time to render before making visible
|
|
// allows portal to render it's overlay and prevent site background flashes
|
|
yield timeout(100);
|
|
this.isInvisible = false;
|
|
this.args.onLoad?.(this.iframe);
|
|
}
|
|
}
|