├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── dist
    ├── salvattore.js
    └── salvattore.min.js
├── examples
    ├── README.md
    ├── normalize.css
    ├── salvattore.css
    ├── salvattore.html
    └── styles.css
├── gulpfile.js
├── karma.conf.js
├── package.json
├── src
    ├── polyfills
    │   ├── customEvent.js
    │   ├── matchMedia.addListener.js
    │   ├── matchMedia.js
    │   └── requestAnimationFrame.js
    └── salvattore.js
└── tests
    ├── resources
        ├── expect.js-0.3.1.js
        ├── mocha-2.2.5.css
        └── mocha-2.2.5.js
    ├── salvattore.test.js
    ├── test1.html
    ├── test2.html
    └── test3.html


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | lib-cov
 2 | *.seed
 3 | *.log
 4 | *.csv
 5 | *.dat
 6 | *.out
 7 | *.pid
 8 | *.gz
 9 | 
10 | pids
11 | logs
12 | results
13 | 
14 | npm-debug.log
15 | node_modules
16 | .DS_Store


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## 1.0.9
 4 | 
 5 | - Fix IE9 throwing error `not implemented` when using `@import` rule with an url [#159](https://github.com/rnmp/salvattore/issues/159)
 6 | 
 7 | ## 1.0.8 - 2015-06-08
 8 | 
 9 | Changes:
10 | - Convert all exposed to camelCase notation, underscore notation is now deprecated
11 | - Expose `recreateColumns` function to allow column recreation (from pull request [#78](https://github.com/rnmp/salvattore/pull/78) by [@skakri](https://github.com/skakri))
12 | - Expose `rescanMediaQueries` function to check all styles for new definitions
13 | 
14 | Fixed bugs:
15 | - Fix IE 11 DocumentFragment bug (from pull request [#72](https://github.com/rnmp/salvattore/pull/72) by [@rnzo](https://github.com/rnzo))
16 | - Fix reading of empty css files  [#84](https://github.com/rnmp/salvattore/issues/84)
17 |  (from pull request [#85](https://github.com/rnmp/salvattore/pull/85) by [@francescostella](https://github.com/francescostella))
18 | - `@import` statements no longer lead to errors [#108](https://github.com/rnmp/salvattore/issues/108)
19 |  (from pull request [#118](https://github.com/rnmp/salvattore/pull/118) by [@hbi99](https://github.com/hbi99))
20 | - `<style>`-Tags without `type="text/css"` are now parsed [#73](https://github.com/rnmp/salvattore/issues/73),  [#138](https://github.com/rnmp/salvattore/issues/138)
21 | - Fix grid setting obtaining on older android browsers (from pull request [#103](https://github.com/rnmp/salvattore/pull/103) by [@yamaha252](https://github.com/yamaha252))  
22 | - Interate over any interatable elements passed to  `appendElements` [#115](https://github.com/rnmp/salvattore/issues/115) (from pull request [#111](https://github.com/rnmp/salvattore/pull/111) by [@benjibee](https://github.com/benjibee))
23 | 
24 | ## 1.0.7 - 2014-03-13
25 | 
26 | - Fixes append_elements bug for empty grids [#67](https://github.com/rnmp/salvattore/pull/67).
27 | 
28 | ## 1.0.6 - 2014-03-10
29 | 
30 | - Fixes append_elements bug [#59](https://github.com/rnmp/salvattore/issues/59). (from pull request [#62](https://github.com/rnmp/salvattore/pull/62) by [@jlawrence-yellostudio](https://github.com/jlawrence-yellostudio))
31 | 
32 | ## 1.0.5 - 2014-02-26
33 | 
34 | - Fixes Chrome Canary bug ([#40](https://github.com/rnmp/salvattore/issues/40) and [#38](https://github.com/rnmp/salvattore/issues/38))
35 | 
36 | ## 1.0.4 - 2013-11-20
37 | 
38 | - Fixes error regarding JS API
39 | 
40 | ## 1.0.3 - 2013-11-20
41 | 
42 | - Fixes `register_grid is not defined` error
43 | 
44 | ## 1.0.2 - 2013-11-17
45 | 
46 | - Source code rewritten in JS (previously CoffeeScript) for easier contribution!
47 | 
48 | ## 1.0.1 - 2013-09-06
49 | 
50 | - Fix column rearrangement on window resize. ([#9](https://github.com/rnmp/salvattore/issues/9))
51 | 
52 | ## 1.0.0 - 2013-07-25
53 | 
54 | - First release.
55 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013-2014 Rolando Murillo and Giorgio Leveroni
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so,
 8 | subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Salvattore
 2 | ==========
 3 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/rnmp/salvattore?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 4 | 
 5 | [![](http://files.bandd.co/zQf5+)](http://salvattore.com/)
 6 | 
 7 | Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.
 8 | 
 9 | Features
10 | --------
11 | * __No requirements:__ Salvattore is a standalone script, it will work right away after being referenced in your HTML page.
12 | * __Extremely lightweight:__ about 2.7KB (minified and gzipped.)
13 | * __CSS-driven configuration:__ the number of columns is defined in CSS and the styling is left to the user.
14 | * __Media queries ready:__ the same parameters can be used inside media queries for better results on different devices.
15 | * __Wide browser support:__ modern browsers and IE9+
16 | 
17 | ### Upcoming
18 | * __Balanced columns:__ to keep all columns about the same height.
19 | 
20 | To find out more and see it in action, please visit [our website.](http://salvattore.com)
21 | 
22 | You can also [follow us](http://twitter.com/salvattorejs) on Twitter.
23 | 
24 | Methods
25 | --------------------------
26 | Methods can be called on the globally exposed `salvattore` object for advanced usage.
27 | 
28 | ```javascript
29 | var grid = document.querySelector('#grid');
30 | var item = document.createElement('article');
31 | 
32 | salvattore.appendElements(grid, [item]);
33 | item.outerHTML = 'I’ve been appended!';
34 | ```
35 | 
36 | Method | Argument | Description
37 | ------ | -------- | -----------
38 | appendElements | grid : DOM object, elements: Array of DOM objects | Adds elements to the end of a grid.  
39 | prependElements | grid : DOM object, elements: Array of DOM objects | Adds elements to a beginning of a grid. _Adds multiple elements one by one before each other, so note the order._
40 | registerGrid | grid : DOM object | Adds a new grid to salvattore. Which is initialized automatically then.
41 | recreateColumns | grid : DOM object | Removes all the columns from the grid, and adds them again.
42 | rescanMediaQueries | | Checks stylesheets and selectors for media queries again. Recreates the columns for all grids afterwards.
43 | 
44 | How to contribute
45 | -----------------
46 | We use Gulp to add polyfills and minify the script in the `dist/` folder. To make changes to the script itself, please edit `src/salvattore.js` and send us a pull request.
47 | 
48 | ### Share feedback & ideas
49 | You can even contribute by using Salvattore and sharing bugs, ideas or solutions on the Issues page.
50 | Protip: if you're posting a bug please share all the relevant data and ideally a live URL so that we can debug (yeah we do that!)
51 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "salvattore",
 3 |   "homepage": "http://salvattore.com/",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/rnmp/salvattore"
 7 |   },
 8 |   "description": "A jQuery Masonry alternative with CSS-driven configuration",
 9 |   "license": "MIT",
10 |   "authors": [
11 |     {
12 |       "name": "Rolando Murillo",
13 |       "email": "rolando@bandd.co",
14 |       "homepage": "http://rolandomurillo.com/"
15 |     },
16 |     {
17 |       "name": "Giorgio Leveroni",
18 |       "email": "giorgio.m.leveroni@gmail.com"
19 |     }
20 |   ],
21 |   "main": "dist/salvattore.js",
22 |   "moduleType": [
23 |     "amd",
24 |     "globals",
25 |     "node"
26 |   ],
27 |   "ignore": [
28 |     "**/.*",
29 |     "node_modules",
30 |     "bower_components",
31 |     "test",
32 |     "tests"
33 |   ],
34 |   "keywords": [
35 |     "grid",
36 |     "layout",
37 |     "browser",
38 |     "masonry"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/dist/salvattore.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Salvattore 1.0.9 by @rnmp and @ppold
  3 |  * https://github.com/rnmp/salvattore
  4 |  */
  5 | (function(root, factory) {
  6 |   if (typeof define === 'function' && define.amd) {
  7 |     define([], factory);
  8 |   } else if (typeof exports === 'object') {
  9 |     module.exports = factory();
 10 |   } else {
 11 |     root.salvattore = factory();
 12 |   }
 13 | }(this, function() {
 14 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
 15 | 
 16 | if (!window.matchMedia) {
 17 |     window.matchMedia = function() {
 18 |         "use strict";
 19 | 
 20 |         // For browsers that support matchMedium api such as IE 9 and webkit
 21 |         var styleMedia = (window.styleMedia || window.media);
 22 | 
 23 |         // For those that don't support matchMedium
 24 |         if (!styleMedia) {
 25 |             var style       = document.createElement('style'),
 26 |                 script      = document.getElementsByTagName('script')[0],
 27 |                 info        = null;
 28 | 
 29 |             style.type  = 'text/css';
 30 |             style.id    = 'matchmediajs-test';
 31 | 
 32 |             script.parentNode.insertBefore(style, script);
 33 | 
 34 |             // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
 35 |             info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
 36 | 
 37 |             styleMedia = {
 38 |                 matchMedium: function(media) {
 39 |                     var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
 40 | 
 41 |                     // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
 42 |                     if (style.styleSheet) {
 43 |                         style.styleSheet.cssText = text;
 44 |                     } else {
 45 |                         style.textContent = text;
 46 |                     }
 47 | 
 48 |                     // Test if media query is true or false
 49 |                     return info.width === '1px';
 50 |                 }
 51 |             };
 52 |         }
 53 | 
 54 |         return function(media) {
 55 |             return {
 56 |                 matches: styleMedia.matchMedium(media || 'all'),
 57 |                 media: media || 'all'
 58 |             };
 59 |         };
 60 |     }();
 61 | }
 62 | 
 63 | /*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
 64 | (function(){
 65 |     "use strict";
 66 | 
 67 |     // Bail out for browsers that have addListener support
 68 |     if (window.matchMedia && window.matchMedia('all').addListener) {
 69 |         return false;
 70 |     }
 71 | 
 72 |     var localMatchMedia = window.matchMedia,
 73 |         hasMediaQueries = localMatchMedia('only all').matches,
 74 |         isListening     = false,
 75 |         timeoutID       = 0,    // setTimeout for debouncing 'handleChange'
 76 |         queries         = [],   // Contains each 'mql' and associated 'listeners' if 'addListener' is used
 77 |         handleChange    = function(evt) {
 78 |             // Debounce
 79 |             clearTimeout(timeoutID);
 80 | 
 81 |             timeoutID = setTimeout(function() {
 82 |                 for (var i = 0, il = queries.length; i < il; i++) {
 83 |                     var mql         = queries[i].mql,
 84 |                         listeners   = queries[i].listeners || [],
 85 |                         matches     = localMatchMedia(mql.media).matches;
 86 | 
 87 |                     // Update mql.matches value and call listeners
 88 |                     // Fire listeners only if transitioning to or from matched state
 89 |                     if (matches !== mql.matches) {
 90 |                         mql.matches = matches;
 91 | 
 92 |                         for (var j = 0, jl = listeners.length; j < jl; j++) {
 93 |                             listeners[j].call(window, mql);
 94 |                         }
 95 |                     }
 96 |                 }
 97 |             }, 30);
 98 |         };
 99 | 
100 |     window.matchMedia = function(media) {
101 |         var mql         = localMatchMedia(media),
102 |             listeners   = [],
103 |             index       = 0;
104 | 
105 |         mql.addListener = function(listener) {
106 |             // Changes would not occur to css media type so return now (Affects IE <= 8)
107 |             if (!hasMediaQueries) {
108 |                 return;
109 |             }
110 | 
111 |             // Set up 'resize' listener for browsers that support CSS3 media queries (Not for IE <= 8)
112 |             // There should only ever be 1 resize listener running for performance
113 |             if (!isListening) {
114 |                 isListening = true;
115 |                 window.addEventListener('resize', handleChange, true);
116 |             }
117 | 
118 |             // Push object only if it has not been pushed already
119 |             if (index === 0) {
120 |                 index = queries.push({
121 |                     mql         : mql,
122 |                     listeners   : listeners
123 |                 });
124 |             }
125 | 
126 |             listeners.push(listener);
127 |         };
128 | 
129 |         mql.removeListener = function(listener) {
130 |             for (var i = 0, il = listeners.length; i < il; i++){
131 |                 if (listeners[i] === listener){
132 |                     listeners.splice(i, 1);
133 |                 }
134 |             }
135 |         };
136 | 
137 |         return mql;
138 |     };
139 | }());
140 | 
141 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
142 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
143 | 
144 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
145 | 
146 | // MIT license
147 | 
148 | (function() {
149 |     "use strict";
150 | 
151 |     var lastTime = 0;
152 |     var vendors = ['ms', 'moz', 'webkit', 'o'];
153 |     for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
154 |         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
155 |         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
156 |             window[vendors[x]+'CancelRequestAnimationFrame'];
157 |     }
158 | 
159 |     if (!window.requestAnimationFrame)
160 |         window.requestAnimationFrame = function(callback, element) {
161 |             var currTime = new Date().getTime();
162 |             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
163 |             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
164 |               timeToCall);
165 |             lastTime = currTime + timeToCall;
166 |             return id;
167 |         };
168 | 
169 |     if (!window.cancelAnimationFrame)
170 |         window.cancelAnimationFrame = function(id) {
171 |             clearTimeout(id);
172 |         };
173 | }());
174 | 
175 | // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
176 | 
177 | if (typeof window.CustomEvent !== "function") {
178 |   (function() {
179 |     "use strict";
180 |     function CustomEvent(event, params) {
181 |       params = params || { bubbles: false, cancelable: false, detail: undefined };
182 |       var evt = document.createEvent('CustomEvent');
183 |       evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
184 |       return evt;
185 |      }
186 | 
187 |     CustomEvent.prototype = window.Event.prototype;
188 | 
189 |     window.CustomEvent = CustomEvent;
190 |   })();
191 | }
192 | 
193 | /* jshint laxcomma: true */
194 | var salvattore = (function (global, document, undefined) {
195 | "use strict";
196 | 
197 | var self = {},
198 |     grids = [],
199 |     mediaRules = [],
200 |     mediaQueries = [],
201 |     add_to_dataset = function(element, key, value) {
202 |       // uses dataset function or a fallback for <ie10
203 |       if (element.dataset) {
204 |         element.dataset[key] = value;
205 |       } else {
206 |         element.setAttribute("data-" + key, value);
207 |       }
208 |       return;
209 |     };
210 | 
211 | self.obtainGridSettings = function obtainGridSettings(element) {
212 |   // returns the number of columns and the classes a column should have,
213 |   // from computing the style of the ::before pseudo-element of the grid.
214 | 
215 |   var computedStyle = global.getComputedStyle(element, ":before")
216 |     , content = computedStyle.getPropertyValue("content").slice(1, -1)
217 |     , matchResult = content.match(/^\s*(\d+)(?:\s?\.(.+))?\s*$/)
218 |     , numberOfColumns = 1
219 |     , columnClasses = []
220 |   ;
221 | 
222 |   if (matchResult) {
223 |     numberOfColumns = matchResult[1];
224 |     columnClasses = matchResult[2];
225 |     columnClasses = columnClasses? columnClasses.split(".") : ["column"];
226 |   } else {
227 |     matchResult = content.match(/^\s*\.(.+)\s+(\d+)\s*$/);
228 |     if (matchResult) {
229 |       columnClasses = matchResult[1];
230 |       numberOfColumns = matchResult[2];
231 |       if (numberOfColumns) {
232 |             numberOfColumns = numberOfColumns.split(".");
233 |       }
234 |     }
235 |   }
236 | 
237 |   return {
238 |     numberOfColumns: numberOfColumns,
239 |     columnClasses: columnClasses
240 |   };
241 | };
242 | 
243 | 
244 | self.addColumns = function addColumns(grid, items) {
245 |   // from the settings obtained, it creates columns with
246 |   // the configured classes and adds to them a list of items.
247 | 
248 |   var settings = self.obtainGridSettings(grid)
249 |     , numberOfColumns = settings.numberOfColumns
250 |     , columnClasses = settings.columnClasses
251 |     , columnsItems = new Array(+numberOfColumns)
252 |     , columnsFragment = document.createDocumentFragment()
253 |     , i = numberOfColumns
254 |     , selector
255 |   ;
256 | 
257 |   while (i-- !== 0) {
258 |     selector = "[data-columns] > *:nth-child(" + numberOfColumns + "n-" + i + ")";
259 |     columnsItems.push(items.querySelectorAll(selector));
260 |   }
261 | 
262 |   columnsItems.forEach(function append_to_grid_fragment(rows) {
263 |     var column = document.createElement("div")
264 |       , rowsFragment = document.createDocumentFragment()
265 |     ;
266 | 
267 |     column.className = columnClasses.join(" ");
268 | 
269 |     Array.prototype.forEach.call(rows, function append_to_column(row) {
270 |       rowsFragment.appendChild(row);
271 |     });
272 |     column.appendChild(rowsFragment);
273 |     columnsFragment.appendChild(column);
274 |   });
275 | 
276 |   grid.appendChild(columnsFragment);
277 |   add_to_dataset(grid, 'columns', numberOfColumns);
278 | };
279 | 
280 | 
281 | self.removeColumns = function removeColumns(grid) {
282 |   // removes all the columns from a grid, and returns a list
283 |   // of items sorted by the ordering of columns.
284 | 
285 |   var range = document.createRange();
286 |   range.selectNodeContents(grid);
287 | 
288 |   var columns = Array.prototype.filter.call(range.extractContents().childNodes, function filter_elements(node) {
289 |     return node instanceof global.HTMLElement;
290 |   });
291 | 
292 |   var numberOfColumns = columns.length
293 |     , numberOfRowsInFirstColumn = columns[0].childNodes.length
294 |     , sortedRows = new Array(numberOfRowsInFirstColumn * numberOfColumns)
295 |   ;
296 | 
297 |   Array.prototype.forEach.call(columns, function iterate_columns(column, columnIndex) {
298 |     Array.prototype.forEach.call(column.children, function iterate_rows(row, rowIndex) {
299 |       sortedRows[rowIndex * numberOfColumns + columnIndex] = row;
300 |     });
301 |   });
302 | 
303 |   var container = document.createElement("div");
304 |   add_to_dataset(container, 'columns', 0);
305 | 
306 |   sortedRows.filter(function filter_non_null(child) {
307 |     return !!child;
308 |   }).forEach(function append_row(child) {
309 |     container.appendChild(child);
310 |   });
311 | 
312 |   return container;
313 | };
314 | 
315 | 
316 | self.recreateColumns = function recreateColumns(grid) {
317 |   // removes all the columns from the grid, and adds them again,
318 |   // it is used when the number of columns change.
319 | 
320 |   global.requestAnimationFrame(function render_after_css_mediaQueryChange() {
321 |     self.addColumns(grid, self.removeColumns(grid));
322 |     var columnsChange = new CustomEvent("columnsChange");
323 |     grid.dispatchEvent(columnsChange);
324 |   });
325 | };
326 | 
327 | 
328 | self.mediaQueryChange = function mediaQueryChange(mql) {
329 |   // recreates the columns when a media query matches the current state
330 |   // of the browser.
331 | 
332 |   if (mql.matches) {
333 |     Array.prototype.forEach.call(grids, self.recreateColumns);
334 |   }
335 | };
336 | 
337 | 
338 | self.getCSSRules = function getCSSRules(stylesheet) {
339 |   // returns a list of css rules from a stylesheet
340 | 
341 |   var cssRules;
342 |   try {
343 |     cssRules = stylesheet.sheet.cssRules || stylesheet.sheet.rules;
344 |   } catch (e) {
345 |     return [];
346 |   }
347 | 
348 |   return cssRules || [];
349 | };
350 | 
351 | 
352 | self.getStylesheets = function getStylesheets() {
353 |   // returns a list of all the styles in the document (that are accessible).
354 | 
355 |   var inlineStyleBlocks = Array.prototype.slice.call(document.querySelectorAll("style"));
356 |   inlineStyleBlocks.forEach(function(stylesheet, idx) {
357 |     if (stylesheet.type !== 'text/css' && stylesheet.type !== '') {
358 |       inlineStyleBlocks.splice(idx, 1);
359 |     }
360 |   });
361 | 
362 |   return Array.prototype.concat.call(
363 |     inlineStyleBlocks,
364 |     Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))
365 |   );
366 | };
367 | 
368 | 
369 | self.mediaRuleHasColumnsSelector = function mediaRuleHasColumnsSelector(rules) {
370 |   // checks if a media query css rule has in its contents a selector that
371 |   // styles the grid.
372 | 
373 |   var i, rule;
374 | 
375 |   try {
376 |     i = rules.length;
377 |   }
378 |   catch (e) {
379 |     i = 0;
380 |   }
381 | 
382 |   while (i--) {
383 |     rule = rules[i];
384 |     if (rule.selectorText && rule.selectorText.match(/\[data-columns\](.*)::?before$/)) {
385 |       return true;
386 |     }
387 |   }
388 | 
389 |   return false;
390 | };
391 | 
392 | 
393 | self.scanMediaQueries = function scanMediaQueries() {
394 |   // scans all the stylesheets for selectors that style grids,
395 |   // if the matchMedia API is supported.
396 | 
397 |   var newMediaRules = [];
398 | 
399 |   if (!global.matchMedia) {
400 |     return;
401 |   }
402 | 
403 |   self.getStylesheets().forEach(function extract_rules(stylesheet) {
404 |     Array.prototype.forEach.call(self.getCSSRules(stylesheet), function filter_by_column_selector(rule) {
405 |       // rule.media throws an 'not implemented error' in ie9 for import rules occasionally
406 |       try {
407 |         if (rule.media && rule.cssRules && self.mediaRuleHasColumnsSelector(rule.cssRules)) {
408 |           newMediaRules.push(rule);
409 |         }
410 |       } catch (e) {}
411 |     });
412 |   });
413 | 
414 |   // remove matchMedia listeners from the old rules
415 |   var oldRules = mediaRules.filter(function (el) {
416 |       return newMediaRules.indexOf(el) === -1;
417 |   });
418 |   mediaQueries.filter(function (el) {
419 |     return oldRules.indexOf(el.rule) !== -1;
420 |   }).forEach(function (el) {
421 |       el.mql.removeListener(self.mediaQueryChange);
422 |   });
423 |   mediaQueries = mediaQueries.filter(function (el) {
424 |     return oldRules.indexOf(el.rule) === -1;
425 |   });
426 | 
427 |   // add matchMedia listeners to the new rules
428 |   newMediaRules.filter(function (el) {
429 |     return mediaRules.indexOf(el) == -1;
430 |   }).forEach(function (rule) {
431 |       var mql = global.matchMedia(rule.media.mediaText);
432 |       mql.addListener(self.mediaQueryChange);
433 |       mediaQueries.push({rule: rule, mql:mql});
434 |   });
435 | 
436 |   // swap mediaRules with the new set
437 |   mediaRules.length = 0;
438 |   mediaRules = newMediaRules;
439 | };
440 | 
441 | 
442 | self.rescanMediaQueries = function rescanMediaQueries() {
443 |     self.scanMediaQueries();
444 |     Array.prototype.forEach.call(grids, self.recreateColumns);
445 | };
446 | 
447 | 
448 | self.nextElementColumnIndex = function nextElementColumnIndex(grid, fragments) {
449 |   // returns the index of the column where the given element must be added.
450 | 
451 |   var children = grid.children
452 |     , m = children.length
453 |     , lowestRowCount = 0
454 |     , child
455 |     , currentRowCount
456 |     , i
457 |     , index = 0
458 |   ;
459 |   for (i = 0; i < m; i++) {
460 |     child = children[i];
461 |     currentRowCount = child.children.length + (fragments[i].children || fragments[i].childNodes).length;
462 |   if(lowestRowCount === 0) {
463 |     lowestRowCount = currentRowCount;
464 |   }
465 |     if(currentRowCount < lowestRowCount) {
466 |       index = i;
467 |       lowestRowCount = currentRowCount;
468 |     }
469 |   }
470 | 
471 |   return index;
472 | };
473 | 
474 | 
475 | self.createFragmentsList = function createFragmentsList(quantity) {
476 |   // returns a list of fragments
477 | 
478 |   var fragments = new Array(quantity)
479 |     , i = 0
480 |   ;
481 | 
482 |   while (i !== quantity) {
483 |     fragments[i] = document.createDocumentFragment();
484 |     i++;
485 |   }
486 | 
487 |   return fragments;
488 | };
489 | 
490 | 
491 | self.appendElements = function appendElements(grid, elements) {
492 |   // adds a list of elements to the end of a grid
493 | 
494 |   var columns = grid.children
495 |     , numberOfColumns = columns.length
496 |     , fragments = self.createFragmentsList(numberOfColumns)
497 |   ;
498 | 
499 |   Array.prototype.forEach.call(elements, function append_to_next_fragment(element) {
500 |     var columnIndex = self.nextElementColumnIndex(grid, fragments);
501 |     fragments[columnIndex].appendChild(element);
502 |   });
503 | 
504 |   Array.prototype.forEach.call(columns, function insert_column(column, index) {
505 |     column.appendChild(fragments[index]);
506 |   });
507 | };
508 | 
509 | 
510 | self.prependElements = function prependElements(grid, elements) {
511 |   // adds a list of elements to the start of a grid
512 | 
513 |   var columns = grid.children
514 |     , numberOfColumns = columns.length
515 |     , fragments = self.createFragmentsList(numberOfColumns)
516 |     , columnIndex = numberOfColumns - 1
517 |   ;
518 | 
519 |   elements.forEach(function append_to_next_fragment(element) {
520 |     var fragment = fragments[columnIndex];
521 |     fragment.insertBefore(element, fragment.firstChild);
522 |     if (columnIndex === 0) {
523 |       columnIndex = numberOfColumns - 1;
524 |     } else {
525 |       columnIndex--;
526 |     }
527 |   });
528 | 
529 |   Array.prototype.forEach.call(columns, function insert_column(column, index) {
530 |     column.insertBefore(fragments[index], column.firstChild);
531 |   });
532 | 
533 |   // populates a fragment with n columns till the right
534 |   var fragment = document.createDocumentFragment()
535 |     , numberOfColumnsToExtract = elements.length % numberOfColumns
536 |   ;
537 | 
538 |   while (numberOfColumnsToExtract-- !== 0) {
539 |     fragment.appendChild(grid.lastChild);
540 |   }
541 | 
542 |   // adds the fragment to the left
543 |   grid.insertBefore(fragment, grid.firstChild);
544 | };
545 | 
546 | 
547 | self.registerGrid = function registerGrid (grid) {
548 |   if (global.getComputedStyle(grid).display === "none") {
549 |     return;
550 |   }
551 | 
552 |   // retrieve the list of items from the grid itself
553 |   var range = document.createRange();
554 |   range.selectNodeContents(grid);
555 | 
556 |   var items = document.createElement("div");
557 |   items.appendChild(range.extractContents());
558 | 
559 | 
560 |   add_to_dataset(items, 'columns', 0);
561 |   self.addColumns(grid, items);
562 |   grids.push(grid);
563 | };
564 | 
565 | 
566 | self.init = function init() {
567 |   // adds required CSS rule to hide 'content' based
568 |   // configuration.
569 | 
570 |   var css = document.createElement("style");
571 |   css.innerHTML = "[data-columns]::before{display:block;visibility:hidden;position:absolute;font-size:1px;}";
572 |   document.head.appendChild(css);
573 | 
574 |   // scans all the grids in the document and generates
575 |   // columns from their configuration.
576 | 
577 |   var gridElements = document.querySelectorAll("[data-columns]");
578 |   Array.prototype.forEach.call(gridElements, self.registerGrid);
579 |   self.scanMediaQueries();
580 | };
581 | 
582 | self.init();
583 | 
584 | return {
585 |   appendElements: self.appendElements,
586 |   prependElements: self.prependElements,
587 |   registerGrid: self.registerGrid,
588 |   recreateColumns: self.recreateColumns,
589 |   rescanMediaQueries: self.rescanMediaQueries,
590 |   init: self.init,
591 | 
592 |   // maintains backwards compatibility with underscore style method names
593 |   append_elements: self.appendElements,
594 |   prepend_elements: self.prependElements,
595 |   register_grid: self.registerGrid,
596 |   recreate_columns: self.recreateColumns,
597 |   rescan_media_queries: self.rescanMediaQueries
598 | };
599 | 
600 | })(window, window.document);
601 | 
602 | return salvattore;
603 | }));
604 | 


--------------------------------------------------------------------------------
/dist/salvattore.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Salvattore 1.0.9 by @rnmp and @ppold
3 |  * https://github.com/rnmp/salvattore
4 |  */
5 | !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.salvattore=t()}(this,function(){/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
6 | window.matchMedia||(window.matchMedia=function(){"use strict";var e=window.styleMedia||window.media;if(!e){var t=document.createElement("style"),n=document.getElementsByTagName("script")[0],r=null;t.type="text/css",t.id="matchmediajs-test",n.parentNode.insertBefore(t,n),r="getComputedStyle"in window&&window.getComputedStyle(t,null)||t.currentStyle,e={matchMedium:function(e){var n="@media "+e+"{ #matchmediajs-test { width: 1px; } }";return t.styleSheet?t.styleSheet.cssText=n:t.textContent=n,"1px"===r.width}}}return function(t){return{matches:e.matchMedium(t||"all"),media:t||"all"}}}()),/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
7 | function(){"use strict";if(window.matchMedia&&window.matchMedia("all").addListener)return!1;var e=window.matchMedia,t=e("only all").matches,n=!1,r=0,a=[],i=function(t){clearTimeout(r),r=setTimeout(function(){for(var t=0,n=a.length;n>t;t++){var r=a[t].mql,i=a[t].listeners||[],o=e(r.media).matches;if(o!==r.matches){r.matches=o;for(var c=0,l=i.length;l>c;c++)i[c].call(window,r)}}},30)};window.matchMedia=function(r){var o=e(r),c=[],l=0;return o.addListener=function(e){t&&(n||(n=!0,window.addEventListener("resize",i,!0)),0===l&&(l=a.push({mql:o,listeners:c})),c.push(e))},o.removeListener=function(e){for(var t=0,n=c.length;n>t;t++)c[t]===e&&c.splice(t,1)},o}}(),function(){"use strict";for(var e=0,t=["ms","moz","webkit","o"],n=0;n<t.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[t[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[n]+"CancelAnimationFrame"]||window[t[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t,n){var r=(new Date).getTime(),a=Math.max(0,16-(r-e)),i=window.setTimeout(function(){t(r+a)},a);return e=r+a,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}(),"function"!=typeof window.CustomEvent&&!function(){"use strict";function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e}();var e=function(e,t,n){"use strict";var r={},a=[],i=[],o=[],c=function(e,t,n){e.dataset?e.dataset[t]=n:e.setAttribute("data-"+t,n)};return r.obtainGridSettings=function(t){var n=e.getComputedStyle(t,":before"),r=n.getPropertyValue("content").slice(1,-1),a=r.match(/^\s*(\d+)(?:\s?\.(.+))?\s*$/),i=1,o=[];return a?(i=a[1],o=a[2],o=o?o.split("."):["column"]):(a=r.match(/^\s*\.(.+)\s+(\d+)\s*$/),a&&(o=a[1],i=a[2],i&&(i=i.split(".")))),{numberOfColumns:i,columnClasses:o}},r.addColumns=function(e,n){for(var a,i=r.obtainGridSettings(e),o=i.numberOfColumns,l=i.columnClasses,s=new Array(+o),u=t.createDocumentFragment(),d=o;0!==d--;)a="[data-columns] > *:nth-child("+o+"n-"+d+")",s.push(n.querySelectorAll(a));s.forEach(function(e){var n=t.createElement("div"),r=t.createDocumentFragment();n.className=l.join(" "),Array.prototype.forEach.call(e,function(e){r.appendChild(e)}),n.appendChild(r),u.appendChild(n)}),e.appendChild(u),c(e,"columns",o)},r.removeColumns=function(n){var r=t.createRange();r.selectNodeContents(n);var a=Array.prototype.filter.call(r.extractContents().childNodes,function(t){return t instanceof e.HTMLElement}),i=a.length,o=a[0].childNodes.length,l=new Array(o*i);Array.prototype.forEach.call(a,function(e,t){Array.prototype.forEach.call(e.children,function(e,n){l[n*i+t]=e})});var s=t.createElement("div");return c(s,"columns",0),l.filter(function(e){return!!e}).forEach(function(e){s.appendChild(e)}),s},r.recreateColumns=function(t){e.requestAnimationFrame(function(){r.addColumns(t,r.removeColumns(t));var e=new CustomEvent("columnsChange");t.dispatchEvent(e)})},r.mediaQueryChange=function(e){e.matches&&Array.prototype.forEach.call(a,r.recreateColumns)},r.getCSSRules=function(e){var t;try{t=e.sheet.cssRules||e.sheet.rules}catch(n){return[]}return t||[]},r.getStylesheets=function(){var e=Array.prototype.slice.call(t.querySelectorAll("style"));return e.forEach(function(t,n){"text/css"!==t.type&&""!==t.type&&e.splice(n,1)}),Array.prototype.concat.call(e,Array.prototype.slice.call(t.querySelectorAll("link[rel='stylesheet']")))},r.mediaRuleHasColumnsSelector=function(e){var t,n;try{t=e.length}catch(r){t=0}for(;t--;)if(n=e[t],n.selectorText&&n.selectorText.match(/\[data-columns\](.*)::?before$/))return!0;return!1},r.scanMediaQueries=function(){var t=[];if(e.matchMedia){r.getStylesheets().forEach(function(e){Array.prototype.forEach.call(r.getCSSRules(e),function(e){try{e.media&&e.cssRules&&r.mediaRuleHasColumnsSelector(e.cssRules)&&t.push(e)}catch(n){}})});var n=i.filter(function(e){return-1===t.indexOf(e)});o.filter(function(e){return-1!==n.indexOf(e.rule)}).forEach(function(e){e.mql.removeListener(r.mediaQueryChange)}),o=o.filter(function(e){return-1===n.indexOf(e.rule)}),t.filter(function(e){return-1==i.indexOf(e)}).forEach(function(t){var n=e.matchMedia(t.media.mediaText);n.addListener(r.mediaQueryChange),o.push({rule:t,mql:n})}),i.length=0,i=t}},r.rescanMediaQueries=function(){r.scanMediaQueries(),Array.prototype.forEach.call(a,r.recreateColumns)},r.nextElementColumnIndex=function(e,t){var n,r,a,i=e.children,o=i.length,c=0,l=0;for(a=0;o>a;a++)n=i[a],r=n.children.length+(t[a].children||t[a].childNodes).length,0===c&&(c=r),c>r&&(l=a,c=r);return l},r.createFragmentsList=function(e){for(var n=new Array(e),r=0;r!==e;)n[r]=t.createDocumentFragment(),r++;return n},r.appendElements=function(e,t){var n=e.children,a=n.length,i=r.createFragmentsList(a);Array.prototype.forEach.call(t,function(t){var n=r.nextElementColumnIndex(e,i);i[n].appendChild(t)}),Array.prototype.forEach.call(n,function(e,t){e.appendChild(i[t])})},r.prependElements=function(e,n){var a=e.children,i=a.length,o=r.createFragmentsList(i),c=i-1;n.forEach(function(e){var t=o[c];t.insertBefore(e,t.firstChild),0===c?c=i-1:c--}),Array.prototype.forEach.call(a,function(e,t){e.insertBefore(o[t],e.firstChild)});for(var l=t.createDocumentFragment(),s=n.length%i;0!==s--;)l.appendChild(e.lastChild);e.insertBefore(l,e.firstChild)},r.registerGrid=function(n){if("none"!==e.getComputedStyle(n).display){var i=t.createRange();i.selectNodeContents(n);var o=t.createElement("div");o.appendChild(i.extractContents()),c(o,"columns",0),r.addColumns(n,o),a.push(n)}},r.init=function(){var e=t.createElement("style");e.innerHTML="[data-columns]::before{display:block;visibility:hidden;position:absolute;font-size:1px;}",t.head.appendChild(e);var n=t.querySelectorAll("[data-columns]");Array.prototype.forEach.call(n,r.registerGrid),r.scanMediaQueries()},r.init(),{appendElements:r.appendElements,prependElements:r.prependElements,registerGrid:r.registerGrid,recreateColumns:r.recreateColumns,rescanMediaQueries:r.rescanMediaQueries,init:r.init,append_elements:r.appendElements,prepend_elements:r.prependElements,register_grid:r.registerGrid,recreate_columns:r.recreateColumns,rescan_media_queries:r.rescanMediaQueries}}(window,window.document);return e});


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # How to run
2 | Run a HTTP server in the root folder, where `salvattore.js` or `.min.js` are and then go to http://localhost:8000/examples/timeline.html
3 | 
4 | The easiest way to run a HTTP server is by using the `python -m SimpleHTTPServer` command.
5 | 


--------------------------------------------------------------------------------
/examples/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
  2 | 
  3 | /* ==========================================================================
  4 |    HTML5 display definitions
  5 |    ========================================================================== */
  6 | 
  7 | /**
  8 |  * Correct `block` display not defined in IE 8/9.
  9 |  */
 10 | 
 11 | article,
 12 | aside,
 13 | details,
 14 | figcaption,
 15 | figure,
 16 | footer,
 17 | header,
 18 | hgroup,
 19 | main,
 20 | nav,
 21 | section,
 22 | summary {
 23 |     display: block;
 24 | }
 25 | 
 26 | /**
 27 |  * Correct `inline-block` display not defined in IE 8/9.
 28 |  */
 29 | 
 30 | audio,
 31 | canvas,
 32 | video {
 33 |     display: inline-block;
 34 | }
 35 | 
 36 | /**
 37 |  * Prevent modern browsers from displaying `audio` without controls.
 38 |  * Remove excess height in iOS 5 devices.
 39 |  */
 40 | 
 41 | audio:not([controls]) {
 42 |     display: none;
 43 |     height: 0;
 44 | }
 45 | 
 46 | /**
 47 |  * Address `[hidden]` styling not present in IE 8/9.
 48 |  * Hide the `template` element in IE, Safari, and Firefox < 22.
 49 |  */
 50 | 
 51 | [hidden],
 52 | template {
 53 |     display: none;
 54 | }
 55 | 
 56 | /* ==========================================================================
 57 |    Base
 58 |    ========================================================================== */
 59 | 
 60 | /**
 61 |  * 1. Set default font family to sans-serif.
 62 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 63 |  *    user zoom.
 64 |  */
 65 | 
 66 | html {
 67 |     font-family: sans-serif; /* 1 */
 68 |     -ms-text-size-adjust: 100%; /* 2 */
 69 |     -webkit-text-size-adjust: 100%; /* 2 */
 70 | }
 71 | 
 72 | /**
 73 |  * Remove default margin.
 74 |  */
 75 | 
 76 | body {
 77 |     margin: 0;
 78 | }
 79 | 
 80 | /* ==========================================================================
 81 |    Links
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Remove the gray background color from active links in IE 10.
 86 |  */
 87 | 
 88 | a {
 89 |     background: transparent;
 90 | }
 91 | 
 92 | /**
 93 |  * Address `outline` inconsistency between Chrome and other browsers.
 94 |  */
 95 | 
 96 | a:focus {
 97 |     outline: thin dotted;
 98 | }
 99 | 
100 | /**
101 |  * Improve readability when focused and also mouse hovered in all browsers.
102 |  */
103 | 
104 | a:active,
105 | a:hover {
106 |     outline: 0;
107 | }
108 | 
109 | /* ==========================================================================
110 |    Typography
111 |    ========================================================================== */
112 | 
113 | /**
114 |  * Address variable `h1` font-size and margin within `section` and `article`
115 |  * contexts in Firefox 4+, Safari 5, and Chrome.
116 |  */
117 | 
118 | h1 {
119 |     font-size: 2em;
120 |     margin: 0.67em 0;
121 | }
122 | 
123 | /**
124 |  * Address styling not present in IE 8/9, Safari 5, and Chrome.
125 |  */
126 | 
127 | abbr[title] {
128 |     border-bottom: 1px dotted;
129 | }
130 | 
131 | /**
132 |  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
133 |  */
134 | 
135 | b,
136 | strong {
137 |     font-weight: bold;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in Safari 5 and Chrome.
142 |  */
143 | 
144 | dfn {
145 |     font-style: italic;
146 | }
147 | 
148 | /**
149 |  * Address differences between Firefox and other browsers.
150 |  */
151 | 
152 | hr {
153 |     -moz-box-sizing: content-box;
154 |     box-sizing: content-box;
155 |     height: 0;
156 | }
157 | 
158 | /**
159 |  * Address styling not present in IE 8/9.
160 |  */
161 | 
162 | mark {
163 |     background: #ff0;
164 |     color: #000;
165 | }
166 | 
167 | /**
168 |  * Correct font family set oddly in Safari 5 and Chrome.
169 |  */
170 | 
171 | code,
172 | kbd,
173 | pre,
174 | samp {
175 |     font-family: monospace, serif;
176 |     font-size: 1em;
177 | }
178 | 
179 | /**
180 |  * Improve readability of pre-formatted text in all browsers.
181 |  */
182 | 
183 | pre {
184 |     white-space: pre-wrap;
185 | }
186 | 
187 | /**
188 |  * Set consistent quote types.
189 |  */
190 | 
191 | q {
192 |     quotes: "\201C" "\201D" "\2018" "\2019";
193 | }
194 | 
195 | /**
196 |  * Address inconsistent and variable font size in all browsers.
197 |  */
198 | 
199 | small {
200 |     font-size: 80%;
201 | }
202 | 
203 | /**
204 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
205 |  */
206 | 
207 | sub,
208 | sup {
209 |     font-size: 75%;
210 |     line-height: 0;
211 |     position: relative;
212 |     vertical-align: baseline;
213 | }
214 | 
215 | sup {
216 |     top: -0.5em;
217 | }
218 | 
219 | sub {
220 |     bottom: -0.25em;
221 | }
222 | 
223 | /* ==========================================================================
224 |    Embedded content
225 |    ========================================================================== */
226 | 
227 | /**
228 |  * Remove border when inside `a` element in IE 8/9.
229 |  */
230 | 
231 | img {
232 |     border: 0;
233 | }
234 | 
235 | /**
236 |  * Correct overflow displayed oddly in IE 9.
237 |  */
238 | 
239 | svg:not(:root) {
240 |     overflow: hidden;
241 | }
242 | 
243 | /* ==========================================================================
244 |    Figures
245 |    ========================================================================== */
246 | 
247 | /**
248 |  * Address margin not present in IE 8/9 and Safari 5.
249 |  */
250 | 
251 | figure {
252 |     margin: 0;
253 | }
254 | 
255 | /* ==========================================================================
256 |    Forms
257 |    ========================================================================== */
258 | 
259 | /**
260 |  * Define consistent border, margin, and padding.
261 |  */
262 | 
263 | fieldset {
264 |     border: 1px solid #c0c0c0;
265 |     margin: 0 2px;
266 |     padding: 0.35em 0.625em 0.75em;
267 | }
268 | 
269 | /**
270 |  * 1. Correct `color` not being inherited in IE 8/9.
271 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
272 |  */
273 | 
274 | legend {
275 |     border: 0; /* 1 */
276 |     padding: 0; /* 2 */
277 | }
278 | 
279 | /**
280 |  * 1. Correct font family not being inherited in all browsers.
281 |  * 2. Correct font size not being inherited in all browsers.
282 |  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
283 |  */
284 | 
285 | button,
286 | input,
287 | select,
288 | textarea {
289 |     font-family: inherit; /* 1 */
290 |     font-size: 100%; /* 2 */
291 |     margin: 0; /* 3 */
292 | }
293 | 
294 | /**
295 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
296 |  * the UA stylesheet.
297 |  */
298 | 
299 | button,
300 | input {
301 |     line-height: normal;
302 | }
303 | 
304 | /**
305 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
306 |  * All other form control elements do not inherit `text-transform` values.
307 |  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
308 |  * Correct `select` style inheritance in Firefox 4+ and Opera.
309 |  */
310 | 
311 | button,
312 | select {
313 |     text-transform: none;
314 | }
315 | 
316 | /**
317 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
318 |  *    and `video` controls.
319 |  * 2. Correct inability to style clickable `input` types in iOS.
320 |  * 3. Improve usability and consistency of cursor style between image-type
321 |  *    `input` and others.
322 |  */
323 | 
324 | button,
325 | html input[type="button"], /* 1 */
326 | input[type="reset"],
327 | input[type="submit"] {
328 |     -webkit-appearance: button; /* 2 */
329 |     cursor: pointer; /* 3 */
330 | }
331 | 
332 | /**
333 |  * Re-set default cursor for disabled elements.
334 |  */
335 | 
336 | button[disabled],
337 | html input[disabled] {
338 |     cursor: default;
339 | }
340 | 
341 | /**
342 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
343 |  * 2. Remove excess padding in IE 8/9/10.
344 |  */
345 | 
346 | input[type="checkbox"],
347 | input[type="radio"] {
348 |     box-sizing: border-box; /* 1 */
349 |     padding: 0; /* 2 */
350 | }
351 | 
352 | /**
353 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
354 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
355 |  *    (include `-moz` to future-proof).
356 |  */
357 | 
358 | input[type="search"] {
359 |     -webkit-appearance: textfield; /* 1 */
360 |     -moz-box-sizing: content-box;
361 |     -webkit-box-sizing: content-box; /* 2 */
362 |     box-sizing: content-box;
363 | }
364 | 
365 | /**
366 |  * Remove inner padding and search cancel button in Safari 5 and Chrome
367 |  * on OS X.
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |     -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Remove inner padding and border in Firefox 4+.
377 |  */
378 | 
379 | button::-moz-focus-inner,
380 | input::-moz-focus-inner {
381 |     border: 0;
382 |     padding: 0;
383 | }
384 | 
385 | /**
386 |  * 1. Remove default vertical scrollbar in IE 8/9.
387 |  * 2. Improve readability and alignment in all browsers.
388 |  */
389 | 
390 | textarea {
391 |     overflow: auto; /* 1 */
392 |     vertical-align: top; /* 2 */
393 | }
394 | 
395 | /* ==========================================================================
396 |    Tables
397 |    ========================================================================== */
398 | 
399 | /**
400 |  * Remove most spacing between table cells.
401 |  */
402 | 
403 | table {
404 |     border-collapse: collapse;
405 |     border-spacing: 0;
406 | }
407 | 


--------------------------------------------------------------------------------
/examples/salvattore.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |    Spezific styling for salvattore
 3 |    Feel free to edit it as you like
 4 |    More info at http://salvattore.com
 5 |  */
 6 | 
 7 | /* Base styles */
 8 | .column {
 9 |     float: left;
10 | }
11 | .size-1of4 {
12 |     width: 25%;
13 | }
14 | .size-1of3 {
15 |     width: 33.333%;
16 | }
17 | .size-1of2 {
18 |     width: 50%;
19 | }
20 | 
21 | /* Configurate salvattore with media queries */
22 | @media screen and (max-width: 450px) {
23 |     #timeline[data-columns]::before {
24 |         content: '1 .column';
25 |     }
26 | }
27 | 
28 | @media screen and (min-width: 451px) and (max-width: 700px) {
29 |     #timeline[data-columns]::before {
30 |         content: '2 .column.size-1of2';
31 |     }
32 | }
33 | 
34 | @media screen and (min-width: 701px) and (max-width: 850px) {
35 |     #timeline[data-columns]::before {
36 |         content: '3 .column.size-1of3';
37 |     }
38 | }
39 | 
40 | @media screen and (min-width: 851px) {
41 |     #timeline[data-columns]::before {
42 |         content: '4 .column.size-1of4';
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/examples/salvattore.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Salvattore content test</title>
  6 |         <!-- Include some stylesheet containing your configuration -->
  7 |         <link rel="stylesheet" href="salvattore.css">
  8 | 
  9 |         <!-- For demo only -->
 10 |         <link rel="stylesheet" href="normalize.css">
 11 |         <link rel="stylesheet" href="styles.css">
 12 |     </head>
 13 |     <body>
 14 |         <h1>Salvattore <small>Example</small></h1>
 15 | 
 16 |         <!-- include 'data-columns' at the container -->
 17 |         <div id="timeline" data-columns>
 18 |             <div class="item">
 19 |                 <img src="http://hhhhold.com/l?545" alt="">
 20 |             </div>
 21 |             <div class="item">
 22 |                 <img src="http://hhhhold.com/l?54sdf5" alt="">
 23 |             </div>
 24 |             <div class="item">
 25 |                 <img src="http://hhhhold.com/l?54s5" alt="">
 26 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni culpa ab modi repellendus voluptatibus quis.</p>
 27 |             </div>
 28 |             <div class="item">
 29 |                 <img src="http://hhhhold.com/l?54erw5" alt="">
 30 |             </div>
 31 |             <div class="item">
 32 |                 <img src="http://hhhhold.com/l?5vv45" alt="">
 33 |             </div>
 34 |             <div class="item">
 35 |                 <img src="http://hhhhold.com/l?54xcvh5" alt="">
 36 |             </div>
 37 |             <div class="item">
 38 |                 <img src="http://hhhhold.com/l?54hsdhs5" alt="">
 39 |             </div>
 40 |             <div class="item">
 41 |                 <img src="http://hhhhold.com/l?54hsdfh5" alt="">
 42 |             </div>
 43 |             <div class="item">
 44 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quos aperiam minus similique sunt ducimus nemo earum perferendis fugiat doloribus.</p>
 45 |                 <img src="http://hhhhold.com/l?5sde345" alt="">
 46 |             </div>
 47 |             <div class="item">
 48 |                 <img src="http://hhhhold.com/l?gs545" alt="">
 49 |             </div>
 50 |             <div class="item">
 51 |                 <img src="http://hhhhold.com/l?54b5" alt="">
 52 |             </div>
 53 |             <div class="item">
 54 |                 <img src="http://hhhhold.com/l?5a45" alt="">
 55 |             </div>
 56 |             <div class="item">
 57 |                 <img src="http://hhhhold.com/l?57745" alt="">
 58 |             </div>
 59 |             <div class="item">
 60 |                 <img src="http://hhhhold.com/l?5p45" alt="">
 61 |             </div>
 62 |             <div class="item">
 63 |                 <img src="http://hhhhold.com/l?54hsh5" alt="">
 64 |             </div>
 65 |             <div class="item">
 66 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ullam, explicabo nisi ipsam fuga possimus beatae facilis praesentium sapiente nam odit sequi repellendus dolorum non veniam placeat sint. Omnis, obcaecati, perferendis officia a cupiditate molestiae delectus corporis aliquid aperiam asperiores pariatur eius accusantium nisi! Ad, incidunt, tempore, officia, ipsum et nulla asperiores libero provident non sit exercitationem neque magnam repudiandae eius eligendi consectetur eum! Ipsum vero dolor repudiandae aliquam illo autem odio nesciunt labore. Nulla repudiandae dolorem amet consequuntur consectetur.</p>
 67 |             </div>
 68 |             <div class="item">
 69 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, harum, officia, tenetur nam mollitia sed quia animi veniam molestiae illo magnam aliquam eligendi delectus. Accusantium, nostrum, quidem, excepturi, consequuntur facere praesentium odio deserunt ipsam magnam accusamus eveniet ab vero dolores repellat dolorem delectus pariatur repudiandae recusandae provident dolore nesciunt quasi!</p>
 70 |                 <img src="http://hhhhold.com/l?de345" alt="">
 71 |             </div>
 72 |             <div class="item">
 73 |                 <img src="http://hhhhold.com/l?g545" alt="">
 74 |             </div>
 75 |             <div class="item">
 76 |                 <img src="http://hhhhold.com/l?55" alt="">
 77 |             </div>
 78 |             <div class="item">
 79 |                 <img src="http://hhhhold.com/l?5r5" alt="">
 80 |             </div>
 81 |             <div class="item">
 82 |                 <img src="http://hhhhold.com/l?5745" alt="">
 83 |             </div>
 84 |             <div class="item">
 85 |                 <img src="http://hhhhold.com/l?5p4" alt="">
 86 |             </div>
 87 |             <div class="item">
 88 |                 <img src="http://hhhhold.com/l?522p4" alt="">
 89 |             </div>
 90 |             <div class="item">
 91 |                 <img src="http://hhhhold.com/l?5phh4" alt="">
 92 |             </div>
 93 |             <div class="item">
 94 |                 <img src="http://hhhhold.com/l?577p4" alt="">
 95 |             </div>
 96 |         </div>
 97 |         <div class="footer">
 98 |           <a href="http://salvattore.com/" target="_blank">Website</a> |
 99 |           <a href="http://twitter.com/salvattorejs" target="_blank">Twitter</a> |
100 |           Made by <a href="http://rolandomurillo.com/" target="_blank">Rolando Murillo</a>
101 |           and <a href="http://github.com/ppold" target="_blank">Giorgio Leveroni.</a>
102 |         </div>
103 | 
104 |         <!-- The script must be included at the bottom of the body to work -->
105 |         <script src="../dist/salvattore.min.js"></script>
106 |     </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/examples/styles.css:
--------------------------------------------------------------------------------
 1 | /* Styles for example pages */
 2 | * {
 3 |     -webkit-box-sizing: border-box;
 4 |     -moz-box-sizing: border-box;
 5 |     -ms-box-sizing: border-box;
 6 |     box-sizing: border-box;
 7 | }
 8 | 
 9 | img,object,embed {
10 |     display: block;
11 |     max-width: 100%;
12 | }
13 | 
14 | /* Base colors
15 |  * #E9632F Orange
16 |  * #F6CDB9 Orange light
17 |  * #3A180B Dark
18 |  * #743115 Mid
19 |  * #FFF    White
20 |  */
21 | body {
22 |     max-width: 1050px;
23 |     margin: 0 auto;
24 |     font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
25 |     font-size: 100%;
26 |     line-height: 1.4em;
27 |     background: #E9632F;
28 |     color: #FFF;
29 | }
30 | 
31 | p {
32 |     padding: 1em;
33 |     background: #743115;
34 |     font-size: 1em;
35 |     margin: 0;
36 | }
37 | 
38 | h1 {
39 |     font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
40 |     font-size: 4.5em;
41 |     font-weight: bold;
42 |     letter-spacing: 0.05em;
43 |     line-height: 1.5em;
44 |     text-transform: uppercase;
45 |     text-align: center;
46 |     margin: 0;
47 | }
48 | 
49 | h1 small {
50 |     text-transform: none;
51 |     font-weight: normal;
52 |     font-size: 0.5em;
53 |     letter-spacing: normal;
54 |     font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
55 | }
56 | 
57 | #timeline {
58 |     -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.2);
59 |     box-shadow: 0 0 12px rgba(0,0,0,0.2);
60 |     overflow: hidden;
61 | }
62 | 
63 | .footer {
64 |     font-size: 1em;
65 |     color: #FFF;
66 |     margin: 0.5em;
67 | }
68 | 
69 | .footer a {
70 |     color: #FFF;
71 |     text-decoration: underline;
72 |     font-weight: bold;
73 | }
74 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 |     umd = require('gulp-umd'),
 3 |     concat = require('gulp-concat'),
 4 |     jshint = require('gulp-jshint'),
 5 |     uglify = require('gulp-uglify'),
 6 |     stylish = require('jshint-stylish'),
 7 |     header = require('gulp-header'),
 8 |     rename = require('gulp-rename'),
 9 |     package = require('./package.json'),
10 |     size = require('gulp-size'),
11 |     banner = [
12 |         '/*!',
13 |         ' * Salvattore <%= pkg.version %> by @rnmp and @ppold',
14 |         ' * <%= pkg.repository.url %>',
15 |         ' */\n'
16 |     ].join('\n');
17 | 
18 | gulp.task('default', function() {
19 |     return gulp.src(['src/polyfills/matchMedia.js',
20 |                     'src/polyfills/matchMedia.addListener.js',
21 |                     'src/polyfills/requestAnimationFrame.js',
22 |                     'src/polyfills/customEvent.js',
23 |                     'src/*.js'])
24 |         .pipe(jshint({
25 |             laxcomma: true,
26 |             strict: true
27 |         }))
28 |         .pipe(jshint.reporter(stylish))
29 |         .pipe(concat(package.name + '.js'))
30 |         .pipe(umd({
31 |             exports: function(file) {
32 |                 return package.name;
33 |             },
34 |             namespace: function(file) {
35 |                 return package.name;
36 |             }
37 |         }))
38 |         .pipe(header(banner, {pkg: package}))
39 |         .pipe(gulp.dest('dist/'))
40 |         .pipe(uglify({preserveComments: 'some'}))
41 |         .pipe(rename({suffix: '.min'}))
42 |         .pipe(size({showFiles: true, gzip: true}))
43 |         .pipe(gulp.dest('dist/'));
44 | });
45 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = function (config) {
 4 |   config.set({
 5 |     frameworks: [
 6 |       'mocha',
 7 |       'expect',
 8 |       'fixture'
 9 |     ],
10 | 
11 |     files: [
12 |       'dist/salvattore.js',
13 |       'tests/salvattore.test.js',
14 |       {
15 |         pattern: 'tests/*.html'
16 |       }
17 |     ],
18 | 
19 |     reporters: ['mocha'],
20 | 
21 |     preprocessors: {
22 |       'tests/*.html': ['html2js']
23 |     }
24 |   });
25 | };
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "salvattore",
 3 |   "version": "1.0.9",
 4 |   "description": "A jQuery Masonry alternative with CSS-driven configuration",
 5 |   "homepage": "http://salvattore.com/",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/rnmp/salvattore"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/rnmp/salvattore/issues"
12 |   },
13 |   "license": "MIT",
14 |   "author": {
15 |     "name": "Rolando Murillo",
16 |     "email": "rolando@bandd.co",
17 |     "homepage": "http://rolandomurillo.com/"
18 |   },
19 |   "contributors": [
20 |     {
21 |       "name": "Giorgio Leveroni",
22 |       "email": "giorgio.m.leveroni@gmail.com"
23 |     }
24 |   ],
25 |   "keywords": [
26 |     "grid",
27 |     "layout",
28 |     "browser",
29 |     "masonry"
30 |   ],
31 |   "main": "./dist/salvattore.js",
32 |   "directories": {
33 |     "example": "examples"
34 |   },
35 |   "scripts": {
36 |     "test": "./node_modules/karma/bin/karma start --single-run --browsers PhantomJS"
37 |   },
38 |   "dependencies": {},
39 |   "devDependencies": {
40 |     "gulp": "^3.8.10",
41 |     "gulp-concat": "^2.4.2",
42 |     "gulp-header": "^1.2.2",
43 |     "gulp-jshint": "^1.9.0",
44 |     "gulp-rename": "^1.2.0",
45 |     "gulp-size": "^1.2.3",
46 |     "gulp-uglify": "^1.0.2",
47 |     "gulp-umd": "^0.1.3",
48 |     "jshint-stylish": "^2.0.0",
49 |     "karma": "^0.13.1",
50 |     "karma-expect": "^1.1.0",
51 |     "karma-fixture": "^0.2.5",
52 |     "karma-html2js-preprocessor": "^0.1.0",
53 |     "karma-mocha": "^0.1.10",
54 |     "karma-mocha-reporter": "^1.0.2",
55 |     "karma-phantomjs-launcher": "^0.1.4",
56 |     "mocha": "^2.3.3"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/polyfills/customEvent.js:
--------------------------------------------------------------------------------
 1 | // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
 2 | 
 3 | if (typeof window.CustomEvent !== "function") {
 4 |   (function() {
 5 |     "use strict";
 6 |     function CustomEvent(event, params) {
 7 |       params = params || { bubbles: false, cancelable: false, detail: undefined };
 8 |       var evt = document.createEvent('CustomEvent');
 9 |       evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
10 |       return evt;
11 |      }
12 | 
13 |     CustomEvent.prototype = window.Event.prototype;
14 | 
15 |     window.CustomEvent = CustomEvent;
16 |   })();
17 | }
18 | 


--------------------------------------------------------------------------------
/src/polyfills/matchMedia.addListener.js:
--------------------------------------------------------------------------------
 1 | /*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
 2 | (function(){
 3 |     "use strict";
 4 | 
 5 |     // Bail out for browsers that have addListener support
 6 |     if (window.matchMedia && window.matchMedia('all').addListener) {
 7 |         return false;
 8 |     }
 9 | 
10 |     var localMatchMedia = window.matchMedia,
11 |         hasMediaQueries = localMatchMedia('only all').matches,
12 |         isListening     = false,
13 |         timeoutID       = 0,    // setTimeout for debouncing 'handleChange'
14 |         queries         = [],   // Contains each 'mql' and associated 'listeners' if 'addListener' is used
15 |         handleChange    = function(evt) {
16 |             // Debounce
17 |             clearTimeout(timeoutID);
18 | 
19 |             timeoutID = setTimeout(function() {
20 |                 for (var i = 0, il = queries.length; i < il; i++) {
21 |                     var mql         = queries[i].mql,
22 |                         listeners   = queries[i].listeners || [],
23 |                         matches     = localMatchMedia(mql.media).matches;
24 | 
25 |                     // Update mql.matches value and call listeners
26 |                     // Fire listeners only if transitioning to or from matched state
27 |                     if (matches !== mql.matches) {
28 |                         mql.matches = matches;
29 | 
30 |                         for (var j = 0, jl = listeners.length; j < jl; j++) {
31 |                             listeners[j].call(window, mql);
32 |                         }
33 |                     }
34 |                 }
35 |             }, 30);
36 |         };
37 | 
38 |     window.matchMedia = function(media) {
39 |         var mql         = localMatchMedia(media),
40 |             listeners   = [],
41 |             index       = 0;
42 | 
43 |         mql.addListener = function(listener) {
44 |             // Changes would not occur to css media type so return now (Affects IE <= 8)
45 |             if (!hasMediaQueries) {
46 |                 return;
47 |             }
48 | 
49 |             // Set up 'resize' listener for browsers that support CSS3 media queries (Not for IE <= 8)
50 |             // There should only ever be 1 resize listener running for performance
51 |             if (!isListening) {
52 |                 isListening = true;
53 |                 window.addEventListener('resize', handleChange, true);
54 |             }
55 | 
56 |             // Push object only if it has not been pushed already
57 |             if (index === 0) {
58 |                 index = queries.push({
59 |                     mql         : mql,
60 |                     listeners   : listeners
61 |                 });
62 |             }
63 | 
64 |             listeners.push(listener);
65 |         };
66 | 
67 |         mql.removeListener = function(listener) {
68 |             for (var i = 0, il = listeners.length; i < il; i++){
69 |                 if (listeners[i] === listener){
70 |                     listeners.splice(i, 1);
71 |                 }
72 |             }
73 |         };
74 | 
75 |         return mql;
76 |     };
77 | }());
78 | 


--------------------------------------------------------------------------------
/src/polyfills/matchMedia.js:
--------------------------------------------------------------------------------
 1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
 2 | 
 3 | if (!window.matchMedia) {
 4 |     window.matchMedia = function() {
 5 |         "use strict";
 6 | 
 7 |         // For browsers that support matchMedium api such as IE 9 and webkit
 8 |         var styleMedia = (window.styleMedia || window.media);
 9 | 
10 |         // For those that don't support matchMedium
11 |         if (!styleMedia) {
12 |             var style       = document.createElement('style'),
13 |                 script      = document.getElementsByTagName('script')[0],
14 |                 info        = null;
15 | 
16 |             style.type  = 'text/css';
17 |             style.id    = 'matchmediajs-test';
18 | 
19 |             script.parentNode.insertBefore(style, script);
20 | 
21 |             // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
22 |             info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
23 | 
24 |             styleMedia = {
25 |                 matchMedium: function(media) {
26 |                     var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
27 | 
28 |                     // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
29 |                     if (style.styleSheet) {
30 |                         style.styleSheet.cssText = text;
31 |                     } else {
32 |                         style.textContent = text;
33 |                     }
34 | 
35 |                     // Test if media query is true or false
36 |                     return info.width === '1px';
37 |                 }
38 |             };
39 |         }
40 | 
41 |         return function(media) {
42 |             return {
43 |                 matches: styleMedia.matchMedium(media || 'all'),
44 |                 media: media || 'all'
45 |             };
46 |         };
47 |     }();
48 | }
49 | 


--------------------------------------------------------------------------------
/src/polyfills/requestAnimationFrame.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 5 | 
 6 | // MIT license
 7 | 
 8 | (function() {
 9 |     "use strict";
10 | 
11 |     var lastTime = 0;
12 |     var vendors = ['ms', 'moz', 'webkit', 'o'];
13 |     for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
14 |         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
16 |             window[vendors[x]+'CancelRequestAnimationFrame'];
17 |     }
18 | 
19 |     if (!window.requestAnimationFrame)
20 |         window.requestAnimationFrame = function(callback, element) {
21 |             var currTime = new Date().getTime();
22 |             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
24 |               timeToCall);
25 |             lastTime = currTime + timeToCall;
26 |             return id;
27 |         };
28 | 
29 |     if (!window.cancelAnimationFrame)
30 |         window.cancelAnimationFrame = function(id) {
31 |             clearTimeout(id);
32 |         };
33 | }());
34 | 


--------------------------------------------------------------------------------
/src/salvattore.js:
--------------------------------------------------------------------------------
  1 | /* jshint laxcomma: true */
  2 | var salvattore = (function (global, document, undefined) {
  3 | "use strict";
  4 | 
  5 | var self = {},
  6 |     grids = [],
  7 |     mediaRules = [],
  8 |     mediaQueries = [],
  9 |     add_to_dataset = function(element, key, value) {
 10 |       // uses dataset function or a fallback for <ie10
 11 |       if (element.dataset) {
 12 |         element.dataset[key] = value;
 13 |       } else {
 14 |         element.setAttribute("data-" + key, value);
 15 |       }
 16 |       return;
 17 |     };
 18 | 
 19 | self.obtainGridSettings = function obtainGridSettings(element) {
 20 |   // returns the number of columns and the classes a column should have,
 21 |   // from computing the style of the ::before pseudo-element of the grid.
 22 | 
 23 |   var computedStyle = global.getComputedStyle(element, ":before")
 24 |     , content = computedStyle.getPropertyValue("content").slice(1, -1)
 25 |     , matchResult = content.match(/^\s*(\d+)(?:\s?\.(.+))?\s*$/)
 26 |     , numberOfColumns = 1
 27 |     , columnClasses = []
 28 |   ;
 29 | 
 30 |   if (matchResult) {
 31 |     numberOfColumns = matchResult[1];
 32 |     columnClasses = matchResult[2];
 33 |     columnClasses = columnClasses? columnClasses.split(".") : ["column"];
 34 |   } else {
 35 |     matchResult = content.match(/^\s*\.(.+)\s+(\d+)\s*$/);
 36 |     if (matchResult) {
 37 |       columnClasses = matchResult[1];
 38 |       numberOfColumns = matchResult[2];
 39 |       if (numberOfColumns) {
 40 |             numberOfColumns = numberOfColumns.split(".");
 41 |       }
 42 |     }
 43 |   }
 44 | 
 45 |   return {
 46 |     numberOfColumns: numberOfColumns,
 47 |     columnClasses: columnClasses
 48 |   };
 49 | };
 50 | 
 51 | 
 52 | self.addColumns = function addColumns(grid, items) {
 53 |   // from the settings obtained, it creates columns with
 54 |   // the configured classes and adds to them a list of items.
 55 | 
 56 |   var settings = self.obtainGridSettings(grid)
 57 |     , numberOfColumns = settings.numberOfColumns
 58 |     , columnClasses = settings.columnClasses
 59 |     , columnsItems = new Array(+numberOfColumns)
 60 |     , columnsFragment = document.createDocumentFragment()
 61 |     , i = numberOfColumns
 62 |     , selector
 63 |   ;
 64 | 
 65 |   while (i-- !== 0) {
 66 |     selector = "[data-columns] > *:nth-child(" + numberOfColumns + "n-" + i + ")";
 67 |     columnsItems.push(items.querySelectorAll(selector));
 68 |   }
 69 | 
 70 |   columnsItems.forEach(function append_to_grid_fragment(rows) {
 71 |     var column = document.createElement("div")
 72 |       , rowsFragment = document.createDocumentFragment()
 73 |     ;
 74 | 
 75 |     column.className = columnClasses.join(" ");
 76 | 
 77 |     Array.prototype.forEach.call(rows, function append_to_column(row) {
 78 |       rowsFragment.appendChild(row);
 79 |     });
 80 |     column.appendChild(rowsFragment);
 81 |     columnsFragment.appendChild(column);
 82 |   });
 83 | 
 84 |   grid.appendChild(columnsFragment);
 85 |   add_to_dataset(grid, 'columns', numberOfColumns);
 86 | };
 87 | 
 88 | 
 89 | self.removeColumns = function removeColumns(grid) {
 90 |   // removes all the columns from a grid, and returns a list
 91 |   // of items sorted by the ordering of columns.
 92 | 
 93 |   var range = document.createRange();
 94 |   range.selectNodeContents(grid);
 95 | 
 96 |   var columns = Array.prototype.filter.call(range.extractContents().childNodes, function filter_elements(node) {
 97 |     return node instanceof global.HTMLElement;
 98 |   });
 99 | 
100 |   var numberOfColumns = columns.length
101 |     , numberOfRowsInFirstColumn = columns[0].childNodes.length
102 |     , sortedRows = new Array(numberOfRowsInFirstColumn * numberOfColumns)
103 |   ;
104 | 
105 |   Array.prototype.forEach.call(columns, function iterate_columns(column, columnIndex) {
106 |     Array.prototype.forEach.call(column.children, function iterate_rows(row, rowIndex) {
107 |       sortedRows[rowIndex * numberOfColumns + columnIndex] = row;
108 |     });
109 |   });
110 | 
111 |   var container = document.createElement("div");
112 |   add_to_dataset(container, 'columns', 0);
113 | 
114 |   sortedRows.filter(function filter_non_null(child) {
115 |     return !!child;
116 |   }).forEach(function append_row(child) {
117 |     container.appendChild(child);
118 |   });
119 | 
120 |   return container;
121 | };
122 | 
123 | 
124 | self.recreateColumns = function recreateColumns(grid) {
125 |   // removes all the columns from the grid, and adds them again,
126 |   // it is used when the number of columns change.
127 | 
128 |   global.requestAnimationFrame(function render_after_css_mediaQueryChange() {
129 |     self.addColumns(grid, self.removeColumns(grid));
130 |     var columnsChange = new CustomEvent("columnsChange");
131 |     grid.dispatchEvent(columnsChange);
132 |   });
133 | };
134 | 
135 | 
136 | self.mediaQueryChange = function mediaQueryChange(mql) {
137 |   // recreates the columns when a media query matches the current state
138 |   // of the browser.
139 | 
140 |   if (mql.matches) {
141 |     Array.prototype.forEach.call(grids, self.recreateColumns);
142 |   }
143 | };
144 | 
145 | 
146 | self.getCSSRules = function getCSSRules(stylesheet) {
147 |   // returns a list of css rules from a stylesheet
148 | 
149 |   var cssRules;
150 |   try {
151 |     cssRules = stylesheet.sheet.cssRules || stylesheet.sheet.rules;
152 |   } catch (e) {
153 |     return [];
154 |   }
155 | 
156 |   return cssRules || [];
157 | };
158 | 
159 | 
160 | self.getStylesheets = function getStylesheets() {
161 |   // returns a list of all the styles in the document (that are accessible).
162 | 
163 |   var inlineStyleBlocks = Array.prototype.slice.call(document.querySelectorAll("style"));
164 |   inlineStyleBlocks.forEach(function(stylesheet, idx) {
165 |     if (stylesheet.type !== 'text/css' && stylesheet.type !== '') {
166 |       inlineStyleBlocks.splice(idx, 1);
167 |     }
168 |   });
169 | 
170 |   return Array.prototype.concat.call(
171 |     inlineStyleBlocks,
172 |     Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))
173 |   );
174 | };
175 | 
176 | 
177 | self.mediaRuleHasColumnsSelector = function mediaRuleHasColumnsSelector(rules) {
178 |   // checks if a media query css rule has in its contents a selector that
179 |   // styles the grid.
180 | 
181 |   var i, rule;
182 | 
183 |   try {
184 |     i = rules.length;
185 |   }
186 |   catch (e) {
187 |     i = 0;
188 |   }
189 | 
190 |   while (i--) {
191 |     rule = rules[i];
192 |     if (rule.selectorText && rule.selectorText.match(/\[data-columns\](.*)::?before$/)) {
193 |       return true;
194 |     }
195 |   }
196 | 
197 |   return false;
198 | };
199 | 
200 | 
201 | self.scanMediaQueries = function scanMediaQueries() {
202 |   // scans all the stylesheets for selectors that style grids,
203 |   // if the matchMedia API is supported.
204 | 
205 |   var newMediaRules = [];
206 | 
207 |   if (!global.matchMedia) {
208 |     return;
209 |   }
210 | 
211 |   self.getStylesheets().forEach(function extract_rules(stylesheet) {
212 |     Array.prototype.forEach.call(self.getCSSRules(stylesheet), function filter_by_column_selector(rule) {
213 |       // rule.media throws an 'not implemented error' in ie9 for import rules occasionally
214 |       try {
215 |         if (rule.media && rule.cssRules && self.mediaRuleHasColumnsSelector(rule.cssRules)) {
216 |           newMediaRules.push(rule);
217 |         }
218 |       } catch (e) {}
219 |     });
220 |   });
221 | 
222 |   // remove matchMedia listeners from the old rules
223 |   var oldRules = mediaRules.filter(function (el) {
224 |       return newMediaRules.indexOf(el) === -1;
225 |   });
226 |   mediaQueries.filter(function (el) {
227 |     return oldRules.indexOf(el.rule) !== -1;
228 |   }).forEach(function (el) {
229 |       el.mql.removeListener(self.mediaQueryChange);
230 |   });
231 |   mediaQueries = mediaQueries.filter(function (el) {
232 |     return oldRules.indexOf(el.rule) === -1;
233 |   });
234 | 
235 |   // add matchMedia listeners to the new rules
236 |   newMediaRules.filter(function (el) {
237 |     return mediaRules.indexOf(el) == -1;
238 |   }).forEach(function (rule) {
239 |       var mql = global.matchMedia(rule.media.mediaText);
240 |       mql.addListener(self.mediaQueryChange);
241 |       mediaQueries.push({rule: rule, mql:mql});
242 |   });
243 | 
244 |   // swap mediaRules with the new set
245 |   mediaRules.length = 0;
246 |   mediaRules = newMediaRules;
247 | };
248 | 
249 | 
250 | self.rescanMediaQueries = function rescanMediaQueries() {
251 |     self.scanMediaQueries();
252 |     Array.prototype.forEach.call(grids, self.recreateColumns);
253 | };
254 | 
255 | 
256 | self.nextElementColumnIndex = function nextElementColumnIndex(grid, fragments) {
257 |   // returns the index of the column where the given element must be added.
258 | 
259 |   var children = grid.children
260 |     , m = children.length
261 |     , lowestRowCount = 0
262 |     , child
263 |     , currentRowCount
264 |     , i
265 |     , index = 0
266 |   ;
267 |   for (i = 0; i < m; i++) {
268 |     child = children[i];
269 |     currentRowCount = child.children.length + (fragments[i].children || fragments[i].childNodes).length;
270 |   if(lowestRowCount === 0) {
271 |     lowestRowCount = currentRowCount;
272 |   }
273 |     if(currentRowCount < lowestRowCount) {
274 |       index = i;
275 |       lowestRowCount = currentRowCount;
276 |     }
277 |   }
278 | 
279 |   return index;
280 | };
281 | 
282 | 
283 | self.createFragmentsList = function createFragmentsList(quantity) {
284 |   // returns a list of fragments
285 | 
286 |   var fragments = new Array(quantity)
287 |     , i = 0
288 |   ;
289 | 
290 |   while (i !== quantity) {
291 |     fragments[i] = document.createDocumentFragment();
292 |     i++;
293 |   }
294 | 
295 |   return fragments;
296 | };
297 | 
298 | 
299 | self.appendElements = function appendElements(grid, elements) {
300 |   // adds a list of elements to the end of a grid
301 | 
302 |   var columns = grid.children
303 |     , numberOfColumns = columns.length
304 |     , fragments = self.createFragmentsList(numberOfColumns)
305 |   ;
306 | 
307 |   Array.prototype.forEach.call(elements, function append_to_next_fragment(element) {
308 |     var columnIndex = self.nextElementColumnIndex(grid, fragments);
309 |     fragments[columnIndex].appendChild(element);
310 |   });
311 | 
312 |   Array.prototype.forEach.call(columns, function insert_column(column, index) {
313 |     column.appendChild(fragments[index]);
314 |   });
315 | };
316 | 
317 | 
318 | self.prependElements = function prependElements(grid, elements) {
319 |   // adds a list of elements to the start of a grid
320 | 
321 |   var columns = grid.children
322 |     , numberOfColumns = columns.length
323 |     , fragments = self.createFragmentsList(numberOfColumns)
324 |     , columnIndex = numberOfColumns - 1
325 |   ;
326 | 
327 |   elements.forEach(function append_to_next_fragment(element) {
328 |     var fragment = fragments[columnIndex];
329 |     fragment.insertBefore(element, fragment.firstChild);
330 |     if (columnIndex === 0) {
331 |       columnIndex = numberOfColumns - 1;
332 |     } else {
333 |       columnIndex--;
334 |     }
335 |   });
336 | 
337 |   Array.prototype.forEach.call(columns, function insert_column(column, index) {
338 |     column.insertBefore(fragments[index], column.firstChild);
339 |   });
340 | 
341 |   // populates a fragment with n columns till the right
342 |   var fragment = document.createDocumentFragment()
343 |     , numberOfColumnsToExtract = elements.length % numberOfColumns
344 |   ;
345 | 
346 |   while (numberOfColumnsToExtract-- !== 0) {
347 |     fragment.appendChild(grid.lastChild);
348 |   }
349 | 
350 |   // adds the fragment to the left
351 |   grid.insertBefore(fragment, grid.firstChild);
352 | };
353 | 
354 | 
355 | self.registerGrid = function registerGrid (grid) {
356 |   if (global.getComputedStyle(grid).display === "none") {
357 |     return;
358 |   }
359 | 
360 |   // retrieve the list of items from the grid itself
361 |   var range = document.createRange();
362 |   range.selectNodeContents(grid);
363 | 
364 |   var items = document.createElement("div");
365 |   items.appendChild(range.extractContents());
366 | 
367 | 
368 |   add_to_dataset(items, 'columns', 0);
369 |   self.addColumns(grid, items);
370 |   grids.push(grid);
371 | };
372 | 
373 | 
374 | self.init = function init() {
375 |   // adds required CSS rule to hide 'content' based
376 |   // configuration.
377 | 
378 |   var css = document.createElement("style");
379 |   css.innerHTML = "[data-columns]::before{display:block;visibility:hidden;position:absolute;font-size:1px;}";
380 |   document.head.appendChild(css);
381 | 
382 |   // scans all the grids in the document and generates
383 |   // columns from their configuration.
384 | 
385 |   var gridElements = document.querySelectorAll("[data-columns]");
386 |   Array.prototype.forEach.call(gridElements, self.registerGrid);
387 |   self.scanMediaQueries();
388 | };
389 | 
390 | self.init();
391 | 
392 | return {
393 |   appendElements: self.appendElements,
394 |   prependElements: self.prependElements,
395 |   registerGrid: self.registerGrid,
396 |   recreateColumns: self.recreateColumns,
397 |   rescanMediaQueries: self.rescanMediaQueries,
398 |   init: self.init,
399 | 
400 |   // maintains backwards compatibility with underscore style method names
401 |   append_elements: self.appendElements,
402 |   prepend_elements: self.prependElements,
403 |   register_grid: self.registerGrid,
404 |   recreate_columns: self.recreateColumns,
405 |   rescan_media_queries: self.rescanMediaQueries
406 | };
407 | 
408 | })(window, window.document);
409 | 


--------------------------------------------------------------------------------
/tests/resources/expect.js-0.3.1.js:
--------------------------------------------------------------------------------
   1 | (function (global, module) {
   2 | 
   3 |   var exports = module.exports;
   4 | 
   5 |   /**
   6 |    * Exports.
   7 |    */
   8 | 
   9 |   module.exports = expect;
  10 |   expect.Assertion = Assertion;
  11 | 
  12 |   /**
  13 |    * Exports version.
  14 |    */
  15 | 
  16 |   expect.version = '0.3.1';
  17 | 
  18 |   /**
  19 |    * Possible assertion flags.
  20 |    */
  21 | 
  22 |   var flags = {
  23 |       not: ['to', 'be', 'have', 'include', 'only']
  24 |     , to: ['be', 'have', 'include', 'only', 'not']
  25 |     , only: ['have']
  26 |     , have: ['own']
  27 |     , be: ['an']
  28 |   };
  29 | 
  30 |   function expect (obj) {
  31 |     return new Assertion(obj);
  32 |   }
  33 | 
  34 |   /**
  35 |    * Constructor
  36 |    *
  37 |    * @api private
  38 |    */
  39 | 
  40 |   function Assertion (obj, flag, parent) {
  41 |     this.obj = obj;
  42 |     this.flags = {};
  43 | 
  44 |     if (undefined != parent) {
  45 |       this.flags[flag] = true;
  46 | 
  47 |       for (var i in parent.flags) {
  48 |         if (parent.flags.hasOwnProperty(i)) {
  49 |           this.flags[i] = true;
  50 |         }
  51 |       }
  52 |     }
  53 | 
  54 |     var $flags = flag ? flags[flag] : keys(flags)
  55 |       , self = this;
  56 | 
  57 |     if ($flags) {
  58 |       for (var i = 0, l = $flags.length; i < l; i++) {
  59 |         // avoid recursion
  60 |         if (this.flags[$flags[i]]) continue;
  61 | 
  62 |         var name = $flags[i]
  63 |           , assertion = new Assertion(this.obj, name, this)
  64 | 
  65 |         if ('function' == typeof Assertion.prototype[name]) {
  66 |           // clone the function, make sure we dont touch the prot reference
  67 |           var old = this[name];
  68 |           this[name] = function () {
  69 |             return old.apply(self, arguments);
  70 |           };
  71 | 
  72 |           for (var fn in Assertion.prototype) {
  73 |             if (Assertion.prototype.hasOwnProperty(fn) && fn != name) {
  74 |               this[name][fn] = bind(assertion[fn], assertion);
  75 |             }
  76 |           }
  77 |         } else {
  78 |           this[name] = assertion;
  79 |         }
  80 |       }
  81 |     }
  82 |   }
  83 | 
  84 |   /**
  85 |    * Performs an assertion
  86 |    *
  87 |    * @api private
  88 |    */
  89 | 
  90 |   Assertion.prototype.assert = function (truth, msg, error, expected) {
  91 |     var msg = this.flags.not ? error : msg
  92 |       , ok = this.flags.not ? !truth : truth
  93 |       , err;
  94 | 
  95 |     if (!ok) {
  96 |       err = new Error(msg.call(this));
  97 |       if (arguments.length > 3) {
  98 |         err.actual = this.obj;
  99 |         err.expected = expected;
 100 |         err.showDiff = true;
 101 |       }
 102 |       throw err;
 103 |     }
 104 | 
 105 |     this.and = new Assertion(this.obj);
 106 |   };
 107 | 
 108 |   /**
 109 |    * Check if the value is truthy
 110 |    *
 111 |    * @api public
 112 |    */
 113 | 
 114 |   Assertion.prototype.ok = function () {
 115 |     this.assert(
 116 |         !!this.obj
 117 |       , function(){ return 'expected ' + i(this.obj) + ' to be truthy' }
 118 |       , function(){ return 'expected ' + i(this.obj) + ' to be falsy' });
 119 |   };
 120 | 
 121 |   /**
 122 |    * Creates an anonymous function which calls fn with arguments.
 123 |    *
 124 |    * @api public
 125 |    */
 126 | 
 127 |   Assertion.prototype.withArgs = function() {
 128 |     expect(this.obj).to.be.a('function');
 129 |     var fn = this.obj;
 130 |     var args = Array.prototype.slice.call(arguments);
 131 |     return expect(function() { fn.apply(null, args); });
 132 |   };
 133 | 
 134 |   /**
 135 |    * Assert that the function throws.
 136 |    *
 137 |    * @param {Function|RegExp} callback, or regexp to match error string against
 138 |    * @api public
 139 |    */
 140 | 
 141 |   Assertion.prototype.throwError =
 142 |   Assertion.prototype.throwException = function (fn) {
 143 |     expect(this.obj).to.be.a('function');
 144 | 
 145 |     var thrown = false
 146 |       , not = this.flags.not;
 147 | 
 148 |     try {
 149 |       this.obj();
 150 |     } catch (e) {
 151 |       if (isRegExp(fn)) {
 152 |         var subject = 'string' == typeof e ? e : e.message;
 153 |         if (not) {
 154 |           expect(subject).to.not.match(fn);
 155 |         } else {
 156 |           expect(subject).to.match(fn);
 157 |         }
 158 |       } else if ('function' == typeof fn) {
 159 |         fn(e);
 160 |       }
 161 |       thrown = true;
 162 |     }
 163 | 
 164 |     if (isRegExp(fn) && not) {
 165 |       // in the presence of a matcher, ensure the `not` only applies to
 166 |       // the matching.
 167 |       this.flags.not = false;
 168 |     }
 169 | 
 170 |     var name = this.obj.name || 'fn';
 171 |     this.assert(
 172 |         thrown
 173 |       , function(){ return 'expected ' + name + ' to throw an exception' }
 174 |       , function(){ return 'expected ' + name + ' not to throw an exception' });
 175 |   };
 176 | 
 177 |   /**
 178 |    * Checks if the array is empty.
 179 |    *
 180 |    * @api public
 181 |    */
 182 | 
 183 |   Assertion.prototype.empty = function () {
 184 |     var expectation;
 185 | 
 186 |     if ('object' == typeof this.obj && null !== this.obj && !isArray(this.obj)) {
 187 |       if ('number' == typeof this.obj.length) {
 188 |         expectation = !this.obj.length;
 189 |       } else {
 190 |         expectation = !keys(this.obj).length;
 191 |       }
 192 |     } else {
 193 |       if ('string' != typeof this.obj) {
 194 |         expect(this.obj).to.be.an('object');
 195 |       }
 196 | 
 197 |       expect(this.obj).to.have.property('length');
 198 |       expectation = !this.obj.length;
 199 |     }
 200 | 
 201 |     this.assert(
 202 |         expectation
 203 |       , function(){ return 'expected ' + i(this.obj) + ' to be empty' }
 204 |       , function(){ return 'expected ' + i(this.obj) + ' to not be empty' });
 205 |     return this;
 206 |   };
 207 | 
 208 |   /**
 209 |    * Checks if the obj exactly equals another.
 210 |    *
 211 |    * @api public
 212 |    */
 213 | 
 214 |   Assertion.prototype.be =
 215 |   Assertion.prototype.equal = function (obj) {
 216 |     this.assert(
 217 |         obj === this.obj
 218 |       , function(){ return 'expected ' + i(this.obj) + ' to equal ' + i(obj) }
 219 |       , function(){ return 'expected ' + i(this.obj) + ' to not equal ' + i(obj) });
 220 |     return this;
 221 |   };
 222 | 
 223 |   /**
 224 |    * Checks if the obj sortof equals another.
 225 |    *
 226 |    * @api public
 227 |    */
 228 | 
 229 |   Assertion.prototype.eql = function (obj) {
 230 |     this.assert(
 231 |         expect.eql(this.obj, obj)
 232 |       , function(){ return 'expected ' + i(this.obj) + ' to sort of equal ' + i(obj) }
 233 |       , function(){ return 'expected ' + i(this.obj) + ' to sort of not equal ' + i(obj) }
 234 |       , obj);
 235 |     return this;
 236 |   };
 237 | 
 238 |   /**
 239 |    * Assert within start to finish (inclusive).
 240 |    *
 241 |    * @param {Number} start
 242 |    * @param {Number} finish
 243 |    * @api public
 244 |    */
 245 | 
 246 |   Assertion.prototype.within = function (start, finish) {
 247 |     var range = start + '..' + finish;
 248 |     this.assert(
 249 |         this.obj >= start && this.obj <= finish
 250 |       , function(){ return 'expected ' + i(this.obj) + ' to be within ' + range }
 251 |       , function(){ return 'expected ' + i(this.obj) + ' to not be within ' + range });
 252 |     return this;
 253 |   };
 254 | 
 255 |   /**
 256 |    * Assert typeof / instance of
 257 |    *
 258 |    * @api public
 259 |    */
 260 | 
 261 |   Assertion.prototype.a =
 262 |   Assertion.prototype.an = function (type) {
 263 |     if ('string' == typeof type) {
 264 |       // proper english in error msg
 265 |       var n = /^[aeiou]/.test(type) ? 'n' : '';
 266 | 
 267 |       // typeof with support for 'array'
 268 |       this.assert(
 269 |           'array' == type ? isArray(this.obj) :
 270 |             'regexp' == type ? isRegExp(this.obj) :
 271 |               'object' == type
 272 |                 ? 'object' == typeof this.obj && null !== this.obj
 273 |                 : type == typeof this.obj
 274 |         , function(){ return 'expected ' + i(this.obj) + ' to be a' + n + ' ' + type }
 275 |         , function(){ return 'expected ' + i(this.obj) + ' not to be a' + n + ' ' + type });
 276 |     } else {
 277 |       // instanceof
 278 |       var name = type.name || 'supplied constructor';
 279 |       this.assert(
 280 |           this.obj instanceof type
 281 |         , function(){ return 'expected ' + i(this.obj) + ' to be an instance of ' + name }
 282 |         , function(){ return 'expected ' + i(this.obj) + ' not to be an instance of ' + name });
 283 |     }
 284 | 
 285 |     return this;
 286 |   };
 287 | 
 288 |   /**
 289 |    * Assert numeric value above _n_.
 290 |    *
 291 |    * @param {Number} n
 292 |    * @api public
 293 |    */
 294 | 
 295 |   Assertion.prototype.greaterThan =
 296 |   Assertion.prototype.above = function (n) {
 297 |     this.assert(
 298 |         this.obj > n
 299 |       , function(){ return 'expected ' + i(this.obj) + ' to be above ' + n }
 300 |       , function(){ return 'expected ' + i(this.obj) + ' to be below ' + n });
 301 |     return this;
 302 |   };
 303 | 
 304 |   /**
 305 |    * Assert numeric value below _n_.
 306 |    *
 307 |    * @param {Number} n
 308 |    * @api public
 309 |    */
 310 | 
 311 |   Assertion.prototype.lessThan =
 312 |   Assertion.prototype.below = function (n) {
 313 |     this.assert(
 314 |         this.obj < n
 315 |       , function(){ return 'expected ' + i(this.obj) + ' to be below ' + n }
 316 |       , function(){ return 'expected ' + i(this.obj) + ' to be above ' + n });
 317 |     return this;
 318 |   };
 319 | 
 320 |   /**
 321 |    * Assert string value matches _regexp_.
 322 |    *
 323 |    * @param {RegExp} regexp
 324 |    * @api public
 325 |    */
 326 | 
 327 |   Assertion.prototype.match = function (regexp) {
 328 |     this.assert(
 329 |         regexp.exec(this.obj)
 330 |       , function(){ return 'expected ' + i(this.obj) + ' to match ' + regexp }
 331 |       , function(){ return 'expected ' + i(this.obj) + ' not to match ' + regexp });
 332 |     return this;
 333 |   };
 334 | 
 335 |   /**
 336 |    * Assert property "length" exists and has value of _n_.
 337 |    *
 338 |    * @param {Number} n
 339 |    * @api public
 340 |    */
 341 | 
 342 |   Assertion.prototype.length = function (n) {
 343 |     expect(this.obj).to.have.property('length');
 344 |     var len = this.obj.length;
 345 |     this.assert(
 346 |         n == len
 347 |       , function(){ return 'expected ' + i(this.obj) + ' to have a length of ' + n + ' but got ' + len }
 348 |       , function(){ return 'expected ' + i(this.obj) + ' to not have a length of ' + len });
 349 |     return this;
 350 |   };
 351 | 
 352 |   /**
 353 |    * Assert property _name_ exists, with optional _val_.
 354 |    *
 355 |    * @param {String} name
 356 |    * @param {Mixed} val
 357 |    * @api public
 358 |    */
 359 | 
 360 |   Assertion.prototype.property = function (name, val) {
 361 |     if (this.flags.own) {
 362 |       this.assert(
 363 |           Object.prototype.hasOwnProperty.call(this.obj, name)
 364 |         , function(){ return 'expected ' + i(this.obj) + ' to have own property ' + i(name) }
 365 |         , function(){ return 'expected ' + i(this.obj) + ' to not have own property ' + i(name) });
 366 |       return this;
 367 |     }
 368 | 
 369 |     if (this.flags.not && undefined !== val) {
 370 |       if (undefined === this.obj[name]) {
 371 |         throw new Error(i(this.obj) + ' has no property ' + i(name));
 372 |       }
 373 |     } else {
 374 |       var hasProp;
 375 |       try {
 376 |         hasProp = name in this.obj
 377 |       } catch (e) {
 378 |         hasProp = undefined !== this.obj[name]
 379 |       }
 380 | 
 381 |       this.assert(
 382 |           hasProp
 383 |         , function(){ return 'expected ' + i(this.obj) + ' to have a property ' + i(name) }
 384 |         , function(){ return 'expected ' + i(this.obj) + ' to not have a property ' + i(name) });
 385 |     }
 386 | 
 387 |     if (undefined !== val) {
 388 |       this.assert(
 389 |           val === this.obj[name]
 390 |         , function(){ return 'expected ' + i(this.obj) + ' to have a property ' + i(name)
 391 |           + ' of ' + i(val) + ', but got ' + i(this.obj[name]) }
 392 |         , function(){ return 'expected ' + i(this.obj) + ' to not have a property ' + i(name)
 393 |           + ' of ' + i(val) });
 394 |     }
 395 | 
 396 |     this.obj = this.obj[name];
 397 |     return this;
 398 |   };
 399 | 
 400 |   /**
 401 |    * Assert that the array contains _obj_ or string contains _obj_.
 402 |    *
 403 |    * @param {Mixed} obj|string
 404 |    * @api public
 405 |    */
 406 | 
 407 |   Assertion.prototype.string =
 408 |   Assertion.prototype.contain = function (obj) {
 409 |     if ('string' == typeof this.obj) {
 410 |       this.assert(
 411 |           ~this.obj.indexOf(obj)
 412 |         , function(){ return 'expected ' + i(this.obj) + ' to contain ' + i(obj) }
 413 |         , function(){ return 'expected ' + i(this.obj) + ' to not contain ' + i(obj) });
 414 |     } else {
 415 |       this.assert(
 416 |           ~indexOf(this.obj, obj)
 417 |         , function(){ return 'expected ' + i(this.obj) + ' to contain ' + i(obj) }
 418 |         , function(){ return 'expected ' + i(this.obj) + ' to not contain ' + i(obj) });
 419 |     }
 420 |     return this;
 421 |   };
 422 | 
 423 |   /**
 424 |    * Assert exact keys or inclusion of keys by using
 425 |    * the `.own` modifier.
 426 |    *
 427 |    * @param {Array|String ...} keys
 428 |    * @api public
 429 |    */
 430 | 
 431 |   Assertion.prototype.key =
 432 |   Assertion.prototype.keys = function ($keys) {
 433 |     var str
 434 |       , ok = true;
 435 | 
 436 |     $keys = isArray($keys)
 437 |       ? $keys
 438 |       : Array.prototype.slice.call(arguments);
 439 | 
 440 |     if (!$keys.length) throw new Error('keys required');
 441 | 
 442 |     var actual = keys(this.obj)
 443 |       , len = $keys.length;
 444 | 
 445 |     // Inclusion
 446 |     ok = every($keys, function (key) {
 447 |       return ~indexOf(actual, key);
 448 |     });
 449 | 
 450 |     // Strict
 451 |     if (!this.flags.not && this.flags.only) {
 452 |       ok = ok && $keys.length == actual.length;
 453 |     }
 454 | 
 455 |     // Key string
 456 |     if (len > 1) {
 457 |       $keys = map($keys, function (key) {
 458 |         return i(key);
 459 |       });
 460 |       var last = $keys.pop();
 461 |       str = $keys.join(', ') + ', and ' + last;
 462 |     } else {
 463 |       str = i($keys[0]);
 464 |     }
 465 | 
 466 |     // Form
 467 |     str = (len > 1 ? 'keys ' : 'key ') + str;
 468 | 
 469 |     // Have / include
 470 |     str = (!this.flags.only ? 'include ' : 'only have ') + str;
 471 | 
 472 |     // Assertion
 473 |     this.assert(
 474 |         ok
 475 |       , function(){ return 'expected ' + i(this.obj) + ' to ' + str }
 476 |       , function(){ return 'expected ' + i(this.obj) + ' to not ' + str });
 477 | 
 478 |     return this;
 479 |   };
 480 | 
 481 |   /**
 482 |    * Assert a failure.
 483 |    *
 484 |    * @param {String ...} custom message
 485 |    * @api public
 486 |    */
 487 |   Assertion.prototype.fail = function (msg) {
 488 |     var error = function() { return msg || "explicit failure"; }
 489 |     this.assert(false, error, error);
 490 |     return this;
 491 |   };
 492 | 
 493 |   /**
 494 |    * Function bind implementation.
 495 |    */
 496 | 
 497 |   function bind (fn, scope) {
 498 |     return function () {
 499 |       return fn.apply(scope, arguments);
 500 |     }
 501 |   }
 502 | 
 503 |   /**
 504 |    * Array every compatibility
 505 |    *
 506 |    * @see bit.ly/5Fq1N2
 507 |    * @api public
 508 |    */
 509 | 
 510 |   function every (arr, fn, thisObj) {
 511 |     var scope = thisObj || global;
 512 |     for (var i = 0, j = arr.length; i < j; ++i) {
 513 |       if (!fn.call(scope, arr[i], i, arr)) {
 514 |         return false;
 515 |       }
 516 |     }
 517 |     return true;
 518 |   }
 519 | 
 520 |   /**
 521 |    * Array indexOf compatibility.
 522 |    *
 523 |    * @see bit.ly/a5Dxa2
 524 |    * @api public
 525 |    */
 526 | 
 527 |   function indexOf (arr, o, i) {
 528 |     if (Array.prototype.indexOf) {
 529 |       return Array.prototype.indexOf.call(arr, o, i);
 530 |     }
 531 | 
 532 |     if (arr.length === undefined) {
 533 |       return -1;
 534 |     }
 535 | 
 536 |     for (var j = arr.length, i = i < 0 ? i + j < 0 ? 0 : i + j : i || 0
 537 |         ; i < j && arr[i] !== o; i++);
 538 | 
 539 |     return j <= i ? -1 : i;
 540 |   }
 541 | 
 542 |   // https://gist.github.com/1044128/
 543 |   var getOuterHTML = function(element) {
 544 |     if ('outerHTML' in element) return element.outerHTML;
 545 |     var ns = "http://www.w3.org/1999/xhtml";
 546 |     var container = document.createElementNS(ns, '_');
 547 |     var xmlSerializer = new XMLSerializer();
 548 |     var html;
 549 |     if (document.xmlVersion) {
 550 |       return xmlSerializer.serializeToString(element);
 551 |     } else {
 552 |       container.appendChild(element.cloneNode(false));
 553 |       html = container.innerHTML.replace('><', '>' + element.innerHTML + '<');
 554 |       container.innerHTML = '';
 555 |       return html;
 556 |     }
 557 |   };
 558 | 
 559 |   // Returns true if object is a DOM element.
 560 |   var isDOMElement = function (object) {
 561 |     if (typeof HTMLElement === 'object') {
 562 |       return object instanceof HTMLElement;
 563 |     } else {
 564 |       return object &&
 565 |         typeof object === 'object' &&
 566 |         object.nodeType === 1 &&
 567 |         typeof object.nodeName === 'string';
 568 |     }
 569 |   };
 570 | 
 571 |   /**
 572 |    * Inspects an object.
 573 |    *
 574 |    * @see taken from node.js `util` module (copyright Joyent, MIT license)
 575 |    * @api private
 576 |    */
 577 | 
 578 |   function i (obj, showHidden, depth) {
 579 |     var seen = [];
 580 | 
 581 |     function stylize (str) {
 582 |       return str;
 583 |     }
 584 | 
 585 |     function format (value, recurseTimes) {
 586 |       // Provide a hook for user-specified inspect functions.
 587 |       // Check that value is an object with an inspect function on it
 588 |       if (value && typeof value.inspect === 'function' &&
 589 |           // Filter out the util module, it's inspect function is special
 590 |           value !== exports &&
 591 |           // Also filter out any prototype objects using the circular check.
 592 |           !(value.constructor && value.constructor.prototype === value)) {
 593 |         return value.inspect(recurseTimes);
 594 |       }
 595 | 
 596 |       // Primitive types cannot have properties
 597 |       switch (typeof value) {
 598 |         case 'undefined':
 599 |           return stylize('undefined', 'undefined');
 600 | 
 601 |         case 'string':
 602 |           var simple = '\'' + json.stringify(value).replace(/^"|"$/g, '')
 603 |                                                    .replace(/'/g, "\\'")
 604 |                                                    .replace(/\\"/g, '"') + '\'';
 605 |           return stylize(simple, 'string');
 606 | 
 607 |         case 'number':
 608 |           return stylize('' + value, 'number');
 609 | 
 610 |         case 'boolean':
 611 |           return stylize('' + value, 'boolean');
 612 |       }
 613 |       // For some reason typeof null is "object", so special case here.
 614 |       if (value === null) {
 615 |         return stylize('null', 'null');
 616 |       }
 617 | 
 618 |       if (isDOMElement(value)) {
 619 |         return getOuterHTML(value);
 620 |       }
 621 | 
 622 |       // Look up the keys of the object.
 623 |       var visible_keys = keys(value);
 624 |       var $keys = showHidden ? Object.getOwnPropertyNames(value) : visible_keys;
 625 | 
 626 |       // Functions without properties can be shortcutted.
 627 |       if (typeof value === 'function' && $keys.length === 0) {
 628 |         if (isRegExp(value)) {
 629 |           return stylize('' + value, 'regexp');
 630 |         } else {
 631 |           var name = value.name ? ': ' + value.name : '';
 632 |           return stylize('[Function' + name + ']', 'special');
 633 |         }
 634 |       }
 635 | 
 636 |       // Dates without properties can be shortcutted
 637 |       if (isDate(value) && $keys.length === 0) {
 638 |         return stylize(value.toUTCString(), 'date');
 639 |       }
 640 |       
 641 |       // Error objects can be shortcutted
 642 |       if (value instanceof Error) {
 643 |         return stylize("["+value.toString()+"]", 'Error');
 644 |       }
 645 | 
 646 |       var base, type, braces;
 647 |       // Determine the object type
 648 |       if (isArray(value)) {
 649 |         type = 'Array';
 650 |         braces = ['[', ']'];
 651 |       } else {
 652 |         type = 'Object';
 653 |         braces = ['{', '}'];
 654 |       }
 655 | 
 656 |       // Make functions say that they are functions
 657 |       if (typeof value === 'function') {
 658 |         var n = value.name ? ': ' + value.name : '';
 659 |         base = (isRegExp(value)) ? ' ' + value : ' [Function' + n + ']';
 660 |       } else {
 661 |         base = '';
 662 |       }
 663 | 
 664 |       // Make dates with properties first say the date
 665 |       if (isDate(value)) {
 666 |         base = ' ' + value.toUTCString();
 667 |       }
 668 | 
 669 |       if ($keys.length === 0) {
 670 |         return braces[0] + base + braces[1];
 671 |       }
 672 | 
 673 |       if (recurseTimes < 0) {
 674 |         if (isRegExp(value)) {
 675 |           return stylize('' + value, 'regexp');
 676 |         } else {
 677 |           return stylize('[Object]', 'special');
 678 |         }
 679 |       }
 680 | 
 681 |       seen.push(value);
 682 | 
 683 |       var output = map($keys, function (key) {
 684 |         var name, str;
 685 |         if (value.__lookupGetter__) {
 686 |           if (value.__lookupGetter__(key)) {
 687 |             if (value.__lookupSetter__(key)) {
 688 |               str = stylize('[Getter/Setter]', 'special');
 689 |             } else {
 690 |               str = stylize('[Getter]', 'special');
 691 |             }
 692 |           } else {
 693 |             if (value.__lookupSetter__(key)) {
 694 |               str = stylize('[Setter]', 'special');
 695 |             }
 696 |           }
 697 |         }
 698 |         if (indexOf(visible_keys, key) < 0) {
 699 |           name = '[' + key + ']';
 700 |         }
 701 |         if (!str) {
 702 |           if (indexOf(seen, value[key]) < 0) {
 703 |             if (recurseTimes === null) {
 704 |               str = format(value[key]);
 705 |             } else {
 706 |               str = format(value[key], recurseTimes - 1);
 707 |             }
 708 |             if (str.indexOf('\n') > -1) {
 709 |               if (isArray(value)) {
 710 |                 str = map(str.split('\n'), function (line) {
 711 |                   return '  ' + line;
 712 |                 }).join('\n').substr(2);
 713 |               } else {
 714 |                 str = '\n' + map(str.split('\n'), function (line) {
 715 |                   return '   ' + line;
 716 |                 }).join('\n');
 717 |               }
 718 |             }
 719 |           } else {
 720 |             str = stylize('[Circular]', 'special');
 721 |           }
 722 |         }
 723 |         if (typeof name === 'undefined') {
 724 |           if (type === 'Array' && key.match(/^\d+$/)) {
 725 |             return str;
 726 |           }
 727 |           name = json.stringify('' + key);
 728 |           if (name.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)) {
 729 |             name = name.substr(1, name.length - 2);
 730 |             name = stylize(name, 'name');
 731 |           } else {
 732 |             name = name.replace(/'/g, "\\'")
 733 |                        .replace(/\\"/g, '"')
 734 |                        .replace(/(^"|"$)/g, "'");
 735 |             name = stylize(name, 'string');
 736 |           }
 737 |         }
 738 | 
 739 |         return name + ': ' + str;
 740 |       });
 741 | 
 742 |       seen.pop();
 743 | 
 744 |       var numLinesEst = 0;
 745 |       var length = reduce(output, function (prev, cur) {
 746 |         numLinesEst++;
 747 |         if (indexOf(cur, '\n') >= 0) numLinesEst++;
 748 |         return prev + cur.length + 1;
 749 |       }, 0);
 750 | 
 751 |       if (length > 50) {
 752 |         output = braces[0] +
 753 |                  (base === '' ? '' : base + '\n ') +
 754 |                  ' ' +
 755 |                  output.join(',\n  ') +
 756 |                  ' ' +
 757 |                  braces[1];
 758 | 
 759 |       } else {
 760 |         output = braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1];
 761 |       }
 762 | 
 763 |       return output;
 764 |     }
 765 |     return format(obj, (typeof depth === 'undefined' ? 2 : depth));
 766 |   }
 767 | 
 768 |   expect.stringify = i;
 769 | 
 770 |   function isArray (ar) {
 771 |     return Object.prototype.toString.call(ar) === '[object Array]';
 772 |   }
 773 | 
 774 |   function isRegExp(re) {
 775 |     var s;
 776 |     try {
 777 |       s = '' + re;
 778 |     } catch (e) {
 779 |       return false;
 780 |     }
 781 | 
 782 |     return re instanceof RegExp || // easy case
 783 |            // duck-type for context-switching evalcx case
 784 |            typeof(re) === 'function' &&
 785 |            re.constructor.name === 'RegExp' &&
 786 |            re.compile &&
 787 |            re.test &&
 788 |            re.exec &&
 789 |            s.match(/^\/.*\/[gim]{0,3}$/);
 790 |   }
 791 | 
 792 |   function isDate(d) {
 793 |     return d instanceof Date;
 794 |   }
 795 | 
 796 |   function keys (obj) {
 797 |     if (Object.keys) {
 798 |       return Object.keys(obj);
 799 |     }
 800 | 
 801 |     var keys = [];
 802 | 
 803 |     for (var i in obj) {
 804 |       if (Object.prototype.hasOwnProperty.call(obj, i)) {
 805 |         keys.push(i);
 806 |       }
 807 |     }
 808 | 
 809 |     return keys;
 810 |   }
 811 | 
 812 |   function map (arr, mapper, that) {
 813 |     if (Array.prototype.map) {
 814 |       return Array.prototype.map.call(arr, mapper, that);
 815 |     }
 816 | 
 817 |     var other= new Array(arr.length);
 818 | 
 819 |     for (var i= 0, n = arr.length; i<n; i++)
 820 |       if (i in arr)
 821 |         other[i] = mapper.call(that, arr[i], i, arr);
 822 | 
 823 |     return other;
 824 |   }
 825 | 
 826 |   function reduce (arr, fun) {
 827 |     if (Array.prototype.reduce) {
 828 |       return Array.prototype.reduce.apply(
 829 |           arr
 830 |         , Array.prototype.slice.call(arguments, 1)
 831 |       );
 832 |     }
 833 | 
 834 |     var len = +this.length;
 835 | 
 836 |     if (typeof fun !== "function")
 837 |       throw new TypeError();
 838 | 
 839 |     // no value to return if no initial value and an empty array
 840 |     if (len === 0 && arguments.length === 1)
 841 |       throw new TypeError();
 842 | 
 843 |     var i = 0;
 844 |     if (arguments.length >= 2) {
 845 |       var rv = arguments[1];
 846 |     } else {
 847 |       do {
 848 |         if (i in this) {
 849 |           rv = this[i++];
 850 |           break;
 851 |         }
 852 | 
 853 |         // if array contains no values, no initial value to return
 854 |         if (++i >= len)
 855 |           throw new TypeError();
 856 |       } while (true);
 857 |     }
 858 | 
 859 |     for (; i < len; i++) {
 860 |       if (i in this)
 861 |         rv = fun.call(null, rv, this[i], i, this);
 862 |     }
 863 | 
 864 |     return rv;
 865 |   }
 866 | 
 867 |   /**
 868 |    * Asserts deep equality
 869 |    *
 870 |    * @see taken from node.js `assert` module (copyright Joyent, MIT license)
 871 |    * @api private
 872 |    */
 873 | 
 874 |   expect.eql = function eql(actual, expected) {
 875 |     // 7.1. All identical values are equivalent, as determined by ===.
 876 |     if (actual === expected) {
 877 |       return true;
 878 |     } else if ('undefined' != typeof Buffer
 879 |       && Buffer.isBuffer(actual) && Buffer.isBuffer(expected)) {
 880 |       if (actual.length != expected.length) return false;
 881 | 
 882 |       for (var i = 0; i < actual.length; i++) {
 883 |         if (actual[i] !== expected[i]) return false;
 884 |       }
 885 | 
 886 |       return true;
 887 | 
 888 |       // 7.2. If the expected value is a Date object, the actual value is
 889 |       // equivalent if it is also a Date object that refers to the same time.
 890 |     } else if (actual instanceof Date && expected instanceof Date) {
 891 |       return actual.getTime() === expected.getTime();
 892 | 
 893 |       // 7.3. Other pairs that do not both pass typeof value == "object",
 894 |       // equivalence is determined by ==.
 895 |     } else if (typeof actual != 'object' && typeof expected != 'object') {
 896 |       return actual == expected;
 897 |     // If both are regular expression use the special `regExpEquiv` method
 898 |     // to determine equivalence.
 899 |     } else if (isRegExp(actual) && isRegExp(expected)) {
 900 |       return regExpEquiv(actual, expected);
 901 |     // 7.4. For all other Object pairs, including Array objects, equivalence is
 902 |     // determined by having the same number of owned properties (as verified
 903 |     // with Object.prototype.hasOwnProperty.call), the same set of keys
 904 |     // (although not necessarily the same order), equivalent values for every
 905 |     // corresponding key, and an identical "prototype" property. Note: this
 906 |     // accounts for both named and indexed properties on Arrays.
 907 |     } else {
 908 |       return objEquiv(actual, expected);
 909 |     }
 910 |   };
 911 | 
 912 |   function isUndefinedOrNull (value) {
 913 |     return value === null || value === undefined;
 914 |   }
 915 | 
 916 |   function isArguments (object) {
 917 |     return Object.prototype.toString.call(object) == '[object Arguments]';
 918 |   }
 919 | 
 920 |   function regExpEquiv (a, b) {
 921 |     return a.source === b.source && a.global === b.global &&
 922 |            a.ignoreCase === b.ignoreCase && a.multiline === b.multiline;
 923 |   }
 924 | 
 925 |   function objEquiv (a, b) {
 926 |     if (isUndefinedOrNull(a) || isUndefinedOrNull(b))
 927 |       return false;
 928 |     // an identical "prototype" property.
 929 |     if (a.prototype !== b.prototype) return false;
 930 |     //~~~I've managed to break Object.keys through screwy arguments passing.
 931 |     //   Converting to array solves the problem.
 932 |     if (isArguments(a)) {
 933 |       if (!isArguments(b)) {
 934 |         return false;
 935 |       }
 936 |       a = pSlice.call(a);
 937 |       b = pSlice.call(b);
 938 |       return expect.eql(a, b);
 939 |     }
 940 |     try{
 941 |       var ka = keys(a),
 942 |         kb = keys(b),
 943 |         key, i;
 944 |     } catch (e) {//happens when one is a string literal and the other isn't
 945 |       return false;
 946 |     }
 947 |     // having the same number of owned properties (keys incorporates hasOwnProperty)
 948 |     if (ka.length != kb.length)
 949 |       return false;
 950 |     //the same set of keys (although not necessarily the same order),
 951 |     ka.sort();
 952 |     kb.sort();
 953 |     //~~~cheap key test
 954 |     for (i = ka.length - 1; i >= 0; i--) {
 955 |       if (ka[i] != kb[i])
 956 |         return false;
 957 |     }
 958 |     //equivalent values for every corresponding key, and
 959 |     //~~~possibly expensive deep test
 960 |     for (i = ka.length - 1; i >= 0; i--) {
 961 |       key = ka[i];
 962 |       if (!expect.eql(a[key], b[key]))
 963 |          return false;
 964 |     }
 965 |     return true;
 966 |   }
 967 | 
 968 |   var json = (function () {
 969 |     "use strict";
 970 | 
 971 |     if ('object' == typeof JSON && JSON.parse && JSON.stringify) {
 972 |       return {
 973 |           parse: nativeJSON.parse
 974 |         , stringify: nativeJSON.stringify
 975 |       }
 976 |     }
 977 | 
 978 |     var JSON = {};
 979 | 
 980 |     function f(n) {
 981 |         // Format integers to have at least two digits.
 982 |         return n < 10 ? '0' + n : n;
 983 |     }
 984 | 
 985 |     function date(d, key) {
 986 |       return isFinite(d.valueOf()) ?
 987 |           d.getUTCFullYear()     + '-' +
 988 |           f(d.getUTCMonth() + 1) + '-' +
 989 |           f(d.getUTCDate())      + 'T' +
 990 |           f(d.getUTCHours())     + ':' +
 991 |           f(d.getUTCMinutes())   + ':' +
 992 |           f(d.getUTCSeconds())   + 'Z' : null;
 993 |     }
 994 | 
 995 |     var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
 996 |         escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
 997 |         gap,
 998 |         indent,
 999 |         meta = {    // table of character substitutions
1000 |             '\b': '\\b',
1001 |             '\t': '\\t',
1002 |             '\n': '\\n',
1003 |             '\f': '\\f',
1004 |             '\r': '\\r',
1005 |             '"' : '\\"',
1006 |             '\\': '\\\\'
1007 |         },
1008 |         rep;
1009 | 
1010 | 
1011 |     function quote(string) {
1012 | 
1013 |   // If the string contains no control characters, no quote characters, and no
1014 |   // backslash characters, then we can safely slap some quotes around it.
1015 |   // Otherwise we must also replace the offending characters with safe escape
1016 |   // sequences.
1017 | 
1018 |         escapable.lastIndex = 0;
1019 |         return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
1020 |             var c = meta[a];
1021 |             return typeof c === 'string' ? c :
1022 |                 '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
1023 |         }) + '"' : '"' + string + '"';
1024 |     }
1025 | 
1026 | 
1027 |     function str(key, holder) {
1028 | 
1029 |   // Produce a string from holder[key].
1030 | 
1031 |         var i,          // The loop counter.
1032 |             k,          // The member key.
1033 |             v,          // The member value.
1034 |             length,
1035 |             mind = gap,
1036 |             partial,
1037 |             value = holder[key];
1038 | 
1039 |   // If the value has a toJSON method, call it to obtain a replacement value.
1040 | 
1041 |         if (value instanceof Date) {
1042 |             value = date(key);
1043 |         }
1044 | 
1045 |   // If we were called with a replacer function, then call the replacer to
1046 |   // obtain a replacement value.
1047 | 
1048 |         if (typeof rep === 'function') {
1049 |             value = rep.call(holder, key, value);
1050 |         }
1051 | 
1052 |   // What happens next depends on the value's type.
1053 | 
1054 |         switch (typeof value) {
1055 |         case 'string':
1056 |             return quote(value);
1057 | 
1058 |         case 'number':
1059 | 
1060 |   // JSON numbers must be finite. Encode non-finite numbers as null.
1061 | 
1062 |             return isFinite(value) ? String(value) : 'null';
1063 | 
1064 |         case 'boolean':
1065 |         case 'null':
1066 | 
1067 |   // If the value is a boolean or null, convert it to a string. Note:
1068 |   // typeof null does not produce 'null'. The case is included here in
1069 |   // the remote chance that this gets fixed someday.
1070 | 
1071 |             return String(value);
1072 | 
1073 |   // If the type is 'object', we might be dealing with an object or an array or
1074 |   // null.
1075 | 
1076 |         case 'object':
1077 | 
1078 |   // Due to a specification blunder in ECMAScript, typeof null is 'object',
1079 |   // so watch out for that case.
1080 | 
1081 |             if (!value) {
1082 |                 return 'null';
1083 |             }
1084 | 
1085 |   // Make an array to hold the partial results of stringifying this object value.
1086 | 
1087 |             gap += indent;
1088 |             partial = [];
1089 | 
1090 |   // Is the value an array?
1091 | 
1092 |             if (Object.prototype.toString.apply(value) === '[object Array]') {
1093 | 
1094 |   // The value is an array. Stringify every element. Use null as a placeholder
1095 |   // for non-JSON values.
1096 | 
1097 |                 length = value.length;
1098 |                 for (i = 0; i < length; i += 1) {
1099 |                     partial[i] = str(i, value) || 'null';
1100 |                 }
1101 | 
1102 |   // Join all of the elements together, separated with commas, and wrap them in
1103 |   // brackets.
1104 | 
1105 |                 v = partial.length === 0 ? '[]' : gap ?
1106 |                     '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' :
1107 |                     '[' + partial.join(',') + ']';
1108 |                 gap = mind;
1109 |                 return v;
1110 |             }
1111 | 
1112 |   // If the replacer is an array, use it to select the members to be stringified.
1113 | 
1114 |             if (rep && typeof rep === 'object') {
1115 |                 length = rep.length;
1116 |                 for (i = 0; i < length; i += 1) {
1117 |                     if (typeof rep[i] === 'string') {
1118 |                         k = rep[i];
1119 |                         v = str(k, value);
1120 |                         if (v) {
1121 |                             partial.push(quote(k) + (gap ? ': ' : ':') + v);
1122 |                         }
1123 |                     }
1124 |                 }
1125 |             } else {
1126 | 
1127 |   // Otherwise, iterate through all of the keys in the object.
1128 | 
1129 |                 for (k in value) {
1130 |                     if (Object.prototype.hasOwnProperty.call(value, k)) {
1131 |                         v = str(k, value);
1132 |                         if (v) {
1133 |                             partial.push(quote(k) + (gap ? ': ' : ':') + v);
1134 |                         }
1135 |                     }
1136 |                 }
1137 |             }
1138 | 
1139 |   // Join all of the member texts together, separated with commas,
1140 |   // and wrap them in braces.
1141 | 
1142 |             v = partial.length === 0 ? '{}' : gap ?
1143 |                 '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' :
1144 |                 '{' + partial.join(',') + '}';
1145 |             gap = mind;
1146 |             return v;
1147 |         }
1148 |     }
1149 | 
1150 |   // If the JSON object does not yet have a stringify method, give it one.
1151 | 
1152 |     JSON.stringify = function (value, replacer, space) {
1153 | 
1154 |   // The stringify method takes a value and an optional replacer, and an optional
1155 |   // space parameter, and returns a JSON text. The replacer can be a function
1156 |   // that can replace values, or an array of strings that will select the keys.
1157 |   // A default replacer method can be provided. Use of the space parameter can
1158 |   // produce text that is more easily readable.
1159 | 
1160 |         var i;
1161 |         gap = '';
1162 |         indent = '';
1163 | 
1164 |   // If the space parameter is a number, make an indent string containing that
1165 |   // many spaces.
1166 | 
1167 |         if (typeof space === 'number') {
1168 |             for (i = 0; i < space; i += 1) {
1169 |                 indent += ' ';
1170 |             }
1171 | 
1172 |   // If the space parameter is a string, it will be used as the indent string.
1173 | 
1174 |         } else if (typeof space === 'string') {
1175 |             indent = space;
1176 |         }
1177 | 
1178 |   // If there is a replacer, it must be a function or an array.
1179 |   // Otherwise, throw an error.
1180 | 
1181 |         rep = replacer;
1182 |         if (replacer && typeof replacer !== 'function' &&
1183 |                 (typeof replacer !== 'object' ||
1184 |                 typeof replacer.length !== 'number')) {
1185 |             throw new Error('JSON.stringify');
1186 |         }
1187 | 
1188 |   // Make a fake root object containing our value under the key of ''.
1189 |   // Return the result of stringifying the value.
1190 | 
1191 |         return str('', {'': value});
1192 |     };
1193 | 
1194 |   // If the JSON object does not yet have a parse method, give it one.
1195 | 
1196 |     JSON.parse = function (text, reviver) {
1197 |     // The parse method takes a text and an optional reviver function, and returns
1198 |     // a JavaScript value if the text is a valid JSON text.
1199 | 
1200 |         var j;
1201 | 
1202 |         function walk(holder, key) {
1203 | 
1204 |     // The walk method is used to recursively walk the resulting structure so
1205 |     // that modifications can be made.
1206 | 
1207 |             var k, v, value = holder[key];
1208 |             if (value && typeof value === 'object') {
1209 |                 for (k in value) {
1210 |                     if (Object.prototype.hasOwnProperty.call(value, k)) {
1211 |                         v = walk(value, k);
1212 |                         if (v !== undefined) {
1213 |                             value[k] = v;
1214 |                         } else {
1215 |                             delete value[k];
1216 |                         }
1217 |                     }
1218 |                 }
1219 |             }
1220 |             return reviver.call(holder, key, value);
1221 |         }
1222 | 
1223 | 
1224 |     // Parsing happens in four stages. In the first stage, we replace certain
1225 |     // Unicode characters with escape sequences. JavaScript handles many characters
1226 |     // incorrectly, either silently deleting them, or treating them as line endings.
1227 | 
1228 |         text = String(text);
1229 |         cx.lastIndex = 0;
1230 |         if (cx.test(text)) {
1231 |             text = text.replace(cx, function (a) {
1232 |                 return '\\u' +
1233 |                     ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
1234 |             });
1235 |         }
1236 | 
1237 |     // In the second stage, we run the text against regular expressions that look
1238 |     // for non-JSON patterns. We are especially concerned with '()' and 'new'
1239 |     // because they can cause invocation, and '=' because it can cause mutation.
1240 |     // But just to be safe, we want to reject all unexpected forms.
1241 | 
1242 |     // We split the second stage into 4 regexp operations in order to work around
1243 |     // crippling inefficiencies in IE's and Safari's regexp engines. First we
1244 |     // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
1245 |     // replace all simple value tokens with ']' characters. Third, we delete all
1246 |     // open brackets that follow a colon or comma or that begin the text. Finally,
1247 |     // we look to see that the remaining characters are only whitespace or ']' or
1248 |     // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
1249 | 
1250 |         if (/^[\],:{}\s]*$/
1251 |                 .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
1252 |                     .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
1253 |                     .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
1254 | 
1255 |     // In the third stage we use the eval function to compile the text into a
1256 |     // JavaScript structure. The '{' operator is subject to a syntactic ambiguity
1257 |     // in JavaScript: it can begin a block or an object literal. We wrap the text
1258 |     // in parens to eliminate the ambiguity.
1259 | 
1260 |             j = eval('(' + text + ')');
1261 | 
1262 |     // In the optional fourth stage, we recursively walk the new structure, passing
1263 |     // each name/value pair to a reviver function for possible transformation.
1264 | 
1265 |             return typeof reviver === 'function' ?
1266 |                 walk({'': j}, '') : j;
1267 |         }
1268 | 
1269 |     // If the text is not JSON parseable, then a SyntaxError is thrown.
1270 | 
1271 |         throw new SyntaxError('JSON.parse');
1272 |     };
1273 | 
1274 |     return JSON;
1275 |   })();
1276 | 
1277 |   if ('undefined' != typeof window) {
1278 |     window.expect = module.exports;
1279 |   }
1280 | 
1281 | })(
1282 |     this
1283 |   , 'undefined' != typeof module ? module : {exports: {}}
1284 | );
1285 | 


--------------------------------------------------------------------------------
/tests/resources/mocha-2.2.5.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | body {
  4 |   margin:0;
  5 | }
  6 | 
  7 | #mocha {
  8 |   font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  9 |   margin: 60px 50px;
 10 | }
 11 | 
 12 | #mocha ul,
 13 | #mocha li {
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | #mocha ul {
 19 |   list-style: none;
 20 | }
 21 | 
 22 | #mocha h1,
 23 | #mocha h2 {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | #mocha h1 {
 28 |   margin-top: 15px;
 29 |   font-size: 1em;
 30 |   font-weight: 200;
 31 | }
 32 | 
 33 | #mocha h1 a {
 34 |   text-decoration: none;
 35 |   color: inherit;
 36 | }
 37 | 
 38 | #mocha h1 a:hover {
 39 |   text-decoration: underline;
 40 | }
 41 | 
 42 | #mocha .suite .suite h1 {
 43 |   margin-top: 0;
 44 |   font-size: .8em;
 45 | }
 46 | 
 47 | #mocha .hidden {
 48 |   display: none;
 49 | }
 50 | 
 51 | #mocha h2 {
 52 |   font-size: 12px;
 53 |   font-weight: normal;
 54 |   cursor: pointer;
 55 | }
 56 | 
 57 | #mocha .suite {
 58 |   margin-left: 15px;
 59 | }
 60 | 
 61 | #mocha .test {
 62 |   margin-left: 15px;
 63 |   overflow: hidden;
 64 | }
 65 | 
 66 | #mocha .test.pending:hover h2::after {
 67 |   content: '(pending)';
 68 |   font-family: arial, sans-serif;
 69 | }
 70 | 
 71 | #mocha .test.pass.medium .duration {
 72 |   background: #c09853;
 73 | }
 74 | 
 75 | #mocha .test.pass.slow .duration {
 76 |   background: #b94a48;
 77 | }
 78 | 
 79 | #mocha .test.pass::before {
 80 |   content: '✓';
 81 |   font-size: 12px;
 82 |   display: block;
 83 |   float: left;
 84 |   margin-right: 5px;
 85 |   color: #00d6b2;
 86 | }
 87 | 
 88 | #mocha .test.pass .duration {
 89 |   font-size: 9px;
 90 |   margin-left: 5px;
 91 |   padding: 2px 5px;
 92 |   color: #fff;
 93 |   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
 94 |   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
 95 |   box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
 96 |   -webkit-border-radius: 5px;
 97 |   -moz-border-radius: 5px;
 98 |   -ms-border-radius: 5px;
 99 |   -o-border-radius: 5px;
100 |   border-radius: 5px;
101 | }
102 | 
103 | #mocha .test.pass.fast .duration {
104 |   display: none;
105 | }
106 | 
107 | #mocha .test.pending {
108 |   color: #0b97c4;
109 | }
110 | 
111 | #mocha .test.pending::before {
112 |   content: '◦';
113 |   color: #0b97c4;
114 | }
115 | 
116 | #mocha .test.fail {
117 |   color: #c00;
118 | }
119 | 
120 | #mocha .test.fail pre {
121 |   color: black;
122 | }
123 | 
124 | #mocha .test.fail::before {
125 |   content: '✖';
126 |   font-size: 12px;
127 |   display: block;
128 |   float: left;
129 |   margin-right: 5px;
130 |   color: #c00;
131 | }
132 | 
133 | #mocha .test pre.error {
134 |   color: #c00;
135 |   max-height: 300px;
136 |   overflow: auto;
137 | }
138 | 
139 | /**
140 |  * (1): approximate for browsers not supporting calc
141 |  * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)
142 |  *      ^^ seriously
143 |  */
144 | #mocha .test pre {
145 |   display: block;
146 |   float: left;
147 |   clear: left;
148 |   font: 12px/1.5 monaco, monospace;
149 |   margin: 5px;
150 |   padding: 15px;
151 |   border: 1px solid #eee;
152 |   max-width: 85%; /*(1)*/
153 |   max-width: calc(100% - 42px); /*(2)*/
154 |   word-wrap: break-word;
155 |   border-bottom-color: #ddd;
156 |   -webkit-border-radius: 3px;
157 |   -webkit-box-shadow: 0 1px 3px #eee;
158 |   -moz-border-radius: 3px;
159 |   -moz-box-shadow: 0 1px 3px #eee;
160 |   border-radius: 3px;
161 | }
162 | 
163 | #mocha .test h2 {
164 |   position: relative;
165 | }
166 | 
167 | #mocha .test a.replay {
168 |   position: absolute;
169 |   top: 3px;
170 |   right: 0;
171 |   text-decoration: none;
172 |   vertical-align: middle;
173 |   display: block;
174 |   width: 15px;
175 |   height: 15px;
176 |   line-height: 15px;
177 |   text-align: center;
178 |   background: #eee;
179 |   font-size: 15px;
180 |   -moz-border-radius: 15px;
181 |   border-radius: 15px;
182 |   -webkit-transition: opacity 200ms;
183 |   -moz-transition: opacity 200ms;
184 |   transition: opacity 200ms;
185 |   opacity: 0.3;
186 |   color: #888;
187 | }
188 | 
189 | #mocha .test:hover a.replay {
190 |   opacity: 1;
191 | }
192 | 
193 | #mocha-report.pass .test.fail {
194 |   display: none;
195 | }
196 | 
197 | #mocha-report.fail .test.pass {
198 |   display: none;
199 | }
200 | 
201 | #mocha-report.pending .test.pass,
202 | #mocha-report.pending .test.fail {
203 |   display: none;
204 | }
205 | #mocha-report.pending .test.pass.pending {
206 |   display: block;
207 | }
208 | 
209 | #mocha-error {
210 |   color: #c00;
211 |   font-size: 1.5em;
212 |   font-weight: 100;
213 |   letter-spacing: 1px;
214 | }
215 | 
216 | #mocha-stats {
217 |   position: fixed;
218 |   top: 15px;
219 |   right: 10px;
220 |   font-size: 12px;
221 |   margin: 0;
222 |   color: #888;
223 |   z-index: 1;
224 | }
225 | 
226 | #mocha-stats .progress {
227 |   float: right;
228 |   padding-top: 0;
229 | }
230 | 
231 | #mocha-stats em {
232 |   color: black;
233 | }
234 | 
235 | #mocha-stats a {
236 |   text-decoration: none;
237 |   color: inherit;
238 | }
239 | 
240 | #mocha-stats a:hover {
241 |   border-bottom: 1px solid #eee;
242 | }
243 | 
244 | #mocha-stats li {
245 |   display: inline-block;
246 |   margin: 0 5px;
247 |   list-style: none;
248 |   padding-top: 11px;
249 | }
250 | 
251 | #mocha-stats canvas {
252 |   width: 40px;
253 |   height: 40px;
254 | }
255 | 
256 | #mocha code .comment { color: #ddd; }
257 | #mocha code .init { color: #2f6fad; }
258 | #mocha code .string { color: #5890ad; }
259 | #mocha code .keyword { color: #8a6343; }
260 | #mocha code .number { color: #2f6fad; }
261 | 
262 | @media screen and (max-device-width: 480px) {
263 |   #mocha {
264 |     margin: 60px 0px;
265 |   }
266 | 
267 |   #mocha #stats {
268 |     position: absolute;
269 |   }
270 | }
271 | 


--------------------------------------------------------------------------------
/tests/salvattore.test.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | describe('Globals', function() {
  4 |   before(function () {
  5 |     fixture.setBase('tests');
  6 |   });
  7 | 
  8 |   beforeEach(function () {
  9 |     this.result = fixture.load('test1.html');
 10 |   });
 11 | 
 12 |   afterEach(function(){
 13 |     fixture.cleanup()
 14 |   });
 15 | 
 16 |   it('exposes global', function () {
 17 |     expect(salvattore).to.be.a('object');
 18 |   });
 19 | });
 20 | 
 21 | describe('Non-responsive grid / 3 columns', function() {
 22 |   var element;
 23 | 
 24 |   before(function() {
 25 |     fixture.setBase('tests');
 26 |   });
 27 | 
 28 |   beforeEach(function() {
 29 |       this.result = fixture.load('test1.html');
 30 |       salvattore.init();
 31 |       element = fixture.el.querySelector('#grid');
 32 |   });
 33 | 
 34 |   afterEach(function(){
 35 |     fixture.cleanup();
 36 |   });
 37 | 
 38 |   it('adds data-columns attribute to grid', function() {
 39 |     expect(element.getAttribute('data-columns')).to.be('3');
 40 |   });
 41 | 
 42 |   it('contains three columns', function() {
 43 |     expect(element.querySelectorAll('.column')).to.have.length(3);
 44 |   });
 45 | 
 46 |   it('contains six items', function() {
 47 |     expect(element.querySelectorAll('.column .item')).to.have.length(6);
 48 |   });
 49 | 
 50 |   it('has class from stylesheet appended to columns', function() {
 51 |     var columns = element.querySelectorAll('.column');
 52 |     var className = 'size-1of3';
 53 | 
 54 |     Array.prototype.forEach.call(columns, function(column) {
 55 |       if (column.classList) {
 56 |         expect(column.classList.contains(className)).to.be.okay;
 57 |       } else {
 58 |         expect(new RegExp('(^| )' + className + '( |$)', 'gi').test(column.className)).to.be.okay;
 59 |       }
 60 |     });
 61 |   });
 62 | 
 63 |   it('brings two elements into every column', function() {
 64 |     var columns = element.querySelectorAll('#grid-1 .column');
 65 | 
 66 |     Array.prototype.forEach.call(columns, function(column) {
 67 |       expect(column.children).to.have.length(2);
 68 |     });
 69 |   });
 70 | });
 71 | 
 72 | describe('Non-responsive grid / 4 columns', function() {
 73 |   var element;
 74 | 
 75 |   before(function() {
 76 |     fixture.setBase('tests');
 77 |   });
 78 | 
 79 |   beforeEach(function() {
 80 |     this.result = fixture.load('test2.html');
 81 |     salvattore.init();
 82 |     element = fixture.el.querySelector('#grid');
 83 |   });
 84 | 
 85 |   afterEach(function(){
 86 |     fixture.cleanup();
 87 |   });
 88 | 
 89 |   it('adds data-columns attribute to grid', function() {
 90 |     expect(element.getAttribute('data-columns')).to.be('4');
 91 |   });
 92 | 
 93 |   it('contains four columns', function() {
 94 |     expect(element.querySelectorAll('.list')).to.have.length(4);
 95 |   });
 96 | 
 97 |   it('contains eight items', function() {
 98 |     expect(element.querySelectorAll('.list .item')).to.have.length(8);
 99 |   });
100 | 
101 |   it('has class from style appended to columns', function() {
102 |     var columns = element.querySelectorAll('.list');
103 |     var className = 'size-1of4';
104 | 
105 |     Array.prototype.forEach.call(columns, function(column) {
106 |       if (column.classList) {
107 |         expect(column.classList.contains(className)).to.be.okay;
108 |       } else {
109 |         expect(new RegExp('(^| )' + className + '( |$)', 'gi').test(column.className)).to.be.okay;
110 |       }
111 |     });
112 |   });
113 | 
114 |   it('brings two elements into every column', function() {
115 |     var columns = element.querySelectorAll('.list');
116 | 
117 |     Array.prototype.forEach.call(columns, function(column) {
118 |       expect(column.children).to.have.length(2);
119 |     });
120 |   });
121 | });
122 | 
123 | describe('Non-responsive dynamic grid  / 4 columns', function() {
124 |   var element;
125 | 
126 |   before(function() {
127 |     fixture.setBase('tests');
128 |   });
129 | 
130 |   beforeEach(function() {
131 |     this.result = fixture.load('test3.html');
132 |     salvattore.init();
133 |     element = fixture.el.querySelector('#grid');
134 |   });
135 | 
136 |   afterEach(function(){
137 |     fixture.cleanup();
138 |   });
139 | 
140 |   it('adds data-columns attribute to grid', function() {
141 |     expect(element.getAttribute('data-columns')).to.be('4');
142 |   });
143 | 
144 |   it('contains four columns', function() {
145 |     expect(element.querySelectorAll('.column')).to.have.length(4);
146 |   });
147 | 
148 |   it('has class from stylesheet appended to columns', function() {
149 |     var columns = element.querySelectorAll('.column');
150 |     var className = 'size-1of4';
151 | 
152 |     Array.prototype.forEach.call(columns, function(column) {
153 |       if (column.classList) {
154 |         expect(column.classList.contains(className)).to.be.okay;
155 |       } else {
156 |         expect(new RegExp('(^| )' + className + '( |$)', 'gi').test(column.className)).to.be.okay;
157 |       }
158 |     });
159 |   });
160 | 
161 |   it('adds elements', function() {
162 |     var insertCount = 4;
163 |     var columns;
164 | 
165 |     // Append multiple elements one by one
166 |     var item;
167 |     for (var i = 1; i <= 4; i++) {
168 |       item = document.createElement('div');
169 |       salvattore.appendElements(element, [item]);
170 |       item.outerHTML = '<div class="item">Appended item #'+ i +'</div>';
171 |     }
172 |     expect(element.querySelectorAll('.column .item')).to.have.length(4);
173 | 
174 |     columns = element.querySelectorAll('.column');
175 |     Array.prototype.forEach.call(columns, function(column) {
176 |       expect(column.children).to.have.length(1);
177 |     });
178 | 
179 |     // Append multiple elements at once
180 |     var items = [];
181 |     for (var i = 5; i <= 8; i++) {
182 |       var item = document.createElement('div');
183 |       item.className = 'item';
184 |       item.innerHTML = 'Appended item #'+ i;
185 |       items.push(item);
186 |     }
187 |     salvattore.appendElements(element, items);
188 |     expect(element.querySelectorAll('.column .item')).to.have.length(8);
189 | 
190 |     columns = element.querySelectorAll('.column');
191 |     Array.prototype.forEach.call(columns, function(column) {
192 |       expect(column.children).to.have.length(2);
193 |     });
194 | 
195 |     // Prepend multiple elements one by one
196 |     var item;
197 |     for (var i = 1; i <= 4; i++) {
198 |       item = document.createElement('div');
199 |       salvattore.prependElements(grid, [item]);
200 |       item.outerHTML = '<div class="item">Prepended item #'+ i +'</div>';
201 |     }
202 |     expect(element.querySelectorAll('.column .item')).to.have.length(12);
203 | 
204 |     columns = element.querySelectorAll('.column');
205 |     Array.prototype.forEach.call(columns, function(column) {
206 |       expect(column.children).to.have.length(3);
207 |     });
208 | 
209 |     // Prepend multiple elements at once
210 |     var items = [];
211 |     for (var i = 5; i <= 8; i++) {
212 |       var item = document.createElement('div');
213 |       item.className = 'item';
214 |       item.innerHTML = 'Prepended item #'+ i;
215 |       items.push(item);
216 |     }
217 |     salvattore.prependElements(grid, items);
218 |     expect(element.querySelectorAll('.column .item')).to.have.length(16);
219 | 
220 |     columns = element.querySelectorAll('.column');
221 |     Array.prototype.forEach.call(columns, function(column) {
222 |       expect(column.children).to.have.length(4);
223 |     });
224 |   });
225 | });
226 | 


--------------------------------------------------------------------------------
/tests/test1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #grid[data-columns]::before {
 3 |     content: '3 .column.size-1of3';
 4 |   }
 5 |   .column { float: left; }
 6 |   .size-1of3 { width: 33.333%; }
 7 | </style>
 8 | <style type="text/scss">
 9 |   /* This should not be loaded cause of wrong type */
10 |   #grid[data-columns]::before {
11 |     content: '2 .column.size-1of2';
12 |   }
13 | </style>
14 | <div id="grid" class="grid clearfix" data-columns>
15 |   <div class="item">Item #1</div>
16 |   <div class="item">Item #2</div>
17 |   <div class="item">Item #3</div>
18 |   <div class="item">Item #4</div>
19 |   <div class="item">Item #5</div>
20 |   <div class="item">Item #6</div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/tests/test2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #grid[data-columns]::before {
 3 |     content: '4 .list.size-1of4';
 4 |   }
 5 |   .column { float: left; }
 6 |   .size-1of4 { width: 25%; }
 7 | </style>
 8 | <div id="grid" class="grid clearfix" data-columns>
 9 |   <div class="item">Item #1</div>
10 |   <div class="item">Item #2</div>
11 |   <div class="item">Item #3</div>
12 |   <div class="item">Item #4</div>
13 |   <div class="item">Item #5</div>
14 |   <div class="item">Item #6</div>
15 |   <div class="item">Item #7</div>
16 |   <div class="item">Item #8</div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/tests/test3.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   #grid[data-columns]::before {
3 |     content: '4 .column.size-1of4';
4 |   }
5 |   .column { float: left; }
6 |   .size-1of4 { width: 25%; }
7 | </style>
8 | <div id="grid" class="grid clearfix" data-columns></div>
9 | 


--------------------------------------------------------------------------------