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