BigW Consortium Gitlab

close_reopen_report_toggle.js 2.42 KB
Newer Older
1
import DropLab from './droplab/drop_lab';
2 3 4 5 6 7 8 9 10 11
import ISetter from './droplab/plugins/input_setter';

// Todo: Remove this when fixing issue in input_setter plugin
const InputSetter = Object.assign({}, ISetter);

class CloseReopenReportToggle {
  constructor(opts = {}) {
    this.dropdownTrigger = opts.dropdownTrigger;
    this.dropdownList = opts.dropdownList;
    this.button = opts.button;
Luke "Jared" Bennett committed
12
  }
13

Luke "Jared" Bennett committed
14
  initDroplab() {
15 16 17
    this.reopenItem = this.dropdownList.querySelector('.reopen-item');
    this.closeItem = this.dropdownList.querySelector('.close-item');

18
    this.droplab = new DropLab();
19 20 21 22 23 24 25

    const config = this.setConfig();

    this.droplab.init(this.dropdownTrigger, this.dropdownList, [InputSetter], config);
  }

  updateButton(isClosed) {
26
    this.toggleButtonType(isClosed);
27 28 29 30

    this.button.blur();
  }

31 32
  toggleButtonType(isClosed) {
    const [showItem, hideItem] = this.getButtonTypes(isClosed);
33

34 35
    showItem.classList.remove('hidden');
    showItem.classList.add('droplab-item-selected');
36

37 38
    hideItem.classList.add('hidden');
    hideItem.classList.remove('droplab-item-selected');
39

40 41
    showItem.click();
  }
42

43 44
  getButtonTypes(isClosed) {
    return isClosed ? [this.reopenItem, this.closeItem] : [this.closeItem, this.reopenItem];
45 46
  }

47
  setDisable(shouldDisable = true) {
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
    if (shouldDisable) {
      this.button.setAttribute('disabled', 'true');
      this.dropdownTrigger.setAttribute('disabled', 'true');
    } else {
      this.button.removeAttribute('disabled');
      this.dropdownTrigger.removeAttribute('disabled');
    }
  }

  setConfig() {
    const config = {
      InputSetter: [
        {
          input: this.button,
          valueAttribute: 'data-text',
          inputAttribute: 'data-value',
        },
        {
          input: this.button,
          valueAttribute: 'data-text',
          inputAttribute: 'title',
        },
        {
          input: this.button,
          valueAttribute: 'data-button-class',
          inputAttribute: 'class',
        },
        {
          input: this.dropdownTrigger,
          valueAttribute: 'data-toggle-class',
          inputAttribute: 'class',
        },
        {
          input: this.button,
          valueAttribute: 'data-url',
          inputAttribute: 'href',
        },
        {
          input: this.button,
          valueAttribute: 'data-method',
          inputAttribute: 'data-method',
        },
      ],
    };

    return config;
  }
}

export default CloseReopenReportToggle;