48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
import Component from '@ember/component';
|
|
import SlotsMixin from 'block-slots';
|
|
import { inject as service } from '@ember/service';
|
|
import templatize from 'consul-ui/utils/templatize';
|
|
export default Component.extend(SlotsMixin, {
|
|
loading: false,
|
|
authorized: true,
|
|
enabled: true,
|
|
classNames: ['app-view'],
|
|
classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
|
|
dom: service('dom'),
|
|
didReceiveAttrs: function() {
|
|
this._super(...arguments);
|
|
// right now only manually added classes are hoisted to <html>
|
|
const $root = this.dom.root();
|
|
let cls = this['class'] || '';
|
|
if (this.loading) {
|
|
cls += ' loading';
|
|
} else {
|
|
$root.classList.remove(...templatize(['loading']));
|
|
}
|
|
if (cls) {
|
|
// its possible for 'layout' templates to change after insert
|
|
// check for these specific layouts and clear them out
|
|
const receivedClasses = new Set(templatize(cls.split(' ')));
|
|
const difference = new Set([...$root.classList].filter(item => !receivedClasses.has(item)));
|
|
[...difference].forEach(function(item, i) {
|
|
if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) {
|
|
$root.classList.remove(item);
|
|
}
|
|
});
|
|
$root.classList.add(...receivedClasses);
|
|
}
|
|
},
|
|
didInsertElement: function() {
|
|
this._super(...arguments);
|
|
this.didReceiveAttrs();
|
|
},
|
|
didDestroyElement: function() {
|
|
this._super(...arguments);
|
|
const cls = this['class'] + ' loading';
|
|
if (cls) {
|
|
const $root = this.dom.root();
|
|
$root.classList.remove(...templatize(cls.split(' ')));
|
|
}
|
|
},
|
|
});
|