Merge branch 'equalize-responsive' of https://github.com/khanh/founda…

…tion into khanh-equalize-responsive
zfedoran · Apr 24, 2015 · d06eb7e · d06eb7e
2 parents 8a5cf62 + 3bcaa8e
commit d06eb7e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/doc/pages/components/equalizer.html b/doc/pages/components/equalizer.html
@@ -62,6 +62,39 @@ <h4>Rendered HTML</h4>
   </div>
 </div>
 
+## Responsive Equalizer
+
+You can specify media queries for which equalizer should activate on. Apply the `data-equalizer-mq` attribute to the parent container. Set the value of the attribute to the same media queries you are use to using in Foundation. If you use an unknown media query, Equalizer will ignore the media query request. This is particularly useful if you have set `equalize_on_stack` to `true`.
+
+<div class="row">
+  <div class="large-12 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+<div class="row" data-equalizer data-equalizer-mq="large-up">
+  <div class="medium-6 columns panel" data-equalizer-watch>
+    ...
+  </div>
+  <div class="medium-6 columns panel" data-equalizer-watch>
+    ...
+  </div>
+</div>
+```
+{{/markdown}}
+  </div>
+  <div class="large-12 columns">
+    <h4>Rendered HTML</h4>
+    <div class="row" data-equalizer data-equalizer-mq="large-up">
+      <div class="medium-6 columns panel" data-equalizer-watch>
+        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+      </div>
+      <div class="medium-6 columns panel" data-equalizer-watch>
+        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
 ## Nested Elements
 
 You can also nest "equalized" elements in other Equalizer elements. Apply the `data-equalizer` attribute to a parent container and assign a unique name to it. Then apply the `data-equalizer-watch` attribute to each nested element with the corresponding name. The height of `data-equalizer-watch` attribute will be equal to that of the tallest element.
@@ -288,6 +321,3 @@ <h4>Events</h4>
 $(document).foundation('equalizer', 'reflow');
 ```
 {{/markdown}}
-
-
-
diff --git a/js/foundation/foundation.equalizer.js b/js/foundation/foundation.equalizer.js
@@ -35,11 +35,11 @@
       if (vals.length === 0) {
         return;
       }
-      
+
       settings.before_height_change();
       equalizer.trigger('before-height-change.fndth.equalizer');
       vals.height('inherit');
-      
+
       if (settings.equalize_on_stack === false) {
         firstTopOffset = vals.first().offset().top;
         vals.each(function () {
@@ -62,7 +62,7 @@
         var min = Math.min.apply(null, heights);
         vals.css('height', min);
       }
-      
+
       settings.after_height_change();
       equalizer.trigger('after-height-change.fndtn.equalizer');
     },
@@ -71,9 +71,25 @@
       var self = this;
 
       this.S('[' + this.attr_name() + ']', this.scope).each(function () {
-        var $eq_target = $(this);
+        var $eq_target = $(this),
+            media_query = $eq_target.data('equalizer-mq'),
+            ignore_media_query = true;
+
+        if (media_query) {
+          console.log("YEAH QUERY");
+          media_query = 'is_' + media_query.replace(/-/g, '_');
+          if (Foundation.utils.hasOwnProperty(media_query)) {
+            ignore_media_query = false;
+          }
+        }
+
         self.image_loaded(self.S('img', this), function () {
-          self.equalize($eq_target)
+          if (ignore_media_query || Foundation.utils[media_query]()) {
+            self.equalize($eq_target)
+          } else {
+            var vals = $eq_target.find('[' + self.attr_name() + '-watch]:visible');
+            vals.css('height', 'auto');
+          }
         });
       });
     }