← Back to branch summary

~michael.nelson/ubuntu-webcatalog/1267731-import-sca-apps-error

« back to all changes in this revision

Viewing changes to src/webcatalog/static/yui/3.10.3/build/resize-base/resize-base.js

  • Committer: Tarmac
  • Author(s): Stephen Stewart
  • Date: 2013-06-26 09:19:32 UTC
  • mfrom: (184.1.4 ubuntu-global-nav)
  • Revision ID: tarmac-20130626091932-8urtuli368k8p7ds
[r=beuno,jonas-drange] add ubuntu global nav to apps.ubuntu.com

Show diffs side-by-side

added added

removed removed

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