2
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
8
* @description <p>Creates a Image Cropper control.</p>
9
* @namespace YAHOO.widget
10
* @requires yahoo, dom, dragdrop, element, event, resize
11
* @module imagecropper
15
var Dom = YAHOO.util.Dom,
16
Event = YAHOO.util.Event,
22
* @description <p>Creates a Image Cropper control.</p>
23
* @extends YAHOO.util.Element
24
* @param {String/HTMLElement} el The image element to make croppable.
25
* @param {Object} attrs Object liternal containing configuration parameters.
27
var Crop = function(el, config) {
30
attributes: config || {}
33
Crop.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
39
* @property _instances
40
* @description Internal hash table for all ImageCropper instances
46
* @method getCropperById
47
* @description Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.
48
* @return {Object} The ImageCropper Object
50
Crop.getCropperById = function(id) {
51
if (Crop._instances[id]) {
52
return Crop._instances[id];
57
YAHOO.extend(Crop, YAHOO.util.Element, {
61
* @description The CSS class used to wrap the element
68
* @description The CSS class for the mask element
71
CSS_MASK: 'yui-crop-mask',
74
* @property CSS_RESIZE_MASK
75
* @description The CSS class for the mask inside the resize element
78
CSS_RESIZE_MASK: 'yui-crop-resize-mask',
83
* @description The url of the image we are cropping
90
* @description Flag to determine if the crop region is active
97
* @description A reference to the Resize Utility used in this Cropper Instance
103
* @property _resizeEl
104
* @description The HTML Element used to create the Resize Oject
110
* @property _resizeMaskEl
111
* @description The HTML Element used to create the Resize mask
118
* @description The HTML Element created to wrap the image
125
* @description The HTML Element created to "mask" the image being cropped
131
* @method _createWrap
132
* @description Creates the wrapper element used to wrap the image
134
_createWrap: function() {
135
this._wrap = document.createElement('div');
136
this._wrap.id = this.get('element').id + '_wrap';
137
this._wrap.className = this.CSS_MAIN;
138
var el = this.get('element');
139
this._wrap.style.width = el.width ? el.width + 'px' : Dom.getStyle(el, 'width');
140
this._wrap.style.height = el.height ? el.height + 'px' : Dom.getStyle(el, 'height');
142
var par = this.get('element').parentNode;
143
par.replaceChild(this._wrap, this.get('element'));
144
this._wrap.appendChild(this.get('element'));
146
Event.on(this._wrap, 'mouseover', this._handleMouseOver, this, true);
147
Event.on(this._wrap, 'mouseout', this._handleMouseOut, this, true);
149
Event.on(this._wrap, 'click', function(ev) { Event.stopEvent(ev); }, this, true);
154
* @method _createMask
155
* @description Creates the mask element used to mask the image
157
_createMask: function() {
158
this._mask = document.createElement('div');
159
this._mask.className = this.CSS_MASK;
160
this._wrap.appendChild(this._mask);
165
* @method _createResize
166
* @description Creates the resize element and the instance of the Resize Utility
168
_createResize: function() {
169
this._resizeEl = document.createElement('div');
170
this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE;
171
this._resizeEl.style.position = 'absolute';
173
this._resizeEl.innerHTML = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
174
this._resizeMaskEl = this._resizeEl.firstChild;
175
this._wrap.appendChild(this._resizeEl);
176
this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
177
this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
178
this._resizeMaskEl.style.height = Math.floor(this.get('initHeight')) + 'px';
179
this._resizeMaskEl.style.width = Math.floor(this.get('initWidth')) + 'px';
181
this._resize = new YAHOO.util.Resize(this._resizeEl, {
185
status: this.get('status'),
186
minWidth: this.get('minWidth'),
187
minHeight: this.get('minHeight'),
188
ratio: this.get('ratio'),
189
autoRatio: this.get('autoRatio'),
190
height: this.get('initHeight'),
191
width: this.get('initWidth')
194
this._setBackgroundImage(this.get('element').getAttribute('src', 2));
195
this._setBackgroundPosition(-(this.get('initialXY')[0]), -(this.get('initialXY')[1]));
197
this._resize.on('startResize', this._handleStartResizeEvent, this, true);
198
this._resize.on('endResize', this._handleEndResizeEvent, this, true);
199
this._resize.on('dragEvent', this._handleDragEvent, this, true);
200
this._resize.on('beforeResize', this._handleBeforeResizeEvent, this, true);
201
this._resize.on('resize', this._handleResizeEvent, this, true);
202
this._resize.dd.on('b4StartDragEvent', this._handleB4DragEvent, this, true);
207
* @method _handleMouseOver
208
* @description Handles the mouseover event
210
_handleMouseOver: function(ev) {
211
var evType = 'keydown';
212
if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
217
if (this.get('useKeys')) {
218
Event.on(document, evType, this._handleKeyPress, this, true);
224
* @method _handleMouseOut
225
* @description Handles the mouseout event
227
_handleMouseOut: function(ev) {
228
var evType = 'keydown';
229
if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
232
this._active = false;
233
if (this.get('useKeys')) {
234
Event.removeListener(document, evType, this._handleKeyPress);
241
* @description Moves the resize element based on the arrow keys
243
_moveEl: function(dir, inc) {
245
region = this._setConstraints(),
251
if ((region.bottom - inc) < 0) {
253
this._resizeEl.style.top = (region.top + region.bottom) + 'px';
258
if ((region.top - inc) < 0) {
260
this._resizeEl.style.top = '0px';
265
if ((region.right - inc) < 0) {
267
this._resizeEl.style.left = (region.left + region.right) + 'px';
272
if ((region.left - inc) < 0) {
274
this._resizeEl.style.left = '0px';
280
this._resizeEl.style.left = (parseInt(this._resizeEl.style.left, 10) - l) + 'px';
281
this._resizeEl.style.top = (parseInt(this._resizeEl.style.top, 10) - t) + 'px';
282
this.fireEvent('moveEvent', { target: 'keypress' });
284
this._setConstraints();
286
this._syncBackgroundPosition();
291
* @method _handleKeyPress
292
* @description Handles the keypress event
294
_handleKeyPress: function(ev) {
295
var kc = Event.getCharCode(ev),
297
inc = ((ev.shiftKey) ? this.get('shiftKeyTick') : this.get('keyTick'));
301
this._moveEl('left', inc);
305
this._moveEl('up', inc);
309
this._moveEl('right', inc);
313
this._moveEl('down', inc);
319
Event.preventDefault(ev);
325
* @method _handleB4DragEvent
326
* @description Handles the DragDrop b4DragEvent event
328
_handleB4DragEvent: function() {
329
this._setConstraints();
334
* @method _handleDragEvent
335
* @description Handles the DragDrop DragEvent event
337
_handleDragEvent: function() {
338
this._syncBackgroundPosition();
339
this.fireEvent('dragEvent', arguments);
340
this.fireEvent('moveEvent', { target: 'dragevent' });
345
* @method _handleBeforeResizeEvent
346
* @description Handles the Resize Utilitys beforeResize event
348
_handleBeforeResizeEvent: function(args) {
349
var region = Dom.getRegion(this.get('element')),
350
c = this._resize._cache,
351
ch = this._resize._currentHandle, h = 0, w = 0;
353
if (args.top && (args.top < region.top)) {
354
h = (c.height + c.top) - region.top;
355
Dom.setY(this._resize.getWrapEl(), region.top);
356
this._resize.getWrapEl().style.height = h + 'px';
357
this._resize._cache.height = h;
358
this._resize._cache.top = region.top;
359
this._syncBackgroundPosition();
362
if (args.left && (args.left < region.left)) {
363
w = (c.width + c.left) - region.left;
364
Dom.setX(this._resize.getWrapEl(), region.left);
365
this._resize._cache.left = region.left;
366
this._resize.getWrapEl().style.width = w + 'px';
367
this._resize._cache.width = w;
368
this._syncBackgroundPosition();
371
if (ch != 'tl' && ch != 'l' && ch != 'bl') {
372
if (c.left && args.width && ((c.left + args.width) > region.right)) {
373
w = (region.right - c.left);
374
Dom.setX(this._resize.getWrapEl(), (region.right - w));
375
this._resize.getWrapEl().style.width = w + 'px';
376
this._resize._cache.left = (region.right - w);
377
this._resize._cache.width = w;
378
this._syncBackgroundPosition();
382
if (ch != 't' && ch != 'tr' && ch != 'tl') {
383
if (c.top && args.height && ((c.top + args.height) > region.bottom)) {
384
h = (region.bottom - c.top);
385
Dom.setY(this._resize.getWrapEl(), (region.bottom - h));
386
this._resize.getWrapEl().style.height = h + 'px';
387
this._resize._cache.height = h;
388
this._resize._cache.top = (region.bottom - h);
389
this._syncBackgroundPosition();
396
* @method _handleResizeMaskEl
397
* @description Resizes the inner mask element
399
_handleResizeMaskEl: function() {
400
var a = this._resize._cache;
401
this._resizeMaskEl.style.height = Math.floor(a.height) + 'px';
402
this._resizeMaskEl.style.width = Math.floor(a.width) + 'px';
406
* @method _handleResizeEvent
407
* @param Event ev The Resize Utilitys resize event.
408
* @description Handles the Resize Utilitys Resize event
410
_handleResizeEvent: function(ev) {
411
this._setConstraints(true);
412
this._syncBackgroundPosition();
413
this.fireEvent('resizeEvent', arguments);
414
this.fireEvent('moveEvent', { target: 'resizeevent' });
419
* @method _syncBackgroundPosition
420
* @description Syncs the packground position of the resize element with the resize elements top and left style position
422
_syncBackgroundPosition: function() {
423
this._handleResizeMaskEl();
424
this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left, 10)), -(parseInt(this._resizeEl.style.top, 10)));
429
* @method _setBackgroundPosition
430
* @param Number l The left position
431
* @param Number t The top position
432
* @description Sets the background image position to the top and left position
434
_setBackgroundPosition: function(l, t) {
435
var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10);
436
var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10);
443
var mask = this._resize.getWrapEl().firstChild;
444
var pos = (l - bl) + 'px ' + (t - bt) + 'px';
445
this._resizeMaskEl.style.backgroundPosition = pos;
450
* @method _setBackgroundImage
451
* @param String url The url of the image
452
* @description Sets the background image of the resize element
454
_setBackgroundImage: function(url) {
455
var mask = this._resize.getWrapEl().firstChild;
457
mask.style.backgroundImage = 'url(' + url + '#)';
462
* @method _handleEndResizeEvent
463
* @description Handles the Resize Utilitys endResize event
465
_handleEndResizeEvent: function() {
466
this._setConstraints(true);
470
* @method _handleStartResizeEvent
471
* @description Handles the Resize Utilitys startResize event
473
_handleStartResizeEvent: function() {
474
this._setConstraints(true);
476
var h = this._resize._cache.height,
477
w = this._resize._cache.width,
478
t = parseInt(this._resize.getWrapEl().style.top, 10),
479
l = parseInt(this._resize.getWrapEl().style.left, 10),
482
switch (this._resize._currentHandle) {
484
maxH = (h + this._resize.dd.bottomConstraint);
487
maxW = (w + this._resize.dd.leftConstraint);
491
maxW = (w + this._resize.dd.rightConstraint);
494
maxH = (h + this._resize.dd.bottomConstraint);
495
maxW = (w + this._resize.dd.rightConstraint);
499
maxW = (w + this._resize.dd.rightConstraint);
505
//this._resize.set('maxHeight', maxH);
508
//this._resize.set('maxWidth', maxW);
511
this.fireEvent('startResizeEvent', arguments);
516
* @method _setConstraints
517
* @param Boolean inside Used when called from inside a resize event, false by default (dragging)
518
* @description Set the DragDrop constraints to keep the element inside the crop area.
519
* @return {Object} Object containing Top, Right, Bottom and Left constraints
521
_setConstraints: function(inside) {
522
var resize = this._resize;
523
resize.dd.resetConstraints();
524
var height = parseInt(resize.get('height'), 10),
525
width = parseInt(resize.get('width'), 10);
527
//Called from inside the resize callback
528
height = resize._cache.height;
529
width = resize._cache.width;
532
//Get the top, right, bottom and left positions
533
var region = Dom.getRegion(this.get('element'));
534
//Get the element we are working on
535
var el = resize.getWrapEl();
537
//Get the xy position of it
538
var xy = Dom.getXY(el);
540
//Set left to x minus left
541
var left = xy[0] - region.left;
543
//Set right to right minus x minus width
544
var right = region.right - xy[0] - width;
546
//Set top to y minus top
547
var top = xy[1] - region.top;
549
//Set bottom to bottom minus y minus height
550
var bottom = region.bottom - xy[1] - height;
556
resize.dd.setXConstraint(left, right);
557
resize.dd.setYConstraint(top, bottom);
570
* @method getCropCoords
571
* @description Returns the coordinates needed to crop the image
572
* @return {Object} The top, left, height, width and image url of the image being cropped
574
getCropCoords: function() {
576
top: parseInt(this._resize.getWrapEl().style.top, 10),
577
left: parseInt(this._resize.getWrapEl().style.left, 10),
578
height: this._resize._cache.height,
579
width: this._resize._cache.width,
586
* @description Resets the crop element back to it's original position
587
* @return {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} The ImageCropper instance
590
this._resize.resize(null, this.get('initHeight'), this.get('initWidth'), 0, 0, true);
591
this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
592
this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
593
this._syncBackgroundPosition();
599
* @description Get the HTML reference for the image element.
600
* @return {HTMLElement} The image element
603
return this.get('element');
606
* @method getResizeEl
607
* @description Get the HTML reference for the resize element.
608
* @return {HTMLElement} The resize element
610
getResizeEl: function() {
611
return this._resizeEl;
615
* @description Get the HTML reference for the wrap element.
616
* @return {HTMLElement} The wrap element
618
getWrapEl: function() {
624
* @description Get the HTML reference for the mask element.
625
* @return {HTMLElement} The mask element
627
getMaskEl: function() {
632
* @method getResizeMaskEl
633
* @description Get the HTML reference for the resizable object's mask element.
634
* @return {HTMLElement} The resize objects mask element.
636
getResizeMaskEl: function() {
637
return this._resizeMaskEl;
641
* @method getResizeObject
642
* @description Get the Resize Utility object.
643
* @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
645
getResizeObject: function() {
652
* @description The ImageCropper class's initialization method
654
init: function(p_oElement, p_oAttributes) {
655
Crop.superclass.init.call(this, p_oElement, p_oAttributes);
659
if (!Lang.isString(id)) {
660
if (id.tagName && (id.tagName.toLowerCase() == 'img')) {
661
id = Dom.generateId(id);
666
var el = Dom.get(id);
667
if (el.tagName && el.tagName.toLowerCase() == 'img') {
676
Crop._instances[id] = this;
679
this._createResize();
680
this._setConstraints();
685
* @method initAttributes
686
* @description Initializes all of the configuration attributes used to create a croppable element.
687
* @param {Object} attr Object literal specifying a set of
688
* configuration attributes used to create the widget.
691
initAttributes: function(attr) {
692
Crop.superclass.initAttributes.call(this, attr);
695
* @attribute initialXY
696
* @description Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]
699
this.setAttributeConfig('initialXY', {
701
validator: YAHOO.lang.isArray,
702
value: attr.initialXY || [10, 10]
706
* @description The pixel tick for the arrow keys, defaults to 1
709
this.setAttributeConfig('keyTick', {
710
validator: YAHOO.lang.isNumber,
711
value: attr.keyTick || 1
715
* @attribute shiftKeyTick
716
* @description The pixel tick for shift + the arrow keys, defaults to 10
719
this.setAttributeConfig('shiftKeyTick', {
720
validator: YAHOO.lang.isNumber,
721
value: attr.shiftKeyTick || 10
726
* @description Should we use the Arrow keys to position the crop element, defaults to true
729
this.setAttributeConfig('useKeys', {
730
validator: YAHOO.lang.isBoolean,
731
value: ((attr.useKeys === false) ? false : true)
736
* @description Show the Resize Utility status, defaults to true
739
this.setAttributeConfig('status', {
740
validator: YAHOO.lang.isBoolean,
741
value: ((attr.status === false) ? false : true),
742
method: function(status) {
744
this._resize.set('status', status);
750
* @attribute minHeight
751
* @description MinHeight of the crop area, default 50
754
this.setAttributeConfig('minHeight', {
755
validator: YAHOO.lang.isNumber,
756
value: attr.minHeight || 50,
757
method: function(h) {
759
this._resize.set('minHeight', h);
765
* @attribute minWidth
766
* @description MinWidth of the crop area, default 50.
769
this.setAttributeConfig('minWidth', {
770
validator: YAHOO.lang.isNumber,
771
value: attr.minWidth || 50,
772
method: function(w) {
774
this._resize.set('minWidth', w);
781
* @description Set the ratio config option of the Resize Utlility, default false
784
this.setAttributeConfig('ratio', {
785
validator: YAHOO.lang.isBoolean,
786
value: attr.ratio || false,
787
method: function(r) {
789
this._resize.set('ratio', r);
796
* @description Set the autoRatio config option of the Resize Utlility, default true
799
this.setAttributeConfig('autoRatio', {
800
validator: YAHOO.lang.isBoolean,
801
value: ((attr.autoRatio === false) ? false : true),
802
method: function(a) {
804
this._resize.set('autoRatio', a);
810
* @attribute initHeight
811
* @description Set the initlal height of the crop area, defaults to 1/4 of the image height
814
this.setAttributeConfig('initHeight', {
816
validator: YAHOO.lang.isNumber,
817
value: attr.initHeight || (this.get('element').height / 4)
821
* @attribute initWidth
822
* @description Set the initlal width of the crop area, defaults to 1/4 of the image width
825
this.setAttributeConfig('initWidth', {
826
validator: YAHOO.lang.isNumber,
828
value: attr.initWidth || (this.get('element').width / 4)
834
* @description Destroys the ImageCropper object and all of it's elements & listeners.
836
destroy: function() {
837
this._resize.destroy();
838
this._resizeEl.parentNode.removeChild(this._resizeEl);
839
this._mask.parentNode.removeChild(this._mask);
840
Event.purgeElement(this._wrap);
841
this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
843
//Brutal Object Destroy
844
for (var i in this) {
845
if (Lang.hasOwnProperty(this, i)) {
853
* @description Returns a string representing the ImageCropper Object.
856
toString: function() {
858
return 'ImageCropper (#' + this.get('id') + ')';
860
return 'Image Cropper';
864
YAHOO.widget.ImageCropper = Crop;
868
* @description Fires when the DragDrop dragEvent
869
* @type YAHOO.util.CustomEvent
872
* @event startResizeEvent
873
* @description Fires when when a resize action is started.
874
* @type YAHOO.util.CustomEvent
878
* @description Fires on every element resize.
879
* @type YAHOO.util.CustomEvent
883
* @description Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent
884
* @type YAHOO.util.CustomEvent
889
YAHOO.register("imagecropper", YAHOO.widget.ImageCropper, {version: "2.7.0", build: "1799"});
added
removed
var/httpd/htdocs/yui/2.7.0/build/imagecropper/imagecropper.js
