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

     1  import { get, set } from '@ember/object';
     2  import { inject as service } from '@ember/service';
     3  import Component from 'consul-ui/components/dom-buffer';
     4  import SlotsMixin from 'block-slots';
     5  import WithResizing from 'consul-ui/mixins/with-resizing';
     6  
     7  import templatize from 'consul-ui/utils/templatize';
     8  export default Component.extend(SlotsMixin, WithResizing, {
     9    dom: service('dom'),
    10    checked: true,
    11    height: null,
    12    // dialog is a reference to the modal-dialog 'panel' so its 'window'
    13    dialog: null,
    14    overflowingClass: 'overflowing',
    15    onclose: function() {},
    16    onopen: function() {},
    17    _open: function(e) {
    18      set(this, 'checked', true);
    19      if (get(this, 'height') === null) {
    20        if (this.element) {
    21          const dialogPanel = get(this, 'dom').element('[role="dialog"] > div > div', this.element);
    22          const rect = dialogPanel.getBoundingClientRect();
    23          set(this, 'dialog', dialogPanel);
    24          set(this, 'height', rect.height);
    25        }
    26      }
    27      this.didAppear();
    28      this.onopen(e);
    29    },
    30    didAppear: function() {
    31      this._super(...arguments);
    32      if (get(this, 'checked')) {
    33        get(this, 'dom')
    34          .root()
    35          .classList.add(...templatize(['with-modal']));
    36      }
    37    },
    38    _close: function(e) {
    39      set(this, 'checked', false);
    40      const dialogPanel = get(this, 'dialog');
    41      const overflowing = get(this, 'overflowingClass');
    42      if (dialogPanel.classList.contains(overflowing)) {
    43        dialogPanel.classList.remove(overflowing);
    44      }
    45      // TODO: should we make a didDisappear?
    46      get(this, 'dom')
    47        .root()
    48        .classList.remove(...templatize(['with-modal']));
    49      this.onclose(e);
    50    },
    51    didReceiveAttrs: function() {
    52      this._super(...arguments);
    53      // TODO: Why does setting name mean checked it false?
    54      // It's because if it has a name then it is likely to be linked
    55      // to HTML state rather than just being added via HTMLBars
    56      // and therefore likely to be immediately on the page
    57      // It's not our usecase just yet, but this should check the state
    58      // of the thing its linked to, incase that has a `checked` of true
    59      // right now we know ours is always false.
    60      if (get(this, 'name')) {
    61        set(this, 'checked', false);
    62      }
    63      if (this.element) {
    64        if (get(this, 'checked')) {
    65          // TODO: probably need an event here
    66          // possibly this.element for the target
    67          // or find the input
    68          this._open({ target: {} });
    69        }
    70      }
    71    },
    72    didInsertElement: function() {
    73      this._super(...arguments);
    74      if (get(this, 'checked')) {
    75        // TODO: probably need an event here
    76        // possibly this.element for the target
    77        // or find the input
    78        this._open({ target: {} });
    79      }
    80    },
    81    didDestroyElement: function() {
    82      this._super(...arguments);
    83      get(this, 'dom')
    84        .root()
    85        .classList.remove(...templatize(['with-modal']));
    86    },
    87    resize: function(e) {
    88      if (get(this, 'checked')) {
    89        const height = get(this, 'height');
    90        if (height !== null) {
    91          const dialogPanel = get(this, 'dialog');
    92          const overflowing = get(this, 'overflowingClass');
    93          if (height > e.detail.height) {
    94            if (!dialogPanel.classList.contains(overflowing)) {
    95              dialogPanel.classList.add(overflowing);
    96            }
    97            return;
    98          } else {
    99            if (dialogPanel.classList.contains(overflowing)) {
   100              dialogPanel.classList.remove(overflowing);
   101            }
   102          }
   103        }
   104      }
   105    },
   106    actions: {
   107      change: function(e) {
   108        if (e && e.target && e.target.checked) {
   109          this._open(e);
   110        } else {
   111          this._close();
   112        }
   113      },
   114      close: function() {
   115        get(this, 'dom').element('#modal_close').checked = true;
   116        this.onclose();
   117      },
   118    },
   119  });