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

2% Statements 1/50
0% Branches 0/22
0% Functions 0/6
2% Lines 1/50

    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;