import v2.0.0.0_RC3 | 2012-07-01
https://github.com/lucanos/CommunityID -> http://www.itadmins.net/archives/357
This commit is contained in:
33
javascript/yui/imagecropper/assets/imagecropper-core.css
Normal file
33
javascript/yui/imagecropper/assets/imagecropper-core.css
Normal file
@ -0,0 +1,33 @@
|
||||
/*
|
||||
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 2.7.0
|
||||
*/
|
||||
.yui-crop {
|
||||
position: relative;
|
||||
}
|
||||
.yui-crop .yui-crop-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.yui-crop .yui-resize {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.yui-crop .yui-crop-resize-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-position: -10px -10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/*
|
||||
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 2.7.0
|
||||
*/
|
||||
.yui-skin-sam .yui-crop .yui-crop-mask {
|
||||
background-color: #000;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.yui-skin-sam .yui-crop .yui-resize {
|
||||
border: 1px dashed #fff;
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
/*
|
||||
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 2.7.0
|
||||
*/
|
||||
.yui-crop{position:relative;}.yui-crop .yui-crop-mask{position:absolute;top:0;left:0;height:100%;width:100%;}.yui-crop .yui-resize{position:absolute;top:10px;left:10px;border:0;}.yui-crop .yui-crop-resize-mask{position:absolute;top:0;left:0;height:100%;width:100%;background-position:-10px -10px;overflow:hidden;}.yui-skin-sam .yui-crop .yui-crop-mask{background-color:#000;opacity:.5;filter:alpha(opacity=50);}.yui-skin-sam .yui-crop .yui-resize{border:1px dashed #fff;}
|
||||
907
javascript/yui/imagecropper/imagecropper-debug.js
vendored
Normal file
907
javascript/yui/imagecropper/imagecropper-debug.js
vendored
Normal file
@ -0,0 +1,907 @@
|
||||
/*
|
||||
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 2.7.0
|
||||
*/
|
||||
/**
|
||||
* @description <p>Creates a Image Cropper control.</p>
|
||||
* @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
|
||||
* @description <p>Creates a Image Cropper control.</p>
|
||||
* @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 = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
|
||||
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 {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} 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 {<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) {
|
||||
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"});
|
||||
8
javascript/yui/imagecropper/imagecropper-min.js
vendored
Normal file
8
javascript/yui/imagecropper/imagecropper-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
889
javascript/yui/imagecropper/imagecropper.js
vendored
Normal file
889
javascript/yui/imagecropper/imagecropper.js
vendored
Normal file
@ -0,0 +1,889 @@
|
||||
/*
|
||||
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
version: 2.7.0
|
||||
*/
|
||||
/**
|
||||
* @description <p>Creates a Image Cropper control.</p>
|
||||
* @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
|
||||
* @description <p>Creates a Image Cropper control.</p>
|
||||
* @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) {
|
||||
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() {
|
||||
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() {
|
||||
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() {
|
||||
this._resizeEl = document.createElement('div');
|
||||
this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE;
|
||||
this._resizeEl.style.position = 'absolute';
|
||||
|
||||
this._resizeEl.innerHTML = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
|
||||
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) {
|
||||
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) {
|
||||
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) {
|
||||
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) {
|
||||
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) {
|
||||
//this._resize.set('maxHeight', maxH);
|
||||
}
|
||||
if (maxW) {
|
||||
//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) {
|
||||
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);
|
||||
|
||||
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
|
||||
};
|
||||
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() {
|
||||
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 {<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.7.0", build: "1799"});
|
||||
Reference in New Issue
Block a user