PHP Classes

File: public/js/tinymce/src/core/src/main/js/DragDropOverrides.js

Recommend this page to a friend!
  Classes of Abed Nego Ragil Putra  >  GoLavaCMS  >  public/js/tinymce/src/core/src/main/js/DragDropOverrides.js  >  Download  
File: public/js/tinymce/src/core/src/main/js/DragDropOverrides.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: GoLavaCMS
Publish content on Web pages with SEO support
Author: By
Last change:
Date: 4 years ago
Size: 8,533 bytes
 

Contents

Class file image Download
/**
 * DragDropOverrides.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2017 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/**
 * This module contains logic overriding the drag/drop logic of the editor.
 *
 * @private
 * @class tinymce.DragDropOverrides
 */
define(
  'tinymce.core.DragDropOverrides',
  [
    'global!document',
    'tinymce.core.dom.DOMUtils',
    'tinymce.core.dom.MousePosition',
    'tinymce.core.dom.NodeType',
    'tinymce.core.util.Arr',
    'tinymce.core.util.Delay',
    'tinymce.core.util.Fun'
  ],
  function (document, DOMUtils, MousePosition, NodeType, Arr, Delay, Fun) {
    var isContentEditableFalse = NodeType.isContentEditableFalse,
      isContentEditableTrue = NodeType.isContentEditableTrue;

    var isDraggable = function (rootElm, elm) {
      return isContentEditableFalse(elm) && elm !== rootElm;
    };

    var isValidDropTarget = function (editor, targetElement, dragElement) {
      if (targetElement === dragElement || editor.dom.isChildOf(targetElement, dragElement)) {
        return false;
      }

      if (isContentEditableFalse(targetElement)) {
        return false;
      }

      return true;
    };

    var cloneElement = function (elm) {
      var cloneElm = elm.cloneNode(true);
      cloneElm.removeAttribute('data-mce-selected');
      return cloneElm;
    };

    var createGhost = function (editor, elm, width, height) {
      var clonedElm = elm.cloneNode(true);

      editor.dom.setStyles(clonedElm, { width: width, height: height });
      editor.dom.setAttrib(clonedElm, 'data-mce-selected', null);

      var ghostElm = editor.dom.create('div', {
        'class': 'mce-drag-container',
        'data-mce-bogus': 'all',
        unselectable: 'on',
        contenteditable: 'false'
      });

      editor.dom.setStyles(ghostElm, {
        position: 'absolute',
        opacity: 0.5,
        overflow: 'hidden',
        border: 0,
        padding: 0,
        margin: 0,
        width: width,
        height: height
      });

      editor.dom.setStyles(clonedElm, {
        margin: 0,
        boxSizing: 'border-box'
      });

      ghostElm.appendChild(clonedElm);

      return ghostElm;
    };

    var appendGhostToBody = function (ghostElm, bodyElm) {
      if (ghostElm.parentNode !== bodyElm) {
        bodyElm.appendChild(ghostElm);
      }
    };

    var moveGhost = function (ghostElm, position, width, height, maxX, maxY) {
      var overflowX = 0, overflowY = 0;

      ghostElm.style.left = position.pageX + 'px';
      ghostElm.style.top = position.pageY + 'px';

      if (position.pageX + width > maxX) {
        overflowX = (position.pageX + width) - maxX;
      }

      if (position.pageY + height > maxY) {
        overflowY = (position.pageY + height) - maxY;
      }

      ghostElm.style.width = (width - overflowX) + 'px';
      ghostElm.style.height = (height - overflowY) + 'px';
    };

    var removeElement = function (elm) {
      if (elm && elm.parentNode) {
        elm.parentNode.removeChild(elm);
      }
    };

    var isLeftMouseButtonPressed = function (e) {
      return e.button === 0;
    };

    var hasDraggableElement = function (state) {
      return state.element;
    };

    var applyRelPos = function (state, position) {
      return {
        pageX: position.pageX - state.relX,
        pageY: position.pageY + 5
      };
    };

    var start = function (state, editor) {
      return function (e) {
        if (isLeftMouseButtonPressed(e)) {
          var ceElm = Arr.find(editor.dom.getParents(e.target), Fun.or(isContentEditableFalse, isContentEditableTrue));

          if (isDraggable(editor.getBody(), ceElm)) {
            var elmPos = editor.dom.getPos(ceElm);
            var bodyElm = editor.getBody();
            var docElm = editor.getDoc().documentElement;

            state.element = ceElm;
            state.screenX = e.screenX;
            state.screenY = e.screenY;
            state.maxX = (editor.inline ? bodyElm.scrollWidth : docElm.offsetWidth) - 2;
            state.maxY = (editor.inline ? bodyElm.scrollHeight : docElm.offsetHeight) - 2;
            state.relX = e.pageX - elmPos.x;
            state.relY = e.pageY - elmPos.y;
            state.width = ceElm.offsetWidth;
            state.height = ceElm.offsetHeight;
            state.ghost = createGhost(editor, ceElm, state.width, state.height);
          }
        }
      };
    };

    var move = function (state, editor) {
      // Reduces laggy drag behavior on Gecko
      var throttledPlaceCaretAt = Delay.throttle(function (clientX, clientY) {
        editor._selectionOverrides.hideFakeCaret();
        editor.selection.placeCaretAt(clientX, clientY);
      }, 0);

      return function (e) {
        var movement = Math.max(Math.abs(e.screenX - state.screenX), Math.abs(e.screenY - state.screenY));

        if (hasDraggableElement(state) && !state.dragging && movement > 10) {
          var args = editor.fire('dragstart', { target: state.element });
          if (args.isDefaultPrevented()) {
            return;
          }

          state.dragging = true;
          editor.focus();
        }

        if (state.dragging) {
          var targetPos = applyRelPos(state, MousePosition.calc(editor, e));

          appendGhostToBody(state.ghost, editor.getBody());
          moveGhost(state.ghost, targetPos, state.width, state.height, state.maxX, state.maxY);

          throttledPlaceCaretAt(e.clientX, e.clientY);
        }
      };
    };

    // Returns the raw element instead of the fake cE=false element
    var getRawTarget = function (selection) {
      var rng = selection.getSel().getRangeAt(0);
      var startContainer = rng.startContainer;
      return startContainer.nodeType === 3 ? startContainer.parentNode : startContainer;
    };

    var drop = function (state, editor) {
      return function (e) {
        if (state.dragging) {
          if (isValidDropTarget(editor, getRawTarget(editor.selection), state.element)) {
            var targetClone = cloneElement(state.element);

            var args = editor.fire('drop', {
              targetClone: targetClone,
              clientX: e.clientX,
              clientY: e.clientY
            });

            if (!args.isDefaultPrevented()) {
              targetClone = args.targetClone;

              editor.undoManager.transact(function () {
                removeElement(state.element);
                editor.insertContent(editor.dom.getOuterHTML(targetClone));
                editor._selectionOverrides.hideFakeCaret();
              });
            }
          }
        }

        removeDragState(state);
      };
    };

    var stop = function (state, editor) {
      return function () {
        removeDragState(state);
        if (state.dragging) {
          editor.fire('dragend');
        }
      };
    };

    var removeDragState = function (state) {
      state.dragging = false;
      state.element = null;
      removeElement(state.ghost);
    };

    var bindFakeDragEvents = function (editor) {
      var state = {}, pageDom, dragStartHandler, dragHandler, dropHandler, dragEndHandler, rootDocument;

      pageDom = DOMUtils.DOM;
      rootDocument = document;
      dragStartHandler = start(state, editor);
      dragHandler = move(state, editor);
      dropHandler = drop(state, editor);
      dragEndHandler = stop(state, editor);

      editor.on('mousedown', dragStartHandler);
      editor.on('mousemove', dragHandler);
      editor.on('mouseup', dropHandler);

      pageDom.bind(rootDocument, 'mousemove', dragHandler);
      pageDom.bind(rootDocument, 'mouseup', dragEndHandler);

      editor.on('remove', function () {
        pageDom.unbind(rootDocument, 'mousemove', dragHandler);
        pageDom.unbind(rootDocument, 'mouseup', dragEndHandler);
      });
    };

    var blockIeDrop = function (editor) {
      editor.on('drop', function (e) {
        // FF doesn't pass out clientX/clientY for drop since this is for IE we just use null instead
        var realTarget = typeof e.clientX !== 'undefined' ? editor.getDoc().elementFromPoint(e.clientX, e.clientY) : null;

        if (isContentEditableFalse(realTarget) || isContentEditableFalse(editor.dom.getContentEditableParent(realTarget))) {
          e.preventDefault();
        }
      });
    };

    var init = function (editor) {
      bindFakeDragEvents(editor);
      blockIeDrop(editor);
    };

    return {
      init: init
    };
  }
);
For more information send a message to info at phpclasses dot org.