github.com/DerekStrickland/consul@v1.4.5/ui-v2/app/components/list-collection.js (about)

     1  import { computed, get, set } from '@ember/object';
     2  import Component from 'ember-collection/components/ember-collection';
     3  import PercentageColumns from 'ember-collection/layouts/percentage-columns';
     4  import style from 'ember-computed-style';
     5  import WithResizing from 'consul-ui/mixins/with-resizing';
     6  import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
     7  const $$ = qsaFactory();
     8  export default Component.extend(WithResizing, {
     9    tagName: 'div',
    10    attributeBindings: ['style'],
    11    height: 500,
    12    cellHeight: 113,
    13    style: style('getStyle'),
    14    classNames: ['list-collection'],
    15    init: function() {
    16      this._super(...arguments);
    17      this.columns = [25, 25, 25, 25];
    18    },
    19    didReceiveAttrs: function() {
    20      this._super(...arguments);
    21      this._cellLayout = this['cell-layout'] = new PercentageColumns(
    22        get(this, 'items.length'),
    23        get(this, 'columns'),
    24        get(this, 'cellHeight')
    25      );
    26    },
    27    getStyle: computed('height', function() {
    28      return {
    29        height: get(this, 'height'),
    30      };
    31    }),
    32    resize: function(e) {
    33      const $self = this.element;
    34      const $appContent = [...$$('main > div')][0];
    35      if ($appContent) {
    36        const rect = $self.getBoundingClientRect();
    37        const $footer = [...$$('footer[role="contentinfo"]')][0];
    38        const space = rect.top + $footer.clientHeight;
    39        const height = e.detail.height - space;
    40        this.set('height', Math.max(0, height));
    41        this.updateItems();
    42        this.updateScrollPosition();
    43      }
    44      const width = e.detail.width;
    45      const len = get(this, 'columns.length');
    46      switch (true) {
    47        case width > 1013:
    48          if (len != 4) {
    49            set(this, 'columns', [25, 25, 25, 25]);
    50          }
    51          break;
    52        case width > 744:
    53          if (len != 3) {
    54            set(this, 'columns', [33, 33, 34]);
    55          }
    56          break;
    57        case width > 487:
    58          if (len != 2) {
    59            set(this, 'columns', [50, 50]);
    60          }
    61          break;
    62        case width < 488:
    63          if (len != 1) {
    64            set(this, 'columns', [100]);
    65          }
    66      }
    67      if (len !== get(this, 'columns.length')) {
    68        this._cellLayout = this['cell-layout'] = new PercentageColumns(
    69          get(this, 'items.length'),
    70          get(this, 'columns'),
    71          get(this, 'cellHeight')
    72        );
    73      }
    74    },
    75  });