2021-09-14 21:32:07 +03:00
|
|
|
import Component from '@glimmer/component';
|
|
|
|
import {action} from '@ember/object';
|
2021-10-22 14:02:46 +03:00
|
|
|
import {bind} from '@ember/runloop';
|
|
|
|
import {isEmpty} from '@ember/utils';
|
2021-09-14 21:32:07 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2021-09-17 12:27:43 +03:00
|
|
|
import {tracked} from '@glimmer/tracking';
|
2021-09-14 21:32:07 +03:00
|
|
|
|
2021-10-11 17:24:46 +03:00
|
|
|
export default class DesignMenuComponent extends Component {
|
2021-10-11 23:09:42 +03:00
|
|
|
@service config;
|
2021-09-27 16:01:09 +03:00
|
|
|
@service customThemeSettings;
|
2021-10-11 23:09:42 +03:00
|
|
|
@service router;
|
2021-09-14 21:32:07 +03:00
|
|
|
@service settings;
|
2021-10-13 12:39:23 +03:00
|
|
|
@service store;
|
2021-10-05 23:32:42 +03:00
|
|
|
@service themeManagement;
|
2021-09-14 21:32:07 +03:00
|
|
|
|
2021-10-13 11:11:46 +03:00
|
|
|
@tracked openSection = null;
|
2021-10-19 21:43:36 +03:00
|
|
|
|
|
|
|
themes = this.store.peekAll('theme');
|
2021-09-17 12:27:43 +03:00
|
|
|
|
2021-09-27 13:32:48 +03:00
|
|
|
constructor() {
|
|
|
|
super(...arguments);
|
2021-10-13 12:39:23 +03:00
|
|
|
|
|
|
|
// fetch all themes in the background so we can show the active theme
|
|
|
|
this.store.findAll('theme');
|
2021-10-22 14:02:46 +03:00
|
|
|
|
|
|
|
if (this.router.currentRouteName === 'settings.design.index') {
|
|
|
|
this.openDefaultSection();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.routeDidChangeHandler = bind(this, this.handleRouteDidChange);
|
|
|
|
this.router.on('routeDidChange', this.routeDidChangeHandler);
|
|
|
|
}
|
|
|
|
|
|
|
|
willDestroy() {
|
|
|
|
super.willDestroy(...arguments);
|
|
|
|
this.router.off('routeDidChange', this.routeDidChangeHandler);
|
2021-09-27 13:32:48 +03:00
|
|
|
}
|
|
|
|
|
2021-10-13 12:39:23 +03:00
|
|
|
get activeTheme() {
|
|
|
|
return this.themes.findBy('active', true);
|
|
|
|
}
|
|
|
|
|
2021-09-17 12:27:43 +03:00
|
|
|
@action
|
2021-10-04 18:34:13 +03:00
|
|
|
toggleSection(section) {
|
2021-10-13 11:11:46 +03:00
|
|
|
if (this.openSection === section) {
|
|
|
|
this.openSection = null;
|
|
|
|
} else {
|
|
|
|
this.openSection = section;
|
2021-10-13 18:06:49 +03:00
|
|
|
|
2021-10-14 16:15:11 +03:00
|
|
|
const group = this.customThemeSettings.KNOWN_GROUPS.findBy('key', section);
|
2021-10-13 18:06:49 +03:00
|
|
|
if (group && group.previewType) {
|
|
|
|
this.themeManagement.setPreviewType(group.previewType);
|
|
|
|
} else {
|
|
|
|
this.themeManagement.setPreviewType('homepage');
|
|
|
|
}
|
2021-10-13 11:11:46 +03:00
|
|
|
}
|
2021-09-17 12:27:43 +03:00
|
|
|
}
|
|
|
|
|
2021-10-11 23:09:42 +03:00
|
|
|
@action
|
|
|
|
transitionBackToIndex() {
|
|
|
|
if (this.router.currentRouteName !== 'settings.design.index') {
|
|
|
|
this.router.transitionTo('settings.design.index');
|
|
|
|
}
|
|
|
|
}
|
2021-10-18 19:37:45 +03:00
|
|
|
|
|
|
|
@action
|
|
|
|
closeAllSections() {
|
|
|
|
this.openSection = null;
|
|
|
|
}
|
2021-10-22 14:02:46 +03:00
|
|
|
|
|
|
|
openDefaultSection() {
|
|
|
|
const noCustomSettings = isEmpty(this.customThemeSettings.settings);
|
|
|
|
|
|
|
|
if (noCustomSettings) {
|
|
|
|
this.openSection = 'brand';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleRouteDidChange(transition) {
|
|
|
|
if (!transition.isAborted && transition.to?.name === 'settings.design.index') {
|
|
|
|
this.openDefaultSection();
|
|
|
|
}
|
|
|
|
}
|
2021-09-14 21:32:07 +03:00
|
|
|
}
|