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

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
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
class DropdownUI {
  constructor($node, options) {
    this.$button = $node;
    this.options = $.extend({}, {
      target: options.container
    }, options);
    this.setEvent();
  }
 
  setEvent() {
    this.$button.on('click', this.toggle.bind(this));
  }
 
  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;