1 /**

     2  * DragHelper.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * Drag/drop helper class.

    13  *

    14  * @example

    15  * var dragHelper = new tinymce.ui.DragHelper('mydiv', {

    16  *     start: function(evt) {

    17  *     },

    18  *

    19  *     drag: function(evt) {

    20  *     },

    21  *

    22  *     end: function(evt) {

    23  *     }

    24  * });

    25  *

    26  * @class tinymce.ui.DragHelper

    27  */

    28 define("tinymce/ui/DragHelper", [

    29 	"tinymce/ui/DomUtils"

    30 ], function(DomUtils) {

    31 	"use strict";

    32 

    33 	function getDocumentSize() {

    34 		var doc = document, documentElement, body, scrollWidth, clientWidth;

    35 		var offsetWidth, scrollHeight, clientHeight, offsetHeight, max = Math.max;

    36 

    37 		documentElement = doc.documentElement;

    38 		body = doc.body;

    39 

    40 		scrollWidth = max(documentElement.scrollWidth, body.scrollWidth);

    41 		clientWidth = max(documentElement.clientWidth, body.clientWidth);

    42 		offsetWidth = max(documentElement.offsetWidth, body.offsetWidth);

    43 

    44 		scrollHeight = max(documentElement.scrollHeight, body.scrollHeight);

    45 		clientHeight = max(documentElement.clientHeight, body.clientHeight);

    46 		offsetHeight = max(documentElement.offsetHeight, body.offsetHeight);

    47 

    48 		return {

    49 			width: scrollWidth < offsetWidth ? clientWidth : scrollWidth,

    50 			height: scrollHeight < offsetHeight ? clientHeight : scrollHeight

    51 		};

    52 	}

    53 

    54 	return function(id, settings) {

    55 		var eventOverlayElm, doc = document, downButton, start, stop, drag, startX, startY;

    56 

    57 		settings = settings || {};

    58 

    59 		function getHandleElm() {

    60 			return doc.getElementById(settings.handle || id);

    61 		}

    62 

    63 		start = function(e) {

    64 			var docSize = getDocumentSize(), handleElm, cursor;

    65 

    66 			e.preventDefault();

    67 			downButton = e.button;

    68 			handleElm = getHandleElm();

    69 			startX = e.screenX;

    70 			startY = e.screenY;

    71 

    72 			// Grab cursor from handle

    73 			if (window.getComputedStyle) {

    74 				cursor = window.getComputedStyle(handleElm, null).getPropertyValue("cursor");

    75 			} else {

    76 				cursor = handleElm.runtimeStyle.cursor;

    77 			}

    78 

    79 			// Create event overlay and add it to document

    80 			eventOverlayElm = doc.createElement('div');

    81 			DomUtils.css(eventOverlayElm, {

    82 				position: "absolute",

    83 				top: 0, left: 0,

    84 				width: docSize.width,

    85 				height: docSize.height,

    86 				zIndex: 0x7FFFFFFF,

    87 				opacity: 0.0001,

    88 				cursor: cursor

    89 			});

    90 

    91 			doc.body.appendChild(eventOverlayElm);

    92 

    93 			// Bind mouse events

    94 			DomUtils.on(doc, 'mousemove', drag);

    95 			DomUtils.on(doc, 'mouseup', stop);

    96 

    97 			// Begin drag

    98 			settings.start(e);

    99 		};

   100 

   101 		drag = function(e) {

   102 			if (e.button !== downButton) {

   103 				return stop(e);

   104 			}

   105 

   106 			e.deltaX = e.screenX - startX;

   107 			e.deltaY = e.screenY - startY;

   108 

   109 			e.preventDefault();

   110 			settings.drag(e);

   111 		};

   112 

   113 		stop = function(e) {

   114 			DomUtils.off(doc, 'mousemove', drag);

   115 			DomUtils.off(doc, 'mouseup', stop);

   116 

   117 			eventOverlayElm.parentNode.removeChild(eventOverlayElm);

   118 

   119 			if (settings.stop) {

   120 				settings.stop(e);

   121 			}

   122 		};

   123 

   124 		/**

   125 		 * Destroys the drag/drop helper instance.

   126 		 *

   127 		 * @method destroy

   128 		 */

   129 		this.destroy = function() {

   130 			DomUtils.off(getHandleElm());

   131 		};

   132 

   133 		DomUtils.on(getHandleElm(), 'mousedown', start);

   134 	};

   135 });