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