github.com/outbrain/consul@v1.4.5/ui-v2/app/components/app-view.js (about)

     1  import Component from '@ember/component';
     2  import SlotsMixin from 'block-slots';
     3  import { get } from '@ember/object';
     4  import templatize from 'consul-ui/utils/templatize';
     5  const $html = document.documentElement;
     6  export default Component.extend(SlotsMixin, {
     7    loading: false,
     8    authorized: true,
     9    enabled: true,
    10    classNames: ['app-view'],
    11    classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
    12    didReceiveAttrs: function() {
    13      // right now only manually added classes are hoisted to <html>
    14      let cls = get(this, 'class') || '';
    15      if (get(this, 'loading')) {
    16        cls += ' loading';
    17      } else {
    18        $html.classList.remove(...templatize(['loading']));
    19      }
    20      if (cls) {
    21        // its possible for 'layout' templates to change after insert
    22        // check for these specific layouts and clear them out
    23        [...$html.classList].forEach(function(item, i) {
    24          if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) {
    25            $html.classList.remove(item);
    26          }
    27        });
    28        $html.classList.add(...templatize(cls.split(' ')));
    29      }
    30    },
    31    didInsertElement: function() {
    32      this.didReceiveAttrs();
    33    },
    34    didDestroyElement: function() {
    35      const cls = get(this, 'class') + ' loading';
    36      if (cls) {
    37        $html.classList.remove(...templatize(cls.split(' ')));
    38      }
    39    },
    40  });