← Back to branch summary

~andreserl/maas/packaging_precise_rebase

« back to all changes in this revision

Viewing changes to debian/extras/jslibs/yui/resize-base/resize-base.js

  • Committer: Andres Rodriguez
  • Date: 2013-03-20 18:12:30 UTC
  • mfrom: (145.2.22 precise.sru)
  • Revision ID: andreserl@ubuntu.com-20130320181230-6l5guc0nhlv2z4p7
Re-base againts latest quantal released branch towards SRU

Show diffs side-by-side

added added

removed removed

Lines of Context:
debian/extras/jslibs/yui/resize-base/resize-base.js
 
1
/*
 
2
YUI 3.5.1 (build 22)
 
3
Copyright 2012 Yahoo! Inc. All rights reserved.
 
4
Licensed under the BSD License.
 
5
http://yuilibrary.com/license/
 
6
*/
 
7
YUI.add('resize-base', function(Y) {
 
8
 
 
9
/**
 
10
 * The Resize Utility allows you to make an HTML element resizable.
 
11
 * @module resize
 
12
 * @main resize
 
13
 */
 
14
 
 
15
var Lang = Y.Lang,
 
16
        isArray = Lang.isArray,
 
17
        isBoolean = Lang.isBoolean,
 
18
        isNumber = Lang.isNumber,
 
19
        isString = Lang.isString,
 
20
 
 
21
        YArray  = Y.Array,
 
22
        trim = Lang.trim,
 
23
        indexOf = YArray.indexOf,
 
24
 
 
25
        COMMA = ',',
 
26
        DOT = '.',
 
27
        EMPTY_STR = '',
 
28
        HANDLE_SUB = '{handle}',
 
29
        SPACE = ' ',
 
30
 
 
31
        ACTIVE = 'active',
 
32
        ACTIVE_HANDLE = 'activeHandle',
 
33
        ACTIVE_HANDLE_NODE = 'activeHandleNode',
 
34
        ALL = 'all',
 
35
        AUTO_HIDE = 'autoHide',
 
36
        BORDER = 'border',
 
37
        BOTTOM = 'bottom',
 
38
        CLASS_NAME = 'className',
 
39
        COLOR = 'color',
 
40
        DEF_MIN_HEIGHT = 'defMinHeight',
 
41
        DEF_MIN_WIDTH = 'defMinWidth',
 
42
        HANDLE = 'handle',
 
43
        HANDLES = 'handles',
 
44
        HANDLES_WRAPPER = 'handlesWrapper',
 
45
        HIDDEN = 'hidden',
 
46
        INNER = 'inner',
 
47
        LEFT = 'left',
 
48
        MARGIN = 'margin',
 
49
        NODE = 'node',
 
50
        NODE_NAME = 'nodeName',
 
51
        NONE = 'none',
 
52
        OFFSET_HEIGHT = 'offsetHeight',
 
53
        OFFSET_WIDTH = 'offsetWidth',
 
54
        PADDING = 'padding',
 
55
        PARENT_NODE = 'parentNode',
 
56
        POSITION = 'position',
 
57
        RELATIVE = 'relative',
 
58
        RESIZE = 'resize',
 
59
        RESIZING = 'resizing',
 
60
        RIGHT = 'right',
 
61
        STATIC = 'static',
 
62
        STYLE = 'style',
 
63
        TOP = 'top',
 
64
        WIDTH = 'width',
 
65
        WRAP = 'wrap',
 
66
        WRAPPER = 'wrapper',
 
67
        WRAP_TYPES = 'wrapTypes',
 
68
 
 
69
        EV_MOUSE_UP = 'resize:mouseUp',
 
70
        EV_RESIZE = 'resize:resize',
 
71
        EV_RESIZE_ALIGN = 'resize:align',
 
72
        EV_RESIZE_END = 'resize:end',
 
73
        EV_RESIZE_START = 'resize:start',
 
74
 
 
75
        T = 't',
 
76
        TR = 'tr',
 
77
        R = 'r',
 
78
        BR = 'br',
 
79
        B = 'b',
 
80
        BL = 'bl',
 
81
        L = 'l',
 
82
        TL = 'tl',
 
83
 
 
84
        concat = function() {
 
85
                return Array.prototype.slice.call(arguments).join(SPACE);
 
86
        },
 
87
 
 
88
        // round the passed number to get rid of pixel-flickering
 
89
        toRoundNumber = function(num) {
 
90
                return Math.round(parseFloat(num)) || 0;
 
91
        },
 
92
 
 
93
        getCompStyle = function(node, val) {
 
94
                return node.getComputedStyle(val);
 
95
        },
 
96
 
 
97
        handleAttrName = function(handle) {
 
98
                return HANDLE + handle.toUpperCase();
 
99
        },
 
100
 
 
101
        isNode = function(v) {
 
102
                return (v instanceof Y.Node);
 
103
        },
 
104
 
 
105
        toInitialCap = Y.cached(
 
106
                function(str) {
 
107
                        return str.substring(0, 1).toUpperCase() + str.substring(1);
 
108
                }
 
109
        ),
 
110
 
 
111
        capitalize = Y.cached(function() {
 
112
                var out = [],
 
113
                        args = YArray(arguments, 0, true);
 
114
 
 
115
                YArray.each(args, function(part, i) {
 
116
                        if (i > 0) {
 
117
                                part = toInitialCap(part);
 
118
                        }
 
119
                        out.push(part);
 
120
                });
 
121
 
 
122
                return out.join(EMPTY_STR);
 
123
        }),
 
124
 
 
125
        getCN = Y.ClassNameManager.getClassName,
 
126
 
 
127
        CSS_RESIZE = getCN(RESIZE),
 
128
        CSS_RESIZE_HANDLE = getCN(RESIZE, HANDLE),
 
129
        CSS_RESIZE_HANDLE_ACTIVE = getCN(RESIZE, HANDLE, ACTIVE),
 
130
        CSS_RESIZE_HANDLE_INNER = getCN(RESIZE, HANDLE, INNER),
 
131
        CSS_RESIZE_HANDLE_INNER_PLACEHOLDER = getCN(RESIZE, HANDLE, INNER, HANDLE_SUB),
 
132
        CSS_RESIZE_HANDLE_PLACEHOLDER = getCN(RESIZE, HANDLE, HANDLE_SUB),
 
133
        CSS_RESIZE_HIDDEN_HANDLES = getCN(RESIZE, HIDDEN, HANDLES),
 
134
        CSS_RESIZE_HANDLES_WRAPPER = getCN(RESIZE, HANDLES, WRAPPER),
 
135
        CSS_RESIZE_WRAPPER = getCN(RESIZE, WRAPPER);
 
136
 
 
137
/**
 
138
A base class for Resize, providing:
 
139
 
 
140
   * Basic Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
 
141
   * Applies drag handles to an element to make it resizable
 
142
   * Here is the list of valid resize handles:
 
143
       `[ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl' ]`. You can
 
144
       read this list as top, top-right, right, bottom-right, bottom,
 
145
       bottom-left, left, top-left.
 
146
   * The drag handles are inserted into the element and positioned
 
147
       absolute. Some elements, such as a textarea or image, don't support
 
148
       children. To overcome that, set wrap:true in your config and the
 
149
       element willbe wrapped for you automatically.
 
150
 
 
151
Quick Example:
 
152
 
 
153
    var instance = new Y.Resize({
 
154
        node: '#resize1',
 
155
        preserveRatio: true,
 
156
        wrap: true,
 
157
        maxHeight: 170,
 
158
        maxWidth: 400,
 
159
        handles: 't, tr, r, br, b, bl, l, tl'
 
160
    });
 
161
 
 
162
Check the list of <a href="Resize.html#configattributes">Configuration Attributes</a> available for
 
163
Resize.
 
164
 
 
165
@class Resize
 
166
@param config {Object} Object literal specifying widget configuration properties.
 
167
@constructor
 
168
@extends Base
 
169
*/
 
170
 
 
171
function Resize() {
 
172
    Resize.superclass.constructor.apply(this, arguments);
 
173
}
 
174
 
 
175
Y.mix(Resize, {
 
176
        /**
 
177
         * Static property provides a string to identify the class.
 
178
         *
 
179
         * @property NAME
 
180
         * @type String
 
181
         * @static
 
182
         */
 
183
        NAME: RESIZE,
 
184
 
 
185
        /**
 
186
         * Static property used to define the default attribute
 
187
         * configuration for the Resize.
 
188
         *
 
189
         * @property ATTRS
 
190
         * @type Object
 
191
         * @static
 
192
         */
 
193
        ATTRS: {
 
194
                /**
 
195
                 * Stores the active handle during the resize.
 
196
                 *
 
197
                 * @attribute activeHandle
 
198
                 * @default null
 
199
                 * @private
 
200
                 * @type String
 
201
                 */
 
202
                activeHandle: {
 
203
                        value: null,
 
204
                        validator: function(v) {
 
205
                return Y.Lang.isString(v) || Y.Lang.isNull(v);
 
206
            }
 
207
                },
 
208
 
 
209
                /**
 
210
                 * Stores the active handle element during the resize.
 
211
                 *
 
212
                 * @attribute activeHandleNode
 
213
                 * @default null
 
214
                 * @private
 
215
                 * @type Node
 
216
                 */
 
217
                activeHandleNode: {
 
218
                        value: null,
 
219
                        validator: isNode
 
220
                },
 
221
 
 
222
                /**
 
223
         * False to ensure that the resize handles are always visible, true to
 
224
         * display them only when the user mouses over the resizable borders.
 
225
                 *
 
226
                 * @attribute autoHide
 
227
                 * @default false
 
228
                 * @type boolean
 
229
                 */
 
230
                autoHide: {
 
231
                        value: false,
 
232
                        validator: isBoolean
 
233
                },
 
234
 
 
235
                /**
 
236
         * The default minimum height of the element. Only used when
 
237
                 * ResizeConstrained is not plugged.
 
238
         *
 
239
         * @attribute defMinHeight
 
240
         * @default 15
 
241
         * @type Number
 
242
         */
 
243
                defMinHeight: {
 
244
                        value: 15,
 
245
                        validator: isNumber
 
246
                },
 
247
 
 
248
                /**
 
249
         * The default minimum width of the element. Only used when
 
250
                 * ResizeConstrained is not plugged.
 
251
         *
 
252
         * @attribute defMinWidth
 
253
         * @default 15
 
254
         * @type Number
 
255
         */
 
256
                defMinWidth: {
 
257
                        value: 15,
 
258
                        validator: isNumber
 
259
                },
 
260
 
 
261
        /**
 
262
         * The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl',
 
263
         * 'br', 'tl', 'tr'. Can use a shortcut of All.
 
264
         *
 
265
         * @attribute handles
 
266
         * @default all
 
267
         * @type Array | String
 
268
         */
 
269
                handles: {
 
270
                        setter: '_setHandles',
 
271
                        value: ALL
 
272
                },
 
273
 
 
274
        /**
 
275
         * Node to wrap the resize handles.
 
276
         *
 
277
         * @attribute handlesWrapper
 
278
         * @type Node
 
279
         */
 
280
                handlesWrapper: {
 
281
                        readOnly: true,
 
282
                        setter: Y.one,
 
283
                        valueFn: '_valueHandlesWrapper'
 
284
                },
 
285
 
 
286
                /**
 
287
         * The selector or element to resize. Required.
 
288
         *
 
289
         * @attribute node
 
290
         * @type Node
 
291
         */
 
292
                node: {
 
293
                        setter: Y.one
 
294
                },
 
295
 
 
296
                /**
 
297
         * True when the element is being Resized.
 
298
         *
 
299
         * @attribute resizing
 
300
         * @default false
 
301
         * @type boolean
 
302
         */
 
303
                resizing: {
 
304
                        value: false,
 
305
                        validator: isBoolean
 
306
                },
 
307
 
 
308
                /**
 
309
                 * True to wrap an element with a div if needed (required for textareas
 
310
         * and images, defaults to false) in favor of the handles config option.
 
311
         * The wrapper element type (default div) could be over-riden passing the
 
312
         * <code>wrapper</code> attribute.
 
313
                 *
 
314
                 * @attribute wrap
 
315
                 * @default false
 
316
                 * @type boolean
 
317
                 */
 
318
                wrap: {
 
319
                        setter: '_setWrap',
 
320
                        value: false,
 
321
                        validator: isBoolean
 
322
                },
 
323
 
 
324
                /**
 
325
                 * Elements that requires a wrapper by default. Normally are elements
 
326
         * which cannot have children elements.
 
327
                 *
 
328
                 * @attribute wrapTypes
 
329
                 * @default /canvas|textarea|input|select|button|img/i
 
330
                 * @readOnly
 
331
                 * @type Regex
 
332
                 */
 
333
                wrapTypes: {
 
334
                        readOnly: true,
 
335
                        value: /^canvas|textarea|input|select|button|img|iframe|table|embed$/i
 
336
                },
 
337
 
 
338
                /**
 
339
                 * Element to wrap the <code>wrapTypes</code>. This element will house
 
340
         * the handles elements.
 
341
                 *
 
342
                 * @attribute wrapper
 
343
                 * @default div
 
344
                 * @type String | Node
 
345
                 * @writeOnce
 
346
                 */
 
347
                wrapper: {
 
348
                        readOnly: true,
 
349
                        valueFn: '_valueWrapper',
 
350
                        writeOnce: true
 
351
                }
 
352
        },
 
353
 
 
354
        RULES: {
 
355
                b: function(instance, dx, dy) {
 
356
                        var info = instance.info,
 
357
                                originalInfo = instance.originalInfo;
 
358
 
 
359
                        info.offsetHeight = originalInfo.offsetHeight + dy;
 
360
                },
 
361
 
 
362
                l: function(instance, dx, dy) {
 
363
                        var info = instance.info,
 
364
                                originalInfo = instance.originalInfo;
 
365
 
 
366
                        info.left = originalInfo.left + dx;
 
367
                        info.offsetWidth = originalInfo.offsetWidth - dx;
 
368
                },
 
369
 
 
370
                r: function(instance, dx, dy) {
 
371
                        var info = instance.info,
 
372
                                originalInfo = instance.originalInfo;
 
373
 
 
374
                        info.offsetWidth = originalInfo.offsetWidth + dx;
 
375
                },
 
376
 
 
377
                t: function(instance, dx, dy) {
 
378
                        var info = instance.info,
 
379
                                originalInfo = instance.originalInfo;
 
380
 
 
381
                        info.top = originalInfo.top + dy;
 
382
                        info.offsetHeight = originalInfo.offsetHeight - dy;
 
383
                },
 
384
 
 
385
                tr: function(instance, dx, dy) {
 
386
                        this.t.apply(this, arguments);
 
387
                        this.r.apply(this, arguments);
 
388
                },
 
389
 
 
390
                bl: function(instance, dx, dy) {
 
391
                        this.b.apply(this, arguments);
 
392
                        this.l.apply(this, arguments);
 
393
                },
 
394
 
 
395
                br: function(instance, dx, dy) {
 
396
                        this.b.apply(this, arguments);
 
397
                        this.r.apply(this, arguments);
 
398
                },
 
399
 
 
400
                tl: function(instance, dx, dy) {
 
401
                        this.t.apply(this, arguments);
 
402
                        this.l.apply(this, arguments);
 
403
                }
 
404
        },
 
405
 
 
406
        capitalize: capitalize
 
407
});
 
408
 
 
409
Y.Resize = Y.extend(
 
410
        Resize,
 
411
        Y.Base,
 
412
        {
 
413
                /**
 
414
             * Array containing all possible resizable handles.
 
415
             *
 
416
             * @property ALL_HANDLES
 
417
             * @type {String}
 
418
             */
 
419
                ALL_HANDLES: [ T, TR, R, BR, B, BL, L, TL ],
 
420
 
 
421
                /**
 
422
             * Regex which matches with the handles that could change the height of
 
423
                 * the resizable element.
 
424
             *
 
425
             * @property REGEX_CHANGE_HEIGHT
 
426
             * @type {String}
 
427
             */
 
428
                REGEX_CHANGE_HEIGHT: /^(t|tr|b|bl|br|tl)$/i,
 
429
 
 
430
                /**
 
431
             * Regex which matches with the handles that could change the left of
 
432
                 * the resizable element.
 
433
             *
 
434
             * @property REGEX_CHANGE_LEFT
 
435
             * @type {String}
 
436
             */
 
437
                REGEX_CHANGE_LEFT: /^(tl|l|bl)$/i,
 
438
 
 
439
                /**
 
440
             * Regex which matches with the handles that could change the top of
 
441
                 * the resizable element.
 
442
             *
 
443
             * @property REGEX_CHANGE_TOP
 
444
             * @type {String}
 
445
             */
 
446
                REGEX_CHANGE_TOP: /^(tl|t|tr)$/i,
 
447
 
 
448
                /**
 
449
             * Regex which matches with the handles that could change the width of
 
450
                 * the resizable element.
 
451
             *
 
452
             * @property REGEX_CHANGE_WIDTH
 
453
             * @type {String}
 
454
             */
 
455
                REGEX_CHANGE_WIDTH: /^(bl|br|l|r|tl|tr)$/i,
 
456
 
 
457
                /**
 
458
             * Template used to create the resize wrapper for the handles.
 
459
             *
 
460
             * @property HANDLES_WRAP_TEMPLATE
 
461
             * @type {String}
 
462
             */
 
463
                HANDLES_WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_HANDLES_WRAPPER+'"></div>',
 
464
 
 
465
                /**
 
466
             * Template used to create the resize wrapper node when needed.
 
467
             *
 
468
             * @property WRAP_TEMPLATE
 
469
             * @type {String}
 
470
             */
 
471
                WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_WRAPPER+'"></div>',
 
472
 
 
473
                /**
 
474
             * Template used to create each resize handle.
 
475
             *
 
476
             * @property HANDLE_TEMPLATE
 
477
             * @type {String}
 
478
             */
 
479
                HANDLE_TEMPLATE: '<div class="'+concat(CSS_RESIZE_HANDLE, CSS_RESIZE_HANDLE_PLACEHOLDER)+'">' +
 
480
                                                        '<div class="'+concat(CSS_RESIZE_HANDLE_INNER, CSS_RESIZE_HANDLE_INNER_PLACEHOLDER)+'">&nbsp;</div>' +
 
481
                                                '</div>',
 
482
 
 
483
 
 
484
                /**
 
485
                 * Each box has a content area and optional surrounding padding and
 
486
                 * border areas. This property stores the sum of all horizontal
 
487
                 * surrounding * information needed to adjust the node height.
 
488
                 *
 
489
                 * @property totalHSurrounding
 
490
                 * @default 0
 
491
                 * @type number
 
492
                 */
 
493
                totalHSurrounding: 0,
 
494
 
 
495
                /**
 
496
                 * Each box has a content area and optional surrounding padding and
 
497
                 * border areas. This property stores the sum of all vertical
 
498
                 * surrounding * information needed to adjust the node height.
 
499
                 *
 
500
                 * @property totalVSurrounding
 
501
                 * @default 0
 
502
                 * @type number
 
503
                 */
 
504
                totalVSurrounding: 0,
 
505
 
 
506
                /**
 
507
                 * Stores the <a href="Resize.html#config_node">node</a>
 
508
                 * surrounding information retrieved from
 
509
                 * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.
 
510
                 *
 
511
                 * @property nodeSurrounding
 
512
                 * @type Object
 
513
                 * @default null
 
514
                 */
 
515
                nodeSurrounding: null,
 
516
 
 
517
                /**
 
518
                 * Stores the <a href="Resize.html#config_wrapper">wrapper</a>
 
519
                 * surrounding information retrieved from
 
520
                 * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.
 
521
                 *
 
522
                 * @property wrapperSurrounding
 
523
                 * @type Object
 
524
                 * @default null
 
525
                 */
 
526
                wrapperSurrounding: null,
 
527
 
 
528
                /**
 
529
                 * Whether the handle being dragged can change the height.
 
530
                 *
 
531
                 * @property changeHeightHandles
 
532
                 * @default false
 
533
                 * @type boolean
 
534
                 */
 
535
                changeHeightHandles: false,
 
536
 
 
537
                /**
 
538
                 * Whether the handle being dragged can change the left.
 
539
                 *
 
540
                 * @property changeLeftHandles
 
541
                 * @default false
 
542
                 * @type boolean
 
543
                 */
 
544
                changeLeftHandles: false,
 
545
 
 
546
                /**
 
547
                 * Whether the handle being dragged can change the top.
 
548
                 *
 
549
                 * @property changeTopHandles
 
550
                 * @default false
 
551
                 * @type boolean
 
552
                 */
 
553
                changeTopHandles: false,
 
554
 
 
555
                /**
 
556
                 * Whether the handle being dragged can change the width.
 
557
                 *
 
558
                 * @property changeWidthHandles
 
559
                 * @default false
 
560
                 * @type boolean
 
561
                 */
 
562
                changeWidthHandles: false,
 
563
 
 
564
                /**
 
565
                 * Store DD.Delegate reference for the respective Resize instance.
 
566
                 *
 
567
                 * @property delegate
 
568
                 * @default null
 
569
                 * @type Object
 
570
                 */
 
571
                delegate: null,
 
572
 
 
573
            /**
 
574
             * Stores the current values for the height, width, top and left. You are
 
575
             * able to manipulate these values on resize in order to change the resize
 
576
             * behavior.
 
577
             *
 
578
             * @property info
 
579
             * @type Object
 
580
             * @protected
 
581
             */
 
582
                info: null,
 
583
 
 
584
                /**
 
585
             * Stores the last values for the height, width, top and left.
 
586
             *
 
587
             * @property lastInfo
 
588
             * @type Object
 
589
             * @protected
 
590
             */
 
591
                lastInfo: null,
 
592
 
 
593
            /**
 
594
             * Stores the original values for the height, width, top and left, stored
 
595
             * on resize start.
 
596
             *
 
597
             * @property originalInfo
 
598
             * @type Object
 
599
             * @protected
 
600
             */
 
601
                originalInfo: null,
 
602
 
 
603
            /**
 
604
             * Construction logic executed during Resize instantiation. Lifecycle.
 
605
             *
 
606
             * @method initializer
 
607
             * @protected
 
608
             */
 
609
                initializer: function() {
 
610
                        this.renderer();
 
611
                },
 
612
 
 
613
            /**
 
614
             * Create the DOM structure for the Resize. Lifecycle.
 
615
             *
 
616
             * @method renderUI
 
617
             * @protected
 
618
             */
 
619
                renderUI: function() {
 
620
                        var instance = this;
 
621
 
 
622
                        instance._renderHandles();
 
623
                },
 
624
 
 
625
            /**
 
626
             * Bind the events on the Resize UI. Lifecycle.
 
627
             *
 
628
             * @method bindUI
 
629
             * @protected
 
630
             */
 
631
                bindUI: function() {
 
632
                        var instance = this;
 
633
 
 
634
                        instance._createEvents();
 
635
                        instance._bindDD();
 
636
                        instance._bindHandle();
 
637
                },
 
638
 
 
639
            /**
 
640
             * Sync the Resize UI.
 
641
             *
 
642
             * @method syncUI
 
643
             * @protected
 
644
             */
 
645
                syncUI: function() {
 
646
                        var instance = this;
 
647
 
 
648
                        this.get(NODE).addClass(CSS_RESIZE);
 
649
 
 
650
                        // hide handles if AUTO_HIDE is true
 
651
                        instance._setHideHandlesUI(
 
652
                                instance.get(AUTO_HIDE)
 
653
                        );
 
654
                },
 
655
 
 
656
            /**
 
657
             * Descructor lifecycle implementation for the Resize class. Purges events attached
 
658
             * to the node (and all child nodes) and removes the Resize handles.
 
659
             *
 
660
             * @method destructor
 
661
             * @protected
 
662
             */
 
663
                destructor: function() {
 
664
                        var instance = this,
 
665
                                node = instance.get(NODE),
 
666
                                wrapper = instance.get(WRAPPER),
 
667
                                pNode = wrapper.get(PARENT_NODE);
 
668
 
 
669
                        // purgeElements on boundingBox
 
670
                        Y.Event.purgeElement(wrapper, true);
 
671
 
 
672
                        // destroy handles dd and remove them from the dom
 
673
                        instance.eachHandle(function(handleEl) {
 
674
                                instance.delegate.dd.destroy();
 
675
 
 
676
                                // remove handle
 
677
                                handleEl.remove(true);
 
678
                        });
 
679
 
 
680
                        // unwrap node
 
681
                        if (instance.get(WRAP)) {
 
682
                                instance._copyStyles(wrapper, node);
 
683
 
 
684
                                if (pNode) {
 
685
                                        pNode.insertBefore(node, wrapper);
 
686
                                }
 
687
 
 
688
                                wrapper.remove(true);
 
689
                        }
 
690
 
 
691
                        node.removeClass(CSS_RESIZE);
 
692
                        node.removeClass(CSS_RESIZE_HIDDEN_HANDLES);
 
693
                },
 
694
 
 
695
            /**
 
696
             * Creates DOM (or manipulates DOM for progressive enhancement)
 
697
             * This method is invoked by initializer(). It's chained automatically for
 
698
             * subclasses if required.
 
699
             *
 
700
             * @method renderer
 
701
             * @protected
 
702
             */
 
703
            renderer: function() {
 
704
                this.renderUI();
 
705
                this.bindUI();
 
706
                this.syncUI();
 
707
            },
 
708
 
 
709
            /**
 
710
             * <p>Loop through each handle which is being used and executes a callback.</p>
 
711
             * <p>Example:</p>
 
712
             * <pre><code>instance.eachHandle(
 
713
                 *      function(handleName, index) { ... }
 
714
                 *  );</code></pre>
 
715
             *
 
716
             * @method eachHandle
 
717
             * @param {function} fn Callback function to be executed for each handle.
 
718
             */
 
719
                eachHandle: function(fn) {
 
720
                        var instance = this;
 
721
 
 
722
                        Y.each(
 
723
                                instance.get(HANDLES),
 
724
                                function(handle, i) {
 
725
                                        var handleEl = instance.get(
 
726
                                                handleAttrName(handle)
 
727
                                        );
 
728
 
 
729
                                        fn.apply(instance, [handleEl, handle, i]);
 
730
                                }
 
731
                        );
 
732
                },
 
733
 
 
734
            /**
 
735
             * Bind the handles DragDrop events to the Resize instance.
 
736
             *
 
737
             * @method _bindDD
 
738
             * @private
 
739
             */
 
740
                _bindDD: function() {
 
741
                        var instance = this;
 
742
 
 
743
                        instance.delegate = new Y.DD.Delegate(
 
744
                                {
 
745
                                        bubbleTargets: instance,
 
746
                                        container: instance.get(HANDLES_WRAPPER),
 
747
                                        dragConfig: {
 
748
                                                clickPixelThresh: 0,
 
749
                                                clickTimeThresh: 0,
 
750
                                                useShim: true,
 
751
                                                move: false
 
752
                                        },
 
753
                                        nodes: DOT+CSS_RESIZE_HANDLE,
 
754
                                        target: false
 
755
                                }
 
756
                        );
 
757
 
 
758
                        instance.on('drag:drag', instance._handleResizeEvent);
 
759
                        instance.on('drag:dropmiss', instance._handleMouseUpEvent);
 
760
                        instance.on('drag:end', instance._handleResizeEndEvent);
 
761
                        instance.on('drag:start', instance._handleResizeStartEvent);
 
762
                },
 
763
 
 
764
            /**
 
765
             * Bind the events related to the handles (_onHandleMouseEnter, _onHandleMouseLeave).
 
766
             *
 
767
             * @method _bindHandle
 
768
             * @private
 
769
             */
 
770
                _bindHandle: function() {
 
771
                        var instance = this,
 
772
                                wrapper = instance.get(WRAPPER);
 
773
 
 
774
                        wrapper.on('mouseenter', Y.bind(instance._onWrapperMouseEnter, instance));
 
775
                        wrapper.on('mouseleave', Y.bind(instance._onWrapperMouseLeave, instance));
 
776
                        wrapper.delegate('mouseenter', Y.bind(instance._onHandleMouseEnter, instance), DOT+CSS_RESIZE_HANDLE);
 
777
                        wrapper.delegate('mouseleave', Y.bind(instance._onHandleMouseLeave, instance), DOT+CSS_RESIZE_HANDLE);
 
778
                },
 
779
 
 
780
            /**
 
781
             * Create the custom events used on the Resize.
 
782
             *
 
783
             * @method _createEvents
 
784
             * @private
 
785
             */
 
786
                _createEvents: function() {
 
787
                        var instance = this,
 
788
                                // create publish function for kweight optimization
 
789
                                publish = function(name, fn) {
 
790
                                        instance.publish(name, {
 
791
                                                defaultFn: fn,
 
792
                                                queuable: false,
 
793
                                                emitFacade: true,
 
794
                                                bubbles: true,
 
795
                                                prefix: RESIZE
 
796
                                        });
 
797
                                };
 
798
 
 
799
                        /**
 
800
                         * Handles the resize start event. Fired when a handle starts to be
 
801
                 * dragged.
 
802
                         *
 
803
                 * @event resize:start
 
804
                 * @preventable _defResizeStartFn
 
805
                 * @param {Event.Facade} event The resize start event.
 
806
                 * @bubbles Resize
 
807
                 * @type {Event.Custom}
 
808
                 */
 
809
                        publish(EV_RESIZE_START, this._defResizeStartFn);
 
810
 
 
811
                        /**
 
812
                         * Handles the resize event. Fired on each pixel when the handle is
 
813
                 * being dragged.
 
814
                         *
 
815
                 * @event resize:resize
 
816
                 * @preventable _defResizeFn
 
817
                 * @param {Event.Facade} event The resize event.
 
818
                 * @bubbles Resize
 
819
                 * @type {Event.Custom}
 
820
                 */
 
821
                        publish(EV_RESIZE, this._defResizeFn);
 
822
 
 
823
                        /**
 
824
                         * Handles the resize align event.
 
825
                         *
 
826
                 * @event resize:align
 
827
                 * @preventable _defResizeAlignFn
 
828
                 * @param {Event.Facade} event The resize align event.
 
829
                 * @bubbles Resize
 
830
                 * @type {Event.Custom}
 
831
                 */
 
832
                        publish(EV_RESIZE_ALIGN, this._defResizeAlignFn);
 
833
 
 
834
                        /**
 
835
                         * Handles the resize end event. Fired when a handle stop to be
 
836
                 * dragged.
 
837
                         *
 
838
                 * @event resize:end
 
839
                 * @preventable _defResizeEndFn
 
840
                 * @param {Event.Facade} event The resize end event.
 
841
                 * @bubbles Resize
 
842
                 * @type {Event.Custom}
 
843
                 */
 
844
                        publish(EV_RESIZE_END, this._defResizeEndFn);
 
845
 
 
846
                        /**
 
847
                         * Handles the resize mouseUp event. Fired when a mouseUp event happens on a
 
848
                 * handle.
 
849
                         *
 
850
                 * @event resize:mouseUp
 
851
                 * @preventable _defMouseUpFn
 
852
                 * @param {Event.Facade} event The resize mouseUp event.
 
853
                 * @bubbles Resize
 
854
                 * @type {Event.Custom}
 
855
                 */
 
856
                        publish(EV_MOUSE_UP, this._defMouseUpFn);
 
857
                },
 
858
 
 
859
            /**
 
860
              * Responsible for loop each handle element and append to the wrapper.
 
861
              *
 
862
              * @method _renderHandles
 
863
              * @protected
 
864
              */
 
865
                _renderHandles: function() {
 
866
                        var instance = this,
 
867
                                wrapper = instance.get(WRAPPER),
 
868
                                handlesWrapper = instance.get(HANDLES_WRAPPER);
 
869
 
 
870
                        instance.eachHandle(function(handleEl) {
 
871
                                handlesWrapper.append(handleEl);
 
872
                        });
 
873
 
 
874
                        wrapper.append(handlesWrapper);
 
875
                },
 
876
 
 
877
            /**
 
878
             * Creates the handle element based on the handle name and initialize the
 
879
             * DragDrop on it.
 
880
             *
 
881
             * @method _buildHandle
 
882
             * @param {String} handle Handle name ('t', 'tr', 'b', ...).
 
883
             * @protected
 
884
             */
 
885
                _buildHandle: function(handle) {
 
886
                        var instance = this;
 
887
 
 
888
                        return Y.Node.create(
 
889
                                Y.substitute(instance.HANDLE_TEMPLATE, {
 
890
                                        handle: handle
 
891
                                })
 
892
                        );
 
893
                },
 
894
 
 
895
            /**
 
896
             * Basic resize calculations.
 
897
             *
 
898
             * @method _calcResize
 
899
             * @protected
 
900
             */
 
901
                _calcResize: function() {
 
902
                        var instance = this,
 
903
                                handle = instance.handle,
 
904
                                info = instance.info,
 
905
                                originalInfo = instance.originalInfo,
 
906
 
 
907
                                dx = info.actXY[0] - originalInfo.actXY[0],
 
908
                                dy = info.actXY[1] - originalInfo.actXY[1];
 
909
 
 
910
            if (handle && Y.Resize.RULES[handle]) {
 
911
                            Y.Resize.RULES[handle](instance, dx, dy);
 
912
            }
 
913
                        else {
 
914
                        }
 
915
                },
 
916
 
 
917
                /**
 
918
             * Helper method to update the current size value on
 
919
             * <a href="Resize.html#property_info">info</a> to respect the
 
920
             * min/max values and fix the top/left calculations.
 
921
                 *
 
922
                 * @method _checkSize
 
923
                 * @param {String} offset 'offsetHeight' or 'offsetWidth'
 
924
                 * @param {number} size Size to restrict the offset
 
925
                 * @protected
 
926
                 */
 
927
                _checkSize: function(offset, size) {
 
928
                        var instance = this,
 
929
                                info = instance.info,
 
930
                                originalInfo = instance.originalInfo,
 
931
                                axis = (offset == OFFSET_HEIGHT) ? TOP : LEFT;
 
932
 
 
933
                        // forcing the offsetHeight/offsetWidth to be the passed size
 
934
                        info[offset] = size;
 
935
 
 
936
                        // predicting, based on the original information, the last left valid in case of reach the min/max dimension
 
937
                        // this calculation avoid browser event leaks when user interact very fast
 
938
                        if (((axis == LEFT) && instance.changeLeftHandles) ||
 
939
                                ((axis == TOP) && instance.changeTopHandles)) {
 
940
 
 
941
                                info[axis] = originalInfo[axis] + originalInfo[offset] - size;
 
942
                        }
 
943
                },
 
944
 
 
945
            /**
 
946
             * Copy relevant styles of the <a href="Resize.html#config_node">node</a>
 
947
             * to the <a href="Resize.html#config_wrapper">wrapper</a>.
 
948
             *
 
949
             * @method _copyStyles
 
950
             * @param {Node} node Node from.
 
951
             * @param {Node} wrapper Node to.
 
952
             * @protected
 
953
             */
 
954
                _copyStyles: function(node, wrapper) {
 
955
                        var position = node.getStyle(POSITION).toLowerCase(),
 
956
                                surrounding = this._getBoxSurroundingInfo(node),
 
957
                                wrapperStyle;
 
958
 
 
959
                        // resizable wrapper should be positioned
 
960
                        if (position == STATIC) {
 
961
                                position = RELATIVE;
 
962
                        }
 
963
 
 
964
                        wrapperStyle = {
 
965
                                position: position,
 
966
                                left: getCompStyle(node, LEFT),
 
967
                                top: getCompStyle(node, TOP)
 
968
                        };
 
969
 
 
970
                        Y.mix(wrapperStyle, surrounding.margin);
 
971
                        Y.mix(wrapperStyle, surrounding.border);
 
972
 
 
973
                        wrapper.setStyles(wrapperStyle);
 
974
 
 
975
                        // remove margin and border from the internal node
 
976
                        node.setStyles({ border: 0, margin: 0 });
 
977
 
 
978
                        wrapper.sizeTo(
 
979
                                node.get(OFFSET_WIDTH) + surrounding.totalHBorder,
 
980
                                node.get(OFFSET_HEIGHT) + surrounding.totalVBorder
 
981
                        );
 
982
                },
 
983
 
 
984
                // extract handle name from a string
 
985
                // using Y.cached to memoize the function for performance
 
986
                _extractHandleName: Y.cached(
 
987
                        function(node) {
 
988
                                var className = node.get(CLASS_NAME),
 
989
 
 
990
                                        match = className.match(
 
991
                                                new RegExp(
 
992
                                                        getCN(RESIZE, HANDLE, '(\\w{1,2})\\b')
 
993
                                                )
 
994
                                        );
 
995
 
 
996
                                return match ? match[1] : null;
 
997
                        }
 
998
                ),
 
999
 
 
1000
            /**
 
1001
             * <p>Generates metadata to the <a href="Resize.html#property_info">info</a>
 
1002
             * and <a href="Resize.html#property_originalInfo">originalInfo</a></p>
 
1003
             * <pre><code>bottom, actXY, left, top, offsetHeight, offsetWidth, right</code></pre>
 
1004
             *
 
1005
             * @method _getInfo
 
1006
             * @param {Node} node
 
1007
             * @param {EventFacade} event
 
1008
             * @private
 
1009
             */
 
1010
                _getInfo: function(node, event) {
 
1011
                        var actXY = [0,0],
 
1012
                                drag = event.dragEvent.target,
 
1013
                                nodeXY = node.getXY(),
 
1014
                                nodeX = nodeXY[0],
 
1015
                                nodeY = nodeXY[1],
 
1016
                                offsetHeight = node.get(OFFSET_HEIGHT),
 
1017
                                offsetWidth = node.get(OFFSET_WIDTH);
 
1018
 
 
1019
                        if (event) {
 
1020
                                // the xy that the node will be set to. Changing this will alter the position as it's dragged.
 
1021
                                actXY = (drag.actXY.length ? drag.actXY : drag.lastXY);
 
1022
                        }
 
1023
 
 
1024
                        return {
 
1025
                                actXY: actXY,
 
1026
                                bottom: (nodeY + offsetHeight),
 
1027
                                left: nodeX,
 
1028
                                offsetHeight: offsetHeight,
 
1029
                                offsetWidth: offsetWidth,
 
1030
                                right: (nodeX + offsetWidth),
 
1031
                                top: nodeY
 
1032
                        };
 
1033
                },
 
1034
 
 
1035
                /**
 
1036
                 * Each box has a content area and optional surrounding margin,
 
1037
                 * padding and * border areas. This method get all this information from
 
1038
                 * the passed node. For more reference see
 
1039
                 * <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">
 
1040
                 * http://www.w3.org/TR/CSS21/box.html#box-dimensions</a>.
 
1041
                 *
 
1042
                 * @method _getBoxSurroundingInfo
 
1043
                 * @param {Node} node
 
1044
                 * @private
 
1045
                 * @return {Object}
 
1046
                 */
 
1047
                _getBoxSurroundingInfo: function(node) {
 
1048
                        var     info = {
 
1049
                                padding: {},
 
1050
                                margin: {},
 
1051
                                border: {}
 
1052
                        };
 
1053
 
 
1054
                        if (isNode(node)) {
 
1055
                                Y.each([ TOP, RIGHT, BOTTOM, LEFT ], function(dir) {
 
1056
                                        var paddingProperty = capitalize(PADDING, dir),
 
1057
                                                marginProperty = capitalize(MARGIN, dir),
 
1058
                                                borderWidthProperty = capitalize(BORDER, dir, WIDTH),
 
1059
                                                borderColorProperty = capitalize(BORDER, dir, COLOR),
 
1060
                                                borderStyleProperty = capitalize(BORDER, dir, STYLE);
 
1061
 
 
1062
                                        info.border[borderColorProperty] = getCompStyle(node, borderColorProperty);
 
1063
                                        info.border[borderStyleProperty] = getCompStyle(node, borderStyleProperty);
 
1064
                                        info.border[borderWidthProperty] = getCompStyle(node, borderWidthProperty);
 
1065
                                        info.margin[marginProperty] = getCompStyle(node, marginProperty);
 
1066
                                        info.padding[paddingProperty] = getCompStyle(node, paddingProperty);
 
1067
                                });
 
1068
                        }
 
1069
 
 
1070
                        info.totalHBorder = (toRoundNumber(info.border.borderLeftWidth) + toRoundNumber(info.border.borderRightWidth));
 
1071
                        info.totalHPadding = (toRoundNumber(info.padding.paddingLeft) + toRoundNumber(info.padding.paddingRight));
 
1072
                        info.totalVBorder = (toRoundNumber(info.border.borderBottomWidth) + toRoundNumber(info.border.borderTopWidth));
 
1073
                        info.totalVPadding = (toRoundNumber(info.padding.paddingBottom) + toRoundNumber(info.padding.paddingTop));
 
1074
 
 
1075
                        return info;
 
1076
                },
 
1077
 
 
1078
                /**
 
1079
             * Sync the Resize UI with internal values from
 
1080
             * <a href="Resize.html#property_info">info</a>.
 
1081
             *
 
1082
             * @method _syncUI
 
1083
             * @protected
 
1084
             */
 
1085
                _syncUI: function() {
 
1086
                        var instance = this,
 
1087
                                info = instance.info,
 
1088
                                wrapperSurrounding = instance.wrapperSurrounding,
 
1089
                                wrapper = instance.get(WRAPPER),
 
1090
                                node = instance.get(NODE);
 
1091
 
 
1092
                        wrapper.sizeTo(info.offsetWidth, info.offsetHeight);
 
1093
 
 
1094
                        if (instance.changeLeftHandles || instance.changeTopHandles) {
 
1095
                                wrapper.setXY([info.left, info.top]);
 
1096
                        }
 
1097
 
 
1098
                        // if a wrap node is being used
 
1099
                        if (!wrapper.compareTo(node)) {
 
1100
                                // the original internal node borders were copied to the wrapper on _copyStyles, to compensate that subtract the borders from the internal node
 
1101
                                node.sizeTo(
 
1102
                                        info.offsetWidth - wrapperSurrounding.totalHBorder,
 
1103
                                        info.offsetHeight - wrapperSurrounding.totalVBorder
 
1104
                                );
 
1105
                        }
 
1106
 
 
1107
                        // prevent webkit textarea resize
 
1108
                        if (Y.UA.webkit) {
 
1109
                                node.setStyle(RESIZE, NONE);
 
1110
                        }
 
1111
                },
 
1112
 
 
1113
                /**
 
1114
             * Update <code>instance.changeHeightHandles,
 
1115
                 * instance.changeLeftHandles, instance.changeTopHandles,
 
1116
                 * instance.changeWidthHandles</code> information.
 
1117
             *
 
1118
             * @method _updateChangeHandleInfo
 
1119
             * @private
 
1120
             */
 
1121
                _updateChangeHandleInfo: function(handle) {
 
1122
                        var instance = this;
 
1123
 
 
1124
                        instance.changeHeightHandles = instance.REGEX_CHANGE_HEIGHT.test(handle);
 
1125
                        instance.changeLeftHandles = instance.REGEX_CHANGE_LEFT.test(handle);
 
1126
                        instance.changeTopHandles = instance.REGEX_CHANGE_TOP.test(handle);
 
1127
                        instance.changeWidthHandles = instance.REGEX_CHANGE_WIDTH.test(handle);
 
1128
                },
 
1129
 
 
1130
                /**
 
1131
             * Update <a href="Resize.html#property_info">info</a> values (bottom, actXY, left, top, offsetHeight, offsetWidth, right).
 
1132
             *
 
1133
             * @method _updateInfo
 
1134
             * @private
 
1135
             */
 
1136
                _updateInfo: function(event) {
 
1137
                        var instance = this;
 
1138
 
 
1139
                        instance.info = instance._getInfo(instance.get(WRAPPER), event);
 
1140
                },
 
1141
 
 
1142
                /**
 
1143
             * Update properties
 
1144
             * <a href="Resize.html#property_nodeSurrounding">nodeSurrounding</a>,
 
1145
             * <a href="Resize.html#property_nodeSurrounding">wrapperSurrounding</a>,
 
1146
             * <a href="Resize.html#property_nodeSurrounding">totalVSurrounding</a>,
 
1147
             * <a href="Resize.html#property_nodeSurrounding">totalHSurrounding</a>.
 
1148
             *
 
1149
             * @method _updateSurroundingInfo
 
1150
             * @private
 
1151
             */
 
1152
                _updateSurroundingInfo: function() {
 
1153
                        var instance = this,
 
1154
                                node = instance.get(NODE),
 
1155
                                wrapper = instance.get(WRAPPER),
 
1156
                                nodeSurrounding = instance._getBoxSurroundingInfo(node),
 
1157
                                wrapperSurrounding = instance._getBoxSurroundingInfo(wrapper);
 
1158
 
 
1159
                        instance.nodeSurrounding = nodeSurrounding;
 
1160
                        instance.wrapperSurrounding = wrapperSurrounding;
 
1161
 
 
1162
                        instance.totalVSurrounding = (nodeSurrounding.totalVPadding + wrapperSurrounding.totalVBorder);
 
1163
                        instance.totalHSurrounding = (nodeSurrounding.totalHPadding + wrapperSurrounding.totalHBorder);
 
1164
                },
 
1165
 
 
1166
            /**
 
1167
             * Set the active state of the handles.
 
1168
             *
 
1169
             * @method _setActiveHandlesUI
 
1170
             * @param {boolean} val True to activate the handles, false to deactivate.
 
1171
             * @protected
 
1172
             */
 
1173
                _setActiveHandlesUI: function(val) {
 
1174
                        var instance = this,
 
1175
                                activeHandleNode = instance.get(ACTIVE_HANDLE_NODE);
 
1176
 
 
1177
                        if (activeHandleNode) {
 
1178
                                if (val) {
 
1179
                                        // remove CSS_RESIZE_HANDLE_ACTIVE from all handles before addClass on the active
 
1180
                                        instance.eachHandle(
 
1181
                                                function(handleEl) {
 
1182
                                                        handleEl.removeClass(CSS_RESIZE_HANDLE_ACTIVE);
 
1183
                                                }
 
1184
                                        );
 
1185
 
 
1186
                                        activeHandleNode.addClass(CSS_RESIZE_HANDLE_ACTIVE);
 
1187
                                }
 
1188
                                else {
 
1189
                                        activeHandleNode.removeClass(CSS_RESIZE_HANDLE_ACTIVE);
 
1190
                                }
 
1191
                        }
 
1192
                },
 
1193
 
 
1194
            /**
 
1195
             * Setter for the handles attribute
 
1196
             *
 
1197
             * @method _setHandles
 
1198
             * @protected
 
1199
             * @param {String} val
 
1200
             */
 
1201
                _setHandles: function(val) {
 
1202
                        var instance = this,
 
1203
                                handles = [];
 
1204
 
 
1205
                        // handles attr accepts both array or string
 
1206
                        if (isArray(val)) {
 
1207
                                handles = val;
 
1208
                        }
 
1209
                        else if (isString(val)) {
 
1210
                                // if the handles attr passed in is an ALL string...
 
1211
                                if (val.toLowerCase() == ALL) {
 
1212
                                        handles = instance.ALL_HANDLES;
 
1213
                                }
 
1214
                                // otherwise, split the string to extract the handles
 
1215
                                else {
 
1216
                                        Y.each(
 
1217
                                                val.split(COMMA),
 
1218
                                                function(node, i) {
 
1219
                                                        var handle = trim(node);
 
1220
 
 
1221
                                                        // if its a valid handle, add it to the handles output
 
1222
                                                        if (indexOf(instance.ALL_HANDLES, handle) > -1) {
 
1223
                                                                handles.push(handle);
 
1224
                                                        }
 
1225
                                                }
 
1226
                                        );
 
1227
                                }
 
1228
                        }
 
1229
 
 
1230
                        return handles;
 
1231
                },
 
1232
 
 
1233
            /**
 
1234
             * Set the visibility of the handles.
 
1235
             *
 
1236
             * @method _setHideHandlesUI
 
1237
             * @param {boolean} val True to hide the handles, false to show.
 
1238
             * @protected
 
1239
             */
 
1240
                _setHideHandlesUI: function(val) {
 
1241
                        var instance = this,
 
1242
                                wrapper = instance.get(WRAPPER);
 
1243
 
 
1244
                        if (!instance.get(RESIZING)) {
 
1245
                                if (val) {
 
1246
                                        wrapper.addClass(CSS_RESIZE_HIDDEN_HANDLES);
 
1247
                                }
 
1248
                                else {
 
1249
                                        wrapper.removeClass(CSS_RESIZE_HIDDEN_HANDLES);
 
1250
                                }
 
1251
                        }
 
1252
                },
 
1253
 
 
1254
            /**
 
1255
             * Setter for the wrap attribute
 
1256
             *
 
1257
             * @method _setWrap
 
1258
             * @protected
 
1259
             * @param {boolean} val
 
1260
             */
 
1261
                _setWrap: function(val) {
 
1262
                        var instance = this,
 
1263
                                node = instance.get(NODE),
 
1264
                                nodeName = node.get(NODE_NAME),
 
1265
                                typeRegex = instance.get(WRAP_TYPES);
 
1266
 
 
1267
                        // if nodeName is listed on WRAP_TYPES force use the wrapper
 
1268
                        if (typeRegex.test(nodeName)) {
 
1269
                                val = true;
 
1270
                        }
 
1271
 
 
1272
                        return val;
 
1273
                },
 
1274
 
 
1275
            /**
 
1276
             * Default resize:mouseUp handler
 
1277
             *
 
1278
             * @method _defMouseUpFn
 
1279
             * @param {EventFacade} event The Event object
 
1280
             * @protected
 
1281
             */
 
1282
                _defMouseUpFn: function(event) {
 
1283
                        var instance = this;
 
1284
 
 
1285
                        instance.set(RESIZING, false);
 
1286
                },
 
1287
 
 
1288
            /**
 
1289
             * Default resize:resize handler
 
1290
             *
 
1291
             * @method _defResizeFn
 
1292
             * @param {EventFacade} event The Event object
 
1293
             * @protected
 
1294
             */
 
1295
                _defResizeFn: function(event) {
 
1296
                        var instance = this;
 
1297
 
 
1298
                        instance._resize(event);
 
1299
                },
 
1300
 
 
1301
                /**
 
1302
             * Logic method for _defResizeFn. Allow AOP.
 
1303
             *
 
1304
             * @method _resize
 
1305
             * @param {EventFacade} event The Event object
 
1306
             * @protected
 
1307
             */
 
1308
                _resize: function(event) {
 
1309
                        var instance = this;
 
1310
 
 
1311
                        instance._handleResizeAlignEvent(event.dragEvent);
 
1312
 
 
1313
                        // _syncUI of the wrapper, not using proxy
 
1314
                        instance._syncUI();
 
1315
                },
 
1316
 
 
1317
                /**
 
1318
             * Default resize:align handler
 
1319
             *
 
1320
             * @method _defResizeAlignFn
 
1321
             * @param {EventFacade} event The Event object
 
1322
             * @protected
 
1323
             */
 
1324
                _defResizeAlignFn: function(event) {
 
1325
                        var instance = this;
 
1326
 
 
1327
                        instance._resizeAlign(event);
 
1328
                },
 
1329
 
 
1330
                /**
 
1331
             * Logic method for _defResizeAlignFn. Allow AOP.
 
1332
             *
 
1333
             * @method _resizeAlign
 
1334
             * @param {EventFacade} event The Event object
 
1335
             * @protected
 
1336
             */
 
1337
                _resizeAlign: function(event) {
 
1338
                        var instance = this,
 
1339
                                info,
 
1340
                                defMinHeight,
 
1341
                                defMinWidth;
 
1342
 
 
1343
                        instance.lastInfo = instance.info;
 
1344
 
 
1345
                        // update the instance.info values
 
1346
                        instance._updateInfo(event);
 
1347
 
 
1348
                        info = instance.info;
 
1349
 
 
1350
                        // basic resize calculations
 
1351
                        instance._calcResize();
 
1352
 
 
1353
                        // if Y.Plugin.ResizeConstrained is not plugged, check for min dimension
 
1354
                        if (!instance.con) {
 
1355
                                defMinHeight = (instance.get(DEF_MIN_HEIGHT) + instance.totalVSurrounding);
 
1356
                                defMinWidth = (instance.get(DEF_MIN_WIDTH) + instance.totalHSurrounding);
 
1357
 
 
1358
                                if (info.offsetHeight <= defMinHeight) {
 
1359
                                        instance._checkSize(OFFSET_HEIGHT, defMinHeight);
 
1360
                                }
 
1361
 
 
1362
                                if (info.offsetWidth <= defMinWidth) {
 
1363
                                        instance._checkSize(OFFSET_WIDTH, defMinWidth);
 
1364
                                }
 
1365
                        }
 
1366
                },
 
1367
 
 
1368
            /**
 
1369
             * Default resize:end handler
 
1370
             *
 
1371
             * @method _defResizeEndFn
 
1372
             * @param {EventFacade} event The Event object
 
1373
             * @protected
 
1374
             */
 
1375
                _defResizeEndFn: function(event) {
 
1376
                        var instance = this;
 
1377
 
 
1378
                        instance._resizeEnd(event);
 
1379
                },
 
1380
 
 
1381
                /**
 
1382
             * Logic method for _defResizeEndFn. Allow AOP.
 
1383
             *
 
1384
             * @method _resizeEnd
 
1385
             * @param {EventFacade} event The Event object
 
1386
             * @protected
 
1387
             */
 
1388
                _resizeEnd: function(event) {
 
1389
                        var instance = this,
 
1390
                                drag = event.dragEvent.target;
 
1391
 
 
1392
                        // reseting actXY from drag when drag end
 
1393
                        drag.actXY = [];
 
1394
 
 
1395
                        // syncUI when resize end
 
1396
                        instance._syncUI();
 
1397
 
 
1398
                        instance._setActiveHandlesUI(false);
 
1399
 
 
1400
                        instance.set(ACTIVE_HANDLE, null);
 
1401
                        instance.set(ACTIVE_HANDLE_NODE, null);
 
1402
 
 
1403
                        instance.handle = null;
 
1404
                },
 
1405
 
 
1406
            /**
 
1407
             * Default resize:start handler
 
1408
             *
 
1409
             * @method _defResizeStartFn
 
1410
             * @param {EventFacade} event The Event object
 
1411
             * @protected
 
1412
             */
 
1413
                _defResizeStartFn: function(event) {
 
1414
                        var instance = this;
 
1415
 
 
1416
                        instance._resizeStart(event);
 
1417
                },
 
1418
 
 
1419
                /**
 
1420
             * Logic method for _defResizeStartFn. Allow AOP.
 
1421
             *
 
1422
             * @method _resizeStart
 
1423
             * @param {EventFacade} event The Event object
 
1424
             * @protected
 
1425
             */
 
1426
                _resizeStart: function(event) {
 
1427
                        var instance = this,
 
1428
                                wrapper = instance.get(WRAPPER);
 
1429
 
 
1430
                        instance.handle = instance.get(ACTIVE_HANDLE);
 
1431
 
 
1432
                        instance.set(RESIZING, true);
 
1433
 
 
1434
                        instance._updateSurroundingInfo();
 
1435
 
 
1436
                        // create an originalInfo information for reference
 
1437
                        instance.originalInfo = instance._getInfo(wrapper, event);
 
1438
 
 
1439
                        instance._updateInfo(event);
 
1440
                },
 
1441
 
 
1442
            /**
 
1443
             * Fires the resize:mouseUp event.
 
1444
             *
 
1445
             * @method _handleMouseUpEvent
 
1446
             * @param {EventFacade} event resize:mouseUp event facade
 
1447
             * @protected
 
1448
             */
 
1449
                _handleMouseUpEvent: function(event) {
 
1450
                        this.fire(EV_MOUSE_UP, { dragEvent: event, info: this.info });
 
1451
                },
 
1452
 
 
1453
            /**
 
1454
             * Fires the resize:resize event.
 
1455
             *
 
1456
             * @method _handleResizeEvent
 
1457
             * @param {EventFacade} event resize:resize event facade
 
1458
             * @protected
 
1459
             */
 
1460
                _handleResizeEvent: function(event) {
 
1461
                        this.fire(EV_RESIZE, { dragEvent: event, info: this.info });
 
1462
                },
 
1463
 
 
1464
            /**
 
1465
             * Fires the resize:align event.
 
1466
             *
 
1467
             * @method _handleResizeAlignEvent
 
1468
             * @param {EventFacade} event resize:resize event facade
 
1469
             * @protected
 
1470
             */
 
1471
                _handleResizeAlignEvent: function(event) {
 
1472
                        this.fire(EV_RESIZE_ALIGN, { dragEvent: event, info: this.info });
 
1473
                },
 
1474
 
 
1475
            /**
 
1476
             * Fires the resize:end event.
 
1477
             *
 
1478
             * @method _handleResizeEndEvent
 
1479
             * @param {EventFacade} event resize:end event facade
 
1480
             * @protected
 
1481
             */
 
1482
                _handleResizeEndEvent: function(event) {
 
1483
                        this.fire(EV_RESIZE_END, { dragEvent: event, info: this.info });
 
1484
                },
 
1485
 
 
1486
            /**
 
1487
             * Fires the resize:start event.
 
1488
             *
 
1489
             * @method _handleResizeStartEvent
 
1490
             * @param {EventFacade} event resize:start event facade
 
1491
             * @protected
 
1492
             */
 
1493
                _handleResizeStartEvent: function(event) {
 
1494
            if (!this.get(ACTIVE_HANDLE)) {
 
1495
                //This handles the "touch" case
 
1496
                            this._setHandleFromNode(event.target.get('node'));
 
1497
            }
 
1498
                        this.fire(EV_RESIZE_START, { dragEvent: event, info: this.info });
 
1499
                },
 
1500
 
 
1501
                /**
 
1502
                 * Mouseenter event handler for the <a href="Resize.html#config_wrapper">wrapper</a>.
 
1503
                 *
 
1504
                 * @method _onWrapperMouseEnter
 
1505
             * @param {EventFacade} event
 
1506
                 * @protected
 
1507
                 */
 
1508
                _onWrapperMouseEnter: function(event) {
 
1509
                        var instance = this;
 
1510
 
 
1511
                        if (instance.get(AUTO_HIDE)) {
 
1512
                                instance._setHideHandlesUI(false);
 
1513
                        }
 
1514
                },
 
1515
 
 
1516
                /**
 
1517
                 * Mouseleave event handler for the <a href="Resize.html#config_wrapper">wrapper</a>.
 
1518
                 *
 
1519
                 * @method _onWrapperMouseLeave
 
1520
             * @param {EventFacade} event
 
1521
                 * @protected
 
1522
                 */
 
1523
                _onWrapperMouseLeave: function(event) {
 
1524
                        var instance = this;
 
1525
 
 
1526
                        if (instance.get(AUTO_HIDE)) {
 
1527
                                instance._setHideHandlesUI(true);
 
1528
                        }
 
1529
                },
 
1530
 
 
1531
                /**
 
1532
                 * Handles setting the activeHandle from a node, used from startDrag (for touch) and mouseenter (for mouse).
 
1533
                 *
 
1534
                 * @method _setHandleFromNode
 
1535
             * @param {Node} node
 
1536
                 * @protected
 
1537
                 */
 
1538
        _setHandleFromNode: function(node) {
 
1539
                        var instance = this,
 
1540
                                handle = instance._extractHandleName(node);
 
1541
 
 
1542
                        if (!instance.get(RESIZING)) {
 
1543
                                instance.set(ACTIVE_HANDLE, handle);
 
1544
                                instance.set(ACTIVE_HANDLE_NODE, node);
 
1545
 
 
1546
                                instance._setActiveHandlesUI(true);
 
1547
                                instance._updateChangeHandleInfo(handle);
 
1548
                        }
 
1549
        },
 
1550
 
 
1551
                /**
 
1552
                 * Mouseenter event handler for the handles.
 
1553
                 *
 
1554
                 * @method _onHandleMouseEnter
 
1555
             * @param {EventFacade} event
 
1556
                 * @protected
 
1557
                 */
 
1558
                _onHandleMouseEnter: function(event) {
 
1559
                        this._setHandleFromNode(event.currentTarget);
 
1560
                },
 
1561
 
 
1562
                /**
 
1563
                 * Mouseout event handler for the handles.
 
1564
                 *
 
1565
                 * @method _onHandleMouseLeave
 
1566
             * @param {EventFacade} event
 
1567
                 * @protected
 
1568
                 */
 
1569
                _onHandleMouseLeave: function(event) {
 
1570
                        var instance = this;
 
1571
 
 
1572
                        if (!instance.get(RESIZING)) {
 
1573
                                instance._setActiveHandlesUI(false);
 
1574
                        }
 
1575
                },
 
1576
 
 
1577
                /**
 
1578
             * Default value for the wrapper handles node attribute
 
1579
             *
 
1580
             * @method _valueHandlesWrapper
 
1581
             * @protected
 
1582
             * @readOnly
 
1583
             */
 
1584
                _valueHandlesWrapper: function() {
 
1585
                        return Y.Node.create(this.HANDLES_WRAP_TEMPLATE);
 
1586
                },
 
1587
 
 
1588
                /**
 
1589
             * Default value for the wrapper attribute
 
1590
             *
 
1591
             * @method _valueWrapper
 
1592
             * @protected
 
1593
             * @readOnly
 
1594
             */
 
1595
                _valueWrapper: function() {
 
1596
                        var instance = this,
 
1597
                                node = instance.get(NODE),
 
1598
                                pNode = node.get(PARENT_NODE),
 
1599
                                // by deafult the wrapper is always the node
 
1600
                                wrapper = node;
 
1601
 
 
1602
                        // if the node is listed on the wrapTypes or wrap is set to true, create another wrapper
 
1603
                        if (instance.get(WRAP)) {
 
1604
                                wrapper = Y.Node.create(instance.WRAP_TEMPLATE);
 
1605
 
 
1606
                                if (pNode) {
 
1607
                                        pNode.insertBefore(wrapper, node);
 
1608
                                }
 
1609
 
 
1610
                                wrapper.append(node);
 
1611
 
 
1612
                                instance._copyStyles(node, wrapper);
 
1613
 
 
1614
                                // remove positioning of wrapped node, the WRAPPER take care about positioning
 
1615
                                node.setStyles({
 
1616
                                        position: STATIC,
 
1617
                                        left: 0,
 
1618
                                        top: 0
 
1619
                                });
 
1620
                        }
 
1621
 
 
1622
                        return wrapper;
 
1623
                }
 
1624
        }
 
1625
);
 
1626
 
 
1627
Y.each(Y.Resize.prototype.ALL_HANDLES, function(handle, i) {
 
1628
        // creating ATTRS with the handles elements
 
1629
        Y.Resize.ATTRS[handleAttrName(handle)] = {
 
1630
                setter: function() {
 
1631
                        return this._buildHandle(handle);
 
1632
                },
 
1633
                value: null,
 
1634
                writeOnce: true
 
1635
        };
 
1636
});
 
1637
 
 
1638
 
 
1639
}, '3.5.1' ,{requires:['base', 'widget', 'substitute', 'event', 'oop', 'dd-drag', 'dd-delegate', 'dd-drop'], skinnable:true});