# all files / src/js/base/module/ ImagePopover.js

89.29% Statements 25/28
16.67% Branches 1/6
100% Functions 8/8
89.29% Lines 25/28

    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
    591×
    1×
    1×

    1×
    97×
    96×
    96×

    96×
    96×

    96×

    4×

    1×
    167×

    1×
    96×

    96×
    96×

    1×
    2×

    1×
    69×

    69×

    1×
    73×

    1×
     import $ from 'jquery';
    import lists from '../core/lists';
    import dom from '../core/dom';

    /**
     * Image popover module
     *  mouse events that show/hide popover will be handled by Handle.js.
     *  Handle.js will receive the events and invoke 'imagePopover.update'.
     */
    export default class ImagePopover {
      constructor(context) {
        this.context = context;
        this.ui = $.summernote.ui;

        this.editable = context.layoutInfo.editable[0];
        this.options = context.options;

        this.events = {
          'summernote.disable': () => {
            this.hide();
          },
        };
      }

      shouldInitialize() {
        return !lists.isEmpty(this.options.popover.image);
      }

      initialize() {
        this.$popover = this.ui.popover({
          className: 'note-image-popover',
        }).render().appendTo(this.options.container);
        const $content = this.$popover.find('.popover-content,.note-popover-content');
        this.context.invoke('buttons.build', $content, this.options.popover.image);
      }

      destroy() {
        this.$popover.remove();
      }

      update(target, event) {
        Iif (dom.isImg(target)) {
          const pos = dom.posFromPlaceholder(target);
          const posEditor = dom.posFromPlaceholder(this.editable);
          this.$popover.css({
            display: 'block',
            left: this.options.popatmouse ? event.pageX - 20 : pos.left,
            top: this.options.popatmouse ? event.pageY : Math.min(pos.top, posEditor.top),
          });
        } else {
          this.hide();
        }
      }

      hide() {
        this.$popover.hide();
      }
    }