# all files / src/js/lite/ui/ DropdownUI.js

2.5% Statements 1/40
0% Branches 0/6
0% Functions 0/10
2.5% Lines 1/40

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    1×

     class DropdownUI {
      constructor($node, options) {
        this.$button = $node;
        this.options = $.extend({}, {
          target: options.container,
        }, options);
        this.setEvent();
      }

      setEvent() {
        this.$button.on('click', (e) => {
          this.toggle();
          e.stopImmediatePropagation();
        });
      }

      clear() {
        var $parent = $('.note-btn-group.open');
        $parent.find('.note-btn.active').removeClass('active');
        $parent.removeClass('open');
      }

      show() {
        this.$button.addClass('active');
        this.$button.parent().addClass('open');

        var $dropdown = this.$button.next();
        var offset = $dropdown.offset();
        var width = $dropdown.outerWidth();
        var windowWidth = $(window).width();
        var targetMarginRight = parseFloat($(this.options.target).css('margin-right'));

        if (offset.left + width > windowWidth - targetMarginRight) {
          $dropdown.css('margin-left', windowWidth - targetMarginRight - (offset.left + width));
        } else {
          $dropdown.css('margin-left', '');
        }
      }

      hide() {
        this.$button.removeClass('active');
        this.$button.parent().removeClass('open');
      }

      toggle() {
        var isOpened = this.$button.parent().hasClass('open');

        this.clear();

        if (isOpened) {
          this.hide();
        } else {
          this.show();
        }
      }
    }

    $(document).on('click', function(e) {
      if (!$(e.target).closest('.note-btn-group').length) {
        $('.note-btn-group.open').removeClass('open');
      }
    });

    $(document).on('click.note-dropdown-menu', function(e) {
      $(e.target).closest('.note-dropdown-menu').parent().removeClass('open');
    });

    export default DropdownUI;