Creates a Image Cropper control.
- * @namespace YAHOO.widget - * @requires yahoo, dom, dragdrop, element, event, resize - * @module imagecropper - * @beta - */ -(function() { -var Dom = YAHOO.util.Dom, - Event = YAHOO.util.Event, - Lang = YAHOO.lang; - - /** - * @constructor - * @class ImageCropper - * @descriptionCreates a Image Cropper control.
- * @extends YAHOO.util.Element - * @param {String/HTMLElement} el The image element to make croppable. - * @param {Object} attrs Object liternal containing configuration parameters. - */ - var Crop = function(el, config) { - YAHOO.log('Initializing', 'log', 'ImageCropper'); - var oConfig = { - element: el, - attributes: config || {} - }; - - Crop.superclass.constructor.call(this, oConfig.element, oConfig.attributes); - }; - - /** - * @private - * @static - * @property _instances - * @description Internal hash table for all ImageCropper instances - * @type Object - */ - Crop._instances = {}; - /** - * @static - * @method getCropperById - * @description Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object. - * @return {Object} The ImageCropper Object - */ - Crop.getCropperById = function(id) { - if (Crop._instances[id]) { - return Crop._instances[id]; - } - return false; - }; - - YAHOO.extend(Crop, YAHOO.util.Element, { - /** - * @private - * @property CSS_MAIN - * @description The CSS class used to wrap the element - * @type String - */ - CSS_MAIN: 'yui-crop', - /** - * @private - * @property CSS_MASK - * @description The CSS class for the mask element - * @type String - */ - CSS_MASK: 'yui-crop-mask', - /** - * @private - * @property CSS_RESIZE_MASK - * @description The CSS class for the mask inside the resize element - * @type String - */ - CSS_RESIZE_MASK: 'yui-crop-resize-mask', - - /** - * @private - * @property _image - * @description The url of the image we are cropping - * @type String - */ - _image: null, - /** - * @private - * @property _active - * @description Flag to determine if the crop region is active - * @type Boolean - */ - _active: null, - /** - * @private - * @property _resize - * @description A reference to the Resize Utility used in this Cropper Instance - * @type Object - */ - _resize: null, - /** - * @private - * @property _resizeEl - * @description The HTML Element used to create the Resize Oject - * @type HTMLElement - */ - _resizeEl: null, - /** - * @private - * @property _resizeMaskEl - * @description The HTML Element used to create the Resize mask - * @type HTMLElement - */ - _resizeMaskEl: null, - /** - * @private - * @property _wrap - * @description The HTML Element created to wrap the image - * @type HTMLElement - */ - _wrap: null, - /** - * @private - * @property _mask - * @description The HTML Element created to "mask" the image being cropped - * @type HTMLElement - */ - _mask: null, - /** - * @private - * @method _createWrap - * @description Creates the wrapper element used to wrap the image - */ - _createWrap: function() { - YAHOO.log('Creating the wrap element', 'log', 'ImageCropper'); - this._wrap = document.createElement('div'); - this._wrap.id = this.get('element').id + '_wrap'; - this._wrap.className = this.CSS_MAIN; - var el = this.get('element'); - this._wrap.style.width = el.width ? el.width + 'px' : Dom.getStyle(el, 'width'); - this._wrap.style.height = el.height ? el.height + 'px' : Dom.getStyle(el, 'height'); - - var par = this.get('element').parentNode; - par.replaceChild(this._wrap, this.get('element')); - this._wrap.appendChild(this.get('element')); - - Event.on(this._wrap, 'mouseover', this._handleMouseOver, this, true); - Event.on(this._wrap, 'mouseout', this._handleMouseOut, this, true); - - Event.on(this._wrap, 'click', function(ev) { Event.stopEvent(ev); }, this, true); - }, - - /** - * @private - * @method _createMask - * @description Creates the mask element used to mask the image - */ - _createMask: function() { - YAHOO.log('Creating the Mask', 'log', 'ImageCropper'); - this._mask = document.createElement('div'); - this._mask.className = this.CSS_MASK; - this._wrap.appendChild(this._mask); - }, - - /** - * @private - * @method _createResize - * @description Creates the resize element and the instance of the Resize Utility - */ - _createResize: function() { - YAHOO.log('Creating the Resize element', 'log', 'ImageCropper'); - this._resizeEl = document.createElement('div'); - this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE; - this._resizeEl.style.position = 'absolute'; - - this._resizeEl.innerHTML = ''; - this._resizeMaskEl = this._resizeEl.firstChild; - this._wrap.appendChild(this._resizeEl); - this._resizeEl.style.top = this.get('initialXY')[1] + 'px'; - this._resizeEl.style.left = this.get('initialXY')[0] + 'px'; - this._resizeMaskEl.style.height = Math.floor(this.get('initHeight')) + 'px'; - this._resizeMaskEl.style.width = Math.floor(this.get('initWidth')) + 'px'; - - this._resize = new YAHOO.util.Resize(this._resizeEl, { - knobHandles: true, - handles: 'all', - draggable: true, - status: this.get('status'), - minWidth: this.get('minWidth'), - minHeight: this.get('minHeight'), - ratio: this.get('ratio'), - autoRatio: this.get('autoRatio'), - height: this.get('initHeight'), - width: this.get('initWidth') - }); - - this._setBackgroundImage(this.get('element').getAttribute('src', 2)); - this._setBackgroundPosition(-(this.get('initialXY')[0]), -(this.get('initialXY')[1])); - - this._resize.on('startResize', this._handleStartResizeEvent, this, true); - this._resize.on('endResize', this._handleEndResizeEvent, this, true); - this._resize.on('dragEvent', this._handleDragEvent, this, true); - this._resize.on('beforeResize', this._handleBeforeResizeEvent, this, true); - this._resize.on('resize', this._handleResizeEvent, this, true); - this._resize.dd.on('b4StartDragEvent', this._handleB4DragEvent, this, true); - }, - - /** - * @private - * @method _handleMouseOver - * @description Handles the mouseover event - */ - _handleMouseOver: function(ev) { - var evType = 'keydown'; - if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) { - evType = 'keypress'; - } - if (!this._active) { - this._active = true; - if (this.get('useKeys')) { - Event.on(document, evType, this._handleKeyPress, this, true); - } - } - }, - /** - * @private - * @method _handleMouseOut - * @description Handles the mouseout event - */ - _handleMouseOut: function(ev) { - var evType = 'keydown'; - if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) { - evType = 'keypress'; - } - this._active = false; - if (this.get('useKeys')) { - Event.removeListener(document, evType, this._handleKeyPress); - } - }, - - /** - * @private - * @method _moveEl - * @description Moves the resize element based on the arrow keys - */ - _moveEl: function(dir, inc) { - YAHOO.log('Moving the element', 'log', 'ImageCropper'); - var t = 0, l = 0, - region = this._setConstraints(), - resize = true; - - switch (dir) { - case 'down': - t = -(inc); - if ((region.bottom - inc) < 0) { - resize = false; - this._resizeEl.style.top = (region.top + region.bottom) + 'px'; - } - break; - case 'up': - t = (inc); - if ((region.top - inc) < 0) { - resize = false; - this._resizeEl.style.top = '0px'; - } - break; - case 'right': - l = -(inc); - if ((region.right - inc) < 0) { - resize = false; - this._resizeEl.style.left = (region.left + region.right) + 'px'; - } - break; - case 'left': - l = inc; - if ((region.left - inc) < 0) { - resize = false; - this._resizeEl.style.left = '0px'; - } - break; - } - - if (resize) { - YAHOO.log('Moving via Key Listener: ' + dir, 'log', 'ImageCropper'); - this._resizeEl.style.left = (parseInt(this._resizeEl.style.left, 10) - l) + 'px'; - this._resizeEl.style.top = (parseInt(this._resizeEl.style.top, 10) - t) + 'px'; - this.fireEvent('moveEvent', { target: 'keypress' }); - } else { - this._setConstraints(); - } - this._syncBackgroundPosition(); - }, - - /** - * @private - * @method _handleKeyPress - * @description Handles the keypress event - */ - _handleKeyPress: function(ev) { - var kc = Event.getCharCode(ev), - stopEvent = false, - inc = ((ev.shiftKey) ? this.get('shiftKeyTick') : this.get('keyTick')); - - switch (kc) { - case 0x25: // left - this._moveEl('left', inc); - stopEvent = true; - break; - case 0x26: // up - this._moveEl('up', inc); - stopEvent = true; - break; - case 0x27: // right - this._moveEl('right', inc); - stopEvent = true; - break; - case 0x28: // down - this._moveEl('down', inc); - stopEvent = true; - break; - default: - } - if (stopEvent) { - Event.preventDefault(ev); - } - }, - - /** - * @private - * @method _handleB4DragEvent - * @description Handles the DragDrop b4DragEvent event - */ - _handleB4DragEvent: function() { - this._setConstraints(); - }, - - /** - * @private - * @method _handleDragEvent - * @description Handles the DragDrop DragEvent event - */ - _handleDragEvent: function() { - this._syncBackgroundPosition(); - this.fireEvent('dragEvent', arguments); - this.fireEvent('moveEvent', { target: 'dragevent' }); - }, - - /** - * @private - * @method _handleBeforeResizeEvent - * @description Handles the Resize Utilitys beforeResize event - */ - _handleBeforeResizeEvent: function(args) { - var region = Dom.getRegion(this.get('element')), - c = this._resize._cache, - ch = this._resize._currentHandle, h = 0, w = 0; - - if (args.top && (args.top < region.top)) { - h = (c.height + c.top) - region.top; - Dom.setY(this._resize.getWrapEl(), region.top); - this._resize.getWrapEl().style.height = h + 'px'; - this._resize._cache.height = h; - this._resize._cache.top = region.top; - this._syncBackgroundPosition(); - return false; - } - if (args.left && (args.left < region.left)) { - w = (c.width + c.left) - region.left; - Dom.setX(this._resize.getWrapEl(), region.left); - this._resize._cache.left = region.left; - this._resize.getWrapEl().style.width = w + 'px'; - this._resize._cache.width = w; - this._syncBackgroundPosition(); - return false; - } - if (ch != 'tl' && ch != 'l' && ch != 'bl') { - if (c.left && args.width && ((c.left + args.width) > region.right)) { - w = (region.right - c.left); - Dom.setX(this._resize.getWrapEl(), (region.right - w)); - this._resize.getWrapEl().style.width = w + 'px'; - this._resize._cache.left = (region.right - w); - this._resize._cache.width = w; - this._syncBackgroundPosition(); - return false; - } - } - if (ch != 't' && ch != 'tr' && ch != 'tl') { - if (c.top && args.height && ((c.top + args.height) > region.bottom)) { - h = (region.bottom - c.top); - Dom.setY(this._resize.getWrapEl(), (region.bottom - h)); - this._resize.getWrapEl().style.height = h + 'px'; - this._resize._cache.height = h; - this._resize._cache.top = (region.bottom - h); - this._syncBackgroundPosition(); - return false; - } - } - }, - /** - * @private - * @method _handleResizeMaskEl - * @description Resizes the inner mask element - */ - _handleResizeMaskEl: function() { - var a = this._resize._cache; - this._resizeMaskEl.style.height = Math.floor(a.height) + 'px'; - this._resizeMaskEl.style.width = Math.floor(a.width) + 'px'; - }, - /** - * @private - * @method _handleResizeEvent - * @param Event ev The Resize Utilitys resize event. - * @description Handles the Resize Utilitys Resize event - */ - _handleResizeEvent: function(ev) { - this._setConstraints(true); - this._syncBackgroundPosition(); - this.fireEvent('resizeEvent', arguments); - this.fireEvent('moveEvent', { target: 'resizeevent' }); - }, - - /** - * @private - * @method _syncBackgroundPosition - * @description Syncs the packground position of the resize element with the resize elements top and left style position - */ - _syncBackgroundPosition: function() { - this._handleResizeMaskEl(); - this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left, 10)), -(parseInt(this._resizeEl.style.top, 10))); - }, - - /** - * @private - * @method _setBackgroundPosition - * @param Number l The left position - * @param Number t The top position - * @description Sets the background image position to the top and left position - */ - _setBackgroundPosition: function(l, t) { - //YAHOO.log('Setting the image background position of the mask to: (' + l + ', ' + t + ')', 'log', 'ImageCropper'); - var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10); - var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10); - if (isNaN(bl)) { - bl = 0; - } - if (isNaN(bt)) { - bt = 0; - } - var mask = this._resize.getWrapEl().firstChild; - var pos = (l - bl) + 'px ' + (t - bt) + 'px'; - this._resizeMaskEl.style.backgroundPosition = pos; - }, - - /** - * @private - * @method _setBackgroundImage - * @param String url The url of the image - * @description Sets the background image of the resize element - */ - _setBackgroundImage: function(url) { - YAHOO.log('Setting the background image', 'log', 'ImageCropper'); - var mask = this._resize.getWrapEl().firstChild; - this._image = url; - mask.style.backgroundImage = 'url(' + url + '#)'; - }, - - /** - * @private - * @method _handleEndResizeEvent - * @description Handles the Resize Utilitys endResize event - */ - _handleEndResizeEvent: function() { - this._setConstraints(true); - }, - /** - * @private - * @method _handleStartResizeEvent - * @description Handles the Resize Utilitys startResize event - */ - _handleStartResizeEvent: function() { - this._setConstraints(true); - - var h = this._resize._cache.height, - w = this._resize._cache.width, - t = parseInt(this._resize.getWrapEl().style.top, 10), - l = parseInt(this._resize.getWrapEl().style.left, 10), - maxH = 0, maxW = 0; - - switch (this._resize._currentHandle) { - case 'b': - maxH = (h + this._resize.dd.bottomConstraint); - break; - case 'l': - maxW = (w + this._resize.dd.leftConstraint); - break; - case 'r': - maxH = (h + t); - maxW = (w + this._resize.dd.rightConstraint); - break; - case 'br': - maxH = (h + this._resize.dd.bottomConstraint); - maxW = (w + this._resize.dd.rightConstraint); - break; - case 'tr': - maxH = (h + t); - maxW = (w + this._resize.dd.rightConstraint); - break; - - } - - if (maxH) { - YAHOO.log('Setting the maxHeight on the resize object to: ' + maxH, 'log', 'ImageCropper'); - //this._resize.set('maxHeight', maxH); - } - if (maxW) { - YAHOO.log('Setting the maxWidth on the resize object to: ' + maxW, 'log', 'ImageCropper'); - //this._resize.set('maxWidth', maxW); - } - - this.fireEvent('startResizeEvent', arguments); - }, - - /** - * @private - * @method _setConstraints - * @param Boolean inside Used when called from inside a resize event, false by default (dragging) - * @description Set the DragDrop constraints to keep the element inside the crop area. - * @return {Object} Object containing Top, Right, Bottom and Left constraints - */ - _setConstraints: function(inside) { - YAHOO.log('Setting Contraints', 'log', 'ImageCropper'); - var resize = this._resize; - resize.dd.resetConstraints(); - var height = parseInt(resize.get('height'), 10), - width = parseInt(resize.get('width'), 10); - if (inside) { - //Called from inside the resize callback - height = resize._cache.height; - width = resize._cache.width; - } - - //Get the top, right, bottom and left positions - var region = Dom.getRegion(this.get('element')); - //Get the element we are working on - var el = resize.getWrapEl(); - - //Get the xy position of it - var xy = Dom.getXY(el); - - //Set left to x minus left - var left = xy[0] - region.left; - - //Set right to right minus x minus width - var right = region.right - xy[0] - width; - - //Set top to y minus top - var top = xy[1] - region.top; - - //Set bottom to bottom minus y minus height - var bottom = region.bottom - xy[1] - height; - - if (top < 0) { - top = 0; - } - - resize.dd.setXConstraint(left, right); - resize.dd.setYConstraint(top, bottom); - YAHOO.log('Constraints: ' + top + ',' + right + ',' + bottom + ',' + left, 'log', 'ImageCropper'); - - return { - top: top, - right: right, - bottom: bottom, - left: left - }; - - - - }, - /** - * @method getCropCoords - * @description Returns the coordinates needed to crop the image - * @return {Object} The top, left, height, width and image url of the image being cropped - */ - getCropCoords: function() { - var coords = { - top: parseInt(this._resize.getWrapEl().style.top, 10), - left: parseInt(this._resize.getWrapEl().style.left, 10), - height: this._resize._cache.height, - width: this._resize._cache.width, - image: this._image - }; - YAHOO.log('Getting the crop coordinates: ' + Lang.dump(coords), 'log', 'ImageCropper'); - return coords; - }, - /** - * @method reset - * @description Resets the crop element back to it's original position - * @return {YAHOO.widget.ImageCropper} The ImageCropper instance - */ - reset: function() { - YAHOO.log('Resetting the control', 'log', 'ImageCropper'); - this._resize.resize(null, this.get('initHeight'), this.get('initWidth'), 0, 0, true); - this._resizeEl.style.top = this.get('initialXY')[1] + 'px'; - this._resizeEl.style.left = this.get('initialXY')[0] + 'px'; - this._syncBackgroundPosition(); - return this; - }, - - /** - * @method getEl - * @description Get the HTML reference for the image element. - * @return {HTMLElement} The image element - */ - getEl: function() { - return this.get('element'); - }, - /** - * @method getResizeEl - * @description Get the HTML reference for the resize element. - * @return {HTMLElement} The resize element - */ - getResizeEl: function() { - return this._resizeEl; - }, - /** - * @method getWrapEl - * @description Get the HTML reference for the wrap element. - * @return {HTMLElement} The wrap element - */ - getWrapEl: function() { - return this._wrap; - }, - - /** - * @method getMaskEl - * @description Get the HTML reference for the mask element. - * @return {HTMLElement} The mask element - */ - getMaskEl: function() { - return this._mask; - }, - - /** - * @method getResizeMaskEl - * @description Get the HTML reference for the resizable object's mask element. - * @return {HTMLElement} The resize objects mask element. - */ - getResizeMaskEl: function() { - return this._resizeMaskEl; - }, - - /** - * @method getResizeObject - * @description Get the Resize Utility object. - * @return {YAHOO.util.Resize} The Resize instance - */ - getResizeObject: function() { - return this._resize; - }, - - /** - * @private - * @method init - * @description The ImageCropper class's initialization method - */ - init: function(p_oElement, p_oAttributes) { - YAHOO.log('init', 'info', 'ImageCropper'); - Crop.superclass.init.call(this, p_oElement, p_oAttributes); - - var id = p_oElement; - - if (!Lang.isString(id)) { - if (id.tagName && (id.tagName.toLowerCase() == 'img')) { - id = Dom.generateId(id); - } else { - YAHOO.log('Element is not an image.', 'error', 'ImageCropper'); - return false; - } - } else { - var el = Dom.get(id); - if (el.tagName && el.tagName.toLowerCase() == 'img') { - //All good - } else { - YAHOO.log('Element is not an image.', 'error', 'ImageCropper'); - return false; - } - } - - - - Crop._instances[id] = this; - this._createWrap(); - this._createMask(); - this._createResize(); - this._setConstraints(); - - }, - /** - * @private - * @method initAttributes - * @description Initializes all of the configuration attributes used to create a croppable element. - * @param {Object} attr Object literal specifying a set of - * configuration attributes used to create the widget. - */ - - initAttributes: function(attr) { - Crop.superclass.initAttributes.call(this, attr); - - /** - * @attribute initialXY - * @description Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10] - * @type Array - */ - this.setAttributeConfig('initialXY', { - writeOnce: true, - validator: YAHOO.lang.isArray, - value: attr.initialXY || [10, 10] - }); - /** - * @attribute keyTick - * @description The pixel tick for the arrow keys, defaults to 1 - * @type Number - */ - this.setAttributeConfig('keyTick', { - validator: YAHOO.lang.isNumber, - value: attr.keyTick || 1 - }); - - /** - * @attribute shiftKeyTick - * @description The pixel tick for shift + the arrow keys, defaults to 10 - * @type Number - */ - this.setAttributeConfig('shiftKeyTick', { - validator: YAHOO.lang.isNumber, - value: attr.shiftKeyTick || 10 - }); - - /** - * @attribute useKeys - * @description Should we use the Arrow keys to position the crop element, defaults to true - * @type Boolean - */ - this.setAttributeConfig('useKeys', { - validator: YAHOO.lang.isBoolean, - value: ((attr.useKeys === false) ? false : true) - }); - - /** - * @attribute status - * @description Show the Resize Utility status, defaults to true - * @type Boolean - */ - this.setAttributeConfig('status', { - validator: YAHOO.lang.isBoolean, - value: ((attr.status === false) ? false : true), - method: function(status) { - if (this._resize) { - this._resize.set('status', status); - } - } - }); - - /** - * @attribute minHeight - * @description MinHeight of the crop area, default 50 - * @type Number - */ - this.setAttributeConfig('minHeight', { - validator: YAHOO.lang.isNumber, - value: attr.minHeight || 50, - method: function(h) { - if (this._resize) { - this._resize.set('minHeight', h); - } - } - }); - - /** - * @attribute minWidth - * @description MinWidth of the crop area, default 50. - * @type Number - */ - this.setAttributeConfig('minWidth', { - validator: YAHOO.lang.isNumber, - value: attr.minWidth || 50, - method: function(w) { - if (this._resize) { - this._resize.set('minWidth', w); - } - } - }); - - /** - * @attribute ratio - * @description Set the ratio config option of the Resize Utlility, default false - * @type Boolean - */ - this.setAttributeConfig('ratio', { - validator: YAHOO.lang.isBoolean, - value: attr.ratio || false, - method: function(r) { - if (this._resize) { - this._resize.set('ratio', r); - } - } - }); - - /** - * @attribute ratio - * @description Set the autoRatio config option of the Resize Utlility, default true - * @type Boolean - */ - this.setAttributeConfig('autoRatio', { - validator: YAHOO.lang.isBoolean, - value: ((attr.autoRatio === false) ? false : true), - method: function(a) { - if (this._resize) { - this._resize.set('autoRatio', a); - } - } - }); - - /** - * @attribute initHeight - * @description Set the initlal height of the crop area, defaults to 1/4 of the image height - * @type Number - */ - this.setAttributeConfig('initHeight', { - writeOnce: true, - validator: YAHOO.lang.isNumber, - value: attr.initHeight || (this.get('element').height / 4) - }); - - /** - * @attribute initWidth - * @description Set the initlal width of the crop area, defaults to 1/4 of the image width - * @type Number - */ - this.setAttributeConfig('initWidth', { - validator: YAHOO.lang.isNumber, - writeOnce: true, - value: attr.initWidth || (this.get('element').width / 4) - }); - - }, - /** - * @method destroy - * @description Destroys the ImageCropper object and all of it's elements & listeners. - */ - destroy: function() { - YAHOO.log('Destroying the ImageCropper', 'info', 'ImageCropper'); - this._resize.destroy(); - this._resizeEl.parentNode.removeChild(this._resizeEl); - this._mask.parentNode.removeChild(this._mask); - Event.purgeElement(this._wrap); - this._wrap.parentNode.replaceChild(this.get('element'), this._wrap); - - //Brutal Object Destroy - for (var i in this) { - if (Lang.hasOwnProperty(this, i)) { - this[i] = null; - } - } - - }, - /** - * @method toString - * @description Returns a string representing the ImageCropper Object. - * @return {String} - */ - toString: function() { - if (this.get) { - return 'ImageCropper (#' + this.get('id') + ')'; - } - return 'Image Cropper'; - } - }); - - YAHOO.widget.ImageCropper = Crop; - -/** -* @event dragEvent -* @description Fires when the DragDrop dragEvent -* @type YAHOO.util.CustomEvent -*/ -/** -* @event startResizeEvent -* @description Fires when when a resize action is started. -* @type YAHOO.util.CustomEvent -*/ -/** -* @event resizeEvent -* @description Fires on every element resize. -* @type YAHOO.util.CustomEvent -*/ -/** -* @event moveEvent -* @description Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent -* @type YAHOO.util.CustomEvent -*/ - -})(); - -YAHOO.register("imagecropper", YAHOO.widget.ImageCropper, {version: "2.7.0", build: "1799"});