foundation-rails 5.5.1.2 → 5.5.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/vendor/assets/javascripts/foundation.js +1 -1
  4. data/vendor/assets/javascripts/foundation/foundation.abide.js +96 -28
  5. data/vendor/assets/javascripts/foundation/foundation.accordion.js +28 -7
  6. data/vendor/assets/javascripts/foundation/foundation.alert.js +3 -3
  7. data/vendor/assets/javascripts/foundation/foundation.clearing.js +50 -20
  8. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +26 -11
  9. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +43 -16
  10. data/vendor/assets/javascripts/foundation/foundation.interchange.js +19 -14
  11. data/vendor/assets/javascripts/foundation/foundation.joyride.js +1 -1
  12. data/vendor/assets/javascripts/foundation/foundation.js +51 -29
  13. data/vendor/assets/javascripts/foundation/foundation.magellan.js +40 -28
  14. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +3 -3
  15. data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
  16. data/vendor/assets/javascripts/foundation/foundation.reveal.js +70 -43
  17. data/vendor/assets/javascripts/foundation/foundation.slider.js +23 -5
  18. data/vendor/assets/javascripts/foundation/foundation.tab.js +30 -18
  19. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +47 -15
  20. data/vendor/assets/javascripts/foundation/foundation.topbar.js +31 -25
  21. data/vendor/assets/stylesheets/foundation.scss +37 -38
  22. data/vendor/assets/stylesheets/foundation/_functions.scss +52 -42
  23. data/vendor/assets/stylesheets/foundation/_settings.scss +53 -34
  24. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +7 -7
  25. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +11 -11
  26. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +13 -13
  27. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +17 -18
  28. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +29 -22
  29. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +13 -17
  30. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +51 -47
  31. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +10 -11
  32. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +42 -36
  33. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +7 -7
  34. data/vendor/assets/stylesheets/foundation/components/_forms.scss +82 -50
  35. data/vendor/assets/stylesheets/foundation/components/_global.scss +86 -64
  36. data/vendor/assets/stylesheets/foundation/components/_grid.scss +24 -21
  37. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +335 -234
  38. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +8 -8
  39. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +40 -42
  40. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +2 -3
  41. data/vendor/assets/stylesheets/foundation/components/_labels.scss +6 -6
  42. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +2 -2
  43. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +178 -175
  44. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +82 -62
  45. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +15 -15
  46. data/vendor/assets/stylesheets/foundation/components/_panels.scss +21 -15
  47. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +16 -16
  48. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +4 -4
  49. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +23 -16
  50. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +27 -27
  51. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +15 -11
  52. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +16 -16
  53. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +14 -11
  54. data/vendor/assets/stylesheets/foundation/components/_switches.scss +22 -19
  55. data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -8
  56. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +49 -32
  57. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +8 -8
  58. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +25 -25
  59. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +163 -122
  60. data/vendor/assets/stylesheets/foundation/components/_type.scss +19 -19
  61. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +23 -5
  62. data/vendor/assets/stylesheets/normalize.scss +8 -11
  63. metadata +28 -20
  64. checksums.yaml +0 -7
  65. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +0 -72
data/bower.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "foundation-rails",
3
- "version": "5.5.1.1",
3
+ "version": "5.5.2.0",
4
4
  "dependencies": {
5
- "foundation": "5.5.1"
5
+ "foundation": "5.5.2"
6
6
  }
7
7
  }
@@ -1,5 +1,5 @@
1
1
  module Foundation
2
2
  module Rails
3
- VERSION = "5.5.1.2"
3
+ VERSION = "5.5.2.0"
4
4
  end
5
5
  end
@@ -1,4 +1,3 @@
1
- //= require foundation/foundation
2
1
  //= require foundation/foundation.abide
3
2
  //= require foundation/foundation.accordion
4
3
  //= require foundation/foundation.alert
@@ -7,6 +6,7 @@
7
6
  //= require foundation/foundation.equalizer
8
7
  //= require foundation/foundation.interchange
9
8
  //= require foundation/foundation.joyride
9
+ //= require foundation/foundation
10
10
  //= require foundation/foundation.magellan
11
11
  //= require foundation/foundation.offcanvas
12
12
  //= require foundation/foundation.orbit
@@ -4,11 +4,12 @@
4
4
  Foundation.libs.abide = {
5
5
  name : 'abide',
6
6
 
7
- version : '5.5.1',
7
+ version : '5.5.2',
8
8
 
9
9
  settings : {
10
10
  live_validate : true,
11
11
  validate_on_blur : true,
12
+ // validate_on: 'tab', // tab (when user tabs between fields), change (input changes), manual (call custom events)
12
13
  focus_on_invalid : true,
13
14
  error_labels : true, // labels with a for="inputId" will recieve an `error` class
14
15
  error_class : 'error',
@@ -26,7 +27,8 @@
26
27
  // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
27
28
  email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
28
29
 
29
- url : /^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
30
+ // http://blogs.lse.ac.uk/lti/2008/04/23/a-regular-expression-to-match-any-url/
31
+ url: /^(https?|ftp|file|ssh):\/\/([-;:&=\+\$,\w]+@{1})?([-A-Za-z0-9\.]+)+:?(\d+)?((\/[-\+~%\/\.\w]+)?\??([-\+=&;%@\.\w]+)?#?([\w]+)?)?/,
30
32
  // abc.de
31
33
  domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
32
34
 
@@ -68,36 +70,71 @@
68
70
 
69
71
  this.invalid_attr = this.add_namespace('data-invalid');
70
72
 
73
+ function validate(originalSelf, e) {
74
+ clearTimeout(self.timer);
75
+ self.timer = setTimeout(function () {
76
+ self.validate([originalSelf], e);
77
+ }.bind(originalSelf), settings.timeout);
78
+ }
79
+
80
+
71
81
  form
72
82
  .off('.abide')
73
- .on('submit.fndtn.abide validate.fndtn.abide', function (e) {
83
+ .on('submit.fndtn.abide', function (e) {
74
84
  var is_ajax = /ajax/i.test(self.S(this).attr(self.attr_name()));
75
- return self.validate(self.S(this).find('input, textarea, select').get(), e, is_ajax);
85
+ return self.validate(self.S(this).find('input, textarea, select').not(":hidden, [data-abide-ignore]").get(), e, is_ajax);
76
86
  })
77
- .on('reset', function () {
78
- return self.reset($(this));
87
+ .on('validate.fndtn.abide', function (e) {
88
+ if (settings.validate_on === 'manual') {
89
+ self.validate([e.target], e);
90
+ }
91
+ })
92
+ .on('reset', function (e) {
93
+ return self.reset($(this), e);
79
94
  })
80
- .find('input, textarea, select')
95
+ .find('input, textarea, select').not(":hidden, [data-abide-ignore]")
81
96
  .off('.abide')
82
97
  .on('blur.fndtn.abide change.fndtn.abide', function (e) {
83
- if (settings.validate_on_blur === true) {
84
- self.validate([this], e);
98
+ // old settings fallback
99
+ // will be deprecated with F6 release
100
+ if (settings.validate_on_blur && settings.validate_on_blur === true) {
101
+ validate(this, e);
102
+ }
103
+ // new settings combining validate options into one setting
104
+ if (settings.validate_on === 'change') {
105
+ validate(this, e);
85
106
  }
86
107
  })
87
108
  .on('keydown.fndtn.abide', function (e) {
88
- if (settings.live_validate === true && e.which != 9) {
89
- clearTimeout(self.timer);
90
- self.timer = setTimeout(function () {
91
- self.validate([this], e);
92
- }.bind(this), settings.timeout);
109
+ // old settings fallback
110
+ // will be deprecated with F6 release
111
+ if (settings.live_validate && settings.live_validate === true && e.which != 9) {
112
+ validate(this, e);
93
113
  }
114
+ // new settings combining validate options into one setting
115
+ if (settings.validate_on === 'tab' && e.which === 9) {
116
+ validate(this, e);
117
+ }
118
+ else if (settings.validate_on === 'change') {
119
+ validate(this, e);
120
+ }
121
+ })
122
+ .on('focus', function (e) {
123
+ if (navigator.userAgent.match(/iPad|iPhone|Android|BlackBerry|Windows Phone|webOS/i)) {
124
+ $('html, body').animate({
125
+ scrollTop: $(e.target).offset().top
126
+ }, 100);
127
+ }
94
128
  });
95
129
  },
96
130
 
97
- reset : function (form) {
98
- form.removeAttr(this.invalid_attr);
99
- $(this.invalid_attr, form).removeAttr(this.invalid_attr);
100
- $('.' + this.settings.error_class, form).not('small').removeClass(this.settings.error_class);
131
+ reset : function (form, e) {
132
+ var self = this;
133
+ form.removeAttr(self.invalid_attr);
134
+
135
+ $('[' + self.invalid_attr + ']', form).removeAttr(self.invalid_attr);
136
+ $('.' + self.settings.error_class, form).not('small').removeClass(self.settings.error_class);
137
+ $(':input', form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr(self.invalid_attr);
101
138
  },
102
139
 
103
140
  validate : function (els, e, is_ajax) {
@@ -112,14 +149,14 @@
112
149
  if (this.settings.focus_on_invalid) {
113
150
  els[i].focus();
114
151
  }
115
- form.trigger('invalid').trigger('invalid.fndtn.abide');
152
+ form.trigger('invalid.fndtn.abide');
116
153
  this.S(els[i]).closest('form').attr(this.invalid_attr, '');
117
154
  return false;
118
155
  }
119
156
  }
120
157
 
121
158
  if (submit_event || is_ajax) {
122
- form.trigger('valid').trigger('valid.fndtn.abide');
159
+ form.trigger('valid.fndtn.abide');
123
160
  }
124
161
 
125
162
  form.removeAttr(this.invalid_attr);
@@ -192,15 +229,36 @@
192
229
  parent = direct_parent.parent();
193
230
  }
194
231
 
195
- if (validator) {
196
- valid = this.settings.validators[validator].apply(this, [el, required, parent]);
197
- el_validations.push(valid);
198
- }
199
-
200
232
  if (is_radio && required) {
201
233
  el_validations.push(this.valid_radio(el, required));
202
234
  } else if (is_checkbox && required) {
203
235
  el_validations.push(this.valid_checkbox(el, required));
236
+
237
+ } else if (validator) {
238
+ // Validate using each of the specified (space-delimited) validators.
239
+ var validators = validator.split(' ');
240
+ var last_valid = true, all_valid = true;
241
+ for (var iv = 0; iv < validators.length; iv++) {
242
+ valid = this.settings.validators[validators[iv]].apply(this, [el, required, parent])
243
+ el_validations.push(valid);
244
+ all_valid = valid && last_valid;
245
+ last_valid = valid;
246
+ }
247
+ if (all_valid) {
248
+ this.S(el).removeAttr(this.invalid_attr);
249
+ parent.removeClass('error');
250
+ if (label.length > 0 && this.settings.error_labels) {
251
+ label.removeClass(this.settings.error_class).removeAttr('role');
252
+ }
253
+ $(el).triggerHandler('valid');
254
+ } else {
255
+ this.S(el).attr(this.invalid_attr, '');
256
+ parent.addClass('error');
257
+ if (label.length > 0 && this.settings.error_labels) {
258
+ label.addClass(this.settings.error_class).attr('role', 'alert');
259
+ }
260
+ $(el).triggerHandler('invalid');
261
+ }
204
262
  } else {
205
263
 
206
264
  if (el_patterns[i][1].test(value) && valid_length ||
@@ -211,7 +269,6 @@
211
269
  }
212
270
 
213
271
  el_validations = [el_validations.every(function (valid) {return valid;})];
214
-
215
272
  if (el_validations[0]) {
216
273
  this.S(el).removeAttr(this.invalid_attr);
217
274
  el.setAttribute('aria-invalid', 'false');
@@ -240,9 +297,8 @@
240
297
  $(el).triggerHandler('invalid');
241
298
  }
242
299
  }
243
- validations.push(el_validations[0]);
300
+ validations = validations.concat(el_validations);
244
301
  }
245
- validations = [validations.every(function (valid) {return valid;})];
246
302
  return validations;
247
303
  },
248
304
 
@@ -252,8 +308,10 @@
252
308
 
253
309
  if (valid) {
254
310
  el.removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
311
+ $(el).triggerHandler('valid');
255
312
  } else {
256
313
  el.attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
314
+ $(el).triggerHandler('invalid');
257
315
  }
258
316
 
259
317
  return valid;
@@ -286,8 +344,10 @@
286
344
  for (var i = 0; i < count; i++) {
287
345
  if (valid) {
288
346
  this.S(group[i]).removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
347
+ $(group[i]).triggerHandler('valid');
289
348
  } else {
290
349
  this.S(group[i]).attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
350
+ $(group[i]).triggerHandler('invalid');
291
351
  }
292
352
  }
293
353
 
@@ -335,6 +395,14 @@
335
395
  }
336
396
 
337
397
  return valid;
398
+ },
399
+
400
+ reflow : function(scope, options) {
401
+ var self = this,
402
+ form = self.S('[' + this.attr_name() + ']').attr('novalidate', 'novalidate');
403
+ self.S(form).each(function (idx, el) {
404
+ self.events(el);
405
+ });
338
406
  }
339
407
  };
340
408
  }(jQuery, window, window.document));
@@ -4,7 +4,7 @@
4
4
  Foundation.libs.accordion = {
5
5
  name : 'accordion',
6
6
 
7
- version : '5.5.1',
7
+ version : '5.5.2',
8
8
 
9
9
  settings : {
10
10
  content_class : 'content',
@@ -18,30 +18,35 @@
18
18
  this.bindings(method, options);
19
19
  },
20
20
 
21
- events : function () {
21
+ events : function (instance) {
22
22
  var self = this;
23
23
  var S = this.S;
24
+ self.create(this.S(instance));
25
+
24
26
  S(this.scope)
25
27
  .off('.fndtn.accordion')
26
- .on('click.fndtn.accordion', '[' + this.attr_name() + '] > .accordion-navigation > a', function (e) {
28
+ .on('click.fndtn.accordion', '[' + this.attr_name() + '] > dd > a, [' + this.attr_name() + '] > li > a', function (e) {
27
29
  var accordion = S(this).closest('[' + self.attr_name() + ']'),
28
30
  groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
29
31
  settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
30
32
  target = S('#' + this.href.split('#')[1]),
31
- aunts = $('> .accordion-navigation', accordion),
33
+ aunts = $('> dd, > li', accordion),
32
34
  siblings = aunts.children('.' + settings.content_class),
33
35
  active_content = siblings.filter('.' + settings.active_class);
34
36
 
35
37
  e.preventDefault();
36
38
 
37
39
  if (accordion.attr(self.attr_name())) {
38
- siblings = siblings.add('[' + groupSelector + '] dd > ' + '.' + settings.content_class);
39
- aunts = aunts.add('[' + groupSelector + '] .accordion-navigation');
40
+ siblings = siblings.add('[' + groupSelector + '] dd > ' + '.' + settings.content_class + ', [' + groupSelector + '] li > ' + '.' + settings.content_class);
41
+ aunts = aunts.add('[' + groupSelector + '] dd, [' + groupSelector + '] li');
40
42
  }
41
43
 
42
44
  if (settings.toggleable && target.is(active_content)) {
43
- target.parent('.accordion-navigation').toggleClass(settings.active_class, false);
45
+ target.parent('dd, li').toggleClass(settings.active_class, false);
44
46
  target.toggleClass(settings.active_class, false);
47
+ S(this).attr('aria-expanded', function(i, attr){
48
+ return attr === 'true' ? 'false' : 'true';
49
+ });
45
50
  settings.callback(target);
46
51
  target.triggerHandler('toggled', [accordion]);
47
52
  accordion.triggerHandler('toggled', [target]);
@@ -51,15 +56,31 @@
51
56
  if (!settings.multi_expand) {
52
57
  siblings.removeClass(settings.active_class);
53
58
  aunts.removeClass(settings.active_class);
59
+ aunts.children('a').attr('aria-expanded','false');
54
60
  }
55
61
 
56
62
  target.addClass(settings.active_class).parent().addClass(settings.active_class);
57
63
  settings.callback(target);
58
64
  target.triggerHandler('toggled', [accordion]);
59
65
  accordion.triggerHandler('toggled', [target]);
66
+ S(this).attr('aria-expanded','true');
60
67
  });
61
68
  },
62
69
 
70
+ create: function($instance) {
71
+ var self = this,
72
+ accordion = $instance,
73
+ aunts = $('> .accordion-navigation', accordion),
74
+ settings = accordion.data(self.attr_name(true) + '-init') || self.settings;
75
+
76
+ aunts.children('a').attr('aria-expanded','false');
77
+ aunts.has('.' + settings.content_class + '.' + settings.active_class).children('a').attr('aria-expanded','true');
78
+
79
+ if (settings.multi_expand) {
80
+ $instance.attr('aria-multiselectable','true');
81
+ }
82
+ },
83
+
63
84
  off : function () {},
64
85
 
65
86
  reflow : function () {}
@@ -4,7 +4,7 @@
4
4
  Foundation.libs.alert = {
5
5
  name : 'alert',
6
6
 
7
- version : '5.5.1',
7
+ version : '5.5.2',
8
8
 
9
9
  settings : {
10
10
  callback : function () {}
@@ -26,12 +26,12 @@
26
26
  if (Modernizr.csstransitions) {
27
27
  alertBox.addClass('alert-close');
28
28
  alertBox.on('transitionend webkitTransitionEnd oTransitionEnd', function (e) {
29
- S(this).trigger('close').trigger('close.fndtn.alert').remove();
29
+ S(this).trigger('close.fndtn.alert').remove();
30
30
  settings.callback();
31
31
  });
32
32
  } else {
33
33
  alertBox.fadeOut(300, function () {
34
- S(this).trigger('close').trigger('close.fndtn.alert').remove();
34
+ S(this).trigger('close.fndtn.alert').remove();
35
35
  settings.callback();
36
36
  });
37
37
  }
@@ -4,14 +4,16 @@
4
4
  Foundation.libs.clearing = {
5
5
  name : 'clearing',
6
6
 
7
- version : '5.5.1',
7
+ version : '5.5.2',
8
8
 
9
9
  settings : {
10
10
  templates : {
11
11
  viewing : '<a href="#" class="clearing-close">&times;</a>' +
12
12
  '<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
13
13
  '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
14
- '<a href="#" class="clearing-main-next"><span></span></a></div>'
14
+ '<a href="#" class="clearing-main-next"><span></span></a></div>' +
15
+ '<img class="clearing-preload-next" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
16
+ '<img class="clearing-preload-prev" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />'
15
17
  },
16
18
 
17
19
  // comma delimited list of selectors that, on click, will close clearing,
@@ -201,7 +203,8 @@
201
203
  visible_image = self.S('.visible-img', container),
202
204
  image = self.S('img', visible_image).not($image),
203
205
  label = self.S('.clearing-touch-label', container),
204
- error = false;
206
+ error = false,
207
+ loaded = {};
205
208
 
206
209
  // Event to disable scrolling on touch devices when Clearing is activated
207
210
  $('body').on('touchmove', function (e) {
@@ -227,6 +230,7 @@
227
230
  function cb (image) {
228
231
  var $image = $(image);
229
232
  $image.css('visibility', 'visible');
233
+ $image.trigger('imageVisible');
230
234
  // toggle the gallery
231
235
  body.css('overflow', 'hidden');
232
236
  root.addClass('clearing-blackout');
@@ -245,9 +249,17 @@
245
249
  if (!this.locked()) {
246
250
  visible_image.trigger('open.fndtn.clearing');
247
251
  // set the image to the selected thumbnail
248
- image
249
- .attr('src', this.load($image))
250
- .css('visibility', 'hidden');
252
+ loaded = this.load($image);
253
+ if (loaded.interchange) {
254
+ image
255
+ .attr('data-interchange', loaded.interchange)
256
+ .foundation('interchange', 'reflow');
257
+ } else {
258
+ image
259
+ .attr('src', loaded.src)
260
+ .attr('data-interchange', '');
261
+ }
262
+ image.css('visibility', 'hidden');
251
263
 
252
264
  startLoad.call(this);
253
265
  }
@@ -302,7 +314,7 @@
302
314
  this.go(clearing, 'prev');
303
315
  }
304
316
  if (e.which === ESC_KEY) {
305
- this.S('a.clearing-close').trigger('click').trigger('click.fndtn.clearing');
317
+ this.S('a.clearing-close').trigger('click.fndtn.clearing');
306
318
  }
307
319
  },
308
320
 
@@ -381,37 +393,55 @@
381
393
  // image loading and preloading
382
394
 
383
395
  load : function ($image) {
384
- var href;
396
+ var href,
397
+ interchange,
398
+ closest_a;
385
399
 
386
400
  if ($image[0].nodeName === 'A') {
387
401
  href = $image.attr('href');
402
+ interchange = $image.data('clearing-interchange');
388
403
  } else {
389
- href = $image.closest('a').attr('href');
404
+ closest_a = $image.closest('a');
405
+ href = closest_a.attr('href');
406
+ interchange = closest_a.data('clearing-interchange');
390
407
  }
391
408
 
392
409
  this.preload($image);
393
410
 
394
- if (href) {
395
- return href;
411
+ return {
412
+ 'src': href ? href : $image.attr('src'),
413
+ 'interchange': href ? interchange : $image.data('clearing-interchange')
396
414
  }
397
- return $image.attr('src');
398
415
  },
399
416
 
400
417
  preload : function ($image) {
401
418
  this
402
- .img($image.closest('li').next())
403
- .img($image.closest('li').prev());
419
+ .img($image.closest('li').next(), 'next')
420
+ .img($image.closest('li').prev(), 'prev');
404
421
  },
405
422
 
406
- img : function (img) {
423
+ img : function (img, sibling_type) {
407
424
  if (img.length) {
408
- var new_img = new Image(),
409
- new_a = this.S('a', img);
425
+ var preload_img = $('.clearing-preload-' + sibling_type),
426
+ new_a = this.S('a', img),
427
+ src,
428
+ interchange,
429
+ image;
410
430
 
411
431
  if (new_a.length) {
412
- new_img.src = new_a.attr('href');
432
+ src = new_a.attr('href');
433
+ interchange = new_a.data('clearing-interchange');
434
+ } else {
435
+ image = this.S('img', img);
436
+ src = image.attr('src');
437
+ interchange = image.data('clearing-interchange');
438
+ }
439
+
440
+ if (interchange) {
441
+ preload_img.attr('data-interchange', interchange);
413
442
  } else {
414
- new_img.src = this.S('img', img).attr('src');
443
+ preload_img.attr('src', src);
444
+ preload_img.attr('data-interchange', '');
415
445
  }
416
446
  }
417
447
  return this;
@@ -447,7 +477,7 @@
447
477
 
448
478
  if (target.length) {
449
479
  this.S('img', target)
450
- .trigger('click', [current, target]).trigger('click.fndtn.clearing', [current, target])
480
+ .trigger('click.fndtn.clearing', [current, target])
451
481
  .trigger('change.fndtn.clearing');
452
482
  }
453
483
  },