X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-ui-debug.js;h=ac8135fe144f96a0aeb6ecf08770d6a1d0d45265;hb=5df5041ebe992f53092da52daff90f09621c5985;hp=89dc69d6abe1155d96b84672b5b0f781f4e92c12;hpb=ee32c3dc2d8e1f8c4c7703cf38c254c133e91fee;p=roojs1 diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index 89dc69d6ab..ac8135fe14 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -10,4383 +10,6 @@ */ - -/* - * These classes are derivatives of the similarly named classes in the YUI Library. - * The original license: - * Copyright (c) 2006, Yahoo! Inc. All rights reserved. - * Code licensed under the BSD License: - * http://developer.yahoo.net/yui/license.txt - */ - -(function() { - -var Event=Roo.EventManager; -var Dom=Roo.lib.Dom; - -/** - * @class Roo.dd.DragDrop - * @extends Roo.util.Observable - * Defines the interface and base operation of items that that can be - * dragged or can be drop targets. It was designed to be extended, overriding - * the event handlers for startDrag, onDrag, onDragOver and onDragOut. - * Up to three html elements can be associated with a DragDrop instance: - *
- * dd = new Roo.dd.DragDrop("div1", "group1"); - *- * Since none of the event handlers have been implemented, nothing would - * actually happen if you were to run the code above. Normally you would - * override this class or one of the default implementations, but you can - * also override the methods you want on an instance of the class... - *
- * dd.onDragDrop = function(e, id) { - * alert("dd was dropped on " + id); - * } - *- * @constructor - * @param {String} id of the element that is linked to this instance - * @param {String} sGroup the group of related DragDrop objects - * @param {object} config an object containing configurable attributes - * Valid properties for DragDrop: - * padding, isTarget, maintainOffset, primaryButtonOnly - */ -Roo.dd.DragDrop = function(id, sGroup, config) { - if (id) { - this.init(id, sGroup, config); - } - -}; - -Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , { - - /** - * The id of the element associated with this object. This is what we - * refer to as the "linked element" because the size and position of - * this element is used to determine when the drag and drop objects have - * interacted. - * @property id - * @type String - */ - id: null, - - /** - * Configuration attributes passed into the constructor - * @property config - * @type object - */ - config: null, - - /** - * The id of the element that will be dragged. By default this is same - * as the linked element , but could be changed to another element. Ex: - * Roo.dd.DDProxy - * @property dragElId - * @type String - * @private - */ - dragElId: null, - - /** - * the id of the element that initiates the drag operation. By default - * this is the linked element, but could be changed to be a child of this - * element. This lets us do things like only starting the drag when the - * header element within the linked html element is clicked. - * @property handleElId - * @type String - * @private - */ - handleElId: null, - - /** - * An associative array of HTML tags that will be ignored if clicked. - * @property invalidHandleTypes - * @type {string: string} - */ - invalidHandleTypes: null, - - /** - * An associative array of ids for elements that will be ignored if clicked - * @property invalidHandleIds - * @type {string: string} - */ - invalidHandleIds: null, - - /** - * An indexted array of css class names for elements that will be ignored - * if clicked. - * @property invalidHandleClasses - * @type string[] - */ - invalidHandleClasses: null, - - /** - * The linked element's absolute X position at the time the drag was - * started - * @property startPageX - * @type int - * @private - */ - startPageX: 0, - - /** - * The linked element's absolute X position at the time the drag was - * started - * @property startPageY - * @type int - * @private - */ - startPageY: 0, - - /** - * The group defines a logical collection of DragDrop objects that are - * related. Instances only get events when interacting with other - * DragDrop object in the same group. This lets us define multiple - * groups using a single DragDrop subclass if we want. - * @property groups - * @type {string: string} - */ - groups: null, - - /** - * Individual drag/drop instances can be locked. This will prevent - * onmousedown start drag. - * @property locked - * @type boolean - * @private - */ - locked: false, - - /** - * Lock this instance - * @method lock - */ - lock: function() { this.locked = true; }, - - /** - * Unlock this instace - * @method unlock - */ - unlock: function() { this.locked = false; }, - - /** - * By default, all insances can be a drop target. This can be disabled by - * setting isTarget to false. - * @method isTarget - * @type boolean - */ - isTarget: true, - - /** - * The padding configured for this drag and drop object for calculating - * the drop zone intersection with this object. - * @method padding - * @type int[] - */ - padding: null, - - /** - * Cached reference to the linked element - * @property _domRef - * @private - */ - _domRef: null, - - /** - * Internal typeof flag - * @property __ygDragDrop - * @private - */ - __ygDragDrop: true, - - /** - * Set to true when horizontal contraints are applied - * @property constrainX - * @type boolean - * @private - */ - constrainX: false, - - /** - * Set to true when vertical contraints are applied - * @property constrainY - * @type boolean - * @private - */ - constrainY: false, - - /** - * The left constraint - * @property minX - * @type int - * @private - */ - minX: 0, - - /** - * The right constraint - * @property maxX - * @type int - * @private - */ - maxX: 0, - - /** - * The up constraint - * @property minY - * @type int - * @type int - * @private - */ - minY: 0, - - /** - * The down constraint - * @property maxY - * @type int - * @private - */ - maxY: 0, - - /** - * Maintain offsets when we resetconstraints. Set to true when you want - * the position of the element relative to its parent to stay the same - * when the page changes - * - * @property maintainOffset - * @type boolean - */ - maintainOffset: false, - - /** - * Array of pixel locations the element will snap to if we specified a - * horizontal graduation/interval. This array is generated automatically - * when you define a tick interval. - * @property xTicks - * @type int[] - */ - xTicks: null, - - /** - * Array of pixel locations the element will snap to if we specified a - * vertical graduation/interval. This array is generated automatically - * when you define a tick interval. - * @property yTicks - * @type int[] - */ - yTicks: null, - - /** - * By default the drag and drop instance will only respond to the primary - * button click (left button for a right-handed mouse). Set to true to - * allow drag and drop to start with any mouse click that is propogated - * by the browser - * @property primaryButtonOnly - * @type boolean - */ - primaryButtonOnly: true, - - /** - * The availabe property is false until the linked dom element is accessible. - * @property available - * @type boolean - */ - available: false, - - /** - * By default, drags can only be initiated if the mousedown occurs in the - * region the linked element is. This is done in part to work around a - * bug in some browsers that mis-report the mousedown if the previous - * mouseup happened outside of the window. This property is set to true - * if outer handles are defined. - * - * @property hasOuterHandles - * @type boolean - * @default false - */ - hasOuterHandles: false, - - /** - * Code that executes immediately before the startDrag event - * @method b4StartDrag - * @private - */ - b4StartDrag: function(x, y) { }, - - /** - * Abstract method called after a drag/drop object is clicked - * and the drag or mousedown time thresholds have beeen met. - * @method startDrag - * @param {int} X click location - * @param {int} Y click location - */ - startDrag: function(x, y) { /* override this */ }, - - /** - * Code that executes immediately before the onDrag event - * @method b4Drag - * @private - */ - b4Drag: function(e) { }, - - /** - * Abstract method called during the onMouseMove event while dragging an - * object. - * @method onDrag - * @param {Event} e the mousemove event - */ - onDrag: function(e) { /* override this */ }, - - /** - * Abstract method called when this element fist begins hovering over - * another DragDrop obj - * @method onDragEnter - * @param {Event} e the mousemove event - * @param {String|DragDrop[]} id In POINT mode, the element - * id this is hovering over. In INTERSECT mode, an array of one or more - * dragdrop items being hovered over. - */ - onDragEnter: function(e, id) { /* override this */ }, - - /** - * Code that executes immediately before the onDragOver event - * @method b4DragOver - * @private - */ - b4DragOver: function(e) { }, - - /** - * Abstract method called when this element is hovering over another - * DragDrop obj - * @method onDragOver - * @param {Event} e the mousemove event - * @param {String|DragDrop[]} id In POINT mode, the element - * id this is hovering over. In INTERSECT mode, an array of dd items - * being hovered over. - */ - onDragOver: function(e, id) { /* override this */ }, - - /** - * Code that executes immediately before the onDragOut event - * @method b4DragOut - * @private - */ - b4DragOut: function(e) { }, - - /** - * Abstract method called when we are no longer hovering over an element - * @method onDragOut - * @param {Event} e the mousemove event - * @param {String|DragDrop[]} id In POINT mode, the element - * id this was hovering over. In INTERSECT mode, an array of dd items - * that the mouse is no longer over. - */ - onDragOut: function(e, id) { /* override this */ }, - - /** - * Code that executes immediately before the onDragDrop event - * @method b4DragDrop - * @private - */ - b4DragDrop: function(e) { }, - - /** - * Abstract method called when this item is dropped on another DragDrop - * obj - * @method onDragDrop - * @param {Event} e the mouseup event - * @param {String|DragDrop[]} id In POINT mode, the element - * id this was dropped on. In INTERSECT mode, an array of dd items this - * was dropped on. - */ - onDragDrop: function(e, id) { /* override this */ }, - - /** - * Abstract method called when this item is dropped on an area with no - * drop target - * @method onInvalidDrop - * @param {Event} e the mouseup event - */ - onInvalidDrop: function(e) { /* override this */ }, - - /** - * Code that executes immediately before the endDrag event - * @method b4EndDrag - * @private - */ - b4EndDrag: function(e) { }, - - /** - * Fired when we are done dragging the object - * @method endDrag - * @param {Event} e the mouseup event - */ - endDrag: function(e) { /* override this */ }, - - /** - * Code executed immediately before the onMouseDown event - * @method b4MouseDown - * @param {Event} e the mousedown event - * @private - */ - b4MouseDown: function(e) { }, - - /** - * Event handler that fires when a drag/drop obj gets a mousedown - * @method onMouseDown - * @param {Event} e the mousedown event - */ - onMouseDown: function(e) { /* override this */ }, - - /** - * Event handler that fires when a drag/drop obj gets a mouseup - * @method onMouseUp - * @param {Event} e the mouseup event - */ - onMouseUp: function(e) { /* override this */ }, - - /** - * Override the onAvailable method to do what is needed after the initial - * position was determined. - * @method onAvailable - */ - onAvailable: function () { - }, - - /* - * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}). - * @type Object - */ - defaultPadding : {left:0, right:0, top:0, bottom:0}, - - /* - * Initializes the drag drop object's constraints to restrict movement to a certain element. - * - * Usage: -
- var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
- { dragElId: "existingProxyDiv" });
- dd.startDrag = function(){
- this.constrainTo("parent-id");
- };
-
- * Or you can initalize it using the {@link Roo.Element} object:
-
- Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
- startDrag : function(){
- this.constrainTo("parent-id");
- }
- });
-
- * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
- * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
- * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
- * an object containing the sides to pad. For example: {right:10, bottom:10}
- * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
- */
- constrainTo : function(constrainTo, pad, inContent){
- if(typeof pad == "number"){
- pad = {left: pad, right:pad, top:pad, bottom:pad};
- }
- pad = pad || this.defaultPadding;
- var b = Roo.get(this.getEl()).getBox();
- var ce = Roo.get(constrainTo);
- var s = ce.getScroll();
- var c, cd = ce.dom;
- if(cd == document.body){
- c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
- }else{
- xy = ce.getXY();
- c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
- }
-
-
- var topSpace = b.y - c.y;
- var leftSpace = b.x - c.x;
-
- this.resetConstraints();
- this.setXConstraint(leftSpace - (pad.left||0), // left
- c.width - leftSpace - b.width - (pad.right||0) //right
- );
- this.setYConstraint(topSpace - (pad.top||0), //top
- c.height - topSpace - b.height - (pad.bottom||0) //bottom
- );
- },
-
- /**
- * Returns a reference to the linked element
- * @method getEl
- * @return {HTMLElement} the html element
- */
- getEl: function() {
- if (!this._domRef) {
- this._domRef = Roo.getDom(this.id);
- }
-
- return this._domRef;
- },
-
- /**
- * Returns a reference to the actual element to drag. By default this is
- * the same as the html element, but it can be assigned to another
- * element. An example of this can be found in Roo.dd.DDProxy
- * @method getDragEl
- * @return {HTMLElement} the html element
- */
- getDragEl: function() {
- return Roo.getDom(this.dragElId);
- },
-
- /**
- * Sets up the DragDrop object. Must be called in the constructor of any
- * Roo.dd.DragDrop subclass
- * @method init
- * @param id the id of the linked element
- * @param {String} sGroup the group of related items
- * @param {object} config configuration attributes
- */
- init: function(id, sGroup, config) {
- this.initTarget(id, sGroup, config);
- if (!Roo.isTouch) {
- Event.on(this.id, "mousedown", this.handleMouseDown, this);
- }
- Event.on(this.id, "touchstart", this.handleMouseDown, this);
- // Event.on(this.id, "selectstart", Event.preventDefault);
- },
-
- /**
- * Initializes Targeting functionality only... the object does not
- * get a mousedown handler.
- * @method initTarget
- * @param id the id of the linked element
- * @param {String} sGroup the group of related items
- * @param {object} config configuration attributes
- */
- initTarget: function(id, sGroup, config) {
-
- // configuration attributes
- this.config = config || {};
-
- // create a local reference to the drag and drop manager
- this.DDM = Roo.dd.DDM;
- // initialize the groups array
- this.groups = {};
-
- // assume that we have an element reference instead of an id if the
- // parameter is not a string
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
-
- // set the id
- this.id = id;
-
- // add to an interaction group
- this.addToGroup((sGroup) ? sGroup : "default");
-
- // We don't want to register this as the handle with the manager
- // so we just set the id rather than calling the setter.
- this.handleElId = id;
-
- // the linked element is the element that gets dragged by default
- this.setDragElId(id);
-
- // by default, clicked anchors will not start drag operations.
- this.invalidHandleTypes = { A: "A" };
- this.invalidHandleIds = {};
- this.invalidHandleClasses = [];
-
- this.applyConfig();
-
- this.handleOnAvailable();
- },
-
- /**
- * Applies the configuration parameters that were passed into the constructor.
- * This is supposed to happen at each level through the inheritance chain. So
- * a DDProxy implentation will execute apply config on DDProxy, DD, and
- * DragDrop in order to get all of the parameters that are available in
- * each object.
- * @method applyConfig
- */
- applyConfig: function() {
-
- // configurable properties:
- // padding, isTarget, maintainOffset, primaryButtonOnly
- this.padding = this.config.padding || [0, 0, 0, 0];
- this.isTarget = (this.config.isTarget !== false);
- this.maintainOffset = (this.config.maintainOffset);
- this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
-
- },
-
- /**
- * Executed when the linked element is available
- * @method handleOnAvailable
- * @private
- */
- handleOnAvailable: function() {
- this.available = true;
- this.resetConstraints();
- this.onAvailable();
- },
-
- /**
- * Configures the padding for the target zone in px. Effectively expands
- * (or reduces) the virtual object size for targeting calculations.
- * Supports css-style shorthand; if only one parameter is passed, all sides
- * will have that padding, and if only two are passed, the top and bottom
- * will have the first param, the left and right the second.
- * @method setPadding
- * @param {int} iTop Top pad
- * @param {int} iRight Right pad
- * @param {int} iBot Bot pad
- * @param {int} iLeft Left pad
- */
- setPadding: function(iTop, iRight, iBot, iLeft) {
- // this.padding = [iLeft, iRight, iTop, iBot];
- if (!iRight && 0 !== iRight) {
- this.padding = [iTop, iTop, iTop, iTop];
- } else if (!iBot && 0 !== iBot) {
- this.padding = [iTop, iRight, iTop, iRight];
- } else {
- this.padding = [iTop, iRight, iBot, iLeft];
- }
- },
-
- /**
- * Stores the initial placement of the linked element.
- * @method setInitialPosition
- * @param {int} diffX the X offset, default 0
- * @param {int} diffY the Y offset, default 0
- */
- setInitPosition: function(diffX, diffY) {
- var el = this.getEl();
-
- if (!this.DDM.verifyEl(el)) {
- return;
- }
-
- var dx = diffX || 0;
- var dy = diffY || 0;
-
- var p = Dom.getXY( el );
-
- this.initPageX = p[0] - dx;
- this.initPageY = p[1] - dy;
-
- this.lastPageX = p[0];
- this.lastPageY = p[1];
-
-
- this.setStartPosition(p);
- },
-
- /**
- * Sets the start position of the element. This is set when the obj
- * is initialized, the reset when a drag is started.
- * @method setStartPosition
- * @param pos current position (from previous lookup)
- * @private
- */
- setStartPosition: function(pos) {
- var p = pos || Dom.getXY( this.getEl() );
- this.deltaSetXY = null;
-
- this.startPageX = p[0];
- this.startPageY = p[1];
- },
-
- /**
- * Add this instance to a group of related drag/drop objects. All
- * instances belong to at least one group, and can belong to as many
- * groups as needed.
- * @method addToGroup
- * @param sGroup {string} the name of the group
- */
- addToGroup: function(sGroup) {
- this.groups[sGroup] = true;
- this.DDM.regDragDrop(this, sGroup);
- },
-
- /**
- * Remove's this instance from the supplied interaction group
- * @method removeFromGroup
- * @param {string} sGroup The group to drop
- */
- removeFromGroup: function(sGroup) {
- if (this.groups[sGroup]) {
- delete this.groups[sGroup];
- }
-
- this.DDM.removeDDFromGroup(this, sGroup);
- },
-
- /**
- * Allows you to specify that an element other than the linked element
- * will be moved with the cursor during a drag
- * @method setDragElId
- * @param id {string} the id of the element that will be used to initiate the drag
- */
- setDragElId: function(id) {
- this.dragElId = id;
- },
-
- /**
- * Allows you to specify a child of the linked element that should be
- * used to initiate the drag operation. An example of this would be if
- * you have a content div with text and links. Clicking anywhere in the
- * content area would normally start the drag operation. Use this method
- * to specify that an element inside of the content div is the element
- * that starts the drag operation.
- * @method setHandleElId
- * @param id {string} the id of the element that will be used to
- * initiate the drag.
- */
- setHandleElId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- this.handleElId = id;
- this.DDM.regHandle(this.id, id);
- },
-
- /**
- * Allows you to set an element outside of the linked element as a drag
- * handle
- * @method setOuterHandleElId
- * @param id the id of the element that will be used to initiate the drag
- */
- setOuterHandleElId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- Event.on(id, "mousedown",
- this.handleMouseDown, this);
- this.setHandleElId(id);
-
- this.hasOuterHandles = true;
- },
-
- /**
- * Remove all drag and drop hooks for this element
- * @method unreg
- */
- unreg: function() {
- Event.un(this.id, "mousedown",
- this.handleMouseDown);
- Event.un(this.id, "touchstart",
- this.handleMouseDown);
- this._domRef = null;
- this.DDM._remove(this);
- },
-
- destroy : function(){
- this.unreg();
- },
-
- /**
- * Returns true if this instance is locked, or the drag drop mgr is locked
- * (meaning that all drag/drop is disabled on the page.)
- * @method isLocked
- * @return {boolean} true if this obj or all drag/drop is locked, else
- * false
- */
- isLocked: function() {
- return (this.DDM.isLocked() || this.locked);
- },
-
- /**
- * Fired when this object is clicked
- * @method handleMouseDown
- * @param {Event} e
- * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
- * @private
- */
- handleMouseDown: function(e, oDD){
-
- if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
- //Roo.log('not touch/ button !=0');
- return;
- }
- if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
- return; // double touch..
- }
-
-
- if (this.isLocked()) {
- //Roo.log('locked');
- return;
- }
-
- this.DDM.refreshCache(this.groups);
-// Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
- var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
- if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
- //Roo.log('no outer handes or not over target');
- // do nothing.
- } else {
-// Roo.log('check validator');
- if (this.clickValidator(e)) {
-// Roo.log('validate success');
- // set the initial element position
- this.setStartPosition();
-
-
- this.b4MouseDown(e);
- this.onMouseDown(e);
-
- this.DDM.handleMouseDown(e, this);
-
- this.DDM.stopEvent(e);
- } else {
-
-
- }
- }
- },
-
- clickValidator: function(e) {
- var target = e.getTarget();
- return ( this.isValidHandleChild(target) &&
- (this.id == this.handleElId ||
- this.DDM.handleWasClicked(target, this.id)) );
- },
-
- /**
- * Allows you to specify a tag name that should not start a drag operation
- * when clicked. This is designed to facilitate embedding links within a
- * drag handle that do something other than start the drag.
- * @method addInvalidHandleType
- * @param {string} tagName the type of element to exclude
- */
- addInvalidHandleType: function(tagName) {
- var type = tagName.toUpperCase();
- this.invalidHandleTypes[type] = type;
- },
-
- /**
- * Lets you to specify an element id for a child of a drag handle
- * that should not initiate a drag
- * @method addInvalidHandleId
- * @param {string} id the element id of the element you wish to ignore
- */
- addInvalidHandleId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- this.invalidHandleIds[id] = id;
- },
-
- /**
- * Lets you specify a css class of elements that will not initiate a drag
- * @method addInvalidHandleClass
- * @param {string} cssClass the class of the elements you wish to ignore
- */
- addInvalidHandleClass: function(cssClass) {
- this.invalidHandleClasses.push(cssClass);
- },
-
- /**
- * Unsets an excluded tag name set by addInvalidHandleType
- * @method removeInvalidHandleType
- * @param {string} tagName the type of element to unexclude
- */
- removeInvalidHandleType: function(tagName) {
- var type = tagName.toUpperCase();
- // this.invalidHandleTypes[type] = null;
- delete this.invalidHandleTypes[type];
- },
-
- /**
- * Unsets an invalid handle id
- * @method removeInvalidHandleId
- * @param {string} id the id of the element to re-enable
- */
- removeInvalidHandleId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- delete this.invalidHandleIds[id];
- },
-
- /**
- * Unsets an invalid css class
- * @method removeInvalidHandleClass
- * @param {string} cssClass the class of the element(s) you wish to
- * re-enable
- */
- removeInvalidHandleClass: function(cssClass) {
- for (var i=0, len=this.invalidHandleClasses.length; i