imagecropper-beta.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

        },

        /**
        * @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 {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
        */      
        getResizeObject: function() {
            return this._resize;
        },

        /** 
        * @private
        * @method init
        * @description The ImageCropper class's initialization method
        */        
        init: function(p_oElement, p_oAttributes) {
            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 {
                    return false;
                }
            } else {
                var el = Dom.get(id);
                if (el.tagName && el.tagName.toLowerCase() == 'img') {
                    //All good
                } else {
                    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() {
            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.6.0", build: "1321"});