imagecropper-beta-debug.js

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

            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 {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} The ImageCropper instance
        */
        reset: function() {
            YAHOO.log('Resetting the control', 'log', 'ImageCropper');
            this._resize.destroy();
            this._resizeEl.parentNode.removeChild(this._resizeEl);
            this._createResize();