Ghost/ghost/admin/app/components/modals/design.js
Kevin Ansfield 221db9f11e Fixed design preview and settings not updating when changing theme
refs https://github.com/TryGhost/Team/issues/1111

We now have a situation where we have modals on modals and we've lost the straightforward built-in "Data down, actions up" communication methods that we'd have workaround across nested routes/controllers. The upshot of that is we didn't have a way to trigger a refresh of the preview when a new theme was activated.

- moved the task responsible for fetching preview html from the design modal onto the `theme-management` service and adjusted it to set a tracked `previewHtml` property rather than updating an iframe directly
- added a `<GhHtmlIframe>` component that renders a basic iframe element and updates it's contents each time the `@html` argument changes
- updated design modal preview to use the new iframe component
2021-10-05 21:32:42 +01:00

47 lines
1.3 KiB
JavaScript

import Component from '@glimmer/component';
import {TrackedSet} from 'tracked-built-ins';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
import {tracked} from '@glimmer/tracking';
export default class ModalsDesignCustomizeComponent extends Component {
@service customThemeSettings;
@service settings;
@service themeManagement;
@tracked openSections = new TrackedSet();
constructor() {
super(...arguments);
this.fetchThemeSettingsTask.perform();
this.themeManagement.updatePreviewHtmlTask.perform();
}
get themeSettings() {
return this.customThemeSettings.settings;
}
get siteWideSettings() {
return this.customThemeSettings.settings.filter(setting => !setting.group);
}
get homepageSettings() {
return this.customThemeSettings.settings.filter(setting => setting.group === 'home');
}
get postPageSettings() {
return this.customThemeSettings.settings.filter(setting => setting.group === 'post');
}
@action
toggleSection(section) {
this.openSections.has(section) ? this.openSections.delete(section) : this.openSections.add(section);
}
@task
*fetchThemeSettingsTask() {
yield this.customThemeSettings.load();
}
}