Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
YUI.add('yui2-imagecropper', function(Y) {
2
    var YAHOO    = Y.YUI2;
3
    /*
4
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
5
Code licensed under the BSD License:
6
http://developer.yahoo.com/yui/license.html
7
version: 2.9.0
8
*/
9
/**
10
 * @description <p>Creates a Image Cropper control.</p>
11
 * @namespace YAHOO.widget
12
 * @requires yahoo, dom, dragdrop, element, event, resize
13
 * @module imagecropper
14
 */
15
(function() {
16
var Dom = YAHOO.util.Dom,
17
    Event = YAHOO.util.Event,
18
    Lang = YAHOO.lang;
19
 
20
    /**
21
     * @constructor
22
     * @class ImageCropper
23
     * @description <p>Creates a Image Cropper control.</p>
24
     * @extends YAHOO.util.Element
25
     * @param {String/HTMLElement} el The image element to make croppable.
26
     * @param {Object} attrs Object liternal containing configuration parameters.
27
    */
28
    var Crop = function(el, config) {
29
        var oConfig = {
30
            element: el,
31
            attributes: config || {}
32
        };
33
 
34
        Crop.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
35
    };
36
 
37
    /**
38
    * @private
39
    * @static
40
    * @property _instances
41
    * @description Internal hash table for all ImageCropper instances
42
    * @type Object
43
    */
44
    Crop._instances = {};
45
    /**
46
    * @static
47
    * @method getCropperById
48
    * @description Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.
49
    * @return {Object} The ImageCropper Object
50
    */
51
    Crop.getCropperById = function(id) {
52
        if (Crop._instances[id]) {
53
            return Crop._instances[id];
54
        }
55
        return false;
56
    };
57
 
58
    YAHOO.extend(Crop, YAHOO.util.Element, {
59
        /**
60
        * @private
61
        * @property CSS_MAIN
62
        * @description The CSS class used to wrap the element
63
        * @type String
64
        */
65
        CSS_MAIN: 'yui-crop',
66
        /**
67
        * @private
68
        * @property CSS_MASK
69
        * @description The CSS class for the mask element
70
        * @type String
71
        */
72
        CSS_MASK: 'yui-crop-mask',
73
        /**
74
        * @private
75
        * @property CSS_RESIZE_MASK
76
        * @description The CSS class for the mask inside the resize element
77
        * @type {HTML}
78
        */
79
        CSS_RESIZE_MASK: 'yui-crop-resize-mask',
80
 
81
        /**
82
        * @private
83
        * @property _image
84
        * @description The url of the image we are cropping
85
        * @type String
86
        */
87
        _image: null,
88
        /**
89
        * @private
90
        * @property _active
91
        * @description Flag to determine if the crop region is active
92
        * @type Boolean
93
        */
94
        _active: null,
95
        /**
96
        * @private
97
        * @property _resize
98
        * @description A reference to the Resize Utility used in this Cropper Instance
99
        * @type Object
100
        */
101
        _resize: null,
102
        /**
103
        * @private
104
        * @property _resizeEl
105
        * @description The HTML Element used to create the Resize Oject
106
        * @type HTMLElement
107
        */
108
        _resizeEl: null,
109
        /**
110
        * @private
111
        * @property _resizeMaskEl
112
        * @description The HTML Element used to create the Resize mask
113
        * @type HTMLElement
114
        */
115
        _resizeMaskEl: null,
116
        /**
117
        * @private
118
        * @property _wrap
119
        * @description The HTML Element created to wrap the image
120
        * @type HTMLElement
121
        */
122
        _wrap: null,
123
        /**
124
        * @private
125
        * @property _mask
126
        * @description The HTML Element created to "mask" the image being cropped
127
        * @type HTMLElement
128
        */
129
        _mask: null,
130
        /**
131
        * @private
132
        * @method _createWrap
133
        * @description Creates the wrapper element used to wrap the image
134
        */
135
        _createWrap: function() {
136
            this._wrap = document.createElement('div');
137
            this._wrap.id = this.get('element').id + '_wrap';
138
            this._wrap.className = this.CSS_MAIN;
139
            var el = this.get('element');
140
            this._wrap.style.width = el.width ? el.width + 'px' : Dom.getStyle(el, 'width');
141
            this._wrap.style.height = el.height ? el.height + 'px' : Dom.getStyle(el, 'height');
142
 
143
            var par = this.get('element').parentNode;
144
            par.replaceChild(this._wrap, this.get('element'));
145
            this._wrap.appendChild(this.get('element'));
146
 
147
            Event.on(this._wrap, 'mouseover', this._handleMouseOver, this, true);
148
            Event.on(this._wrap, 'mouseout', this._handleMouseOut, this, true);
149
 
150
            Event.on(this._wrap, 'click', function(ev) { Event.stopEvent(ev); }, this, true);
151
        },
152
 
153
        /**
154
        * @private
155
        * @method _createMask
156
        * @description Creates the mask element used to mask the image
157
        */
158
        _createMask: function() {
159
            this._mask = document.createElement('div');
160
            this._mask.className = this.CSS_MASK;
161
            this._wrap.appendChild(this._mask);
162
        },
163
 
164
        /**
165
        * @private
166
        * @method _createResize
167
        * @description Creates the resize element and the instance of the Resize Utility
168
        */
169
        _createResize: function() {
170
            this._resizeEl = document.createElement('div');
171
            this._resizeEl.className = YAHOO.util.Resize.prototype.CSS_RESIZE;
172
            this._resizeEl.style.position = 'absolute';
173
 
174
            this._resizeEl.innerHTML = '<div class="' + this.CSS_RESIZE_MASK + '"></div>';
175
            this._resizeMaskEl = this._resizeEl.firstChild;
176
            this._wrap.appendChild(this._resizeEl);
177
            this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
178
            this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
179
            this._resizeMaskEl.style.height = Math.floor(this.get('initHeight')) + 'px';
180
            this._resizeMaskEl.style.width = Math.floor(this.get('initWidth')) + 'px';
181
 
182
            this._resize = new YAHOO.util.Resize(this._resizeEl, {
183
                knobHandles: true,
184
                handles: 'all',
185
                draggable: true,
186
                status: this.get('status'),
187
                minWidth: this.get('minWidth'),
188
                minHeight: this.get('minHeight'),
189
                ratio: this.get('ratio'),
190
                autoRatio: this.get('autoRatio'),
191
                height: this.get('initHeight'),
192
                width: this.get('initWidth')
193
            });
194
 
195
            this._setBackgroundImage(this.get('element').getAttribute('src', 2));
196
            this._setBackgroundPosition(-(this.get('initialXY')[0]),  -(this.get('initialXY')[1]));
197
 
198
            this._resize.on('startResize', this._handleStartResizeEvent, this, true);
199
            this._resize.on('endResize', this._handleEndResizeEvent, this, true);
200
            this._resize.on('dragEvent', this._handleDragEvent, this, true);
201
            this._resize.on('beforeResize', this._handleBeforeResizeEvent, this, true);
202
            this._resize.on('resize', this._handleResizeEvent, this, true);
203
            this._resize.dd.on('b4StartDragEvent', this._handleB4DragEvent, this, true);
204
        },
205
 
206
        /**
207
        * @private
208
        * @method _handleMouseOver
209
        * @description Handles the mouseover event
210
        */
211
        _handleMouseOver: function(ev) {
212
            var evType = 'keydown';
213
            if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
214
                evType = 'keypress';
215
            }
216
            if (!this._active) {
217
                this._active = true;
218
                if (this.get('useKeys')) {
219
                    Event.on(document, evType, this._handleKeyPress, this, true);
220
                }
221
            }
222
        },
223
        /**
224
        * @private
225
        * @method _handleMouseOut
226
        * @description Handles the mouseout event
227
        */
228
        _handleMouseOut: function(ev) {
229
            var evType = 'keydown';
230
            if (YAHOO.env.ua.gecko || YAHOO.env.ua.opera) {
231
                evType = 'keypress';
232
            }
233
            this._active = false;
234
            if (this.get('useKeys')) {
235
                Event.removeListener(document, evType, this._handleKeyPress);
236
            }
237
        },
238
 
239
        /**
240
        * @private
241
        * @method _moveEl
242
        * @description Moves the resize element based on the arrow keys
243
        */
244
        _moveEl: function(dir, inc) {
245
            var t = 0, l = 0,
246
                region = this._setConstraints(),
247
                resize = true;
248
 
249
            switch (dir) {
250
                case 'down':
251
                    t = -(inc);
252
                    if ((region.bottom - inc) < 0) {
253
                        resize = false;
254
                        this._resizeEl.style.top = (region.top + region.bottom) + 'px';
255
                    }
256
                    break;
257
                case 'up':
258
                    t = (inc);
259
                    if ((region.top - inc) < 0) {
260
                        resize = false;
261
                        this._resizeEl.style.top = '0px';
262
                    }
263
                    break;
264
                case 'right':
265
                    l = -(inc);
266
                    if ((region.right - inc) < 0) {
267
                        resize = false;
268
                        this._resizeEl.style.left = (region.left + region.right) + 'px';
269
                    }
270
                    break;
271
                case 'left':
272
                    l = inc;
273
                    if ((region.left - inc) < 0) {
274
                        resize = false;
275
                        this._resizeEl.style.left = '0px';
276
                    }
277
                    break;
278
            }
279
 
280
            if (resize) {
281
                this._resizeEl.style.left = (parseInt(this._resizeEl.style.left, 10) - l) + 'px';
282
                this._resizeEl.style.top = (parseInt(this._resizeEl.style.top, 10) - t) + 'px';
283
                this.fireEvent('moveEvent', { target: 'keypress' });
284
            } else {
285
                this._setConstraints();
286
            }
287
            this._syncBackgroundPosition();
288
        },
289
 
290
        /**
291
        * @private
292
        * @method _handleKeyPress
293
        * @description Handles the keypress event
294
        */
295
        _handleKeyPress: function(ev) {
296
            var kc = Event.getCharCode(ev),
297
                stopEvent = false,
298
                inc = ((ev.shiftKey) ? this.get('shiftKeyTick') : this.get('keyTick'));
299
 
300
            switch (kc) {
301
                case 0x25: // left
302
                    this._moveEl('left', inc);
303
                    stopEvent = true;
304
                    break;
305
                case 0x26: // up
306
                    this._moveEl('up', inc);
307
                    stopEvent = true;
308
                    break;
309
                case 0x27: // right
310
                    this._moveEl('right', inc);
311
                    stopEvent = true;
312
                    break;
313
                case 0x28: // down
314
                    this._moveEl('down', inc);
315
                    stopEvent = true;
316
                    break;
317
                default:
318
            }
319
            if (stopEvent) {
320
                Event.preventDefault(ev);
321
            }
322
        },
323
 
324
        /**
325
        * @private
326
        * @method _handleB4DragEvent
327
        * @description Handles the DragDrop b4DragEvent event
328
        */
329
        _handleB4DragEvent: function() {
330
            this._setConstraints();
331
        },
332
 
333
        /**
334
        * @private
335
        * @method _handleDragEvent
336
        * @description Handles the DragDrop DragEvent event
337
        */
338
        _handleDragEvent: function() {
339
            this._syncBackgroundPosition();
340
            this.fireEvent('dragEvent', arguments);
341
            this.fireEvent('moveEvent', { target: 'dragevent' });
342
        },
343
 
344
        /**
345
        * @private
346
        * @method _handleBeforeResizeEvent
347
        * @description Handles the Resize Utilitys beforeResize event
348
        */
349
        _handleBeforeResizeEvent: function(args) {
350
            var region = Dom.getRegion(this.get('element')),
351
                c = this._resize._cache,
352
                ch = this._resize._currentHandle, h = 0, w = 0;
353
 
354
            if (args.top && (args.top < region.top)) {
355
                h = (c.height + c.top) - region.top;
356
                Dom.setY(this._resize.getWrapEl(), region.top);
357
                this._resize.getWrapEl().style.height = h + 'px';
358
                this._resize._cache.height = h;
359
                this._resize._cache.top = region.top;
360
                this._syncBackgroundPosition();
361
                return false;
362
            }
363
            if (args.left && (args.left < region.left)) {
364
                w = (c.width + c.left) - region.left;
365
                Dom.setX(this._resize.getWrapEl(), region.left);
366
                this._resize._cache.left = region.left;
367
                this._resize.getWrapEl().style.width = w + 'px';
368
                this._resize._cache.width = w;
369
                this._syncBackgroundPosition();
370
                return false;
371
            }
372
            if (ch != 'tl' && ch != 'l' && ch != 'bl') {
373
                if (c.left && args.width && ((c.left + args.width) > region.right)) {
374
                    w = (region.right - c.left);
375
                    Dom.setX(this._resize.getWrapEl(), (region.right - w));
376
                    this._resize.getWrapEl().style.width = w + 'px';
377
                    this._resize._cache.left = (region.right - w);
378
                    this._resize._cache.width = w;
379
                    this._syncBackgroundPosition();
380
                    return false;
381
                }
382
            }
383
            if (ch != 't' && ch != 'tr' && ch != 'tl') {
384
                if (c.top && args.height && ((c.top + args.height) > region.bottom)) {
385
                    h = (region.bottom - c.top);
386
                    Dom.setY(this._resize.getWrapEl(), (region.bottom - h));
387
                    this._resize.getWrapEl().style.height = h + 'px';
388
                    this._resize._cache.height = h;
389
                    this._resize._cache.top = (region.bottom - h);
390
                    this._syncBackgroundPosition();
391
                    return false;
392
                }
393
            }
394
        },
395
        /**
396
        * @private
397
        * @method _handleResizeMaskEl
398
        * @description Resizes the inner mask element
399
        */
400
        _handleResizeMaskEl: function() {
401
            var a = this._resize._cache;
402
            this._resizeMaskEl.style.height = Math.floor(a.height) + 'px';
403
            this._resizeMaskEl.style.width = Math.floor(a.width) + 'px';
404
        },
405
        /**
406
        * @private
407
        * @method _handleResizeEvent
408
        * @param Event ev The Resize Utilitys resize event.
409
        * @description Handles the Resize Utilitys Resize event
410
        */
411
        _handleResizeEvent: function(ev) {
412
            this._setConstraints(true);
413
            this._syncBackgroundPosition();
414
            this.fireEvent('resizeEvent', arguments);
415
            this.fireEvent('moveEvent', { target: 'resizeevent' });
416
        },
417
 
418
        /**
419
        * @private
420
        * @method _syncBackgroundPosition
421
        * @description Syncs the packground position of the resize element with the resize elements top and left style position
422
        */
423
        _syncBackgroundPosition: function() {
424
            this._handleResizeMaskEl();
425
            this._setBackgroundPosition(-(parseInt(this._resizeEl.style.left, 10)), -(parseInt(this._resizeEl.style.top, 10)));
426
        },
427
 
428
        /**
429
        * @private
430
        * @method _setBackgroundPosition
431
        * @param Number l The left position
432
        * @param Number t The top position
433
        * @description Sets the background image position to the top and left position
434
        */
435
        _setBackgroundPosition: function(l, t) {
436
            var bl = parseInt(Dom.getStyle(this._resize.get('element'), 'borderLeftWidth'), 10);
437
            var bt = parseInt(Dom.getStyle(this._resize.get('element'), 'borderTopWidth'), 10);
438
            if (isNaN(bl)) {
439
                bl = 0;
440
            }
441
            if (isNaN(bt)) {
442
                bt = 0;
443
            }
444
            var mask = this._resize.getWrapEl().firstChild;
445
            var pos = (l - bl) + 'px ' + (t - bt) + 'px';
446
            this._resizeMaskEl.style.backgroundPosition = pos;
447
        },
448
 
449
        /**
450
        * @private
451
        * @method _setBackgroundImage
452
        * @param String url The url of the image
453
        * @description Sets the background image of the resize element
454
        */
455
        _setBackgroundImage: function(url) {
456
            var mask = this._resize.getWrapEl().firstChild;
457
            this._image = url;
458
            mask.style.backgroundImage = 'url(' + url + '#)';
459
        },
460
 
461
        /**
462
        * @private
463
        * @method _handleEndResizeEvent
464
        * @description Handles the Resize Utilitys endResize event
465
        */
466
        _handleEndResizeEvent: function() {
467
            this._setConstraints(true);
468
        },
469
        /**
470
        * @private
471
        * @method _handleStartResizeEvent
472
        * @description Handles the Resize Utilitys startResize event
473
        */
474
        _handleStartResizeEvent: function() {
475
            this._setConstraints(true);
476
 
477
            var h = this._resize._cache.height,
478
                 w = this._resize._cache.width,
479
                 t = parseInt(this._resize.getWrapEl().style.top, 10),
480
                 l = parseInt(this._resize.getWrapEl().style.left, 10),
481
                 maxH = 0, maxW = 0;
482
 
483
            switch (this._resize._currentHandle) {
484
                case 'b':
485
                    maxH = (h + this._resize.dd.bottomConstraint);
486
                    break;
487
                case 'l':
488
                    maxW = (w + this._resize.dd.leftConstraint);
489
                    break;
490
                case 'r':
491
                    maxH = (h + t);
492
                    maxW = (w + this._resize.dd.rightConstraint);
493
                    break;
494
                 case 'br':
495
                     maxH = (h + this._resize.dd.bottomConstraint);
496
                     maxW = (w + this._resize.dd.rightConstraint);
497
                     break;
498
                 case 'tr':
499
                     maxH = (h + t);
500
                     maxW = (w + this._resize.dd.rightConstraint);
501
                     break;
502
 
503
             }
504
 
505
             if (maxH) {
506
                 //this._resize.set('maxHeight', maxH);
507
             }
508
             if (maxW) {
509
                 //this._resize.set('maxWidth', maxW);
510
             }
511
 
512
            this.fireEvent('startResizeEvent', arguments);
513
        },
514
 
515
        /**
516
        * @private
517
        * @method _setConstraints
518
        * @param Boolean inside Used when called from inside a resize event, false by default (dragging)
519
        * @description Set the DragDrop constraints to keep the element inside the crop area.
520
        * @return {Object} Object containing Top, Right, Bottom and Left constraints
521
        */
522
        _setConstraints: function(inside) {
523
            var resize = this._resize;
524
            resize.dd.resetConstraints();
525
            var height = parseInt(resize.get('height'), 10),
526
                width = parseInt(resize.get('width'), 10);
527
            if (inside) {
528
                //Called from inside the resize callback
529
                height = resize._cache.height;
530
                width = resize._cache.width;
531
            }
532
 
533
            //Get the top, right, bottom and left positions
534
            var region = Dom.getRegion(this.get('element'));
535
            //Get the element we are working on
536
            var el = resize.getWrapEl();
537
 
538
            //Get the xy position of it
539
            var xy = Dom.getXY(el);
540
 
541
            //Set left to x minus left
542
            var left = xy[0] - region.left;
543
 
544
            //Set right to right minus x minus width
545
            var right = region.right - xy[0] - width;
546
 
547
            //Set top to y minus top
548
            var top = xy[1] - region.top;
549
 
550
            //Set bottom to bottom minus y minus height
551
            var bottom = region.bottom - xy[1] - height;
552
 
553
            if (top < 0) {
554
                top = 0;
555
            }
556
 
557
            resize.dd.setXConstraint(left, right);
558
            resize.dd.setYConstraint(top, bottom);
559
 
560
            return {
561
                top: top,
562
                right: right,
563
                bottom: bottom,
564
                left: left
565
            };
566
 
567
 
568
 
569
        },
570
        /**
571
        * @method getCropCoords
572
        * @description Returns the coordinates needed to crop the image
573
        * @return {Object} The top, left, height, width and image url of the image being cropped
574
        */
575
        getCropCoords: function() {
576
            var coords = {
577
                top: parseInt(this._resize.getWrapEl().style.top, 10),
578
                left: parseInt(this._resize.getWrapEl().style.left, 10),
579
                height: this._resize._cache.height,
580
                width: this._resize._cache.width,
581
                image: this._image
582
            };
583
            return coords;
584
        },
585
        /**
586
        * @method reset
587
        * @description Resets the crop element back to it's original position
588
        * @return {<a href="YAHOO.widget.ImageCropper.html">YAHOO.widget.ImageCropper</a>} The ImageCropper instance
589
        */
590
        reset: function() {
591
            this._resize.resize(null, this.get('initHeight'), this.get('initWidth'), 0, 0, true);
592
            this._resizeEl.style.top = this.get('initialXY')[1] + 'px';
593
            this._resizeEl.style.left = this.get('initialXY')[0] + 'px';
594
            this._syncBackgroundPosition();
595
            return this;
596
        },
597
 
598
        /**
599
        * @method getEl
600
        * @description Get the HTML reference for the image element.
601
        * @return {HTMLElement} The image element
602
        */
603
        getEl: function() {
604
            return this.get('element');
605
        },
606
        /**
607
        * @method getResizeEl
608
        * @description Get the HTML reference for the resize element.
609
        * @return {HTMLElement} The resize element
610
        */
611
        getResizeEl: function() {
612
            return this._resizeEl;
613
        },
614
        /**
615
        * @method getWrapEl
616
        * @description Get the HTML reference for the wrap element.
617
        * @return {HTMLElement} The wrap element
618
        */
619
        getWrapEl: function() {
620
            return this._wrap;
621
        },
622
 
623
        /**
624
        * @method getMaskEl
625
        * @description Get the HTML reference for the mask element.
626
        * @return {HTMLElement} The mask element
627
        */
628
        getMaskEl: function() {
629
            return this._mask;
630
        },
631
 
632
        /**
633
        * @method getResizeMaskEl
634
        * @description Get the HTML reference for the resizable object's mask element.
635
        * @return {HTMLElement} The resize objects mask element.
636
        */
637
        getResizeMaskEl: function() {
638
            return this._resizeMaskEl;
639
        },
640
 
641
        /**
642
        * @method getResizeObject
643
        * @description Get the Resize Utility object.
644
        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
645
        */
646
        getResizeObject: function() {
647
            return this._resize;
648
        },
649
 
650
        /**
651
        * @private
652
        * @method init
653
        * @description The ImageCropper class's initialization method
654
        */
655
        init: function(p_oElement, p_oAttributes) {
656
            Crop.superclass.init.call(this, p_oElement, p_oAttributes);
657
 
658
            var id = p_oElement;
659
 
660
            if (!Lang.isString(id)) {
661
                if (id.tagName && (id.tagName.toLowerCase() == 'img')) {
662
                    id = Dom.generateId(id);
663
                } else {
664
                    return false;
665
                }
666
            } else {
667
                var el = Dom.get(id);
668
                if (el.tagName && el.tagName.toLowerCase() == 'img') {
669
                    //All good
670
                } else {
671
                    return false;
672
                }
673
            }
674
 
675
 
676
 
677
            Crop._instances[id] = this;
678
            this._createWrap();
679
            this._createMask();
680
            this._createResize();
681
            this._setConstraints();
682
 
683
        },
684
        /**
685
        * @private
686
        * @method initAttributes
687
        * @description Initializes all of the configuration attributes used to create a croppable element.
688
        * @param {Object} attr Object literal specifying a set of
689
        * configuration attributes used to create the widget.
690
        */
691
 
692
        initAttributes: function(attr) {
693
            Crop.superclass.initAttributes.call(this, attr);
694
 
695
            /**
696
            * @attribute initialXY
697
            * @description Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]
698
            * @type Array
699
            */
700
            this.setAttributeConfig('initialXY', {
701
                validator: YAHOO.lang.isArray,
702
                value: attr.initialXY || [10, 10]
703
            });
704
            /**
705
            * @attribute keyTick
706
            * @description The pixel tick for the arrow keys, defaults to 1
707
            * @type Number
708
            */
709
            this.setAttributeConfig('keyTick', {
710
                validator: YAHOO.lang.isNumber,
711
                value: attr.keyTick || 1
712
            });
713
 
714
            /**
715
            * @attribute shiftKeyTick
716
            * @description The pixel tick for shift + the arrow keys, defaults to 10
717
            * @type Number
718
            */
719
            this.setAttributeConfig('shiftKeyTick', {
720
                validator: YAHOO.lang.isNumber,
721
                value: attr.shiftKeyTick || 10
722
            });
723
 
724
            /**
725
            * @attribute useKeys
726
            * @description Should we use the Arrow keys to position the crop element, defaults to true
727
            * @type Boolean
728
            */
729
            this.setAttributeConfig('useKeys', {
730
                validator: YAHOO.lang.isBoolean,
731
                value: ((attr.useKeys === false) ? false : true)
732
            });
733
 
734
            /**
735
            * @attribute status
736
            * @description Show the Resize Utility status, defaults to true
737
            * @type Boolean
738
            */
739
            this.setAttributeConfig('status', {
740
                validator: YAHOO.lang.isBoolean,
741
                value: ((attr.status === false) ? false : true),
742
                method: function(status) {
743
                    if (this._resize) {
744
                        this._resize.set('status', status);
745
                    }
746
                }
747
            });
748
 
749
            /**
750
            * @attribute minHeight
751
            * @description MinHeight of the crop area, default 50
752
            * @type Number
753
            */
754
            this.setAttributeConfig('minHeight', {
755
                validator: YAHOO.lang.isNumber,
756
                value: attr.minHeight || 50,
757
                method: function(h) {
758
                    if (this._resize) {
759
                        this._resize.set('minHeight', h);
760
                    }
761
                }
762
            });
763
 
764
            /**
765
            * @attribute minWidth
766
            * @description MinWidth of the crop area, default 50.
767
            * @type Number
768
            */
769
            this.setAttributeConfig('minWidth', {
770
                validator: YAHOO.lang.isNumber,
771
                value: attr.minWidth || 50,
772
                method: function(w) {
773
                    if (this._resize) {
774
                        this._resize.set('minWidth', w);
775
                    }
776
                }
777
            });
778
 
779
            /**
780
            * @attribute ratio
781
            * @description Set the ratio config option of the Resize Utlility, default false
782
            * @type Boolean
783
            */
784
            this.setAttributeConfig('ratio', {
785
                validator: YAHOO.lang.isBoolean,
786
                value: attr.ratio || false,
787
                method: function(r) {
788
                    if (this._resize) {
789
                        this._resize.set('ratio', r);
790
                    }
791
                }
792
            });
793
 
794
            /**
795
            * @attribute ratio
796
            * @description Set the autoRatio config option of the Resize Utlility, default true
797
            * @type Boolean
798
            */
799
            this.setAttributeConfig('autoRatio', {
800
                validator: YAHOO.lang.isBoolean,
801
                value: ((attr.autoRatio === false) ? false : true),
802
                method: function(a) {
803
                    if (this._resize) {
804
                        this._resize.set('autoRatio', a);
805
                    }
806
                }
807
            });
808
 
809
            /**
810
            * @attribute initHeight
811
            * @description Set the initlal height of the crop area, defaults to 1/4 of the image height
812
            * @type Number
813
            */
814
            this.setAttributeConfig('initHeight', {
815
                writeOnce: true,
816
                validator: YAHOO.lang.isNumber,
817
                value: attr.initHeight || (this.get('element').height / 4)
818
            });
819
 
820
            /**
821
            * @attribute initWidth
822
            * @description Set the initlal width of the crop area, defaults to 1/4 of the image width
823
            * @type Number
824
            */
825
            this.setAttributeConfig('initWidth', {
826
                validator: YAHOO.lang.isNumber,
827
                writeOnce: true,
828
                value: attr.initWidth || (this.get('element').width / 4)
829
            });
830
 
831
        },
832
        /**
833
        * @method destroy
834
        * @description Destroys the ImageCropper object and all of it's elements & listeners.
835
        */
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);
842
 
843
            //Brutal Object Destroy
844
            for (var i in this) {
845
                if (Lang.hasOwnProperty(this, i)) {
846
                    this[i] = null;
847
                }
848
            }
849
 
850
        },
851
        /**
852
        * @method toString
853
        * @description Returns a string representing the ImageCropper Object.
854
        * @return {String}
855
        */
856
        toString: function() {
857
            if (this.get) {
858
                return 'ImageCropper (#' + this.get('id') + ')';
859
            }
860
            return 'Image Cropper';
861
        }
862
    });
863
 
864
    YAHOO.widget.ImageCropper = Crop;
865
 
866
/**
867
* @event dragEvent
868
* @description Fires when the DragDrop dragEvent
869
* @type YAHOO.util.CustomEvent
870
*/
871
/**
872
* @event startResizeEvent
873
* @description Fires when when a resize action is started.
874
* @type YAHOO.util.CustomEvent
875
*/
876
/**
877
* @event resizeEvent
878
* @description Fires on every element resize.
879
* @type YAHOO.util.CustomEvent
880
*/
881
/**
882
* @event moveEvent
883
* @description Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent
884
* @type YAHOO.util.CustomEvent
885
*/
886
 
887
})();
888
 
889
YAHOO.register("imagecropper", YAHOO.widget.ImageCropper, {version: "2.9.0", build: "2800"});
890
 
891
}, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-dragdrop", "yui2-element", "yui2-skin-sam-resize", "yui2-resize", "yui2-skin-sam-imagecropper"]});