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

46.67% Statements 28/60
5.56% Branches 1/18
40% Functions 6/15
46.67% Lines 28/60

    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
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    1161×

    1×
    1×
    96×
    96×
    96×
    96×
    96×
    96×
    96×

    96×

    1×
    96×

    96×

    97×
    96×
    96×

    96×

    96×

    96×

    96×

    96×

    96×

    3×
    2×
    6×

    2×

    1×
     import $ from 'jquery';

    export default class Dropzone {
      constructor(context) {
        this.context = context;
        this.$eventListener = $(document);
        this.$editor = context.layoutInfo.editor;
        this.$editable = context.layoutInfo.editable;
        this.options = context.options;
        this.lang = this.options.langInfo;
        this.documentEventHandlers = {};

        this.$dropzone = $([
          '<div class="note-dropzone">',
          '  <div class="note-dropzone-message"/>',
          '</div>',
        ].join('')).prependTo(this.$editor);
      }

      /**
       * attach Drag and Drop Events
       */
      initialize() {
        Iif (this.options.disableDragAndDrop) {
          // prevent default drop event
          this.documentEventHandlers.onDrop = (e) => {
            e.preventDefault();
          };
          // do not consider outside of dropzone
          this.$eventListener = this.$dropzone;
          this.$eventListener.on('drop', this.documentEventHandlers.onDrop);
        } else {
          this.attachDragAndDropEvent();
        }
      }

      /**
       * attach Drag and Drop Events
       */
      attachDragAndDropEvent() {
        let collection = $();
        const $dropzoneMessage = this.$dropzone.find('.note-dropzone-message');

        this.documentEventHandlers.onDragenter = (e) => {
          const isCodeview = this.context.invoke('codeview.isActivated');
          const hasEditorSize = this.$editor.width() > 0 && this.$editor.height() > 0;
          if (!isCodeview && !collection.length && hasEditorSize) {
            this.$editor.addClass('dragover');
            this.$dropzone.width(this.$editor.width());
            this.$dropzone.height(this.$editor.height());
            $dropzoneMessage.text(this.lang.image.dragImageHere);
          }
          collection = collection.add(e.target);
        };

        this.documentEventHandlers.onDragleave = (e) => {
          collection = collection.not(e.target);
          if (!collection.length) {
            this.$editor.removeClass('dragover');
          }
        };

        this.documentEventHandlers.onDrop = () => {
          collection = $();
          this.$editor.removeClass('dragover');
        };

        // show dropzone on dragenter when dragging a object to document
        // -but only if the editor is visible, i.e. has a positive width and height
        this.$eventListener.on('dragenter', this.documentEventHandlers.onDragenter)
          .on('dragleave', this.documentEventHandlers.onDragleave)
          .on('drop', this.documentEventHandlers.onDrop);

        // change dropzone's message on hover.
        this.$dropzone.on('dragenter', () => {
          this.$dropzone.addClass('hover');
          $dropzoneMessage.text(this.lang.image.dropImage);
        }).on('dragleave', () => {
          this.$dropzone.removeClass('hover');
          $dropzoneMessage.text(this.lang.image.dragImageHere);
        });

        // attach dropImage
        this.$dropzone.on('drop', (event) => {
          const dataTransfer = event.originalEvent.dataTransfer;

          // stop the browser from opening the dropped content
          event.preventDefault();

          if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {
            this.$editable.focus();
            this.context.invoke('editor.insertImagesOrCallback', dataTransfer.files);
          } else {
            $.each(dataTransfer.types, (idx, type) => {
              const content = dataTransfer.getData(type);

              if (type.toLowerCase().indexOf('text') > -1) {
                this.context.invoke('editor.pasteHTML', content);
              } else {
                $(content).each((idx, item) => {
                  this.context.invoke('editor.insertNode', item);
                });
              }
            });
          }
        }).on('dragover', false); // prevent default dragover event
      }

      destroy() {
        Object.keys(this.documentEventHandlers).forEach((key) => {
          this.$eventListener.off(key.substr(2).toLowerCase(), this.documentEventHandlers[key]);
        });
        this.documentEventHandlers = {};
      }
    }