all files / src/js/lite/ui/ PopoverUI.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
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
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
class PopoverUI {
  constructor($node, options) {
    this.$node = $node;
    this.options = $.extend({}, {
      title: '',
      content: '',
      target: options.container,
      trigger: 'hover focus',
      placement: 'bottom'
    }, options);
 
    // create popover node
    this.$popover = $([
      '<div class="note-popover in">',
      ' <div class="note-popover-arrow" />',
      ' <div class="note-popover-content" />',
      '</div>'
    ].join(''));
 
    // define event
    if (this.options.trigger !== 'manual') {
      const showCallback = this.show.bind(this);
      const hideCallback = this.hide.bind(this);
      const toggleCallback = this.toggle.bind(this);
      this.options.trigger.split(' ').forEach(function(eventName) {
        if (eventName === 'hover') {
          $node.off('mouseenter').on('mouseenter', showCallback);
          $node.off('mouseleave').on('mouseleave', hideCallback);
        } else if (eventName === 'click') {
          $node.on('click', toggleCallback);
        } else if (eventName === 'focus') {
          $node.on('focus', showCallback);
          $node.on('blur', hideCallback);
        }
      });
    }
  }
 
  show() {
    const $node = this.$node;
    const offset = $node.offset();
    const $popover = this.$popover;
    const content = this.options.content || $node.data('content');
    const placement = $node.data('placement') || this.options.placement;
    const dist = 6;
 
    $popover.addClass(placement);
    $popover.addClass('in');
    $popover.find('.note-popover-content').html(content);
    $popover.appendTo(this.options.target);
 
    const nodeWidth = $node.outerWidth();
    const nodeHeight = $node.outerHeight();
    const popoverWidth = $popover.outerWidth();
    const popoverHeight = $popover.outerHeight();
 
    if (placement === 'bottom') {
      $popover.css({
        top: offset.top + nodeHeight + dist,
        left: offset.left + (nodeWidth / 2 - popoverWidth / 2)
      });
    } else if (placement === 'top') {
      $popover.css({
        top: offset.top - popoverHeight - dist,
        left: offset.left + (nodeWidth / 2 - popoverWidth / 2)
      });
    } else if (placement === 'left') {
      $popover.css({
        top: offset.top + (nodeHeight / 2 - popoverHeight / 2),
        left: offset.left - popoverWidth - dist
      });
    } else if (placement === 'right') {
      $popover.css({
        top: offset.top + (nodeHeight / 2 - popoverHeight / 2),
        left: offset.left + nodeWidth + dist
      });
    }
  }
 
  hide() {
    this.$popover.removeClass('in');
    this.$popover.remove();
  }
 
  toggle() {
    if (this.$popover.hasClass('in')) {
      this.hide();
    } else {
      this.show();
    }
  }
}
 
export default PopoverUI;