jquery_match_height_rails 0.5.2 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/jquery_match_height.js +254 -125
- data/lib/jquery_match_height_rails/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9649a3aa41e5d38f78a3a9f03fbeccc7ffc1fed1
|
|
4
|
+
data.tar.gz: d8eb10d480d4f2c5dd62676a191a352f73b07fc6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b74e8ba00ec419b200fb408723a25994c7e3c443ab9287ff01d7bb028470948e1bb02c429225f4804b6767d4d26d36c3cae70acabab37c12dafaf0f26af9b97b
|
|
7
|
+
data.tar.gz: c8d96bed76dcbb05770762a8a9943297b81e7b51a9ceecc6e16a1ecf71da35b78a599ef134b591098bd6f7ba44cad5fa3da89ef0bb59ae7d1e5688ed42fe6362
|
|
@@ -1,22 +1,109 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* jquery.matchHeight.js
|
|
3
|
-
* http://brm.io/jquery-match-height/
|
|
4
|
-
* License: MIT
|
|
5
|
-
*/
|
|
2
|
+
* jquery.matchHeight.js master
|
|
3
|
+
* http://brm.io/jquery-match-height/
|
|
4
|
+
* License: MIT
|
|
5
|
+
*/
|
|
6
6
|
|
|
7
|
+
;
|
|
7
8
|
(function($) {
|
|
9
|
+
/*
|
|
10
|
+
* internal
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
var _previousResizeWidth = -1,
|
|
14
|
+
_updateTimeout = -1;
|
|
15
|
+
|
|
16
|
+
/*
|
|
17
|
+
* _parse
|
|
18
|
+
* value parse utility function
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
var _parse = function(value) {
|
|
22
|
+
// parse value and convert NaN to 0
|
|
23
|
+
return parseFloat(value) || 0;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
* _rows
|
|
28
|
+
* utility function returns array of jQuery selections representing each row
|
|
29
|
+
* (as displayed after float wrapping applied by browser)
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
var _rows = function(elements) {
|
|
33
|
+
var tolerance = 1,
|
|
34
|
+
$elements = $(elements),
|
|
35
|
+
lastTop = null,
|
|
36
|
+
rows = [];
|
|
8
37
|
|
|
9
|
-
|
|
38
|
+
// group elements by their top position
|
|
39
|
+
$elements.each(function() {
|
|
40
|
+
var $that = $(this),
|
|
41
|
+
top = $that.offset().top - _parse($that.css('margin-top')),
|
|
42
|
+
lastRow = rows.length > 0 ? rows[rows.length - 1] : null;
|
|
43
|
+
|
|
44
|
+
if (lastRow === null) {
|
|
45
|
+
// first item on the row, so just push it
|
|
46
|
+
rows.push($that);
|
|
47
|
+
} else {
|
|
48
|
+
// if the row top is the same, add to the row group
|
|
49
|
+
if (Math.floor(Math.abs(lastTop - top)) <= tolerance) {
|
|
50
|
+
rows[rows.length - 1] = lastRow.add($that);
|
|
51
|
+
} else {
|
|
52
|
+
// otherwise start a new row group
|
|
53
|
+
rows.push($that);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
10
56
|
|
|
11
|
-
|
|
12
|
-
|
|
57
|
+
// keep track of the last row top
|
|
58
|
+
lastTop = top;
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
return rows;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/*
|
|
65
|
+
* _parseOptions
|
|
66
|
+
* handle plugin options
|
|
67
|
+
*/
|
|
68
|
+
|
|
69
|
+
var _parseOptions = function(options) {
|
|
70
|
+
var opts = {
|
|
71
|
+
byRow: true,
|
|
72
|
+
property: 'height',
|
|
73
|
+
target: null,
|
|
74
|
+
remove: false
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
if (typeof options === 'object') {
|
|
78
|
+
return $.extend(opts, options);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (typeof options === 'boolean') {
|
|
82
|
+
opts.byRow = options;
|
|
83
|
+
} else if (options === 'remove') {
|
|
84
|
+
opts.remove = true;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return opts;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
/*
|
|
91
|
+
* matchHeight
|
|
92
|
+
* plugin definition
|
|
93
|
+
*/
|
|
94
|
+
|
|
95
|
+
var matchHeight = $.fn.matchHeight = function(options) {
|
|
96
|
+
var opts = _parseOptions(options);
|
|
97
|
+
|
|
98
|
+
// handle remove
|
|
99
|
+
if (opts.remove) {
|
|
13
100
|
var that = this;
|
|
14
101
|
|
|
15
102
|
// remove fixed height from all selected elements
|
|
16
|
-
this.css(
|
|
103
|
+
this.css(opts.property, '');
|
|
17
104
|
|
|
18
105
|
// remove selected elements from all groups
|
|
19
|
-
$.each(
|
|
106
|
+
$.each(matchHeight._groups, function(key, group) {
|
|
20
107
|
group.elements = group.elements.not(that);
|
|
21
108
|
});
|
|
22
109
|
|
|
@@ -25,79 +112,137 @@
|
|
|
25
112
|
return this;
|
|
26
113
|
}
|
|
27
114
|
|
|
28
|
-
if (this.length <= 1)
|
|
115
|
+
if (this.length <= 1 && !opts.target) {
|
|
29
116
|
return this;
|
|
30
|
-
|
|
31
|
-
// byRow default to true
|
|
32
|
-
byRow = (typeof byRow !== 'undefined') ? byRow : true;
|
|
117
|
+
}
|
|
33
118
|
|
|
34
119
|
// keep track of this group so we can re-apply later on load and resize events
|
|
35
|
-
|
|
120
|
+
matchHeight._groups.push({
|
|
36
121
|
elements: this,
|
|
37
|
-
|
|
122
|
+
options: opts
|
|
38
123
|
});
|
|
39
124
|
|
|
40
125
|
// match each element's height to the tallest element in the selection
|
|
41
|
-
|
|
126
|
+
matchHeight._apply(this, opts);
|
|
42
127
|
|
|
43
128
|
return this;
|
|
44
129
|
};
|
|
45
130
|
|
|
46
|
-
|
|
47
|
-
|
|
131
|
+
/*
|
|
132
|
+
* plugin global options
|
|
133
|
+
*/
|
|
134
|
+
|
|
135
|
+
matchHeight._groups = [];
|
|
136
|
+
matchHeight._throttle = 80;
|
|
137
|
+
matchHeight._maintainScroll = false;
|
|
138
|
+
matchHeight._beforeUpdate = null;
|
|
139
|
+
matchHeight._afterUpdate = null;
|
|
140
|
+
|
|
141
|
+
/*
|
|
142
|
+
* matchHeight._apply
|
|
143
|
+
* apply matchHeight to given elements
|
|
144
|
+
*/
|
|
145
|
+
|
|
146
|
+
matchHeight._apply = function(elements, options) {
|
|
147
|
+
var opts = _parseOptions(options),
|
|
148
|
+
$elements = $(elements),
|
|
48
149
|
rows = [$elements];
|
|
49
150
|
|
|
151
|
+
// take note of scroll position
|
|
152
|
+
var scrollTop = $(window).scrollTop(),
|
|
153
|
+
htmlHeight = $('html').outerHeight(true);
|
|
154
|
+
|
|
155
|
+
// get hidden parents
|
|
156
|
+
var $hiddenParents = $elements.parents().filter(':hidden');
|
|
157
|
+
|
|
158
|
+
// cache the original inline style
|
|
159
|
+
$hiddenParents.each(function() {
|
|
160
|
+
var $that = $(this);
|
|
161
|
+
$that.data('style-cache', $that.attr('style'));
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
// temporarily must force hidden parents visible
|
|
165
|
+
$hiddenParents.css('display', 'block');
|
|
166
|
+
|
|
50
167
|
// get rows if using byRow, otherwise assume one row
|
|
51
|
-
if (byRow) {
|
|
168
|
+
if (opts.byRow && !opts.target) {
|
|
52
169
|
|
|
53
170
|
// must first force an arbitrary equal height so floating elements break evenly
|
|
54
|
-
$elements.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
'
|
|
60
|
-
|
|
171
|
+
$elements.each(function() {
|
|
172
|
+
var $that = $(this),
|
|
173
|
+
display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
|
|
174
|
+
|
|
175
|
+
// cache the original inline style
|
|
176
|
+
$that.data('style-cache', $that.attr('style'));
|
|
177
|
+
|
|
178
|
+
$that.css({
|
|
179
|
+
'display': display,
|
|
180
|
+
'padding-top': '0',
|
|
181
|
+
'padding-bottom': '0',
|
|
182
|
+
'margin-top': '0',
|
|
183
|
+
'margin-bottom': '0',
|
|
184
|
+
'border-top-width': '0',
|
|
185
|
+
'border-bottom-width': '0',
|
|
186
|
+
'height': '100px'
|
|
187
|
+
});
|
|
61
188
|
});
|
|
62
189
|
|
|
63
190
|
// get the array of rows (based on element top position)
|
|
64
191
|
rows = _rows($elements);
|
|
65
192
|
|
|
66
|
-
// revert
|
|
67
|
-
$elements.
|
|
68
|
-
|
|
69
|
-
'
|
|
70
|
-
'padding-bottom': '',
|
|
71
|
-
'border-top': '',
|
|
72
|
-
'border-bottom': '',
|
|
73
|
-
'height': ''
|
|
193
|
+
// revert original inline styles
|
|
194
|
+
$elements.each(function() {
|
|
195
|
+
var $that = $(this);
|
|
196
|
+
$that.attr('style', $that.data('style-cache') || '');
|
|
74
197
|
});
|
|
75
198
|
}
|
|
76
199
|
|
|
77
200
|
$.each(rows, function(key, row) {
|
|
78
201
|
var $row = $(row),
|
|
79
|
-
|
|
202
|
+
targetHeight = 0;
|
|
80
203
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// find the max height (including padding, but not margin)
|
|
89
|
-
if ($that.outerHeight(false) > maxHeight)
|
|
90
|
-
maxHeight = $that.outerHeight(false);
|
|
204
|
+
if (!opts.target) {
|
|
205
|
+
// skip apply to rows with only one item
|
|
206
|
+
if (opts.byRow && $row.length <= 1) {
|
|
207
|
+
$row.css(opts.property, '');
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
91
210
|
|
|
92
|
-
//
|
|
93
|
-
$
|
|
94
|
-
|
|
211
|
+
// iterate the row and find the max height
|
|
212
|
+
$row.each(function() {
|
|
213
|
+
var $that = $(this),
|
|
214
|
+
display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
|
|
215
|
+
|
|
216
|
+
// ensure we get the correct actual height (and not a previously set height value)
|
|
217
|
+
var css = {
|
|
218
|
+
'display': display
|
|
219
|
+
};
|
|
220
|
+
css[opts.property] = '';
|
|
221
|
+
$that.css(css);
|
|
222
|
+
|
|
223
|
+
// find the max height (including padding, but not margin)
|
|
224
|
+
if ($that.outerHeight(false) > targetHeight) {
|
|
225
|
+
targetHeight = $that.outerHeight(false);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// revert display block
|
|
229
|
+
$that.css('display', '');
|
|
230
|
+
});
|
|
231
|
+
} else {
|
|
232
|
+
// if target set, use the height of the target element
|
|
233
|
+
targetHeight = opts.target.outerHeight(false);
|
|
234
|
+
}
|
|
95
235
|
|
|
96
236
|
// iterate the row and apply the height to all elements
|
|
97
|
-
$row.each(function(){
|
|
237
|
+
$row.each(function() {
|
|
98
238
|
var $that = $(this),
|
|
99
239
|
verticalPadding = 0;
|
|
100
240
|
|
|
241
|
+
// don't apply to a target
|
|
242
|
+
if (opts.target && $that.is(opts.target)) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
|
|
101
246
|
// handle padding and border correctly (required when not using border-box)
|
|
102
247
|
if ($that.css('box-sizing') !== 'border-box') {
|
|
103
248
|
verticalPadding += _parse($that.css('border-top-width')) + _parse($that.css('border-bottom-width'));
|
|
@@ -105,24 +250,37 @@
|
|
|
105
250
|
}
|
|
106
251
|
|
|
107
252
|
// set the height (accounting for padding and border)
|
|
108
|
-
$that.css(
|
|
253
|
+
$that.css(opts.property, targetHeight - verticalPadding);
|
|
109
254
|
});
|
|
110
255
|
});
|
|
111
256
|
|
|
257
|
+
// revert hidden parents
|
|
258
|
+
$hiddenParents.each(function() {
|
|
259
|
+
var $that = $(this);
|
|
260
|
+
$that.attr('style', $that.data('style-cache') || null);
|
|
261
|
+
});
|
|
262
|
+
|
|
263
|
+
// restore scroll position if enabled
|
|
264
|
+
if (matchHeight._maintainScroll) {
|
|
265
|
+
$(window).scrollTop((scrollTop / htmlHeight) * $('html').outerHeight(true));
|
|
266
|
+
}
|
|
267
|
+
|
|
112
268
|
return this;
|
|
113
269
|
};
|
|
114
270
|
|
|
115
271
|
/*
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
272
|
+
* matchHeight._applyDataApi
|
|
273
|
+
* applies matchHeight to all elements with a data-match-height attribute
|
|
274
|
+
*/
|
|
275
|
+
|
|
276
|
+
matchHeight._applyDataApi = function() {
|
|
120
277
|
var groups = {};
|
|
121
278
|
|
|
122
279
|
// generate groups by their groupId set by elements using data-match-height
|
|
123
280
|
$('[data-match-height], [data-mh]').each(function() {
|
|
124
281
|
var $this = $(this),
|
|
125
|
-
groupId = $this.attr('data-match-height');
|
|
282
|
+
groupId = $this.attr('data-mh') || $this.attr('data-match-height');
|
|
283
|
+
|
|
126
284
|
if (groupId in groups) {
|
|
127
285
|
groups[groupId] = groups[groupId].add($this);
|
|
128
286
|
} else {
|
|
@@ -136,92 +294,63 @@
|
|
|
136
294
|
});
|
|
137
295
|
};
|
|
138
296
|
|
|
139
|
-
/*
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
297
|
+
/*
|
|
298
|
+
* matchHeight._update
|
|
299
|
+
* updates matchHeight on all current groups with their correct options
|
|
300
|
+
*/
|
|
301
|
+
|
|
302
|
+
var _update = function(event) {
|
|
303
|
+
if (matchHeight._beforeUpdate) {
|
|
304
|
+
matchHeight._beforeUpdate(event, matchHeight._groups);
|
|
305
|
+
}
|
|
145
306
|
|
|
146
|
-
|
|
147
|
-
|
|
307
|
+
$.each(matchHeight._groups, function() {
|
|
308
|
+
matchHeight._apply(this.elements, this.options);
|
|
309
|
+
});
|
|
148
310
|
|
|
149
|
-
|
|
150
|
-
|
|
311
|
+
if (matchHeight._afterUpdate) {
|
|
312
|
+
matchHeight._afterUpdate(event, matchHeight._groups);
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
matchHeight._update = function(throttle, event) {
|
|
317
|
+
// prevent update if fired from a resize event
|
|
151
318
|
// where the viewport width hasn't actually changed
|
|
152
319
|
// fixes an event looping bug in IE8
|
|
153
320
|
if (event && event.type === 'resize') {
|
|
154
321
|
var windowWidth = $(window).width();
|
|
155
|
-
if (windowWidth ===
|
|
322
|
+
if (windowWidth === _previousResizeWidth) {
|
|
156
323
|
return;
|
|
157
|
-
|
|
324
|
+
}
|
|
325
|
+
_previousResizeWidth = windowWidth;
|
|
158
326
|
}
|
|
159
327
|
|
|
160
328
|
// throttle updates
|
|
161
|
-
if (
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
updateTimeout = -1;
|
|
169
|
-
|
|
170
|
-
}, $.fn.matchHeight._throttle);
|
|
329
|
+
if (!throttle) {
|
|
330
|
+
_update(event);
|
|
331
|
+
} else if (_updateTimeout === -1) {
|
|
332
|
+
_updateTimeout = setTimeout(function() {
|
|
333
|
+
_update(event);
|
|
334
|
+
_updateTimeout = -1;
|
|
335
|
+
}, matchHeight._throttle);
|
|
171
336
|
}
|
|
172
337
|
};
|
|
173
338
|
|
|
174
|
-
/*
|
|
175
|
-
|
|
176
|
-
|
|
339
|
+
/*
|
|
340
|
+
* bind events
|
|
341
|
+
*/
|
|
177
342
|
|
|
178
343
|
// apply on DOM ready event
|
|
179
|
-
$(
|
|
344
|
+
$(matchHeight._applyDataApi);
|
|
180
345
|
|
|
181
346
|
// update heights on load and resize events
|
|
182
|
-
$(window).bind('load
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
var _rows = function(elements) {
|
|
191
|
-
var tolerance = 1,
|
|
192
|
-
$elements = $(elements),
|
|
193
|
-
lastTop = null,
|
|
194
|
-
rows = [];
|
|
195
|
-
|
|
196
|
-
// group elements by their top position
|
|
197
|
-
$elements.each(function(){
|
|
198
|
-
var $that = $(this),
|
|
199
|
-
top = $that.offset().top - _parse($that.css('margin-top')),
|
|
200
|
-
lastRow = rows.length > 0 ? rows[rows.length - 1] : null;
|
|
201
|
-
|
|
202
|
-
if (lastRow === null) {
|
|
203
|
-
// first item on the row, so just push it
|
|
204
|
-
rows.push($that);
|
|
205
|
-
} else {
|
|
206
|
-
// if the row top is the same, add to the row group
|
|
207
|
-
if (Math.floor(Math.abs(lastTop - top)) <= tolerance) {
|
|
208
|
-
rows[rows.length - 1] = lastRow.add($that);
|
|
209
|
-
} else {
|
|
210
|
-
// otherwise start a new row group
|
|
211
|
-
rows.push($that);
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
// keep track of the last row top
|
|
216
|
-
lastTop = top;
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
return rows;
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
var _parse = function(value) {
|
|
223
|
-
// parse value and convert NaN to 0
|
|
224
|
-
return parseFloat(value) || 0;
|
|
225
|
-
};
|
|
347
|
+
$(window).bind('load', function(event) {
|
|
348
|
+
matchHeight._update(false, event);
|
|
349
|
+
});
|
|
350
|
+
|
|
351
|
+
// throttled update heights on resize events
|
|
352
|
+
$(window).bind('resize orientationchange', function(event) {
|
|
353
|
+
matchHeight._update(true, event);
|
|
354
|
+
});
|
|
226
355
|
|
|
227
356
|
})(jQuery);
|