* Use css('height', ...) instead of height(...) -- better equalizer support for padding, border, and margins
* Use `get()` for heights `max.apply` calculation, as `$.map` returns object, not array (better equalizer browser support).
* Update Contribution docs with JavaScript testing instruction
* Update `jquery` testing matchers to new `bower` location
This is the Foundation project. We love making super awesome stuff, but even more we like to empower people to make changes on their own. Feel free to fork and improve Foundation.
-<!-- ### JavaScript
-
-The Foundation JS libraries are tested with qUnit. You can run the tests in your browser by opening up the respective `.html` files in `test/javascripts/tests/`.
-
-For more convenient testing using the command line and watcher functionality, you can also run the tests through Grunt with PhantomJS.
-
-**Setting up Grunt for command line testing.**
-
-1. Install [PhantomJS](http://phantomjs.org/)
-2. Install [Node.js](http://nodejs.org/)
-3. You may need to reboot your machine to make sure your PATH is up to date.
-4. From the root of the project, `npm install`. This will install the grunt tasks locally.
-5. Install the grunt command line interface with `npm install -g grunt-cli`.
-
-Now you should have two new commands available. `grunt qunit` will execute all of the qUnit tests. `grunt watch` will watch for changes to the JS files and test files, and execute the tests when something changes. -->
-
## Compass Project
If you have a compass project and would like updated assets you can run the following command at any given time from within your project directory:
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Test your changes to the best of your ability. We've provided a test/ folder, feel free to add to it as necessary.
+3. Test your changes to the best of your ability. We've provided a spec/ folder, please run the tests to ensure your changes didn't break something add tests as necessary.
4. Update the documentation to reflect your changes if they add or changes current functionality. Make sure you are in the docs folder, then run `bundle && bundle exec foreman start` to compile to documentation.
5. Commit your changes (`git commit -am 'Added some feature'`)
6. Push to the branch (`git push origin my-new-feature`)
7. Create new Pull Request
+
+## JavaScript Testing
+
+The Foundation JS libraries are tested with Jasmine. Grunt can be used to run the test suite.
+
+1. Install `node.js` and `npm` with `brew install node`
+ * You may need to `source` your bash config or restart your terminal client to make sure your PATH is up to date.
+2. From the root of the project, install required packages locally with `npm install`
+3. Install bower with `npm install -g bower` and and required assets locally `bower install`
+4. Install the command line interface for grunt with `npm install -g grunt-cli`
+5. Install PhantomJS with `brew install PhantomJS` (we assume you have Chrome and Firefox installed)
+ * If you get connection errors with PhantomJS when running the suite, ensure `node -v` returns `v0.10.12` or later. Upgrade with `brew upgrade node`
+6. Run `grunt karma:dev` to run the tests with some real browsers
+7. Run `grunt build:assets` to compile any changes to foundation JS source into testing distribution
+
'dist/assets/js/vendor/placeholder.js': 'bower_components/jquery-placeholder/jquery.placeholder.js',
'dist/assets/js/vendor/fastclick.js': 'bower_components/fastclick/lib/fastclick.js',
'dist/assets/js/vendor/jquery.cookie.js': 'bower_components/jquery.cookie/jquery.cookie.js',
- 'dist/assets/js/vendor/jquery.js': 'bower_components/jquery/jquery.js',
+ 'dist/assets/js/vendor/jquery.js': 'bower_components/jquery/dist/jquery.js',
'dist/assets/js/vendor/modernizr.js': 'bower_components/modernizr/modernizr.js'
}
}
vals = equalizer.find('[' + this.attr_name() + '-watch]'),
firstTopOffset = vals.first().offset().top,
settings = equalizer.data(this.attr_name(true)+'-init');
-
+
if (vals.length === 0) return;
settings.before_height_change();
equalizer.trigger('before-height-change');
}
});
if (isStacked) return;
-
- var heights = vals.map(function(){ return $(this).outerHeight() });
+
+ var heights = vals.map(function(){ return $(this).outerHeight() }).get();
if (settings.use_tallest) {
var max = Math.max.apply(null, heights);
- vals.height(max);
+ vals.css('height', max);
} else {
var min = Math.min.apply(null, heights);
- vals.height(min);
+ vals.css('height', min);
}
settings.after_height_change();
equalizer.trigger('after-height-change');
{pattern: 'dist/assets/css/foundation.css', watched: true, served: true, included: true},
{pattern: 'bower_components/modernizr/modernizr.js', watched: true, served: true, included: true},
{pattern: 'bower_components/fastclick/lib/fastclick.js', watched: true, served: true, included: true},
- {pattern: 'bower_components/jquery/jquery.js', watched: true, served: true, included: true},
+ {pattern: 'bower_components/jquery/dist/jquery.js', watched: true, served: true, included: true},
{pattern: 'bower_components/jquery-placeholder/jquery.placeholder.js', watched: true, served: true, included: true},
{pattern: 'bower_components/jquery.cookie/jquery.cookie.js', watched: true, served: true, included: true},
{pattern: 'dist/assets/js/foundation/foundation.js', watched: true, served: true, included: true},
--- /dev/null
+<div class="row" data-equalizer="">
+ <div class="small-4 columns">
+ <div class="panel" data-equalizer-watch="" id="watchee1">
+ <h3>Panel 1</h3>
+ <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.</p>
+ </div>
+ </div>
+ <div class="small-4 columns">
+ <div class="callout panel" data-equalizer-watch="" id="watchee2">
+ <h3>Panel 2</h3>
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ul>
+ </div>
+ </div>
+ <div class="small-4 columns">
+ <div class="panel" data-equalizer-watch="" id="watchee3">
+ <h3>Panel 3</h3>
+ <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>
+</div>
\ No newline at end of file
--- /dev/null
+describe('equalizer:', function() {
+ beforeEach(function() {
+ this.addMatchers({
+ // Place equalize-specific matchers here...
+ });
+
+ var origFunc = $.fn.foundation;
+ spyOn($.fn, 'foundation').andCallFake(function() {
+ var result = origFunc.apply(this, arguments);
+ jasmine.Clock.tick(1000); // Let things settle...
+ return result;
+ });
+ });
+
+ describe('basic height', function() {
+ beforeEach(function() {
+ document.body.innerHTML = __html__['spec/equalizer/basic.html'];
+ });
+
+ it('should have equal heights on load', function() {
+ $(document).foundation();
+
+ var equalized = $('[data-equalizer-watch]');
+
+ equalized.each(function(){
+ expect($(this).outerHeight()).toBe(equalized.first().outerHeight());
+ });
+ });
+ });
+});