-
Notifications
You must be signed in to change notification settings - Fork 375
/
resize.js
159 lines (143 loc) · 4.67 KB
/
resize.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
steal('jquery/event').then(function( $ ) {
/**
* @add jQuery.event.special
*/
var resizers = $(),
resizeCount = 0,
// bind on the window window resizes to happen
win = $(window),
windowWidth = 0,
windowHeight = 0,
timer;
$(function() {
windowWidth = win.width();
windowHeight = win.height();
})
/**
* @attribute resize
* @parent specialevents
*
* The resize event is useful for updating elements dimensions when a parent element
* has been resized. It allows you to only resize elements that need to be resized
* in the 'right order'.
*
* By listening to a resize event, you will be alerted whenever a parent
* element has a <code>resize</code> event triggered on it. For example:
*
* $('#foo').bind('resize', function(){
* // adjust #foo's dimensions
* })
*
* $(document.body).trigger("resize");
*
* ## The 'Right Order'
*
* When a control changes size, typically, you want only internal controls to have to adjust their
* dimensions. Furthermore, you want to adjust controls from the 'outside-in', meaning
* that the outermost control adjusts its dimensions before child controls adjust theirs.
*
* Resize calls resize events in exactly this manner.
*
* When you trigger a resize event, it will propagate up the DOM until it reaches
* an element with the first resize event
* handler. There it will move the event in the opposite direction, calling the element's
* children's resize event handlers.
*
* If your intent is to call resize without bubbling and only trigger child element's handlers,
* use the following:
*
* $("#foo").trigger("resize", false);
*
* ## Stopping Children Updates
*
* If your element doesn't need to change it's dimensions as a result of the parent element, it should
* call ev.stopPropagation(). This will only stop resize from being sent to child elements of the current element.
*
*
*/
$.event.special.resize = {
setup: function( handleObj ) {
// add and sort the resizers array
// don't add window because it can't be compared easily
if ( this !== window ) {
resizers.push(this);
$.unique(resizers);
}
// returns false if the window
return this !== window;
},
teardown: function() {
// we shouldn't have to sort
resizers = resizers.not(this);
// returns false if the window
return this !== window;
},
add: function( handleObj ) {
// increment the number of resizer elements
//$.data(this, "jquery.dom.resizers", ++$.data(this, "jquery.dom.resizers") );
var origHandler = handleObj.handler;
handleObj.origHandler = origHandler;
handleObj.handler = function( ev, data ) {
var isWindow = this === window;
// if we are the window and a real resize has happened
// then we check if the dimensions actually changed
// if they did, we will wait a brief timeout and
// trigger resize on the window
// this is for IE, to prevent window resize 'infinate' loop issues
if ( isWindow && ev.originalEvent ) {
var width = win.width(),
height = win.height();
if ((width != windowWidth || height != windowHeight)) {
//update the new dimensions
windowWidth = width;
windowHeight = height;
clearTimeout(timer)
timer = setTimeout(function() {
win.trigger("resize");
}, 1);
}
return;
}
// if this is the first handler for this event ...
if ( resizeCount === 0 ) {
// prevent others from doing what we are about to do
resizeCount++;
var where = data === false ? ev.target : this
//trigger all this element's handlers
$.event.handle.call(where, ev);
if ( ev.isPropagationStopped() ) {
resizeCount--;
return;
}
// get all other elements within this element that listen to resize
// and trigger their resize events
var index = resizers.index(this),
length = resizers.length,
child, sub;
// if index == -1 it's the window
while (++index < length && (child = resizers[index]) && (isWindow || $.contains(where, child)) ) {
// call the event
$.event.handle.call(child, ev);
if ( ev.isPropagationStopped() ) {
// move index until the item is not in the current child
while (++index < length && (sub = resizers[index]) ) {
if (!$.contains(child, sub) ) {
// set index back one
index--;
break
}
}
}
}
// prevent others from responding
ev.stopImmediatePropagation();
resizeCount--;
} else {
handleObj.origHandler.call(this, ev, data);
}
}
}
};
// automatically bind on these
$([document, window]).bind('resize', function() {})
})