resize-base.js revision cc1d4edffd5ecfd11d5b68c5d24988d0cfb2371a
1247N/A * The Resize Utility allows you to make an HTML element resizable. 1247N/A * A base class for Resize, providing: 1247N/A * <li>Basic Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> 1247N/A * <li>Applies drag handles to an element to make it resizable</li> 1247N/A * <li>Here is the list of valid resize handles: 1247N/A * <code>[ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl' ]</code>. You can 1247N/A * read this list as top, top-right, right, bottom-right, bottom, 1247N/A * bottom-left, left, top-left.</li> 1247N/A * <li>The drag handles are inserted into the element and positioned 1247N/A * absolute. Some elements, such as a textarea or image, don't support 1247N/A * children. To overcome that, set wrap:true in your config and the 1247N/A * element willbe wrapped for you automatically.</li> 1247N/A * <pre><code>var instance = new Y.Resize({ 1247N/A * handles: 't, tr, r, br, b, bl, l, tl' 1247N/A * Check the list of <a href="Resize.html#configattributes">Configuration Attributes</a> available for 1247N/A * @param config {Object} Object literal specifying widget configuration properties. 1247N/A * Static property provides a string to identify the class. 1247N/A * Static property used to define the default attribute 1247N/A * configuration for the Resize. 1247N/A * Stores the active handle during the resize. 1247N/A * Stores the active handle element during the resize. 1247N/A * @attribute activeHandleNode 1247N/A * False to ensure that the resize handles are always visible, true to 1247N/A * display them only when the user mouses over the resizable borders. 1247N/A * The default minimum height of the element. Only used when 1247N/A * ResizeConstrained is not plugged. 1247N/A * The default minimum width of the element. Only used when 1247N/A * ResizeConstrained is not plugged. 1247N/A * The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 1247N/A * 'br', 'tl', 'tr'. Can use a shortcut of All. 1247N/A * The selector or element to resize. Required. 1247N/A * Resize a proxy element instead of the real element. 1247N/A * The Resize proxy element. 1247N/A * @default Generated using an internal HTML markup 1247N/A * True when the element is being Resized. 1247N/A * True to wrap an element with a div if needed (required for textareas 1247N/A * and images, defaults to false) in favor of the handles config option. 1247N/A * The wrapper element type (default div) could be over-riden passing the 1247N/A * <code>wrapper</code> attribute. 1247N/A * Elements that requires a wrapper by default. Normally are elements 1247N/A * which cannot have children elements. 1247N/A * @default /canvas|textarea|input|select|button|img/i 1247N/A * Element to wrap the <code>wrapTypes</code>. This element will house 1247N/A * Array containing all possible resizable handles. 1247N/A * Regex which matches with the handles that could change the height of 1247N/A * @property REGEX_CHANGE_HEIGHT 1247N/A * Regex which matches with the handles that could change the left of 1247N/A * @property REGEX_CHANGE_LEFT 1247N/A * Regex which matches with the handles that could change the top of 1247N/A * @property REGEX_CHANGE_TOP 1247N/A * Regex which matches with the handles that could change the width of 1247N/A * @property REGEX_CHANGE_WIDTH 1247N/A * Template used to create the resize wrapper node when needed. 1247N/A * Template used to create the resize proxy. 1247N/A * Template used to create each resize handle. 1247N/A * @property HANDLE_TEMPLATE 1247N/A * Whether the handle being dragged can change the height. 1247N/A * @property changeHeightHandles 1247N/A * Whether the handle being dragged can change the left. 1247N/A * @property changeLeftHandles 1247N/A * Whether the handle being dragged can change the top. 1247N/A * @property changeTopHandles 1247N/A * Whether the handle being dragged can change the width. 1247N/A * @property changeWidthHandles 1247N/A * Store DD.Delegate reference for the respective Resize instance. 1247N/A * Stores the current values for the height, width, top and left. You are 1247N/A * able to manipulate these values on resize in order to change the resize 1247N/A * Stores the last values for the height, width, top and left. 1247N/A * Stores the original values for the height, width, top and left, stored 1247N/A * Construction logic executed during Resize instantiation. Lifecycle. 1247N/A * Create the DOM structure for the Resize. Lifecycle. 1247N/A * Bind the events on the Resize UI. Lifecycle. 1247N/A // hide handles if AUTO_HIDE is true 1247N/A * Descructor lifecycle implementation for the Resize class. Purges events attached 1247N/A * to the node (and all child nodes) and removes the Resize handles. 1247N/A // purgeElements on boundingBox 1247N/A // destroy handles dd and remove them from the dom 1247N/A * Creates DOM (or manipulates DOM for progressive enhancement) 1247N/A * This method is invoked by initializer(). It's chained automatically for 1247N/A * <p>Loop through each handle which is being used and executes a callback.</p> 1247N/A * <pre><code>instance.eachHandle( 1247N/A * function(handleName, index) { ... } 1247N/A * @param {function} fn Callback function to be executed for each handle. 1247N/A * Bind the handles DragDrop events to the Resize instance. 1247N/A * Bind the events related to the handles (_onHandleMouseEnter, _onHandleMouseLeave). 1247N/A * Create the custom events used on the Resize. 1247N/A // create publish function for kweight optimization 1247N/A * Handles the resize start event. Fired when a handle starts to be 1247N/A * @preventable _defResizeStartFn 1247N/A * @param {Event.Facade} event The resize start event. 1247N/A * Handles the resize event. Fired on each pixel when the handle is 1247N/A * @preventable _defResizeFn 1247N/A * @param {Event.Facade} event The resize event. 1247N/A * Handles the resize align event. 1247N/A * @preventable _defResizeAlignFn 1247N/A * @param {Event.Facade} event The resize align event. 1247N/A * Handles the resize end event. Fired when a handle stop to be 1247N/A * @preventable _defResizeEndFn 1247N/A * @param {Event.Facade} event The resize end event. 1247N/A * Handles the resize mouseUp event. Fired when a mouseUp event happens on a 1247N/A * @preventable _defMouseUpFn 1247N/A * @param {Event.Facade} event The resize mouseUp event. 1247N/A * Responsible for loop each handle element and append to the wrapper. 1247N/A * Creates the handle element based on the handle name and initialize the 1247N/A * @param {String} handle Handle name ('t', 'tr', 'b', ...). 1247N/A * Helper method to update the current size value on 1247N/A * @param {String} offset 'offsetHeight' or 'offsetWidth' 1247N/A * @param {number} size Size to restrict the offset 1247N/A // predicting, based on the original information, the last left valid in case of reach the min/max dimension 1247N/A // this calculation avoid browser event leaks when user interact very fast with their mouse 1247N/A * @param {Node} node Node from. 1247N/A * @param {Node} wrapper Node to. 1247N/A // resizable wrapper should be positioned 1247N/A // copy margin, padding, position styles from the node to wrapper 1247N/A // store margin(Top,Right,Bottom,Left) from the nodes involved 1247N/A // apply margin from node to the wrapper 1247N/A // force remove margin from the internal node 1247N/A // extract handle name from a string 1247N/A // using Y.cached to memoize the function for performance 1247N/A * <pre><code>bottom, actXY, left, top, offsetHeight, offsetWidth, right</code></pre> 1247N/A * @param {EventFacade} event 1247N/A // the xy that the node will be set to. Changing this will alter the position as it's dragged. 1247N/A * Basic resize calculations. 1247N/A * Set offsetWidth and offsetHeight of the passed node. 1247N/A * @param {number} offsetWidth 1247N/A * @param {number} offsetHeight 1247N/A * Sync the Resize UI with internal values from 1247N/A // if wrapper is different from node 1247N/A // prevent webkit textarea resize 1247N/A * Sync the proxy UI with internal values from 1247N/A * Update <code>instance.changeHeightHandles, 1247N/A * instance.changeLeftHandles, instance.changeTopHandles, 1247N/A * instance.changeWidthHandles</code> information. 1247N/A * @method _updateChangeHandleInfo 1247N/A * Update <a href="Resize.html#property_info">info</a> values (bottom, actXY, left, top, offsetHeight, offsetWidth, right). 1247N/A * Set the active state of the handles. 1247N/A * @method _setActiveHandlesUI 1247N/A * @param {boolean} val True to activate the handles, false to deactivate. 1247N/A // remove CSS_RESIZE_HANDLE_ACTIVE from all handles before addClass on the active 1247N/A * Setter for the handles attribute 1247N/A // handles attr accepts both array or string 1247N/A // if the handles attr passed in is an ALL string... 1247N/A // otherwise, split the string to extract the handles 1247N/A // if its a valid handle, add it to the handles output 1247N/A * Set the visibility of the handles. 1247N/A * @method _setHideHandlesUI 1247N/A * @param {boolean} val True to hide the handles, false to show. 1247N/A * Setter for the wrap attribute 1247N/A // if nodeName is listed on WRAP_TYPES force use the wrapper 1247N/A * Default resize:mouseUp handler 1247N/A * @param {EventFacade} event The Event object 1247N/A * Default resize:resize handler 1247N/A * @param {EventFacade} event The Event object 1247N/A // if proxy is true _syncProxyUI instead of _syncUI 1247N/A // _syncUI of the wrapper, not using proxy 1247N/A * Default resize:align handler 1247N/A * @method _defResizeAlignFn 1247N/A * @param {EventFacade} event The Event object 1247N/A // update the instance.info values 1247N/A // basic resize calculations 1247N/A // if Y.Plugin.ResizeConstrained is not plugged, check for min dimension 1247N/A * Default resize:end handler 1247N/A * @param {EventFacade} event The Event object 1247N/A // reseting actXY from drag when drag end 1247N/A // if proxy is true, hide it on resize end 1247N/A * Default resize:start handler 1247N/A * @method _defResizeStartFn 1247N/A * @param {EventFacade} event The Event object 1247N/A // create an originalInfo information for reference 1247N/A * Fires the resize:mouseUp event. 1247N/A * @method _handleMouseUpEvent 1247N/A * @param {EventFacade} event resize:mouseUp event facade 1247N/A * Fires the resize:resize event. 1247N/A * @method _handleResizeEvent 1247N/A * @param {EventFacade} event resize:resize event facade 1247N/A * Fires the resize:align event. 1247N/A * @method _handleResizeAlignEvent 1247N/A * @param {EventFacade} event resize:resize event facade 1247N/A * Fires the resize:end event. 1247N/A * @method _handleResizeEndEvent 1247N/A * @param {EventFacade} event resize:end event facade 1247N/A * Fires the resize:start event. 1247N/A * @method _handleResizeStartEvent 1247N/A * @param {EventFacade} event resize:start event facade 1247N/A * Mouseenter event handler for the <a href="Resize.html#config_wrapper">wrapper</a>. 1247N/A * @method _onWrapperMouseEnter 1247N/A * @param {EventFacade} event 1247N/A * Mouseleave event handler for the <a href="Resize.html#config_wrapper">wrapper</a>. 1247N/A * @method _onWrapperMouseLeave 1247N/A * @param {EventFacade} event 1247N/A * Mouseover event handler for the handles. 1247N/A * @method _onHandleMouseEnter 1247N/A * @param {EventFacade} event 1247N/A * Mouseout event handler for the handles. 1247N/A * @method _onHandleMouseLeave 1247N/A * @param {EventFacade} event 1247N/A * Default value for the wrapper attribute 1247N/A // by deafult the wrapper is always the node 1247N/A // if the node is listed on the wrapTypes or wrap is set to true, create another wrapper 1247N/A // remove positioning of wrapped node, the WRAPPER take care about positioning 1247N/A // creating ATTRS with the handles elements 1247N/A},
'@VERSION@' ,{
skinnable:
true,
requires:[
'base',
'widget',
'substitute',
'event',
'oop',
'dd-drag',
'dd-delegate',
'dd-drop']});