From fbcae20a6f6d056dc623160aee6f858a24a0c9ca Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 12:34:26 -0400 Subject: [PATCH 001/122] burn down v1 and start on v2 copy from Masonry --- CONTRIBUTING.mdown | 26 +- README.mdown | 77 +- _config.yml | 605 ------- _includes/add-buttons.js | 14 - _includes/change-sizes.js | 14 - _includes/developer-buy-button.html | 1 - _includes/element-partial.html | 7 - _includes/elements-demo-foot.html | 64 - _includes/elements-demo-head.html | 22 - _includes/filter-buttons.html | 14 - _includes/inf-scroll-page.html | 21 - _includes/layout-change.js | 24 - _includes/layout-options.html | 13 - _includes/option-set-buttons.js | 31 - _includes/org-buy-button.html | 1 - _includes/random-sizes.js | 12 - _includes/sort-buttons.html | 19 - _layouts/default.html | 81 - .../2011-05-18-centered-masonry.html | 151 -- .../2011-05-22-category-rows.html | 126 -- .../2011-07-07-masonry-corner-stamp.html | 145 -- .../2011-07-14-masonry-gutters.html | 148 -- .../2011-10-18-spine-align.html | 139 -- .../2011-12-05-big-graph.html | 196 --- .../2012-01-03-masonry-column-shift.html | 220 --- _posts/demos/2010-12-12-basic.html | 30 - .../demos/2010-12-13-elements-complete.html | 16 - _posts/demos/2010-12-16-elements-partial.html | 16 - _posts/demos/2010-12-29-layout-modes.html | 59 - _posts/demos/2010-12-30-filtering.html | 41 - _posts/demos/2010-12-30-sorting.html | 56 - _posts/demos/2010-12-31-relayout.html | 44 - _posts/demos/2011-01-02-adding-items.html | 61 - _posts/demos/2011-01-02-infinite-scroll.html | 51 - _posts/demos/2011-01-11-images.html | 44 - .../demos/2011-03-29-combination-filters.html | 100 -- _posts/demos/2011-06-13-hash-history.html | 185 --- _posts/demos/2011-09-30-fluid-responsive.html | 141 -- _posts/demos/2011-12-22-removing.html | 79 - _posts/docs/2010-12-01-introduction.mdown | 172 -- _posts/docs/2010-12-03-options.mdown | 354 ----- _posts/docs/2010-12-04-methods.mdown | 159 -- _posts/docs/2010-12-05-layout-modes.mdown | 191 --- _posts/docs/2010-12-06-filtering.mdown | 109 -- _posts/docs/2010-12-07-sorting.mdown | 169 -- _posts/docs/2010-12-09-animating.mdown | 100 -- _posts/docs/2010-12-10-adding-items.mdown | 79 - .../docs/2011-05-25-extending-isotope.mdown | 174 -- .../2011-06-16-hash-history-jquery-bbq.mdown | 86 - _posts/docs/2011-12-11-help.mdown | 234 --- _posts/docs/2011-12-20-license.mdown | 79 - _posts/pages/2011-01-01-2.html | 9 - _posts/pages/2011-01-01-3.html | 9 - _posts/pages/2011-01-01-4.html | 9 - _posts/pages/2011-01-01-5.html | 9 - _posts/pages/2011-01-01-6.html | 9 - _posts/tests/2010-01-01-index.html | 14 - _posts/tests/2011-03-27-destroy.html | 48 - _posts/tests/2011-03-27-flash.html | 118 -- _posts/tests/2011-03-27-no-items.html | 29 - .../tests/2011-04-26-item-position-data.html | 69 - _posts/tests/2011-05-13-jquery-animation.html | 92 -- .../2011-05-24-elements-complete-test.html | 140 -- _posts/tests/2011-05-31-tiny-text.html | 70 - _posts/tests/2011-08-19-right-to-left.html | 151 -- .../2011-08-23-unclickable-filtered.html | 118 -- _posts/tests/2011-10-19-callbacks.html | 165 -- _posts/tests/2012-02-07-onlayout.html | 171 -- .../tests/2012-08-11-combo-sort-history.html | 177 --- bower.json | 14 + css/style.css | 842 ---------- examples/basic.html | 63 + examples/bottom-up.html | 120 ++ examples/examples.css | 32 + examples/right-to-left.html | 121 ++ examples/stamps.html | 125 ++ index.html | 185 --- isotope.js | 161 ++ jquery.isotope.js | 1409 ----------------- jquery.isotope.min.js | 13 - js/fake-element.js | 38 - js/jquery-1.7.1.min.js | 4 - js/jquery.ba-bbq.min.js | 18 - js/jquery.infinitescroll.min.js | 47 - js/make-big-graph-projects.js | 43 - minify.sh | 15 - test/.jshintrc | 27 + test/basic-layout.js | 133 ++ test/gutter.js | 16 + test/helpers.js | 14 + test/index.html | 103 ++ test/stamp.js | 58 + test/tests.css | 85 + 93 files changed, 1114 insertions(+), 8979 deletions(-) delete mode 100644 _config.yml delete mode 100644 _includes/add-buttons.js delete mode 100644 _includes/change-sizes.js delete mode 100644 _includes/developer-buy-button.html delete mode 100644 _includes/element-partial.html delete mode 100644 _includes/elements-demo-foot.html delete mode 100644 _includes/elements-demo-head.html delete mode 100644 _includes/filter-buttons.html delete mode 100644 _includes/inf-scroll-page.html delete mode 100644 _includes/layout-change.js delete mode 100644 _includes/layout-options.html delete mode 100644 _includes/option-set-buttons.js delete mode 100644 _includes/org-buy-button.html delete mode 100644 _includes/random-sizes.js delete mode 100644 _includes/sort-buttons.html delete mode 100644 _layouts/default.html delete mode 100644 _posts/custom-layout-modes/2011-05-18-centered-masonry.html delete mode 100644 _posts/custom-layout-modes/2011-05-22-category-rows.html delete mode 100644 _posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html delete mode 100644 _posts/custom-layout-modes/2011-07-14-masonry-gutters.html delete mode 100644 _posts/custom-layout-modes/2011-10-18-spine-align.html delete mode 100644 _posts/custom-layout-modes/2011-12-05-big-graph.html delete mode 100644 _posts/custom-layout-modes/2012-01-03-masonry-column-shift.html delete mode 100644 _posts/demos/2010-12-12-basic.html delete mode 100644 _posts/demos/2010-12-13-elements-complete.html delete mode 100644 _posts/demos/2010-12-16-elements-partial.html delete mode 100644 _posts/demos/2010-12-29-layout-modes.html delete mode 100644 _posts/demos/2010-12-30-filtering.html delete mode 100644 _posts/demos/2010-12-30-sorting.html delete mode 100644 _posts/demos/2010-12-31-relayout.html delete mode 100644 _posts/demos/2011-01-02-adding-items.html delete mode 100644 _posts/demos/2011-01-02-infinite-scroll.html delete mode 100644 _posts/demos/2011-01-11-images.html delete mode 100644 _posts/demos/2011-03-29-combination-filters.html delete mode 100644 _posts/demos/2011-06-13-hash-history.html delete mode 100644 _posts/demos/2011-09-30-fluid-responsive.html delete mode 100644 _posts/demos/2011-12-22-removing.html delete mode 100644 _posts/docs/2010-12-01-introduction.mdown delete mode 100644 _posts/docs/2010-12-03-options.mdown delete mode 100644 _posts/docs/2010-12-04-methods.mdown delete mode 100644 _posts/docs/2010-12-05-layout-modes.mdown delete mode 100644 _posts/docs/2010-12-06-filtering.mdown delete mode 100644 _posts/docs/2010-12-07-sorting.mdown delete mode 100644 _posts/docs/2010-12-09-animating.mdown delete mode 100644 _posts/docs/2010-12-10-adding-items.mdown delete mode 100644 _posts/docs/2011-05-25-extending-isotope.mdown delete mode 100644 _posts/docs/2011-06-16-hash-history-jquery-bbq.mdown delete mode 100644 _posts/docs/2011-12-11-help.mdown delete mode 100644 _posts/docs/2011-12-20-license.mdown delete mode 100644 _posts/pages/2011-01-01-2.html delete mode 100644 _posts/pages/2011-01-01-3.html delete mode 100644 _posts/pages/2011-01-01-4.html delete mode 100644 _posts/pages/2011-01-01-5.html delete mode 100644 _posts/pages/2011-01-01-6.html delete mode 100644 _posts/tests/2010-01-01-index.html delete mode 100644 _posts/tests/2011-03-27-destroy.html delete mode 100644 _posts/tests/2011-03-27-flash.html delete mode 100644 _posts/tests/2011-03-27-no-items.html delete mode 100644 _posts/tests/2011-04-26-item-position-data.html delete mode 100644 _posts/tests/2011-05-13-jquery-animation.html delete mode 100644 _posts/tests/2011-05-24-elements-complete-test.html delete mode 100644 _posts/tests/2011-05-31-tiny-text.html delete mode 100644 _posts/tests/2011-08-19-right-to-left.html delete mode 100644 _posts/tests/2011-08-23-unclickable-filtered.html delete mode 100644 _posts/tests/2011-10-19-callbacks.html delete mode 100644 _posts/tests/2012-02-07-onlayout.html delete mode 100644 _posts/tests/2012-08-11-combo-sort-history.html create mode 100644 bower.json delete mode 100644 css/style.css create mode 100644 examples/basic.html create mode 100644 examples/bottom-up.html create mode 100644 examples/examples.css create mode 100644 examples/right-to-left.html create mode 100644 examples/stamps.html delete mode 100644 index.html create mode 100644 isotope.js delete mode 100644 jquery.isotope.js delete mode 100644 jquery.isotope.min.js delete mode 100644 js/fake-element.js delete mode 100644 js/jquery-1.7.1.min.js delete mode 100644 js/jquery.ba-bbq.min.js delete mode 100644 js/jquery.infinitescroll.min.js delete mode 100644 js/make-big-graph-projects.js delete mode 100755 minify.sh create mode 100644 test/.jshintrc create mode 100644 test/basic-layout.js create mode 100644 test/gutter.js create mode 100644 test/helpers.js create mode 100644 test/index.html create mode 100644 test/stamp.js create mode 100644 test/tests.css diff --git a/CONTRIBUTING.mdown b/CONTRIBUTING.mdown index 5104bd6..a5f94b0 100644 --- a/CONTRIBUTING.mdown +++ b/CONTRIBUTING.mdown @@ -1,23 +1,13 @@ -## Development freeze - -I've got my hands full working on [Packery](http://metafizzy.co/blog/packery-preview) for the next couple months. - -+ :cry: Development on Isotope is stopped for a while -+ :sleeping: I won't be snappily responding to new issues -+ :smile: When development starts back up on Isotope, the gains made building Packery will be ported over to Isotope. - ## Submitting issues -### Read the Help page - -[The Help page in the docs](http://isotope.metafizzy.co/docs/help.html) covers most issues. Please look it over first before submitting an issue. - -### Provide an isolated example with a live URL - -**A live URL is required** for any bug report or personal support request. Try re-creating the issue in jsFiddle using this template: +### Reduced test case required -+ [jsFiddle jQuery Isotope template](http://jsfiddle.net/desandro/DQydj/) +All bug reports and problem issues require a reduced test case. See [CSS Tricks - Reduced Test Cases](http://css-tricks.com/reduced-test-cases/) on why they _"are the absolute, ... number one way to troubleshoot bugs."_ -### Look over the Issues Agreement ++ A reduced test case is an isolated example that demonstrates the bug or issue. ++ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling. ++ Any one of the [CodePen examples](http://codepen.io/desandro/tag/masonry-docs) in [the docs](http://masonry.desandro.com) may be forked and used to build your reduced test case. ++ A link to your site is **not** a reduced test case. ++ Until you provide a reduced test case, your issue will be closed. -I wrote an [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) that covers how to submit a good issue. +I realize this guideline may seem a little harsh, but it dramatically helps both of you and me. Reduced test cases help you identify the issue at hand and understand your own code. On my side, they greatly reduce the amount of time spent resolving the issue. diff --git a/README.mdown b/README.mdown index 2dbda34..a9d4244 100644 --- a/README.mdown +++ b/README.mdown @@ -1,64 +1,55 @@ -Isotope -======== +# Masonry -**An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.** +_Cascading grid layout library_ -This package has all the documentation and demos to get you started. +Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. -View this project live at [http://isotope.metafizzy.co](http://isotope.metafizzy.co). +For complete docs and demos, see [masonry.desandro.com](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy, -## Licensing +## Install -Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. +A packaged source file includes everything you need to use Masonry. -http://isotope.metafizzy.co/docs/license.html ++ [masonry.pkgd.min.js](http://masonry.desandro.com/masonry.pkgd.min.js) ++ [masonry.pkgd.js](http://masonry.desandro.com/masonry.pkgd.js) -For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free. +### Bower -## Support +If you are cool with the command line, install Masonry as a [Bower](http://bower.io) package: -Try the support forum at CodersClan. - -[![Get Support](http://codersclan.net/graphics/getSupport_github4.png)](http://codersclan.net/support/step1.php?repo_id=1) +``` bash +bower install masonry +``` -## Viewing this project locally +## Initialize -### Via download +### In JavaScript -You can download a zip of all the flat HTML files from [http://meta.metafizzy.co/files/isotope-site.zip](http://meta.metafizzy.co/files/isotope-site.zip). +``` js +var container = document.querySelector('#container'); +var msnry = new Masonry( container, { + // options... + itemSelector: '.item', + columnWidth: 200 +}); +``` -### Via Jekyll +### In HTML -The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and run Jekyll from Terminal: +Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`. -``` bash -git clone https://github.com/desandro/isotope.git -cd isotope/ -jekyll --server --auto +``` html +
+
+
+ ... +
``` -Then view the live site at [http://localhost:4000](http://localhost:4000). - -## Changelog - -View the [commit history](https://github.com/desandro/isotope/commits/master/jquery.isotope.js) for a complete robust list of changes to the script. +## License -+ **v1.5** - [2011-10-19](https://github.com/desandro/isotope/commit/2c789ecb5ec#jquery.isotope.js) - - add proper callback support that trigger after animation/transition -+ **v1.4** [2011-06-29](https://github.com/desandro/isotope/commit/8e2f51612eaf20e3031b81b8c5ff5e322cbb7b4f#jquery.isotope.js) - - shuffle method added - - inserting and appending positions items then reveals them -+ **v1.3** [2011-05-23](https://github.com/desandro/isotope/commit/a7cc0be2a0038c13a2955a889a873f63a39eb6c2#jquery.isotope.js) - - refactor layout mode API - - layoutModeResize -> layoutModeResizeChanged, which returns boolean -+ **v1.2** [2011-05-13](https://github.com/desandro/isotope/commit/b3cf6139d7641f282724a7a541b3bfb10d1bbf54#jquery.isotope.js) - - add updateOption method, for changing options after initialization -+ **v1.1** [2011-04-26](https://github.com/desandro/isotope/commit/3c551406ee1e4cd8345cdbe589c2d8d1e164b259#jquery.isotope.js) - - incremental additions, bug fixes, and refactorings -+ **v1.0** [2011-02-07](https://github.com/desandro/isotope/commit/78253dfb34808d9a677ae721e97c5afc08aa19b8#jquery.isotope.js) - - public release +Masonry is licensed MIT. Have at it. * * * -Copyright (c) 2011-2012 David DeSandro / Metafizzy LLC +Copyright (c) 2013 David DeSandro diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 46dfeee..0000000 --- a/_config.yml +++ /dev/null @@ -1,605 +0,0 @@ -name: Isotope -permalink: /:categories/:title.html -pygments: true -isotope_js: jquery.isotope.min.js -jquery_js: js/jquery-1.7.1.min.js -exclude: [ minify.sh ] - -random_order: [ 11, 91, 63, 38, 4, 25, 94, 29, 60, 48, 32, 67, 33, 37, 39, 84, 40, 7, 96, 8, 97, 9, 14, 99, 15, 19, 5, 36, 114, 20, 30, 80, 13, 47, 21, 3, 22, 31, 54, 66, 55, 71, 1, 23, 41, 70, 2, 77, 117, 79, 42, 95, 46, 50, 69, 53, 56, 72, 51, 73, 59, 74, 35, 49, 101, 88, 34, 76, 102, 75, 103, 81, 58, 6, 82, 26, 27, 44, 83, 45, 86, 68, 87, 104, 105, 10, 85, 43, 12, 109, 110, 113, 28, 106, 107, 108, 115, 62, 116, 0, 57, 111, 112, 61, 89, 90, 64, 65, 92, 93, 78, 24, 98, 100, 16, 17, 18, 52 ] - -best_of_order: [ 79, 51, 82, 47, 19, 74, 80, 50, 26, 70, 17, 36, 6, 92, 88 ] - -elements: - - categories: [ other, nonmetal ] - number: 1 - symbol: H - name: Hydrogen - weight: 1.00794 - - categories: [noble-gas, nonmetal] - number: 2 - symbol: He - name: Helium - weight: 4.002602 - - categories: [alkali, metal] - number: 3 - symbol: Li - name: Lithium - weight: 6.941 - - categories: [alkaline-earth, metal] - number: 4 - symbol: Be - name: Beryllium - weight: 9.012182 - - categories: [metalloid] - number: 5 - symbol: B - name: Boron - weight: 10.811 - - categories: [other, nonmetal] - number: 6 - symbol: C - name: Carbon - weight: 12.0107 - - categories: [other, nonmetal] - number: 7 - symbol: N - name: Nitrogen - weight: 14.0067 - - categories: [other, nonmetal] - number: 8 - symbol: O - name: Oxygen - weight: 15.9994 - - categories: [halogen, nonmetal] - number: 9 - symbol: F - name: Fluorine - weight: 18.9984032 - - categories: [noble-gas, nonmetal] - number: 10 - symbol: Ne - name: Neon - weight: 20.1797 - - categories: [alkali, metal] - number: 11 - symbol: Na - name: Sodium - weight: 22.98976928 - - categories: [alkaline-earth, metal] - number: 12 - symbol: Mg - name: Magnesium - weight: 24.305 - - categories: [post-transition, metal] - number: 13 - symbol: Al - name: Aluminium - weight: 26.9815386 - - categories: [metalloid] - number: 14 - symbol: Si - name: Silicon - weight: 28.0855 - - categories: [other, nonmetal] - number: 15 - symbol: P - name: Phosphorus - weight: 30.973762 - - categories: [other, nonmetal] - number: 16 - symbol: S - name: Sulfur - weight: 32.065 - - categories: [halogen, nonmetal] - number: 17 - symbol: Cl - name: Chlorine - weight: 35.453 - - categories: [noble-gas, nonmetal] - number: 18 - symbol: Ar - name: Argon - weight: 39.948 - - categories: [alkali, metal] - number: 19 - symbol: K - name: Potassium - weight: 39.0983 - - categories: [alkaline-earth, metal] - number: 20 - symbol: Ca - name: Calcium - weight: 40.078 - - categories: [transition, metal] - number: 21 - symbol: Sc - name: Scandium - weight: 44.955912 - - categories: [transition, metal] - number: 22 - symbol: Ti - name: Titanium - weight: 47.867 - - categories: [transition, metal] - number: 23 - symbol: V - name: Vanadium - weight: 50.9415 - - categories: [transition, metal] - number: 24 - symbol: Cr - name: Chromium - weight: 51.9961 - - categories: [transition, metal] - number: 25 - symbol: Mn - name: Manganese - weight: 54.938045 - - categories: [transition, metal] - number: 26 - symbol: Fe - name: Iron - weight: 55.845 - - categories: [transition, metal] - number: 27 - symbol: Co - name: Cobalt - weight: 58.933195 - - categories: [transition, metal] - number: 28 - symbol: Ni - name: Nickel - weight: 58.6934 - - categories: [transition, metal] - number: 29 - symbol: Cu - name: Copper - weight: 63.546 - - categories: [transition, metal] - number: 30 - symbol: Zn - name: Zinc - weight: 65.38 - - categories: [post-transition, metal] - number: 31 - symbol: Ga - name: Gallium - weight: 69.723 - - categories: [metalloid] - number: 32 - symbol: Ge - name: Germanium - weight: 72.64 - - categories: [metalloid] - number: 33 - symbol: As - name: Arsenic - weight: 74.9216 - - categories: [other, nonmetal] - number: 34 - symbol: Se - name: Selenium - weight: 78.96 - - categories: [halogen, nonmetal] - number: 35 - symbol: Br - name: Bromine - weight: 79.904 - - categories: [noble-gas, nonmetal] - number: 36 - symbol: Kr - name: Krypton - weight: 83.798 - - categories: [alkali, metal] - number: 37 - symbol: Rb - name: Rubidium - weight: 85.4678 - - categories: [alkaline-earth, metal] - number: 38 - symbol: Sr - name: Strontium - weight: 87.62 - - categories: [transition, metal] - number: 39 - symbol: Y - name: Yttrium - weight: 88.90585 - - categories: [transition, metal] - number: 40 - symbol: Zr - name: Zirconium - weight: 91.224 - - categories: [transition, metal] - number: 41 - symbol: Nb - name: Niobium - weight: 92.90638 - - categories: [transition, metal] - number: 42 - symbol: Mo - name: Molybdenum - weight: 95.96 - - categories: [transition, metal] - number: 43 - symbol: Tc - name: Technetium - weight: (98) - - categories: [transition, metal] - number: 44 - symbol: Ru - name: Ruthenium - weight: 101.07 - - categories: [transition, metal] - number: 45 - symbol: Rh - name: Rhodium - weight: 102.9055 - - categories: [transition, metal] - number: 46 - symbol: Pd - name: Palladium - weight: 106.42 - - categories: [transition, metal] - number: 47 - symbol: Ag - name: Silver - weight: 107.8682 - - categories: [transition, metal] - number: 48 - symbol: Cd - name: Cadmium - weight: 112.411 - - categories: [post-transition, metal] - number: 49 - symbol: In - name: Indium - weight: 114.818 - - categories: [post-transition, metal] - number: 50 - symbol: Sn - name: Tin - weight: 118.71 - - categories: [metalloid] - number: 51 - symbol: Sb - name: Antimony - weight: 121.76 - - categories: [metalloid] - number: 52 - symbol: Te - name: Tellurium - weight: 127.6 - - categories: [halogen, nonmetal] - number: 53 - symbol: I - name: Iodine - weight: 126.90447 - - categories: [noble-gas, nonmetal] - number: 54 - symbol: Xe - name: Xenon - weight: 131.293 - - categories: [alkali, metal] - number: 55 - symbol: Cs - name: Caesium - weight: 132.9054519 - - categories: [alkaline-earth, metal] - number: 56 - symbol: Ba - name: Barium - weight: 137.327 - - categories: [lanthanoid, metal, inner-transition] - number: 57 - symbol: La - name: Lanthanum - weight: 138.90547 - - categories: [lanthanoid, metal, inner-transition] - number: 58 - symbol: Ce - name: Cerium - weight: 140.116 - - categories: [lanthanoid, metal, inner-transition] - number: 59 - symbol: Pr - name: Praseodymium - weight: 140.90765 - - categories: [lanthanoid, metal, inner-transition] - number: 60 - symbol: Nd - name: Neodymium - weight: 144.242 - - categories: [lanthanoid, metal, inner-transition] - number: 61 - symbol: Pm - name: Promethium - weight: (145) - - categories: [lanthanoid, metal, inner-transition] - number: 62 - symbol: Sm - name: Samarium - weight: 150.36 - - categories: [lanthanoid, metal, inner-transition] - number: 63 - symbol: Eu - name: Europium - weight: 151.964 - - categories: [lanthanoid, metal, inner-transition] - number: 64 - symbol: Gd - name: Gadolinium - weight: 157.25 - - categories: [lanthanoid, metal, inner-transition] - number: 65 - symbol: Tb - name: Terbium - weight: 158.92535 - - categories: [lanthanoid, metal, inner-transition] - number: 66 - symbol: Dy - name: Dysprosium - weight: 162.5 - - categories: [lanthanoid, metal, inner-transition] - number: 67 - symbol: Ho - name: Holmium - weight: 164.93032 - - categories: [lanthanoid, metal, inner-transition] - number: 68 - symbol: Er - name: Erbium - weight: 167.259 - - categories: [lanthanoid, metal, inner-transition] - number: 69 - symbol: Tm - name: Thulium - weight: 168.93421 - - categories: [lanthanoid, metal, inner-transition] - number: 70 - symbol: Yb - name: Ytterbium - weight: 173.054 - - categories: [lanthanoid, metal, inner-transition] - number: 71 - symbol: Lu - name: Lutetium - weight: 174.9668 - - categories: [transition, metal] - number: 72 - symbol: Hf - name: Hafnium - weight: 178.49 - - categories: [transition, metal] - number: 73 - symbol: Ta - name: Tantalum - weight: 180.94788 - - categories: [transition, metal] - number: 74 - symbol: W - name: Tungsten - weight: 183.84 - - categories: [transition, metal] - number: 75 - symbol: Re - name: Rhenium - weight: 186.207 - - categories: [transition, metal] - number: 76 - symbol: Os - name: Osmium - weight: 190.23 - - categories: [transition, metal] - number: 77 - symbol: Ir - name: Iridium - weight: 192.217 - - categories: [transition, metal] - number: 78 - symbol: Pt - name: Platinum - weight: 195.084 - - categories: [transition, metal] - number: 79 - symbol: Au - name: Gold - weight: 196.966569 - - categories: [transition, metal] - number: 80 - symbol: Hg - name: Mercury - weight: 200.59 - - categories: [post-transition, metal] - number: 81 - symbol: Tl - name: Thallium - weight: 204.3833 - - categories: [post-transition, metal] - number: 82 - symbol: Pb - name: Lead - weight: 207.2 - - categories: [post-transition, metal] - number: 83 - symbol: Bi - name: Bismuth - weight: 208.9804 - - categories: [metalloid] - number: 84 - symbol: Po - name: Polonium - weight: (209) - - categories: [halogen, nonmetal] - number: 85 - symbol: At - name: Astatine - weight: (210) - - categories: [noble-gas, nonmetal] - number: 86 - symbol: Rn - name: Radon - weight: (222) - - categories: [alkali, metal] - number: 87 - symbol: Fr - name: Francium - weight: (223) - - categories: [alkaline-earth, metal] - number: 88 - symbol: Ra - name: Radium - weight: (226) - - categories: [actinoid, metal, inner-transition] - number: 89 - symbol: Ac - name: Actinium - weight: (227) - - categories: [actinoid, metal, inner-transition] - number: 90 - symbol: Th - name: Thorium - weight: 232.03806 - - categories: [actinoid, metal, inner-transition] - number: 91 - symbol: Pa - name: Protactinium - weight: 231.03588 - - categories: [actinoid, metal, inner-transition] - number: 92 - symbol: U - name: Uranium - weight: 238.02891 - - categories: [actinoid, metal, inner-transition] - number: 93 - symbol: Np - name: Neptunium - weight: (237) - - categories: [actinoid, metal, inner-transition] - number: 94 - symbol: Pu - name: Plutonium - weight: (244) - - categories: [actinoid, metal, inner-transition] - number: 95 - symbol: Am - name: Americium - weight: (243) - - categories: [actinoid, metal, inner-transition] - number: 96 - symbol: Cm - name: Curium - weight: (247) - - categories: [actinoid, metal, inner-transition] - number: 97 - symbol: Bk - name: Berkelium - weight: (247) - - categories: [actinoid, metal, inner-transition] - number: 98 - symbol: Cf - name: Californium - weight: (251) - - categories: [actinoid, metal, inner-transition] - number: 99 - symbol: Es - name: Einsteinium - weight: (252) - - categories: [actinoid, metal, inner-transition] - number: 100 - symbol: Fm - name: Fermium - weight: (257) - - categories: [actinoid, metal, inner-transition] - number: 101 - symbol: Md - name: Mendelevium - weight: (258) - - categories: [actinoid, metal, inner-transition] - number: 102 - symbol: 'No' - name: Nobelium - weight: (259) - - categories: [actinoid, metal, inner-transition] - number: 103 - symbol: Lr - name: Lawrencium - weight: (262) - - categories: [transition, metal] - number: 104 - symbol: Rf - name: Rutherfordium - weight: (267) - - categories: [transition, metal] - number: 105 - symbol: Db - name: Dubnium - weight: (268) - - categories: [transition, metal] - number: 106 - symbol: Sg - name: Seaborgium - weight: (271) - - categories: [transition, metal] - number: 107 - symbol: Bh - name: Bohrium - weight: (272) - - categories: [transition, metal] - number: 108 - symbol: Hs - name: Hassium - weight: (270) - - categories: [transition, metal] - number: 109 - symbol: Mt - name: Meitnerium - weight: (276) - - categories: [transition, metal] - number: 110 - symbol: Ds - name: Darmstadtium - weight: (281) - - categories: [transition, metal] - number: 111 - symbol: Rg - name: Roentgenium - weight: (280) - - categories: [transition, metal] - number: 112 - symbol: Cn - name: Copernicium - weight: (285) - - categories: [post-transition, metal] - number: 113 - symbol: Uut - name: Ununtrium - weight: (284) - - categories: [post-transition, metal] - number: 114 - symbol: Uuq - name: Ununquadium - weight: (289) - - categories: [post-transition, metal] - number: 115 - symbol: Uup - name: Ununpentium - weight: (288) - - categories: [post-transition, metal] - number: 116 - symbol: Uuh - name: Ununhexium - weight: (293) - - categories: [halogen, nonmetal] - number: 117 - symbol: Uus - name: Ununseptium - weight: (294) - - categories: [noble-gas, nonmetal] - number: 118 - symbol: Uuo - name: Ununoctium - weight: (294) - - - diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js deleted file mode 100644 index 699c55e..0000000 --- a/_includes/add-buttons.js +++ /dev/null @@ -1,14 +0,0 @@ - - $('#insert a').click(function(){ - var $newEls = $( fakeElement.getGroup() ); - $container.isotope( 'insert', $newEls ); - - return false; - }); - - $('#append a').click(function(){ - var $newEls = $( fakeElement.getGroup() ); - $container.append( $newEls ).isotope( 'appended', $newEls ); - - return false; - }); diff --git a/_includes/change-sizes.js b/_includes/change-sizes.js deleted file mode 100644 index 2267f3b..0000000 --- a/_includes/change-sizes.js +++ /dev/null @@ -1,14 +0,0 @@ - - // change size of clicked element - $container.delegate( '.element', 'click', function(){ - $(this).toggleClass('large'); - $container.isotope('reLayout'); - }); - - // toggle variable sizes of all elements - $('#toggle-sizes').find('a').click(function(){ - $container - .toggleClass('variable-sizes') - .isotope('reLayout'); - return false; - }); diff --git a/_includes/developer-buy-button.html b/_includes/developer-buy-button.html deleted file mode 100644 index d9cbc6d..0000000 --- a/_includes/developer-buy-button.html +++ /dev/null @@ -1 +0,0 @@ -Buy Developer License - $25.00 diff --git a/_includes/element-partial.html b/_includes/element-partial.html deleted file mode 100644 index 6ddc790..0000000 --- a/_includes/element-partial.html +++ /dev/null @@ -1,7 +0,0 @@ - {% capture classnames %}{% for cat in element.categories %}{{ cat }} {% endfor %} {% if page.infinite_scroll %} width2 height2 {% endif %} {% endcapture %} -
-

{{ element.number }}

-

{{ element.symbol }}

-

{{ element.name }}

-

{{ element.weight }}

-
\ No newline at end of file diff --git a/_includes/elements-demo-foot.html b/_includes/elements-demo-foot.html deleted file mode 100644 index c06d696..0000000 --- a/_includes/elements-demo-foot.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - \ No newline at end of file diff --git a/_includes/elements-demo-head.html b/_includes/elements-demo-head.html deleted file mode 100644 index 16f527d..0000000 --- a/_includes/elements-demo-head.html +++ /dev/null @@ -1,22 +0,0 @@ -
-

Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

-
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - - {% include layout-options.html %} - -

Etc

- - - -
\ No newline at end of file diff --git a/_includes/filter-buttons.html b/_includes/filter-buttons.html deleted file mode 100644 index 1e95eb3..0000000 --- a/_includes/filter-buttons.html +++ /dev/null @@ -1,14 +0,0 @@ - -

Filters

- - diff --git a/_includes/inf-scroll-page.html b/_includes/inf-scroll-page.html deleted file mode 100644 index c074fc3..0000000 --- a/_includes/inf-scroll-page.html +++ /dev/null @@ -1,21 +0,0 @@ -
- {% assign page_position = page.page_position %} - {% for element in site.elements limit:20 offset:page.page_position %} - {% include element-partial.html %} - {% endfor %} -
- - - - \ No newline at end of file diff --git a/_includes/layout-change.js b/_includes/layout-change.js deleted file mode 100644 index 4dcf825..0000000 --- a/_includes/layout-change.js +++ /dev/null @@ -1,24 +0,0 @@ - - // change layout - var isHorizontal = false; - function changeLayoutMode( $link, options ) { - var wasHorizontal = isHorizontal; - isHorizontal = $link.hasClass('horizontal'); - - if ( wasHorizontal !== isHorizontal ) { - // orientation change - // need to do some clean up for transitions and sizes - var style = isHorizontal ? - { height: '80%', width: $container.width() } : - { width: 'auto' }; - // stop any animation on container height / width - $container.filter(':animated').stop(); - // disable transition, apply revised style - $container.addClass('no-transition').css( style ); - setTimeout(function(){ - $container.removeClass('no-transition').isotope( options ); - }, 100 ) - } else { - $container.isotope( options ); - } - } diff --git a/_includes/layout-options.html b/_includes/layout-options.html deleted file mode 100644 index e806a91..0000000 --- a/_includes/layout-options.html +++ /dev/null @@ -1,13 +0,0 @@ - -

Layout modes

- - diff --git a/_includes/option-set-buttons.js b/_includes/option-set-buttons.js deleted file mode 100644 index 0b63054..0000000 --- a/_includes/option-set-buttons.js +++ /dev/null @@ -1,31 +0,0 @@ - - var $optionSets = $('#options .option-set'), - $optionLinks = $optionSets.find('a'); - - $optionLinks.click(function(){ - var $this = $(this); - // don't proceed if already selected - if ( $this.hasClass('selected') ) { - return false; - } - var $optionSet = $this.parents('.option-set'); - $optionSet.find('.selected').removeClass('selected'); - $this.addClass('selected'); - - // make option object dynamically, i.e. { filter: '.my-filter-class' } - var options = {}, - key = $optionSet.attr('data-option-key'), - value = $this.attr('data-option-value'); - // parse 'false' as false boolean - value = value === 'false' ? false : value; - options[ key ] = value; - if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { - // changes in layout modes need extra logic - changeLayoutMode( $this, options ) - } else { - // otherwise, apply new options - $container.isotope( options ); - } - - return false; - }); diff --git a/_includes/org-buy-button.html b/_includes/org-buy-button.html deleted file mode 100644 index 07ca62c..0000000 --- a/_includes/org-buy-button.html +++ /dev/null @@ -1 +0,0 @@ -Buy Organization License - $90.00 diff --git a/_includes/random-sizes.js b/_includes/random-sizes.js deleted file mode 100644 index 82e106e..0000000 --- a/_includes/random-sizes.js +++ /dev/null @@ -1,12 +0,0 @@ - - // add randomish size classes - $container.find('.element').each(function(){ - var $this = $(this), - number = parseInt( $this.find('.number').text(), 10 ); - if ( number % 7 % 2 === 1 ) { - $this.addClass('width2'); - } - if ( number % 3 === 0 ) { - $this.addClass('height2'); - } - }); \ No newline at end of file diff --git a/_includes/sort-buttons.html b/_includes/sort-buttons.html deleted file mode 100644 index da9ca6f..0000000 --- a/_includes/sort-buttons.html +++ /dev/null @@ -1,19 +0,0 @@ - -

Sort

- - - -

Sort direction

- - diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index c009599..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - {% if page.category != 'homepage' %}{% assign root_path = '../' %}{% assign link_path = '..' %}{% else %}{% assign link_path = '.' %}{% endif %} - - {{ page.title }}{% if page.category != 'homepage' %} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}{% endif %} - - - - - - - - - - - - -
- {% if page.category != 'homepage' %} -

{{ page.title }}

- {% endif %} - - {{ content }} - - - -
- - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-05-18-centered-masonry.html b/_posts/custom-layout-modes/2011-05-18-centered-masonry.html deleted file mode 100644 index c457fb4..0000000 --- a/_posts/custom-layout-modes/2011-05-18-centered-masonry.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Centered Masonry -layout: default -category: custom-layout-modes ---- - - - -
-

Modified masonry layout mode for centered container.

-
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-05-22-category-rows.html b/_posts/custom-layout-modes/2011-05-22-category-rows.html deleted file mode 100644 index 03e7e0a..0000000 --- a/_posts/custom-layout-modes/2011-05-22-category-rows.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Category rows -layout: default -category: custom-layout-modes ---- - -
-

This demo uses a custom layout mode, categoryRows that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.

-
- -
- - {% include filter-buttons.html %} - -

Etc

- - -
- -
- {% for elem_number in site.random_order | limit:60 %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html b/_posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html deleted file mode 100644 index 7d3d5fb..0000000 --- a/_posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Masonry corner stamp -layout: default -category: custom-layout-modes ---- - - - -
-

Modified masonry layout mode for corner stamp. An element can be "stamped" in the right top corner.

-

Set cornerStampSelector within masonry options. itemSelector needs to be set as well.

- -{% highlight javascript %} - -$('#container').isotope({ - itemSelector: '.item', - masonry: { - columnWidth: 120, - cornerStampSelector: '.corner-stamp' - } -}); - -{% endhighlight %} - -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- -
corner stamp here.
- - {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-07-14-masonry-gutters.html b/_posts/custom-layout-modes/2011-07-14-masonry-gutters.html deleted file mode 100644 index 45fe110..0000000 --- a/_posts/custom-layout-modes/2011-07-14-masonry-gutters.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Masonry gutters -layout: default -category: custom-layout-modes ---- - - - -
-

Modified masonry layout mode for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.

-

Set gutterWidth within masonry options.

- -{% highlight javascript %} - -$('#container').isotope({ - masonry: { - columnWidth: 110, - gutterWidth: 10 - } -}); - -{% endhighlight %} - -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-10-18-spine-align.html b/_posts/custom-layout-modes/2011-10-18-spine-align.html deleted file mode 100644 index 6389602..0000000 --- a/_posts/custom-layout-modes/2011-10-18-spine-align.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Spine align -layout: default -category: custom-layout-modes ---- - -
-

Custom layout mode that aligns items to the center, placing them either left or right of the spine. gutterWidth option available.

- -{% highlight javascript %} - -$container.isotope({ - layoutMode: 'spineAlign', - spineAlign: { - gutterWidth: 20 - }, - // options... -}); - -{% endhighlight %} - -

To use this layout mode, grab the $.Isotope.prototype methods from the script at the bottom of this page's source.

- -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/custom-layout-modes/2011-12-05-big-graph.html b/_posts/custom-layout-modes/2011-12-05-big-graph.html deleted file mode 100644 index 6d16185..0000000 --- a/_posts/custom-layout-modes/2011-12-05-big-graph.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: BIG Graph -layout: default -category: custom-layout-modes ---- - -
-

Custom layout mode to replicate the Flash interface of big.dk. Similiar to Category rows, item elements are grouped by their sorting data into columns.

- -{% highlight javascript %} - -$container.isotope({ - layoutMode: 'bigGraph', - bigGraph: { - columnWidth: 45, // size of item - rowHeight: 45, // size of item - maxRows: 11, // max number of items vertically - gutterWidth: { // width of gutter, needs to match getSortData names - year: 0, - scale: 60, - program: 40, - status: 60, - title: 0 - } - }, - // options... -}); - -{% endhighlight %} - -

To use this layout mode, grab the $.Isotope.prototype methods from the script at the bottom of this page's source.

- -
- -
- -

Sort

- - - -
- -
- -
- - - - - - diff --git a/_posts/custom-layout-modes/2012-01-03-masonry-column-shift.html b/_posts/custom-layout-modes/2012-01-03-masonry-column-shift.html deleted file mode 100644 index 1c4ffcd..0000000 --- a/_posts/custom-layout-modes/2012-01-03-masonry-column-shift.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Masonry Column Shift -layout: default -category: custom-layout-modes ---- - - - -
-

Custom layout mode masonryColumnShift. Enabled columns of a Masonry layout to be shifted and not affect other columns. After the size of an item element has changed, you can trigger a special columnShiftOfItem method that will push the column down. This layout only works with item elements that have the same width

- -{% highlight javascript %} - -var $container = $('#container'); - -$container.isotope({ - itemSelector: '.shifty-item', - layoutMode: 'masonryColumnShift' -}); - -$container.find('.shifty-item').hover( - function() { - $(this).css({ height: "+=100" }); - // note that element is passed in, not jQuery object - $container.isotope( 'shiftColumnOfItem', this ); - }, - function() { - $(this).css({ height: "-=100" }); - $container.isotope( 'shiftColumnOfItem', this ); - } -); - -{% endhighlight %} - -
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - - - - \ No newline at end of file diff --git a/_posts/demos/2010-12-12-basic.html b/_posts/demos/2010-12-12-basic.html deleted file mode 100644 index 829c2c1..0000000 --- a/_posts/demos/2010-12-12-basic.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Basic -layout: default -category: demos ---- - -
-

This is a basic demo of Isotope. Resize the browser window to see the layout animate.

-
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - - diff --git a/_posts/demos/2010-12-13-elements-complete.html b/_posts/demos/2010-12-13-elements-complete.html deleted file mode 100644 index 9241f8f..0000000 --- a/_posts/demos/2010-12-13-elements-complete.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Elements Complete -layout: default -category: demos ---- - -{% include elements-demo-head.html %} - -
- {% for elem_number in site.random_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- -{% include elements-demo-foot.html %} \ No newline at end of file diff --git a/_posts/demos/2010-12-16-elements-partial.html b/_posts/demos/2010-12-16-elements-partial.html deleted file mode 100644 index bbeb6d9..0000000 --- a/_posts/demos/2010-12-16-elements-partial.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Elements Partial -layout: default -category: demos ---- - -{% include elements-demo-head.html %} - -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- -{% include elements-demo-foot.html %} diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html deleted file mode 100644 index 8c71191..0000000 --- a/_posts/demos/2010-12-29-layout-modes.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Layout modes -layout: default -category: demos ---- - -
-

Isotope has a versatile layout engine that can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height.

-

See docs on layout modes.

-
- -
- - {% include layout-options.html %} - -
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - - diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html deleted file mode 100644 index b277bf2..0000000 --- a/_posts/demos/2010-12-30-filtering.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Filtering -layout: default -category: demos ---- - -
-

Filtering hides and reveals item elements.

-

See docs on filtering.

-
- - -
- - {% include filter-buttons.html %} - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html deleted file mode 100644 index 137ed65..0000000 --- a/_posts/demos/2010-12-30-sorting.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Sorting -layout: default -category: demos ---- - -
-

Sort item elements based on any data you can extract from them.

-

See docs on sorting.

-
- -
- - {% include sort-buttons.html %} - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html deleted file mode 100644 index 95b9c39..0000000 --- a/_posts/demos/2010-12-31-relayout.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: reLayout -layout: default -category: demos ---- - -
-

Use the reLayout method to easily arrange item elements after a change.

-

Click on any item element to change its size.

-
- -
- -
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - - diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html deleted file mode 100644 index 6aa9e94..0000000 --- a/_posts/demos/2011-01-02-adding-items.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Adding items -layout: default -category: demos ---- - -
-

The insert method will append, add items to the widget, filter, sort, and then layout all items

-

The appended method adds items to the widget, and then lays out only the new items.

-

The reloadItems method re-collects all items in their current order in the DOM, which can be useful for prepending items.

-

See docs on adding items.

-
- -
- -
- -
- {% for elem_number in site.best_of_order :limit 10 %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - \ No newline at end of file diff --git a/_posts/demos/2011-01-02-infinite-scroll.html b/_posts/demos/2011-01-02-infinite-scroll.html deleted file mode 100644 index 882539b..0000000 --- a/_posts/demos/2011-01-02-infinite-scroll.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Infinite Scroll -layout: default -category: demos -infinite_scroll: true ---- - -
-

Isotope is interoperable with Infinite Scroll by Paul Irish. Use the appended method to add new items to the Isotope layout. CSS transitions have been disabled on the container element to avoid triggering AJAX call prematurely.

-
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - - \ No newline at end of file diff --git a/_posts/demos/2011-01-11-images.html b/_posts/demos/2011-01-11-images.html deleted file mode 100644 index ffae757..0000000 --- a/_posts/demos/2011-01-11-images.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Images -layout: default -category: demos -photos: - - Stanley - - Officer - - Tony - - Kendra - - Giraffe - - Gavin - - Anita - - Take My Portrait - - Wonder ---- - -
-

Isotope is triggered after all images are loaded with the imagesLoaded plugin.

-
- -
- {% for photo in page.photos %} -
- {{ photo }} -
- {% endfor %} -
- - - - \ No newline at end of file diff --git a/_posts/demos/2011-03-29-combination-filters.html b/_posts/demos/2011-03-29-combination-filters.html deleted file mode 100644 index 83c08c3..0000000 --- a/_posts/demos/2011-03-29-combination-filters.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Combination filters -layout: default -category: demos -schema: - - name: color - filters: [ red, blue, yellow ] - - name: size - filters: [ small, wide, tall, big ] - - name: shape - filters : [ round, square ] ---- - -
-

Filters can be combined. In addition to filtering for just .red or .tall, you can pass in a filter selector of both: .red.tall.

-
- -
- -

Filters

- - {% for group in page.schema %} -
-

{{ group.name }}

-
    -
  • any - {% for filter in group.filters %} -
  • {{ filter }} - {% endfor %} -
-
- {% endfor %} - -
- -
- {% for size in page.schema[1].filters %} - {% for shape in page.schema[2].filters %} - {% for color in page.schema[0].filters %} -
- {% endfor %} - {% endfor %} - {% endfor %} - - - {% for color in page.schema[0].filters %} - {% for shape in page.schema[2].filters %} - {% for size in page.schema[1].filters %} -
- {% endfor %} - {% endfor %} - {% endfor %} - -
- - - - \ No newline at end of file diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html deleted file mode 100644 index 8a06a44..0000000 --- a/_posts/demos/2011-06-13-hash-history.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Hash history -layout: default -category: demos ---- - -
-

jQuery BBQ by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button, or copying the URL and pasting it into a new window.

-
- -
- -

Filters

- - - -

Sort

- - - -

Sort direction

- - - -

Layout modes

- - - -
- -
- {% for elem_number in site.random_order | limit:60 %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - diff --git a/_posts/demos/2011-09-30-fluid-responsive.html b/_posts/demos/2011-09-30-fluid-responsive.html deleted file mode 100644 index bab2543..0000000 --- a/_posts/demos/2011-09-30-fluid-responsive.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Fluid / responsive -layout: default -category: demos ---- - - - -
-

This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.

- -{% highlight javascript %} - -var $container = $('#container') -// initialize Isotope -$container.isotope({ - // options... - resizable: false, // disable normal resizing - // set columnWidth to a percentage of container width - masonry: { columnWidth: $container.width() / 5 } -}); - -// update columnWidth on window resize -$(window).smartresize(function(){ - $container.isotope({ - // update columnWidth to a percentage of container width - masonry: { columnWidth: $container.width() / 5 } - }); -}); - -{% endhighlight %} - -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/demos/2011-12-22-removing.html b/_posts/demos/2011-12-22-removing.html deleted file mode 100644 index 30144cc..0000000 --- a/_posts/demos/2011-12-22-removing.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Removing -layout: default -category: demos ---- - -
-

Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.

-
- - -
- - -

Remove

- - - - - -
- -
- {% for element in site.elements limit:40 %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown deleted file mode 100644 index 1e77440..0000000 --- a/_posts/docs/2010-12-01-introduction.mdown +++ /dev/null @@ -1,172 +0,0 @@ ---- - -title: Introduction -category: docs -layout: default -toc: - - { title: Features, anchor: features } - - { title: Licensing, anchor: licensing } - - { title: Getting started, anchor: getting_started } - - { title: Code repository, anchor: code_repository } - - { title: A word about moderation, anchor: moderation } - - { title: Acknowledgments, anchor: acknowledgments } - - ---- - -

Isotope: An exquisite jQuery plugin for magical layouts

- -## Features - -+ [**Layout modes**](layout-modes.html): Intelligent, dynamic layouts that can't be achieved with CSS alone. -+ [**Filtering**](filtering.html): Hide and reveal item elements easily with jQuery selectors. -+ [**Sorting**](sorting.html): Re-order item elements with sorting. Sorting data can be extracted from just about anything. -+ **Interoperability**: features can be utilized together for a cohesive experience. -+ **Progressive enhancement**: Isotope's [animation engine](animating.html) takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers. - -## Commercial Licensing - -Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. [Read more about Isotope commercial licensing.](license.html) - - -

{% include developer-buy-button.html %} {% include org-buy-button.html %}

- -Purchasing accepts most credit cards and takes seconds. Once purchased, you'll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications. - -For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free. - -### Purchase via PayPal - -If you're having trouble using a credit card, try purchasing a license via PayPal: - -+ [Buy Developer License via PayPal](http://pul.ly/b/13620) -+ [Buy Organization License via PayPal](http://pul.ly/b/36595) - -## Getting started - -Isotope requires jQuery 1.4.3 and greater. - -### Markup - -Isotope works on a container element with a group of similar child items. - -{% highlight html %} - -
-
...
-
...
-
...
- ... -
- -{% endhighlight %} - -### Script - -{% highlight javascript %} - -$('#container').isotope({ - // options - itemSelector : '.item', - layoutMode : 'fitRows' -}); - -{% endhighlight %} - -[**See Demo: Basic**](../demos/basic.html) - -There are a number of [options](options.html) you can specify. Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html), and [sort items](sorting.html). - -Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed. - -{% highlight javascript %} - -$('#container').isotope({ filter: '.my-selector' }, function( $items ) { - var id = this.attr('id'), - len = $items.length; - console.log( 'Isotope has filtered for ' + len + ' items in #' + id ); -}); - -{% endhighlight %} - -Within this callback this refers to the container, and `$items` refers to the item elements. Both of these are jQuery objects and do _not_ need to be put in jQuery wrappers. - -### CSS - -Add these styles to your CSS for [filtering](filtering.html), [animation](animating.html) with CSS transitions, and [adding items](adding-items.html). - -{% highlight css %} - -/**** Isotope Filtering ****/ - -.isotope-item { - z-index: 2; -} - -.isotope-hidden.isotope-item { - pointer-events: none; - z-index: 1; -} - -/**** Isotope CSS3 transitions ****/ - -.isotope, -.isotope .isotope-item { - -webkit-transition-duration: 0.8s; - -moz-transition-duration: 0.8s; - -ms-transition-duration: 0.8s; - -o-transition-duration: 0.8s; - transition-duration: 0.8s; -} - -.isotope { - -webkit-transition-property: height, width; - -moz-transition-property: height, width; - -ms-transition-property: height, width; - -o-transition-property: height, width; - transition-property: height, width; -} - -.isotope .isotope-item { - -webkit-transition-property: -webkit-transform, opacity; - -moz-transition-property: -moz-transform, opacity; - -ms-transition-property: -ms-transform, opacity; - -o-transition-property: -o-transform, opacity; - transition-property: transform, opacity; -} - -/**** disabling Isotope CSS3 transitions ****/ - -.isotope.no-transition, -.isotope.no-transition .isotope-item, -.isotope .isotope-item.no-transition { - -webkit-transition-duration: 0s; - -moz-transition-duration: 0s; - -ms-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; -} - -{% endhighlight %} - -## Code repository - -This project lives on GitHub at [github.com/desandro/isotope](http://github.com/desandro/isotope). There you can grab the latest code and follow development. - -## A word about moderation {: #moderation} - -Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn't mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface. - -## Acknowledgments - -+ [**"Cowboy" Ben Alman**](http://benalman.com/) for [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) (included with docs) -+ [**Louis-Rémi Babé**](http://twitter.com/Louis_Remi) for [jQuery smartresize](https://github.com/louisremi/jquery-smartresize) (used within Isotope) and for [jQuery transform](https://github.com/louisremi/jquery.transform.js) which clued me in to using jQuery 1.4.3's CSS hooks -+ [**Jacek Galanciak**](http://razorjack.net/) for [jQuery Quicksand](http://razorjack.net/quicksand/), an early kernel of inspiration -+ [**Ralph Holzmann**](http://twitter.com/#!/ralphholzmann) for re-writing the [jQuery Plugins/Authoring tutorial](http://docs.jquery.com/Plugins/Authoring) and opened my eyes to [Plugin Methods](http://docs.jquery.com/Plugins/Authoring#Plugin_Methods) pattern -+ [**Eric Hynds**](http://www.erichynds.com/) for his article [Using $.widget.bridge Outside of the Widget Factory](http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/) which provided the architecture for Isotope -+ [**Paul Irish**](http://paul-irish.com) for [Infinite Scroll](http://infinite-scroll.com) (included with docs), the [imagesLoaded plugin](http://gist.github.com/268257) (included with Isotope), and [Debounced resize() plugin](http://paulirish.com/demo/resize) (provided base for smartresize) -+ The [**jQuery UI Team**](http://jqueryui.com/about) for [$.widget.bridge](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L113-155) (partially used within Isotope) -+ The Modernizr team for [Modernizr](http://www.modernizr.com/) (partially used within Isotope) -+ [**Juriy Zaytsev aka "kangax"**](http://perfectionkills.com) for [getStyleProperty](http://perfectionkills.com/feature-testing-css-properties/) (used within Isotope) - - diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown deleted file mode 100644 index 984e3ad..0000000 --- a/_posts/docs/2010-12-03-options.mdown +++ /dev/null @@ -1,354 +0,0 @@ ---- - -title: Options -category: docs -layout: default -body_class: option-def -toc: - - { title: animationEngine, anchor: animationengine } - - { title: animationOptions, anchor: animationoptions } - - { title: containerClass, anchor: containerclass } - - { title: containerStyle, anchor: containerstyle } - - { title: filter, anchor: filter } - - { title: getSortData, anchor: getsortdata } - - { title: hiddenClass, anchor: hiddenclass } - - { title: hiddenStyle, anchor: hiddenstyle } - - { title: itemClass, anchor: itemclass } - - { title: itemPositionDataEnabled, anchor: itempositiondataenabled } - - { title: itemSelector, anchor: itemselector } - - { title: layoutMode, anchor: layoutmode } - - { title: onLayout, anchor: onlayout } - - { title: resizable, anchor: resizable } - - { title: resizesContainer, anchor: resizescontainer } - - { title: sortAscending, anchor: sortascending } - - { title: sortBy, anchor: sortby } - - { title: transformsEnabled, anchor: transformsenabled } - - { title: visibleStyle, anchor: visiblestyle } - - { title: Layout-specific options, anchor: layoutspecific_options } - ---- - -
-
option
-
Type
-
Default
-
- -## animationEngine - -
-
animationEngine
-
String
-
'best-available'
-
- -Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation. - -### Values {#animationEngine-values} - - -+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`. -+ `'css'`: Isotope uses `.css()` -+ `'jquery'`: Isotope uses `.animate()` - -## animationOptions - -
-
animationOptions
-
Object
-
{ queue: false, duration: 800 }
-
- -When jQuery is the animation engine (see above), these options will be used in .animate(). See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details. - -### Example - -{% highlight javascript %} - -$('#container').isotope({ - animationOptions: { - duration: 750, - easing: 'linear', - queue: false - } -}); - -{% endhighlight %} - -## containerClass - -
-
containerClass
-
String
-
'isotope'
-
- -The class applied to the container element. - -## containerStyle - -
-
containerStyle
-
Object
-
{ position: 'relative', overflow: 'hidden' }
-
- -CSS styles applied to the container element. Relative positioning enables absolute positioning on child items. Hidden overflow ensures that filtered items that lie outside the container do not interfer with subsequent content. - -## filter - -
-
filter
-
Selector
-
- -Setting a filter with show item elements that match the selector, and hide elements that do not match. See [docs on filering](filtering.html) for more details. - -[**See Demo: Filtering**](../demos/filtering.html) - -### Values {#filter-values} - - - - - -## getSortData - -
-
getSortData
-
Object
-
- -An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value. See [docs on sorting](sorting.html) for more details. - -[**See Demo: Sorting**](../demos/sorting.html) - -### Example - -{% highlight javascript %} - -$('#container').isotope({ - getSortData : { - symbol : function( $elem ) { - return $elem.attr('data-symbol'); - }, - number : function( $elem ) { - return parseInt( $elem.find('.number').text(), 10 ); - }, - name : function ( $elem ) { - return $elem.find('.name').text(); - } - } -}); - -{% endhighlight %} - -## hiddenClass - -
-
hiddenClass
-
String
-
'isotope-hidden'
-
- -The class applied to item elements hidden by Filtering. - -## hiddenStyle - -
-
hiddenStyle
-
Object
-
{ opacity : 0, scale : 0.001 }
-
- -The style applied to item elements hidden by Filtering. - -## itemClass - -
-
itemClass
-
String
-
'isotope-item'
-
- -The class applied to item elements. - -## itemPositionDataEnabled - -
-
itemPositionDataEnabled
-
Boolean
-
false
-
- -When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery's data method with 'isotope-item-position' name space. Position is return as an object with `x` and `y`; - -### Example - -{% highlight javascript %} - -$('#container').isotope({ - itemSelector: '.element', - itemPositionDataEnabled: true -}) -// log position of each item -.find('.element').each(function(){ - var position = $(this).data('isotope-item-position'); - console.log('item position is x: ' + position.x + ', y: ' + position.y ); -}); - -{% endhighlight %} - -## itemSelector - -
-
itemSelector
-
Selector
-
- -Restricts Isotope item elements to selector. - -## layoutMode - -
-
layoutMode
-
String
-
'masonry'
-
- -See also docs on [Layout modes](layout-modes.html). - -[**See Demo: Layout modes**](../demos/layout-modes.html) - -## onLayout - -
-
onLayout
-
Function
-
- -Similiar to a callback, `onLayout` is a function that will be triggered after every time an Isotope instance runs through its layout logic. - -{% highlight javascript %} - -$('#container').isotope({ - onLayout: function( $elems, instance ) { - // `this` refers to jQuery object of the container element - console.log( this.height() ); - // callback provides jQuery object of laid-out item elements - $elems.css({ background: 'blue' }); - // instance is the Isotope instance - console.log( instance.$filteredAtoms.length ); - } -}); - -{% endhighlight %} - -## resizable - -
-
resizable
-
Boolean
-
true
-
- -Triggers layout logic when browser window is resized. - -## resizesContainer - -
-
resizesContainer
-
Boolean
-
true
-
- -Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to false, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered. - -## sortAscending - -
-
sortAscending
-
Boolean
-
true
-
- -Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...". See [docs on sorting](sorting.html) for more details. - -[**See Demo: Sorting**](../demos/sorting.html) - -## sortBy - -
-
sortBy
-
String
-
- -The property name of the method within the `getSortData` option to sort item elements. See [docs on sorting](sorting.html) for more details. - -[**See Demo: Sorting**](../demos/sorting.html) - -### Values {#sortBy-values} - -+ `'original-order'` Sorts item elements by their original order. - -## transformsEnabled - -
-
transformsEnabled
-
Boolean
-
true
-
- -Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting `transformsEnabled` to false will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with CSS transforms](help.html#css-transforms). - -### Additional CSS {#transformsEnabled-css} - -If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS: - -{% highlight css %} - -.isotope .isotope-item { - -webkit-transition-property: top, left, opacity; - -moz-transition-property: top, left, opacity; - -ms-transition-property: top, left, opacity; - -o-transition-property: top, left, opacity; - transition-property: top, left, opacity; -} - -{% endhighlight %} - -## visibleStyle - -
-
visibleStyle
-
Object
-
{ opacity : 1, scale : 1 }
-
- -The style applied to item elements made visible by Filtering. - -## Layout-specific options - -In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode. - -See docs on [layout modes](layout-modes.html) for each layout mode's available options. - -For example, if your layout switched from `masonry` to `cellsByRow`: - -{% highlight javascript %} - -$('#container').isotope({ - masonry: { - columnWidth: 120 - }, - cellsByRow: { - columnWidth: 220, - rowHeight: 220 - } -}); - -{% endhighlight %} - -[**See Demo: Layout modes**](../demos/layout-modes.html) \ No newline at end of file diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown deleted file mode 100644 index 0d12cbf..0000000 --- a/_posts/docs/2010-12-04-methods.mdown +++ /dev/null @@ -1,159 +0,0 @@ ---- - -title: Methods -category: docs -layout: default -toc: - - { title: addItems, anchor: additems } - - { title: appended, anchor: appended } - - { title: destroy, anchor: destroy } - - { title: insert, anchor: insert } - - { title: layout, anchor: layout } - - { title: option, anchor: option } - - { title: reLayout, anchor: relayout } - - { title: reloadItems, anchor: reloaditems } - - { title: remove, anchor: remove } - - { title: shuffle, anchor: shuffle } - - { title: updateSortData, anchor: updatesortdata } - ---- - -Isotope offers several methods to extend functionality. Isotope's methods follow the jQuery UI pattern. - -{% highlight javascript %} - -$('#container').isotope( 'methodName', [optionalParameters] ) - -{% endhighlight %} - -## addItems - -{% highlight javascript %} - -.isotope( 'addItems', $items, callback ) - -{% endhighlight %} - -Adds item elements to the pool of item elements of the container, but does not sort, filter or layout. See [Adding items](adding-items.html) for more details. The argument within the callback is the group of elements that were added. - -[**See Demo: Adding items**](../demos/adding-items.html) - -## appended - -{% highlight javascript %} - -.isotope( 'appended', $items, callback ) - -{% endhighlight %} - -Adds item elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. See [Adding items](adding-items.html) for more details. - -[**See Demo: Adding items**](../demos/adding-items.html) - -## destroy - -{% highlight javascript %} - -.isotope( 'destroy' ) - -{% endhighlight %} - -Removes Isotope functionality completely. Returns element back to pre-init state. - -## insert - -{% highlight javascript %} - -.isotope( 'insert', $items, callback ) - -{% endhighlight %} - -Appends items elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. See [Adding items](adding-items.html) for more details. - -[**See Demo: Adding items**](../demos/adding-items.html). - -## layout - -{% highlight javascript %} - -.isotope( 'layout', $items, callback ) - -{% endhighlight %} - -Positions specified item elements in layout. - -`layout` will only position specified elements, and those elements will be positioned at the end of layout. Whereas `reLayout` will position all elements in the Isotope widget. - -## option - -{% highlight javascript %} - -.isotope( 'option', options ) - -{% endhighlight %} - -Sets options for plugin instance. Unlike passing options through `.isotope()`, using the `option` method will not trigger layout. - -{% highlight javascript %} - -// sets multiple options -.isotope( 'option', { layoutMode: 'fitRows', filter: '.my-filter' } ) - -{% endhighlight %} - - -## reLayout - -{% highlight javascript %} - -.isotope( 'reLayout', callback ) - -{% endhighlight %} - -Resets layout properties and lays-out every item element. - -[**See Demo: reLayout**](../demos/relayout.html) - -## reloadItems - -{% highlight javascript %} - -.isotope( 'reloadItems' ) - -{% endhighlight %} - -Re-collects all item elements in their current order in the DOM. Useful for prepending. - -[**See Demo: Adding items**](../demos/adding-items.html). - -## remove - -{% highlight javascript %} - -.isotope( 'remove', $items, callback ) - -{% endhighlight %} - -Removes specified item elements from Isotope widget and the DOM. - -[**See Demo: Removing**](../demos/removing.html). - -## shuffle - -{% highlight javascript %} - -.isotope( 'shuffle', callback ) - -{% endhighlight %} - -Shuffles order of items. Sets [`sortBy` option](options.html#sortby) to [`'random'`](sorting.html#sortby_option). - -## updateSortData - -{% highlight javascript %} - -.isotope( 'updateSortData', $items ) - -{% endhighlight %} - -Updates the sorting data on specified item elements. This method is useful if the data within an item is changed dynamically after Isotope has been initialized. diff --git a/_posts/docs/2010-12-05-layout-modes.mdown b/_posts/docs/2010-12-05-layout-modes.mdown deleted file mode 100644 index d0de3db..0000000 --- a/_posts/docs/2010-12-05-layout-modes.mdown +++ /dev/null @@ -1,191 +0,0 @@ ---- - -title: Layout modes -category: docs -layout: default -body_class: option-def -toc: - - { title: Horizontal layouts, anchor: horizontal_layouts } - - { title: cellsByColumn, anchor: cellsbycolumn } - - { title: cellsByRow, anchor: cellsbyrow } - - { title: fitColumns, anchor: fitcolumns } - - { title: fitRows, anchor: fitrows } - - { title: masonry, anchor: masonry } - - { title: masonryHorizontal, anchor: masonryhorizontal } - - { title: straightAcross, anchor: straightacross } - - { title: straightDown, anchor: straightdown } - - { title: Modified layout modes, anchor: modified_layout_modes } - ---- - -Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the `layoutMode` option. - -[**See Demo: Layout modes**](../demos/layout-modes.html) - -### Example - -{% highlight javascript %} - -$('#container').isotope({ layoutMode : 'fitRows' }); - -{% endhighlight %} - -Several layout modes are built into Isotope. - -### Horizontal layouts - -Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set. - -{% highlight css %} - -#container { - /* either of these will work for horizontal Isotope layouts */ - height: 80%; - height: 480px; -} - -{% endhighlight %} - -## cellsByColumn - -A **horizontal** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow. - -### Options {#cellsByColumn-options} - -
-
columnWidth
-
Integer
-
-
-
rowHeight
-
Integer
-
- -### Example {#cellsByColumn-example} - -{% highlight javascript %} - -$('#container').isotope({ - layoutMode: 'cellsByColumn', - cellsByColumn: { - columnWidth: 240, - rowHeight: 360 - } -}); - -{% endhighlight %} - - -## cellsByRow - -A **vertical** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. - -### Options {#cellsByRow-options} - -
-
columnWidth
-
Integer
-
-
-
rowHeight
-
Integer
-
- -### Example {#cellsByRow-example} - -{% highlight javascript %} - -$('#container').isotope({ - layoutMode: 'cellsByRow', - cellsByRow: { - columnWidth: 240, - rowHeight: 360 - } -}); - -{% endhighlight %} - -## fitColumns - -Item elements are arranged into columns. Columns progress **horizontally** from left to right. Items within those columns are arranged top-to-bottom. The horizontal equivalent of fitRows. - -## fitRows - -Item elements are arranged into rows. Rows progress **vertically** top to bottom. Similar to what you would expect from a layout that uses `float: left`. - -## masonry - -Masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a **vertical** grid. For each item element, the script calculates the next best fit for the item within the grid. - -### Options {#masonry-options} - -
-
columnWidth
-
Integer
-
- -The width of one column in the grid. If no value is set for `columnWidth`, default is the width of the first item element. - -### Example {#masonry-example} - -{% highlight javascript %} - -$('#container').isotope({ - masonry: { - columnWidth: 240 - } -}); - -{% endhighlight %} - - -## masonryHorizontal - -The **horizontal** equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid. - -### Options {#masonryHorizontal-options} - -
-
rowHeight
-
Integer
-
- -The width of one column in the grid. If no value is set for `rowHeight`, default is the height of the first item element. - -### Example {#masonryHorizontal-example} - -{% highlight javascript %} - -$('#container').isotope({ - masonryHorizontal: { - rowHeight: 360 - } -}); - -{% endhighlight %} - -## straightAcross - -Item elements are arranged **horizontally** left to right. Useful for simple lists. - -## straightDown - -Item elements are arranged **vertically** top to bottom. Useful for simple lists. - -## Modified layout modes - -[Isotope's methods can be extended and overwritten](extending-isotope.html) to shim-in additional functionality. See these modified layout modes: - -+ [**Centered masonry**](../custom-layout-modes/centered-masonry.html) -+ [**Masonry corner stamp**](../custom-layout-modes/masonry-corner-stamp.html) -+ [**Masonry gutters**](../custom-layout-modes/masonry-gutters.html) - -To use these mods, copy the revised methods found in the demos' page source. They look like: - -{% highlight javascript %} - -$.Isotope.prototype._masonryReset = function() { - // modified code.. -}; - -{% endhighlight %} diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown deleted file mode 100644 index bb14ba9..0000000 --- a/_posts/docs/2010-12-06-filtering.mdown +++ /dev/null @@ -1,109 +0,0 @@ ---- - -title: Filtering -category: docs -layout: default -toc: - - { title: Markup, anchor: markup } - - { title: jQuery script, anchor: jquery_script } - - { title: Creating interactive buttons, anchor: creating_interactive_buttons } - - { title: Recommended CSS, anchor: recommended_css } - ---- - -Isotope can hide and show item elements via the [`filter` option](options.html#filter). `filter` accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden. - -[**See Demo: Filtering**](../demos/filtering.html) - -## Markup - -Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc. - -{% highlight html %} - -
-
...
-
...
-
...
-
...
-
...
-
...
-
...
- ... -
- -{% endhighlight %} - -## jQuery script - -To show only `.metal` items, the jQuery script would be: - -{% highlight javascript %} - -$('#container').isotope({ filter: '.metal' }); - -{% endhighlight %} - -The `filter` option uses a [jQuery selector](http://api.jquery.com/category/selectors/) to show item elements that match a selector, and hide all others that do not. For example: - -+ `.alkali, .alkaline-earth` will show `.alkali` AND ` .alkaline-earth` item elements. -+ `.metal.transition` will show item elements that have BOTH `.metal` and `.transition` classes. -+ `.metal:not(.transition)` will show `.metal` item elements that are NOT `.transition`. - -## Creating interactive buttons - -Let's use a basic list for our buttons - -{% highlight html %} - - - -{% endhighlight %} - -Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter selector. - -{% highlight javascript %} - -// cache container -var $container = $('#container'); -// initialize isotope -$container.isotope({ - // options... -}); - -// filter items when filter link is clicked -$('#filters a').click(function(){ - var selector = $(this).attr('data-filter'); - $container.isotope({ filter: selector }); - return false; -}); - -{% endhighlight %} - -## Recommended CSS - -If you choose to use the filtering functionality, add the following CSS to your stylesheet: - -{% highlight css %} - -/**** Isotope filtering ****/ - -.isotope-item { - z-index: 2; -} - -.isotope-hidden.isotope-item { - pointer-events: none; - z-index: 1; -} - -{% endhighlight %} - -These styles ensure that hidden items will not interfere with interactions. diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown deleted file mode 100644 index 7e2aceb..0000000 --- a/_posts/docs/2010-12-07-sorting.mdown +++ /dev/null @@ -1,169 +0,0 @@ ---- - -title: Sorting -category: docs -layout: default -toc: - - { title: Markup, anchor: markup } - - { title: getSortData option, anchor: getsortdata_option } - - { title: sortBy option, anchor: sortby_option } - - { title: sortAscending option, anchor: sortascending_option } - - { title: Creating interactive buttons, anchor: creating_interactive_buttons } - ---- - -Collect data from item element and rearrange their order in the layout with sorting. - -[**See Demo: Sorting**](../demos/sorting.html) - -## Markup - -Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category. - -{% highlight html %} - -
-
-

79

-

Au

-

Gold

-

196.966569

-
- -
-

51

-

Sb

-

Antimony

-

121.76

-
-
- -{% endhighlight %} - - -## getSortData option - -In order to extract this data from the element, we need to pass in a function to get it via the [`getSortData`](options.html#getsortdata) option. This option accepts an object, whose values are the functions to extract the data. - -Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point. - -In the example above, to get element name, we would need to get the text from the `.name` element. The same works for symbol. - -{% highlight javascript %} - -$('#container').isotope({ - getSortData : { - name : function ( $elem ) { - return $elem.find('.name').text(); - }, - symbol : function ( $elem ) { - return $elem.find('.symbol').text(); - } - } -}); - -{% endhighlight %} - - -For numerical data, we can convert a text value into a number with `parseInt()` or `parseFloat()`. - -{% highlight javascript %} - -getSortData : { - // ... - number : function ( $elem ) { - return parseInt( $elem.find('.number').text(), 10 ); - }, - weight : function ( $elem ) { - return parseFloat( $elem.find('.weight').text() ); - } -} - -{% endhighlight %} - -The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the `data-category` attribute, we can use the `.attr()`. - -{% highlight javascript %} - -getSortData : { - // ... - category : function ( $elem ) { - return $elem.attr('data-category'); - } -} - -{% endhighlight %} - -Get creative! You could sort a list by the width of each item element. - -{% highlight javascript %} - -getSortData : { - // ... - width : function( $elem ) { - return $elem.width(); - } -} - -{% endhighlight %} - -## sortBy option - -For every method set in `getSortData`, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category. - -Sorting elements is done with the [`sortBy` option](options.html#sortby). The value needs to match the property name used in the `getSortData` object. - -With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'category'`. - -{% highlight javascript %} - -$('#container').isotope({ sortBy : 'symbol' }); - -{% endhighlight %} - -There are two additional sorting data methods built in to Isotope. - -+ `'original-order'` will use the original order of the item elements to arrange them in the layout. -+ `'random'` is a random order. - -## sortAscending option - -By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set [`sortAscending`](options.html#sortascending) to false. - -{% highlight javascript %} - -$('#container').isotope({ - sortBy : 'name', - sortAscending : false -}); - -{% endhighlight %} - -## Creating interactive buttons - -We can use a simple list for our buttons. - -{% highlight html %} - - - -{% endhighlight %} - -When one of these links is clicked, we can use the `href` attribute as the value for `sortBy` in the Isotope script. - -{% highlight javascript %} - -$('#sort-by a').click(function(){ - // get href attribute, minus the '#' - var sortName = $(this).attr('href').slice(1); - $('#container').isotope({ sortBy : sortName }); - return false; -}); - -{% endhighlight %} diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown deleted file mode 100644 index f991ba2..0000000 --- a/_posts/docs/2010-12-09-animating.mdown +++ /dev/null @@ -1,100 +0,0 @@ ---- - -title: Animating -category: docs -layout: default -toc: - - { title: animationEngine option, anchor: animationengine_option } - - { title: CSS transitions, anchor: css_transitions } - - { title: Variations, anchor: variations } - ---- - -Isotope was developed to take advantage of the best browser features available. For animations, you can use CSS3 transitions and transforms in capable browsers. Isotope provides Javascript animation fall back for lesser browsers. - - -## animationEngine option - -You can control how Isotope handles animation with the [`animationEngine`](options.html#animationengine) option. This option has three values which control whether jQuery applies styles with`.css()` or `.animate()`. - -+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`. -+ `'css'`: Isotope uses `.css()` -+ `'jquery'`: Isotope uses `.animate()` - -## CSS transitions - -To enable animation with CSS transitions, you'll need the following code in your CSS: - -{% highlight css %} - -.isotope, -.isotope .isotope-item { - /* change duration value to whatever you like */ - -webkit-transition-duration: 0.8s; - -moz-transition-duration: 0.8s; - -ms-transition-duration: 0.8s; - -o-transition-duration: 0.8s; - transition-duration: 0.8s; -} - -.isotope { - -webkit-transition-property: height, width; - -moz-transition-property: height, width; - -ms-transition-property: height, width; - -o-transition-property: height, width; - transition-property: height, width; -} - -.isotope .isotope-item { - -webkit-transition-property: -webkit-transform, opacity; - -moz-transition-property: -moz-transform, opacity; - -ms-transition-property: -ms-transform, opacity; - -o-transition-property: -o-transform, opacity; - transition-property: transform, opacity; -} - -/**** disabling Isotope CSS3 transitions ****/ - -.isotope.no-transition, -.isotope.no-transition .isotope-item, -.isotope .isotope-item.no-transition { - -webkit-transition-duration: 0s; - -moz-transition-duration: 0s; - -ms-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; -} - -{% endhighlight %} - -## Variations - -With these two options you can finely control how animation is handled across browsers. - -### Best available (recommended) - -Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation. - -+ **Add** CSS transition declarations - -### Always use jQuery - -All browsers will use jQuery animation, regardless of their CSS transition support. - -+ `animationEngine : 'jquery'` -+ **No** CSS transition declarations - -Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing. - -### Only CSS transitions - -+ `animationEngine: 'css'` -+ **Add** CSS transition declarations - -### None - -Animation is not enabled in any browser - -+ `animationEngine : 'css'` -+ **No** CSS transition declarations - diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown deleted file mode 100644 index f74af8f..0000000 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ /dev/null @@ -1,79 +0,0 @@ ---- - -title: Adding items -category: docs -layout: default -toc: - - { title: addItems method, anchor: additems_method } - - { title: insert method, anchor: insert_method } - - { title: appended method, anchor: appended_method } - - { title: Prepending, anchor: prepending } - - { title: Recommended CSS, anchor: recommended_css } - ---- - -If your application dynamically adds new content, Isotope provides several methods to add items. - -[**See Demo: Adding items**](../demos/adding-items.html). - -## addItems method - -The [`addItems` method](methods.html#additems) adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element. - -{% highlight javascript %} - -var $newItems = $('
'); -$('#container').append( $newItems ).isotope( 'addItems', $newItems ); - -{% endhighlight %} - -## insert method - -More likely, you want to use the [`insert` method](methods.html#insert), which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out. - -{% highlight javascript %} - -var $newItems = $('
'); -$('#container').isotope( 'insert', $newItems ); - -{% endhighlight %} - -## appended method - -The [`appended` method](methods.html#appended) is a convenience method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and **not** use filtering or sorting. `appended` is the best method to use with Infinite Scroll. - -[**See Demo: Infinite Scroll**](../demos/infinite-scroll.html). - -See also [Infinite Scroll with filtering or sorting](help.html#infinite_scroll_with_filtering_or_sorting) - -## Prepending - -Because of Isotope's sorting functionality, prepending isn't as straight forward as might expect. However, it can be replicated fairly easy. After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the [`reloadItems` method](methods.html#reloaditems). Then trigger a re-layout, with the original DOM order. - -{% highlight javascript %} - -var $newItems = $('
'); -$('#container').prepend( $newItems) - .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); - -{% endhighlight %} - -## Recommended CSS - -You'll need these styles in your CSS for the reveal animation when adding items. - -{% highlight css %} - -/**** disabling Isotope CSS3 transitions ****/ - -.isotope.no-transition, -.isotope.no-transition .isotope-item, -.isotope .isotope-item.no-transition { - -webkit-transition-duration: 0s; - -moz-transition-duration: 0s; - -ms-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; -} - -{% endhighlight %} diff --git a/_posts/docs/2011-05-25-extending-isotope.mdown b/_posts/docs/2011-05-25-extending-isotope.mdown deleted file mode 100644 index 082ed50..0000000 --- a/_posts/docs/2011-05-25-extending-isotope.mdown +++ /dev/null @@ -1,174 +0,0 @@ ---- - -title: Extending Isotope -category: docs -layout: default -toc: - - { title: Custom layout modes, anchor: custom_layout_modes } - ---- - -Isotope uses a constructor pattern, `$.Isotope`. To extend Isotope, you need only to add a method to `$.Isotope.prototype`. - -{% highlight javascript %} - -$.Isotope.prototype.myMethod = function() { ... }; - -// or, using jQuery extend utility -$.extend( $.Isotope.prototype, { - myMethod : function() { ... } -}); - -{% endhighlight %} - -Before diving in, try [looking over the source](../jquery.isotope.js) to get a better understand of the internal logic behind Isotope. - -## Custom layout modes - -Isotope's layout modes are built around four methods: `Reset`, `Layout`, `GetContainerSize`, and `ResizeChanged`. These methods are the hooks that allow you to develop your own custom layout mode, without getting your hands dirty dealing with sorting, filtering, or other functionality. These layout mode methods need to be prefixed with an underscore and the name of the layout mode. - -{% highlight javascript %} - -// adding layout mode methods for 'customMode' -$.extend( $.Isotope.prototype, { - _customModeReset : function() { ... }, - _customModeLayout : function( $elems ) { ... }, - _customModeGetContainerSize : function() { ... }, - _customModeResizeChanged : function() { ... } -}); - -{% endhighlight %} - -[**See Custom layout mode: Category Rows**](../custom-layout-modes/category-rows.html) -[**See Custom layout mode: Spine align**](../custom-layout-modes/spine-align.html) - -All of the [default layout modes](../docs/layout-modes.html) follow this pattern. We'll look at the code behind the _fitRows_ layout mode. - -### Reset - -Each layout mode should have its own set of properties that only it can use and not be affected by other layout modes. These properties can be accessed in the instance as an object whose value matches the layout mode name (i.e. `this.fitRows` for _fitRows_). - -The `Reset` layout mode method is called with every `reLayout`, where Isotope will go through each item element and position it. This method resets layout mode properties. - -The _fitRows_ layout mode keeps track of x and y position, as well as the height of the container. These properties are set back to zero in `Reset`. - -{% highlight javascript %} - -_fitRowsReset : function() { - this.fitRows = { - x : 0, - y : 0, - height : 0 - }; -}, - -{% endhighlight %} - -### Layout - -The `Layout` layout mode method is where items are positioned. Most of your layout logic happens here. This method provides one argument `$elems` -- a jQuery object with the item elements that need to be positioned. - -`$elems.each` is the principle loop, iterating over each item element and positioning it. Items are positioned with the `_pushPosition` method (see below). The layout modes properties are - -For _fitRows_, items are placed with the `this.fitRows.x` and `this.fitRows.y` values. This position is determined by if the item can fit in the current row, or if a new row needs to be started. - -{% highlight javascript %} - -_fitRowsLayout : function( $elems ) { - var instance = this, - containerWidth = this.element.width(), - props = this.fitRows; - - $elems.each( function() { - var $this = $(this), - atomW = $this.outerWidth(true), - atomH = $this.outerHeight(true); - - if ( props.x !== 0 && atomW + props.x > containerWidth ) { - // if this element cannot fit in the current row - props.x = 0; - props.y = props.height; - } - - // position the atom - instance._pushPosition( $this, props.x, props.y ); - - props.height = Math.max( props.y + atomH, props.height ); - props.x += atomW; - - }); -}, - -{% endhighlight %} - -### GetContainerSize - -After the script goes through positioning each item, it needs to resize the container. `GetContainerSize` returns the style for the size of the container. - -In _fitRows_, the height property is returned as the value for height. - -{% highlight javascript %} - -_fitRowsGetContainerSize : function () { - return { height : this.fitRows.height }; -}, - -{% endhighlight %} - -### ResizeChanged - -`ResizeChanged` is triggered whenever the browser window is resized. Before Isotope adjusts the layout, this method is triggered to determine if the layout has actually changed. The methods return a boolean. - -{% highlight javascript %} - -_fitRowsResizeChanged : function() { - return true; -}, - -{% endhighlight %} - -### Helper methods - -The `_pushPosition` method is used within a layout mode's `Layout` method. It takes 3 arguments: the item element currently being positioned, the x position, and the y position. - -{% highlight javascript %} - -_pushPosition( $item, x, y ) - -{% endhighlight %} - -`_getSegments` is used within the layout mode's `Reset` method. It performs several utilities: - -+ Determines the `columnWidth` for the layout mode (`rowHeight` for horizontal layout modes). This is either passed in as an option (i.e. `masonry { columnWidth: 90 }`), or the width of the first item element. This property is then set for the layout mode, i.e. `this.masonry.columnWidth`. -+ Calculates the number of number of columns (or rows, if horizontal) given the size of the container. This property is then set for the layout mode, i.e. `this.masonry.cols`. - -{% highlight javascript %} - -_getSegments( isHorizontal ) - -// for example -_cellsByRowReset : function() { - this.cellsByRow = { - index : 0 - }; - // get this.cellsByRow.columnWidth - this._getSegments(); - // get this.cellsByRow.rowHeight - this._getSegments(true); -}, - -{% endhighlight %} - -Similarly, `_checkIfSegmentsChanged` is used within `ResizeChanged`. It returns a boolean indicating whether or not the number of columns or rows has changed since the window has been resized. - -{% highlight javascript %} - -_checkIfSegmentsChanged( isHorizontal ) - -// for example -_masonryResizeChanged : function() { - return this._checkIfSegmentsChanged(); -}, - -{% endhighlight %} - diff --git a/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown b/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown deleted file mode 100644 index 04375bd..0000000 --- a/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown +++ /dev/null @@ -1,86 +0,0 @@ ---- - -title: Hash history with jQuery BBQ -category: docs -layout: default -toc: - - { title: Markup, anchor: markup } - - { title: jQuery script, anchor: jquery_script } - ---- - -As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman's [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) allows us to do just that. - -> jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. - -[**See Demo: Hash history**](../demos/hash-history.html) - -BBQ is a marvelous plugin that provides for a lot more functionality. The [hash history demo](../demos/hash-history.html) uses multiple options (`sortBy`, `sortAscending`, and `layoutMode` in addition to `filter`), the ability to use back-button history, and properly highlights selected links. - -Given BBQ's tremendous capabilities, the code can grow to be a bit complex. Be sure to read through [BBQ's docs](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) and take look at [its examples](http://benalman.com/code/projects/jquery-bbq/examples/) before you dive in and code up your own solution. - -## Markup - -Instead of setting the option values and keys with `data` attributes, we can add the option in the `href` for each link. - -{% highlight html %} - - - -{% endhighlight %} - -The `href` value is a serialized string, suitable for a URL. These values can be created with [jQuery.param()](http://api.jquery.com/jQuery.param/). - -{% highlight javascript %} - -$.param({ filter: '.metal' }) -// >> "filter=.metal" -$.param({ filter: '.alkali, alkaline-earth' }) -// >> "filter=.alkali%2C+alkaline-earth" -$.param({ filter: ':not(.transition)' }) -// >> "#filter=%3Anot(.transition)" - -{% endhighlight %} - -## jQuery script - -These serialized `href` values can be converted into their proper jQuery object form when clicked using [jQuery.deparam()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam) from jQuery BBQ. - -{% highlight javascript %} - -$('.option-set a').click(function(){ - // get href attr, remove leading # - var href = $(this).attr('href').replace( /^#/, '' ), - // convert href into object - // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } - option = $.deparam( href, true ); - // set hash, triggers hashchange on window - $.bbq.pushState( option ); - return false; -}); - -{% endhighlight %} - -Calling [$.bbq.pushState()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState) will trigger the `hashchange` event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance. - -{% highlight javascript %} - -$(window).bind( 'hashchange', function( event ){ - // get options object from hash - var hashOptions = $.deparam.fragment(); - // apply options from hash - $container.isotope( hashOptions ); -}) - // trigger hashchange to capture any hash data on init - .trigger('hashchange'); - -{% endhighlight %} - -Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked. diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown deleted file mode 100644 index 2697127..0000000 --- a/_posts/docs/2011-12-11-help.mdown +++ /dev/null @@ -1,234 +0,0 @@ ---- - -title: Help -category: docs -layout: default -toc: - - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues } - - { title: Additional resources, anchor: additional_resources } - - { title: Unloaded media, anchor: unloaded_media } - - { title: Images, anchor: images } - - { title: @font-face fonts, anchor: fontface_fonts } - - { title: Problems with CSS transforms, anchor: css-transforms } - - { title: Getting item position, anchor: getting_item_position } - - { title: Accessing the instance, anchor: accessing_the_instance } - - { title: CSS transforms in Opera, anchor: css_transforms_in_opera } - - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting} - - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } - - { title: First item breaks Masonry layout, anchor: first_item_breaks_masonry_layout } - - { title: Right-to-left layouts, anchor: righttoleft_layouts } - - { title: Preventing clicks on filtered items, anchor: unclickable-filtered } - ---- - - -## Reporting bugs and issues - -Please read my [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) and then [report bugs and issues on GitHub](http://github.com/desandro/isotope/issues). - -## Support - -Try the support forum at CodersClan. - -[![Get Support](http://codersclan.net/graphics/getSupport_github4.png)](http://codersclan.net/support/step1.php?repo_id=1) - -## Additional resources - -+ The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases -+ [Various Isotope tests on jsFiddle](http://www.delicious.com/desandro/re:isotope+fiddle) -+ [My answers on Stack Overflow](http://stackoverflow.com/users/182183/desandro?tab=answers) -+ [Sites using Isotope on Zootool](http://zootool.com/user/desandro/tag:isotope), has screenshots -+ [Sites using Isotope on Delicious](http://www.delicious.com/desandro/using:isotope) -+ [Miscelleanous Isotope content](http://www.delicious.com/desandro/re:isotope) - -## Unloaded media - -Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded. - -## Images - -### Inline dimensions - -For images, the best method is to specify the width and height of images inline. - -{% highlight html %} - - - -{% endhighlight %} - -If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function. - -### imagesLoaded plugin - -The next best solution is to use the [imagesLoaded plugin](https://github.com/desandro/imagesloaded) included with Isotope. It's a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded. - -{% highlight javascript %} - -var $container = $('#container'); - -$container.imagesLoaded( function(){ - $container.isotope({ - // options... - }); -}); - -{% endhighlight %} - -### `$(window).load()` - -Another solution is to initialize Isotope inside `$(window).load()` instead of `$(document).ready()`. This will trigger Isotope after all the media on the page has loaded. - -{% highlight javascript %} - -$(window).load(function(){ - $('#container').isotope({ - // options... - }); -}); - -{% endhighlight %} - -## @font-face fonts - -Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. - -+ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/) -+ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events) - -## Problems with CSS transforms {: #css-transforms} - -As the browser implementations of CSS tranforms are still a work-in-progress, they can cause buggy behavoir with other types of dynamic content. - -
- -+ [Flash content in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash), like YouTube or Vimeo videos, Flash ads, or Flash audio players. - -### Disabling transforms - -Set [`transformsEnabled`](options.html#transformsenabled) to `false`. This is an easy step to take when troubleshooting. - -{% highlight javascript %} - -$('#container').isotope({ - // options... - transformsEnabled: false -}); - -{% endhighlight %} - -## Getting item position - -CSS transforms will break previous patterns for getting the position of an item. See the [`itemPositionDataEnabled`](options.html#itempositiondataenabled) option for a stop-gap. - -## Accessing the instance - -[Similar to jQuery UI](http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained), Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the `'isotope'` namespace. - -{% highlight javascript %} - -var $container = $('#container'); - -// initialize Isotope instance -$container.isotope({ - // options... -}); - -// get Isotope instance -var isotopeInstance = $container.data('isotope'); -isotopeInstance.options; // options -isotopeInstance.$filteredAtoms; // jQuery object of filtered & sorted item elements -isotopeInstance.masonry.columnWidth; // Layout mode specific properties - -{% endhighlight %} - -## CSS transforms in Opera - -[Using CSS transforms in older versions Opera (< 12) distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). See how to enable [CSS transitions with top, left positioning](options.html#transformsEnabled-css). - -## Infinite Scroll with filtering or sorting - -I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise [moderation](introduction.html#moderation) with your Isotope implementation. - -If you do plan on implementing Infinite Scroll with filtering or sorting (which is a _bad idea_), use the `insert` method instead of `appended`. - -## Poor type rendering in WebKit - -Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. A solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated). Another solution is to [disable transforms](#disabling_transforms). - -## First item breaks Masonry layout - -With [Masonry layout mode](layout-modes.html#masonry) If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set [`columnWidth` option](layout-modes.html#masonry-options). Without `columnWidth` set, the Masonry layout mode will use the width of the first item for the size of its columns. - -{% highlight javascript %} - -$('#container').isotope( - masonry: { - columnWidth: 220 - } -}); - -{% endhighlight %} - -## Right-to-left layouts - -Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic. - -[**See test: Right to left**](../tests/right-to-left.html) - -You'll need to make the following changes: - -+ Modify Isotope's `_positionAbs` method -+ Set `transformsEnabled: false` in the Isotope options -+ Add CSS transition property styles for right/top. - -### JavaScript for right-to-left support - -{% highlight javascript %} - -// modify Isotope's absolute position method -$.Isotope.prototype._positionAbs = function( x, y ) { - return { right: x, top: y }; -}; - -// initialize Isotope -$('#container').isotope({ - transformsEnabled: false - // other options... -}); - -{% endhighlight %} - -### CSS for right-to-left support - -{% highlight css %} - -.isotope .isotope-item { - -webkit-transition-property: right, top, -webkit-transform, opacity; - -moz-transition-property: right, top, -moz-transform, opacity; - -ms-transition-property: right, top, -ms-transform, opacity; - -o-transition-property: right, top, -o-transform, opacity; - transition-property: right, top, transform, opacity; -} - -{% endhighlight %} - -## Preventing clicks on filtered items {: #unclickable-filtered} - -The [recommended CSS for filtering](filtering.html#recommended_css) includes `pointer-events: none` for `.isotope-hidden`. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element's parent is a filtered item. - -[See test: Unclickable filtered](../tests/unclickable-filtered.html) - -{% highlight javascript %} - -$('.item a').click(function(){ - var $this = $(this); - // back out if hidden item - if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) { - return; - } - // otherwise, continue to do stuff... - console.log('item was clicked'); -}); - -{% endhighlight %} \ No newline at end of file diff --git a/_posts/docs/2011-12-20-license.mdown b/_posts/docs/2011-12-20-license.mdown deleted file mode 100644 index d35d4f2..0000000 --- a/_posts/docs/2011-12-20-license.mdown +++ /dev/null @@ -1,79 +0,0 @@ ---- - -title: License -category: docs -layout: default -toc: - - { title: Commercial licensing, anchor: commercial_licensing } - - { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement } - ---- - -Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. - -### Open source license - -For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free. - -### What is commercial considered? - -If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. - -## Commercial licensing - -Purchasing accepts most credit cards and takes seconds. Once purchased, you’ll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications. - -With the purchase of a commercial license: - -+ You may use Isotope in as many commercial applications you like. -+ You may use Isotope in your own commercial applications and products. For example: premium WordPress, Tumblr, or other CMS themes, plugins and templates. -+ Customers and users of your products do **not** need to purchase their own license -- so long as they are not developing their own commercial products with Isotope. - -The commercial license comes in two varieties: - -### Isotope Commercial Developer License - -The Isotope Commercial Developer License is for individual developers. This license is priced per developer. Each individual developer needs to purchase a separate license. A developer is someone who implements Isotope, and probably types `.isotope()` at some point. - -

{% include developer-buy-button.html %}

- -### Isotope Commercial Organization License - -The Isotope Commercial Organization License is for an organization with a team of developers. The license covers the entire team no matter how many developers are working on it. - -

{% include org-buy-button.html %}

- -### Purchase via PayPal - -If you're having trouble using a credit card, try purchasing a license via PayPal: - -+ [Buy Developer License via PayPal](http://pul.ly/b/13620) -+ [Buy Organization License via PayPal](http://pul.ly/b/36595) - -## Isotope Commercial License Agreement - -This Commercial License Agreement is a binding legal agreement between you and Metafizzy LLC (**Metafizzy**). By installing, copying, or using Isotope (the **Software**), you agree to be bound by these terms of this Agreement. - -### Grant of License - -Subject to the payment of the fee required and the conditions herein, you are hereby granted a non-exclusive, non-transferable right to the Software to design and develop commercial applications (**Applications**). - -#### Developer Grant - -The Isotope Commercial Developer License grants 1 license for you as 1 designated user (**Developer**) to use the Software for the purpose of developing Applications. A Developer is an individual who implements the Software into Applications, most often writing the necessary code to do so. You must purchase another separate license to the Software for each and any additional Developer, or purchase a Isotope Commercial Organization License to cover your organization as a whole. - -#### Organization Grant - -The Isotope Commercial Organization License grants 1 license for your Organization as 1 designated, collective user (**Organization**) to use the Software for the purpose of developing Applications. There is no limit or restriction of the number of Developers within your Organization who may develop Applications using the Software. - -#### Usage - -You are granted the right to use and to modify the source code of the Software for use in Applications. There is no limit or restriction of the number of Applications which use the Software. You own any original work authored by you. Metafizzy continues to retain all copyright and other intellectual property rights in the Software. You are not permitted to move, remove, edit, or obscure any copyright, trademark, attribution, warning or disclaimer notices in the Software. - -You may use the Software only to create Applications that are significantly different than and do not compete with the Software. You are granted the license to distribute the Software as part of your Applications on a royalty-free basis. Users of your Applications are permitted to use the Software or your modifications of the Software as part of your Applications. Users do not need to purchase their own commercial license for the Software, so long as they are not acting as Developers, developing their own commercial Applications with the Software. - -### Warranties and Remedies - -The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. Metafizzy's entire liability and your exclusive remedy under this agreement shall be return of the price paid for the Software. - - diff --git a/_posts/pages/2011-01-01-2.html b/_posts/pages/2011-01-01-2.html deleted file mode 100644 index a5b226c..0000000 --- a/_posts/pages/2011-01-01-2.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 2 -category: pages -layout: default -page_position: 20 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-3.html b/_posts/pages/2011-01-01-3.html deleted file mode 100644 index 5aa7e41..0000000 --- a/_posts/pages/2011-01-01-3.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 3 -category: pages -layout: default -page_position: 40 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-4.html b/_posts/pages/2011-01-01-4.html deleted file mode 100644 index d08868d..0000000 --- a/_posts/pages/2011-01-01-4.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 4 -category: pages -layout: default -page_position: 60 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-5.html b/_posts/pages/2011-01-01-5.html deleted file mode 100644 index 7da5795..0000000 --- a/_posts/pages/2011-01-01-5.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 5 -category: pages -layout: default -page_position: 80 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-6.html b/_posts/pages/2011-01-01-6.html deleted file mode 100644 index 369c780..0000000 --- a/_posts/pages/2011-01-01-6.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Infinite Scroll Page 6 -category: pages -layout: default -page_position: 100 -infinite_scroll: true ---- - -{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/tests/2010-01-01-index.html b/_posts/tests/2010-01-01-index.html deleted file mode 100644 index ccac568..0000000 --- a/_posts/tests/2010-01-01-index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Tests Index -layout: default -category: tests -is_index_page: true ---- - -
    - {% for post in site.categories.tests reversed %} - {% if post.is_index_page != true %} -
  • {{ post.title }}
    • - {% endif %} - {% endfor %} -
\ No newline at end of file diff --git a/_posts/tests/2011-03-27-destroy.html b/_posts/tests/2011-03-27-destroy.html deleted file mode 100644 index 6e71409..0000000 --- a/_posts/tests/2011-03-27-destroy.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: destroy -layout: default -category: tests ---- - - - -
-

Click init button the destroy. Original CSS, pre-init, should be re-applied, all items back to visibility.

-
- -
- - -
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - \ No newline at end of file diff --git a/_posts/tests/2011-03-27-flash.html b/_posts/tests/2011-03-27-flash.html deleted file mode 100644 index 446ecd0..0000000 --- a/_posts/tests/2011-03-27-flash.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: flash -layout: default -category: tests ---- - - - -
-

Flash content like YouTube or Vimeo videos

-
- -
- -

Filters

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

Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by mikedahlquist)

- -
- -
-
- WIN -

WIN

-
- -
- -
-
- - [Flash 9 is required to listen to audio.] - Smashing Pumpkins - Set The Ray To Jerry - Judas 0: B-Sides and Rarities -
-

I’ll believe until the day I die that the Smashing Pumpkins were more unique and more complex than most people will ever give them credit for. But I also understand that casual listeners aren’t going to go out of their way to hear the hundreds of lesser-known Pumpkins tracks that are often just as good as anything that’s made its way onto an album. So I’m telling you to start with “Set the Ray to Jerry.”

-
- -

— Ross McGowan The Smashing Pumpkins: Set the Ray to Jerry

-
- - -
- -
-
- and there&#8217;s a light on by *zenibyfajnie on deviantART -

and there’s a light on by *zenibyfajnie on deviantART

-
- -
- -
-

KA+A : Blog : Iconoclast – A Twitter Icon’s Journey From Discreet to Disaster

-

Via kristianindy

-
- -
-
- -

Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10] (via alohaband1)

- -

I was at this show. This is my favorite song from 2010. I love Aloha so much.

-
- -
- -
- -
- - -
- - - - \ No newline at end of file diff --git a/_posts/tests/2011-03-27-no-items.html b/_posts/tests/2011-03-27-no-items.html deleted file mode 100644 index b020c7b..0000000 --- a/_posts/tests/2011-03-27-no-items.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: no items -layout: default -category: tests ---- - -
-

What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still return this.

-
- -
- {% for element in site.elements limit:20 %} - {% include element-partial.html %} - {% endfor %} -
- - - - \ No newline at end of file diff --git a/_posts/tests/2011-04-26-item-position-data.html b/_posts/tests/2011-04-26-item-position-data.html deleted file mode 100644 index 9e66990..0000000 --- a/_posts/tests/2011-04-26-item-position-data.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: item position data -layout: default -category: tests ---- - -
-

itemPositionDataEnabled option is enabled.

-
- -
- - {% include sort-buttons.html %} - -

Etc

- - -
- -
- {% for element in site.elements limit:40 %} - {% include element-partial.html %} - {% endfor %} -
- - - - \ No newline at end of file diff --git a/_posts/tests/2011-05-13-jquery-animation.html b/_posts/tests/2011-05-13-jquery-animation.html deleted file mode 100644 index 3df3be8..0000000 --- a/_posts/tests/2011-05-13-jquery-animation.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: jquery animation -layout: default -category: tests ---- - - - -
-

Check that the option setter for animationEngine is properly triggered.

-
- -
- - - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - -
- -
- {% for element in site.elements limit:40 %} - {% include element-partial.html %} - {% endfor %} -
- - - - \ No newline at end of file diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html deleted file mode 100644 index b4fbc5e..0000000 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: elements complete test -layout: default -category: tests -body_class: demos ---- - -
-

Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

-
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - - {% include layout-options.html %} - -

Etc

- - - -
- - -
- {% for elem_number in site.random_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - diff --git a/_posts/tests/2011-05-31-tiny-text.html b/_posts/tests/2011-05-31-tiny-text.html deleted file mode 100644 index c6227c8..0000000 --- a/_posts/tests/2011-05-31-tiny-text.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Tiny text -layout: default -category: tests -lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ---- - - - -
-

Test to see how IE7 deals with type rendering

-
- -
- -

Filters

- - - -
- -
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
{{ page.lorem }}
-
- - - - - \ No newline at end of file diff --git a/_posts/tests/2011-08-19-right-to-left.html b/_posts/tests/2011-08-19-right-to-left.html deleted file mode 100644 index 90fe56a..0000000 --- a/_posts/tests/2011-08-19-right-to-left.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Right to left -layout: default -category: tests -body_class: demos ---- - - - -
-

Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: Help - Right to left layouts.

-
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - - {% include layout-options.html %} - -

Etc

- - - -
- - -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - diff --git a/_posts/tests/2011-08-23-unclickable-filtered.html b/_posts/tests/2011-08-23-unclickable-filtered.html deleted file mode 100644 index 76550ea..0000000 --- a/_posts/tests/2011-08-23-unclickable-filtered.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Unclickable filtered -layout: default -category: tests -body_class: demos ---- - - - -
-

For Internet Explorer and Opera, you might need to dismiss event on filtered out items. You should not be able to click on the big red blocks when filtered-out

-

(Last item clicked)

-
- -
- - - -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - \ No newline at end of file diff --git a/_posts/tests/2011-10-19-callbacks.html b/_posts/tests/2011-10-19-callbacks.html deleted file mode 100644 index fc7c103..0000000 --- a/_posts/tests/2011-10-19-callbacks.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Callbacks -layout: default -category: tests ---- - -
-

Tests that callbacks are triggering properly, after animation/transition has completed.

- -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - \ No newline at end of file diff --git a/_posts/tests/2012-02-07-onlayout.html b/_posts/tests/2012-02-07-onlayout.html deleted file mode 100644 index 05e891e..0000000 --- a/_posts/tests/2012-02-07-onlayout.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: onLayout -layout: default -category: tests ---- - -
-

Tests that onLayout callback is triggering properly, after animation/transition has completed.

- -
- -
- - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - -

Etc

- - - -
- -
- {% for elem_number in site.best_of_order %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} -
- - - - - - diff --git a/_posts/tests/2012-08-11-combo-sort-history.html b/_posts/tests/2012-08-11-combo-sort-history.html deleted file mode 100644 index c309885..0000000 --- a/_posts/tests/2012-08-11-combo-sort-history.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Combo filters, sorting, AND hash history -layout: default -category: tests -schema: - - name: color - filters: [ red, blue, yellow ] - - name: size - filters: [ small, wide, tall, big ] - - name: shape - filters : [ round, square ] ---- - -
-

Filters can be combined. In addition to filtering for just .red or .tall, you can pass in a filter selector of both: .red.tall.

-
- -
-
-

Filters

- - {% for group in page.schema %} -
-

{{ group.name }}

-
    -
  • any - {% for filter in group.filters %} -
  • {{ filter }} - {% endfor %} -
-
- {% endfor %} -
- -

Sort

- - - - -
- -
- {% for size in page.schema[1].filters %} - {% for shape in page.schema[2].filters %} - {% for color in page.schema[0].filters %} -
- {% endfor %} - {% endfor %} - {% endfor %} - - - {% for color in page.schema[0].filters %} - {% for shape in page.schema[2].filters %} - {% for size in page.schema[1].filters %} -
- {% endfor %} - {% endfor %} - {% endfor %} - -
- - - - - - diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..4b2967b --- /dev/null +++ b/bower.json @@ -0,0 +1,14 @@ +{ + "name": "masonry", + "version": "3.0.0", + "description": "Cascading grid layout library", + "main": "masonry.js", + "dependencies": { + "get-size": "desandro/get-size", + "outlayer": "metafizzy/outlayer#>=0.4.0" + }, + "devDependencies": { + "doc-ready": "desandro/doc-ready", + "qunit": "1.x" + } +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e87f0d9..0000000 --- a/css/style.css +++ /dev/null @@ -1,842 +0,0 @@ -/* Start: Recommended Isotope styles */ - -/**** Isotope Filtering ****/ - -.isotope-item { - z-index: 2; -} - -.isotope-hidden.isotope-item { - pointer-events: none; - z-index: 1; -} - -/**** Isotope CSS3 transitions ****/ - -.isotope, -.isotope .isotope-item { - -webkit-transition-duration: 0.8s; - -moz-transition-duration: 0.8s; - -ms-transition-duration: 0.8s; - -o-transition-duration: 0.8s; - transition-duration: 0.8s; -} - -.isotope { - -webkit-transition-property: height, width; - -moz-transition-property: height, width; - -ms-transition-property: height, width; - -o-transition-property: height, width; - transition-property: height, width; -} - -.isotope .isotope-item { - -webkit-transition-property: -webkit-transform, opacity; - -moz-transition-property: -moz-transform, opacity; - -ms-transition-property: -ms-transform, opacity; - -o-transition-property: -o-transform, opacity; - transition-property: transform, opacity; -} - -/**** disabling Isotope CSS3 transitions ****/ - -.isotope.no-transition, -.isotope.no-transition .isotope-item, -.isotope .isotope-item.no-transition { - -webkit-transition-duration: 0s; - -moz-transition-duration: 0s; - -ms-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; -} - -/* End: Recommended Isotope styles */ - - - -/* disable CSS transitions for containers with infinite scrolling*/ -.isotope.infinite-scrolling { - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} - - -/**** Base styles ****/ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - padding: 20px; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; - font-size: 13px; - line-height: 1.7em; - background: #1F1E1D; - color: #FFF; -} - -h1, h2, h3, p, ul, ol, pre, dl { - margin-bottom: 1.0em; -} - -h1, h2, #super-list, .element, .tagline, #index-list, -.super-list .link { - font-family: 'Helvetica Neue', Arial, sans-serif; -} - -h1, h2, h3 { font-weight: bold; } - -h1 { - font-size: 32px; - line-height: 1.1em; -} - -h2 { - font-size: 24px; - line-height: 1.1em; -} - -ul, ol { - margin-left: 1.5em; -} - -a, -a code { - color: #FB4; - text-decoration: none; -} - -a:hover, -a:hover code { - color: #4BF; -} - -a:active, -a:active code { - color: #1FB; - background: black; -} - -a img { border: none; } - -em { font-style: italic; } -strong { font-weight: bold; } - -blockquote { - padding-left: 1.0em; - margin-left: 1.0em; - border-left: 1px solid #333; - font-style: italic; -} - -/**** Isotope styles ****/ - -/* required for containers to inherit vertical size from window */ -html, -body { - height: 100%; -} - -#container { - border: 1px solid #666; - padding: 5px; - margin-bottom: 20px; -} - -.element { - width: 110px; - height: 110px; - margin: 5px; - float: left; - overflow: hidden; - position: relative; - background: #888; - color: #222; - -webkit-border-top-right-radius: 1.2em; - -moz-border-radius-topright: 1.2em; - border-top-right-radius: 1.2em; -} - -.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } -.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } -.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } -.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } -.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } -.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } -.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } -.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } -.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } -.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } - - -.element * { - position: absolute; - margin: 0; -} - -.element .symbol { - left: 0.2em; - top: 0.4em; - font-size: 3.8em; - line-height: 1.0em; - color: #FFF; -} -.element.large .symbol { - font-size: 4.5em; -} - -.element.fake .symbol { - color: #000; -} - -.element .name { - left: 0.5em; - bottom: 1.6em; - font-size: 1.05em; -} - -.element .weight { - font-size: 0.9em; - left: 0.5em; - bottom: 0.5em; -} - -.element .number { - font-size: 1.25em; - font-weight: bold; - color: hsla(0,0%,0%,.5); - right: 0.5em; - top: 0.5em; -} - -.variable-sizes .element.width2 { width: 230px; } - -.variable-sizes .element.height2 { height: 230px; } - -.variable-sizes .element.width2.height2 { - font-size: 2.0em; -} - -.element.large, -.variable-sizes .element.large, -.variable-sizes .element.large.width2.height2 { - font-size: 3.0em; - width: 350px; - height: 350px; - z-index: 100; -} - -.clickable .element:hover { - cursor: pointer; -} - -.clickable .element:hover h3 { - text-shadow: - 0 0 10px white, - 0 0 10px white - ; -} - -.clickable .element:hover h2 { - color: white; -} - -/**** Example Options ****/ - -#options { - padding-bottom: 1.0em; -} - -#options h3 { - margin-bottom: 0.2em; - font-size: 15px; -} - -#options h4 { - font-weight: bold; -} - -#options ul { - margin: 0; - list-style: none; -} - -#options ul ul { - margin-left: 1.5em; -} - -#options li { - float: left; - margin-bottom: 0.2em; -} - -#options li a { - display: block; - padding: 0.4em 0.5em; - background-color: #DDD; - color: #222; - font-weight: bold; - text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); - background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); - background-image: -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); - background-image: -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); - background-image: -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); - background-image: linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); -} - -#options li a:hover { - background-color: #5BF; -} - -#options li a:active { - background-color: #39D; - -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); - -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); - -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); - box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); -} - -#options li a { - border-left: 1px solid hsla( 0, 0%, 100%, 0.3 ); - border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); -} - -#options li:first-child a { - border-radius: 7px 0 0 7px; - border-left: none; -} - -#options li:last-child a { - border-radius: 0 7px 7px 0; -} - -#options li a.selected { - background-color: #13F; - text-shadow: none; - color: white; -} - -/* Combination filter options*/ - -#options .option-combo { - display: inline-block; - float: left; - margin-right: 10px; -} - -#options .option-combo ul { - margin-right: 20px; - display: inline-block; -} - -#options .option-combo h2, -#options .option-combo h4 { - line-height: 34px; - margin-bottom: 0; - margin-right: 5px; - display: inline-block; - vertical-align: top; -} - -/* Color shapes */ - -.color-shape { - width: 70px; - height: 70px; - margin: 5px; - float: left; -} - -.color-shape.round { - -webkit-border-radius: 35px; - -moz-border-radius: 35px; - border-radius: 35px; -} - -.color-shape.big.round { - -webkit-border-radius: 75px; - -moz-border-radius: 75px; - border-radius: 75px; -} - -.color-shape.red { background: red; } -.color-shape.blue { background: blue; } -.color-shape.yellow { background: yellow; } - -.color-shape.wide, .color-shape.big { width: 150px; } -.color-shape.tall, .color-shape.big { height: 150px; } - -.color-shape a { - display: block; - height: 100%; -} - -.color-shape a:hover { - background: white; - background: hsla( 0, 0%, 100%, 0.5 ); -} - -/**** Horizontal ****/ - -.horizontal #container { - height: 80%; -} - -#copy { - max-width: 640px; -} - -/**** Photo demo ****/ - -.photos .photo { - width: 320px; - margin: 5px; - float: left; -} - -.photos .photo img { - display: block; - width: 100%; -} - -#content { - margin-left: 210px; -} - -.demos #content { - height: 100%; -} - -/**** Docs ****/ - -.docs #content { - max-width: 640px; -} - -.docs #content a:hover { - border-bottom: 1px dotted; -} - -/**** Doc page nav ****/ - - - -#site-nav { - width: 200px; - position: absolute; - left: 10px; - top: 0px; - padding-top: 20px; - font-size: 12px; -} - -#site-nav h1 { - font-size: 24px; - margin-bottom: 0.5em; - margin-top: 0; - font-weight: bold; - font-family: 'Helvetica Neue', Arial, sans-serif; -} - -#site-nav h2 { - font-size: 17px; - font-weight: normal; - margin: 0 0 0.3em; - border-top: none; -} - -#site-nav h1 a { color: #4FB; } -#site-nav h1 a:hover { color: #4BF; } - -#site-nav ul { - list-style: none; - margin: 0 0 1.0em; - font-weight: bold; -} - -#site-nav ul ul { margin-bottom: 0; } - -#site-nav ul a { - display: block; - border: none; - padding: 1px 5px; -} - -#site-nav ul .current a { - background: hsla( 0, 0%, 0%, 0.3 ); - color: #1BF; -} -#site-nav ul a:hover, -#site-nav ul .current a:hover { color: white; } - -#site-nav ul .current .toc a { - font-size: 12px; - padding-left: 1.2em; - font-weight: normal; -} - -/**** Doc content ****/ - -.docs #content h2 { - border-top: 1px solid #333; - padding-top: 0.8em; - margin-bottom: 0.8em; -} - -.docs #content h2:target { - padding: 10px; - background: white; - color: #222; -} - -.docs #content h3 { - color: #FEC; - background: hsla( 0, 0%, 75%, 0.05 ); - padding: 2px 0.5em; - margin-bottom: 0.5em; - font-size: 1.15em; -} - -.docs #content h4 { - margin-bottom: 0.5em; - font-size: 14px; -} - - -footer { - font-size: 12px; - font-style: italic; - border-top: 1px solid #333; - padding: 0.8em 0; -} - -pre { - padding: 10px; -} - -pre, code { - background: black; - color: white; - font-family: 'Monaco', monospace, sans-serif; -} - -#content code { - font-size: 12px; -} - -#content pre { - line-height: 1.6em; -} - -h3#options { - padding-bottom: 0; -} - -.option-def dl dt, -.option-def dl dd { - float: left; - padding: 0 1.2em;; - background: #161616; - line-height: 36px; - height: 36px; -} - -.option-def dl.header dt, -.option-def dl.header dd { - background: #444; -} - -.option-def dl .option-type { - font-size: 13px; - color: #AAA; - font-style: italic; -} - -.option-def dl dd { - border-left: 1px solid #222; -} - -/* Tagline */ - -.docs .tagline { - font-size: 22px; - font-weight: 300; -} - -/* as-is from MIT */ - -.docs .as-is { - font-size: 95%; -} - -/* Commercial license blurb */ - -.docs #commercial { - background: white; - padding: 10px; - font-size: 14px; - color: #1F1F1D; -} - -.docs #commercial a { font-weight: bold;} - -/**** Pygments ****/ - -code .s1, -code .s { color: #78BD55; } /* string */ -code .mi, /* integer */ -code .cp, /* doctype */ -code .kc { color: #5298D4; } /*boolean*/ -code .k { color: #E39B79; } /* keyword */ -code .kd, /* storage */ -code .na { color: #A9D866; } /* markup attribute */ -code .p { color: #EDB; } /* punctuation */ -code .o { color: #F63; } /* operator */ -code .nb { color: #AA97AC;} /* support */ - -/* comment */ -code .c, -code .c1 { color: #666; font-style: italic; } - -code .nt { color: #A0C8FC; } /* Markup open tag */ - -code .nf { color: #9EA8B8; } /* css id */ -code .nc { color: #A78352; } /* CSS class */ -code .m { color: #DE8E50; } /* CSS value */ -code .nd { color: #9FAD7E; } /* CSS pseudo selector */ - - - -/**** Super list ****/ - - -/**** Sites using Isotope ****/ - -#sites h2 { - display: none; - padding: 0.4em; - line-height: 32px; - margin-bottom: 0.4em; - -webkit-transition: background-color 0.8s; - -moz-transition: background-color 0.8s; - -o-transition: background-color 0.8s; - transition: background-color 0.8s; -} - -#sites h2 img { - display: inline-block; - margin-right: 0.4em; - vertical-align: bottom; -} - -#sites h2.loading { - background: white; - color: #222; -} -#sites h2.error { - background: red; - color: #222; -} - - -#sites ul { - margin: 0; -} - -.super-list .example { - list-style: none; - float: left; - width: 230px; - margin: 5px; -} - -.super-list .example a, -.super-list .example b, -.super-list .example img { - display: block; -} - -.super-list .example img { width: 100%; } - -.super-list .example a { - background: #1F1E1D; -} - -.super-list .example a:hover { - background: white; - color: #111; -} - -.super-list .example b { - font-weight: bold; - line-height: 1.3em; - padding: 3px; - padding-top: 8px; -} - -.super-list .link { - float: left; - position: relative; - font-size: 24px; - line-height: 1.2em; - font-weight: 300; - margin: 5px; -} - -.super-list .link { - width: 230px; - height: 110px; -} - -.super-list .link a { - display: block; - padding: 10px; - padding-left: 65px; - height: 90px; - background: #1F1E1D; - color: #FE5; - -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; -} - -.super-list .link a:before { - content: 'âž”'; - font-size: 70px; - position: absolute; - top: 30px; - left: 5px; - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); -} - -.super-list .link.away a:before { - top: 25px; - left: 0px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.super-list .link a:hover { - background: #E58; - color: white; -} - -.super-list .feature .name { - bottom: auto; - top: 140px; - left: 18px; - font-size: 20px; -} - -/**** BIG Graph ****/ - -.big-graph { - background: white; - height: 600px; - margin: 20px auto; -} - -.big-graph .project { - width: 45px; - height: 45px; - float: left; -} - -.big-graph .project .icon { - pointer-events: none; - width: 31px; - height: 31px; - background: white; - margin-left: 7px; - -webkit-transition: -webkit-transform 0.25s; - -moz-transition: -moz-transform 0.25s; - -ms-transition: -ms-transform 0.25s; - -o-transition: -o-transform 0.25s; - transition: transform 0.25s; -} - -.big-graph .project:hover { - z-index: 5; - -} - -.big-graph .project:hover .icon { - -webkit-transform: scale(3); - -moz-transform: scale(3); - -ms-transform: scale(3); - -o-transform: scale(3); - transform: scale(3); -} - -.big-graph .project.commercial .icon { background: #6B6B6B; } -.big-graph .project.urbanism .icon { background: #00CF00; } -.big-graph .project.public-space .icon { background: #FF8D00; } -.big-graph .project.culture .icon { background: #D61919; } -.big-graph .project.body-culture .icon { background: #00ECFF; } -.big-graph .project.health .icon { background: #FF2251; } -.big-graph .project.education .icon { background: #00A700; } -.big-graph .project.housing .icon { background: #FF02FF; } -.big-graph .project.hotel .icon { background: #0000C3; } -.big-graph .project.media .icon { background: #292929; } - -.big-graph .project p { - line-height: 14px; - font-size: 10.5px; - color: black; - margin-left: 7px; -} - -/**** Infinite Scroll ****/ - -#infscr-loading { - position: fixed; - text-align: center; - bottom: 30px; - left: 42%; - z-index: 100; - background: white; - background: hsla( 0, 0%, 100%, 0.9 ); - padding: 20px; - color: #222; - font-size: 15px; - font-weight: bold; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; -} - - - -/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } diff --git a/examples/basic.html b/examples/basic.html new file mode 100644 index 0000000..5b74011 --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,63 @@ + + + + + + basic + + + + + + +

basic

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/examples/bottom-up.html b/examples/bottom-up.html new file mode 100644 index 0000000..6d80e72 --- /dev/null +++ b/examples/bottom-up.html @@ -0,0 +1,120 @@ + + + + + + bottom up + + + + + + + + +

bottom up

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/examples/examples.css b/examples/examples.css new file mode 100644 index 0000000..c291f06 --- /dev/null +++ b/examples/examples.css @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} + +.container { + background: #EEE; + width: 50%; + margin-bottom: 20px; +} + +.item { + width: 60px; + height: 60px; + float: left; + border: 1px solid; + background: #09F; +} + +.item.w2 { width: 120px; } +.item.w3 { width: 180px; } + +.item.h2 { height: 100px; } +.item.h3 { height: 160px; } +.item.h4 { height: 220px; } +.item.h5 { height: 280px; } + +.stamp { + background: red; + opacity: 0.75; + position: absolute; + border: 1px solid; +} diff --git a/examples/right-to-left.html b/examples/right-to-left.html new file mode 100644 index 0000000..91e8a18 --- /dev/null +++ b/examples/right-to-left.html @@ -0,0 +1,121 @@ + + + + + + right to left + + + + + + + + +

right to left

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/examples/stamps.html b/examples/stamps.html new file mode 100644 index 0000000..303113f --- /dev/null +++ b/examples/stamps.html @@ -0,0 +1,125 @@ + + + + + + stamps + + + + + + + + + +

stamps

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html deleted file mode 100644 index 43dfdf4..0000000 --- a/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Isotope -layout: default -category: homepage -features: - - name: An exquisite jQuery plugin for magical layouts - symbol: Iso - number: 1 - category: alkali - - name: Dynamic, intelligent layouts - symbol: Dyn - number: 31 - category: actinoid - - name: Re–order items with sorting - symbol: Srt - number: 27 - category: lanthanoid - - name: Powerful methods, simple syntax - symbol: Pow - number: 61 - category: metalloid - - name: Reveal & hide items with filtering - symbol: Flt - number: 11 - category: alkaline-earth - - name: Captivating animations - symbol: Ani - number: 41 - category: transition - - name: Progressively enhanced for CSS3 transforms & transitions - symbol: Pro - number: 71 - category: halogen - - name: Sort items by just about anything - symbol: Any - number: 51 - category: post-transition ---- - -
-
-

Filter:

- -
-
-

Sort:

- -
-
-

Layout:

- -
-
- -
- {% for elem_number in site.random_order limit:30 %} - {% assign element = site.elements[elem_number] %} - {% include element-partial.html %} - {% endfor %} - {% for feature in page.features %} -
-

{{ feature.number }}

-

{{ feature.symbol }}

-

{{ feature.name }}

-
- {% endfor %} -
Down​load jquery​.isotope​.min.js
-
Down​load this project
-
Isotope on GitHub
-
- -
- - - - - diff --git a/isotope.js b/isotope.js new file mode 100644 index 0000000..15a323a --- /dev/null +++ b/isotope.js @@ -0,0 +1,161 @@ +/*! + * Isotope v2.0.0 + * Magical sorting and filtering layouts + * http://isotope.metafizzy.co + */ + +( function( window ) { + +'use strict'; + +// vars +// var document = window.document; + +// -------------------------- helpers -------------------------- // + + +// -------------------------- masonryDefinition -------------------------- // + +// used for AMD definition and requires +function isotopeDefinition( Outlayer, getSize, matchesSelector ) { + // create an Outlayer layout class + var Isotope = Outlayer.create('isotope'); + + Isotope.prototype._create = function() { + // call super + Outlayer.prototype._create.call( this ); + + // create layout modes + this.modes = {}; + // create from registered layout modes + for ( var name in Isotope.layoutModes ) { + this._createLayoutMode( name ); + } + }; + + Isotope.prototype._createLayoutMode = function( name ) { + var LayoutMode = Isotope.layoutModes[ name ]; + var options = this.options[ name ]; + this.modes[ name ] = new LayoutMode( this, options ); + }; + + Isotope.prototype._mode = function() { + return this.modes[ this.options.layoutMode ]; + }; + + Isotope.prototype.layout = function() { + this.filteredItems = this._filter( this.items ); + this._sort(); + Outlayer.prototype.layout.call( this ); + // this._mode._resetLayout(); + // this._resetLayout(); + // this._manageStamps(); + // + // // don't animate first layout + // var isInstant = this.options.isLayoutInstant !== undefined ? + // this.options.isLayoutInstant : !this._isLayoutInited; + // this.layoutItems( this.items, isInstant ); + // + // // flag for initalized + // this._isLayoutInited = true; + }; + + + // -------------------------- filter -------------------------- // + + Isotope.prototype._filter = function( items ) { + var filter = this.options.filter; + var matches = []; + var unmatches = []; + var hiddenMatched = []; + var visibleUnmatched = []; + + var test; + if ( typeof filter === 'function' ) { + test = function( item ) { + return filter( item.element ); + }; + } else { + test = function( item ) { + return matchesSelector( item.element, filter ); + }; + } + + // test each item + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( item.isIgnored ) { + continue; + } + // add item to either matched or unmatched group + var isMatched = test( item ); + item.isFilterMatched = isMatched; + var group = isMatched ? matches : unmatches; + group.push( item ); + // add to additional group if item needs to be hidden or revealed + if ( isMatched && item.isHidden ) { + hiddenMatched.push( item ); + } else if ( !isMatched && !item.isHidden ) { + visibleUnmatched.push( item ); + } + } + + this.reveal( hiddenMatched ); + this.hide( visibleUnmatched ); + + return matches; + }; + + // -------------------------- sort -------------------------- // + + + Isotope.prototype._sort = function() { + var sortBy = this.options.sortBy; + function sortFn( a, b ) { + + } + this.filteredItems.sort( ); + }; + + // -------------------------- methods -------------------------- // + + Isotope.prototype._resetLayout = function() { + this._mode._resetLayout(); + }; + + Isotope.prototype._getItemLayoutPosition = function( item ) { + return this._mode._getItemLayoutPosition( item ); + }; + + + Isotope.prototype._manageStamp = function( stamp ) { + this._mode._manageStamp( stamp ); + }; + + Isotope.prototype._getContainerSize = function() { + return this._mode._getContainerSize(); + }; + + return Isotope; +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + 'outlayer', + 'get-size', + 'matches-selector' + ], + isotopeDefinition ); +} else { + // browser global + window.Isotope = isotopeDefinition( + window.Outlayer, + window.getSize, + window.matchesSelector + ); +} + +})( window ); diff --git a/jquery.isotope.js b/jquery.isotope.js deleted file mode 100644 index c1cf229..0000000 --- a/jquery.isotope.js +++ /dev/null @@ -1,1409 +0,0 @@ -/** - * Isotope v1.5.25 - * An exquisite jQuery plugin for magical layouts - * http://isotope.metafizzy.co - * - * Commercial use requires one-time purchase of a commercial license - * http://isotope.metafizzy.co/docs/license.html - * - * Non-commercial use is licensed under the MIT License - * - * Copyright 2013 Metafizzy - */ - -/*jshint asi: true, browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true */ -/*global jQuery: false */ - -(function( window, $, undefined ){ - - 'use strict'; - - // get global vars - var document = window.document; - var Modernizr = window.Modernizr; - - // helper function - var capitalize = function( str ) { - return str.charAt(0).toUpperCase() + str.slice(1); - }; - - // ========================= getStyleProperty by kangax =============================== - // http://perfectionkills.com/feature-testing-css-properties/ - - var prefixes = 'Moz Webkit O Ms'.split(' '); - - var getStyleProperty = function( propName ) { - var style = document.documentElement.style, - prefixed; - - // test standard property first - if ( typeof style[propName] === 'string' ) { - return propName; - } - - // capitalize - propName = capitalize( propName ); - - // test vendor specific properties - for ( var i=0, len = prefixes.length; i < len; i++ ) { - prefixed = prefixes[i] + propName; - if ( typeof style[ prefixed ] === 'string' ) { - return prefixed; - } - } - }; - - var transformProp = getStyleProperty('transform'), - transitionProp = getStyleProperty('transitionProperty'); - - - // ========================= miniModernizr =============================== - // <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting - - /*! - * Modernizr v1.6ish: miniModernizr for Isotope - * http://www.modernizr.com - * - * Developed by: - * - Faruk Ates http://farukat.es/ - * - Paul Irish http://paulirish.com/ - * - * Copyright (c) 2009-2010 - * Dual-licensed under the BSD or MIT licenses. - * http://www.modernizr.com/license/ - */ - - /* - * This version whittles down the script just to check support for - * CSS transitions, transforms, and 3D transforms. - */ - - var tests = { - csstransforms: function() { - return !!transformProp; - }, - - csstransforms3d: function() { - var test = !!getStyleProperty('perspective'); - // double check for Chrome's false positive - if ( test ) { - var vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '), - mediaQuery = '@media (' + vendorCSSPrefixes.join('transform-3d),(') + 'modernizr)', - $style = $('') - .appendTo('head'), - $div = $('
').appendTo('html'); - - test = $div.height() === 3; - - $div.remove(); - $style.remove(); - } - return test; - }, - - csstransitions: function() { - return !!transitionProp; - } - }; - - var testName; - - if ( Modernizr ) { - // if there's a previous Modernzir, check if there are necessary tests - for ( testName in tests) { - if ( !Modernizr.hasOwnProperty( testName ) ) { - // if test hasn't been run, use addTest to run it - Modernizr.addTest( testName, tests[ testName ] ); - } - } - } else { - // or create new mini Modernizr that just has the 3 tests - Modernizr = window.Modernizr = { - _version : '1.6ish: miniModernizr for Isotope' - }; - - var classes = ' '; - var result; - - // Run through tests - for ( testName in tests) { - result = tests[ testName ](); - Modernizr[ testName ] = result; - classes += ' ' + ( result ? '' : 'no-' ) + testName; - } - - // Add the new classes to the element. - $('html').addClass( classes ); - } - - - // ========================= isoTransform =============================== - - /** - * provides hooks for .css({ scale: value, translate: [x, y] }) - * Progressively enhanced CSS transforms - * Uses hardware accelerated 3D transforms for Safari - * or falls back to 2D transforms. - */ - - if ( Modernizr.csstransforms ) { - - // i.e. transformFnNotations.scale(0.5) >> 'scale3d( 0.5, 0.5, 1)' - var transformFnNotations = Modernizr.csstransforms3d ? - { // 3D transform functions - translate : function ( position ) { - return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0) '; - }, - scale : function ( scale ) { - return 'scale3d(' + scale + ', ' + scale + ', 1) '; - } - } : - { // 2D transform functions - translate : function ( position ) { - return 'translate(' + position[0] + 'px, ' + position[1] + 'px) '; - }, - scale : function ( scale ) { - return 'scale(' + scale + ') '; - } - } - ; - - var setIsoTransform = function ( elem, name, value ) { - // unpack current transform data - var data = $.data( elem, 'isoTransform' ) || {}, - newData = {}, - fnName, - transformObj = {}, - transformValue; - - // i.e. newData.scale = 0.5 - newData[ name ] = value; - // extend new value over current data - $.extend( data, newData ); - - for ( fnName in data ) { - transformValue = data[ fnName ]; - transformObj[ fnName ] = transformFnNotations[ fnName ]( transformValue ); - } - - // get proper order - // ideally, we could loop through this give an array, but since we only have - // a couple transforms we're keeping track of, we'll do it like so - var translateFn = transformObj.translate || '', - scaleFn = transformObj.scale || '', - // sorting so translate always comes first - valueFns = translateFn + scaleFn; - - // set data back in elem - $.data( elem, 'isoTransform', data ); - - // set name to vendor specific property - elem.style[ transformProp ] = valueFns; - }; - - // ==================== scale =================== - - $.cssNumber.scale = true; - - $.cssHooks.scale = { - set: function( elem, value ) { - // uncomment this bit if you want to properly parse strings - // if ( typeof value === 'string' ) { - // value = parseFloat( value ); - // } - setIsoTransform( elem, 'scale', value ); - }, - get: function( elem, computed ) { - var transform = $.data( elem, 'isoTransform' ); - return transform && transform.scale ? transform.scale : 1; - } - }; - - $.fx.step.scale = function( fx ) { - $.cssHooks.scale.set( fx.elem, fx.now+fx.unit ); - }; - - - // ==================== translate =================== - - $.cssNumber.translate = true; - - $.cssHooks.translate = { - set: function( elem, value ) { - - // uncomment this bit if you want to properly parse strings - // if ( typeof value === 'string' ) { - // value = value.split(' '); - // } - // - // var i, val; - // for ( i = 0; i < 2; i++ ) { - // val = value[i]; - // if ( typeof val === 'string' ) { - // val = parseInt( val ); - // } - // } - - setIsoTransform( elem, 'translate', value ); - }, - - get: function( elem, computed ) { - var transform = $.data( elem, 'isoTransform' ); - return transform && transform.translate ? transform.translate : [ 0, 0 ]; - } - }; - - } - - // ========================= get transition-end event =============================== - var transitionEndEvent, transitionDurProp; - - if ( Modernizr.csstransitions ) { - transitionEndEvent = { - WebkitTransitionProperty: 'webkitTransitionEnd', // webkit - MozTransitionProperty: 'transitionend', - OTransitionProperty: 'oTransitionEnd otransitionend', - transitionProperty: 'transitionend' - }[ transitionProp ]; - - transitionDurProp = getStyleProperty('transitionDuration'); - } - - // ========================= smartresize =============================== - - /* - * smartresize: debounced resize event for jQuery - * - * latest version and complete README available on Github: - * https://github.com/louisremi/jquery.smartresize.js - * - * Copyright 2011 @louis_remi - * Licensed under the MIT license. - */ - - var $event = $.event, - dispatchMethod = $.event.handle ? 'handle' : 'dispatch', - resizeTimeout; - - $event.special.smartresize = { - setup: function() { - $(this).bind( "resize", $event.special.smartresize.handler ); - }, - teardown: function() { - $(this).unbind( "resize", $event.special.smartresize.handler ); - }, - handler: function( event, execAsap ) { - // Save the context - var context = this, - args = arguments; - - // set correct event type - event.type = "smartresize"; - - if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } - resizeTimeout = setTimeout(function() { - $event[ dispatchMethod ].apply( context, args ); - }, execAsap === "execAsap"? 0 : 100 ); - } - }; - - $.fn.smartresize = function( fn ) { - return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); - }; - - - -// ========================= Isotope =============================== - - - // our "Widget" object constructor - $.Isotope = function( options, element, callback ){ - this.element = $( element ); - - this._create( options ); - this._init( callback ); - }; - - // styles of container element we want to keep track of - var isoContainerStyles = [ 'width', 'height' ]; - - var $window = $(window); - - $.Isotope.settings = { - resizable: true, - layoutMode : 'masonry', - containerClass : 'isotope', - itemClass : 'isotope-item', - hiddenClass : 'isotope-hidden', - hiddenStyle: { opacity: 0, scale: 0.001 }, - visibleStyle: { opacity: 1, scale: 1 }, - containerStyle: { - position: 'relative', - overflow: 'hidden' - }, - animationEngine: 'best-available', - animationOptions: { - queue: false, - duration: 800 - }, - sortBy : 'original-order', - sortAscending : true, - resizesContainer : true, - transformsEnabled: true, - itemPositionDataEnabled: false - }; - - $.Isotope.prototype = { - - // sets up widget - _create : function( options ) { - - this.options = $.extend( {}, $.Isotope.settings, options ); - - this.styleQueue = []; - this.elemCount = 0; - - // get original styles in case we re-apply them in .destroy() - var elemStyle = this.element[0].style; - this.originalStyle = {}; - // keep track of container styles - var containerStyles = isoContainerStyles.slice(0); - for ( var prop in this.options.containerStyle ) { - containerStyles.push( prop ); - } - for ( var i=0, len = containerStyles.length; i < len; i++ ) { - prop = containerStyles[i]; - this.originalStyle[ prop ] = elemStyle[ prop ] || ''; - } - // apply container style from options - this.element.css( this.options.containerStyle ); - - this._updateAnimationEngine(); - this._updateUsingTransforms(); - - // sorting - var originalOrderSorter = { - 'original-order' : function( $elem, instance ) { - instance.elemCount ++; - return instance.elemCount; - }, - random : function() { - return Math.random(); - } - }; - - this.options.getSortData = $.extend( this.options.getSortData, originalOrderSorter ); - - // need to get atoms - this.reloadItems(); - - // get top left position of where the bricks should be - this.offset = { - left: parseInt( ( this.element.css('padding-left') || 0 ), 10 ), - top: parseInt( ( this.element.css('padding-top') || 0 ), 10 ) - }; - - // add isotope class first time around - var instance = this; - setTimeout( function() { - instance.element.addClass( instance.options.containerClass ); - }, 0 ); - - // bind resize method - if ( this.options.resizable ) { - $window.bind( 'smartresize.isotope', function() { - instance.resize(); - }); - } - - // dismiss all click events from hidden events - this.element.delegate( '.' + this.options.hiddenClass, 'click', function(){ - return false; - }); - - }, - - _getAtoms : function( $elems ) { - var selector = this.options.itemSelector, - // filter & find - $atoms = selector ? $elems.filter( selector ).add( $elems.find( selector ) ) : $elems, - // base style for atoms - atomStyle = { position: 'absolute' }; - - // filter out text nodes - $atoms = $atoms.filter( function( i, atom ) { - return atom.nodeType === 1; - }); - - if ( this.usingTransforms ) { - atomStyle.left = 0; - atomStyle.top = 0; - } - - $atoms.css( atomStyle ).addClass( this.options.itemClass ); - - this.updateSortData( $atoms, true ); - - return $atoms; - }, - - // _init fires when your instance is first created - // (from the constructor above), and when you - // attempt to initialize the widget again (by the bridge) - // after it has already been initialized. - _init : function( callback ) { - - this.$filteredAtoms = this._filter( this.$allAtoms ); - this._sort(); - this.reLayout( callback ); - - }, - - option : function( opts ){ - // change options AFTER initialization: - // signature: $('#foo').bar({ cool:false }); - if ( $.isPlainObject( opts ) ){ - this.options = $.extend( true, this.options, opts ); - - // trigger _updateOptionName if it exists - var updateOptionFn; - for ( var optionName in opts ) { - updateOptionFn = '_update' + capitalize( optionName ); - if ( this[ updateOptionFn ] ) { - this[ updateOptionFn ](); - } - } - } - }, - - // ====================== updaters ====================== // - // kind of like setters - - _updateAnimationEngine : function() { - var animationEngine = this.options.animationEngine.toLowerCase().replace( /[ _\-]/g, ''); - var isUsingJQueryAnimation; - // set applyStyleFnName - switch ( animationEngine ) { - case 'css' : - case 'none' : - isUsingJQueryAnimation = false; - break; - case 'jquery' : - isUsingJQueryAnimation = true; - break; - default : // best available - isUsingJQueryAnimation = !Modernizr.csstransitions; - } - this.isUsingJQueryAnimation = isUsingJQueryAnimation; - this._updateUsingTransforms(); - }, - - _updateTransformsEnabled : function() { - this._updateUsingTransforms(); - }, - - _updateUsingTransforms : function() { - var usingTransforms = this.usingTransforms = this.options.transformsEnabled && - Modernizr.csstransforms && Modernizr.csstransitions && !this.isUsingJQueryAnimation; - - // prevent scales when transforms are disabled - if ( !usingTransforms ) { - delete this.options.hiddenStyle.scale; - delete this.options.visibleStyle.scale; - } - - this.getPositionStyles = usingTransforms ? this._translate : this._positionAbs; - }, - - - // ====================== Filtering ====================== - - _filter : function( $atoms ) { - var filter = this.options.filter === '' ? '*' : this.options.filter; - - if ( !filter ) { - return $atoms; - } - - var hiddenClass = this.options.hiddenClass, - hiddenSelector = '.' + hiddenClass, - $hiddenAtoms = $atoms.filter( hiddenSelector ), - $atomsToShow = $hiddenAtoms; - - if ( filter !== '*' ) { - $atomsToShow = $hiddenAtoms.filter( filter ); - var $atomsToHide = $atoms.not( hiddenSelector ).not( filter ).addClass( hiddenClass ); - this.styleQueue.push({ $el: $atomsToHide, style: this.options.hiddenStyle }); - } - - this.styleQueue.push({ $el: $atomsToShow, style: this.options.visibleStyle }); - $atomsToShow.removeClass( hiddenClass ); - - return $atoms.filter( filter ); - }, - - // ====================== Sorting ====================== - - updateSortData : function( $atoms, isIncrementingElemCount ) { - var instance = this, - getSortData = this.options.getSortData, - $this, sortData; - $atoms.each(function(){ - $this = $(this); - sortData = {}; - // get value for sort data based on fn( $elem ) passed in - for ( var key in getSortData ) { - if ( !isIncrementingElemCount && key === 'original-order' ) { - // keep original order original - sortData[ key ] = $.data( this, 'isotope-sort-data' )[ key ]; - } else { - sortData[ key ] = getSortData[ key ]( $this, instance ); - } - } - // apply sort data to element - $.data( this, 'isotope-sort-data', sortData ); - }); - }, - - // used on all the filtered atoms - _sort : function() { - - var sortBy = this.options.sortBy, - getSorter = this._getSorter, - sortDir = this.options.sortAscending ? 1 : -1, - sortFn = function( alpha, beta ) { - var a = getSorter( alpha, sortBy ), - b = getSorter( beta, sortBy ); - // fall back to original order if data matches - if ( a === b && sortBy !== 'original-order') { - a = getSorter( alpha, 'original-order' ); - b = getSorter( beta, 'original-order' ); - } - return ( ( a > b ) ? 1 : ( a < b ) ? -1 : 0 ) * sortDir; - }; - - this.$filteredAtoms.sort( sortFn ); - }, - - _getSorter : function( elem, sortBy ) { - return $.data( elem, 'isotope-sort-data' )[ sortBy ]; - }, - - // ====================== Layout Helpers ====================== - - _translate : function( x, y ) { - return { translate : [ x, y ] }; - }, - - _positionAbs : function( x, y ) { - return { left: x, top: y }; - }, - - _pushPosition : function( $elem, x, y ) { - x = Math.round( x + this.offset.left ); - y = Math.round( y + this.offset.top ); - var position = this.getPositionStyles( x, y ); - this.styleQueue.push({ $el: $elem, style: position }); - if ( this.options.itemPositionDataEnabled ) { - $elem.data('isotope-item-position', {x: x, y: y} ); - } - }, - - - // ====================== General Layout ====================== - - // used on collection of atoms (should be filtered, and sorted before ) - // accepts atoms-to-be-laid-out to start with - layout : function( $elems, callback ) { - - var layoutMode = this.options.layoutMode; - - // layout logic - this[ '_' + layoutMode + 'Layout' ]( $elems ); - - // set the size of the container - if ( this.options.resizesContainer ) { - var containerStyle = this[ '_' + layoutMode + 'GetContainerSize' ](); - this.styleQueue.push({ $el: this.element, style: containerStyle }); - } - - this._processStyleQueue( $elems, callback ); - - this.isLaidOut = true; - }, - - _processStyleQueue : function( $elems, callback ) { - // are we animating the layout arrangement? - // use plugin-ish syntax for css or animate - var styleFn = !this.isLaidOut ? 'css' : ( - this.isUsingJQueryAnimation ? 'animate' : 'css' - ), - animOpts = this.options.animationOptions, - onLayout = this.options.onLayout, - objStyleFn, processor, - triggerCallbackNow, callbackFn; - - // default styleQueue processor, may be overwritten down below - processor = function( i, obj ) { - obj.$el[ styleFn ]( obj.style, animOpts ); - }; - - if ( this._isInserting && this.isUsingJQueryAnimation ) { - // if using styleQueue to insert items - processor = function( i, obj ) { - // only animate if it not being inserted - objStyleFn = obj.$el.hasClass('no-transition') ? 'css' : styleFn; - obj.$el[ objStyleFn ]( obj.style, animOpts ); - }; - - } else if ( callback || onLayout || animOpts.complete ) { - // has callback - var isCallbackTriggered = false, - // array of possible callbacks to trigger - callbacks = [ callback, onLayout, animOpts.complete ], - instance = this; - triggerCallbackNow = true; - // trigger callback only once - callbackFn = function() { - if ( isCallbackTriggered ) { - return; - } - var hollaback; - for (var i=0, len = callbacks.length; i < len; i++) { - hollaback = callbacks[i]; - if ( typeof hollaback === 'function' ) { - hollaback.call( instance.element, $elems, instance ); - } - } - isCallbackTriggered = true; - }; - - if ( this.isUsingJQueryAnimation && styleFn === 'animate' ) { - // add callback to animation options - animOpts.complete = callbackFn; - triggerCallbackNow = false; - - } else if ( Modernizr.csstransitions ) { - // detect if first item has transition - var i = 0, - firstItem = this.styleQueue[0], - testElem = firstItem && firstItem.$el, - styleObj; - // get first non-empty jQ object - while ( !testElem || !testElem.length ) { - styleObj = this.styleQueue[ i++ ]; - // HACK: sometimes styleQueue[i] is undefined - if ( !styleObj ) { - return; - } - testElem = styleObj.$el; - } - // get transition duration of the first element in that object - // yeah, this is inexact - var duration = parseFloat( getComputedStyle( testElem[0] )[ transitionDurProp ] ); - if ( duration > 0 ) { - processor = function( i, obj ) { - obj.$el[ styleFn ]( obj.style, animOpts ) - // trigger callback at transition end - .one( transitionEndEvent, callbackFn ); - }; - triggerCallbackNow = false; - } - } - } - - // process styleQueue - $.each( this.styleQueue, processor ); - - if ( triggerCallbackNow ) { - callbackFn(); - } - - // clear out queue for next time - this.styleQueue = []; - }, - - - resize : function() { - if ( this[ '_' + this.options.layoutMode + 'ResizeChanged' ]() ) { - this.reLayout(); - } - }, - - - reLayout : function( callback ) { - - this[ '_' + this.options.layoutMode + 'Reset' ](); - this.layout( this.$filteredAtoms, callback ); - - }, - - // ====================== Convenience methods ====================== - - // ====================== Adding items ====================== - - // adds a jQuery object of items to a isotope container - addItems : function( $content, callback ) { - var $newAtoms = this._getAtoms( $content ); - // add new atoms to atoms pools - this.$allAtoms = this.$allAtoms.add( $newAtoms ); - - if ( callback ) { - callback( $newAtoms ); - } - }, - - // convienence method for adding elements properly to any layout - // positions items, hides them, then animates them back in <--- very sezzy - insert : function( $content, callback ) { - // position items - this.element.append( $content ); - - var instance = this; - this.addItems( $content, function( $newAtoms ) { - var $newFilteredAtoms = instance._filter( $newAtoms ); - instance._addHideAppended( $newFilteredAtoms ); - instance._sort(); - instance.reLayout(); - instance._revealAppended( $newFilteredAtoms, callback ); - }); - - }, - - // convienence method for working with Infinite Scroll - appended : function( $content, callback ) { - var instance = this; - this.addItems( $content, function( $newAtoms ) { - instance._addHideAppended( $newAtoms ); - instance.layout( $newAtoms ); - instance._revealAppended( $newAtoms, callback ); - }); - }, - - // adds new atoms, then hides them before positioning - _addHideAppended : function( $newAtoms ) { - this.$filteredAtoms = this.$filteredAtoms.add( $newAtoms ); - $newAtoms.addClass('no-transition'); - - this._isInserting = true; - - // apply hidden styles - this.styleQueue.push({ $el: $newAtoms, style: this.options.hiddenStyle }); - }, - - // sets visible style on new atoms - _revealAppended : function( $newAtoms, callback ) { - var instance = this; - // apply visible style after a sec - setTimeout( function() { - // enable animation - $newAtoms.removeClass('no-transition'); - // reveal newly inserted filtered elements - instance.styleQueue.push({ $el: $newAtoms, style: instance.options.visibleStyle }); - instance._isInserting = false; - instance._processStyleQueue( $newAtoms, callback ); - }, 10 ); - }, - - // gathers all atoms - reloadItems : function() { - this.$allAtoms = this._getAtoms( this.element.children() ); - }, - - // removes elements from Isotope widget - remove: function( $content, callback ) { - // remove elements immediately from Isotope instance - this.$allAtoms = this.$allAtoms.not( $content ); - this.$filteredAtoms = this.$filteredAtoms.not( $content ); - // remove() as a callback, for after transition / animation - var instance = this; - var removeContent = function() { - $content.remove(); - if ( callback ) { - callback.call( instance.element ); - } - }; - - if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) { - // if any non-hidden content needs to be removed - this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle }); - this._sort(); - this.reLayout( removeContent ); - } else { - // remove it now - removeContent(); - } - - }, - - shuffle : function( callback ) { - this.updateSortData( this.$allAtoms ); - this.options.sortBy = 'random'; - this._sort(); - this.reLayout( callback ); - }, - - // destroys widget, returns elements and container back (close) to original style - destroy : function() { - - var usingTransforms = this.usingTransforms; - var options = this.options; - - this.$allAtoms - .removeClass( options.hiddenClass + ' ' + options.itemClass ) - .each(function(){ - var style = this.style; - style.position = ''; - style.top = ''; - style.left = ''; - style.opacity = ''; - if ( usingTransforms ) { - style[ transformProp ] = ''; - } - }); - - // re-apply saved container styles - var elemStyle = this.element[0].style; - for ( var prop in this.originalStyle ) { - elemStyle[ prop ] = this.originalStyle[ prop ]; - } - - this.element - .unbind('.isotope') - .undelegate( '.' + options.hiddenClass, 'click' ) - .removeClass( options.containerClass ) - .removeData('isotope'); - - $window.unbind('.isotope'); - - }, - - - // ====================== LAYOUTS ====================== - - // calculates number of rows or columns - // requires columnWidth or rowHeight to be set on namespaced object - // i.e. this.masonry.columnWidth = 200 - _getSegments : function( isRows ) { - var namespace = this.options.layoutMode, - measure = isRows ? 'rowHeight' : 'columnWidth', - size = isRows ? 'height' : 'width', - segmentsName = isRows ? 'rows' : 'cols', - containerSize = this.element[ size ](), - segments, - // i.e. options.masonry && options.masonry.columnWidth - segmentSize = this.options[ namespace ] && this.options[ namespace ][ measure ] || - // or use the size of the first item, i.e. outerWidth - this.$filteredAtoms[ 'outer' + capitalize(size) ](true) || - // if there's no items, use size of container - containerSize; - - segments = Math.floor( containerSize / segmentSize ); - segments = Math.max( segments, 1 ); - - // i.e. this.masonry.cols = .... - this[ namespace ][ segmentsName ] = segments; - // i.e. this.masonry.columnWidth = ... - this[ namespace ][ measure ] = segmentSize; - - }, - - _checkIfSegmentsChanged : function( isRows ) { - var namespace = this.options.layoutMode, - segmentsName = isRows ? 'rows' : 'cols', - prevSegments = this[ namespace ][ segmentsName ]; - // update cols/rows - this._getSegments( isRows ); - // return if updated cols/rows is not equal to previous - return ( this[ namespace ][ segmentsName ] !== prevSegments ); - }, - - // ====================== Masonry ====================== - - _masonryReset : function() { - // layout-specific props - this.masonry = {}; - // FIXME shouldn't have to call this again - this._getSegments(); - var i = this.masonry.cols; - this.masonry.colYs = []; - while (i--) { - this.masonry.colYs.push( 0 ); - } - }, - - _masonryLayout : function( $elems ) { - var instance = this, - props = instance.masonry; - $elems.each(function(){ - var $this = $(this), - //how many columns does this brick span - colSpan = Math.ceil( $this.outerWidth(true) / props.columnWidth ); - colSpan = Math.min( colSpan, props.cols ); - - if ( colSpan === 1 ) { - // if brick spans only one column, just like singleMode - instance._masonryPlaceBrick( $this, props.colYs ); - } else { - // brick spans more than one column - // how many different places could this brick fit horizontally - var groupCount = props.cols + 1 - colSpan, - groupY = [], - groupColY, - i; - - // for each group potential horizontal position - for ( i=0; i < groupCount; i++ ) { - // make an array of colY values for that one group - groupColY = props.colYs.slice( i, i+colSpan ); - // and get the max value of the array - groupY[i] = Math.max.apply( Math, groupColY ); - } - - instance._masonryPlaceBrick( $this, groupY ); - } - }); - }, - - // worker method that places brick in the columnSet - // with the the minY - _masonryPlaceBrick : function( $brick, setY ) { - // get the minimum Y value from the columns - var minimumY = Math.min.apply( Math, setY ), - shortCol = 0; - - // Find index of short column, the first from the left - for (var i=0, len = setY.length; i < len; i++) { - if ( setY[i] === minimumY ) { - shortCol = i; - break; - } - } - - // position the brick - var x = this.masonry.columnWidth * shortCol, - y = minimumY; - this._pushPosition( $brick, x, y ); - - // apply setHeight to necessary columns - var setHeight = minimumY + $brick.outerHeight(true), - setSpan = this.masonry.cols + 1 - len; - for ( i=0; i < setSpan; i++ ) { - this.masonry.colYs[ shortCol + i ] = setHeight; - } - - }, - - _masonryGetContainerSize : function() { - var containerHeight = Math.max.apply( Math, this.masonry.colYs ); - return { height: containerHeight }; - }, - - _masonryResizeChanged : function() { - return this._checkIfSegmentsChanged(); - }, - - // ====================== fitRows ====================== - - _fitRowsReset : function() { - this.fitRows = { - x : 0, - y : 0, - height : 0 - }; - }, - - _fitRowsLayout : function( $elems ) { - var instance = this, - containerWidth = this.element.width(), - props = this.fitRows; - - $elems.each( function() { - var $this = $(this), - atomW = $this.outerWidth(true), - atomH = $this.outerHeight(true); - - if ( props.x !== 0 && atomW + props.x > containerWidth ) { - // if this element cannot fit in the current row - props.x = 0; - props.y = props.height; - } - - // position the atom - instance._pushPosition( $this, props.x, props.y ); - - props.height = Math.max( props.y + atomH, props.height ); - props.x += atomW; - - }); - }, - - _fitRowsGetContainerSize : function () { - return { height : this.fitRows.height }; - }, - - _fitRowsResizeChanged : function() { - return true; - }, - - - // ====================== cellsByRow ====================== - - _cellsByRowReset : function() { - this.cellsByRow = { - index : 0 - }; - // get this.cellsByRow.columnWidth - this._getSegments(); - // get this.cellsByRow.rowHeight - this._getSegments(true); - }, - - _cellsByRowLayout : function( $elems ) { - var instance = this, - props = this.cellsByRow; - $elems.each( function(){ - var $this = $(this), - col = props.index % props.cols, - row = Math.floor( props.index / props.cols ), - x = ( col + 0.5 ) * props.columnWidth - $this.outerWidth(true) / 2, - y = ( row + 0.5 ) * props.rowHeight - $this.outerHeight(true) / 2; - instance._pushPosition( $this, x, y ); - props.index ++; - }); - }, - - _cellsByRowGetContainerSize : function() { - return { height : Math.ceil( this.$filteredAtoms.length / this.cellsByRow.cols ) * this.cellsByRow.rowHeight + this.offset.top }; - }, - - _cellsByRowResizeChanged : function() { - return this._checkIfSegmentsChanged(); - }, - - - // ====================== straightDown ====================== - - _straightDownReset : function() { - this.straightDown = { - y : 0 - }; - }, - - _straightDownLayout : function( $elems ) { - var instance = this; - $elems.each( function( i ){ - var $this = $(this); - instance._pushPosition( $this, 0, instance.straightDown.y ); - instance.straightDown.y += $this.outerHeight(true); - }); - }, - - _straightDownGetContainerSize : function() { - return { height : this.straightDown.y }; - }, - - _straightDownResizeChanged : function() { - return true; - }, - - - // ====================== masonryHorizontal ====================== - - _masonryHorizontalReset : function() { - // layout-specific props - this.masonryHorizontal = {}; - // FIXME shouldn't have to call this again - this._getSegments( true ); - var i = this.masonryHorizontal.rows; - this.masonryHorizontal.rowXs = []; - while (i--) { - this.masonryHorizontal.rowXs.push( 0 ); - } - }, - - _masonryHorizontalLayout : function( $elems ) { - var instance = this, - props = instance.masonryHorizontal; - $elems.each(function(){ - var $this = $(this), - //how many rows does this brick span - rowSpan = Math.ceil( $this.outerHeight(true) / props.rowHeight ); - rowSpan = Math.min( rowSpan, props.rows ); - - if ( rowSpan === 1 ) { - // if brick spans only one column, just like singleMode - instance._masonryHorizontalPlaceBrick( $this, props.rowXs ); - } else { - // brick spans more than one row - // how many different places could this brick fit horizontally - var groupCount = props.rows + 1 - rowSpan, - groupX = [], - groupRowX, i; - - // for each group potential horizontal position - for ( i=0; i < groupCount; i++ ) { - // make an array of colY values for that one group - groupRowX = props.rowXs.slice( i, i+rowSpan ); - // and get the max value of the array - groupX[i] = Math.max.apply( Math, groupRowX ); - } - - instance._masonryHorizontalPlaceBrick( $this, groupX ); - } - }); - }, - - _masonryHorizontalPlaceBrick : function( $brick, setX ) { - // get the minimum Y value from the columns - var minimumX = Math.min.apply( Math, setX ), - smallRow = 0; - // Find index of smallest row, the first from the top - for (var i=0, len = setX.length; i < len; i++) { - if ( setX[i] === minimumX ) { - smallRow = i; - break; - } - } - - // position the brick - var x = minimumX, - y = this.masonryHorizontal.rowHeight * smallRow; - this._pushPosition( $brick, x, y ); - - // apply setHeight to necessary columns - var setWidth = minimumX + $brick.outerWidth(true), - setSpan = this.masonryHorizontal.rows + 1 - len; - for ( i=0; i < setSpan; i++ ) { - this.masonryHorizontal.rowXs[ smallRow + i ] = setWidth; - } - }, - - _masonryHorizontalGetContainerSize : function() { - var containerWidth = Math.max.apply( Math, this.masonryHorizontal.rowXs ); - return { width: containerWidth }; - }, - - _masonryHorizontalResizeChanged : function() { - return this._checkIfSegmentsChanged(true); - }, - - - // ====================== fitColumns ====================== - - _fitColumnsReset : function() { - this.fitColumns = { - x : 0, - y : 0, - width : 0 - }; - }, - - _fitColumnsLayout : function( $elems ) { - var instance = this, - containerHeight = this.element.height(), - props = this.fitColumns; - $elems.each( function() { - var $this = $(this), - atomW = $this.outerWidth(true), - atomH = $this.outerHeight(true); - - if ( props.y !== 0 && atomH + props.y > containerHeight ) { - // if this element cannot fit in the current column - props.x = props.width; - props.y = 0; - } - - // position the atom - instance._pushPosition( $this, props.x, props.y ); - - props.width = Math.max( props.x + atomW, props.width ); - props.y += atomH; - - }); - }, - - _fitColumnsGetContainerSize : function () { - return { width : this.fitColumns.width }; - }, - - _fitColumnsResizeChanged : function() { - return true; - }, - - - - // ====================== cellsByColumn ====================== - - _cellsByColumnReset : function() { - this.cellsByColumn = { - index : 0 - }; - // get this.cellsByColumn.columnWidth - this._getSegments(); - // get this.cellsByColumn.rowHeight - this._getSegments(true); - }, - - _cellsByColumnLayout : function( $elems ) { - var instance = this, - props = this.cellsByColumn; - $elems.each( function(){ - var $this = $(this), - col = Math.floor( props.index / props.rows ), - row = props.index % props.rows, - x = ( col + 0.5 ) * props.columnWidth - $this.outerWidth(true) / 2, - y = ( row + 0.5 ) * props.rowHeight - $this.outerHeight(true) / 2; - instance._pushPosition( $this, x, y ); - props.index ++; - }); - }, - - _cellsByColumnGetContainerSize : function() { - return { width : Math.ceil( this.$filteredAtoms.length / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth }; - }, - - _cellsByColumnResizeChanged : function() { - return this._checkIfSegmentsChanged(true); - }, - - // ====================== straightAcross ====================== - - _straightAcrossReset : function() { - this.straightAcross = { - x : 0 - }; - }, - - _straightAcrossLayout : function( $elems ) { - var instance = this; - $elems.each( function( i ){ - var $this = $(this); - instance._pushPosition( $this, instance.straightAcross.x, 0 ); - instance.straightAcross.x += $this.outerWidth(true); - }); - }, - - _straightAcrossGetContainerSize : function() { - return { width : this.straightAcross.x }; - }, - - _straightAcrossResizeChanged : function() { - return true; - } - - }; - - - // ======================= imagesLoaded Plugin =============================== - /*! - * jQuery imagesLoaded plugin v1.1.0 - * http://github.com/desandro/imagesloaded - * - * MIT License. by Paul Irish et al. - */ - - - // $('#my-container').imagesLoaded(myFunction) - // or - // $('img').imagesLoaded(myFunction) - - // execute a callback when all images have loaded. - // needed because .load() doesn't work on cached images - - // callback function gets image collection as argument - // `this` is the container - - $.fn.imagesLoaded = function( callback ) { - var $this = this, - $images = $this.find('img').add( $this.filter('img') ), - len = $images.length, - blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==', - loaded = []; - - function triggerCallback() { - callback.call( $this, $images ); - } - - function imgLoaded( event ) { - var img = event.target; - if ( img.src !== blank && $.inArray( img, loaded ) === -1 ){ - loaded.push( img ); - if ( --len <= 0 ){ - setTimeout( triggerCallback ); - $images.unbind( '.imagesLoaded', imgLoaded ); - } - } - } - - // if no images, trigger immediately - if ( !len ) { - triggerCallback(); - } - - $images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoaded ).each( function() { - // cached images don't fire load sometimes, so we reset src. - var src = this.src; - // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f - // data uri bypasses webkit log warning (thx doug jones) - this.src = blank; - this.src = src; - }); - - return $this; - }; - - - // helper function for logging errors - // $.error breaks jQuery chaining - var logError = function( message ) { - if ( window.console ) { - window.console.error( message ); - } - }; - - // ======================= Plugin bridge =============================== - // leverages data method to either create or return $.Isotope constructor - // A bit from jQuery UI - // https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js - // A bit from jcarousel - // https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js - - $.fn.isotope = function( options, callback ) { - if ( typeof options === 'string' ) { - // call method - var args = Array.prototype.slice.call( arguments, 1 ); - - this.each(function(){ - var instance = $.data( this, 'isotope' ); - if ( !instance ) { - logError( "cannot call methods on isotope prior to initialization; " + - "attempted to call method '" + options + "'" ); - return; - } - if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { - logError( "no such method '" + options + "' for isotope instance" ); - return; - } - // apply method - instance[ options ].apply( instance, args ); - }); - } else { - this.each(function() { - var instance = $.data( this, 'isotope' ); - if ( instance ) { - // apply options & init - instance.option( options ); - instance._init( callback ); - } else { - // initialize new instance - $.data( this, 'isotope', new $.Isotope( options, this, callback ) ); - } - }); - } - // return jQuery object - // so plugin methods do not have to - return this; - }; - -})( window, jQuery ); \ No newline at end of file diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js deleted file mode 100644 index ea4afad..0000000 --- a/jquery.isotope.min.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Isotope v1.5.25 - * An exquisite jQuery plugin for magical layouts - * http://isotope.metafizzy.co - * - * Commercial use requires one-time purchase of a commercial license - * http://isotope.metafizzy.co/docs/license.html - * - * Non-commercial use is licensed under the MIT License - * - * Copyright 2013 Metafizzy - */ -(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e"+d+"{#modernizr{height:3px}}"+"").appendTo("head"),f=b('
').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty:"webkitTransitionEnd",MozTransitionProperty:"transitionend",OTransitionProperty:"oTransitionEnd otransitionend",transitionProperty:"transitionend"}[j],r=h("transitionDuration"));var s=b.event,t=b.event.handle?"handle":"dispatch",u;s.special.smartresize={setup:function(){b(this).bind("resize",s.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",s.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",u&&clearTimeout(u),u=setTimeout(function(){s[t].apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),this._create(a),this._init(d)};var v=["width","height"],w=b(a);b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visibleStyle:{opacity:1,scale:1},containerStyle:{position:"relative",overflow:"hidden"},animationEngine:"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!0,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(a){this.options=b.extend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};var d=v.slice(0);for(var e in this.options.containerStyle)d.push(e);for(var f=0,g=d.length;fg?1:f0&&(i=function(a,b){b.$el[d](b.style,f).one(q,k)},j=!1)}}b.each(this.styleQueue,i),j&&k(),this.styleQueue=[]},resize:function(){this["_"+this.options.layoutMode+"ResizeChanged"]()&&this.reLayout()},reLayout:function(a){this["_"+this.options.layoutMode+"Reset"](),this.layout(this.$filteredAtoms,a)},addItems:function(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms.add(c),b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(a){var d=c._filter(a);c._addHideAppended(d),c._sort(),c.reLayout(),c._revealAppended(d,b)})},appended:function(a,b){var c=this;this.addItems(a,function(a){c._addHideAppended(a),c.layout(a),c._revealAppended(a,b)})},_addHideAppended:function(a){this.$filteredAtoms=this.$filteredAtoms.add(a),a.addClass("no-transition"),this._isInserting=!0,this.styleQueue.push({$el:a,style:this.options.hiddenStyle})},_revealAppended:function(a,b){var c=this;setTimeout(function(){a.removeClass("no-transition"),c.styleQueue.push({$el:a,style:c.options.visibleStyle}),c._isInserting=!1,c._processStyleQueue(a,b)},10)},reloadItems:function(){this.$allAtoms=this._getAtoms(this.element.children())},remove:function(a,b){this.$allAtoms=this.$allAtoms.not(a),this.$filteredAtoms=this.$filteredAtoms.not(a);var c=this,d=function(){a.remove(),b&&b.call(c.element)};a.filter(":not(."+this.options.hiddenClass+")").length?(this.styleQueue.push({$el:a,style:this.options.hiddenStyle}),this._sort(),this.reLayout(d)):d()},shuffle:function(a){this.updateSortData(this.$allAtoms),this.options.sortBy="random",this._sort(),this.reLayout(a)},destroy:function(){var a=this.usingTransforms,b=this.options;this.$allAtoms.removeClass(b.hiddenClass+" "+b.itemClass).each(function(){var b=this.style;b.position="",b.top="",b.left="",b.opacity="",a&&(b[i]="")});var c=this.element[0].style;for(var d in this.originalStyle)c[d]=this.originalStyle[d];this.element.unbind(".isotope").undelegate("."+b.hiddenClass,"click").removeClass(b.containerClass).removeData("isotope"),w.unbind(".isotope")},_getSegments:function(a){var b=this.options.layoutMode,c=a?"rowHeight":"columnWidth",d=a?"height":"width",e=a?"rows":"cols",g=this.element[d](),h,i=this.options[b]&&this.options[b][c]||this.$filteredAtoms["outer"+f(d)](!0)||g;h=Math.floor(g/i),h=Math.max(h,1),this[b][e]=h,this[b][c]=i},_checkIfSegmentsChanged:function(a){var b=this.options.layoutMode,c=a?"rows":"cols",d=this[b][c];return this._getSegments(a),this[b][c]!==d},_masonryReset:function(){this.masonry={},this._getSegments();var a=this.masonry.cols;this.masonry.colYs=[];while(a--)this.masonry.colYs.push(0)},_masonryLayout:function(a){var c=this,d=c.masonry;a.each(function(){var a=b(this),e=Math.ceil(a.outerWidth(!0)/d.columnWidth);e=Math.min(e,d.cols);if(e===1)c._masonryPlaceBrick(a,d.colYs);else{var f=d.cols+1-e,g=[],h,i;for(i=0;id&&(e.x=0,e.y=e.height),c._pushPosition(a,e.x,e.y),e.height=Math.max(e.y+g,e.height),e.x+=f})},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResizeChanged:function(){return!0},_cellsByRowReset:function(){this.cellsByRow={index:0},this._getSegments(),this._getSegments(!0)},_cellsByRowLayout:function(a){var c=this,d=this.cellsByRow;a.each(function(){var a=b(this),e=d.index%d.cols,f=Math.floor(d.index/d.cols),g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.$filteredAtoms.length/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.offset.top}},_cellsByRowResizeChanged:function(){return this._checkIfSegmentsChanged()},_straightDownReset:function(){this.straightDown={y:0}},_straightDownLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,0,c.straightDown.y),c.straightDown.y+=d.outerHeight(!0)})},_straightDownGetContainerSize:function(){return{height:this.straightDown.y}},_straightDownResizeChanged:function(){return!0},_masonryHorizontalReset:function(){this.masonryHorizontal={},this._getSegments(!0);var a=this.masonryHorizontal.rows;this.masonryHorizontal.rowXs=[];while(a--)this.masonryHorizontal.rowXs.push(0)},_masonryHorizontalLayout:function(a){var c=this,d=c.masonryHorizontal;a.each(function(){var a=b(this),e=Math.ceil(a.outerHeight(!0)/d.rowHeight);e=Math.min(e,d.rows);if(e===1)c._masonryHorizontalPlaceBrick(a,d.rowXs);else{var f=d.rows+1-e,g=[],h,i;for(i=0;id&&(e.x=e.width,e.y=0),c._pushPosition(a,e.x,e.y),e.width=Math.max(e.x+f,e.width),e.y+=g})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResizeChanged:function(){return!0},_cellsByColumnReset:function(){this.cellsByColumn={index:0},this._getSegments(),this._getSegments(!0)},_cellsByColumnLayout:function(a){var c=this,d=this.cellsByColumn;a.each(function(){var a=b(this),e=Math.floor(d.index/d.rows),f=d.index%d.rows,g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.$filteredAtoms.length/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth}},_cellsByColumnResizeChanged:function(){return this._checkIfSegmentsChanged(!0)},_straightAcrossReset:function(){this.straightAcross={x:0}},_straightAcrossLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,c.straightAcross.x,0),c.straightAcross.x+=d.outerWidth(!0)})},_straightAcrossGetContainerSize:function(){return{width:this.straightAcross.x}},_straightAcrossResizeChanged:function(){return!0}},b.fn.imagesLoaded=function(a){function h(){a.call(c,d)}function i(a){var c=a.target;c.src!==f&&b.inArray(c,g)===-1&&(g.push(c),--e<=0&&(setTimeout(h),d.unbind(".imagesLoaded",i)))}var c=this,d=c.find("img").add(c.filter("img")),e=d.length,f="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",g=[];return e||h(),d.bind("load.imagesLoaded error.imagesLoaded",i).each(function(){var a=this.src;this.src=f,this.src=a}),c};var x=function(b){a.console&&a.console.error(b)};b.fn.isotope=function(a,c){if(typeof a=="string"){var d=Array.prototype.slice.call(arguments,1);this.each(function(){var c=b.data(this,"isotope");if(!c){x("cannot call methods on isotope prior to initialization; attempted to call method '"+a+"'");return}if(!b.isFunction(c[a])||a.charAt(0)==="_"){x("no such method '"+a+"' for isotope instance");return}c[a].apply(c,d)})}else this.each(function(){var d=b.data(this,"isotope");d?(d.option(a),d._init(c)):b.data(this,"isotope",new b.Isotope(a,this,c))});return this}})(window,jQuery); \ No newline at end of file diff --git a/js/fake-element.js b/js/fake-element.js deleted file mode 100644 index 8a3eaa0..0000000 --- a/js/fake-element.js +++ /dev/null @@ -1,38 +0,0 @@ -var fakeElement = {}; - -fakeElement.constanants = 'b c d f g k l m n p q r s t v x z'.split(' '); -fakeElement.vowels = 'a e i o u y'.split(' '); -fakeElement.categories = 'alkali alkaline-earth lanthanoid actinoid transition post-transition'.split(' '); -fakeElement.suffices = 'on ium ogen'.split(' '); - -fakeElement.getRandom = function( property ) { - var values = fakeElement[ property ]; - return values[ Math.floor( Math.random() * values.length ) ]; -}; - -fakeElement.create = function() { - var widthClass = Math.random()*10 > 6 ? 'width2' : 'width1'; - heightClass = Math.random()*10 > 6 ? 'height2' : 'height1'; - category = fakeElement.getRandom('categories'); - className = 'element fake metal ' + category + ' ' + widthClass + ' ' + heightClass; - letter1 = fakeElement.getRandom('constanants').toUpperCase(); - letter2 = fakeElement.getRandom('constanants'); - symbol = letter1 + letter2; - name = letter1 + fakeElement.getRandom('vowels') + letter2 + fakeElement.getRandom('vowels') + fakeElement.getRandom('constanants') + fakeElement.getRandom('suffices'); - number = ~~( 21 + Math.random() * 100 ); - weight = ~~( number * 2 + Math.random() * 15 ); - - return '

' + number + - '

' + symbol + '

' + name + - '

' + weight + '

'; -}; - -fakeElement.getGroup = function() { - var i = Math.ceil( Math.random()*3 + 1 ), - newEls = ''; - while ( i-- ) { - newEls += fakeElement.create(); - } - return newEls; -}; \ No newline at end of file diff --git a/js/jquery-1.7.1.min.js b/js/jquery-1.7.1.min.js deleted file mode 100644 index ee02337..0000000 --- a/js/jquery-1.7.1.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! jQuery v1.7.1 jquery.com | jquery.org/license */ -(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"":"")+""),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;g=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
a",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="
"+""+"
",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="
t
",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="
",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")}; -f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&i.push({elem:this,matches:d.slice(e)});for(j=0;j0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/",""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
","
"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function() -{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(var c=0,d=this.length;c1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]===""&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); \ No newline at end of file diff --git a/js/jquery.ba-bbq.min.js b/js/jquery.ba-bbq.min.js deleted file mode 100644 index bcbf248..0000000 --- a/js/jquery.ba-bbq.min.js +++ /dev/null @@ -1,18 +0,0 @@ -/* - * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010 - * http://benalman.com/projects/jquery-bbq-plugin/ - * - * Copyright (c) 2010 "Cowboy" Ben Alman - * Dual licensed under the MIT and GPL licenses. - * http://benalman.com/about/license/ - */ -(function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this); \ No newline at end of file diff --git a/js/jquery.infinitescroll.min.js b/js/jquery.infinitescroll.min.js deleted file mode 100644 index a6748eb..0000000 --- a/js/jquery.infinitescroll.min.js +++ /dev/null @@ -1,47 +0,0 @@ -/* - -------------------------------- - Infinite Scroll - -------------------------------- - + https://github.com/paulirish/infinitescroll - + version 2.0b2.110713 - + Copyright 2011 Paul Irish & Luke Shumard - + Licensed under the MIT license - - + Documentation: http://infinite-scroll.com/ - -*/ - -(function(window,$,undefined){$.infinitescroll=function infscr(options,callback,element){this.element=$(element);this._create(options,callback);};$.infinitescroll.defaults={loading:{finished:undefined,finishedMsg:"Congratulations, you've reached the end of the internet.",img:"http://www.infinite-scroll.com/loading.gif",msg:null,msgText:"Loading the next set of posts...",selector:null,speed:'fast',start:undefined},state:{isDuringAjax:false,isInvalidPage:false,isDestroyed:false,isDone:false,isPaused:false,currPage:1},callback:undefined,debug:false,behavior:undefined,binder:$(window),nextSelector:"div.navigation a:first",navSelector:"div.navigation",contentSelector:null,extraScrollPx:150,itemSelector:"div.post",animate:false,pathParse:undefined,dataType:'html',appendCallback:true,bufferPx:40,errorCallback:function(){},infid:0,pixelsFromNavToBottom:undefined,path:undefined};$.infinitescroll.prototype={_binding:function infscr_binding(binding){var instance=this,opts=instance.options;if(!!opts.behavior&&this['_binding_'+opts.behavior]!==undefined){this['_binding_'+opts.behavior].call(this);return;} -if(binding!=='bind'&&binding!=='unbind'){this._debug('Binding value '+binding+' not valid') -return false;} -if(binding=='unbind'){(this.options.binder).unbind('smartscroll.infscr.'+instance.options.infid);}else{(this.options.binder)[binding]('smartscroll.infscr.'+instance.options.infid,function(){instance.scroll();});};this._debug('Binding',binding);},_create:function infscr_create(options,callback){if(!this._validate(options)){return false;} -var opts=this.options=$.extend(true,{},$.infinitescroll.defaults,options),relurl=/(.*?\/\/).*?(\/.*)/,path=$(opts.nextSelector).attr('href');opts.contentSelector=opts.contentSelector||this.element;opts.loading.selector=opts.loading.selector||opts.contentSelector;if(!path){this._debug('Navigation selector not found');return;} -opts.path=this._determinepath(path);opts.loading.msg=$('
Loading...
'+opts.loading.msgText+'
');(new Image()).src=opts.loading.img;opts.pixelsFromNavToBottom=$(document).height()-$(opts.navSelector).offset().top;opts.loading.start=opts.loading.start||function(){$(opts.navSelector).hide();opts.loading.msg.appendTo(opts.loading.selector).show(opts.loading.speed,function(){beginAjax(opts);});};opts.loading.finished=opts.loading.finished||function(){opts.loading.msg.fadeOut('normal');};opts.callback=function(instance,data){if(!!opts.behavior&&instance['_callback_'+opts.behavior]!==undefined){instance['_callback_'+opts.behavior].call($(opts.contentSelector)[0],data);} -if(callback){callback.call($(opts.contentSelector)[0],data);}};this._setup();},_debug:function infscr_debug(){if(this.options.debug){return window.console&&console.log.call(console,arguments);}},_determinepath:function infscr_determinepath(path){var opts=this.options;if(!!opts.behavior&&this['_determinepath_'+opts.behavior]!==undefined){this['_determinepath_'+opts.behavior].call(this,path);return;} -if(!!opts.pathParse){this._debug('pathParse manual');return opts.pathParse;}else if(path.match(/^(.*?)\b2\b(.*?$)/)){path=path.match(/^(.*?)\b2\b(.*?$)/).slice(1);}else if(path.match(/^(.*?)2(.*?$)/)){if(path.match(/^(.*?page=)2(\/.*|$)/)){path=path.match(/^(.*?page=)2(\/.*|$)/).slice(1);return path;} -path=path.match(/^(.*?)2(.*?$)/).slice(1);}else{if(path.match(/^(.*?page=)1(\/.*|$)/)){path=path.match(/^(.*?page=)1(\/.*|$)/).slice(1);return path;}else{this._debug('Sorry, we couldn\'t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.');opts.state.isInvalidPage=true;}} -this._debug('determinePath',path);return path;},_error:function infscr_error(xhr){var opts=this.options;if(!!opts.behavior&&this['_error_'+opts.behavior]!==undefined){this['_error_'+opts.behavior].call(this,xhr);return;} -if(xhr!=='destroy'&&xhr!=='end'){xhr='unknown';} -this._debug('Error',xhr);if(xhr=='end'){this._showdonemsg();} -opts.state.isDone=true;opts.state.currPage=1;opts.state.isPaused=false;this._binding('unbind');},_loadcallback:function infscr_loadcallback(box,data){var opts=this.options,callback=this.options.callback,result=(opts.state.isDone)?'done':(!opts.appendCallback)?'no-append':'append',frag;if(!!opts.behavior&&this['_loadcallback_'+opts.behavior]!==undefined){this['_loadcallback_'+opts.behavior].call(this,box,data);return;} -switch(result){case'done':this._showdonemsg();return false;break;case'no-append':if(opts.dataType=='html'){data='
'+data+'
';data=$(data).find(opts.itemSelector);};break;case'append':var children=box.children();if(children.length==0){return this._error('end');} -frag=document.createDocumentFragment();while(box[0].firstChild){frag.appendChild(box[0].firstChild);} -this._debug('contentSelector',$(opts.contentSelector)[0]) -$(opts.contentSelector)[0].appendChild(frag);data=children.get();break;} -opts.loading.finished.call($(opts.contentSelector)[0],opts) -if(opts.animate){var scrollTo=$(window).scrollTop()+$('#infscr-loading').height()+opts.extraScrollPx+'px';$('html,body').animate({scrollTop:scrollTo},800,function(){opts.state.isDuringAjax=false;});} -if(!opts.animate)opts.state.isDuringAjax=false;callback(this,data);},_nearbottom:function infscr_nearbottom(){var opts=this.options,pixelsFromWindowBottomToBottom=0+$(document).height()-(opts.binder.scrollTop())-$(window).height();if(!!opts.behavior&&this['_nearbottom_'+opts.behavior]!==undefined){this['_nearbottom_'+opts.behavior].call(this);return;} -this._debug('math:',pixelsFromWindowBottomToBottom,opts.pixelsFromNavToBottom);return(pixelsFromWindowBottomToBottom-opts.bufferPx-1&&$(opts[key]).length===0){this._debug('Your '+key+' found no elements.');return false;} -return true;}},bind:function infscr_bind(){this._binding('bind');},destroy:function infscr_destroy(){this.options.state.isDestroyed=true;return this._error('destroy');},pause:function infscr_pause(){this._pausing('pause');},resume:function infscr_resume(){this._pausing('resume');},retrieve:function infscr_retrieve(pageNum){var instance=this,opts=instance.options,path=opts.path,box,frag,desturl,method,condition,pageNum=pageNum||null,getPage=(!!pageNum)?pageNum:opts.state.currPage;beginAjax=function infscr_ajax(opts){opts.state.currPage++;instance._debug('heading into ajax',path);box=$(opts.contentSelector).is('table')?$('
'):$('
');desturl=path.join(opts.state.currPage);method=(opts.dataType=='html'||opts.dataType=='json')?opts.dataType:'html+callback';if(opts.appendCallback&&opts.dataType=='html')method+='+callback' -switch(method){case'html+callback':instance._debug('Using HTML via .load() method');box.load(desturl+' '+opts.itemSelector,null,function infscr_ajax_callback(responseText){instance._loadcallback(box,responseText);});break;case'html':case'json':instance._debug('Using '+(method.toUpperCase())+' via $.ajax() method');$.ajax({url:desturl,dataType:opts.dataType,complete:function infscr_ajax_callback(jqXHR,textStatus){condition=(typeof(jqXHR.isResolved)!=='undefined')?(jqXHR.isResolved()):(textStatus==="success"||textStatus==="notmodified");(condition)?instance._loadcallback(box,jqXHR.responseText):instance._error('end');}});break;}};if(!!opts.behavior&&this['retrieve_'+opts.behavior]!==undefined){this['retrieve_'+opts.behavior].call(this,pageNum);return;} -if(opts.state.isDestroyed){this._debug('Instance is destroyed');return false;};opts.state.isDuringAjax=true;opts.loading.start.call($(opts.contentSelector)[0],opts);},scroll:function infscr_scroll(){var opts=this.options,state=opts.state;if(!!opts.behavior&&this['scroll_'+opts.behavior]!==undefined){this['scroll_'+opts.behavior].call(this);return;} -if(state.isDuringAjax||state.isInvalidPage||state.isDone||state.isDestroyed||state.isPaused)return;if(!this._nearbottom())return;this.retrieve();},toggle:function infscr_toggle(){this._pausing();},unbind:function infscr_unbind(){this._binding('unbind');},update:function infscr_options(key){if($.isPlainObject(key)){this.options=$.extend(true,this.options,key);}}} -$.fn.infinitescroll=function infscr_init(options,callback){var thisCall=typeof options;switch(thisCall){case'string':var args=Array.prototype.slice.call(arguments,1);this.each(function(){var instance=$.data(this,'infinitescroll');if(!instance){return false;} -if(!$.isFunction(instance[options])||options.charAt(0)==="_"){return false;} -instance[options].apply(instance,args);});break;case'object':this.each(function(){var instance=$.data(this,'infinitescroll');if(instance){instance.update(options);}else{$.data(this,'infinitescroll',new $.infinitescroll(options,callback,this));}});break;} -return this;};var event=$.event,scrollTimeout;event.special.smartscroll={setup:function(){$(this).bind("scroll",event.special.smartscroll.handler);},teardown:function(){$(this).unbind("scroll",event.special.smartscroll.handler);},handler:function(event,execAsap){var context=this,args=arguments;event.type="smartscroll";if(scrollTimeout){clearTimeout(scrollTimeout);} -scrollTimeout=setTimeout(function(){$.event.handle.apply(context,args);},execAsap==="execAsap"?0:100);}};$.fn.smartscroll=function(fn){return fn?this.bind("smartscroll",fn):this.trigger("smartscroll",["execAsap"]);};})(window,jQuery); \ No newline at end of file diff --git a/js/make-big-graph-projects.js b/js/make-big-graph-projects.js deleted file mode 100644 index a820a18..0000000 --- a/js/make-big-graph-projects.js +++ /dev/null @@ -1,43 +0,0 @@ -var programs = 'commercial urbanism public-space culture body-culture health education housing hotel media'.split(' '), - programsLen = programs.length, - statuses = 'idea in-progress under-construction completed'.split(' '), - statusesLen = statuses.length; - -function randInt(num) { - return Math.floor( Math.random() * num ); -} - -function getChar() { - var code; - if ( Math.random() < 0.05 ) { - // number - code = randInt(10) + 48; - } else { - // alpha - code = randInt(24) + 65; - } - return String.fromCharCode(code); -} - -function makeBigGraphProject() { - var year = 2001 + randInt(11), - i = Math.floor( Math.random() * 2 + 3 ), - title = ''; - while (i--) { - title += getChar(); - } - var program = programs[ randInt( programsLen ) ]; - status = statuses[ randInt( statusesLen ) ]; - scale = randInt(20); - - project = '
' + - '

' + title + '

' + - '
'; - - return project; -} \ No newline at end of file diff --git a/minify.sh b/minify.sh deleted file mode 100755 index 86ac489..0000000 --- a/minify.sh +++ /dev/null @@ -1,15 +0,0 @@ -#!/bin/bash - -# minifies jquery.isotope.js -# requires nodejs & uglifyjs - -IN=jquery.isotope.js -OUT=jquery.isotope.min.js - -# remove any lines that begin with /*jshint or /*global -# then, minify with Uglify JS -# then, add newline characters after `*/`, but not last newline character -awk '!/^\/\*[jshint|global]/' $IN \ - | uglifyjs \ - | awk '{ORS=""; gsub(/\*\//,"*/\n"); if (NR!=1) print "\n"; print;}' > $OUT -echo "Minified" $IN "as" $OUT diff --git a/test/.jshintrc b/test/.jshintrc new file mode 100644 index 0000000..d1003e9 --- /dev/null +++ b/test/.jshintrc @@ -0,0 +1,27 @@ +{ + "browser": true, + "devel": false, + "strict": true, + "undef": true, + "unused": true, + "predef": { + "Masonry": false, + "checkItemPositions": false, + + "asyncTest": false, + "deepEqual": false, + "equal": false, + "expect": false, + "module": false, + "notDeepEqual": false, + "notEqual": false, + "notStrictEqual": false, + "ok": false, + "QUnit": false, + "raises": false, + "start": false, + "stop": false, + "strictEqual": false, + "test": false + } +} diff --git a/test/basic-layout.js b/test/basic-layout.js new file mode 100644 index 0000000..da2b1c4 --- /dev/null +++ b/test/basic-layout.js @@ -0,0 +1,133 @@ +( function() { + +'use strict'; + +test( 'basic layout top left', function() { + var container = document.querySelector('#basic-layout-top-left'); + var msnry = new Masonry( container, { + columnWidth: 60 + }); + + checkItemPositions( msnry, { + 0: { + left: 0, + top: 0 + }, + 1: { + left: 60, + top: 0 + }, + 2: { + left: 120, + top: 0 + }, + 3: { + left: 0, + top: 30 + }, + 4: { + left: 60, + top: 90 + } + }); + +}); + +test( 'basic layout top right', function() { + var container = document.querySelector('#basic-layout-top-right'); + var msnry = new Masonry( container, { + isOriginLeft: false, + columnWidth: 60 + }); + + checkItemPositions( msnry, { + 0: { + right: 0, + top: 0 + }, + 1: { + right: 60, + top: 0 + }, + 2: { + right: 120, + top: 0 + }, + 3: { + right: 0, + top: 30 + }, + 4: { + right: 60, + top: 90 + } + }); + +}); + +test( 'basic layout bottom left', function() { + var container = document.querySelector('#basic-layout-bottom-left'); + var msnry = new Masonry( container, { + isOriginTop: false, + columnWidth: 60 + }); + + checkItemPositions( msnry, { + 0: { + left: 0, + bottom: 0 + }, + 1: { + left: 60, + bottom: 0 + }, + 2: { + left: 120, + bottom: 0 + }, + 3: { + left: 0, + bottom: 30 + }, + 4: { + left: 60, + bottom: 90 + } + }); + +}); + +test( 'basic layout bottom right', function() { + var container = document.querySelector('#basic-layout-bottom-right'); + var msnry = new Masonry( container, { + isOriginLeft: false, + isOriginTop: false, + columnWidth: 60 + }); + + checkItemPositions( msnry, { + 0: { + right: 0, + bottom: 0 + }, + 1: { + right: 60, + bottom: 0 + }, + 2: { + right: 120, + bottom: 0 + }, + 3: { + right: 0, + bottom: 30 + }, + 4: { + right: 60, + bottom: 90 + } + }); + +}); + +})(); diff --git a/test/gutter.js b/test/gutter.js new file mode 100644 index 0000000..c8ddb84 --- /dev/null +++ b/test/gutter.js @@ -0,0 +1,16 @@ +test( 'gutter', function() { + + var container = document.querySelector('#gutter'); + var msnry = new Masonry( container, { + columnWidth: 60, + gutter: 20 + }); + + checkItemPositions( msnry, { + 0: { left: 0, top: 0 }, + 1: { left: 80, top: 0 }, + 2: { left: 160, top: 0 }, + 3: { left: 0, top: 30 } + }); + +}); diff --git a/test/helpers.js b/test/helpers.js new file mode 100644 index 0000000..80cf3cf --- /dev/null +++ b/test/helpers.js @@ -0,0 +1,14 @@ +window.checkItemPositions = function( msnry, positions ) { + var i = 0; + var position = positions[i]; + while ( position ) { + var style = msnry.items[i].element.style; + for ( var prop in position ) { + var value = position[ prop ] + 'px'; + var message = 'item ' + i + ' ' + prop + ' = ' + value; + equal( style[ prop ], value, message ); + } + i++; + position = positions[i]; + } +}; diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..d8211a4 --- /dev/null +++ b/test/index.html @@ -0,0 +1,103 @@ + + + + + + Masonry tests + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Masonry tests

+ +
+ +

Basic layout top left

+ +
+
+
+
+
+
+
+ +

Basic layout top right

+
+
+
+
+
+
+
+ +

Basic layout bottom left

+
+
+
+
+
+
+
+ +

Basic layout bottom right

+
+
+
+
+
+
+
+ +

Gutter

+
+
+
+
+
+
+ +

Stamp

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + + diff --git a/test/stamp.js b/test/stamp.js new file mode 100644 index 0000000..22531c2 --- /dev/null +++ b/test/stamp.js @@ -0,0 +1,58 @@ +( function() { + +'use strict'; + +test( 'stamp top left', function() { + + var container = document.querySelector('#stamp-top-left'); + var msnry = new Masonry( container, { + itemSelector: '.item', + stamp: '.stamp' + }); + + checkItemPositions( msnry, { + 0: { left: 0, top: 20 }, + 1: { left: 135, top: 20 }, + 2: { left: 45, top: 40 }, + 3: { left: 90, top: 40 } + }); + +}); + +test( 'stamp top left', function() { + + var container = document.querySelector('#stamp-top-left'); + var msnry = new Masonry( container, { + itemSelector: '.item', + stamp: '.stamp' + }); + + checkItemPositions( msnry, { + 0: { left: 0, top: 20 }, + 1: { left: 135, top: 20 }, + 2: { left: 45, top: 40 }, + 3: { left: 90, top: 40 } + }); + +}); + +test( 'stamp bottom right', function() { + + var container = document.querySelector('#stamp-bottom-right'); + var msnry = new Masonry( container, { + itemSelector: '.item', + stamp: '.stamp', + isOriginLeft: false, + isOriginTop: false + }); + + checkItemPositions( msnry, { + 0: { right: 0, bottom: 20 }, + 1: { right: 135, bottom: 20 }, + 2: { right: 45, bottom: 40 }, + 3: { right: 90, bottom: 40 } + }); + +}); + +})(); \ No newline at end of file diff --git a/test/tests.css b/test/tests.css new file mode 100644 index 0000000..d3f8e3d --- /dev/null +++ b/test/tests.css @@ -0,0 +1,85 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-family: sans-serif; +} + +.container { + background: #EEE; + width: 180px; + margin-bottom: 20px; + position: relative; +} + +.item { + width: 60px; + height: 30px; + float: left; + border: 1px solid; + background: #09F; +} + +.item.w2 { width: 120px; } +.item.w3 { width: 180px; } + +.item.h2 { height: 50px; } +.item.h3 { height: 70px; } +.item.h4 { height: 90px; } +.item.h5 { height: 110px; } + +.stamp { + background: red; + opacity: 0.75; + position: absolute; + border: 1px solid; +} + + +/* ---- gutter ---- */ + +#gutter { + width: 220px; +} + +#gutter .item.w2 { width: 140px; } + +/* ---- stamp ---- */ + +.has-stamp .item { width: 45px; } + +/* stout, in the middle */ +.has-stamp .stamp1 { + width: 40px; + height: 30px; +} + +/* really wide */ +.has-stamp .stamp2 { + width: 200px; + height: 20px; +} + +#stamp-top-left .stamp1 { + left: 70px; + top: 10px; +} + +#stamp-top-left .stamp2 { + left: -5px; + top: 0; +} + +#stamp-bottom-right .stamp1 { + right: 70px; + bottom: 10px; +} + +#stamp-bottom-right .stamp2 { + right: -5px; + bottom: 0; +} + From 26e5d1b17ee1c7107a6c71ee89da50d3e39f70f0 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 12:40:19 -0400 Subject: [PATCH 002/122] bower components --- .gitignore | 4 +++- bower.json | 15 +++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index dff1a3c..cede92d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ _site -isotope-site.zip \ No newline at end of file +isotope-site.zip +components/ +bower_components/ diff --git a/bower.json b/bower.json index 4b2967b..26e396b 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,17 @@ { - "name": "masonry", - "version": "3.0.0", - "description": "Cascading grid layout library", - "main": "masonry.js", + "name": "isotope", + "version": "2.0.0", + "description": "Filter and sort magical layouts", + "main": [ + "isotope.js" + ], "dependencies": { "get-size": "desandro/get-size", - "outlayer": "metafizzy/outlayer#>=0.4.0" + "matches-selector": "desandro/matches-selector", + "outlayer": "metafizzy/outlayer#>=1.1 <2" }, "devDependencies": { "doc-ready": "desandro/doc-ready", - "qunit": "1.x" + "qunit": "1.12" } } From 42dfbd87a6da3ae31865457d9c36f94b2afa562e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 14:28:24 -0400 Subject: [PATCH 003/122] fit rows layout mode working --- .jshintrc | 10 ++++++++ examples/basic.html | 29 +++++++++++------------ isotope.js | 16 +++++++------ layout-modes/fit-rows.js | 50 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 83 insertions(+), 22 deletions(-) create mode 100644 .jshintrc create mode 100644 layout-modes/fit-rows.js diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..c686ef2 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,10 @@ +{ + "browser": true, + "devel": true, + "strict": true, + "undef": true, + "unused": true, + "predef": { + "define": false + } +} diff --git a/examples/basic.html b/examples/basic.html index 5b74011..b85bf6e 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -36,25 +36,24 @@
- - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/isotope.js b/isotope.js index 15a323a..880eea1 100644 --- a/isotope.js +++ b/isotope.js @@ -14,13 +14,15 @@ // -------------------------- helpers -------------------------- // -// -------------------------- masonryDefinition -------------------------- // +// -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // create an Outlayer layout class var Isotope = Outlayer.create('isotope'); + Isotope.layoutModes = {}; + Isotope.prototype._create = function() { // call super Outlayer.prototype._create.call( this ); @@ -44,8 +46,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { }; Isotope.prototype.layout = function() { - this.filteredItems = this._filter( this.items ); - this._sort(); + // this.filteredItems = this._filter( this.items ); + // this._sort(); Outlayer.prototype.layout.call( this ); // this._mode._resetLayout(); // this._resetLayout(); @@ -120,20 +122,20 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // -------------------------- methods -------------------------- // Isotope.prototype._resetLayout = function() { - this._mode._resetLayout(); + this._mode()._resetLayout(); }; Isotope.prototype._getItemLayoutPosition = function( item ) { - return this._mode._getItemLayoutPosition( item ); + return this._mode()._getItemLayoutPosition( item ); }; Isotope.prototype._manageStamp = function( stamp ) { - this._mode._manageStamp( stamp ); + this._mode()._manageStamp( stamp ); }; Isotope.prototype._getContainerSize = function() { - return this._mode._getContainerSize(); + return this._mode()._getContainerSize(); }; return Isotope; diff --git a/layout-modes/fit-rows.js b/layout-modes/fit-rows.js new file mode 100644 index 0000000..17939af --- /dev/null +++ b/layout-modes/fit-rows.js @@ -0,0 +1,50 @@ +( function( window ) { + +'use strict'; + +var Isotope = window.Isotope; +var Outlayer = window.Outlayer; + +function FitRows( isotope, options ) { + this.isotope = isotope; + this.options = options; +} + +FitRows.prototype._resetLayout = function() { + Outlayer.prototype._resetLayout.apply( this.isotope, arguments ); + this.x = 0; + this.y = 0; + this.maxY = 0; +}; + +FitRows.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + + // if this element cannot fit in the current row + if ( this.x !== 0 && item.size.width + this.x > this.isotope.size.innerWidth ) { + this.x = 0; + this.y = this.maxY; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); + this.x += item.size.width; + + return position; +}; + +FitRows.prototype._manageStamp = function() { + Outlayer.prototype._manageStamp.apply( this.isotope, arguments ); +}; + +FitRows.prototype._getContainerSize = function() { + return { height: this.maxY }; +}; + +Isotope.layoutModes.fitRows = FitRows; + +})( window ); From 37fc502ec440ee3d5c94897df3c19738c4de3d43 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 18:06:20 -0400 Subject: [PATCH 004/122] filtering working --- examples/basic.html | 2 +- isotope.js | 41 +++++++++++++++++++++-------------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index b85bf6e..95b3c6d 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -52,7 +52,7 @@ + diff --git a/isotope.js b/isotope.js index 80b0cda..e0066b9 100644 --- a/isotope.js +++ b/isotope.js @@ -17,13 +17,17 @@ // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires -function isotopeDefinition( Outlayer, getSize, matchesSelector ) { +function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { // create an Outlayer layout class var Isotope = Outlayer.create('isotope'); + Isotope.Item = Isotope.prototype.settings.item = Item; + Isotope.layoutModes = {}; Isotope.prototype._create = function() { + this.itemGUID = 0; + // call super Outlayer.prototype._create.call( this ); @@ -35,6 +39,25 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { } }; + Isotope.prototype.reloadItems = function() { + // reset item ID counter + this.itemGUID = 0; + // call super + Outlayer.prototype.reloadItems.call( this ); + }; + + Isotope.prototype._getItems = function() { + var items = Outlayer.prototype._getItems.apply( this, arguments ); + // assign ID for original-order + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.id = this.itemGUID++; + } + return items; + }; + + // -------------------------- layout -------------------------- // + Isotope.prototype._createLayoutMode = function( name ) { var LayoutMode = Isotope.layoutModes[ name ]; var options = this.options[ name ]; @@ -69,20 +92,10 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { var filter = this.options.filter; filter = filter || '*'; var matches = []; - var unmatches = []; var hiddenMatched = []; var visibleUnmatched = []; - var test; - if ( typeof filter === 'function' ) { - test = function( item ) { - return filter( item.element ); - }; - } else { - test = function( item ) { - return matchesSelector( item.element, filter ); - }; - } + var test = getFilterTest( filter ); // test each item for ( var i=0, len = items.length; i < len; i++ ) { @@ -93,8 +106,10 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // add item to either matched or unmatched group var isMatched = test( item ); item.isFilterMatched = isMatched; - var group = isMatched ? matches : unmatches; - group.push( item ); + // add to matches if its a match + if ( isMatched ) { + matches.push( item ); + } // add to additional group if item needs to be hidden or revealed if ( isMatched && item.isHidden ) { hiddenMatched.push( item ); @@ -109,8 +124,31 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { return matches; }; + // get a function or a matchesSelector test given the filter + function getFilterTest( filter ) { + var test; + if ( typeof filter === 'function' ) { + test = function( item ) { + return filter( item.element ); + }; + } else { + test = function( item ) { + return matchesSelector( item.element, filter ); + }; + } + return test; + } + // -------------------------- sort -------------------------- // + Isotope.prototype.updateSortData = function( items ) { + // default to all items if none are passed in + items = items || this.items; + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.updateSortData(); + } + }; // Isotope.prototype._sort = function() { // var sortBy = this.options.sortBy; @@ -149,7 +187,8 @@ if ( typeof define === 'function' && define.amd ) { define( [ 'outlayer', 'get-size', - 'matches-selector' + 'matches-selector', + './item.js' ], isotopeDefinition ); } else { @@ -157,7 +196,8 @@ if ( typeof define === 'function' && define.amd ) { window.Isotope = isotopeDefinition( window.Outlayer, window.getSize, - window.matchesSelector + window.matchesSelector, + window.Isotope.Item ); } diff --git a/item.js b/item.js new file mode 100644 index 0000000..b521d2f --- /dev/null +++ b/item.js @@ -0,0 +1,61 @@ +/** + * Packery Item Element +**/ + +( function( window ) { + +'use strict'; + +// -------------------------- Item -------------------------- // + +function itemDefinition( Outlayer ) { + +// sub-class Outlayer Item +function Item() { + Outlayer.Item.apply( this, arguments ); +} + +Item.prototype = new Outlayer.Item(); + +Item.prototype._create = function() { + // assign id, used for original-order sorting + this.id = this.layout.itemGUID++; + Outlayer.Item.prototype._create.call( this ); + this.sortData = {}; +}; + +Item.prototype.updateSortData = function() { + // default sorters + this.sortData.id = this.id; + // for backward compatibility + this.sortData['original-order'] = this.id; + this.sortData.random = Math.random(); + // go thru getSortData obj and apply the sorters + var getSortData = this.layout.options.getSortData; + for ( var key in getSortData ) { + var sorter = getSortData[ key ]; + this.sortData[ key ] = sorter( this.element, this ); + } +}; + +return Item; + +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + 'outlayer/outlayer' + ], + itemDefinition ); +} else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.Item = itemDefinition( + window.Outlayer + ); +} + +})( window ); From cb865355da8d221f20ccc75a3362cb9dc89581f8 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 21:50:38 -0400 Subject: [PATCH 006/122] add sorting --- isotope.js | 51 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/isotope.js b/isotope.js index e0066b9..2e5fb2f 100644 --- a/isotope.js +++ b/isotope.js @@ -13,13 +13,14 @@ // -------------------------- helpers -------------------------- // - // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { // create an Outlayer layout class - var Isotope = Outlayer.create('isotope'); + var Isotope = Outlayer.create( 'isotope', { + sortAscending: true + }); Isotope.Item = Isotope.prototype.settings.item = Item; @@ -27,7 +28,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { Isotope.prototype._create = function() { this.itemGUID = 0; - // call super Outlayer.prototype._create.call( this ); @@ -37,6 +37,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { for ( var name in Isotope.layoutModes ) { this._createLayoutMode( name ); } + // keep of track of sortBys + this.sortHistory = [ 'original-order' ]; + this.updateSortData(); }; Isotope.prototype.reloadItems = function() { @@ -70,7 +73,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { Isotope.prototype.layout = function() { this.filteredItems = this._filter( this.items ); - // this._sort(); + this._sort(); // Outlayer.prototype.layout.call( this ); this._mode()._resetLayout(); this._resetLayout(); @@ -150,13 +153,38 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { } }; - // Isotope.prototype._sort = function() { - // var sortBy = this.options.sortBy; - // function sortFn( a, b ) { - // - // } - // this.filteredItems.sort( ); - // }; + // sort filteredItem order + Isotope.prototype._sort = function() { + var sortByOpt = this.options.sortBy; + if ( !sortByOpt ) { + return; + } + // concat all sortBy and sortHistory + var sortBys = [].concat.apply( sortByOpt, this.sortHistory ); + var sortAsc = this.options.sortAscending; + // sort magic + this.filteredItems.sort( function sorter( itemA, itemB ) { + // cycle through all sortKeys + for ( var i = 0, len = sortBys.length; i < len; i++ ) { + var sortBy = sortBys[i]; + var a = itemA.sortData[ sortBy ]; + var b = itemB.sortData[ sortBy ]; + if ( a > b || a < b ) { + // if sortAsc is an object, use the value given the sortBy key + var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc; + var direction = isAscending ? 1 : -1; + return ( a > b ? 1 : -1 ) * direction; + } + } + return 0; + }); + // keep track of sortBy History + var lastSortBy = this.sortHistory[ this.sortHistory.length - 1 ]; + if ( sortByOpt !== lastSortBy ) { + // add to front, oldest goes in last + this.sortHistory.unshift( sortByOpt ); + } + }; // -------------------------- methods -------------------------- // @@ -168,7 +196,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { return this._mode()._getItemLayoutPosition( item ); }; - Isotope.prototype._manageStamp = function( stamp ) { this._mode()._manageStamp( stamp ); }; From 10e44819564732121071d07b7fd279b098d4b02c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 21:58:25 -0400 Subject: [PATCH 007/122] remove extra _resetLayout --- isotope.js | 1 - 1 file changed, 1 deletion(-) diff --git a/isotope.js b/isotope.js index 2e5fb2f..5c15e3f 100644 --- a/isotope.js +++ b/isotope.js @@ -75,7 +75,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { this.filteredItems = this._filter( this.items ); this._sort(); // Outlayer.prototype.layout.call( this ); - this._mode()._resetLayout(); this._resetLayout(); this._manageStamps(); From 98b1141d8e6715b4cff3f983e58817154989e84f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 4 Aug 2013 20:44:17 -0400 Subject: [PATCH 008/122] fit rows should use outerwidth --- layout-modes/fit-rows.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layout-modes/fit-rows.js b/layout-modes/fit-rows.js index 17939af..237a00f 100644 --- a/layout-modes/fit-rows.js +++ b/layout-modes/fit-rows.js @@ -21,7 +21,7 @@ FitRows.prototype._getItemLayoutPosition = function( item ) { item.getSize(); // if this element cannot fit in the current row - if ( this.x !== 0 && item.size.width + this.x > this.isotope.size.innerWidth ) { + if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) { this.x = 0; this.y = this.maxY; } @@ -32,7 +32,7 @@ FitRows.prototype._getItemLayoutPosition = function( item ) { }; this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); - this.x += item.size.width; + this.x += item.size.outerWidth; return position; }; From 42cf246db2e0e6392daa6d13b9063b72549a06d0 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 4 Aug 2013 20:45:54 -0400 Subject: [PATCH 009/122] sorting example --- examples/examples.css | 50 +++++++++++ examples/sorting.html | 201 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 251 insertions(+) create mode 100644 examples/sorting.html diff --git a/examples/examples.css b/examples/examples.css index c291f06..81105d6 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -2,6 +2,7 @@ box-sizing: border-box; } +#container, .container { background: #EEE; width: 50%; @@ -30,3 +31,52 @@ position: absolute; border: 1px solid; } + + +/* element */ + +.element { + width: 80px; + height: 90px; + margin: 5px; + background: #DDD; + float: left; + position: relative; + padding: 5px; +} + +.element > * { + margin: 0; +} + +.element .number { + right: 5px; + top: 5px; + position: absolute; +} + +.element .symbol { + font-size: 30px; + left: 5px; + top: 5px; + color: white; +} + +.element .name { + font-size: 14px; +} + +.element .weight { + font-size: 14px; +} + +.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } +.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } +.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } +.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } +.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } +.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } +.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } +.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } +.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } +.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } diff --git a/examples/sorting.html b/examples/sorting.html new file mode 100644 index 0000000..6e27cbc --- /dev/null +++ b/examples/sorting.html @@ -0,0 +1,201 @@ + + + + + + sorting + + + + + + +

sorting

+ +
+

Sort

+ +
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + + From 1ecb92f360cd88ef63dacf7fba99b2a96928b072 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 13 Aug 2013 22:56:21 -0400 Subject: [PATCH 010/122] add sorter munging --- examples/sorting.html | 32 ++++++++++------- item.js | 83 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 12 deletions(-) diff --git a/examples/sorting.html b/examples/sorting.html index 6e27cbc..8ea3678 100644 --- a/examples/sorting.html +++ b/examples/sorting.html @@ -152,22 +152,30 @@ docReady( function() { var iso = window.iso = new Isotope( container, { layoutMode: 'fitRows', getSortData: { - number: function( itemElem ) { - return parseInt( getText( itemElem.querySelector('.number') ), 10 ); - }, - symbol: function( itemElem ) { - return getText( itemElem.querySelector('.symbol') ); - }, - name: function( itemElem ) { - return getText( itemElem.querySelector('.name') ); - }, + // number: function( itemElem ) { + // return parseInt( getText( itemElem.querySelector('.number') ), 10 ); + // }, + // symbol: function( itemElem ) { + // return getText( itemElem.querySelector('.symbol') ); + // }, + // name: function( itemElem ) { + // return getText( itemElem.querySelector('.name') ); + // }, + // category: function( itemElem ) { + // return itemElem.getAttribute('data-category'); + // }, + + number: '.number parseInt', + symbol: '.symbol', + name: '.name', + category: '[data-category]', + weight: function( itemElem ) { // remove parenthesis return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); - }, - category: function( itemElem ) { - return itemElem.getAttribute('data-category'); } + + } }); diff --git a/item.js b/item.js index b521d2f..4a2fe36 100644 --- a/item.js +++ b/item.js @@ -6,6 +6,30 @@ 'use strict'; +// -------------------------- helpers -------------------------- // + +// trim + +var trim = String.prototype.trim ? + function( str ) { + return str.trim(); + } : + function( str ) { + return str.replace( /^\s+|\s+$/g, '' ); + }; + + +var docElem = document.documentElement; + +var getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + + // -------------------------- Item -------------------------- // function itemDefinition( Outlayer ) { @@ -34,10 +58,69 @@ Item.prototype.updateSortData = function() { var getSortData = this.layout.options.getSortData; for ( var key in getSortData ) { var sorter = getSortData[ key ]; + sorter = mungeSorter( sorter ); this.sortData[ key ] = sorter( this.element, this ); } }; +// add a magic layer to sorters +// for convienent shorthands +// .foo-bar will use the text of .foo-bar querySelector +// [foo-bar] will use attribute +// you can also add parser +// `.foo-bar parseInt` will parse that as a number +function mungeSorter( sorter ) { + if ( typeof sorter !== 'string' ) { + return sorter; + } + + var args = trim( sorter ).split(' '); + var parser; + + // use second argument as a parser + switch ( args[1] ) { + case 'parseInt' : + parser = function( val ) { + return parseInt( val, 10 ); + }; + break; + case 'parseFloat' : + parser = function( val ) { + return parseFloat( val ); + }; + } + + var query = args[0]; + var attrMatch = query.match( /^\[(.+)\]$/ ); + var attr = attrMatch && attrMatch[1]; + + + var getValue; + + // if query looks like [foo-bar], get attribute + if ( attr ) { + getValue = function( elem ) { + return elem.getAttribute( attr ); + }; + } else { + // otherwise, assume its a querySelector, and get its text + getValue = function( elem ) { + return getText( elem.querySelector( query ) ); + }; + } + + // parse the value, if there was a parser + sorter = parser ? function( elem ) { + return parser( getValue( elem ) ); + } : + // otherwise just return value + function( elem ) { + return getValue( elem ); + }; + + return sorter; +} + return Item; } From 1874ad2f7b40f5c16e1f2406c5f224a32a031c0e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 15 Aug 2013 22:45:44 -0400 Subject: [PATCH 011/122] add notes; rearrange item.js --- item.js | 32 ++++++++++++++------------------ notes.md | 10 ++++++++++ 2 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 notes.md diff --git a/item.js b/item.js index 4a2fe36..c6bf7f1 100644 --- a/item.js +++ b/item.js @@ -75,28 +75,12 @@ function mungeSorter( sorter ) { } var args = trim( sorter ).split(' '); - var parser; - - // use second argument as a parser - switch ( args[1] ) { - case 'parseInt' : - parser = function( val ) { - return parseInt( val, 10 ); - }; - break; - case 'parseFloat' : - parser = function( val ) { - return parseFloat( val ); - }; - } var query = args[0]; + // check if query looks like [an-attribute] var attrMatch = query.match( /^\[(.+)\]$/ ); var attr = attrMatch && attrMatch[1]; - - var getValue; - // if query looks like [foo-bar], get attribute if ( attr ) { getValue = function( elem ) { @@ -108,7 +92,19 @@ function mungeSorter( sorter ) { return getText( elem.querySelector( query ) ); }; } - + // use second argument as a parser + var parser; + switch ( args[1] ) { + case 'parseInt' : + parser = function( val ) { + return parseInt( val, 10 ); + }; + break; + case 'parseFloat' : + parser = function( val ) { + return parseFloat( val ); + }; + } // parse the value, if there was a parser sorter = parser ? function( elem ) { return parser( getValue( elem ) ); diff --git a/notes.md b/notes.md new file mode 100644 index 0000000..ff37c86 --- /dev/null +++ b/notes.md @@ -0,0 +1,10 @@ +sortBy an array + +sortBy the history + +getSortData shorthand + +filter + +filter on init doesn't do transition + From 21918857440069013acc0fc52cf25073c1f8013a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 15 Aug 2013 23:34:43 -0400 Subject: [PATCH 012/122] add layout-mode.js --- examples/sorting.html | 1 + isotope.js | 7 +++--- layout-mode.js | 51 ++++++++++++++++++++++++++++++++++++++++ layout-modes/fit-rows.js | 14 +++-------- notes.md | 3 +++ 5 files changed, 61 insertions(+), 15 deletions(-) create mode 100644 layout-mode.js diff --git a/examples/sorting.html b/examples/sorting.html index 8ea3678..00dd684 100644 --- a/examples/sorting.html +++ b/examples/sorting.html @@ -144,6 +144,7 @@ + + + + + + + + + + + + + + + + + + + diff --git a/isotope.js b/isotope.js index 3da2b6b..4b44e70 100644 --- a/isotope.js +++ b/isotope.js @@ -13,18 +13,26 @@ // -------------------------- helpers -------------------------- // +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} + + // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires -function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { +function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode ) { // create an Outlayer layout class var Isotope = Outlayer.create( 'isotope', { sortAscending: true }); Isotope.Item = Isotope.prototype.settings.item = Item; - - Isotope.layoutModes = {}; + Isotope.layoutMode = layoutMode; Isotope.prototype._create = function() { this.itemGUID = 0; @@ -34,7 +42,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { // create layout modes this.modes = {}; // create from registered layout modes - for ( var name in Isotope.layoutModes ) { + for ( var name in layoutMode.modes ) { this._initLayoutMode( name ); } // keep of track of sortBys @@ -62,7 +70,12 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { // -------------------------- layout -------------------------- // Isotope.prototype._initLayoutMode = function( name ) { - var LayoutMode = Isotope.layoutModes[ name ]; + var LayoutMode = layoutMode.modes[ name ]; + // set mode options + // HACK extend initial options, back-fill in default options + this.options[ name ] = LayoutMode.options ? + extend( LayoutMode.options, this.options[ name ] || {} ) : {}; + // init layout mode instance this.modes[ name ] = new LayoutMode( this ); }; @@ -222,10 +235,11 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - 'outlayer', - 'get-size', - 'matches-selector', - './item.js' + 'outlayer/outlayer', + 'get-size/get-size', + 'matches-selector/matches-selector', + './item.js', + './layout-modes.js' ], isotopeDefinition ); } else { @@ -234,7 +248,8 @@ if ( typeof define === 'function' && define.amd ) { window.Outlayer, window.getSize, window.matchesSelector, - window.Isotope.Item + window.Isotope.Item, + window.Isotope.layoutMode ); } diff --git a/layout-mode.js b/layout-mode.js index 06af062..4e701c6 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -4,20 +4,62 @@ // -------------------------- -------------------------- // -var Isotope = window.Isotope; +// var Isotope = window.Isotope; -Isotope.createLayoutMode = function( namespace, options ) { +var layoutMode = {}; + +layoutMode.options = {}; +layoutMode.modes = {}; + +layoutMode.create = function( namespace, options ) { function LayoutMode( isotope ) { this.isotope = isotope; - // link options to isotope.options - this.options = isotope && isotope.options[ this.namespace ]; + // link properties + if ( isotope ) { + this.options = isotope.options[ this.namespace ]; + console.log( this.options ); + this._getMeasurement = isotope._getMeasurement; + this.element = isotope.element; + this.items = isotope.items; + this.size = isotope.size; + // this.getSize = isotope.getSize; + // this._getElementOffset = isotope._getElementOffset; + } } + + // default options + if ( options ) { + LayoutMode.options = options; + } + + // Outlayer.prototype._getMeasurement = function( measurement, size ) { + // var option = this.options[ measurement ]; + // var elem; + // if ( !option ) { + // // default to 0 + // this[ measurement ] = 0; + // } else { + // if ( typeof option === 'string' ) { + // elem = this.element.querySelector( option ); + // } else if ( isElement( option ) ) { + // elem = option; + // } + // // use size of element, if element + // this[ measurement ] = elem ? getSize( elem )[ size ] : option; + // } + // }; + + + LayoutMode.prototype.namespace = namespace; // set default options - Isotope.prototype.options[ namespace ] = options || {}; + // layoutMode.options[ namespace ] = options || {}; // register in Isotope - Isotope.layoutModes[ namespace ] = LayoutMode; + layoutMode.modes[ namespace ] = LayoutMode; return LayoutMode; }; +var Isotope = window.Isotope = window.Isotope || {}; +Isotope.layoutMode = layoutMode; + })( window ); diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js new file mode 100644 index 0000000..b2738c7 --- /dev/null +++ b/layout-modes/masonry.js @@ -0,0 +1,211 @@ +/*! + * Masonry v3.1.1 + * Cascading grid layout library + * http://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +( function( window ) { + +'use strict'; + +// vars +// var document = window.document; + +// -------------------------- helpers -------------------------- // + +var indexOf = Array.prototype.indexOf ? + function( items, value ) { + return items.indexOf( value ); + } : + function ( items, value ) { + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( item === value ) { + return i; + } + } + return -1; + }; + +// -------------------------- masonryDefinition -------------------------- // + +// used for AMD definition and requires +function masonryDefinition( layoutMode, getSize ) { + // create an Outlayer layout class + var Masonry = layoutMode.create('masonry'); + + Masonry.prototype._resetLayout = function() { + this.isotope.getSize(); + this._getMeasurement( 'columnWidth', 'outerWidth' ); + this._getMeasurement( 'gutter', 'outerWidth' ); + this.measureColumns(); + + // reset column Y + var i = this.cols; + this.colYs = []; + while (i--) { + this.colYs.push( 0 ); + } + + this.maxY = 0; + }; + + Masonry.prototype.measureColumns = function() { + var container = this._getSizingContainer(); + // if columnWidth is 0, default to outerWidth of first item + var firstItem = this.items[0]; + var firstItemElem = firstItem && firstItem.element; + if ( !this.columnWidth ) { + // columnWidth fall back to item of first element + this.columnWidth = firstItemElem ? getSize( firstItemElem ).outerWidth : + // or size of container + this.size.innerWidth; + } + this.columnWidth += this.gutter; + + this._containerWidth = getSize( container ).innerWidth; + this.cols = Math.floor( ( this._containerWidth + this.gutter ) / this.columnWidth ); + this.cols = Math.max( this.cols, 1 ); + }; + + Masonry.prototype._getSizingContainer = function() { + return this.options.isFitWidth ? this.element.parentNode : this.element; + }; + + Masonry.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + // how many columns does this brick span + var colSpan = Math.ceil( item.size.outerWidth / this.columnWidth ); + colSpan = Math.min( colSpan, this.cols ); + + var colGroup = this._getColGroup( colSpan ); + // get the minimum Y value from the columns + var minimumY = Math.min.apply( Math, colGroup ); + var shortColIndex = indexOf( colGroup, minimumY ); + + // position the brick + var position = { + x: this.columnWidth * shortColIndex, + y: minimumY + }; + + // apply setHeight to necessary columns + var setHeight = minimumY + item.size.outerHeight; + var setSpan = this.cols + 1 - colGroup.length; + for ( var i = 0; i < setSpan; i++ ) { + this.colYs[ shortColIndex + i ] = setHeight; + } + + return position; + }; + + /** + * @param {Number} colSpan - number of columns the element spans + * @returns {Array} colGroup + */ + Masonry.prototype._getColGroup = function( colSpan ) { + if ( colSpan === 1 ) { + // if brick spans only one column, use all the column Ys + return this.colYs; + } + + var colGroup = []; + // how many different places could this brick fit horizontally + var groupCount = this.cols + 1 - colSpan; + // for each group potential horizontal position + for ( var i = 0; i < groupCount; i++ ) { + // make an array of colY values for that one group + var groupColYs = this.colYs.slice( i, i + colSpan ); + // and get the max value of the array + colGroup[i] = Math.max.apply( Math, groupColYs ); + } + return colGroup; + }; + + Masonry.prototype._manageStamp = function( stamp ) { + var stampSize = getSize( stamp ); + var offset = this.isotope._getElementOffset( stamp ); + // get the columns that this stamp affects + var firstX = this.isotope.options.isOriginLeft ? offset.left : offset.right; + var lastX = firstX + stampSize.outerWidth; + var firstCol = Math.floor( firstX / this.columnWidth ); + firstCol = Math.max( 0, firstCol ); + var lastCol = Math.floor( lastX / this.columnWidth ); + lastCol = Math.min( this.cols - 1, lastCol ); + // set colYs to bottom of the stamp + var stampMaxY = ( this.isotope.options.isOriginTop ? offset.top : offset.bottom ) + + stampSize.outerHeight; + for ( var i = firstCol; i <= lastCol; i++ ) { + this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); + } + }; + + Masonry.prototype._getContainerSize = function() { + this.maxY = Math.max.apply( Math, this.colYs ); + var size = { + height: this.maxY + }; + + if ( this.options.isFitWidth ) { + size.width = this._getContainerFitWidth(); + } + + return size; + }; + + Masonry.prototype._getContainerFitWidth = function() { + var unusedCols = 0; + // count unused columns + var i = this.cols; + while ( --i ) { + if ( this.colYs[i] !== 0 ) { + break; + } + unusedCols++; + } + // fit container to columns that have been used + return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; + }; + + // debounced, layout on resize + // HEADS UP this overwrites Outlayer.resize + // Any changes in Outlayer.resize need to be manually added here + Masonry.prototype.resize = function() { + // don't trigger if size did not change + var container = this._getSizingContainer(); + var size = getSize( container ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.size && size; + if ( hasSizes && size.innerWidth === this._containerWidth ) { + return; + } + + this.layout(); + + delete this.isotope.resizeTimeout; + }; + + return Masonry; +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../isotope', + 'get-size/get-size' + ], + masonryDefinition ); +} else { + // browser global + masonryDefinition( + window.Isotope.layoutMode, + window.getSize + ); +} + +})( window ); diff --git a/notes.md b/notes.md index c264b32..ffb28b7 100644 --- a/notes.md +++ b/notes.md @@ -11,3 +11,10 @@ filter on init doesn't do transition sortAscending sortAscending for object + + +--- + +set default options somewhere + +new layout mode comes with those options by default \ No newline at end of file From 1b35d6b4104edd30db960edcaf1213cf920f9fbe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 16 Aug 2013 17:47:51 -0400 Subject: [PATCH 016/122] keep initial mode options --- examples/masonry.html | 13 ------------- isotope.js | 3 ++- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/examples/masonry.html b/examples/masonry.html index 20469a9..55f88a4 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -168,18 +168,6 @@ docReady( function() { columnWidth: 120 }, getSortData: { - // number: function( itemElem ) { - // return parseInt( getText( itemElem.querySelector('.number') ), 10 ); - // }, - // symbol: function( itemElem ) { - // return getText( itemElem.querySelector('.symbol') ); - // }, - // name: function( itemElem ) { - // return getText( itemElem.querySelector('.name') ); - // }, - // category: function( itemElem ) { - // return itemElem.getAttribute('data-category'); - // }, number: '.number parseInt', symbol: '.symbol', @@ -191,7 +179,6 @@ docReady( function() { return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); } - } }); diff --git a/isotope.js b/isotope.js index 4b44e70..fa50517 100644 --- a/isotope.js +++ b/isotope.js @@ -73,8 +73,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode var LayoutMode = layoutMode.modes[ name ]; // set mode options // HACK extend initial options, back-fill in default options + var initialOpts = this.options[ name ] || {}; this.options[ name ] = LayoutMode.options ? - extend( LayoutMode.options, this.options[ name ] || {} ) : {}; + extend( LayoutMode.options, initialOpts ) : initialOpts; // init layout mode instance this.modes[ name ] = new LayoutMode( this ); }; From 736f65c58d81c3c0a90bba524857c6d964688722 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 16 Aug 2013 18:06:13 -0400 Subject: [PATCH 017/122] sub-class Masonry. Baller status. :sunglasses: --- bower.json | 3 +- examples/masonry.html | 3 +- layout-mode.js | 1 - layout-modes/masonry.js | 156 +++++----------------------------------- 4 files changed, 23 insertions(+), 140 deletions(-) diff --git a/bower.json b/bower.json index 26e396b..5cb97a7 100644 --- a/bower.json +++ b/bower.json @@ -8,7 +8,8 @@ "dependencies": { "get-size": "desandro/get-size", "matches-selector": "desandro/matches-selector", - "outlayer": "metafizzy/outlayer#>=1.1 <2" + "outlayer": "metafizzy/outlayer#>=1.1 <2", + "masonry": ">=3.1" }, "devDependencies": { "doc-ready": "desandro/doc-ready", diff --git a/examples/masonry.html b/examples/masonry.html index 55f88a4..1dc0316 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -153,6 +153,7 @@ + @@ -165,7 +166,7 @@ docReady( function() { var iso = window.iso = new Isotope( container, { layoutMode: 'masonry', masonry: { - columnWidth: 120 + columnWidth: 90 }, getSortData: { diff --git a/layout-mode.js b/layout-mode.js index 4e701c6..f93c801 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -17,7 +17,6 @@ layoutMode.create = function( namespace, options ) { // link properties if ( isotope ) { this.options = isotope.options[ this.namespace ]; - console.log( this.options ); this._getMeasurement = isotope._getMeasurement; this.element = isotope.element; this.items = isotope.items; diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index b2738c7..db7852d 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -1,130 +1,37 @@ /*! - * Masonry v3.1.1 - * Cascading grid layout library + * Masonry layout mode + * sub-classes Masonry * http://masonry.desandro.com - * MIT License - * by David DeSandro */ ( function( window ) { 'use strict'; -// vars -// var document = window.document; - // -------------------------- helpers -------------------------- // -var indexOf = Array.prototype.indexOf ? - function( items, value ) { - return items.indexOf( value ); - } : - function ( items, value ) { - for ( var i=0, len = items.length; i < len; i++ ) { - var item = items[i]; - if ( item === value ) { - return i; - } - } - return -1; - }; +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} // -------------------------- masonryDefinition -------------------------- // // used for AMD definition and requires -function masonryDefinition( layoutMode, getSize ) { +function masonryDefinition( layoutMode, Masonry, getSize ) { // create an Outlayer layout class - var Masonry = layoutMode.create('masonry'); + var MasonryMode = layoutMode.create('masonry'); + // sub-class Masonry + extend( MasonryMode.prototype, Masonry.prototype ); - Masonry.prototype._resetLayout = function() { + MasonryMode.prototype.getSize = function() { this.isotope.getSize(); - this._getMeasurement( 'columnWidth', 'outerWidth' ); - this._getMeasurement( 'gutter', 'outerWidth' ); - this.measureColumns(); - - // reset column Y - var i = this.cols; - this.colYs = []; - while (i--) { - this.colYs.push( 0 ); - } - - this.maxY = 0; - }; - - Masonry.prototype.measureColumns = function() { - var container = this._getSizingContainer(); - // if columnWidth is 0, default to outerWidth of first item - var firstItem = this.items[0]; - var firstItemElem = firstItem && firstItem.element; - if ( !this.columnWidth ) { - // columnWidth fall back to item of first element - this.columnWidth = firstItemElem ? getSize( firstItemElem ).outerWidth : - // or size of container - this.size.innerWidth; - } - this.columnWidth += this.gutter; - - this._containerWidth = getSize( container ).innerWidth; - this.cols = Math.floor( ( this._containerWidth + this.gutter ) / this.columnWidth ); - this.cols = Math.max( this.cols, 1 ); - }; - - Masonry.prototype._getSizingContainer = function() { - return this.options.isFitWidth ? this.element.parentNode : this.element; - }; - - Masonry.prototype._getItemLayoutPosition = function( item ) { - item.getSize(); - // how many columns does this brick span - var colSpan = Math.ceil( item.size.outerWidth / this.columnWidth ); - colSpan = Math.min( colSpan, this.cols ); - - var colGroup = this._getColGroup( colSpan ); - // get the minimum Y value from the columns - var minimumY = Math.min.apply( Math, colGroup ); - var shortColIndex = indexOf( colGroup, minimumY ); - - // position the brick - var position = { - x: this.columnWidth * shortColIndex, - y: minimumY - }; - - // apply setHeight to necessary columns - var setHeight = minimumY + item.size.outerHeight; - var setSpan = this.cols + 1 - colGroup.length; - for ( var i = 0; i < setSpan; i++ ) { - this.colYs[ shortColIndex + i ] = setHeight; - } - - return position; - }; - - /** - * @param {Number} colSpan - number of columns the element spans - * @returns {Array} colGroup - */ - Masonry.prototype._getColGroup = function( colSpan ) { - if ( colSpan === 1 ) { - // if brick spans only one column, use all the column Ys - return this.colYs; - } - - var colGroup = []; - // how many different places could this brick fit horizontally - var groupCount = this.cols + 1 - colSpan; - // for each group potential horizontal position - for ( var i = 0; i < groupCount; i++ ) { - // make an array of colY values for that one group - var groupColYs = this.colYs.slice( i, i + colSpan ); - // and get the max value of the array - colGroup[i] = Math.max.apply( Math, groupColYs ); - } - return colGroup; }; - Masonry.prototype._manageStamp = function( stamp ) { + MasonryMode.prototype._manageStamp = function( stamp ) { var stampSize = getSize( stamp ); var offset = this.isotope._getElementOffset( stamp ); // get the columns that this stamp affects @@ -142,37 +49,10 @@ function masonryDefinition( layoutMode, getSize ) { } }; - Masonry.prototype._getContainerSize = function() { - this.maxY = Math.max.apply( Math, this.colYs ); - var size = { - height: this.maxY - }; - - if ( this.options.isFitWidth ) { - size.width = this._getContainerFitWidth(); - } - - return size; - }; - - Masonry.prototype._getContainerFitWidth = function() { - var unusedCols = 0; - // count unused columns - var i = this.cols; - while ( --i ) { - if ( this.colYs[i] !== 0 ) { - break; - } - unusedCols++; - } - // fit container to columns that have been used - return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; - }; - // debounced, layout on resize // HEADS UP this overwrites Outlayer.resize // Any changes in Outlayer.resize need to be manually added here - Masonry.prototype.resize = function() { + MasonryMode.prototype.resize = function() { // don't trigger if size did not change var container = this._getSizingContainer(); var size = getSize( container ); @@ -188,7 +68,7 @@ function masonryDefinition( layoutMode, getSize ) { delete this.isotope.resizeTimeout; }; - return Masonry; + return MasonryMode; } // -------------------------- transport -------------------------- // @@ -197,6 +77,7 @@ if ( typeof define === 'function' && define.amd ) { // AMD define( [ '../isotope', + 'masonry/masonry', 'get-size/get-size' ], masonryDefinition ); @@ -204,6 +85,7 @@ if ( typeof define === 'function' && define.amd ) { // browser global masonryDefinition( window.Isotope.layoutMode, + window.Masonry, window.getSize ); } From 0eac5cc612247687c0d21ed7414fb9334697a1f9 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 19 Aug 2013 06:55:12 -0400 Subject: [PATCH 018/122] don't animate first filter --- isotope.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/isotope.js b/isotope.js index fa50517..65a620d 100644 --- a/isotope.js +++ b/isotope.js @@ -85,15 +85,18 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; Isotope.prototype.layout = function() { + // don't animate first layout + var isInstant = this._isInitInstant = this.options.isLayoutInstant !== undefined ? + this.options.isLayoutInstant : !this._isLayoutInited; + this.filteredItems = this._filter( this.items ); this._sort(); // Outlayer.prototype.layout.call( this ); this._resetLayout(); this._manageStamps(); - // don't animate first layout - var isInstant = this.options.isLayoutInstant !== undefined ? - this.options.isLayoutInstant : !this._isLayoutInited; + // var isInstant = this.options.isLayoutInstant !== undefined ? + // this.options.isLayoutInstant : !this._isLayoutInited; this.layoutItems( this.filteredItems, isInstant ); // flag for initalized @@ -133,8 +136,18 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode } } + // HACK + // disable transition on init + var _transitionDuration = this.options.transitionDuration; + if ( this._isInitInstant ) { + this.options.transitionDuration = 0; + } this.reveal( hiddenMatched ); this.hide( visibleUnmatched ); + // set back + if ( this._isInitInstant ) { + this.options.transitionDuration = _transitionDuration; + } return matches; }; From 9ba51c957c31e80ca5616d56e726fa44f2099eeb Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 19 Aug 2013 06:55:22 -0400 Subject: [PATCH 019/122] masonry tweaks --- layout-modes/masonry.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index db7852d..d090f8d 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -63,7 +63,7 @@ function masonryDefinition( layoutMode, Masonry, getSize ) { return; } - this.layout(); + this.isotope.layout(); delete this.isotope.resizeTimeout; }; @@ -76,7 +76,7 @@ function masonryDefinition( layoutMode, Masonry, getSize ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../isotope', + '../layout-mode', 'masonry/masonry', 'get-size/get-size' ], From 3e2eb7b0f0fedd075f99e2b5dd428de70b3e4d7e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 19 Aug 2013 07:01:54 -0400 Subject: [PATCH 020/122] refactor outlayer methods in LayoutMode --- examples/basic.html | 1 + examples/masonry.html | 5 ++- isotope.js | 24 +++++-------- layout-mode.js | 74 +++++++++++++++++++++++++++------------- layout-modes/fit-rows.js | 27 ++++++++++++--- 5 files changed, 86 insertions(+), 45 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index 7864743..1819f19 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -46,6 +46,7 @@ + diff --git a/examples/masonry.html b/examples/masonry.html index 1dc0316..3b981ed 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -3,7 +3,7 @@ - sorting + masonry + + + + +

sorting

+ +
+

Sort

+ +
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/layout-mode.js b/layout-mode.js index e1e3daa..2895fa8 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -4,8 +4,6 @@ // -------------------------- -------------------------- // -// var Isotope = window.Isotope; - function layoutModeDefinition( Outlayer ) { var layoutMode = {}; @@ -13,6 +11,7 @@ var layoutMode = {}; layoutMode.modes = {}; layoutMode.create = function( namespace, options ) { + // layout mode class function LayoutMode( isotope ) { this.isotope = isotope; // link properties diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js new file mode 100644 index 0000000..4d9ec9b --- /dev/null +++ b/layout-modes/cells-by-row.js @@ -0,0 +1,81 @@ +( function( window ) { + +'use strict'; + +function cellsByRowDefinition( layoutMode, getSize ) { + + var CellsByRow = layoutMode.create( 'cellsByRow' ); + + var __resetLayout = CellsByRow.prototype._resetLayout; + + CellsByRow.prototype._resetLayout = function() { + // call super + __resetLayout.call( this ); + var containerSize = this.isotope.size; + this.itemIndex = 0; + + this._getMeasurement( 'columnWidth', 'outerWidth' ); + this._getMeasurement( 'rowHeight', 'outerHeight' ); + + var firstItem = this.items[0]; + var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element ); + + if ( !this.columnWidth ) { + // columnWidth fall back to item of first element + this.columnWidth = firstItemSize ? firstItemSize.outerWidth : + // or size of container + containerSize.innerWidth; + } + + if ( !this.rowHeight ) { + // rowHeight fall back to item of first element + this.rowHeight = firstItemSize ? firstItemSize.outerHeight : + // or size of container + containerSize.innerHeight; + } + + this.cols = Math.floor( containerSize.innerWidth / this.columnWidth ); + this.cols = Math.max( this.cols, 1 ); + + }; + + CellsByRow.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var col = this.itemIndex % this.cols; + var row = Math.floor( this.itemIndex / this.cols ); + // center item within cell + var x = ( col + 0.5 ) * this.columnWidth - item.size.outerWidth / 2; + var y = ( row + 0.5 ) * this.rowHeight - item.size.outerHeight / 2; + this.itemIndex++; + return { x: x, y: y }; + }; + + CellsByRow.prototype._getContainerSize = function() { + return { + height: ( this.itemIndex / this.cols ) * this.rowHeight + }; + }; + + return CellsByRow; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode', + 'get-size/get-size' + ], + cellsByRowDefinition ); +} else { + // browser global + cellsByRowDefinition( + window.Isotope.layoutMode, + window.getSize + ); +} + + +})( window ); + + From d5ff0005474b60ef7f139a08ae588ece10a338ec Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 19 Aug 2013 21:17:26 -0400 Subject: [PATCH 022/122] trigger Outlayer._resetLayout --- isotope.js | 2 ++ layout-modes/cells-by-row.js | 4 ---- layout-modes/fit-rows.js | 3 --- layout-modes/masonry.js | 1 + 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/isotope.js b/isotope.js index 0bf36f3..dc005ef 100644 --- a/isotope.js +++ b/isotope.js @@ -214,6 +214,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode // -------------------------- methods -------------------------- // Isotope.prototype._resetLayout = function() { + // trigger original reset layout + Outlayer.prototype._resetLayout.call( this ); this._mode()._resetLayout(); }; diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js index 4d9ec9b..df6facd 100644 --- a/layout-modes/cells-by-row.js +++ b/layout-modes/cells-by-row.js @@ -6,11 +6,7 @@ function cellsByRowDefinition( layoutMode, getSize ) { var CellsByRow = layoutMode.create( 'cellsByRow' ); - var __resetLayout = CellsByRow.prototype._resetLayout; - CellsByRow.prototype._resetLayout = function() { - // call super - __resetLayout.call( this ); var containerSize = this.isotope.size; this.itemIndex = 0; diff --git a/layout-modes/fit-rows.js b/layout-modes/fit-rows.js index 6e8e4e5..f36fa31 100644 --- a/layout-modes/fit-rows.js +++ b/layout-modes/fit-rows.js @@ -8,10 +8,7 @@ var FitRows = layoutMode.create( 'fitRows', { foo: 'bar' }); -var __resetLayout = FitRows.prototype._resetLayout; FitRows.prototype._resetLayout = function() { - // call original _resetLayout - __resetLayout.call( this ); this.x = 0; this.y = 0; this.maxY = 0; diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index d090f8d..7428937 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -29,6 +29,7 @@ function masonryDefinition( layoutMode, Masonry, getSize ) { MasonryMode.prototype.getSize = function() { this.isotope.getSize(); + this.size = this.isotope.size; }; MasonryMode.prototype._manageStamp = function( stamp ) { From 8cb6565c7a9ce3c42545aac07011e1653a558096 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 22 Aug 2013 08:07:45 -0400 Subject: [PATCH 023/122] add vertical layout mode; add filter + sort demo --- examples/cells-by-row.html | 10 +- examples/filter-sort.html | 203 +++++++++++++++++++++++++++++++++++++ layout-modes/vertical.js | 45 ++++++++ notes.md | 14 ++- 4 files changed, 266 insertions(+), 6 deletions(-) create mode 100644 examples/filter-sort.html create mode 100644 layout-modes/vertical.js diff --git a/examples/cells-by-row.html b/examples/cells-by-row.html index 0c12b39..f14b600 100644 --- a/examples/cells-by-row.html +++ b/examples/cells-by-row.html @@ -3,7 +3,7 @@ - masonry + cellsByRow + + + +

filter sort

+ +
+

Filter

+
+ + + +
+

Sort

+
+ + + + + + +
+
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/layout-modes/vertical.js b/layout-modes/vertical.js new file mode 100644 index 0000000..c5c91df --- /dev/null +++ b/layout-modes/vertical.js @@ -0,0 +1,45 @@ +( function( window ) { + +'use strict'; + +function verticalDefinition( layoutMode ) { + +var Vertical = layoutMode.create( 'vertical', { + horizontalAlignment: 0 +}); + +Vertical.prototype._resetLayout = function() { + this.y = 0; +}; + +Vertical.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) * + this.options.horizontalAlignment; + var y = this.y; + this.y += item.size.outerHeight; + return { x: x, y: y }; +}; + +Vertical.prototype._getContainerSize = function() { + return { height: this.y }; +}; + +return Vertical; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode' + ], + verticalDefinition ); +} else { + // browser global + verticalDefinition( + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/notes.md b/notes.md index ffb28b7..ce9361f 100644 --- a/notes.md +++ b/notes.md @@ -1,3 +1,11 @@ +## to do + +isOriginTop / isOriginLeft integration + +manageStamp + +## tests + sortBy an array sortBy the history @@ -13,8 +21,6 @@ sortAscending sortAscending for object ---- - -set default options somewhere +## bugs -new layout mode comes with those options by default \ No newline at end of file +click _filter: some_, then while transitioning _filter: all_. The some will be hidden when transition ends \ No newline at end of file From e0991f764deed9977c35d9af651daaa3132aef3e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 24 Aug 2013 13:00:57 -0400 Subject: [PATCH 024/122] throw error if no mode --- isotope.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/isotope.js b/isotope.js index dc005ef..c1751db 100644 --- a/isotope.js +++ b/isotope.js @@ -81,7 +81,11 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; Isotope.prototype._mode = function() { - return this.modes[ this.options.layoutMode ]; + var mode = this.modes[ this.options.layoutMode ]; + if ( !mode ) { + throw new Error( 'No layout mode: ' + this.options.layoutMode ); + } + return mode; }; Isotope.prototype.layout = function() { From e68f99c7547b76149f66e3553531f317366254f0 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 24 Aug 2013 13:02:17 -0400 Subject: [PATCH 025/122] fix cellsByRow container size --- examples/filter-sort.html | 6 ++++++ layout-modes/cells-by-row.js | 5 ++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/filter-sort.html b/examples/filter-sort.html index 49b836d..5655108 100644 --- a/examples/filter-sort.html +++ b/examples/filter-sort.html @@ -154,6 +154,8 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/layout-modes/fit-columns.js b/layout-modes/fit-columns.js new file mode 100644 index 0000000..a7d3c74 --- /dev/null +++ b/layout-modes/fit-columns.js @@ -0,0 +1,60 @@ +( function( window ) { + +'use strict'; + +function fitColumnsDefinition( layoutMode ) { + + var FitColumns = layoutMode.create('fitColumns'); + + FitColumns.prototype._resetLayout = function() { + this.x = 0; + this.y = 0; + this.maxX = 0; + }; + + FitColumns.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + + // if this element cannot fit in the current row + if ( this.y !== 0 && item.size.outerHeight + this.y > this.isotope.size.innerHeight ) { + this.y = 0; + this.x = this.maxX; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxX = Math.max( this.maxX, this.x + item.size.outerWidth ); + this.y += item.size.outerHeight; + + return position; + }; + + FitColumns.prototype._getContainerSize = function() { + return { width: this.maxX }; + }; + + FitColumns.prototype.resize = function() { + this.isotope.resizeVertical(); + }; + + return FitColumns; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode' + ], + fitColumnsDefinition ); +} else { + // browser global + fitColumnsDefinition( + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/layout-modes/horizontal.js b/layout-modes/horizontal.js new file mode 100644 index 0000000..21aefb0 --- /dev/null +++ b/layout-modes/horizontal.js @@ -0,0 +1,50 @@ +( function( window ) { + +'use strict'; + +function horizontalDefinition( layoutMode ) { + + var Horizontal = layoutMode.create( 'horizontal', { + verticalAlignment: 0 + }); + + Horizontal.prototype._resetLayout = function() { + this.x = 0; + }; + + Horizontal.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var y = ( this.isotope.size.innerHeight - item.size.outerHeight ) * + this.options.verticalAlignment; + var x = this.x; + this.x += item.size.outerWidth; + console.log( x, y ); + return { x: x, y: y }; + }; + + Horizontal.prototype._getContainerSize = function() { + return { width: this.x }; + }; + + Horizontal.prototype.resize = function() { + this.isotope.resizeVertical(); + }; + + return Horizontal; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode' + ], + horizontalDefinition ); +} else { + // browser global + horizontalDefinition( + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/notes.md b/notes.md index ce9361f..e94fa7d 100644 --- a/notes.md +++ b/notes.md @@ -1,5 +1,7 @@ ## to do +add horizontal layout modes + isOriginTop / isOriginLeft integration manageStamp @@ -23,4 +25,3 @@ sortAscending for object ## bugs -click _filter: some_, then while transitioning _filter: all_. The some will be hidden when transition ends \ No newline at end of file From 0158e3ca7a27c39b9696da522572ba7f71c6360f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 25 Aug 2013 23:02:50 -0400 Subject: [PATCH 028/122] move _mode; sync layout mode options in _mode --- isotope.js | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/isotope.js b/isotope.js index 2141efd..53f6c78 100644 --- a/isotope.js +++ b/isotope.js @@ -80,14 +80,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode this.modes[ name ] = new LayoutMode( this ); }; - Isotope.prototype._mode = function() { - var mode = this.modes[ this.options.layoutMode ]; - if ( !mode ) { - throw new Error( 'No layout mode: ' + this.options.layoutMode ); - } - return mode; - }; - Isotope.prototype.layout = function( opts ) { this.option( opts ); @@ -219,6 +211,19 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode // -------------------------- methods -------------------------- // + // get layout mode + Isotope.prototype._mode = function() { + var layoutMode = this.options.layoutMode; + var mode = this.modes[ layoutMode ]; + if ( !mode ) { + throw new Error( 'No layout mode: ' + layoutMode ); + } + // HACK sync mode's options + // any options set after init for layout mode need to be synced + mode.options = this.options[ layoutMode ]; + return mode; + }; + Isotope.prototype._resetLayout = function() { // trigger original reset layout Outlayer.prototype._resetLayout.call( this ); @@ -241,6 +246,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode this._mode().resize(); }; + // for vertical layout modes + Isotope.prototype.resizeVertical = function() { + // don't trigger if size did not change + var size = getSize( this.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.size && size; + if ( hasSizes && size.innerHeight === this.size.innerHeight ) { + return; + } + + this.layout(); + + delete this.resizeTimeout; + }; + return Isotope; } From 74f3bbc2b22cfcd58cf6379f7a650fc46ddc3766 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 26 Aug 2013 07:06:30 -0400 Subject: [PATCH 029/122] refactor mungeSorter --- item.js | 39 +++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/item.js b/item.js index c6bf7f1..b532446 100644 --- a/item.js +++ b/item.js @@ -73,13 +73,29 @@ function mungeSorter( sorter ) { if ( typeof sorter !== 'string' ) { return sorter; } - + // parse the sorter string var args = trim( sorter ).split(' '); - var query = args[0]; // check if query looks like [an-attribute] var attrMatch = query.match( /^\[(.+)\]$/ ); var attr = attrMatch && attrMatch[1]; + var getValue = getValueGetter( attr, query ); + // use second argument as a parser + var parser = getParser( args[1] ); + // parse the value, if there was a parser + sorter = parser ? function( elem ) { + return parser( getValue( elem ) ); + } : + // otherwise just return value + function( elem ) { + return getValue( elem ); + }; + + return sorter; +} + +// get an attribute getter, or get text of the querySelector +function getValueGetter( attr, query ) { var getValue; // if query looks like [foo-bar], get attribute if ( attr ) { @@ -92,9 +108,13 @@ function mungeSorter( sorter ) { return getText( elem.querySelector( query ) ); }; } - // use second argument as a parser + return getValue; +} + +// return a parser function if arg matches +function getParser( arg ) { var parser; - switch ( args[1] ) { + switch ( arg ) { case 'parseInt' : parser = function( val ) { return parseInt( val, 10 ); @@ -105,16 +125,7 @@ function mungeSorter( sorter ) { return parseFloat( val ); }; } - // parse the value, if there was a parser - sorter = parser ? function( elem ) { - return parser( getValue( elem ) ); - } : - // otherwise just return value - function( elem ) { - return getValue( elem ); - }; - - return sorter; + return parser; } return Item; From 8aecc6653d385e219d6d2746aef42e44e4f47ae6 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 26 Aug 2013 07:52:57 -0400 Subject: [PATCH 030/122] add cells by column --- examples/horizontal-layout-modes.html | 3 +- layout-modes/cells-by-column.js | 80 +++++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 layout-modes/cells-by-column.js diff --git a/examples/horizontal-layout-modes.html b/examples/horizontal-layout-modes.html index e26644e..6bab077 100644 --- a/examples/horizontal-layout-modes.html +++ b/examples/horizontal-layout-modes.html @@ -162,6 +162,7 @@ + - - - - - - - - - - - - + - - - - - + + + + + + + + + + + + + + + + + + -

Masonry tests

+

Isotope tests

-

Basic layout top left

- -
-
-
-
-
-
-
+

Sorting

-

Basic layout top right

-
-
-
-
-
-
+
+
B4
+
B2
+
A4
+
A1
+
B1
+
A3
+
A2
-

Basic layout bottom left

-
-
-
-
-
-
-
- -

Basic layout bottom right

-
-
-
-
-
-
-
- -

Gutter

-
-
-
-
-
-
- -

Stamp

-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
diff --git a/test/sorting1.js b/test/sorting1.js new file mode 100644 index 0000000..7a0bec3 --- /dev/null +++ b/test/sorting1.js @@ -0,0 +1,44 @@ +( function() { + +'use strict'; + +var docElem = document.documentElement; + +var getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + +function getItemsText( iso ) { + var texts = []; + for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { + var item = iso.filteredItems[i]; + texts.push( getText( item.element ) ); + } + return texts.join(','); +} + +test( 'sort uses history', function() { + var iso = new Isotope( '#sorting1', { + layoutMode: 'fitRows', + transitionDuration: 0, + getSortData: { + letter: 'b', + number: 'i' + }, + sortBy: 'number' + }); + + iso.layout({ sortBy: 'letter' }); + + var texts = getItemsText( iso ); + + equal( texts, 'A1,A2,A3,A4,B1,B2,B4', 'items sorted by letter, then number, via history' ); + + iso.destroy(); +}); + +})(); From 7b7eaa25c00c481ca131c5dd66d91e62d372912b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 27 Aug 2013 09:38:05 -0400 Subject: [PATCH 033/122] sorting test --- notes.md | 11 ------- test/index.html | 2 +- test/sorting.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++ test/sorting1.js | 44 --------------------------- 4 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 test/sorting.js delete mode 100644 test/sorting1.js diff --git a/notes.md b/notes.md index e94fa7d..e7d45a2 100644 --- a/notes.md +++ b/notes.md @@ -8,20 +8,9 @@ manageStamp ## tests -sortBy an array - -sortBy the history - getSortData shorthand filter -filter on init doesn't do transition - -sortAscending - -sortAscending for object - - ## bugs diff --git a/test/index.html b/test/index.html index d35292a..f736ad9 100644 --- a/test/index.html +++ b/test/index.html @@ -27,7 +27,7 @@ - + diff --git a/test/sorting.js b/test/sorting.js new file mode 100644 index 0000000..f7874f2 --- /dev/null +++ b/test/sorting.js @@ -0,0 +1,79 @@ +( function() { + +'use strict'; + +var docElem = document.documentElement; + +var getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + +function getItemsText( iso ) { + var texts = []; + for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { + var item = iso.filteredItems[i]; + texts.push( getText( item.element ) ); + } + return texts.join(','); +} + +test( 'sorting', function() { + + // sorting with history + ( function() { + var iso = new Isotope( '#sorting1', { + layoutMode: 'fitRows', + transitionDuration: 0, + getSortData: { + letter: 'b', + number: 'i' + }, + sortBy: 'number' + }); + + iso.layout({ sortBy: 'letter' }); + + var texts = getItemsText( iso ); + + equal( texts, 'A1,A2,A3,A4,B1,B2,B4', 'items sorted by letter, then number, via history' ); + + iso.destroy(); + })(); + + // sorting with array + ( function() { + var iso = new Isotope( '#sorting1', { + layoutMode: 'fitRows', + transitionDuration: 0, + getSortData: { + letter: 'b', + number: 'i' + }, + sortBy: [ 'letter', 'number' ] + }); + + equal( getItemsText( iso ), 'A1,A2,A3,A4,B1,B2,B4', 'sortBy array' ); + + iso.layout({ + sortAscending: false + }); + equal( getItemsText( iso ), 'B4,B2,B1,A4,A3,A2,A1', 'sortAscending false' ); + + iso.layout({ + sortAscending: { + letter: true, + number: false + } + }); + equal( getItemsText( iso ), 'A4,A3,A2,A1,B4,B2,B1', 'sortAscending with object' ); + + iso.destroy(); + })(); + +}); + +})(); diff --git a/test/sorting1.js b/test/sorting1.js deleted file mode 100644 index 7a0bec3..0000000 --- a/test/sorting1.js +++ /dev/null @@ -1,44 +0,0 @@ -( function() { - -'use strict'; - -var docElem = document.documentElement; - -var getText = docElem.textContent ? - function( elem ) { - return elem.textContent; - } : - function( elem ) { - return elem.innerText; - }; - -function getItemsText( iso ) { - var texts = []; - for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { - var item = iso.filteredItems[i]; - texts.push( getText( item.element ) ); - } - return texts.join(','); -} - -test( 'sort uses history', function() { - var iso = new Isotope( '#sorting1', { - layoutMode: 'fitRows', - transitionDuration: 0, - getSortData: { - letter: 'b', - number: 'i' - }, - sortBy: 'number' - }); - - iso.layout({ sortBy: 'letter' }); - - var texts = getItemsText( iso ); - - equal( texts, 'A1,A2,A3,A4,B1,B2,B4', 'items sorted by letter, then number, via history' ); - - iso.destroy(); -}); - -})(); From 9fcf87714e308fb83cf858652e32abc436c20b5c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 21:49:39 -0400 Subject: [PATCH 034/122] add LayoutMode.getColumnWidth and getRowHeight --- layout-mode.js | 41 +++++++++++++++++++++++++++++++-- layout-modes/cells-by-column.js | 35 +++++++--------------------- layout-modes/cells-by-row.js | 29 +++++------------------ 3 files changed, 53 insertions(+), 52 deletions(-) diff --git a/layout-mode.js b/layout-mode.js index 2895fa8..78ed53f 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -4,7 +4,7 @@ // -------------------------- -------------------------- // -function layoutModeDefinition( Outlayer ) { +function layoutModeDefinition( getSize, Outlayer ) { var layoutMode = {}; @@ -35,7 +35,7 @@ layoutMode.create = function( namespace, options ) { // register in Isotope layoutMode.modes[ namespace ] = LayoutMode; - // -------------------------- methods -------------------------- // + // ----- methods ----- // // default method handler // trigger Outlayer method with Isotope as this @@ -63,6 +63,41 @@ layoutMode.create = function( namespace, options ) { this._outlayerMethod( 'resize', arguments ); }; + // ----- measurements ----- // + + LayoutMode.prototype.getColumnWidth = function() { + this._getMeasurement( 'columnWidth', 'outerWidth' ); + if ( this.columnWidth ) { + // got column width, we can chill + return; + } + // columnWidth fall back to item of first element + var firstItemSize = this.getFirstItemSize(); + this.columnWidth = firstItemSize && firstItemSize.outerWidth || + // or size of container + this.isotope.size.innerWidth; + }; + + LayoutMode.prototype.getRowHeight = function() { + this._getMeasurement( 'rowHeight', 'outerHeight' ); + if ( this.rowHeight ) { + // got column width, we can chill + return; + } + // columnWidth fall back to item of first element + var firstItemSize = this.getFirstItemSize(); + this.rowHeight = firstItemSize && firstItemSize.outerHeight || + // or size of container + this.isotope.size.innerHeight; + }; + + LayoutMode.prototype.getFirstItemSize = function() { + var firstItem = this.isotope.filteredItems[0]; + return firstItem && firstItem.element && getSize( firstItem.element ); + }; + + // ----- ----- // + return LayoutMode; }; @@ -74,6 +109,7 @@ return layoutMode; if ( typeof define === 'function' && define.amd ) { // AMD define( [ + 'get-size/get-size', 'outlayer/outlayer' ], layoutModeDefinition ); @@ -81,6 +117,7 @@ if ( typeof define === 'function' && define.amd ) { // browser global window.Isotope = window.Isotope || {}; window.Isotope.layoutMode = layoutModeDefinition( + window.getSize, window.Outlayer ); } diff --git a/layout-modes/cells-by-column.js b/layout-modes/cells-by-column.js index 5e8f279..a70337e 100644 --- a/layout-modes/cells-by-column.js +++ b/layout-modes/cells-by-column.js @@ -2,35 +2,18 @@ 'use strict'; -function cellsByColumnDefinition( layoutMode, getSize ) { +function cellsByColumnDefinition( layoutMode ) { var CellsByColumn = layoutMode.create( 'cellsByColumn' ); CellsByColumn.prototype._resetLayout = function() { - var containerSize = this.isotope.size; + // reset properties this.itemIndex = 0; - - this._getMeasurement( 'columnWidth', 'outerWidth' ); - this._getMeasurement( 'rowHeight', 'outerHeight' ); - - var firstItem = this.items[0]; - var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element ); - - if ( !this.columnWidth ) { - // columnWidth fall back to item of first element - this.columnWidth = firstItemSize ? firstItemSize.outerWidth : - // or size of container - containerSize.innerWidth; - } - - if ( !this.rowHeight ) { - // rowHeight fall back to item of first element - this.rowHeight = firstItemSize ? firstItemSize.outerHeight : - // or size of container - containerSize.innerHeight; - } + // measurements + this.getColumnWidth(); + this.getRowHeight(); // set rows - this.rows = Math.floor( containerSize.innerHeight / this.rowHeight ); + this.rows = Math.floor( this.isotope.size.innerHeight / this.rowHeight ); this.rows = Math.max( this.rows, 1 ); }; @@ -62,15 +45,13 @@ function cellsByColumnDefinition( layoutMode, getSize ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../layout-mode', - 'get-size/get-size' + '../layout-mode' ], cellsByColumnDefinition ); } else { // browser global cellsByColumnDefinition( - window.Isotope.layoutMode, - window.getSize + window.Isotope.layoutMode ); } diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js index 65652fb..889b68f 100644 --- a/layout-modes/cells-by-row.js +++ b/layout-modes/cells-by-row.js @@ -2,35 +2,18 @@ 'use strict'; -function cellsByRowDefinition( layoutMode, getSize ) { +function cellsByRowDefinition( layoutMode ) { var CellsByRow = layoutMode.create( 'cellsByRow' ); CellsByRow.prototype._resetLayout = function() { - var containerSize = this.isotope.size; + // reset properties this.itemIndex = 0; - - this._getMeasurement( 'columnWidth', 'outerWidth' ); - this._getMeasurement( 'rowHeight', 'outerHeight' ); - - var firstItem = this.items[0]; - var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element ); - - if ( !this.columnWidth ) { - // columnWidth fall back to item of first element - this.columnWidth = firstItemSize ? firstItemSize.outerWidth : - // or size of container - containerSize.innerWidth; - } - - if ( !this.rowHeight ) { - // rowHeight fall back to item of first element - this.rowHeight = firstItemSize ? firstItemSize.outerHeight : - // or size of container - containerSize.innerHeight; - } + // measurements + this.getColumnWidth(); + this.getRowHeight(); // set cols - this.cols = Math.floor( containerSize.innerWidth / this.columnWidth ); + this.cols = Math.floor( this.isotope.size.innerWidth / this.columnWidth ); this.cols = Math.max( this.cols, 1 ); }; From 8ed2ec8e8a1efbfb10efa84ad996444382e122db Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 22:11:54 -0400 Subject: [PATCH 035/122] this.items = this.filteredItems --- layout-mode.js | 2 +- notes.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layout-mode.js b/layout-mode.js index 78ed53f..4f8977e 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -19,7 +19,7 @@ layoutMode.create = function( namespace, options ) { this.options = isotope.options[ this.namespace ]; this._getMeasurement = isotope._getMeasurement; this.element = isotope.element; - this.items = isotope.items; + this.items = isotope.filteredItems; this.size = isotope.size; // this.getSize = isotope.getSize; // this._getElementOffset = isotope._getElementOffset; diff --git a/notes.md b/notes.md index e7d45a2..e56fd08 100644 --- a/notes.md +++ b/notes.md @@ -1,6 +1,6 @@ ## to do -add horizontal layout modes +masonryHorizontal isOriginTop / isOriginLeft integration From 4cd2317c2cceb030516a1cfd13cb760b300e0f22 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 22:38:25 -0400 Subject: [PATCH 036/122] no worries about resizeTimeout --- isotope.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/isotope.js b/isotope.js index c006ab8..227db1b 100644 --- a/isotope.js +++ b/isotope.js @@ -259,8 +259,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode } this.layout(); - - delete this.resizeTimeout; }; return Isotope; From 81a838e6d2e462d7f0817796c0ed99c56f7c2eb7 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 22:40:38 -0400 Subject: [PATCH 037/122] move resizeVertical to LayoutMode --- isotope.js | 14 -------------- layout-mode.js | 14 ++++++++++++++ layout-modes/cells-by-column.js | 2 +- layout-modes/fit-columns.js | 2 +- layout-modes/horizontal.js | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/isotope.js b/isotope.js index 227db1b..b0e6d51 100644 --- a/isotope.js +++ b/isotope.js @@ -247,20 +247,6 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode this._mode().resize(); }; - // for vertical layout modes - Isotope.prototype.resizeVertical = function() { - // don't trigger if size did not change - var size = getSize( this.element ); - // check that this.size and size are there - // IE8 triggers resize on body size change, so they might not be - var hasSizes = this.size && size; - if ( hasSizes && size.innerHeight === this.size.innerHeight ) { - return; - } - - this.layout(); - }; - return Isotope; } diff --git a/layout-mode.js b/layout-mode.js index 4f8977e..6d2ff7c 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -63,6 +63,20 @@ layoutMode.create = function( namespace, options ) { this._outlayerMethod( 'resize', arguments ); }; + // for horizontal layout modes, check vertical size + LayoutMode.prototype.resizeVertical = function() { + // don't trigger if size did not change + var size = getSize( this.isotope.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.isotope.size && size; + if ( hasSizes && size.innerHeight === this.isotope.size.innerHeight ) { + return; + } + + this.isotope.layout(); + }; + // ----- measurements ----- // LayoutMode.prototype.getColumnWidth = function() { diff --git a/layout-modes/cells-by-column.js b/layout-modes/cells-by-column.js index a70337e..d5f5fe8 100644 --- a/layout-modes/cells-by-column.js +++ b/layout-modes/cells-by-column.js @@ -35,7 +35,7 @@ function cellsByColumnDefinition( layoutMode ) { }; CellsByColumn.prototype.resize = function() { - this.isotope.resizeVertical(); + this.resizeVertical(); }; return CellsByColumn; diff --git a/layout-modes/fit-columns.js b/layout-modes/fit-columns.js index a7d3c74..455ff8a 100644 --- a/layout-modes/fit-columns.js +++ b/layout-modes/fit-columns.js @@ -37,7 +37,7 @@ function fitColumnsDefinition( layoutMode ) { }; FitColumns.prototype.resize = function() { - this.isotope.resizeVertical(); + this.resizeVertical(); }; return FitColumns; diff --git a/layout-modes/horizontal.js b/layout-modes/horizontal.js index 21aefb0..d3cd230 100644 --- a/layout-modes/horizontal.js +++ b/layout-modes/horizontal.js @@ -27,7 +27,7 @@ function horizontalDefinition( layoutMode ) { }; Horizontal.prototype.resize = function() { - this.isotope.resizeVertical(); + this.resizeVertical(); }; return Horizontal; From 820b48f9f2827ceb3bfbf46628f3a57641710404 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 22:40:55 -0400 Subject: [PATCH 038/122] some comments; remove console.log --- isotope.js | 9 +++------ layout-modes/horizontal.js | 1 - 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/isotope.js b/isotope.js index b0e6d51..47f3f7b 100644 --- a/isotope.js +++ b/isotope.js @@ -81,20 +81,17 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; Isotope.prototype.layout = function( opts ) { + // set any options pass this.option( opts ); - // don't animate first layout var isInstant = this._isInitInstant = this.options.isLayoutInstant !== undefined ? this.options.isLayoutInstant : !this._isLayoutInited; - + // this.filteredItems = this._filter( this.items ); this._sort(); - // Outlayer.prototype.layout.call( this ); + // layout flow this._resetLayout(); this._manageStamps(); - - // var isInstant = this.options.isLayoutInstant !== undefined ? - // this.options.isLayoutInstant : !this._isLayoutInited; this.layoutItems( this.filteredItems, isInstant ); // flag for initalized diff --git a/layout-modes/horizontal.js b/layout-modes/horizontal.js index d3cd230..9b9f1f1 100644 --- a/layout-modes/horizontal.js +++ b/layout-modes/horizontal.js @@ -18,7 +18,6 @@ function horizontalDefinition( layoutMode ) { this.options.verticalAlignment; var x = this.x; this.x += item.size.outerWidth; - console.log( x, y ); return { x: x, y: y }; }; From fb81a14bd1b0b751c1d0aa730dcad923d8d2ea8a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 29 Aug 2013 22:29:43 -0400 Subject: [PATCH 039/122] masonry horizontal --- examples/masonry-horizontal.html | 224 +++++++++++++++++++++++++++++ layout-modes/masonry-horizontal.js | 145 +++++++++++++++++++ notes.md | 8 ++ 3 files changed, 377 insertions(+) create mode 100644 examples/masonry-horizontal.html create mode 100644 layout-modes/masonry-horizontal.js diff --git a/examples/masonry-horizontal.html b/examples/masonry-horizontal.html new file mode 100644 index 0000000..5386989 --- /dev/null +++ b/examples/masonry-horizontal.html @@ -0,0 +1,224 @@ + + + + + + horizontal layout modes + + + + + + +

horizontal layout modes

+ +
+

Filter

+
+ + + +
+

Sort

+
+ + + + + + +
+
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/layout-modes/masonry-horizontal.js b/layout-modes/masonry-horizontal.js new file mode 100644 index 0000000..383e717 --- /dev/null +++ b/layout-modes/masonry-horizontal.js @@ -0,0 +1,145 @@ +( function( window ) { + +'use strict'; + +// -------------------------- helpers -------------------------- // + +var indexOf = Array.prototype.indexOf ? + function( items, value ) { + return items.indexOf( value ); + } : + function ( items, value ) { + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( item === value ) { + return i; + } + } + return -1; + }; + +// -------------------------- definition -------------------------- // + +function masonryHorizontalDefinition( getSize, layoutMode ) { + // create an Outlayer layout class + var MasonryHorizontal = layoutMode.create('masonryHorizontal'); + + MasonryHorizontal.prototype._resetLayout = function() { + this.getRowHeight(); + this._getMeasurement( 'gutter', 'outerHeight' ); + + this.rowHeight += this.gutter; + // measure rows + this.rows = Math.floor( ( this.isotope.size.innerHeight + this.gutter ) / this.rowHeight ); + this.rows = Math.max( this.rows, 1 ); + + // reset row Xs + var i = this.rows; + this.rowXs = []; + while (i--) { + this.rowXs.push( 0 ); + } + + this.maxX = 0; + }; + + MasonryHorizontal.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + // how many rows does this brick span + var rowSpan = Math.ceil( item.size.outerHeight / this.rowHeight ); + rowSpan = Math.min( rowSpan, this.rows ); + + var rowGroup = this._getRowGroup( rowSpan ); + // get the minimum Y value from the rows + var minimumX = Math.min.apply( Math, rowGroup ); + var shortRowIndex = indexOf( rowGroup, minimumX ); + + // position the brick + var position = { + x: minimumX, + y: this.rowHeight * shortRowIndex + }; + + // apply setHeight to necessary rows + var setWidth = minimumX + item.size.outerWidth; + var setSpan = this.rows + 1 - rowGroup.length; + for ( var i = 0; i < setSpan; i++ ) { + this.rowXs[ shortRowIndex + i ] = setWidth; + } + + return position; + }; + + /** + * @param {Number} rowSpan - number of rows the element spans + * @returns {Array} rowGroup + */ + MasonryHorizontal.prototype._getRowGroup = function( rowSpan ) { + if ( rowSpan < 2 ) { + // if brick spans only one row, use all the row Xs + return this.rowXs; + } + + var rowGroup = []; + // how many different places could this brick fit horizontally + var groupCount = this.rows + 1 - rowSpan; + // for each group potential horizontal position + for ( var i = 0; i < groupCount; i++ ) { + // make an array of rowX values for that one group + var groupRowXs = this.rowXs.slice( i, i + rowSpan ); + // and get the max value of the array + rowGroup[i] = Math.max.apply( Math, groupRowXs ); + } + return rowGroup; + }; + + MasonryHorizontal.prototype._manageStamp = function( stamp ) { + var stampSize = getSize( stamp ); + var offset = this._getElementOffset( stamp ); + // get the rows that this stamp affects + var firstY = this.options.isOriginTop ? offset.top : offset.bottom; + var lastY = firstY + stampSize.outerHeight; + var firstRow = Math.floor( firstY / this.rowHeight ); + firstRow = Math.max( 0, firstRow ); + var lastRow = Math.floor( lastY / this.rowHeight ); + lastRow = Math.min( this.rows - 1, lastRow ); + // set rowXs to bottom of the stamp + var stampMaxX = ( this.options.isOriginLeft ? offset.left : offset.right ) + + stampSize.outerWidth; + for ( var i = firstRow; i <= lastRow; i++ ) { + this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] ); + } + }; + + MasonryHorizontal.prototype._getContainerSize = function() { + this.maxX = Math.max.apply( Math, this.rowXs ); + + return { + width: this.maxX + }; + }; + + MasonryHorizontal.prototype.resize = function() { + this.resizeVertical(); + }; + + return MasonryHorizontal; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + 'get-size/get-size', + '../layout-mode' + ], + masonryHorizontalDefinition ); +} else { + // browser global + masonryHorizontalDefinition( + window.getSize, + window.Isotope.layoutMode + ); +} + +})( window ); diff --git a/notes.md b/notes.md index e56fd08..a7ff137 100644 --- a/notes.md +++ b/notes.md @@ -14,3 +14,11 @@ filter ## bugs +transitionDuration = '2s' +hide most +reveal, +then while transitioning, sort + +items jump into place :( +- could be problem with EventEmitter + From 4917107b7d6b57c991f2f6e2a35142966682f496 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 29 Aug 2013 22:39:02 -0400 Subject: [PATCH 040/122] add masonry horizontal stamps --- examples/masonry-horizontal.html | 26 +++++++++++++++++++++++++- layout-modes/masonry-horizontal.js | 8 ++++---- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/examples/masonry-horizontal.html b/examples/masonry-horizontal.html index 5386989..d20fb75 100644 --- a/examples/masonry-horizontal.html +++ b/examples/masonry-horizontal.html @@ -20,6 +20,27 @@ .element.lanthanoid { height: 190px; } .element.actinoid { width: 170px; } .element.transition { width: 220px; } + + .stamp { + background: #DDD; + border: 2px dotted; + position: absolute; + } + + .stamp1 { + height: 30%; + width: 80px; + left: 30px; + top: 10%; + } + + .stamp2 { + height: 200px; + width: 40px; + left: 15px; + top: 100px; + } + @@ -45,6 +66,9 @@
+
+
+

80

@@ -175,7 +199,7 @@ docReady( function() { var container = document.querySelector('#container'); var iso = window.iso = new Isotope( container, { itemSelector: '.element', - // stamp: '.stamp', + stamp: '.stamp', layoutMode: 'masonryHorizontal', transitionDuration: '0.8s', masonryHorizontal: { diff --git a/layout-modes/masonry-horizontal.js b/layout-modes/masonry-horizontal.js index 383e717..13a6e68 100644 --- a/layout-modes/masonry-horizontal.js +++ b/layout-modes/masonry-horizontal.js @@ -95,16 +95,16 @@ function masonryHorizontalDefinition( getSize, layoutMode ) { MasonryHorizontal.prototype._manageStamp = function( stamp ) { var stampSize = getSize( stamp ); - var offset = this._getElementOffset( stamp ); + var offset = this.isotope._getElementOffset( stamp ); // get the rows that this stamp affects - var firstY = this.options.isOriginTop ? offset.top : offset.bottom; + var firstY = this.isotope.options.isOriginTop ? offset.top : offset.bottom; var lastY = firstY + stampSize.outerHeight; var firstRow = Math.floor( firstY / this.rowHeight ); firstRow = Math.max( 0, firstRow ); var lastRow = Math.floor( lastY / this.rowHeight ); lastRow = Math.min( this.rows - 1, lastRow ); - // set rowXs to bottom of the stamp - var stampMaxX = ( this.options.isOriginLeft ? offset.left : offset.right ) + + // set rowXs to outside edge of the stamp + var stampMaxX = ( this.isotope.options.isOriginLeft ? offset.left : offset.right ) + stampSize.outerWidth; for ( var i = firstRow; i <= lastRow; i++ ) { this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] ); From c24da0b5e0d14d3c55c1ced41e63d3b50aca9f3b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 2 Sep 2013 22:24:41 -0400 Subject: [PATCH 041/122] transition bug demo; notes --- examples/transition-bug.html | 86 ++++++++++++++++++++++++++++++++++++ notes.md | 6 --- 2 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 examples/transition-bug.html diff --git a/examples/transition-bug.html b/examples/transition-bug.html new file mode 100644 index 0000000..96bb19b --- /dev/null +++ b/examples/transition-bug.html @@ -0,0 +1,86 @@ + + + + + + filter sort + + + + + + +

filter sort

+ +
+ +
+ +
+ + + +
+

51

+

Sb

+

Antimony

+

121.76

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/notes.md b/notes.md index a7ff137..c69b4c3 100644 --- a/notes.md +++ b/notes.md @@ -1,11 +1,5 @@ ## to do -masonryHorizontal - -isOriginTop / isOriginLeft integration - -manageStamp - ## tests getSortData shorthand From 0d9a29ac36fa53be6a6a7492bfa12dda3ec10dd9 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 3 Sep 2013 23:26:52 -0400 Subject: [PATCH 042/122] add number > 50 filter to example --- examples/filter-sort.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/examples/filter-sort.html b/examples/filter-sort.html index 5655108..004a6e4 100644 --- a/examples/filter-sort.html +++ b/examples/filter-sort.html @@ -20,6 +20,7 @@ +

Sort

@@ -189,6 +190,12 @@ docReady( function() { // var opt = {}; var key = event.target.parentNode.getAttribute('data-isotope-key'); var value = event.target.getAttribute('data-isotope-value'); + + if ( key === 'filter' && value === 'number-greater-than-50' ) { + value = function( elem ) { + return parseInt( elem.querySelector('.number').textContent, 10 ) > 40; + }; + } console.log( key, value ); iso.options[ key ] = value; iso.layout(); From d904c7d2c7d693a8ac56cc6833c09d3d78205bc7 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 4 Sep 2013 08:48:34 -0400 Subject: [PATCH 043/122] getSorter; getText for IE8 --- examples/filter-sort.html | 3 ++- isotope.js | 25 +++++++++++++++---------- notes.md | 11 ++--------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/examples/filter-sort.html b/examples/filter-sort.html index 004a6e4..42d811a 100644 --- a/examples/filter-sort.html +++ b/examples/filter-sort.html @@ -193,7 +193,8 @@ docReady( function() { if ( key === 'filter' && value === 'number-greater-than-50' ) { value = function( elem ) { - return parseInt( elem.querySelector('.number').textContent, 10 ) > 40; + var numberText = getText( elem.querySelector('.number') ); + return parseInt( numberText, 10 ) > 40; }; } console.log( key, value ); diff --git a/isotope.js b/isotope.js index 47f3f7b..c450b4a 100644 --- a/isotope.js +++ b/isotope.js @@ -181,9 +181,20 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode } // concat all sortBy and sortHistory var sortBys = [].concat.apply( sortByOpt, this.sortHistory ); - var sortAsc = this.options.sortAscending; // sort magic - this.filteredItems.sort( function sorter( itemA, itemB ) { + var sorter = getSorter( sortBys, this.options.sortAscending ); + this.filteredItems.sort( sorter ); + // keep track of sortBy History + var lastSortBy = this.sortHistory[ this.sortHistory.length - 1 ]; + if ( sortByOpt !== lastSortBy ) { + // add to front, oldest goes in last + this.sortHistory.unshift( sortByOpt ); + } + }; + + // returns a function used for sorting + function getSorter( sortBys, sortAsc ) { + return function sorter( itemA, itemB ) { // cycle through all sortKeys for ( var i = 0, len = sortBys.length; i < len; i++ ) { var sortBy = sortBys[i]; @@ -197,14 +208,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode } } return 0; - }); - // keep track of sortBy History - var lastSortBy = this.sortHistory[ this.sortHistory.length - 1 ]; - if ( sortByOpt !== lastSortBy ) { - // add to front, oldest goes in last - this.sortHistory.unshift( sortByOpt ); - } - }; + }; + } // -------------------------- methods -------------------------- // diff --git a/notes.md b/notes.md index c69b4c3..22638bf 100644 --- a/notes.md +++ b/notes.md @@ -6,13 +6,6 @@ getSortData shorthand filter -## bugs - -transitionDuration = '2s' -hide most -reveal, -then while transitioning, sort - -items jump into place :( -- could be problem with EventEmitter +updateSortData +## bugs From d374440e2aa252c89774521262b717a2b1aff1c8 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 5 Sep 2013 20:41:17 -0400 Subject: [PATCH 044/122] _itemize --- isotope.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/isotope.js b/isotope.js index c450b4a..bfb13a4 100644 --- a/isotope.js +++ b/isotope.js @@ -57,8 +57,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode Outlayer.prototype.reloadItems.call( this ); }; - Isotope.prototype._getItems = function() { - var items = Outlayer.prototype._getItems.apply( this, arguments ); + Isotope.prototype._itemize = function() { + var items = Outlayer.prototype._itemize.apply( this, arguments ); // assign ID for original-order for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; From 6c5d3416703831f5a610ba353e07dd38bfd7c641 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 5 Sep 2013 21:16:49 -0400 Subject: [PATCH 045/122] remove some lines --- isotope.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/isotope.js b/isotope.js index bfb13a4..76b72ff 100644 --- a/isotope.js +++ b/isotope.js @@ -8,9 +8,6 @@ 'use strict'; -// vars -// var document = window.document; - // -------------------------- helpers -------------------------- // // extend objects @@ -21,7 +18,6 @@ function extend( a, b ) { return a; } - // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires @@ -118,7 +114,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode } // add item to either matched or unmatched group var isMatched = test( item ); - item.isFilterMatched = isMatched; + // item.isFilterMatched = isMatched; // add to matches if its a match if ( isMatched ) { matches.push( item ); From d5a663a3c01b4044899af27a6bb3093e35626648 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 5 Sep 2013 21:27:46 -0400 Subject: [PATCH 046/122] remove old tests --- test/basic-layout.js | 133 ------------------------------------------- test/gutter.js | 16 ------ test/helpers.js | 14 ----- test/stamp.js | 58 ------------------- 4 files changed, 221 deletions(-) delete mode 100644 test/basic-layout.js delete mode 100644 test/gutter.js delete mode 100644 test/helpers.js delete mode 100644 test/stamp.js diff --git a/test/basic-layout.js b/test/basic-layout.js deleted file mode 100644 index da2b1c4..0000000 --- a/test/basic-layout.js +++ /dev/null @@ -1,133 +0,0 @@ -( function() { - -'use strict'; - -test( 'basic layout top left', function() { - var container = document.querySelector('#basic-layout-top-left'); - var msnry = new Masonry( container, { - columnWidth: 60 - }); - - checkItemPositions( msnry, { - 0: { - left: 0, - top: 0 - }, - 1: { - left: 60, - top: 0 - }, - 2: { - left: 120, - top: 0 - }, - 3: { - left: 0, - top: 30 - }, - 4: { - left: 60, - top: 90 - } - }); - -}); - -test( 'basic layout top right', function() { - var container = document.querySelector('#basic-layout-top-right'); - var msnry = new Masonry( container, { - isOriginLeft: false, - columnWidth: 60 - }); - - checkItemPositions( msnry, { - 0: { - right: 0, - top: 0 - }, - 1: { - right: 60, - top: 0 - }, - 2: { - right: 120, - top: 0 - }, - 3: { - right: 0, - top: 30 - }, - 4: { - right: 60, - top: 90 - } - }); - -}); - -test( 'basic layout bottom left', function() { - var container = document.querySelector('#basic-layout-bottom-left'); - var msnry = new Masonry( container, { - isOriginTop: false, - columnWidth: 60 - }); - - checkItemPositions( msnry, { - 0: { - left: 0, - bottom: 0 - }, - 1: { - left: 60, - bottom: 0 - }, - 2: { - left: 120, - bottom: 0 - }, - 3: { - left: 0, - bottom: 30 - }, - 4: { - left: 60, - bottom: 90 - } - }); - -}); - -test( 'basic layout bottom right', function() { - var container = document.querySelector('#basic-layout-bottom-right'); - var msnry = new Masonry( container, { - isOriginLeft: false, - isOriginTop: false, - columnWidth: 60 - }); - - checkItemPositions( msnry, { - 0: { - right: 0, - bottom: 0 - }, - 1: { - right: 60, - bottom: 0 - }, - 2: { - right: 120, - bottom: 0 - }, - 3: { - right: 0, - bottom: 30 - }, - 4: { - right: 60, - bottom: 90 - } - }); - -}); - -})(); diff --git a/test/gutter.js b/test/gutter.js deleted file mode 100644 index c8ddb84..0000000 --- a/test/gutter.js +++ /dev/null @@ -1,16 +0,0 @@ -test( 'gutter', function() { - - var container = document.querySelector('#gutter'); - var msnry = new Masonry( container, { - columnWidth: 60, - gutter: 20 - }); - - checkItemPositions( msnry, { - 0: { left: 0, top: 0 }, - 1: { left: 80, top: 0 }, - 2: { left: 160, top: 0 }, - 3: { left: 0, top: 30 } - }); - -}); diff --git a/test/helpers.js b/test/helpers.js deleted file mode 100644 index 80cf3cf..0000000 --- a/test/helpers.js +++ /dev/null @@ -1,14 +0,0 @@ -window.checkItemPositions = function( msnry, positions ) { - var i = 0; - var position = positions[i]; - while ( position ) { - var style = msnry.items[i].element.style; - for ( var prop in position ) { - var value = position[ prop ] + 'px'; - var message = 'item ' + i + ' ' + prop + ' = ' + value; - equal( style[ prop ], value, message ); - } - i++; - position = positions[i]; - } -}; diff --git a/test/stamp.js b/test/stamp.js deleted file mode 100644 index 22531c2..0000000 --- a/test/stamp.js +++ /dev/null @@ -1,58 +0,0 @@ -( function() { - -'use strict'; - -test( 'stamp top left', function() { - - var container = document.querySelector('#stamp-top-left'); - var msnry = new Masonry( container, { - itemSelector: '.item', - stamp: '.stamp' - }); - - checkItemPositions( msnry, { - 0: { left: 0, top: 20 }, - 1: { left: 135, top: 20 }, - 2: { left: 45, top: 40 }, - 3: { left: 90, top: 40 } - }); - -}); - -test( 'stamp top left', function() { - - var container = document.querySelector('#stamp-top-left'); - var msnry = new Masonry( container, { - itemSelector: '.item', - stamp: '.stamp' - }); - - checkItemPositions( msnry, { - 0: { left: 0, top: 20 }, - 1: { left: 135, top: 20 }, - 2: { left: 45, top: 40 }, - 3: { left: 90, top: 40 } - }); - -}); - -test( 'stamp bottom right', function() { - - var container = document.querySelector('#stamp-bottom-right'); - var msnry = new Masonry( container, { - itemSelector: '.item', - stamp: '.stamp', - isOriginLeft: false, - isOriginTop: false - }); - - checkItemPositions( msnry, { - 0: { right: 0, bottom: 20 }, - 1: { right: 135, bottom: 20 }, - 2: { right: 45, bottom: 40 }, - 3: { right: 90, bottom: 40 } - }); - -}); - -})(); \ No newline at end of file From d074425e44ac51cb395084fe65c055de8e41c4d1 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 5 Sep 2013 21:52:53 -0400 Subject: [PATCH 047/122] get sort data test title --- notes.md | 2 -- test/.jshintrc | 3 +-- test/get-sort-data.js | 22 ++++++++++++++++++++++ test/index.html | 12 +++++++++++- test/tests.css | 38 +++++++------------------------------- 5 files changed, 41 insertions(+), 36 deletions(-) create mode 100644 test/get-sort-data.js diff --git a/notes.md b/notes.md index 22638bf..ccbbafc 100644 --- a/notes.md +++ b/notes.md @@ -2,8 +2,6 @@ ## tests -getSortData shorthand - filter updateSortData diff --git a/test/.jshintrc b/test/.jshintrc index d1003e9..8d44cc0 100644 --- a/test/.jshintrc +++ b/test/.jshintrc @@ -5,8 +5,7 @@ "undef": true, "unused": true, "predef": { - "Masonry": false, - "checkItemPositions": false, + "Isotope": false, "asyncTest": false, "deepEqual": false, diff --git a/test/get-sort-data.js b/test/get-sort-data.js new file mode 100644 index 0000000..891f864 --- /dev/null +++ b/test/get-sort-data.js @@ -0,0 +1,22 @@ +test( 'getSortData', function() { + + 'use strict'; + + var iso = new Isotope( '#get-sort-data', { + layoutMode: 'fitRows', + getSortData: { + ninjaTurtle: '[data-ninja-turtle]', + fruit: 'span.fruit', + b: 'b parseFloat', + i: 'i parseInt' + } + }); + + var item = iso.items[0]; + + equal( item.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' ); + equal( item.sortData.fruit, 'watermelon', 'query selector shorthand' ); + equal( item.sortData.b, 3.14, 'parseFloat parser' ); + equal( item.sortData.i, 42, 'parseInt parser' ); + +}); diff --git a/test/index.html b/test/index.html index f736ad9..ccdc4a1 100644 --- a/test/index.html +++ b/test/index.html @@ -3,7 +3,7 @@ - Masonry tests + Isotope tests @@ -28,6 +28,7 @@ + @@ -48,6 +49,15 @@
A2
+

getSortData

+ +
+
+ watermelon + 3.14 + 42 +
+
diff --git a/test/tests.css b/test/tests.css index d3f8e3d..18f3027 100644 --- a/test/tests.css +++ b/test/tests.css @@ -15,12 +15,18 @@ body { position: relative; } +.container:after { + content: ''; + display: block; + clear: both; +} + .item { width: 60px; height: 30px; float: left; border: 1px solid; - background: #09F; + background: #3BF; } .item.w2 { width: 120px; } @@ -38,15 +44,6 @@ body { border: 1px solid; } - -/* ---- gutter ---- */ - -#gutter { - width: 220px; -} - -#gutter .item.w2 { width: 140px; } - /* ---- stamp ---- */ .has-stamp .item { width: 45px; } @@ -62,24 +59,3 @@ body { width: 200px; height: 20px; } - -#stamp-top-left .stamp1 { - left: 70px; - top: 10px; -} - -#stamp-top-left .stamp2 { - left: -5px; - top: 0; -} - -#stamp-bottom-right .stamp1 { - right: 70px; - bottom: 10px; -} - -#stamp-bottom-right .stamp2 { - right: -5px; - bottom: 0; -} - From 49b31cebd3d15476d3e0e7701fed74a0872d9ba9 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 10:43:41 -0400 Subject: [PATCH 048/122] check for elem & child in getting sort data --- item.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/item.js b/item.js index b532446..f65dc89 100644 --- a/item.js +++ b/item.js @@ -1,5 +1,5 @@ /** - * Packery Item Element + * Isotope Item **/ ( function( window ) { @@ -84,11 +84,11 @@ function mungeSorter( sorter ) { var parser = getParser( args[1] ); // parse the value, if there was a parser sorter = parser ? function( elem ) { - return parser( getValue( elem ) ); + return elem && parser( getValue( elem ) ); } : // otherwise just return value function( elem ) { - return getValue( elem ); + return elem && getValue( elem ); }; return sorter; @@ -105,7 +105,8 @@ function getValueGetter( attr, query ) { } else { // otherwise, assume its a querySelector, and get its text getValue = function( elem ) { - return getText( elem.querySelector( query ) ); + var child = elem.querySelector( query ); + return child && getText( child ); }; } return getValue; From 797b14278c7202c30b9a08b28886ff5e55b552b5 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 10:44:09 -0400 Subject: [PATCH 049/122] add stamp to masonry example --- examples/examples.css | 22 ++++++++++++++++++++++ examples/masonry.html | 7 ++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/examples/examples.css b/examples/examples.css index 81105d6..dd5fe38 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -80,3 +80,25 @@ .element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } .element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } .element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } + +/* stamps */ + +.stamp { + position: absolute; + background: hsla(0, 100%, 50%, 0.8); + border: 1px solid; +} + +.stamp1 { + left: 10%; + top: 20px; + width: 20%; + height: 200px; +} + +.stamp2 { + right: 200px; + top: 100px; + width: 100px; + height: 100px; +} diff --git a/examples/masonry.html b/examples/masonry.html index 3b981ed..3c1c5f3 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -37,7 +37,10 @@
- + +
+
+

80

Hg

@@ -171,6 +174,8 @@ docReady( function() { masonry: { columnWidth: 90 }, + itemSelector: '.element', + stamp: '.stamp', getSortData: { number: '.number parseInt', From dc1534f9d0d5876a1c6a2e1b58512be31cb9b7c7 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 10:55:51 -0400 Subject: [PATCH 050/122] comment fix --- layout-mode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layout-mode.js b/layout-mode.js index 6d2ff7c..4987424 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -95,7 +95,7 @@ layoutMode.create = function( namespace, options ) { LayoutMode.prototype.getRowHeight = function() { this._getMeasurement( 'rowHeight', 'outerHeight' ); if ( this.rowHeight ) { - // got column width, we can chill + // got rowHeight, we can chill return; } // columnWidth fall back to item of first element From 365c4d580b5297490015ce07a04e470f222fc9cf Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 10:56:11 -0400 Subject: [PATCH 051/122] no need to delete resizeTimeout --- layout-modes/masonry.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index 7428937..298d3c3 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -65,8 +65,6 @@ function masonryDefinition( layoutMode, Masonry, getSize ) { } this.isotope.layout(); - - delete this.isotope.resizeTimeout; }; return MasonryMode; From a80fd4dd24713650ea53b631455824b31ba58da8 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 10:57:04 -0400 Subject: [PATCH 052/122] add default parser; notes --- item.js | 8 ++++++++ notes.md | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/item.js b/item.js index f65dc89..e64be63 100644 --- a/item.js +++ b/item.js @@ -48,6 +48,8 @@ Item.prototype._create = function() { this.sortData = {}; }; +// TODO - move this to Isotope, so it isn't munging sorter +// for every item Item.prototype.updateSortData = function() { // default sorters this.sortData.id = this.id; @@ -125,6 +127,12 @@ function getParser( arg ) { parser = function( val ) { return parseFloat( val ); }; + default : + // just return val if parser isn't one of these + // TODO - console log that that parser doesn't exist + parser = function( val ) { + return val; + } } return parser; } diff --git a/notes.md b/notes.md index ccbbafc..5c92099 100644 --- a/notes.md +++ b/notes.md @@ -6,4 +6,12 @@ filter updateSortData +layoutComplete test after + filter - hide some + filter - reveal some, some stay hidden, some are revealed, some do nothing + sort + filter, during transition filter again + +provide nice error if getText doesn't provide an element + ## bugs From 6175f773a2c81ca3144f7a8e6588379ce1ffddd1 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 11:22:38 -0400 Subject: [PATCH 053/122] move sorting logic out of item and into isotope.js --- examples/masonry.html | 8 +-- isotope.js | 122 ++++++++++++++++++++++++++++++++++++++++-- item.js | 102 +---------------------------------- notes.md | 2 + 4 files changed, 126 insertions(+), 108 deletions(-) diff --git a/examples/masonry.html b/examples/masonry.html index 3c1c5f3..b87b8bb 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -38,8 +38,8 @@
-
-
+

80

@@ -174,8 +174,8 @@ docReady( function() { masonry: { columnWidth: 90 }, - itemSelector: '.element', - stamp: '.stamp', + // itemSelector: '.element', + // stamp: '.stamp', getSortData: { number: '.number parseInt', diff --git a/isotope.js b/isotope.js index 76b72ff..63678b0 100644 --- a/isotope.js +++ b/isotope.js @@ -18,6 +18,24 @@ function extend( a, b ) { return a; } +var trim = String.prototype.trim ? + function( str ) { + return str.trim(); + } : + function( str ) { + return str.replace( /^\s+|\s+$/g, '' ); + }; + +var docElem = document.documentElement; + +var getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires @@ -41,6 +59,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode for ( var name in layoutMode.modes ) { this._initLayoutMode( name ); } + // functions that sort items + this._sorters = {}; // keep of track of sortBys this.sortHistory = [ 'original-order' ]; this.updateSortData(); @@ -158,17 +178,111 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode return test; } - // -------------------------- sort -------------------------- // + // -------------------------- sorting -------------------------- // Isotope.prototype.updateSortData = function( items ) { + // update sorters + var getSortData = this.options.getSortData; + for ( var key in getSortData ) { + var sorter = getSortData[ key ]; + this._sorters[ key ] = mungeSorter( sorter ); + } + // update item sort data // default to all items if none are passed in items = items || this.items; for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; + if ( item.isIgnored ) { + continue; + } item.updateSortData(); } }; + // ----- munge sorter ----- // + + // encapsulate this, as we just need mungeSorter + // other functions in here are just for munging + var mungeSorter = ( function() { + // add a magic layer to sorters for convienent shorthands + // `.foo-bar` will use the text of .foo-bar querySelector + // `[foo-bar]` will use attribute + // you can also add parser + // `.foo-bar parseInt` will parse that as a number + function mungeSorter( sorter ) { + // if not a string, return function or whatever it is + if ( typeof sorter !== 'string' ) { + return sorter; + } + // parse the sorter string + var args = trim( sorter ).split(' '); + var query = args[0]; + // check if query looks like [an-attribute] + var attrMatch = query.match( /^\[(.+)\]$/ ); + var attr = attrMatch && attrMatch[1]; + var getValue = getValueGetter( attr, query ); + // use second argument as a parser + var parser = getParser( args[1] ); + // parse the value, if there was a parser + sorter = parser ? function( elem ) { + return elem && parser( getValue( elem ) ); + } : + // otherwise just return value + function( elem ) { + return elem && getValue( elem ); + }; + + return sorter; + } + + // get an attribute getter, or get text of the querySelector + function getValueGetter( attr, query ) { + var getValue; + // if query looks like [foo-bar], get attribute + if ( attr ) { + getValue = function( elem ) { + return elem.getAttribute( attr ); + }; + } else { + // otherwise, assume its a querySelector, and get its text + getValue = function( elem ) { + var child = elem.querySelector( query ); + return child && getText( child ); + }; + } + return getValue; + } + + // return a parser function if arg matches + function getParser( arg ) { + var parser; + switch ( arg ) { + case 'parseInt' : + parser = function( val ) { + return parseInt( val, 10 ); + }; + break; + case 'parseFloat' : + parser = function( val ) { + return parseFloat( val ); + }; + break; + default : + // just return val if parser isn't one of these + // TODO - console log that that parser doesn't exist + parser = function( val ) { + return val; + }; + } + return parser; + } + + return mungeSorter; + })(); + + + // ----- sort method ----- // + // sort filteredItem order Isotope.prototype._sort = function() { var sortByOpt = this.options.sortBy; @@ -178,8 +292,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode // concat all sortBy and sortHistory var sortBys = [].concat.apply( sortByOpt, this.sortHistory ); // sort magic - var sorter = getSorter( sortBys, this.options.sortAscending ); - this.filteredItems.sort( sorter ); + var itemSorter = getItemSorter( sortBys, this.options.sortAscending ); + this.filteredItems.sort( itemSorter ); // keep track of sortBy History var lastSortBy = this.sortHistory[ this.sortHistory.length - 1 ]; if ( sortByOpt !== lastSortBy ) { @@ -189,7 +303,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; // returns a function used for sorting - function getSorter( sortBys, sortAsc ) { + function getItemSorter( sortBys, sortAsc ) { return function sorter( itemA, itemB ) { // cycle through all sortKeys for ( var i = 0, len = sortBys.length; i < len; i++ ) { diff --git a/item.js b/item.js index e64be63..3a04fde 100644 --- a/item.js +++ b/item.js @@ -6,30 +6,6 @@ 'use strict'; -// -------------------------- helpers -------------------------- // - -// trim - -var trim = String.prototype.trim ? - function( str ) { - return str.trim(); - } : - function( str ) { - return str.replace( /^\s+|\s+$/g, '' ); - }; - - -var docElem = document.documentElement; - -var getText = docElem.textContent ? - function( elem ) { - return elem.textContent; - } : - function( elem ) { - return elem.innerText; - }; - - // -------------------------- Item -------------------------- // function itemDefinition( Outlayer ) { @@ -48,8 +24,6 @@ Item.prototype._create = function() { this.sortData = {}; }; -// TODO - move this to Isotope, so it isn't munging sorter -// for every item Item.prototype.updateSortData = function() { // default sorters this.sortData.id = this.id; @@ -58,85 +32,13 @@ Item.prototype.updateSortData = function() { this.sortData.random = Math.random(); // go thru getSortData obj and apply the sorters var getSortData = this.layout.options.getSortData; + var sorters = this.layout._sorters; for ( var key in getSortData ) { - var sorter = getSortData[ key ]; - sorter = mungeSorter( sorter ); + var sorter = sorters[ key ]; this.sortData[ key ] = sorter( this.element, this ); } }; -// add a magic layer to sorters -// for convienent shorthands -// .foo-bar will use the text of .foo-bar querySelector -// [foo-bar] will use attribute -// you can also add parser -// `.foo-bar parseInt` will parse that as a number -function mungeSorter( sorter ) { - if ( typeof sorter !== 'string' ) { - return sorter; - } - // parse the sorter string - var args = trim( sorter ).split(' '); - var query = args[0]; - // check if query looks like [an-attribute] - var attrMatch = query.match( /^\[(.+)\]$/ ); - var attr = attrMatch && attrMatch[1]; - var getValue = getValueGetter( attr, query ); - // use second argument as a parser - var parser = getParser( args[1] ); - // parse the value, if there was a parser - sorter = parser ? function( elem ) { - return elem && parser( getValue( elem ) ); - } : - // otherwise just return value - function( elem ) { - return elem && getValue( elem ); - }; - - return sorter; -} - -// get an attribute getter, or get text of the querySelector -function getValueGetter( attr, query ) { - var getValue; - // if query looks like [foo-bar], get attribute - if ( attr ) { - getValue = function( elem ) { - return elem.getAttribute( attr ); - }; - } else { - // otherwise, assume its a querySelector, and get its text - getValue = function( elem ) { - var child = elem.querySelector( query ); - return child && getText( child ); - }; - } - return getValue; -} - -// return a parser function if arg matches -function getParser( arg ) { - var parser; - switch ( arg ) { - case 'parseInt' : - parser = function( val ) { - return parseInt( val, 10 ); - }; - break; - case 'parseFloat' : - parser = function( val ) { - return parseFloat( val ); - }; - default : - // just return val if parser isn't one of these - // TODO - console log that that parser doesn't exist - parser = function( val ) { - return val; - } - } - return parser; -} - return Item; } diff --git a/notes.md b/notes.md index 5c92099..8d18f15 100644 --- a/notes.md +++ b/notes.md @@ -14,4 +14,6 @@ layoutComplete test after provide nice error if getText doesn't provide an element +move munge sorter to separate file? + ## bugs From fdf69dd8b55e2c171b7003fe9cff755df0f06572 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 14:39:53 -0400 Subject: [PATCH 054/122] masonry stamp working; facade methods for LayoutMode layout, getSize & getElementOffset --- examples/masonry.html | 6 ++--- isotope.js | 6 ++++- layout-mode.js | 17 +++++++++++++ layout-modes/masonry.js | 55 +++++++++-------------------------------- 4 files changed, 36 insertions(+), 48 deletions(-) diff --git a/examples/masonry.html b/examples/masonry.html index b87b8bb..5d11fb9 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -38,8 +38,8 @@
- +
+

80

@@ -175,7 +175,7 @@ docReady( function() { columnWidth: 90 }, // itemSelector: '.element', - // stamp: '.stamp', + stamp: '.stamp', getSortData: { number: '.number parseInt', diff --git a/isotope.js b/isotope.js index 63678b0..ab1912f 100644 --- a/isotope.js +++ b/isotope.js @@ -348,7 +348,11 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; Isotope.prototype._manageStamp = function( stamp ) { - this._mode()._manageStamp( stamp ); + var mode = this._mode(); + // HACK copy over some options + mode.options.isOriginLeft = this.options.isOriginLeft; + mode.options.isOriginTop = this.options.isOriginTop; + mode._manageStamp( stamp ); }; Isotope.prototype._getContainerSize = function() { diff --git a/layout-mode.js b/layout-mode.js index 4987424..52ad7ec 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -59,10 +59,20 @@ layoutMode.create = function( namespace, options ) { return this._outlayerMethod( '_getContainerSize', arguments ); }; + LayoutMode.prototype._getElementOffset = function(/* elem */) { + return this._outlayerMethod( '_getElementOffset', arguments ); + }; + LayoutMode.prototype.resize = function() { this._outlayerMethod( 'resize', arguments ); }; + LayoutMode.prototype.layout = function() { + this._outlayerMethod( 'layout', arguments ); + }; + + // ----- ----- // + // for horizontal layout modes, check vertical size LayoutMode.prototype.resizeVertical = function() { // don't trigger if size did not change @@ -110,6 +120,13 @@ layoutMode.create = function( namespace, options ) { return firstItem && firstItem.element && getSize( firstItem.element ); }; + // ----- methods that should reference isotope ----- // + + LayoutMode.prototype.getSize = function() { + this.isotope.getSize(); + this.size = this.isotope.size; + }; + // ----- ----- // return LayoutMode; diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index 298d3c3..ef0d9d2 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -21,51 +21,20 @@ function extend( a, b ) { // -------------------------- masonryDefinition -------------------------- // // used for AMD definition and requires -function masonryDefinition( layoutMode, Masonry, getSize ) { +function masonryDefinition( layoutMode, Masonry ) { // create an Outlayer layout class var MasonryMode = layoutMode.create('masonry'); - // sub-class Masonry - extend( MasonryMode.prototype, Masonry.prototype ); - - MasonryMode.prototype.getSize = function() { - this.isotope.getSize(); - this.size = this.isotope.size; - }; - MasonryMode.prototype._manageStamp = function( stamp ) { - var stampSize = getSize( stamp ); - var offset = this.isotope._getElementOffset( stamp ); - // get the columns that this stamp affects - var firstX = this.isotope.options.isOriginLeft ? offset.left : offset.right; - var lastX = firstX + stampSize.outerWidth; - var firstCol = Math.floor( firstX / this.columnWidth ); - firstCol = Math.max( 0, firstCol ); - var lastCol = Math.floor( lastX / this.columnWidth ); - lastCol = Math.min( this.cols - 1, lastCol ); - // set colYs to bottom of the stamp - var stampMaxY = ( this.isotope.options.isOriginTop ? offset.top : offset.bottom ) + - stampSize.outerHeight; - for ( var i = firstCol; i <= lastCol; i++ ) { - this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); - } - }; + // save on to these methods + var _getElementOffset = MasonryMode.prototype._getElementOffset; + var layout = MasonryMode.prototype.layout; - // debounced, layout on resize - // HEADS UP this overwrites Outlayer.resize - // Any changes in Outlayer.resize need to be manually added here - MasonryMode.prototype.resize = function() { - // don't trigger if size did not change - var container = this._getSizingContainer(); - var size = getSize( container ); - // check that this.size and size are there - // IE8 triggers resize on body size change, so they might not be - var hasSizes = this.size && size; - if ( hasSizes && size.innerWidth === this._containerWidth ) { - return; - } + // sub-class Masonry + extend( MasonryMode.prototype, Masonry.prototype ); - this.isotope.layout(); - }; + // set back, as it was overwritten by Masonry + MasonryMode.prototype._getElementOffset = _getElementOffset; + MasonryMode.prototype.layout = layout; return MasonryMode; } @@ -76,16 +45,14 @@ if ( typeof define === 'function' && define.amd ) { // AMD define( [ '../layout-mode', - 'masonry/masonry', - 'get-size/get-size' + 'masonry/masonry' ], masonryDefinition ); } else { // browser global masonryDefinition( window.Isotope.layoutMode, - window.Masonry, - window.getSize + window.Masonry ); } From 2455b1b186661f0ab743099563e567d05c097686 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 14:49:50 -0400 Subject: [PATCH 055/122] iterate over facademethods in layoutMode --- layout-mode.js | 60 +++++++++++++++++++++----------------------------- 1 file changed, 25 insertions(+), 35 deletions(-) diff --git a/layout-mode.js b/layout-mode.js index 52ad7ec..3f76ed3 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -21,8 +21,6 @@ layoutMode.create = function( namespace, options ) { this.element = isotope.element; this.items = isotope.filteredItems; this.size = isotope.size; - // this.getSize = isotope.getSize; - // this._getElementOffset = isotope._getElementOffset; } } @@ -35,41 +33,33 @@ layoutMode.create = function( namespace, options ) { // register in Isotope layoutMode.modes[ namespace ] = LayoutMode; - // ----- methods ----- // - // default method handler - // trigger Outlayer method with Isotope as this - LayoutMode.prototype._outlayerMethod = function( methodName, args ) { - return Outlayer.prototype[ methodName ].apply( this.isotope, args ); - }; - - LayoutMode.prototype._resetLayout = function() { - this._outlayerMethod( '_resetLayout', arguments ); - }; - - LayoutMode.prototype._getItemLayoutPosition = function( /* item */) { - return this._outlayerMethod( '_getItemLayoutPosition', arguments ); - }; - - LayoutMode.prototype._manageStamp = function(/* stamp */) { - this._outlayerMethod( '_manageStamp', arguments ); - }; - - LayoutMode.prototype._getContainerSize = function() { - return this._outlayerMethod( '_getContainerSize', arguments ); - }; - - LayoutMode.prototype._getElementOffset = function(/* elem */) { - return this._outlayerMethod( '_getElementOffset', arguments ); - }; - - LayoutMode.prototype.resize = function() { - this._outlayerMethod( 'resize', arguments ); - }; + /** + * some methods should just defer to default Outlayer method + * and reference the Isotope instance as `this` + **/ + ( function() { + var facadeMethods = [ + '_resetLayout', + '_getItemLayoutPosition', + '_manageStamp', + '_getContainerSize', + '_getElementOffset', + 'resize', + 'layout' + ]; + + for ( var i=0, len = facadeMethods.length; i < len; i++ ) { + var methodName = facadeMethods[i]; + LayoutMode.prototype[ methodName ] = getOutlayerMethod( methodName ); + } - LayoutMode.prototype.layout = function() { - this._outlayerMethod( 'layout', arguments ); - }; + function getOutlayerMethod( methodName ) { + return function() { + return Outlayer.prototype[ methodName ].apply( this.isotope, arguments ); + }; + } + })(); // ----- ----- // From 04967d33020a1448104fe38f59b4f8d9fd2568f2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 22:24:02 -0400 Subject: [PATCH 056/122] README Masonry -> Isotope --- README.mdown | 53 +++++++++++++++++++++++++++++++++------------------- notes.md | 9 +++++++-- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/README.mdown b/README.mdown index a9d4244..c171e3a 100644 --- a/README.mdown +++ b/README.mdown @@ -1,55 +1,70 @@ -# Masonry +# Isotope -_Cascading grid layout library_ +_Filter and sort magical layouts_ -Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. - -For complete docs and demos, see [masonry.desandro.com](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy, +See [isotopejs.com](http://isotopejs.com) for complete docs and demos. ## Install -A packaged source file includes everything you need to use Masonry. +A packaged source file includes everything you need to use Isotope. -+ [masonry.pkgd.min.js](http://masonry.desandro.com/masonry.pkgd.min.js) -+ [masonry.pkgd.js](http://masonry.desandro.com/masonry.pkgd.js) +TBD ### Bower -If you are cool with the command line, install Masonry as a [Bower](http://bower.io) package: +If you are cool with the command line, install Isotope as a [Bower](http://bower.io) package: ``` bash -bower install masonry +bower install isotope ``` +## Isotope + +Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. + +http://isotope.metafizzy.co/license.html + +For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the [GPL v3 License](http://choosealicense.com/licenses/gpl-v3/). You may use Isotope for free. + ## Initialize ### In JavaScript ``` js var container = document.querySelector('#container'); -var msnry = new Masonry( container, { +var iso = new Isotope( container, { + // options... + itemSelector: '.item', + masonry: { + columnWidth: 200 + } +}); +``` + +Or with jQuery + +``` js +$('#container').isotope({ // options... itemSelector: '.item', - columnWidth: 200 + masonry: { + columnWidth: 200 + } }); ``` ### In HTML -Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`. +Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`. ``` html -
+
...
``` -## License - -Masonry is licensed MIT. Have at it. - * * * -Copyright (c) 2013 David DeSandro +Copyright (c) 2013 Metafizzy diff --git a/notes.md b/notes.md index 8d18f15..1c7584d 100644 --- a/notes.md +++ b/notes.md @@ -1,19 +1,24 @@ ## to do +insert method + +provide nice error if getText doesn't provide an element + +move munge sorter to separate file? + ## tests filter updateSortData + layoutComplete test after filter - hide some filter - reveal some, some stay hidden, some are revealed, some do nothing sort filter, during transition filter again -provide nice error if getText doesn't provide an element -move munge sorter to separate file? ## bugs From b19c848467b5bab54b11d409e56c46a5eaa84efc Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 14 Oct 2013 22:32:56 -0400 Subject: [PATCH 057/122] layoutComplete tests --- notes.md | 9 ----- test/get-sort-data.js | 4 ++- test/index.html | 15 +++++++++ test/layout-complete.js | 73 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 91 insertions(+), 10 deletions(-) create mode 100644 test/layout-complete.js diff --git a/notes.md b/notes.md index 1c7584d..2377b74 100644 --- a/notes.md +++ b/notes.md @@ -12,13 +12,4 @@ filter updateSortData - -layoutComplete test after - filter - hide some - filter - reveal some, some stay hidden, some are revealed, some do nothing - sort - filter, during transition filter again - - - ## bugs diff --git a/test/get-sort-data.js b/test/get-sort-data.js index 891f864..ce6091f 100644 --- a/test/get-sort-data.js +++ b/test/get-sort-data.js @@ -8,7 +8,8 @@ test( 'getSortData', function() { ninjaTurtle: '[data-ninja-turtle]', fruit: 'span.fruit', b: 'b parseFloat', - i: 'i parseInt' + i: 'i parseInt', + bbroke: 'b foobar' } }); @@ -18,5 +19,6 @@ test( 'getSortData', function() { equal( item.sortData.fruit, 'watermelon', 'query selector shorthand' ); equal( item.sortData.b, 3.14, 'parseFloat parser' ); equal( item.sortData.i, 42, 'parseInt parser' ); + equal( item.sortData.bbroke, '3.14', 'default nonparser' ); }); diff --git a/test/index.html b/test/index.html index ccdc4a1..c8b19c0 100644 --- a/test/index.html +++ b/test/index.html @@ -29,6 +29,7 @@ + @@ -59,5 +60,19 @@
+

layoutComplete

+ +
+
a1 b1
+
a2 b1
+
a3 b1
+
a1 b2
+
a2 b2
+
a3 b2
+
a1 b3
+
a2 b3
+
a3 b3
+
+ diff --git a/test/layout-complete.js b/test/layout-complete.js new file mode 100644 index 0000000..a38a000 --- /dev/null +++ b/test/layout-complete.js @@ -0,0 +1,73 @@ +test( 'layoutComplete', function() { + + 'use strict'; + + var iso = new Isotope( '#layout-complete', { + layoutMode: 'fitRows', + transitionDuration: '0.1s' + }); + + var tests = [ + function() { + iso.once( 'layoutComplete', function() { + ok( true, 'layoutComplete after some were filtered' ); + next(); + }); + + iso.layout({ + filter: '.a1' + }); + }, + function() { + iso.once( 'layoutComplete', function() { + ok( true, 'after some revealed, some hidden, some same' ); + next(); + }); + + iso.layout({ + filter: '.b2' + }); + }, + function() { + iso.once( 'layoutComplete', function() { + ok( true, 'after random sort' ); + next(); + }); + + iso.layout({ + sortBy: 'random' + }); + }, + function() { + iso.once( 'layoutComplete', function() { + ok( true, 'after layout mid-way thru transition' ); + next(); + }); + + iso.layout({ + filter: '.a2', + transitionDuration: '0.6s' + }); + + setTimeout( function() { + iso.layout({ + filter: '.b2' + }); + }, 300 ); + } + ]; + + function next() { + if ( tests.length ) { + var nextTest = tests.shift(); + // HACK for consecutive layoutComplete calls + setTimeout( nextTest ); + } else { + start(); + } + } + + next(); + stop(); + +}); From d80a0b35224d251b9730818cc16e7a8fe6b20d01 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 14 Oct 2013 23:14:31 -0400 Subject: [PATCH 058/122] surface LayoutMode constructor --- isotope.js | 16 +++++------ layout-mode.js | 44 ++++++++++++++++-------------- layout-modes/cells-by-column.js | 6 ++-- layout-modes/cells-by-row.js | 6 ++-- layout-modes/fit-columns.js | 6 ++-- layout-modes/fit-rows.js | 6 ++-- layout-modes/horizontal.js | 6 ++-- layout-modes/masonry-horizontal.js | 4 +-- layout-modes/masonry.js | 6 ++-- layout-modes/vertical.js | 6 ++-- 10 files changed, 55 insertions(+), 51 deletions(-) diff --git a/isotope.js b/isotope.js index ab1912f..6d3856f 100644 --- a/isotope.js +++ b/isotope.js @@ -39,14 +39,14 @@ var getText = docElem.textContent ? // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires -function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode ) { +function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode ) { // create an Outlayer layout class var Isotope = Outlayer.create( 'isotope', { sortAscending: true }); Isotope.Item = Isotope.prototype.settings.item = Item; - Isotope.layoutMode = layoutMode; + Isotope.LayoutMode = LayoutMode; Isotope.prototype._create = function() { this.itemGUID = 0; @@ -56,7 +56,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode // create layout modes this.modes = {}; // create from registered layout modes - for ( var name in layoutMode.modes ) { + for ( var name in LayoutMode.modes ) { this._initLayoutMode( name ); } // functions that sort items @@ -86,14 +86,14 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode // -------------------------- layout -------------------------- // Isotope.prototype._initLayoutMode = function( name ) { - var LayoutMode = layoutMode.modes[ name ]; + var Mode = LayoutMode.modes[ name ]; // set mode options // HACK extend initial options, back-fill in default options var initialOpts = this.options[ name ] || {}; - this.options[ name ] = LayoutMode.options ? - extend( LayoutMode.options, initialOpts ) : initialOpts; + this.options[ name ] = Mode.options ? + extend( Mode.options, initialOpts ) : initialOpts; // init layout mode instance - this.modes[ name ] = new LayoutMode( this ); + this.modes[ name ] = new Mode( this ); }; Isotope.prototype.layout = function( opts ) { @@ -385,7 +385,7 @@ if ( typeof define === 'function' && define.amd ) { window.getSize, window.matchesSelector, window.Isotope.Item, - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-mode.js b/layout-mode.js index 3f76ed3..9765612 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -6,11 +6,6 @@ function layoutModeDefinition( getSize, Outlayer ) { -var layoutMode = {}; - -layoutMode.modes = {}; - -layoutMode.create = function( namespace, options ) { // layout mode class function LayoutMode( isotope ) { this.isotope = isotope; @@ -24,16 +19,6 @@ layoutMode.create = function( namespace, options ) { } } - // default options - if ( options ) { - LayoutMode.options = options; - } - - LayoutMode.prototype.namespace = namespace; - // register in Isotope - layoutMode.modes[ namespace ] = LayoutMode; - - /** * some methods should just defer to default Outlayer method * and reference the Isotope instance as `this` @@ -117,13 +102,32 @@ layoutMode.create = function( namespace, options ) { this.size = this.isotope.size; }; - // ----- ----- // + // -------------------------- create -------------------------- // - return LayoutMode; -}; + LayoutMode.modes = {}; + + LayoutMode.create = function( namespace, options ) { + function Mode() { + LayoutMode.apply( this, arguments ); + } + + Mode.prototype = new LayoutMode(); + + // default options + if ( options ) { + Mode.options = options; + } + + Mode.prototype.namespace = namespace; + // register in Isotope + LayoutMode.modes[ namespace ] = Mode; -return layoutMode; + return Mode; + }; + + + return LayoutMode; } @@ -137,7 +141,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global window.Isotope = window.Isotope || {}; - window.Isotope.layoutMode = layoutModeDefinition( + window.Isotope.LayoutMode = layoutModeDefinition( window.getSize, window.Outlayer ); diff --git a/layout-modes/cells-by-column.js b/layout-modes/cells-by-column.js index d5f5fe8..2cf34c9 100644 --- a/layout-modes/cells-by-column.js +++ b/layout-modes/cells-by-column.js @@ -2,9 +2,9 @@ 'use strict'; -function cellsByColumnDefinition( layoutMode ) { +function cellsByColumnDefinition( LayoutMode ) { - var CellsByColumn = layoutMode.create( 'cellsByColumn' ); + var CellsByColumn = LayoutMode.create( 'cellsByColumn' ); CellsByColumn.prototype._resetLayout = function() { // reset properties @@ -51,7 +51,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global cellsByColumnDefinition( - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js index 889b68f..eb2d9e6 100644 --- a/layout-modes/cells-by-row.js +++ b/layout-modes/cells-by-row.js @@ -2,9 +2,9 @@ 'use strict'; -function cellsByRowDefinition( layoutMode ) { +function cellsByRowDefinition( LayoutMode ) { - var CellsByRow = layoutMode.create( 'cellsByRow' ); + var CellsByRow = LayoutMode.create( 'cellsByRow' ); CellsByRow.prototype._resetLayout = function() { // reset properties @@ -48,7 +48,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global cellsByRowDefinition( - window.Isotope.layoutMode, + window.Isotope.LayoutMode, window.getSize ); } diff --git a/layout-modes/fit-columns.js b/layout-modes/fit-columns.js index 455ff8a..2460db8 100644 --- a/layout-modes/fit-columns.js +++ b/layout-modes/fit-columns.js @@ -2,9 +2,9 @@ 'use strict'; -function fitColumnsDefinition( layoutMode ) { +function fitColumnsDefinition( LayoutMode ) { - var FitColumns = layoutMode.create('fitColumns'); + var FitColumns = LayoutMode.create('fitColumns'); FitColumns.prototype._resetLayout = function() { this.x = 0; @@ -53,7 +53,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global fitColumnsDefinition( - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-modes/fit-rows.js b/layout-modes/fit-rows.js index f36fa31..55f7ef1 100644 --- a/layout-modes/fit-rows.js +++ b/layout-modes/fit-rows.js @@ -2,9 +2,9 @@ 'use strict'; -function fitRowsDefinition( layoutMode ) { +function fitRowsDefinition( LayoutMode ) { -var FitRows = layoutMode.create( 'fitRows', { +var FitRows = LayoutMode.create( 'fitRows', { foo: 'bar' }); @@ -51,7 +51,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global fitRowsDefinition( - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-modes/horizontal.js b/layout-modes/horizontal.js index 9b9f1f1..1833933 100644 --- a/layout-modes/horizontal.js +++ b/layout-modes/horizontal.js @@ -2,9 +2,9 @@ 'use strict'; -function horizontalDefinition( layoutMode ) { +function horizontalDefinition( LayoutMode ) { - var Horizontal = layoutMode.create( 'horizontal', { + var Horizontal = LayoutMode.create( 'horizontal', { verticalAlignment: 0 }); @@ -42,7 +42,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global horizontalDefinition( - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-modes/masonry-horizontal.js b/layout-modes/masonry-horizontal.js index 13a6e68..85c84db 100644 --- a/layout-modes/masonry-horizontal.js +++ b/layout-modes/masonry-horizontal.js @@ -22,7 +22,7 @@ var indexOf = Array.prototype.indexOf ? function masonryHorizontalDefinition( getSize, layoutMode ) { // create an Outlayer layout class - var MasonryHorizontal = layoutMode.create('masonryHorizontal'); + var MasonryHorizontal = LayoutMode.create('masonryHorizontal'); MasonryHorizontal.prototype._resetLayout = function() { this.getRowHeight(); @@ -138,7 +138,7 @@ if ( typeof define === 'function' && define.amd ) { // browser global masonryHorizontalDefinition( window.getSize, - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index ef0d9d2..fed4eb2 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -21,9 +21,9 @@ function extend( a, b ) { // -------------------------- masonryDefinition -------------------------- // // used for AMD definition and requires -function masonryDefinition( layoutMode, Masonry ) { +function masonryDefinition( LayoutMode, Masonry ) { // create an Outlayer layout class - var MasonryMode = layoutMode.create('masonry'); + var MasonryMode = LayoutMode.create('masonry'); // save on to these methods var _getElementOffset = MasonryMode.prototype._getElementOffset; @@ -51,7 +51,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global masonryDefinition( - window.Isotope.layoutMode, + window.Isotope.LayoutMode, window.Masonry ); } diff --git a/layout-modes/vertical.js b/layout-modes/vertical.js index c5c91df..841e291 100644 --- a/layout-modes/vertical.js +++ b/layout-modes/vertical.js @@ -2,9 +2,9 @@ 'use strict'; -function verticalDefinition( layoutMode ) { +function verticalDefinition( LayoutMode ) { -var Vertical = layoutMode.create( 'vertical', { +var Vertical = LayoutMode.create( 'vertical', { horizontalAlignment: 0 }); @@ -38,7 +38,7 @@ if ( typeof define === 'function' && define.amd ) { } else { // browser global verticalDefinition( - window.Isotope.layoutMode + window.Isotope.LayoutMode ); } From 1e45b84f19ea31d80addd49b6518b84e19a84d0d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 14 Oct 2013 23:24:25 -0400 Subject: [PATCH 059/122] masonryHorizontal fix --- layout-modes/masonry-horizontal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layout-modes/masonry-horizontal.js b/layout-modes/masonry-horizontal.js index 85c84db..9644d78 100644 --- a/layout-modes/masonry-horizontal.js +++ b/layout-modes/masonry-horizontal.js @@ -20,7 +20,7 @@ var indexOf = Array.prototype.indexOf ? // -------------------------- definition -------------------------- // -function masonryHorizontalDefinition( getSize, layoutMode ) { +function masonryHorizontalDefinition( getSize, LayoutMode ) { // create an Outlayer layout class var MasonryHorizontal = LayoutMode.create('masonryHorizontal'); From f2d605cc32247fd904d0ff9ba3fd10c94ef7ef77 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 14 Oct 2013 23:24:29 -0400 Subject: [PATCH 060/122] LayoutMode.getSegmentSize --- layout-mode.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/layout-mode.js b/layout-mode.js index 9765612..a9d1a8e 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -65,29 +65,32 @@ function layoutModeDefinition( getSize, Outlayer ) { // ----- measurements ----- // LayoutMode.prototype.getColumnWidth = function() { - this._getMeasurement( 'columnWidth', 'outerWidth' ); - if ( this.columnWidth ) { - // got column width, we can chill - return; - } - // columnWidth fall back to item of first element - var firstItemSize = this.getFirstItemSize(); - this.columnWidth = firstItemSize && firstItemSize.outerWidth || - // or size of container - this.isotope.size.innerWidth; + this.getSegmentSize( 'column', 'Width' ); }; LayoutMode.prototype.getRowHeight = function() { - this._getMeasurement( 'rowHeight', 'outerHeight' ); - if ( this.rowHeight ) { - // got rowHeight, we can chill + this.getSegmentSize( 'row', 'Height' ); + }; + + /** + * get columnWidth or rowHeight + * segment: 'column' or 'row' + * size 'Width' or 'Height' + **/ + LayoutMode.prototype.getSegmentSize = function( segment, size ) { + var segmentName = segment + size; + var outerSize = 'outer' + size; + // columnWidth / outerWidth // rowHeight / outerHeight + this._getMeasurement( segmentName, outerSize ); + // got rowHeight or columnWidth, we can chill + if ( this[ segmentName ] ) { return; } - // columnWidth fall back to item of first element + // fall back to item of first element var firstItemSize = this.getFirstItemSize(); - this.rowHeight = firstItemSize && firstItemSize.outerHeight || + this.rowHeight = firstItemSize && firstItemSize[ outerSize ] || // or size of container - this.isotope.size.innerHeight; + this.isotope.size[ 'inner' + size ]; }; LayoutMode.prototype.getFirstItemSize = function() { From 377674a136cd4e52ac9067d93ef8a687983ac0a3 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 15 Oct 2013 07:00:41 -0400 Subject: [PATCH 061/122] check that sortHistory first item --- isotope.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/isotope.js b/isotope.js index 6d3856f..e1f0687 100644 --- a/isotope.js +++ b/isotope.js @@ -295,8 +295,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var itemSorter = getItemSorter( sortBys, this.options.sortAscending ); this.filteredItems.sort( itemSorter ); // keep track of sortBy History - var lastSortBy = this.sortHistory[ this.sortHistory.length - 1 ]; - if ( sortByOpt !== lastSortBy ) { + if ( sortByOpt !== this.sortHistory[0] ) { // add to front, oldest goes in last this.sortHistory.unshift( sortByOpt ); } From d4ac7b68280ef5c94f1d84b1ca4083ecb5b1a21e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 16 Oct 2013 20:18:38 -0400 Subject: [PATCH 062/122] move js to js/ --- bower.json | 2 +- examples/basic.html | 8 ++++---- examples/cells-by-row.html | 16 ++++++++-------- examples/filter-sort.html | 12 ++++++------ examples/horizontal-layout-modes.html | 12 ++++++------ examples/masonry-horizontal.html | 14 +++++++------- examples/masonry.html | 10 +++++----- examples/sorting.html | 8 ++++---- examples/transition-bug.html | 12 ++++++------ isotope.js => js/isotope.js | 0 item.js => js/item.js | 0 layout-mode.js => js/layout-mode.js | 0 .../layout-modes}/cells-by-column.js | 2 +- .../layout-modes}/cells-by-row.js | 2 +- {layout-modes => js/layout-modes}/fit-columns.js | 2 +- {layout-modes => js/layout-modes}/fit-rows.js | 2 +- {layout-modes => js/layout-modes}/horizontal.js | 2 +- .../layout-modes}/masonry-horizontal.js | 2 +- {layout-modes => js/layout-modes}/masonry.js | 2 +- {layout-modes => js/layout-modes}/vertical.js | 2 +- test/index.html | 10 +++++----- 21 files changed, 60 insertions(+), 60 deletions(-) rename isotope.js => js/isotope.js (100%) rename item.js => js/item.js (100%) rename layout-mode.js => js/layout-mode.js (100%) rename {layout-modes => js/layout-modes}/cells-by-column.js (98%) rename {layout-modes => js/layout-modes}/cells-by-row.js (97%) rename {layout-modes => js/layout-modes}/fit-columns.js (97%) rename {layout-modes => js/layout-modes}/fit-rows.js (97%) rename {layout-modes => js/layout-modes}/horizontal.js (97%) rename {layout-modes => js/layout-modes}/masonry-horizontal.js (99%) rename {layout-modes => js/layout-modes}/masonry.js (97%) rename {layout-modes => js/layout-modes}/vertical.js (96%) diff --git a/bower.json b/bower.json index 5cb97a7..7cc1071 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,7 @@ "version": "2.0.0", "description": "Filter and sort magical layouts", "main": [ - "isotope.js" + "js/isotope.js" ], "dependencies": { "get-size": "desandro/get-size", diff --git a/examples/basic.html b/examples/basic.html index 1819f19..fb9f237 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -46,10 +46,10 @@ - - - - + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - - + + + + + + + - - - - - + + + + + - - - - + + + + - - - - - - + + + + + + - - - - - + + + + + From fda4910b2faf4c73f6d15b1e6b977f1a9c3b4779 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 16 Oct 2013 21:05:04 -0400 Subject: [PATCH 063/122] test layoutMode.getSegmentSize --- js/layout-mode.js | 2 +- test/get-segment-size.js | 38 ++++++++++++++++++++++++++++++++++++++ test/index.html | 9 +++++++++ test/tests.css | 11 +++++++++++ 4 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 test/get-segment-size.js diff --git a/js/layout-mode.js b/js/layout-mode.js index a9d1a8e..599583d 100644 --- a/js/layout-mode.js +++ b/js/layout-mode.js @@ -88,7 +88,7 @@ function layoutModeDefinition( getSize, Outlayer ) { } // fall back to item of first element var firstItemSize = this.getFirstItemSize(); - this.rowHeight = firstItemSize && firstItemSize[ outerSize ] || + this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] || // or size of container this.isotope.size[ 'inner' + size ]; }; diff --git a/test/get-segment-size.js b/test/get-segment-size.js new file mode 100644 index 0000000..a6ed450 --- /dev/null +++ b/test/get-segment-size.js @@ -0,0 +1,38 @@ +( function() { + +'use strict'; + +test( 'LayoutMode.getSegmentSize', function() { + + var iso = new Isotope( '#get-segment-size', { + layoutMode: 'cellsByRow', + itemSelector: '.item', + cellsByRow: { + columnWidth: 17, + rowHeight: 23 + } + }); + + var cellsByRow = iso.modes.cellsByRow; + equal( cellsByRow.columnWidth, 17, 'explicit columnWidth option set' ); + equal( cellsByRow.rowHeight, 23, 'explicit rowHeight option set' ); + + // set element sizing + iso.options.cellsByRow.columnWidth = '.grid-sizer'; + iso.options.cellsByRow.rowHeight = '.grid-sizer'; + cellsByRow.getColumnWidth(); + cellsByRow.getRowHeight(); + equal( cellsByRow.columnWidth, 57, 'element sizing columnWidth' ); + equal( cellsByRow.rowHeight, 47, 'element sizing rowHeight' ); + + // default to first item + delete iso.options.cellsByRow.columnWidth; + delete iso.options.cellsByRow.rowHeight; + cellsByRow.getColumnWidth(); + cellsByRow.getRowHeight(); + equal( cellsByRow.columnWidth, 60, 'first item columnWidth' ); + equal( cellsByRow.rowHeight, 30, 'first item rowHeight' ); + +}); + +})(); diff --git a/test/index.html b/test/index.html index 89221ff..5e1f8c1 100644 --- a/test/index.html +++ b/test/index.html @@ -26,10 +26,12 @@ + + @@ -74,5 +76,12 @@
a3 b3
+

LayoutMode.getSegmentSize

+ +
+
+
+
+ diff --git a/test/tests.css b/test/tests.css index 18f3027..b40dd19 100644 --- a/test/tests.css +++ b/test/tests.css @@ -59,3 +59,14 @@ body { width: 200px; height: 20px; } + +/* ---- get segment size ---- */ + +#get-segment-size .grid-sizer { + /* 57 outer width */ + width: 52px; + margin-right: 5px; + /* 47 outer height */ + height: 40px; + margin-bottom: 7px; +} From e7c30c629c4b64d2ea56dbfd074c43fe0f302f06 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 16 Oct 2013 21:13:56 -0400 Subject: [PATCH 064/122] more files in bower.json main --- bower.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 7cc1071..a308b23 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,13 @@ "version": "2.0.0", "description": "Filter and sort magical layouts", "main": [ - "js/isotope.js" + "js/item.js", + "js/layout-mode.js", + "js/isotope.js", + "js/layout-modes/vertical.js", + "js/layout-modes/fit-rows.js", + "js/layout-modes/masonry.js", + "js/layout-modes/cells-by-row.js" ], "dependencies": { "get-size": "desandro/get-size", From 6adf4598070ae862a67cf08d912e118907efd680 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Oct 2013 07:41:25 -0400 Subject: [PATCH 065/122] tick version 2.0.0-beta.1 --- bower.json | 2 +- js/isotope.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index a308b23..8948514 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0", + "version": "2.0.0-beta.1", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/js/isotope.js b/js/isotope.js index e1f0687..a5969f6 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0 + * Isotope v2.0.0-beta.1 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ From 9bc0be3868d45c54e2217a92bec05b23ee2e4cdd Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 30 Oct 2013 08:39:41 -0400 Subject: [PATCH 066/122] add jQuery filtering --- js/isotope.js | 18 +++++++++++++----- notes.md | 1 + 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index a5969f6..60e6fea 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -8,6 +8,10 @@ 'use strict'; +// -------------------------- vars -------------------------- // + +var jQuery = window.jQuery; + // -------------------------- helpers -------------------------- // // extend objects @@ -124,7 +128,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var hiddenMatched = []; var visibleUnmatched = []; - var test = getFilterTest( filter ); + var test = this._getFilterTest( filter ); // test each item for ( var i=0, len = items.length; i < len; i++ ) { @@ -163,10 +167,14 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode return matches; }; - // get a function or a matchesSelector test given the filter - function getFilterTest( filter ) { + // get a jQuery, function, or a matchesSelector test given the filter + Isotope.prototype._getFilterTest = function( filter ) { var test; - if ( typeof filter === 'function' ) { + if ( jQuery && this.options.isJQueryFiltering ) { + test = function( item ) { + return jQuery( item.element ).is( filter ); + }; + } else if ( typeof filter === 'function' ) { test = function( item ) { return filter( item.element ); }; @@ -176,7 +184,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }; } return test; - } + }; // -------------------------- sorting -------------------------- // diff --git a/notes.md b/notes.md index 2377b74..eab3d35 100644 --- a/notes.md +++ b/notes.md @@ -9,6 +9,7 @@ move munge sorter to separate file? ## tests filter + jQuery filtering updateSortData From 5d3ed082b823baf6ac0a4d23a0d0c798d164cf6f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 30 Oct 2013 21:01:58 -0400 Subject: [PATCH 067/122] test filtering --- bower.json | 1 + notes.md | 3 -- test/.jshintrc | 1 + test/filtering.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++ test/helpers.js | 19 ++++++++++++ test/index.html | 16 ++++++++++ test/sorting.js | 10 ------ 7 files changed, 114 insertions(+), 13 deletions(-) create mode 100644 test/filtering.js create mode 100644 test/helpers.js diff --git a/bower.json b/bower.json index 8948514..b5d414d 100644 --- a/bower.json +++ b/bower.json @@ -19,6 +19,7 @@ }, "devDependencies": { "doc-ready": "desandro/doc-ready", + "jquery": "1", "qunit": "1.12" } } diff --git a/notes.md b/notes.md index eab3d35..b323d6c 100644 --- a/notes.md +++ b/notes.md @@ -8,9 +8,6 @@ move munge sorter to separate file? ## tests -filter - jQuery filtering - updateSortData ## bugs diff --git a/test/.jshintrc b/test/.jshintrc index 8d44cc0..db70381 100644 --- a/test/.jshintrc +++ b/test/.jshintrc @@ -6,6 +6,7 @@ "unused": true, "predef": { "Isotope": false, + "getText": false, "asyncTest": false, "deepEqual": false, diff --git a/test/filtering.js b/test/filtering.js new file mode 100644 index 0000000..eb34e03 --- /dev/null +++ b/test/filtering.js @@ -0,0 +1,77 @@ +( function() { + +'use strict'; + +var $ = window.jQuery; + +// return a string of item ids +function getFilteredItemIDs( iso ) { + var texts = []; + for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { + var item = iso.filteredItems[i]; + var id = item.element.getAttribute('data-item-id'); + texts.push( id ); + } + return texts.join(','); +} + +/* +
5
+
3
+
2
+
9
+
7
+
1
+
8
+*/ + +test( 'filtering', function() { + + var iso = new Isotope( '#filtering', { + transitionDuration: 0 + }); + + var ids = getFilteredItemIDs( iso ); + equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); + + function checkFilter( filter, expectedIDs, message ) { + iso.layout({ filter: filter }); + ids = getFilteredItemIDs( iso ); + equal( ids, expectedIDs, message || filter ); + } + + checkFilter( '.orange', '1,3,6,7' ); + checkFilter( '.tall', '3,4,7' ); + checkFilter( '.tall.orange', '3,7' ); + + iso.layout({ + filter: function( elem ) { + var num = parseInt( getText( elem ), 10 ); + return num > 5; + } + }); + ids = getFilteredItemIDs( iso ); + equal( ids, '4,5,7', 'function, text is greater than 5' ); + + // filter with jQuery + iso.options.isJQueryFiltering = true; + + checkFilter( '.orange', '1,3,6,7', '.orange with jQuery' ); + checkFilter( '.tall', '3,4,7', '.orange with jQuery' ); + checkFilter( '.tall.orange', '3,7', '.tall.orange with jQuery' ); + + checkFilter( ':not(.orange)', '2,4,5' ); + checkFilter( '.orange:not(.tall)', '1,6' ); + + iso.layout({ + filter: function() { + var num = parseInt( $(this).text(), 10 ); + return num > 5; + } + }); + ids = getFilteredItemIDs( iso ); + equal( ids, '4,5,7', 'function, text is greater than 5, with jQuery' ); + +}); + +})(); diff --git a/test/helpers.js b/test/helpers.js new file mode 100644 index 0000000..038d99f --- /dev/null +++ b/test/helpers.js @@ -0,0 +1,19 @@ +( function() { + +'use strict'; + +// ----- default layout mode ----- // +Isotope.prototype.options.layoutMode = 'fitRows'; + +// ----- getText ----- // +var docElem = document.documentElement; + +window.getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + +})(); diff --git a/test/index.html b/test/index.html index 5e1f8c1..11ac564 100644 --- a/test/index.html +++ b/test/index.html @@ -21,6 +21,8 @@ + + @@ -28,8 +30,10 @@ + + @@ -62,6 +66,18 @@
+

Filtering

+ +
+
5
+
3
+
2
+
9
+
7
+
1
+
8
+
+

layoutComplete

diff --git a/test/sorting.js b/test/sorting.js index f7874f2..8e8cfa3 100644 --- a/test/sorting.js +++ b/test/sorting.js @@ -2,16 +2,6 @@ 'use strict'; -var docElem = document.documentElement; - -var getText = docElem.textContent ? - function( elem ) { - return elem.textContent; - } : - function( elem ) { - return elem.innerText; - }; - function getItemsText( iso ) { var texts = []; for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { From dd79d2201cf4bdf97f57ab36748d8a8bc40b68fd Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 30 Oct 2013 21:48:12 -0400 Subject: [PATCH 068/122] add filteredItems in _create --- js/isotope.js | 3 +++ notes.md | 13 +++++++++++++ 2 files changed, 16 insertions(+) diff --git a/js/isotope.js b/js/isotope.js index 60e6fea..edb7c09 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -63,6 +63,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode for ( var name in LayoutMode.modes ) { this._initLayoutMode( name ); } + // start filteredItems with all items + this.filteredItems = this.items; + // functions that sort items this._sorters = {}; // keep of track of sortBys diff --git a/notes.md b/notes.md index b323d6c..b2ceffe 100644 --- a/notes.md +++ b/notes.md @@ -11,3 +11,16 @@ move munge sorter to separate file? updateSortData ## bugs + +## misc + +iso.filterSortLayout() +iso.magic() +iso.isotope() +iso.process() +iso.fullLayout() +iso.go() +iso.change() +iso.activate(); +iso.move() +iso.processLayout \ No newline at end of file From 2fd255a4625f759f938e63f3f3ee09be2c8ca623 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 30 Oct 2013 22:23:01 -0400 Subject: [PATCH 069/122] add .magic() method --- js/isotope.js | 48 +++++++++++++++++++++++++++++++---------- notes.md | 4 ++++ test/filtering.js | 6 +++--- test/layout-complete.js | 10 ++++----- test/sorting.js | 6 +++--- 5 files changed, 52 insertions(+), 22 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index edb7c09..ca1fc8b 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -103,15 +103,20 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this.modes[ name ] = new Mode( this ); }; - Isotope.prototype.layout = function( opts ) { - // set any options pass - this.option( opts ); + + Isotope.prototype.layout = function() { + // if first time doing layout, do all magic + if ( !this._isLayoutInited && this.options.isInitLayout ) { + this.magic(); + return; + } + this._layout(); + }; + + // private method to be used in layout() & magic() + Isotope.prototype._layout = function() { // don't animate first layout - var isInstant = this._isInitInstant = this.options.isLayoutInstant !== undefined ? - this.options.isLayoutInstant : !this._isLayoutInited; - // - this.filteredItems = this._filter( this.items ); - this._sort(); + var isInstant = this._getIsInstant(); // layout flow this._resetLayout(); this._manageStamps(); @@ -121,6 +126,27 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this._isLayoutInited = true; }; + // filter + sort + layout + Isotope.prototype.magic = function( opts ) { + // set any options pass + this.option( opts ); + this._getIsInstant(); + // where the magic happens, amirite + this.filteredItems = this._filter( this.items ); + this._sort(); + this._layout(); + }; + // alias + Isotope.prototype.filterSortLayout = Isotope.prototype.magic; + + // HACK + // Don't animate/transition first layout + // Or don't animate/transition other layouts + Isotope.prototype._getIsInstant = function() { + var isInstant = this.options.isLayoutInstant !== undefined ? + this.options.isLayoutInstant : !this._isLayoutInited; + return this._isInstant = isInstant; + }; // -------------------------- filter -------------------------- // @@ -155,15 +181,15 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } // HACK - // disable transition on init + // disable transition if instant var _transitionDuration = this.options.transitionDuration; - if ( this._isInitInstant ) { + if ( this._isInstant ) { this.options.transitionDuration = 0; } this.reveal( hiddenMatched ); this.hide( visibleUnmatched ); // set back - if ( this._isInitInstant ) { + if ( this._isInstant ) { this.options.transitionDuration = _transitionDuration; } diff --git a/notes.md b/notes.md index b2ceffe..629f1fb 100644 --- a/notes.md +++ b/notes.md @@ -10,6 +10,10 @@ move munge sorter to separate file? updateSortData +## discuss + +Method name for filterSortMagic. Currently .magic() + ## bugs ## misc diff --git a/test/filtering.js b/test/filtering.js index eb34e03..0884ac9 100644 --- a/test/filtering.js +++ b/test/filtering.js @@ -35,7 +35,7 @@ test( 'filtering', function() { equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); function checkFilter( filter, expectedIDs, message ) { - iso.layout({ filter: filter }); + iso.magic({ filter: filter }); ids = getFilteredItemIDs( iso ); equal( ids, expectedIDs, message || filter ); } @@ -44,7 +44,7 @@ test( 'filtering', function() { checkFilter( '.tall', '3,4,7' ); checkFilter( '.tall.orange', '3,7' ); - iso.layout({ + iso.magic({ filter: function( elem ) { var num = parseInt( getText( elem ), 10 ); return num > 5; @@ -63,7 +63,7 @@ test( 'filtering', function() { checkFilter( ':not(.orange)', '2,4,5' ); checkFilter( '.orange:not(.tall)', '1,6' ); - iso.layout({ + iso.magic({ filter: function() { var num = parseInt( $(this).text(), 10 ); return num > 5; diff --git a/test/layout-complete.js b/test/layout-complete.js index a38a000..caf1861 100644 --- a/test/layout-complete.js +++ b/test/layout-complete.js @@ -14,7 +14,7 @@ test( 'layoutComplete', function() { next(); }); - iso.layout({ + iso.magic({ filter: '.a1' }); }, @@ -24,7 +24,7 @@ test( 'layoutComplete', function() { next(); }); - iso.layout({ + iso.magic({ filter: '.b2' }); }, @@ -34,7 +34,7 @@ test( 'layoutComplete', function() { next(); }); - iso.layout({ + iso.magic({ sortBy: 'random' }); }, @@ -44,13 +44,13 @@ test( 'layoutComplete', function() { next(); }); - iso.layout({ + iso.magic({ filter: '.a2', transitionDuration: '0.6s' }); setTimeout( function() { - iso.layout({ + iso.magic({ filter: '.b2' }); }, 300 ); diff --git a/test/sorting.js b/test/sorting.js index 8e8cfa3..9f5f3b4 100644 --- a/test/sorting.js +++ b/test/sorting.js @@ -25,7 +25,7 @@ test( 'sorting', function() { sortBy: 'number' }); - iso.layout({ sortBy: 'letter' }); + iso.magic({ sortBy: 'letter' }); var texts = getItemsText( iso ); @@ -48,12 +48,12 @@ test( 'sorting', function() { equal( getItemsText( iso ), 'A1,A2,A3,A4,B1,B2,B4', 'sortBy array' ); - iso.layout({ + iso.magic({ sortAscending: false }); equal( getItemsText( iso ), 'B4,B2,B1,A4,A3,A2,A1', 'sortAscending false' ); - iso.layout({ + iso.magic({ sortAscending: { letter: true, number: false From 1abc3b7e5b670d07478428871c38044e53031463 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 30 Oct 2013 23:24:46 -0400 Subject: [PATCH 070/122] magic method notes --- notes.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/notes.md b/notes.md index 629f1fb..b69ed3c 100644 --- a/notes.md +++ b/notes.md @@ -27,4 +27,32 @@ iso.go() iso.change() iso.activate(); iso.move() -iso.processLayout \ No newline at end of file +iso.processLayout() +iso.rearrange() +iso.arrange({}) +iso.reload() +iso.update() +iso.radiate() +iso.form({}) +iso.stabilize() +iso.react() +iso.act() +iso.doStuff() +iso.position +iso.configure +iso.apply +iso.display({}) + + +Orrrrrr keep .layout() and have reLayout() + + +--- + + Masonry Isotope Packery +Masonry Layouts x x x +no gaps x +draggable x +filtering x +sorting x +multiple layout x From 4d10ee57a96ed7c15046b591fb3aa2d500db3e30 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 31 Oct 2013 07:33:47 -0400 Subject: [PATCH 071/122] .magic -> .arrange --- js/isotope.js | 8 ++++---- notes.md | 2 +- test/filtering.js | 6 +++--- test/layout-complete.js | 10 +++++----- test/sorting.js | 6 +++--- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index ca1fc8b..c3eea42 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -107,7 +107,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode Isotope.prototype.layout = function() { // if first time doing layout, do all magic if ( !this._isLayoutInited && this.options.isInitLayout ) { - this.magic(); + this.arrange(); return; } this._layout(); @@ -127,7 +127,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }; // filter + sort + layout - Isotope.prototype.magic = function( opts ) { + Isotope.prototype.arrange = function( opts ) { // set any options pass this.option( opts ); this._getIsInstant(); @@ -136,8 +136,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this._sort(); this._layout(); }; - // alias - Isotope.prototype.filterSortLayout = Isotope.prototype.magic; + // alias to _init for main plugin method + Isotope.prototype._init = Isotope.prototype.arrange; // HACK // Don't animate/transition first layout diff --git a/notes.md b/notes.md index b69ed3c..a94ac99 100644 --- a/notes.md +++ b/notes.md @@ -47,7 +47,7 @@ iso.display({}) Orrrrrr keep .layout() and have reLayout() ---- +## Isotope vs Masonry vs Packery Masonry Isotope Packery Masonry Layouts x x x diff --git a/test/filtering.js b/test/filtering.js index 0884ac9..68187ab 100644 --- a/test/filtering.js +++ b/test/filtering.js @@ -35,7 +35,7 @@ test( 'filtering', function() { equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); function checkFilter( filter, expectedIDs, message ) { - iso.magic({ filter: filter }); + iso.arrange({ filter: filter }); ids = getFilteredItemIDs( iso ); equal( ids, expectedIDs, message || filter ); } @@ -44,7 +44,7 @@ test( 'filtering', function() { checkFilter( '.tall', '3,4,7' ); checkFilter( '.tall.orange', '3,7' ); - iso.magic({ + iso.arrange({ filter: function( elem ) { var num = parseInt( getText( elem ), 10 ); return num > 5; @@ -63,7 +63,7 @@ test( 'filtering', function() { checkFilter( ':not(.orange)', '2,4,5' ); checkFilter( '.orange:not(.tall)', '1,6' ); - iso.magic({ + iso.arrange({ filter: function() { var num = parseInt( $(this).text(), 10 ); return num > 5; diff --git a/test/layout-complete.js b/test/layout-complete.js index caf1861..82a1ec4 100644 --- a/test/layout-complete.js +++ b/test/layout-complete.js @@ -14,7 +14,7 @@ test( 'layoutComplete', function() { next(); }); - iso.magic({ + iso.arrange({ filter: '.a1' }); }, @@ -24,7 +24,7 @@ test( 'layoutComplete', function() { next(); }); - iso.magic({ + iso.arrange({ filter: '.b2' }); }, @@ -34,7 +34,7 @@ test( 'layoutComplete', function() { next(); }); - iso.magic({ + iso.arrange({ sortBy: 'random' }); }, @@ -44,13 +44,13 @@ test( 'layoutComplete', function() { next(); }); - iso.magic({ + iso.arrange({ filter: '.a2', transitionDuration: '0.6s' }); setTimeout( function() { - iso.magic({ + iso.arrange({ filter: '.b2' }); }, 300 ); diff --git a/test/sorting.js b/test/sorting.js index 9f5f3b4..6c0dacf 100644 --- a/test/sorting.js +++ b/test/sorting.js @@ -25,7 +25,7 @@ test( 'sorting', function() { sortBy: 'number' }); - iso.magic({ sortBy: 'letter' }); + iso.arrange({ sortBy: 'letter' }); var texts = getItemsText( iso ); @@ -48,12 +48,12 @@ test( 'sorting', function() { equal( getItemsText( iso ), 'A1,A2,A3,A4,B1,B2,B4', 'sortBy array' ); - iso.magic({ + iso.arrange({ sortAscending: false }); equal( getItemsText( iso ), 'B4,B2,B1,A4,A3,A2,A1', 'sortAscending false' ); - iso.magic({ + iso.arrange({ sortAscending: { letter: true, number: false From ead360f58ad70992b4fa86ca876f00726b02f94f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 31 Oct 2013 07:38:47 -0400 Subject: [PATCH 072/122] .layout() -> .arrange() --- examples/cells-by-row.html | 3 +-- examples/filter-sort.html | 2 +- examples/horizontal-layout-modes.html | 2 +- examples/masonry-horizontal.html | 2 +- examples/masonry.html | 2 +- examples/sorting.html | 2 +- 6 files changed, 6 insertions(+), 7 deletions(-) diff --git a/examples/cells-by-row.html b/examples/cells-by-row.html index 616d705..e6b1b54 100644 --- a/examples/cells-by-row.html +++ b/examples/cells-by-row.html @@ -203,8 +203,7 @@ docReady( function() { // use link's href, remove leading hash var sortBy = event.target.getAttribute('href').slice( 1 ); sortBy.slice( 0, 1 ); - iso.options.sortBy = sortBy; - iso.layout(); + iso.arrange({ sortBy: sortBy }); event.preventDefault(); }); diff --git a/examples/filter-sort.html b/examples/filter-sort.html index c3376ef..1bec6a4 100644 --- a/examples/filter-sort.html +++ b/examples/filter-sort.html @@ -199,7 +199,7 @@ docReady( function() { } console.log( key, value ); iso.options[ key ] = value; - iso.layout(); + iso.arrange(); }); }); diff --git a/examples/horizontal-layout-modes.html b/examples/horizontal-layout-modes.html index 5a588a5..28fa195 100644 --- a/examples/horizontal-layout-modes.html +++ b/examples/horizontal-layout-modes.html @@ -201,7 +201,7 @@ docReady( function() { var value = event.target.getAttribute('data-isotope-value'); console.log( key, value ); iso.options[ key ] = value; - iso.layout(); + iso.arrange(); }); }); diff --git a/examples/masonry-horizontal.html b/examples/masonry-horizontal.html index 57d64cc..5ba1341 100644 --- a/examples/masonry-horizontal.html +++ b/examples/masonry-horizontal.html @@ -233,7 +233,7 @@ docReady( function() { var value = event.target.getAttribute('data-isotope-value'); console.log( key, value ); iso.options[ key ] = value; - iso.layout(); + iso.arrange(); }); }); diff --git a/examples/masonry.html b/examples/masonry.html index c396df0..87692d3 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -202,7 +202,7 @@ docReady( function() { var sortBy = event.target.getAttribute('href').slice( 1 ); sortBy.slice( 0, 1 ); iso.options.sortBy = sortBy; - iso.layout(); + iso.arrange(); event.preventDefault(); }); diff --git a/examples/sorting.html b/examples/sorting.html index ac9a4c4..2700b62 100644 --- a/examples/sorting.html +++ b/examples/sorting.html @@ -191,7 +191,7 @@ docReady( function() { var sortBy = event.target.getAttribute('href').slice( 1 ); sortBy.slice( 0, 1 ); iso.options.sortBy = sortBy; - iso.layout(); + iso.arrange(); event.preventDefault(); }); From 9ee8747fc95f776402c1125f41fffd325031d067 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 31 Oct 2013 08:21:21 -0400 Subject: [PATCH 073/122] add insert method --- examples/insert.html | 95 ++++++++++++++++++++++++++++++++++++++++++++ js/isotope.js | 21 ++++++++-- notes.md | 2 - 3 files changed, 112 insertions(+), 6 deletions(-) create mode 100644 examples/insert.html diff --git a/examples/insert.html b/examples/insert.html new file mode 100644 index 0000000..70fcee0 --- /dev/null +++ b/examples/insert.html @@ -0,0 +1,95 @@ + + + + + + insert + + + + + + +

insert

+ +

+ +
+
49
+
35
+
60
+
29
+
78
+
92
+
10
+
55
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/js/isotope.js b/js/isotope.js index c3eea42..a27b6ee 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -54,6 +54,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode Isotope.prototype._create = function() { this.itemGUID = 0; + // functions that sort items + this._sorters = {}; // call super Outlayer.prototype._create.call( this ); @@ -65,12 +67,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } // start filteredItems with all items this.filteredItems = this.items; - - // functions that sort items - this._sorters = {}; // keep of track of sortBys this.sortHistory = [ 'original-order' ]; - this.updateSortData(); }; Isotope.prototype.reloadItems = function() { @@ -87,9 +85,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var item = items[i]; item.id = this.itemGUID++; } + this.updateSortData( items ); return items; }; + /** + * Filter, sort, and layout newly-appended item elements + * @param {Array or NodeList or Element} elems + */ + Isotope.prototype.insert = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + this.arrange(); + }; + // -------------------------- layout -------------------------- // Isotope.prototype._initLayoutMode = function( name ) { @@ -399,6 +410,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this._mode().resize(); }; + // ----- ----- // + return Isotope; } diff --git a/notes.md b/notes.md index a94ac99..7289de5 100644 --- a/notes.md +++ b/notes.md @@ -1,7 +1,5 @@ ## to do -insert method - provide nice error if getText doesn't provide an element move munge sorter to separate file? From 9be3106154baae67c9df284ae9e4f18485cb679f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 9 Nov 2013 12:06:39 -0500 Subject: [PATCH 074/122] notes --- notes.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/notes.md b/notes.md index 7289de5..f4c86e4 100644 --- a/notes.md +++ b/notes.md @@ -10,7 +10,9 @@ updateSortData ## discuss -Method name for filterSortMagic. Currently .magic() +Method name for filterSortMagic. Currently .arrange() + +default to isJQueryFiltering = true, vs. not ## bugs @@ -54,3 +56,10 @@ draggable x filtering x sorting x multiple layout x + + +## Combination filters + +.a OR .b = .a, .b +.a AND .b = .a.b + From 3a4285fccd28de847e0573cbe36d31569af33f2d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 10 Nov 2013 11:12:30 -0500 Subject: [PATCH 075/122] isJQueryFiltering: true by default --- js/isotope.js | 1 + test/filtering.js | 1 + 2 files changed, 2 insertions(+) diff --git a/js/isotope.js b/js/isotope.js index a27b6ee..7746138 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -46,6 +46,7 @@ var getText = docElem.textContent ? function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode ) { // create an Outlayer layout class var Isotope = Outlayer.create( 'isotope', { + isJQueryFiltering: true, sortAscending: true }); diff --git a/test/filtering.js b/test/filtering.js index 68187ab..9f97d4d 100644 --- a/test/filtering.js +++ b/test/filtering.js @@ -28,6 +28,7 @@ function getFilteredItemIDs( iso ) { test( 'filtering', function() { var iso = new Isotope( '#filtering', { + isJQueryFiltering: false, transitionDuration: 0 }); From fac53b6a89192734e9c2c1d012858740b14ad69a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 10 Nov 2013 20:50:59 -0500 Subject: [PATCH 076/122] default layout mode is masonry --- js/isotope.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/isotope.js b/js/isotope.js index 7746138..a1ebc5a 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -46,6 +46,7 @@ var getText = docElem.textContent ? function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode ) { // create an Outlayer layout class var Isotope = Outlayer.create( 'isotope', { + layoutMode: "masonry", isJQueryFiltering: true, sortAscending: true }); From 0ad3d420813f1513c29b16c9d5860a6391920e89 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 10 Nov 2013 20:51:25 -0500 Subject: [PATCH 077/122] initLayoutMode after filteredItems --- js/isotope.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index a1ebc5a..8b5b8aa 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -63,14 +63,14 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode // create layout modes this.modes = {}; - // create from registered layout modes - for ( var name in LayoutMode.modes ) { - this._initLayoutMode( name ); - } // start filteredItems with all items this.filteredItems = this.items; // keep of track of sortBys this.sortHistory = [ 'original-order' ]; + // create from registered layout modes + for ( var name in LayoutMode.modes ) { + this._initLayoutMode( name ); + } }; Isotope.prototype.reloadItems = function() { From 3cfcc6f588f91cfa1b58dd72a61ef22f59a57fa1 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 10 Nov 2013 21:01:41 -0500 Subject: [PATCH 078/122] remove foo: bar from FitRows --- js/layout-modes/fit-rows.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/layout-modes/fit-rows.js b/js/layout-modes/fit-rows.js index 207b5bf..ebbf930 100644 --- a/js/layout-modes/fit-rows.js +++ b/js/layout-modes/fit-rows.js @@ -4,9 +4,7 @@ function fitRowsDefinition( LayoutMode ) { -var FitRows = LayoutMode.create( 'fitRows', { - foo: 'bar' -}); +var FitRows = LayoutMode.create('fitRows'); FitRows.prototype._resetLayout = function() { this.x = 0; From 2a01257fd69ff743c042bf2f9bf72da5036efca8 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 18 Nov 2013 23:08:46 -0500 Subject: [PATCH 079/122] tick version beta.2 --- bower.json | 2 +- js/isotope.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index b5d414d..c8b1ec5 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.1", + "version": "2.0.0-beta.2", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/js/isotope.js b/js/isotope.js index 8b5b8aa..617a854 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.1 + * Isotope v2.0.0-beta.2 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ From c119b435d8d2985c70c095499b0fd9db1ccbd618 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 19 Nov 2013 23:42:02 -0500 Subject: [PATCH 080/122] fix require path ../layout-mode --- js/layout-modes/cells-by-column.js | 2 +- js/layout-modes/cells-by-row.js | 2 +- js/layout-modes/fit-columns.js | 2 +- js/layout-modes/fit-rows.js | 2 +- js/layout-modes/horizontal.js | 2 +- js/layout-modes/masonry-horizontal.js | 2 +- js/layout-modes/masonry.js | 2 +- js/layout-modes/vertical.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/js/layout-modes/cells-by-column.js b/js/layout-modes/cells-by-column.js index a816a5b..2cf34c9 100644 --- a/js/layout-modes/cells-by-column.js +++ b/js/layout-modes/cells-by-column.js @@ -45,7 +45,7 @@ function cellsByColumnDefinition( LayoutMode ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode' + '../layout-mode' ], cellsByColumnDefinition ); } else { diff --git a/js/layout-modes/cells-by-row.js b/js/layout-modes/cells-by-row.js index bb69033..eb2d9e6 100644 --- a/js/layout-modes/cells-by-row.js +++ b/js/layout-modes/cells-by-row.js @@ -41,7 +41,7 @@ function cellsByRowDefinition( LayoutMode ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode', + '../layout-mode', 'get-size/get-size' ], cellsByRowDefinition ); diff --git a/js/layout-modes/fit-columns.js b/js/layout-modes/fit-columns.js index d0055a0..2460db8 100644 --- a/js/layout-modes/fit-columns.js +++ b/js/layout-modes/fit-columns.js @@ -47,7 +47,7 @@ function fitColumnsDefinition( LayoutMode ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode' + '../layout-mode' ], fitColumnsDefinition ); } else { diff --git a/js/layout-modes/fit-rows.js b/js/layout-modes/fit-rows.js index ebbf930..0bafc83 100644 --- a/js/layout-modes/fit-rows.js +++ b/js/layout-modes/fit-rows.js @@ -43,7 +43,7 @@ return FitRows; if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode' + '../layout-mode' ], fitRowsDefinition ); } else { diff --git a/js/layout-modes/horizontal.js b/js/layout-modes/horizontal.js index 4294419..1833933 100644 --- a/js/layout-modes/horizontal.js +++ b/js/layout-modes/horizontal.js @@ -36,7 +36,7 @@ function horizontalDefinition( LayoutMode ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode' + '../layout-mode' ], horizontalDefinition ); } else { diff --git a/js/layout-modes/masonry-horizontal.js b/js/layout-modes/masonry-horizontal.js index 734d014..9644d78 100644 --- a/js/layout-modes/masonry-horizontal.js +++ b/js/layout-modes/masonry-horizontal.js @@ -131,7 +131,7 @@ if ( typeof define === 'function' && define.amd ) { // AMD define( [ 'get-size/get-size', - '../js/layout-mode' + '../layout-mode' ], masonryHorizontalDefinition ); } else { diff --git a/js/layout-modes/masonry.js b/js/layout-modes/masonry.js index 06abd60..fed4eb2 100644 --- a/js/layout-modes/masonry.js +++ b/js/layout-modes/masonry.js @@ -44,7 +44,7 @@ function masonryDefinition( LayoutMode, Masonry ) { if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode', + '../layout-mode', 'masonry/masonry' ], masonryDefinition ); diff --git a/js/layout-modes/vertical.js b/js/layout-modes/vertical.js index 639b57c..841e291 100644 --- a/js/layout-modes/vertical.js +++ b/js/layout-modes/vertical.js @@ -32,7 +32,7 @@ return Vertical; if ( typeof define === 'function' && define.amd ) { // AMD define( [ - '../js/layout-mode' + '../layout-mode' ], verticalDefinition ); } else { From e3371b9ee11aa1f7a89942d70bee8268352821a2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 22 Nov 2013 22:44:11 -0500 Subject: [PATCH 081/122] fix requireJS path ./item and ./layout-mode; Ref #565 --- js/isotope.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 617a854..15929be 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -425,8 +425,8 @@ if ( typeof define === 'function' && define.amd ) { 'outlayer/outlayer', 'get-size/get-size', 'matches-selector/matches-selector', - './item.js', - './layout-modes.js' + './item', + './layout-mode' ], isotopeDefinition ); } else { From cc6741e3dfd5b2610f0a2ef53d79ce398138ae6b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 1 Dec 2013 14:14:41 -0500 Subject: [PATCH 082/122] reference this.isotope in LayoutMode.layout fixes bug where Masonry was not filter/sorting on layout after resize, after an insert --- examples/insert.html | 4 +++- js/layout-mode.js | 7 +++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/insert.html b/examples/insert.html index 70fcee0..817918c 100644 --- a/examples/insert.html +++ b/examples/insert.html @@ -34,11 +34,13 @@ + + + @@ -99,5 +100,14 @@
+

Masonry

+ +
+
+
a
+
b
+
c
+
+ diff --git a/test/masonry-measure-columns.js b/test/masonry-measure-columns.js new file mode 100644 index 0000000..7f1afcd --- /dev/null +++ b/test/masonry-measure-columns.js @@ -0,0 +1,39 @@ +( function() { + +'use strict'; + +test( 'Masonry.measureColumns', function() { + + var iso = new Isotope( '#masonry-measure-columns', { + itemSelector: '.item', + layoutMode: 'masonry', + transitionDuration: 0 + }); + + var msnryMode = iso.modes.masonry; + equal( msnryMode.columnWidth, 60, 'after layout, measured first element' ); + + iso.modes.masonry._getMeasurement( 'columnWidth', 'outerWidth' ); + equal( msnryMode.columnWidth, 0, '_getMeasurement, no option' ); + + iso.modes.masonry.measureColumns(); + equal( msnryMode.columnWidth, 60, 'measureColumns, no option' ); + + iso.arrange({ filter: '.c' }); + + iso.modes.masonry.measureColumns(); + equal( msnryMode.columnWidth, 60, 'measureColumns after filter first item, no option' ); + + iso.arrange({ + masonry: { columnWidth: 80 } + }); + equal( msnryMode.columnWidth, 80, '.arrange() masonry.columnWidth option set number' ); + + iso.arrange({ + masonry: { columnWidth: '.grid-sizer' } + }); + equal( msnryMode.columnWidth, 70, '.arrange() masonry.columnWidth option set selector string' ); + +}); + +})(); diff --git a/test/tests.css b/test/tests.css index b40dd19..9b86827 100644 --- a/test/tests.css +++ b/test/tests.css @@ -70,3 +70,7 @@ body { height: 40px; margin-bottom: 7px; } + +#masonry-measure-columns .grid-sizer { + width: 70px; +} From cf38640b5604e5f85e24c461a69ceda2316c7f11 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 2 Jan 2014 20:26:00 -0500 Subject: [PATCH 088/122] remove console.log; devel: false v2.0.0-beta.6 --- .jshintrc | 2 +- bower.json | 2 +- js/isotope.js | 2 +- js/layout-mode.js | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.jshintrc b/.jshintrc index c686ef2..0e3157c 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,6 +1,6 @@ { "browser": true, - "devel": true, + "devel": false, "strict": true, "undef": true, "unused": true, diff --git a/bower.json b/bower.json index f3083e3..31df5bb 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.5", + "version": "2.0.0-beta.6", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/js/isotope.js b/js/isotope.js index a80316a..f609fb4 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.5 + * Isotope v2.0.0-beta.6 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ diff --git a/js/layout-mode.js b/js/layout-mode.js index eecb6af..77b5508 100644 --- a/js/layout-mode.js +++ b/js/layout-mode.js @@ -63,7 +63,6 @@ function layoutModeDefinition( getSize, Outlayer ) { // ----- measurements ----- // LayoutMode.prototype._getMeasurement = function() { - console.log('getting measurement', this.options.columnWidth ); this.isotope._getMeasurement.apply( this, arguments ); }; From 2397a7fdde75bb5e60f633952b68b918b8320f74 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 6 Jan 2014 22:09:30 -0500 Subject: [PATCH 089/122] move other layout mode out as separate libs v2 beta.7 --- bower.json | 10 +- examples/cells-by-row.html | 3 +- examples/filter-sort.html | 3 +- examples/horizontal-layout-modes.html | 7 +- examples/masonry-horizontal.html | 9 +- js/isotope.js | 2 +- js/layout-modes/cells-by-column.js | 61 ----------- js/layout-modes/cells-by-row.js | 59 ----------- js/layout-modes/fit-columns.js | 60 ----------- js/layout-modes/horizontal.js | 49 --------- js/layout-modes/masonry-horizontal.js | 145 -------------------------- 11 files changed, 21 insertions(+), 387 deletions(-) delete mode 100644 js/layout-modes/cells-by-column.js delete mode 100644 js/layout-modes/cells-by-row.js delete mode 100644 js/layout-modes/fit-columns.js delete mode 100644 js/layout-modes/horizontal.js delete mode 100644 js/layout-modes/masonry-horizontal.js diff --git a/bower.json b/bower.json index 31df5bb..de54a3c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.6", + "version": "2.0.0-beta.7", "description": "Filter and sort magical layouts", "main": [ "js/item.js", @@ -8,8 +8,7 @@ "js/isotope.js", "js/layout-modes/vertical.js", "js/layout-modes/fit-rows.js", - "js/layout-modes/masonry.js", - "js/layout-modes/cells-by-row.js" + "js/layout-modes/masonry.js" ], "dependencies": { "get-size": "desandro/get-size", @@ -19,6 +18,11 @@ }, "devDependencies": { "doc-ready": "desandro/doc-ready", + "isotope-cells-by-column": "metafizzy/isotope-cells-by-column", + "isotope-cells-by-row": "metafizzy/isotope-cells-by-row", + "isotope-fit-columns": "metafizzy/isotope-fit-columns", + "isotope-horizontal": "metafizzy/isotope-horizontal", + "isotope-masonry-horizontal": "metafizzy/isotope-masonry-horizontal", "jquery": "1", "qunit": "1.12" } diff --git a/examples/cells-by-row.html b/examples/cells-by-row.html index e6b1b54..4a24b84 100644 --- a/examples/cells-by-row.html +++ b/examples/cells-by-row.html @@ -159,9 +159,10 @@ - + + - + + - - - + + + + - - - - + + + + + - - - - - - - - - - + + + + + + + + + + - + + + + + + + + +

require js

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + From 536947254ca525e47f45b011e51db82154e9d9fe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:40:11 -0500 Subject: [PATCH 094/122] cells-by-row asset in test --- test/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/index.html b/test/index.html index 1adc798..aba2d43 100644 --- a/test/index.html +++ b/test/index.html @@ -28,7 +28,8 @@ - + + From c2c54d054107a29eb1ee477f2dbb30b4da1bc3fe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:42:38 -0500 Subject: [PATCH 095/122] refactor updateSortData: ref #602 + add Isotope._getSorters() + add Isotope._updateItemsSortData + change updateSortData() to public method only --- js/isotope.js | 34 +++++++++++++++++++++++++--------- js/item.js | 3 +++ 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 8583c83..332642e 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -100,6 +100,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this.itemGUID = 0; // functions that sort items this._sorters = {}; + this._getSorters(); // call super Outlayer.prototype._create.call( this ); @@ -129,7 +130,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var item = items[i]; item.id = this.itemGUID++; } - this.updateSortData( items ); + this._updateItemsSortData( items ); return items; }; @@ -261,21 +262,36 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode // -------------------------- sorting -------------------------- // - Isotope.prototype.updateSortData = function( items ) { - // update sorters + /** + * @params {Array} elems + * @public + */ + Isotope.prototype.updateSortData = function( elems ) { + this._getSorters(); + // update item sort data + // default to all items if none are passed in + elems = makeArray( elems ); + var items = this.getItems( elems ); + // if no items found, update all items + items = items.length ? items : this.items; + this._updateItemsSortData( items ); + }; + + Isotope.prototype._getSorters = function() { var getSortData = this.options.getSortData; for ( var key in getSortData ) { var sorter = getSortData[ key ]; this._sorters[ key ] = mungeSorter( sorter ); } - // update item sort data - // default to all items if none are passed in - items = items || this.items; + }; + + /** + * @params {Array} items - of Isotope.Items + * @private + */ + Isotope.prototype._updateItemsSortData = function( items ) { for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; - if ( item.isIgnored ) { - continue; - } item.updateSortData(); } }; diff --git a/js/item.js b/js/item.js index 3a04fde..de5bac5 100644 --- a/js/item.js +++ b/js/item.js @@ -25,6 +25,9 @@ Item.prototype._create = function() { }; Item.prototype.updateSortData = function() { + if ( this.isIgnored ) { + return; + } // default sorters this.sortData.id = this.id; // for backward compatibility From 0372298773a65bda323e68db78f21df5258c1b95 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:50:14 -0500 Subject: [PATCH 096/122] add Isotope.sortDataParsers Allows for user to add custom parsers fort getSortData shortcut strings --- js/isotope.js | 35 ++++++++++------------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 332642e..f1b0f2d 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -319,7 +319,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var attr = attrMatch && attrMatch[1]; var getValue = getValueGetter( attr, query ); // use second argument as a parser - var parser = getParser( args[1] ); + var parser = Isotope.sortDataParsers[ args[1] ]; // parse the value, if there was a parser sorter = parser ? function( elem ) { return elem && parser( getValue( elem ) ); @@ -350,33 +350,18 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode return getValue; } - // return a parser function if arg matches - function getParser( arg ) { - var parser; - switch ( arg ) { - case 'parseInt' : - parser = function( val ) { - return parseInt( val, 10 ); - }; - break; - case 'parseFloat' : - parser = function( val ) { - return parseFloat( val ); - }; - break; - default : - // just return val if parser isn't one of these - // TODO - console log that that parser doesn't exist - parser = function( val ) { - return val; - }; - } - return parser; - } - return mungeSorter; })(); + // parsers used in getSortData shortcut strings + Isotope.sortDataParsers = { + 'parseInt': function( val ) { + return parseInt( val, 10 ); + }, + 'parseFloat': function( val ) { + return parseFloat( val ); + } + }; // ----- sort method ----- // From a04ada1ea67c5b3a0b94eb1ee89758b339036647 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:53:09 -0500 Subject: [PATCH 097/122] refactor _getFilterTest --- js/isotope.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index f1b0f2d..79ce537 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -243,21 +243,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode // get a jQuery, function, or a matchesSelector test given the filter Isotope.prototype._getFilterTest = function( filter ) { - var test; if ( jQuery && this.options.isJQueryFiltering ) { - test = function( item ) { + // use jQuery + return function( item ) { return jQuery( item.element ).is( filter ); }; - } else if ( typeof filter === 'function' ) { - test = function( item ) { + } + if ( typeof filter === 'function' ) { + // use filter as function + return function( item ) { return filter( item.element ); }; - } else { - test = function( item ) { - return matchesSelector( item.element, filter ); - }; } - return test; + // default, use filter as selector string + return function( item ) { + return matchesSelector( item.element, filter ); + }; }; // -------------------------- sorting -------------------------- // From 60ec752e2e01849aa5f8a4fc2bc76c4ab9aea932 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 19:15:48 -0500 Subject: [PATCH 098/122] add Isotope._noTransition; bit o' refactor --- js/isotope.js | 45 ++++++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 79ce537..9eee186 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -225,17 +225,16 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } } - // HACK - // disable transition if instant - var _transitionDuration = this.options.transitionDuration; - if ( this._isInstant ) { - this.options.transitionDuration = 0; + var _this = this; + function hideReveal() { + _this.reveal( hiddenMatched ); + _this.hide( visibleUnmatched ); } - this.reveal( hiddenMatched ); - this.hide( visibleUnmatched ); - // set back + if ( this._isInstant ) { - this.options.transitionDuration = _transitionDuration; + this._noTransition( hideReveal ); + } else { + hideReveal(); } return matches; @@ -479,12 +478,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }; Isotope.prototype._filterRevealAdded = function( items ) { - // disable transition for filtering - var transitionDuration = this.options.transitionDuration; - this.options.transitionDuration = 0; - var filteredItems = this._filter( items ); - // re-enable transition for reveal - this.options.transitionDuration = transitionDuration; + var filteredItems = this._noTransition( function() { + return this._filter( items ); + }); // layout and reveal just the new items this.layoutItems( filteredItems, true ); this.reveal( filteredItems ); @@ -521,6 +517,25 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } }; + /** + * trigger fn without transition + * kind of hacky to have this in the first place + * @param {Function} fn + * @returns ret + * @private + */ + Isotope.prototype._noTransition = function( fn ) { + // save transitionDuration before disabling + var transitionDuration = this.options.transitionDuration; + // disable transition + this.options.transitionDuration = 0; + // do it + var returnValue = fn.call( this ); + // re-enable transition for reveal + this.options.transitionDuration = transitionDuration; + return returnValue; + }; + // ----- ----- // return Isotope; From cbb6543bcb7e9759f45fb9a3e4e7478f5226779c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 20:00:54 -0500 Subject: [PATCH 099/122] insert only transitions reveal for new items requires Outlayer that respects item.isLayoutInstant --- examples/insert.html | 18 ++++++++++++------ js/isotope.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/examples/insert.html b/examples/insert.html index 817918c..b611233 100644 --- a/examples/insert.html +++ b/examples/insert.html @@ -12,7 +12,7 @@

insert

-

+

49
@@ -49,6 +49,7 @@ docReady( function() { var container = document.querySelector('#container'); var iso = new Isotope( container, { layoutMode: 'masonry', + transitionDuration: '0.8s', getSortData: { b: 'b parseInt' }, @@ -59,13 +60,18 @@ docReady( function() { } }); + function getAppendedItems() { + return [ appendItem(), appendItem(), appendItem() ]; + } + eventie.bind( document.querySelector('#insert'), 'click', function() { // append 3 new items - var appendedItems = []; - appendedItems.push( appendItem() ); - appendedItems.push( appendItem() ); - appendedItems.push( appendItem() ); - iso.insert( appendedItems ); + iso.insert( getAppendedItems() ); + }); + + eventie.bind( document.querySelector('#append'), 'click', function() { + // append 3 new items + iso.appended( getAppendedItems() ); }); function appendItem() { diff --git a/js/isotope.js b/js/isotope.js index 9eee186..95223df 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -496,7 +496,35 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode if ( !items.length ) { return; } + // filter new stuff + /* + // this way adds hides new filtered items with NO transition + // so user can't see if new hidden items have been inserted + var filteredInsertItems; + this._noTransition( function() { + filteredInsertItems = this._filter( items ); + // hide all new items + this.hide( filteredInsertItems ); + }); + // */ + // this way hides new filtered items with transition + // so user at least sees that something has been added + var filteredInsertItems = this._filter( items ); + // hide all newitems + this._noTransition( function() { + this.hide( filteredInsertItems ); + }); + // */ + // set flag + for ( var i=0, len = items.length; i < len; i++ ) { + items[i].isLayoutInstant = true; + } this.arrange(); + // reset flag + for ( i=0; i < len; i++ ) { + delete items[i].isLayoutInstant; + } + this.reveal( filteredInsertItems ); }; var _remove = Isotope.prototype.remove; From ca70fd7b9c42124dae409df324c99bd543aaaa74 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 22 Jan 2014 09:47:27 -0500 Subject: [PATCH 100/122] insert appends elements Fixes #607 --- examples/insert.html | 15 ++++++++------- js/isotope.js | 9 ++++++++- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/examples/insert.html b/examples/insert.html index b611233..39f3c50 100644 --- a/examples/insert.html +++ b/examples/insert.html @@ -60,25 +60,26 @@ docReady( function() { } }); - function getAppendedItems() { - return [ appendItem(), appendItem(), appendItem() ]; - } - eventie.bind( document.querySelector('#insert'), 'click', function() { // append 3 new items - iso.insert( getAppendedItems() ); + iso.insert( [ getItem(), getItem(), getItem() ] ); }); eventie.bind( document.querySelector('#append'), 'click', function() { // append 3 new items - iso.appended( getAppendedItems() ); + iso.appended( [ appendItem(), appendItem(), appendItem() ] ); }); - function appendItem() { + function getItem() { var item = document.createElement('div'); item.className = 'item'; var num = Math.floor( Math.random() * 100 ); item.innerHTML = '' + num + ''; + return item; + } + + function appendItem() { + var item = getItem(); container.appendChild( item ); return item; } diff --git a/js/isotope.js b/js/isotope.js index 95223df..d9a6493 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -496,6 +496,13 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode if ( !items.length ) { return; } + // append item elements + var i, item; + var len = items.length; + for ( i=0; i < len; i++ ) { + item = items[i]; + this.element.appendChild( item.element ); + } // filter new stuff /* // this way adds hides new filtered items with NO transition @@ -516,7 +523,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }); // */ // set flag - for ( var i=0, len = items.length; i < len; i++ ) { + for ( i=0; i < len; i++ ) { items[i].isLayoutInstant = true; } this.arrange(); From f94222d185afd2bf277abddc948e82f74e727692 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 22 Jan 2014 18:21:00 -0500 Subject: [PATCH 101/122] require Outlayer v1.1.10 remove Isotope.prototype.settings.item --- bower.json | 2 +- js/isotope.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index de54a3c..d86d7d1 100644 --- a/bower.json +++ b/bower.json @@ -13,8 +13,8 @@ "dependencies": { "get-size": "desandro/get-size", "matches-selector": "desandro/matches-selector", - "outlayer": "metafizzy/outlayer#>=1.1 <2", "masonry": ">=3.1" + "outlayer": ">=1.1.10 <2", }, "devDependencies": { "doc-ready": "desandro/doc-ready", diff --git a/js/isotope.js b/js/isotope.js index d9a6493..9ba6c84 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -93,7 +93,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode sortAscending: true }); - Isotope.Item = Isotope.prototype.settings.item = Item; + Isotope.Item = Item; Isotope.LayoutMode = LayoutMode; Isotope.prototype._create = function() { From 65b315258feb02c153bc91504b6139897880e580 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 22 Jan 2014 18:25:25 -0500 Subject: [PATCH 102/122] tick version 2.0.0-beta.8 + add bower ignores + set version cap on dependencies --- bower.json | 15 ++++++++++----- js/isotope.js | 2 +- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/bower.json b/bower.json index d86d7d1..464270c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.7", + "version": "2.0.0-beta.8", "description": "Filter and sort magical layouts", "main": [ "js/item.js", @@ -11,10 +11,10 @@ "js/layout-modes/masonry.js" ], "dependencies": { - "get-size": "desandro/get-size", - "matches-selector": "desandro/matches-selector", - "masonry": ">=3.1" + "get-size": "desandro/get-size#>=1 <2", + "matches-selector": "desandro/matches-selector#>=1 <2", "outlayer": ">=1.1.10 <2", + "masonry": ">=3.1 <4" }, "devDependencies": { "doc-ready": "desandro/doc-ready", @@ -25,5 +25,10 @@ "isotope-masonry-horizontal": "metafizzy/isotope-masonry-horizontal", "jquery": "1", "qunit": "1.12" - } + }, + "ignore": [ + "test/", + "examples/", + "**/.*" + ] } diff --git a/js/isotope.js b/js/isotope.js index 9ba6c84..43d3ada 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.7 + * Isotope v2.0.0-beta.8 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ From d731eb0541f0387ef701ff13b3caca0f56eeb18c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 3 Mar 2014 07:51:46 -0500 Subject: [PATCH 103/122] include default layout modes for RequireJS Ref #578 --- examples/js/require-js.js | 26 ++++++++++++-------------- js/isotope.js | 6 +++++- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/examples/js/require-js.js b/examples/js/require-js.js index 7c5c899..591e974 100644 --- a/examples/js/require-js.js +++ b/examples/js/require-js.js @@ -16,22 +16,19 @@ requirejs( [ '../js/isotope', '../js/layout-modes/masonry' ], function( Isotope // */ // isotope.pkgd.js -/* -requirejs( [ 'require', 'js/isotope.pkgd.js' ], - function( require, Isotope ) { - require( [ 'isotope/js/layout-modes/fit-rows' ], function() { - new Isotope( '#basic', { - layoutMode: 'fitRows', - masonry: { - columnWidth: 60 - } - }); - }); - } -); +// /* +requirejs( [ 'js/isotope.pkgd.js' ], function( Isotope ) { + new Isotope( '#basic', { + layoutMode: 'masonry', + masonry: { + columnWidth: 60 + } + }); +}); // */ // isotope.pkgd.js and jQuery +/* requirejs.config({ paths: { jquery: '../../bower_components/jquery/jquery' @@ -42,7 +39,6 @@ requirejs( [ 'require', 'jquery', 'js/isotope.pkgd.js' ], function( require, $, Isotope ) { require( [ 'jquery-bridget/jquery.bridget', - 'isotope/js/layout-modes/masonry' ], function() { $.bridget( 'isotope', Isotope ); @@ -54,3 +50,5 @@ requirejs( [ 'require', 'jquery', 'js/isotope.pkgd.js' ], } ); }); + +// */ diff --git a/js/isotope.js b/js/isotope.js index 43d3ada..32b67ca 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -585,7 +585,11 @@ if ( typeof define === 'function' && define.amd ) { 'get-size/get-size', 'matches-selector/matches-selector', './item', - './layout-mode' + './layout-mode', + // include default layout modes + './layout-modes/masonry', + './layout-modes/fit-rows', + './layout-modes/vertical' ], isotopeDefinition ); } else { From ebe8ee487eb5a314620ab4ed382dc19b16f9ac96 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 3 Mar 2014 08:08:28 -0500 Subject: [PATCH 104/122] submitting issues copy --- CONTRIBUTING.mdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.mdown b/CONTRIBUTING.mdown index a5f94b0..1245647 100644 --- a/CONTRIBUTING.mdown +++ b/CONTRIBUTING.mdown @@ -6,8 +6,8 @@ All bug reports and problem issues require a reduced test case. See [CSS Tricks + A reduced test case is an isolated example that demonstrates the bug or issue. + It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling. -+ Any one of the [CodePen examples](http://codepen.io/desandro/tag/masonry-docs) in [the docs](http://masonry.desandro.com) may be forked and used to build your reduced test case. ++ Any one of the [CodePen examples](http://codepen.io/desandro/tag/isotope-docs) in [the docs](http://isotope.metafizzy.co) may be forked and used to build your reduced test case. + A link to your site is **not** a reduced test case. + Until you provide a reduced test case, your issue will be closed. -I realize this guideline may seem a little harsh, but it dramatically helps both of you and me. Reduced test cases help you identify the issue at hand and understand your own code. On my side, they greatly reduce the amount of time spent resolving the issue. +Reduced test cases dramatically help both you and me. They help you identify the issue at hand and understand your own code. On my side, they greatly reduce the amount of time spent resolving the issue. From cdc0bdbf9a4791d5de9fe835a4d7b36f599a79e5 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 5 Mar 2014 22:26:11 -0500 Subject: [PATCH 105/122] remove settings isOrigin options already done in mode() --- js/isotope.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 32b67ca..a46b123 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -429,11 +429,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }; Isotope.prototype._manageStamp = function( stamp ) { - var mode = this._mode(); - // HACK copy over some options - mode.options.isOriginLeft = this.options.isOriginLeft; - mode.options.isOriginTop = this.options.isOriginTop; - mode._manageStamp( stamp ); + this._mode()._manageStamp( stamp ); }; Isotope.prototype._getContainerSize = function() { From 9b845ca629d5a825bdba8cc44a151e8ade063411 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 5 Mar 2014 22:27:57 -0500 Subject: [PATCH 106/122] use needsResizeLayout in Outlayer v1.2 --- bower.json | 4 ++-- js/isotope.js | 4 ++-- js/layout-mode.js | 10 +++------- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/bower.json b/bower.json index 464270c..a2c3b7f 100644 --- a/bower.json +++ b/bower.json @@ -13,8 +13,8 @@ "dependencies": { "get-size": "desandro/get-size#>=1 <2", "matches-selector": "desandro/matches-selector#>=1 <2", - "outlayer": ">=1.1.10 <2", - "masonry": ">=3.1 <4" + "outlayer": "v1.2", + "masonry": "3.1.x" }, "devDependencies": { "doc-ready": "desandro/doc-ready", diff --git a/js/isotope.js b/js/isotope.js index a46b123..1e18661 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -436,8 +436,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode return this._mode()._getContainerSize(); }; - Isotope.prototype.resize = function() { - this._mode().resize(); + Isotope.prototype.needsResizeLayout = function() { + return this._mode().needsResizeLayout(); }; // -------------------------- adding & removing -------------------------- // diff --git a/js/layout-mode.js b/js/layout-mode.js index 77b5508..1b96da6 100644 --- a/js/layout-mode.js +++ b/js/layout-mode.js @@ -29,7 +29,7 @@ function layoutModeDefinition( getSize, Outlayer ) { '_manageStamp', '_getContainerSize', '_getElementOffset', - 'resize' + 'needsResizeLayout' ]; for ( var i=0, len = facadeMethods.length; i < len; i++ ) { @@ -47,17 +47,13 @@ function layoutModeDefinition( getSize, Outlayer ) { // ----- ----- // // for horizontal layout modes, check vertical size - LayoutMode.prototype.resizeVertical = function() { + LayoutMode.prototype.needsVerticalResizeLayout = function() { // don't trigger if size did not change var size = getSize( this.isotope.element ); // check that this.size and size are there // IE8 triggers resize on body size change, so they might not be var hasSizes = this.isotope.size && size; - if ( hasSizes && size.innerHeight === this.isotope.size.innerHeight ) { - return; - } - - this.isotope.layout(); + return hasSizes && size.innerHeight !== this.isotope.size.innerHeight; }; // ----- measurements ----- // From 95cfeda21cd91bb0d60f3b0e95bafa1e1977fe39 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 5 Mar 2014 22:49:57 -0500 Subject: [PATCH 107/122] tick version 2.0.0-beta.9 --- bower.json | 2 +- js/isotope.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index a2c3b7f..3051cf3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.8", + "version": "2.0.0-beta.9", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/js/isotope.js b/js/isotope.js index 1e18661..7dbd527 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.8 + * Isotope v2.0.0-beta.9 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ From cb94da90e0ba29c73f4358e529fc12b601330b03 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 6 Mar 2014 21:44:54 -0500 Subject: [PATCH 108/122] require js example --- examples/js/require-js.js | 36 +++++++++++++++++++++++++++++++----- examples/require-js.html | 2 +- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/examples/js/require-js.js b/examples/js/require-js.js index 591e974..cdb7218 100644 --- a/examples/js/require-js.js +++ b/examples/js/require-js.js @@ -6,7 +6,7 @@ requirejs.config({ baseUrl: '../bower_components' }); -requirejs( [ '../js/isotope', '../js/layout-modes/masonry' ], function( Isotope ) { +requirejs( [ '../js/isotope' ], function( Isotope ) { new Isotope( '#basic', { masonry: { columnWidth: 60 @@ -16,7 +16,7 @@ requirejs( [ '../js/isotope', '../js/layout-modes/masonry' ], function( Isotope // */ // isotope.pkgd.js -// /* +/* requirejs( [ 'js/isotope.pkgd.js' ], function( Isotope ) { new Isotope( '#basic', { layoutMode: 'masonry', @@ -27,18 +27,43 @@ requirejs( [ 'js/isotope.pkgd.js' ], function( Isotope ) { }); // */ -// isotope.pkgd.js and jQuery +// bower components and jQuery /* requirejs.config({ + baseUrl: '../bower_components', paths: { - jquery: '../../bower_components/jquery/jquery' + jquery: 'jquery/jquery' } }) +requirejs( [ + 'jquery', + 'isotope/js/isotope', + 'jquery-bridget/jquery.bridget' + ], + function( $, Isotope ) { + $.bridget( 'isotope', Isotope ); + $('#basic').isotope({ + masonry: { + columnWidth: 60 + } + }); +}); + +// */ + +// isotope.pkgd.js and jQuery +// /* +requirejs.config({ + paths: { + jquery: '../../bower_components/jquery/jquery' + } +}); + requirejs( [ 'require', 'jquery', 'js/isotope.pkgd.js' ], function( require, $, Isotope ) { require( [ - 'jquery-bridget/jquery.bridget', + 'jquery-bridget/jquery.bridget' ], function() { $.bridget( 'isotope', Isotope ); @@ -52,3 +77,4 @@ requirejs( [ 'require', 'jquery', 'js/isotope.pkgd.js' ], }); // */ + diff --git a/examples/require-js.html b/examples/require-js.html index b9223b4..4617a7c 100644 --- a/examples/require-js.html +++ b/examples/require-js.html @@ -6,7 +6,7 @@ require js - + From 32070755fde2cca75c59b9bd3699f0376f1526ca Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 7 Mar 2014 07:49:27 -0500 Subject: [PATCH 109/122] add back isOriginLeft & isOriginTop for MasonryMode stamp stamp example --- examples/stamps.html | 49 ++++++++++++++++++++++---------------- js/layout-modes/masonry.js | 8 +++++++ 2 files changed, 36 insertions(+), 21 deletions(-) diff --git a/examples/stamps.html b/examples/stamps.html index 303113f..ee09cee 100644 --- a/examples/stamps.html +++ b/examples/stamps.html @@ -83,41 +83,48 @@
- - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/js/layout-modes/masonry.js b/js/layout-modes/masonry.js index 8b88d4e..58865af 100644 --- a/js/layout-modes/masonry.js +++ b/js/layout-modes/masonry.js @@ -45,6 +45,14 @@ function masonryDefinition( LayoutMode, Masonry ) { measureColumns.call( this ); }; + // HACK copy over isOriginLeft/Top options + var _manageStamp = MasonryMode.prototype._manageStamp; + MasonryMode.prototype._manageStamp = function() { + this.options.isOriginLeft = this.isotope.options.isOriginLeft; + this.options.isOriginTop = this.isotope.options.isOriginTop; + _manageStamp.apply( this, arguments ); + }; + return MasonryMode; } From 365559da73cabc10b1e94d523b1934d52f4c7f68 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 9 Mar 2014 10:48:31 -0400 Subject: [PATCH 110/122] add Grunt file from isotope docs --- .gitignore | 2 +- Gruntfile.js | 184 +++++++++++++++++++++++++++++++++++++++++++++++++++ bower.json | 6 +- package.json | 19 ++++++ 4 files changed, 209 insertions(+), 2 deletions(-) create mode 100644 Gruntfile.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index c24a0aa..927e22e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ _site isotope-site.zip components/ bower_components/ -isotope.pkgd.js +node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..a051b15 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,184 @@ + +var getBannerComment = require('./tasks/utils/get-banner-comment.js'); + +// -------------------------- grunt -------------------------- // + +module.exports = function( grunt ) { + + var banner = getBannerComment( grunt ); + + grunt.initConfig({ + // ----- global settings ----- // + namespace: 'isotope', + dataDir: 'tasks/data', + + // ----- tasks settings ----- // + + jshint: { + docs: [ 'js/controller.js', 'js/*/*.js' ], + options: grunt.file.readJSON('js/.jshintrc') + }, + + requirejs: { + pkgd: { + options: { + baseUrl: 'bower_components', + include: [ + 'jquery-bridget/jquery.bridget', + 'isotope/js/isotope' + ], + out: 'build/isotope.pkgd.js', + optimize: 'none', + paths: { + jquery: 'empty:' + }, + wrap: { + start: banner + } + } + } + }, + + concat: { + 'docs-js': { + src: [ + // docs js + 'js/controller.js', + 'js/pages/*.js' + ], + dest: 'build/js/isotope-docs.js' + }, + + 'docs-css': { + src: [ 'css/*.css', '!css/isotope-docs.css' ], + dest: 'build/css/isotope-docs.css' + } + + }, + + uglify: { + pkgd: { + files: { + 'build/isotope.pkgd.min.js': [ 'build/isotope.pkgd.js' ] + }, + options: { + banner: banner + } + }, + 'docs': { + files: { + 'build/js/isotope-docs.min.js': [ 'build/js/isotope-docs.js' ] + } + } + }, + + // ----- handlebars templating ----- // + template: { + docs: { + files: { + 'build/': 'content/**/*.*' + }, + options: { + templates: 'templates/*.mustache', + defaultTemplate: 'page', + dataFiles: "data/*.json", + partialFiles: { + 'submitting-issues': 'bower_components/isotope/CONTRIBUTING.mdown' + }, + helpers: { + firstValue: function( ary ) { + return ary[0]; + }, + plusOne: function( str ) { + return parseInt( str, 10 ) + 1; + } + } + } + } + }, + + // ----- copy ----- // + copy: { + "public": { + files: [ + { + expand: true, // enable dynamic options + cwd: 'public/', // set cwd, excludes it in build path + src: [ '**', '!.htaccess' ], + dest: 'build/' + } + ] + }, + css: { + files: [ + { + expand: true, // enable dynamic options + cwd: 'css/', // set cwd, excludes it in build path + src: [ '*' ], + dest: 'build/css/' + } + ] + }, + js: { + files: [ + { + expand: true, // enable dynamic options + cwd: 'js/', // set cwd, excludes it in build path + src: [ '**' ], + dest: 'build/js/' + } + ] + }, + bowerSources: { + // additional sources will be set in bower-list-map + src: [ + 'bower_components/jquery/jquery.min.js' + ], + dest: 'build/' + } + }, + + + watch: { + content: { + files: [ 'content/**/*.*', 'templates/*.mustache' ], + tasks: [ 'template' ] + }, + "public": { + files: [ 'public/**' ], + tasks: [ 'copy:public' ] + }, + css: { + files: [ 'css/*' ], + tasks: [ 'copy:css' ] + }, + js: { + files: [ 'js/**' ], + tasks: [ 'copy:js' ] + } + } + + }); + + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-requirejs'); + grunt.loadNpmTasks('grunt-fizzy-docs'); + + grunt.loadTasks('tasks/'); + + grunt.registerTask( 'default', [ + 'jshint', + 'requirejs', + 'pkgd-edit', + 'int-bower', + 'concat', + 'uglify', + 'template', + 'copy' + ]); + +}; diff --git a/bower.json b/bower.json index 3051cf3..a30b79a 100644 --- a/bower.json +++ b/bower.json @@ -29,6 +29,10 @@ "ignore": [ "test/", "examples/", - "**/.*" + "**/.*", + "tasks/", + "Gruntfile.js", + "package.json", + "notes.md" ] } diff --git a/package.json b/package.json new file mode 100644 index 0000000..dcee329 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "isotope", + "version": "2.0.0-beta.9", + "description": "Filter and sort magical layouts", + "devDependencies": { + "grunt": "~0.4.0", + "grunt-contrib-concat": "~0.1.3", + "grunt-contrib-copy": "~0.4.0", + "grunt-contrib-jshint": "~0.4.1", + "grunt-contrib-uglify": "~0.1.1", + "grunt-contrib-watch": "~0.3.1", + "grunt-requirejs": "~0.4.0", + "grunt-fizzy-docs": "git://github.com/metafizzy/grunt-fizzy-docs.git" + }, + "repository": { + "type": "git", + "url": "git://github.com/desandro/isotope.git" + } +} From 56f9ba2af818d9a021d9ba863072347ceb231495 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 9 Mar 2014 11:08:21 -0400 Subject: [PATCH 111/122] build dist/ file with Grunt Fixes #635 remove unnecessary Grunt options fix for jsHint --- .tm_properties | 2 +- Gruntfile.js | 153 +- bower.json | 1 - dist/isotope.pkgd.js | 3898 ++++++++++++++++++++++++++++++++++++++ dist/isotope.pkgd.min.js | 8 + js/isotope.js | 3 +- 6 files changed, 3937 insertions(+), 128 deletions(-) create mode 100644 dist/isotope.pkgd.js create mode 100644 dist/isotope.pkgd.min.js diff --git a/.tm_properties b/.tm_properties index ca3a08f..e5df628 100644 --- a/.tm_properties +++ b/.tm_properties @@ -1,3 +1,3 @@ softTabs = true tabSize = 2 -excludeInFileChooser = "{$exclude,_site/*,bower_components}" +excludeInFileChooser = "{$exclude,_site/*,bower_components,node_modules}" diff --git a/Gruntfile.js b/Gruntfile.js index a051b15..4026fa2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,11 +1,16 @@ - -var getBannerComment = require('./tasks/utils/get-banner-comment.js'); +/*jshint node: true, strict: false */ // -------------------------- grunt -------------------------- // module.exports = function( grunt ) { - var banner = getBannerComment( grunt ); + var banner = ( function() { + var src = grunt.file.read('js/isotope.js'); + var re = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*'); + var matches = src.match( re ); + var banner = matches[0].replace( 'Isotope', 'Isotope PACKAGED' ); + return banner; + })(); grunt.initConfig({ // ----- global settings ----- // @@ -15,8 +20,8 @@ module.exports = function( grunt ) { // ----- tasks settings ----- // jshint: { - docs: [ 'js/controller.js', 'js/*/*.js' ], - options: grunt.file.readJSON('js/.jshintrc') + docs: [ 'js/**/*.js' ], + options: grunt.file.readJSON('.jshintrc') }, requirejs: { @@ -27,9 +32,10 @@ module.exports = function( grunt ) { 'jquery-bridget/jquery.bridget', 'isotope/js/isotope' ], - out: 'build/isotope.pkgd.js', + out: 'dist/isotope.pkgd.js', optimize: 'none', paths: { + isotope: '../', jquery: 'empty:' }, wrap: { @@ -39,146 +45,43 @@ module.exports = function( grunt ) { } }, - concat: { - 'docs-js': { - src: [ - // docs js - 'js/controller.js', - 'js/pages/*.js' - ], - dest: 'build/js/isotope-docs.js' - }, - - 'docs-css': { - src: [ 'css/*.css', '!css/isotope-docs.css' ], - dest: 'build/css/isotope-docs.css' - } - - }, - uglify: { pkgd: { files: { - 'build/isotope.pkgd.min.js': [ 'build/isotope.pkgd.js' ] + 'dist/isotope.pkgd.min.js': [ 'dist/isotope.pkgd.js' ] }, options: { banner: banner } - }, - 'docs': { - files: { - 'build/js/isotope-docs.min.js': [ 'build/js/isotope-docs.js' ] - } - } - }, - - // ----- handlebars templating ----- // - template: { - docs: { - files: { - 'build/': 'content/**/*.*' - }, - options: { - templates: 'templates/*.mustache', - defaultTemplate: 'page', - dataFiles: "data/*.json", - partialFiles: { - 'submitting-issues': 'bower_components/isotope/CONTRIBUTING.mdown' - }, - helpers: { - firstValue: function( ary ) { - return ary[0]; - }, - plusOne: function( str ) { - return parseInt( str, 10 ) + 1; - } - } - } - } - }, - - // ----- copy ----- // - copy: { - "public": { - files: [ - { - expand: true, // enable dynamic options - cwd: 'public/', // set cwd, excludes it in build path - src: [ '**', '!.htaccess' ], - dest: 'build/' - } - ] - }, - css: { - files: [ - { - expand: true, // enable dynamic options - cwd: 'css/', // set cwd, excludes it in build path - src: [ '*' ], - dest: 'build/css/' - } - ] - }, - js: { - files: [ - { - expand: true, // enable dynamic options - cwd: 'js/', // set cwd, excludes it in build path - src: [ '**' ], - dest: 'build/js/' - } - ] - }, - bowerSources: { - // additional sources will be set in bower-list-map - src: [ - 'bower_components/jquery/jquery.min.js' - ], - dest: 'build/' - } - }, - - - watch: { - content: { - files: [ 'content/**/*.*', 'templates/*.mustache' ], - tasks: [ 'template' ] - }, - "public": { - files: [ 'public/**' ], - tasks: [ 'copy:public' ] - }, - css: { - files: [ 'css/*' ], - tasks: [ 'copy:css' ] - }, - js: { - files: [ 'js/**' ], - tasks: [ 'copy:js' ] } } }); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-requirejs'); - grunt.loadNpmTasks('grunt-fizzy-docs'); - grunt.loadTasks('tasks/'); + grunt.registerTask( 'pkgd-edit', function() { + var outFile = grunt.config.get('requirejs.pkgd.options.out'); + var contents = grunt.file.read( outFile ); + // get requireJS definition code + var definitionRE = /define\(\s*'isotope\/js\/isotope'(.|\n)+isotopeDefinition\s*\)/; + var definition = contents.match( definitionRE )[0]; + // remove name module + var fixDefinition = definition.replace( "'isotope/js/isotope',", '' ) + // ./item -> isotope/js/item + .replace( /'.\//g, "'isotope/js/" ); + contents = contents.replace( definition, fixDefinition ); + grunt.file.write( outFile, contents ); + grunt.log.writeln( 'Edited ' + outFile ); + }); grunt.registerTask( 'default', [ 'jshint', 'requirejs', 'pkgd-edit', - 'int-bower', - 'concat', - 'uglify', - 'template', - 'copy' + 'uglify' ]); }; diff --git a/bower.json b/bower.json index a30b79a..375afa9 100644 --- a/bower.json +++ b/bower.json @@ -30,7 +30,6 @@ "test/", "examples/", "**/.*", - "tasks/", "Gruntfile.js", "package.json", "notes.md" diff --git a/dist/isotope.pkgd.js b/dist/isotope.pkgd.js new file mode 100644 index 0000000..fb76bc2 --- /dev/null +++ b/dist/isotope.pkgd.js @@ -0,0 +1,3898 @@ +/*! + * Isotope PACKAGED v2.0.0-beta.9 + * Magical sorting and filtering layouts + * http://isotope.metafizzy.co + */ + +/** + * Bridget makes jQuery widgets + * v1.0.1 + */ + +( function( window ) { + + + +// -------------------------- utils -------------------------- // + +var slice = Array.prototype.slice; + +function noop() {} + +// -------------------------- definition -------------------------- // + +function defineBridget( $ ) { + +// bail if no jQuery +if ( !$ ) { + return; +} + +// -------------------------- addOptionMethod -------------------------- // + +/** + * adds option method -> $().plugin('option', {...}) + * @param {Function} PluginClass - constructor class + */ +function addOptionMethod( PluginClass ) { + // don't overwrite original option method + if ( PluginClass.prototype.option ) { + return; + } + + // option setter + PluginClass.prototype.option = function( opts ) { + // bail out if not an object + if ( !$.isPlainObject( opts ) ){ + return; + } + this.options = $.extend( true, this.options, opts ); + }; +} + + +// -------------------------- plugin bridge -------------------------- // + +// helper function for logging errors +// $.error breaks jQuery chaining +var logError = typeof console === 'undefined' ? noop : + function( message ) { + console.error( message ); + }; + +/** + * jQuery plugin bridge, access methods like $elem.plugin('method') + * @param {String} namespace - plugin name + * @param {Function} PluginClass - constructor class + */ +function bridge( namespace, PluginClass ) { + // add to jQuery fn namespace + $.fn[ namespace ] = function( options ) { + if ( typeof options === 'string' ) { + // call plugin method when first argument is a string + // get arguments for method + var args = slice.call( arguments, 1 ); + + for ( var i=0, len = this.length; i < len; i++ ) { + var elem = this[i]; + var instance = $.data( elem, namespace ); + if ( !instance ) { + logError( "cannot call methods on " + namespace + " prior to initialization; " + + "attempted to call '" + options + "'" ); + continue; + } + if ( !$.isFunction( instance[options] ) || options.charAt(0) === '_' ) { + logError( "no such method '" + options + "' for " + namespace + " instance" ); + continue; + } + + // trigger method with arguments + var returnValue = instance[ options ].apply( instance, args ); + + // break look and return first value if provided + if ( returnValue !== undefined ) { + return returnValue; + } + } + // return this if no return value + return this; + } else { + return this.each( function() { + var instance = $.data( this, namespace ); + if ( instance ) { + // apply options & init + instance.option( options ); + instance._init(); + } else { + // initialize new instance + instance = new PluginClass( this, options ); + $.data( this, namespace, instance ); + } + }); + } + }; + +} + +// -------------------------- bridget -------------------------- // + +/** + * converts a Prototypical class into a proper jQuery plugin + * the class must have a ._init method + * @param {String} namespace - plugin name, used in $().pluginName + * @param {Function} PluginClass - constructor class + */ +$.bridget = function( namespace, PluginClass ) { + addOptionMethod( PluginClass ); + bridge( namespace, PluginClass ); +}; + +return $.bridget; + +} + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'jquery-bridget/jquery.bridget',[ 'jquery' ], defineBridget ); +} else { + // get jquery from browser global + defineBridget( window.jQuery ); +} + +})( window ); + +/*! + * eventie v1.0.5 + * event binding helper + * eventie.bind( elem, 'click', myFn ) + * eventie.unbind( elem, 'click', myFn ) + * MIT license + */ + +/*jshint browser: true, undef: true, unused: true */ +/*global define: false, module: false */ + +( function( window ) { + + + +var docElem = document.documentElement; + +var bind = function() {}; + +function getIEEvent( obj ) { + var event = window.event; + // add event.target + event.target = event.target || event.srcElement || obj; + return event; +} + +if ( docElem.addEventListener ) { + bind = function( obj, type, fn ) { + obj.addEventListener( type, fn, false ); + }; +} else if ( docElem.attachEvent ) { + bind = function( obj, type, fn ) { + obj[ type + fn ] = fn.handleEvent ? + function() { + var event = getIEEvent( obj ); + fn.handleEvent.call( fn, event ); + } : + function() { + var event = getIEEvent( obj ); + fn.call( obj, event ); + }; + obj.attachEvent( "on" + type, obj[ type + fn ] ); + }; +} + +var unbind = function() {}; + +if ( docElem.removeEventListener ) { + unbind = function( obj, type, fn ) { + obj.removeEventListener( type, fn, false ); + }; +} else if ( docElem.detachEvent ) { + unbind = function( obj, type, fn ) { + obj.detachEvent( "on" + type, obj[ type + fn ] ); + try { + delete obj[ type + fn ]; + } catch ( err ) { + // can't delete window object properties + obj[ type + fn ] = undefined; + } + }; +} + +var eventie = { + bind: bind, + unbind: unbind +}; + +// ----- module definition ----- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'eventie/eventie',eventie ); +} else if ( typeof exports === 'object' ) { + // CommonJS + module.exports = eventie; +} else { + // browser global + window.eventie = eventie; +} + +})( this ); + +/*! + * docReady + * Cross browser DOMContentLoaded event emitter + */ + +/*jshint browser: true, strict: true, undef: true, unused: true*/ +/*global define: false */ + +( function( window ) { + + + +var document = window.document; +// collection of functions to be triggered on ready +var queue = []; + +function docReady( fn ) { + // throw out non-functions + if ( typeof fn !== 'function' ) { + return; + } + + if ( docReady.isReady ) { + // ready now, hit it + fn(); + } else { + // queue function when ready + queue.push( fn ); + } +} + +docReady.isReady = false; + +// triggered on various doc ready events +function init( event ) { + // bail if IE8 document is not ready just yet + var isIE8NotReady = event.type === 'readystatechange' && document.readyState !== 'complete'; + if ( docReady.isReady || isIE8NotReady ) { + return; + } + docReady.isReady = true; + + // process queue + for ( var i=0, len = queue.length; i < len; i++ ) { + var fn = queue[i]; + fn(); + } +} + +function defineDocReady( eventie ) { + eventie.bind( document, 'DOMContentLoaded', init ); + eventie.bind( document, 'readystatechange', init ); + eventie.bind( window, 'load', init ); + + return docReady; +} + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + // if RequireJS, then doc is already ready + docReady.isReady = typeof requirejs === 'function'; + define( 'doc-ready/doc-ready',[ 'eventie/eventie' ], defineDocReady ); +} else { + // browser global + window.docReady = defineDocReady( window.eventie ); +} + +})( this ); + +/*! + * EventEmitter v4.2.7 - git.io/ee + * Oliver Caldwell + * MIT license + * @preserve + */ + +(function () { + + + /** + * Class for managing events. + * Can be extended to provide event functionality in other classes. + * + * @class EventEmitter Manages event registering and emitting. + */ + function EventEmitter() {} + + // Shortcuts to improve speed and size + var proto = EventEmitter.prototype; + var exports = this; + var originalGlobalValue = exports.EventEmitter; + + /** + * Finds the index of the listener for the event in it's storage array. + * + * @param {Function[]} listeners Array of listeners to search through. + * @param {Function} listener Method to look for. + * @return {Number} Index of the specified listener, -1 if not found + * @api private + */ + function indexOfListener(listeners, listener) { + var i = listeners.length; + while (i--) { + if (listeners[i].listener === listener) { + return i; + } + } + + return -1; + } + + /** + * Alias a method while keeping the context correct, to allow for overwriting of target method. + * + * @param {String} name The name of the target method. + * @return {Function} The aliased method + * @api private + */ + function alias(name) { + return function aliasClosure() { + return this[name].apply(this, arguments); + }; + } + + /** + * Returns the listener array for the specified event. + * Will initialise the event object and listener arrays if required. + * Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them. + * Each property in the object response is an array of listener functions. + * + * @param {String|RegExp} evt Name of the event to return the listeners from. + * @return {Function[]|Object} All listener functions for the event. + */ + proto.getListeners = function getListeners(evt) { + var events = this._getEvents(); + var response; + var key; + + // Return a concatenated array of all matching events if + // the selector is a regular expression. + if (evt instanceof RegExp) { + response = {}; + for (key in events) { + if (events.hasOwnProperty(key) && evt.test(key)) { + response[key] = events[key]; + } + } + } + else { + response = events[evt] || (events[evt] = []); + } + + return response; + }; + + /** + * Takes a list of listener objects and flattens it into a list of listener functions. + * + * @param {Object[]} listeners Raw listener objects. + * @return {Function[]} Just the listener functions. + */ + proto.flattenListeners = function flattenListeners(listeners) { + var flatListeners = []; + var i; + + for (i = 0; i < listeners.length; i += 1) { + flatListeners.push(listeners[i].listener); + } + + return flatListeners; + }; + + /** + * Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful. + * + * @param {String|RegExp} evt Name of the event to return the listeners from. + * @return {Object} All listener functions for an event in an object. + */ + proto.getListenersAsObject = function getListenersAsObject(evt) { + var listeners = this.getListeners(evt); + var response; + + if (listeners instanceof Array) { + response = {}; + response[evt] = listeners; + } + + return response || listeners; + }; + + /** + * Adds a listener function to the specified event. + * The listener will not be added if it is a duplicate. + * If the listener returns true then it will be removed after it is called. + * If you pass a regular expression as the event name then the listener will be added to all events that match it. + * + * @param {String|RegExp} evt Name of the event to attach the listener to. + * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addListener = function addListener(evt, listener) { + var listeners = this.getListenersAsObject(evt); + var listenerIsWrapped = typeof listener === 'object'; + var key; + + for (key in listeners) { + if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) { + listeners[key].push(listenerIsWrapped ? listener : { + listener: listener, + once: false + }); + } + } + + return this; + }; + + /** + * Alias of addListener + */ + proto.on = alias('addListener'); + + /** + * Semi-alias of addListener. It will add a listener that will be + * automatically removed after it's first execution. + * + * @param {String|RegExp} evt Name of the event to attach the listener to. + * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addOnceListener = function addOnceListener(evt, listener) { + return this.addListener(evt, { + listener: listener, + once: true + }); + }; + + /** + * Alias of addOnceListener. + */ + proto.once = alias('addOnceListener'); + + /** + * Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad. + * You need to tell it what event names should be matched by a regex. + * + * @param {String} evt Name of the event to create. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.defineEvent = function defineEvent(evt) { + this.getListeners(evt); + return this; + }; + + /** + * Uses defineEvent to define multiple events. + * + * @param {String[]} evts An array of event names to define. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.defineEvents = function defineEvents(evts) { + for (var i = 0; i < evts.length; i += 1) { + this.defineEvent(evts[i]); + } + return this; + }; + + /** + * Removes a listener function from the specified event. + * When passed a regular expression as the event name, it will remove the listener from all events that match it. + * + * @param {String|RegExp} evt Name of the event to remove the listener from. + * @param {Function} listener Method to remove from the event. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeListener = function removeListener(evt, listener) { + var listeners = this.getListenersAsObject(evt); + var index; + var key; + + for (key in listeners) { + if (listeners.hasOwnProperty(key)) { + index = indexOfListener(listeners[key], listener); + + if (index !== -1) { + listeners[key].splice(index, 1); + } + } + } + + return this; + }; + + /** + * Alias of removeListener + */ + proto.off = alias('removeListener'); + + /** + * Adds listeners in bulk using the manipulateListeners method. + * If you pass an object as the second argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added. + * You can also pass it a regular expression to add the array of listeners to all events that match it. + * Yeah, this function does quite a bit. That's probably a bad thing. + * + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to add. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addListeners = function addListeners(evt, listeners) { + // Pass through to manipulateListeners + return this.manipulateListeners(false, evt, listeners); + }; + + /** + * Removes listeners in bulk using the manipulateListeners method. + * If you pass an object as the second argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. + * You can also pass it an event name and an array of listeners to be removed. + * You can also pass it a regular expression to remove the listeners from all events that match it. + * + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to remove. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeListeners = function removeListeners(evt, listeners) { + // Pass through to manipulateListeners + return this.manipulateListeners(true, evt, listeners); + }; + + /** + * Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level. + * The first argument will determine if the listeners are removed (true) or added (false). + * If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. + * You can also pass it an event name and an array of listeners to be added/removed. + * You can also pass it a regular expression to manipulate the listeners of all events that match it. + * + * @param {Boolean} remove True if you want to remove listeners, false if you want to add. + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to add/remove. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) { + var i; + var value; + var single = remove ? this.removeListener : this.addListener; + var multiple = remove ? this.removeListeners : this.addListeners; + + // If evt is an object then pass each of it's properties to this method + if (typeof evt === 'object' && !(evt instanceof RegExp)) { + for (i in evt) { + if (evt.hasOwnProperty(i) && (value = evt[i])) { + // Pass the single listener straight through to the singular method + if (typeof value === 'function') { + single.call(this, i, value); + } + else { + // Otherwise pass back to the multiple function + multiple.call(this, i, value); + } + } + } + } + else { + // So evt must be a string + // And listeners must be an array of listeners + // Loop over it and pass each one to the multiple method + i = listeners.length; + while (i--) { + single.call(this, evt, listeners[i]); + } + } + + return this; + }; + + /** + * Removes all listeners from a specified event. + * If you do not specify an event then all listeners will be removed. + * That means every event will be emptied. + * You can also pass a regex to remove all events that match it. + * + * @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeEvent = function removeEvent(evt) { + var type = typeof evt; + var events = this._getEvents(); + var key; + + // Remove different things depending on the state of evt + if (type === 'string') { + // Remove all listeners for the specified event + delete events[evt]; + } + else if (evt instanceof RegExp) { + // Remove all events matching the regex. + for (key in events) { + if (events.hasOwnProperty(key) && evt.test(key)) { + delete events[key]; + } + } + } + else { + // Remove all listeners in all events + delete this._events; + } + + return this; + }; + + /** + * Alias of removeEvent. + * + * Added to mirror the node API. + */ + proto.removeAllListeners = alias('removeEvent'); + + /** + * Emits an event of your choice. + * When emitted, every listener attached to that event will be executed. + * If you pass the optional argument array then those arguments will be passed to every listener upon execution. + * Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately. + * So they will not arrive within the array on the other side, they will be separate. + * You can also pass a regular expression to emit to all events that match it. + * + * @param {String|RegExp} evt Name of the event to emit and execute listeners for. + * @param {Array} [args] Optional array of arguments to be passed to each listener. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.emitEvent = function emitEvent(evt, args) { + var listeners = this.getListenersAsObject(evt); + var listener; + var i; + var key; + var response; + + for (key in listeners) { + if (listeners.hasOwnProperty(key)) { + i = listeners[key].length; + + while (i--) { + // If the listener returns true then it shall be removed from the event + // The function is executed either with a basic call or an apply if there is an args array + listener = listeners[key][i]; + + if (listener.once === true) { + this.removeListener(evt, listener.listener); + } + + response = listener.listener.apply(this, args || []); + + if (response === this._getOnceReturnValue()) { + this.removeListener(evt, listener.listener); + } + } + } + } + + return this; + }; + + /** + * Alias of emitEvent + */ + proto.trigger = alias('emitEvent'); + + /** + * Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on. + * As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it. + * + * @param {String|RegExp} evt Name of the event to emit and execute listeners for. + * @param {...*} Optional additional arguments to be passed to each listener. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.emit = function emit(evt) { + var args = Array.prototype.slice.call(arguments, 1); + return this.emitEvent(evt, args); + }; + + /** + * Sets the current value to check against when executing listeners. If a + * listeners return value matches the one set here then it will be removed + * after execution. This value defaults to true. + * + * @param {*} value The new value to check for when executing listeners. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.setOnceReturnValue = function setOnceReturnValue(value) { + this._onceReturnValue = value; + return this; + }; + + /** + * Fetches the current value to check against when executing listeners. If + * the listeners return value matches this one then it should be removed + * automatically. It will return true by default. + * + * @return {*|Boolean} The current value to check for or the default, true. + * @api private + */ + proto._getOnceReturnValue = function _getOnceReturnValue() { + if (this.hasOwnProperty('_onceReturnValue')) { + return this._onceReturnValue; + } + else { + return true; + } + }; + + /** + * Fetches the events object and creates one if required. + * + * @return {Object} The events storage object. + * @api private + */ + proto._getEvents = function _getEvents() { + return this._events || (this._events = {}); + }; + + /** + * Reverts the global {@link EventEmitter} to its previous value and returns a reference to this version. + * + * @return {Function} Non conflicting EventEmitter class. + */ + EventEmitter.noConflict = function noConflict() { + exports.EventEmitter = originalGlobalValue; + return EventEmitter; + }; + + // Expose the class either via AMD, CommonJS or the global object + if (typeof define === 'function' && define.amd) { + define('eventEmitter/EventEmitter',[],function () { + return EventEmitter; + }); + } + else if (typeof module === 'object' && module.exports){ + module.exports = EventEmitter; + } + else { + this.EventEmitter = EventEmitter; + } +}.call(this)); + +/*! + * getStyleProperty v1.0.3 + * original by kangax + * http://perfectionkills.com/feature-testing-css-properties/ + */ + +/*jshint browser: true, strict: true, undef: true */ +/*global define: false, exports: false, module: false */ + +( function( window ) { + + + +var prefixes = 'Webkit Moz ms Ms O'.split(' '); +var docElemStyle = document.documentElement.style; + +function getStyleProperty( propName ) { + if ( !propName ) { + return; + } + + // test standard property first + if ( typeof docElemStyle[ propName ] === 'string' ) { + return propName; + } + + // capitalize + propName = propName.charAt(0).toUpperCase() + propName.slice(1); + + // test vendor specific properties + var prefixed; + for ( var i=0, len = prefixes.length; i < len; i++ ) { + prefixed = prefixes[i] + propName; + if ( typeof docElemStyle[ prefixed ] === 'string' ) { + return prefixed; + } + } +} + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'get-style-property/get-style-property',[],function() { + return getStyleProperty; + }); +} else if ( typeof exports === 'object' ) { + // CommonJS for Component + module.exports = getStyleProperty; +} else { + // browser global + window.getStyleProperty = getStyleProperty; +} + +})( window ); + +/** + * getSize v1.1.7 + * measure size of elements + */ + +/*jshint browser: true, strict: true, undef: true, unused: true */ +/*global define: false, exports: false, require: false, module: false */ + +( function( window, undefined ) { + + + +// -------------------------- helpers -------------------------- // + +var getComputedStyle = window.getComputedStyle; +var getStyle = getComputedStyle ? + function( elem ) { + return getComputedStyle( elem, null ); + } : + function( elem ) { + return elem.currentStyle; + }; + +// get a number from a string, not a percentage +function getStyleSize( value ) { + var num = parseFloat( value ); + // not a percent like '100%', and a number + var isValid = value.indexOf('%') === -1 && !isNaN( num ); + return isValid && num; +} + +// -------------------------- measurements -------------------------- // + +var measurements = [ + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderBottomWidth' +]; + +function getZeroSize() { + var size = { + width: 0, + height: 0, + innerWidth: 0, + innerHeight: 0, + outerWidth: 0, + outerHeight: 0 + }; + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + size[ measurement ] = 0; + } + return size; +} + + + +function defineGetSize( getStyleProperty ) { + +// -------------------------- box sizing -------------------------- // + +var boxSizingProp = getStyleProperty('boxSizing'); +var isBoxSizeOuter; + +/** + * WebKit measures the outer-width on style.width on border-box elems + * IE & Firefox measures the inner-width + */ +( function() { + if ( !boxSizingProp ) { + return; + } + + var div = document.createElement('div'); + div.style.width = '200px'; + div.style.padding = '1px 2px 3px 4px'; + div.style.borderStyle = 'solid'; + div.style.borderWidth = '1px 2px 3px 4px'; + div.style[ boxSizingProp ] = 'border-box'; + + var body = document.body || document.documentElement; + body.appendChild( div ); + var style = getStyle( div ); + + isBoxSizeOuter = getStyleSize( style.width ) === 200; + body.removeChild( div ); +})(); + + +// -------------------------- getSize -------------------------- // + +function getSize( elem ) { + // use querySeletor if elem is string + if ( typeof elem === 'string' ) { + elem = document.querySelector( elem ); + } + + // do not proceed on non-objects + if ( !elem || typeof elem !== 'object' || !elem.nodeType ) { + return; + } + + var style = getStyle( elem ); + + // if hidden, everything is 0 + if ( style.display === 'none' ) { + return getZeroSize(); + } + + var size = {}; + size.width = elem.offsetWidth; + size.height = elem.offsetHeight; + + var isBorderBox = size.isBorderBox = !!( boxSizingProp && + style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' ); + + // get all measurements + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + var value = style[ measurement ]; + value = mungeNonPixel( elem, value ); + var num = parseFloat( value ); + // any 'auto', 'medium' value will be 0 + size[ measurement ] = !isNaN( num ) ? num : 0; + } + + var paddingWidth = size.paddingLeft + size.paddingRight; + var paddingHeight = size.paddingTop + size.paddingBottom; + var marginWidth = size.marginLeft + size.marginRight; + var marginHeight = size.marginTop + size.marginBottom; + var borderWidth = size.borderLeftWidth + size.borderRightWidth; + var borderHeight = size.borderTopWidth + size.borderBottomWidth; + + var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; + + // overwrite width and height if we can get it from style + var styleWidth = getStyleSize( style.width ); + if ( styleWidth !== false ) { + size.width = styleWidth + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); + } + + var styleHeight = getStyleSize( style.height ); + if ( styleHeight !== false ) { + size.height = styleHeight + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); + } + + size.innerWidth = size.width - ( paddingWidth + borderWidth ); + size.innerHeight = size.height - ( paddingHeight + borderHeight ); + + size.outerWidth = size.width + marginWidth; + size.outerHeight = size.height + marginHeight; + + return size; +} + +// IE8 returns percent values, not pixels +// taken from jQuery's curCSS +function mungeNonPixel( elem, value ) { + // IE8 and has percent value + if ( getComputedStyle || value.indexOf('%') === -1 ) { + return value; + } + var style = elem.style; + // Remember the original values + var left = style.left; + var rs = elem.runtimeStyle; + var rsLeft = rs && rs.left; + + // Put in the new values to get a computed value out + if ( rsLeft ) { + rs.left = elem.currentStyle.left; + } + style.left = value; + value = style.pixelLeft; + + // Revert the changed values + style.left = left; + if ( rsLeft ) { + rs.left = rsLeft; + } + + return value; +} + +return getSize; + +} + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD for RequireJS + define( 'get-size/get-size',[ 'get-style-property/get-style-property' ], defineGetSize ); +} else if ( typeof exports === 'object' ) { + // CommonJS for Component + module.exports = defineGetSize( require('get-style-property') ); +} else { + // browser global + window.getSize = defineGetSize( window.getStyleProperty ); +} + +})( window ); + +/** + * matchesSelector helper v1.0.1 + * + * @name matchesSelector + * @param {Element} elem + * @param {String} selector + */ + +/*jshint browser: true, strict: true, undef: true, unused: true */ +/*global define: false */ + +( function( global, ElemProto ) { + + + + var matchesMethod = ( function() { + // check un-prefixed + if ( ElemProto.matchesSelector ) { + return 'matchesSelector'; + } + // check vendor prefixes + var prefixes = [ 'webkit', 'moz', 'ms', 'o' ]; + + for ( var i=0, len = prefixes.length; i < len; i++ ) { + var prefix = prefixes[i]; + var method = prefix + 'MatchesSelector'; + if ( ElemProto[ method ] ) { + return method; + } + } + })(); + + // ----- match ----- // + + function match( elem, selector ) { + return elem[ matchesMethod ]( selector ); + } + + // ----- appendToFragment ----- // + + function checkParent( elem ) { + // not needed if already has parent + if ( elem.parentNode ) { + return; + } + var fragment = document.createDocumentFragment(); + fragment.appendChild( elem ); + } + + // ----- query ----- // + + // fall back to using QSA + // thx @jonathantneal https://gist.github.com/3062955 + function query( elem, selector ) { + // append to fragment if no parent + checkParent( elem ); + + // match elem with all selected elems of parent + var elems = elem.parentNode.querySelectorAll( selector ); + for ( var i=0, len = elems.length; i < len; i++ ) { + // return true if match + if ( elems[i] === elem ) { + return true; + } + } + // otherwise return false + return false; + } + + // ----- matchChild ----- // + + function matchChild( elem, selector ) { + checkParent( elem ); + return match( elem, selector ); + } + + // ----- matchesSelector ----- // + + var matchesSelector; + + if ( matchesMethod ) { + // IE9 supports matchesSelector, but doesn't work on orphaned elems + // check for that + var div = document.createElement('div'); + var supportsOrphans = match( div, 'div' ); + matchesSelector = supportsOrphans ? match : matchChild; + } else { + matchesSelector = query; + } + + // transport + if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'matches-selector/matches-selector',[],function() { + return matchesSelector; + }); + } else { + // browser global + window.matchesSelector = matchesSelector; + } + +})( this, Element.prototype ); + +/** + * Outlayer Item + */ + +( function( window ) { + + + +// ----- get style ----- // + +var getComputedStyle = window.getComputedStyle; +var getStyle = getComputedStyle ? + function( elem ) { + return getComputedStyle( elem, null ); + } : + function( elem ) { + return elem.currentStyle; + }; + + +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} + +function isEmptyObj( obj ) { + for ( var prop in obj ) { + return false; + } + prop = null; + return true; +} + +// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ +function toDash( str ) { + return str.replace( /([A-Z])/g, function( $1 ){ + return '-' + $1.toLowerCase(); + }); +} + +// -------------------------- Outlayer definition -------------------------- // + +function outlayerItemDefinition( EventEmitter, getSize, getStyleProperty ) { + +// -------------------------- CSS3 support -------------------------- // + +var transitionProperty = getStyleProperty('transition'); +var transformProperty = getStyleProperty('transform'); +var supportsCSS3 = transitionProperty && transformProperty; +var is3d = !!getStyleProperty('perspective'); + +var transitionEndEvent = { + WebkitTransition: 'webkitTransitionEnd', + MozTransition: 'transitionend', + OTransition: 'otransitionend', + transition: 'transitionend' +}[ transitionProperty ]; + +// properties that could have vendor prefix +var prefixableProperties = [ + 'transform', + 'transition', + 'transitionDuration', + 'transitionProperty' +]; + +// cache all vendor properties +var vendorProperties = ( function() { + var cache = {}; + for ( var i=0, len = prefixableProperties.length; i < len; i++ ) { + var prop = prefixableProperties[i]; + var supportedProp = getStyleProperty( prop ); + if ( supportedProp && supportedProp !== prop ) { + cache[ prop ] = supportedProp; + } + } + return cache; +})(); + +// -------------------------- Item -------------------------- // + +function Item( element, layout ) { + if ( !element ) { + return; + } + + this.element = element; + // parent layout class, i.e. Masonry, Isotope, or Packery + this.layout = layout; + this.position = { + x: 0, + y: 0 + }; + + this._create(); +} + +// inherit EventEmitter +extend( Item.prototype, EventEmitter.prototype ); + +Item.prototype._create = function() { + // transition objects + this._transn = { + ingProperties: {}, + clean: {}, + onEnd: {} + }; + + this.css({ + position: 'absolute' + }); +}; + +// trigger specified handler for event type +Item.prototype.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } +}; + +Item.prototype.getSize = function() { + this.size = getSize( this.element ); +}; + +/** + * apply CSS styles to element + * @param {Object} style + */ +Item.prototype.css = function( style ) { + var elemStyle = this.element.style; + + for ( var prop in style ) { + // use vendor property if available + var supportedProp = vendorProperties[ prop ] || prop; + elemStyle[ supportedProp ] = style[ prop ]; + } +}; + + // measure position, and sets it +Item.prototype.getPosition = function() { + var style = getStyle( this.element ); + var layoutOptions = this.layout.options; + var isOriginLeft = layoutOptions.isOriginLeft; + var isOriginTop = layoutOptions.isOriginTop; + var x = parseInt( style[ isOriginLeft ? 'left' : 'right' ], 10 ); + var y = parseInt( style[ isOriginTop ? 'top' : 'bottom' ], 10 ); + + // clean up 'auto' or other non-integer values + x = isNaN( x ) ? 0 : x; + y = isNaN( y ) ? 0 : y; + // remove padding from measurement + var layoutSize = this.layout.size; + x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight; + y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom; + + this.position.x = x; + this.position.y = y; +}; + +// set settled position, apply padding +Item.prototype.layoutPosition = function() { + var layoutSize = this.layout.size; + var layoutOptions = this.layout.options; + var style = {}; + + if ( layoutOptions.isOriginLeft ) { + style.left = ( this.position.x + layoutSize.paddingLeft ) + 'px'; + // reset other property + style.right = ''; + } else { + style.right = ( this.position.x + layoutSize.paddingRight ) + 'px'; + style.left = ''; + } + + if ( layoutOptions.isOriginTop ) { + style.top = ( this.position.y + layoutSize.paddingTop ) + 'px'; + style.bottom = ''; + } else { + style.bottom = ( this.position.y + layoutSize.paddingBottom ) + 'px'; + style.top = ''; + } + + this.css( style ); + this.emitEvent( 'layout', [ this ] ); +}; + + +// transform translate function +var translate = is3d ? + function( x, y ) { + return 'translate3d(' + x + 'px, ' + y + 'px, 0)'; + } : + function( x, y ) { + return 'translate(' + x + 'px, ' + y + 'px)'; + }; + + +Item.prototype._transitionTo = function( x, y ) { + this.getPosition(); + // get current x & y from top/left + var curX = this.position.x; + var curY = this.position.y; + + var compareX = parseInt( x, 10 ); + var compareY = parseInt( y, 10 ); + var didNotMove = compareX === this.position.x && compareY === this.position.y; + + // save end position + this.setPosition( x, y ); + + // if did not move and not transitioning, just go to layout + if ( didNotMove && !this.isTransitioning ) { + this.layoutPosition(); + return; + } + + var transX = x - curX; + var transY = y - curY; + var transitionStyle = {}; + // flip cooridinates if origin on right or bottom + var layoutOptions = this.layout.options; + transX = layoutOptions.isOriginLeft ? transX : -transX; + transY = layoutOptions.isOriginTop ? transY : -transY; + transitionStyle.transform = translate( transX, transY ); + + this.transition({ + to: transitionStyle, + onTransitionEnd: { + transform: this.layoutPosition + }, + isCleaning: true + }); +}; + +// non transition + transform support +Item.prototype.goTo = function( x, y ) { + this.setPosition( x, y ); + this.layoutPosition(); +}; + +// use transition and transforms if supported +Item.prototype.moveTo = supportsCSS3 ? + Item.prototype._transitionTo : Item.prototype.goTo; + +Item.prototype.setPosition = function( x, y ) { + this.position.x = parseInt( x, 10 ); + this.position.y = parseInt( y, 10 ); +}; + +// ----- transition ----- // + +/** + * @param {Object} style - CSS + * @param {Function} onTransitionEnd + */ + +// non transition, just trigger callback +Item.prototype._nonTransition = function( args ) { + this.css( args.to ); + if ( args.isCleaning ) { + this._removeStyles( args.to ); + } + for ( var prop in args.onTransitionEnd ) { + args.onTransitionEnd[ prop ].call( this ); + } +}; + +/** + * proper transition + * @param {Object} args - arguments + * @param {Object} to - style to transition to + * @param {Object} from - style to start transition from + * @param {Boolean} isCleaning - removes transition styles after transition + * @param {Function} onTransitionEnd - callback + */ +Item.prototype._transition = function( args ) { + // redirect to nonTransition if no transition duration + if ( !parseFloat( this.layout.options.transitionDuration ) ) { + this._nonTransition( args ); + return; + } + + var _transition = this._transn; + // keep track of onTransitionEnd callback by css property + for ( var prop in args.onTransitionEnd ) { + _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ]; + } + // keep track of properties that are transitioning + for ( prop in args.to ) { + _transition.ingProperties[ prop ] = true; + // keep track of properties to clean up when transition is done + if ( args.isCleaning ) { + _transition.clean[ prop ] = true; + } + } + + // set from styles + if ( args.from ) { + this.css( args.from ); + // force redraw. http://blog.alexmaccaw.com/css-transitions + var h = this.element.offsetHeight; + // hack for JSHint to hush about unused var + h = null; + } + // enable transition + this.enableTransition( args.to ); + // set styles that are transitioning + this.css( args.to ); + + this.isTransitioning = true; + +}; + +var itemTransitionProperties = transformProperty && ( toDash( transformProperty ) + + ',opacity' ); + +Item.prototype.enableTransition = function(/* style */) { + // only enable if not already transitioning + // bug in IE10 were re-setting transition style will prevent + // transitionend event from triggering + if ( this.isTransitioning ) { + return; + } + + // make transition: foo, bar, baz from style object + // TODO uncomment this bit when IE10 bug is resolved + // var transitionValue = []; + // for ( var prop in style ) { + // // dash-ify camelCased properties like WebkitTransition + // transitionValue.push( toDash( prop ) ); + // } + // enable transition styles + // HACK always enable transform,opacity for IE10 + this.css({ + transitionProperty: itemTransitionProperties, + transitionDuration: this.layout.options.transitionDuration + }); + // listen for transition end event + this.element.addEventListener( transitionEndEvent, this, false ); +}; + +Item.prototype.transition = Item.prototype[ transitionProperty ? '_transition' : '_nonTransition' ]; + +// ----- events ----- // + +Item.prototype.onwebkitTransitionEnd = function( event ) { + this.ontransitionend( event ); +}; + +Item.prototype.onotransitionend = function( event ) { + this.ontransitionend( event ); +}; + +// properties that I munge to make my life easier +var dashedVendorProperties = { + '-webkit-transform': 'transform', + '-moz-transform': 'transform', + '-o-transform': 'transform' +}; + +Item.prototype.ontransitionend = function( event ) { + // disregard bubbled events from children + if ( event.target !== this.element ) { + return; + } + var _transition = this._transn; + // get property name of transitioned property, convert to prefix-free + var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName; + + // remove property that has completed transitioning + delete _transition.ingProperties[ propertyName ]; + // check if any properties are still transitioning + if ( isEmptyObj( _transition.ingProperties ) ) { + // all properties have completed transitioning + this.disableTransition(); + } + // clean style + if ( propertyName in _transition.clean ) { + // clean up style + this.element.style[ event.propertyName ] = ''; + delete _transition.clean[ propertyName ]; + } + // trigger onTransitionEnd callback + if ( propertyName in _transition.onEnd ) { + var onTransitionEnd = _transition.onEnd[ propertyName ]; + onTransitionEnd.call( this ); + delete _transition.onEnd[ propertyName ]; + } + + this.emitEvent( 'transitionEnd', [ this ] ); +}; + +Item.prototype.disableTransition = function() { + this.removeTransitionStyles(); + this.element.removeEventListener( transitionEndEvent, this, false ); + this.isTransitioning = false; +}; + +/** + * removes style property from element + * @param {Object} style +**/ +Item.prototype._removeStyles = function( style ) { + // clean up transition styles + var cleanStyle = {}; + for ( var prop in style ) { + cleanStyle[ prop ] = ''; + } + this.css( cleanStyle ); +}; + +var cleanTransitionStyle = { + transitionProperty: '', + transitionDuration: '' +}; + +Item.prototype.removeTransitionStyles = function() { + // remove transition + this.css( cleanTransitionStyle ); +}; + +// ----- show/hide/remove ----- // + +// remove element from DOM +Item.prototype.removeElem = function() { + this.element.parentNode.removeChild( this.element ); + this.emitEvent( 'remove', [ this ] ); +}; + +Item.prototype.remove = function() { + // just remove element if no transition support or no transition + if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) { + this.removeElem(); + return; + } + + // start transition + var _this = this; + this.on( 'transitionEnd', function() { + _this.removeElem(); + return true; // bind once + }); + this.hide(); +}; + +Item.prototype.reveal = function() { + delete this.isHidden; + // remove display: none + this.css({ display: '' }); + + var options = this.layout.options; + this.transition({ + from: options.hiddenStyle, + to: options.visibleStyle, + isCleaning: true + }); +}; + +Item.prototype.hide = function() { + // set flag + this.isHidden = true; + // remove display: none + this.css({ display: '' }); + + var options = this.layout.options; + this.transition({ + from: options.visibleStyle, + to: options.hiddenStyle, + // keep hidden stuff hidden + isCleaning: true, + onTransitionEnd: { + opacity: function() { + // check if still hidden + // during transition, item may have been un-hidden + if ( this.isHidden ) { + this.css({ display: 'none' }); + } + } + } + }); +}; + +Item.prototype.destroy = function() { + this.css({ + position: '', + left: '', + right: '', + top: '', + bottom: '', + transition: '', + transform: '' + }); +}; + +return Item; + +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'outlayer/item',[ + 'eventEmitter/EventEmitter', + 'get-size/get-size', + 'get-style-property/get-style-property' + ], + outlayerItemDefinition ); +} else { + // browser global + window.Outlayer = {}; + window.Outlayer.Item = outlayerItemDefinition( + window.EventEmitter, + window.getSize, + window.getStyleProperty + ); +} + +})( window ); + +/*! + * Outlayer v1.1.10 + * the brains and guts of a layout library + * MIT license + */ + +( function( window ) { + + + +// ----- vars ----- // + +var document = window.document; +var console = window.console; +var jQuery = window.jQuery; + +var noop = function() {}; + +// -------------------------- helpers -------------------------- // + +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} + + +var objToString = Object.prototype.toString; +function isArray( obj ) { + return objToString.call( obj ) === '[object Array]'; +} + +// turn element or nodeList into an array +function makeArray( obj ) { + var ary = []; + if ( isArray( obj ) ) { + // use object if already an array + ary = obj; + } else if ( obj && typeof obj.length === 'number' ) { + // convert nodeList to array + for ( var i=0, len = obj.length; i < len; i++ ) { + ary.push( obj[i] ); + } + } else { + // array of single index + ary.push( obj ); + } + return ary; +} + +// http://stackoverflow.com/a/384380/182183 +var isElement = ( typeof HTMLElement === 'object' ) ? + function isElementDOM2( obj ) { + return obj instanceof HTMLElement; + } : + function isElementQuirky( obj ) { + return obj && typeof obj === 'object' && + obj.nodeType === 1 && typeof obj.nodeName === 'string'; + }; + +// index of helper cause IE8 +var indexOf = Array.prototype.indexOf ? function( ary, obj ) { + return ary.indexOf( obj ); + } : function( ary, obj ) { + for ( var i=0, len = ary.length; i < len; i++ ) { + if ( ary[i] === obj ) { + return i; + } + } + return -1; + }; + +function removeFrom( obj, ary ) { + var index = indexOf( ary, obj ); + if ( index !== -1 ) { + ary.splice( index, 1 ); + } +} + +// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ +function toDashed( str ) { + return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) { + return $1 + '-' + $2; + }).toLowerCase(); +} + + +function outlayerDefinition( eventie, docReady, EventEmitter, getSize, matchesSelector, Item ) { + +// -------------------------- Outlayer -------------------------- // + +// globally unique identifiers +var GUID = 0; +// internal store of all Outlayer intances +var instances = {}; + + +/** + * @param {Element, String} element + * @param {Object} options + * @constructor + */ +function Outlayer( element, options ) { + // use element as selector string + if ( typeof element === 'string' ) { + element = document.querySelector( element ); + } + + // bail out if not proper element + if ( !element || !isElement( element ) ) { + if ( console ) { + console.error( 'Bad ' + this.constructor.namespace + ' element: ' + element ); + } + return; + } + + this.element = element; + + // options + this.options = extend( {}, this.constructor.defaults ); + this.option( options ); + + // add id for Outlayer.getFromElement + var id = ++GUID; + this.element.outlayerGUID = id; // expando + instances[ id ] = this; // associate via id + + // kick it off + this._create(); + + if ( this.options.isInitLayout ) { + this.layout(); + } +} + +// settings are for internal use only +Outlayer.namespace = 'outlayer'; +Outlayer.Item = Item; + +// default options +Outlayer.defaults = { + containerStyle: { + position: 'relative' + }, + isInitLayout: true, + isOriginLeft: true, + isOriginTop: true, + isResizeBound: true, + isResizingContainer: true, + // item options + transitionDuration: '0.4s', + hiddenStyle: { + opacity: 0, + transform: 'scale(0.001)' + }, + visibleStyle: { + opacity: 1, + transform: 'scale(1)' + } +}; + +// inherit EventEmitter +extend( Outlayer.prototype, EventEmitter.prototype ); + +/** + * set options + * @param {Object} opts + */ +Outlayer.prototype.option = function( opts ) { + extend( this.options, opts ); +}; + +Outlayer.prototype._create = function() { + // get items from children + this.reloadItems(); + // elements that affect layout, but are not laid out + this.stamps = []; + this.stamp( this.options.stamp ); + // set container style + extend( this.element.style, this.options.containerStyle ); + + // bind resize method + if ( this.options.isResizeBound ) { + this.bindResize(); + } +}; + +// goes through all children again and gets bricks in proper order +Outlayer.prototype.reloadItems = function() { + // collection of item elements + this.items = this._itemize( this.element.children ); +}; + + +/** + * turn elements into Outlayer.Items to be used in layout + * @param {Array or NodeList or HTMLElement} elems + * @returns {Array} items - collection of new Outlayer Items + */ +Outlayer.prototype._itemize = function( elems ) { + + var itemElems = this._filterFindItemElements( elems ); + var Item = this.constructor.Item; + + // create new Outlayer Items for collection + var items = []; + for ( var i=0, len = itemElems.length; i < len; i++ ) { + var elem = itemElems[i]; + var item = new Item( elem, this ); + items.push( item ); + } + + return items; +}; + +/** + * get item elements to be used in layout + * @param {Array or NodeList or HTMLElement} elems + * @returns {Array} items - item elements + */ +Outlayer.prototype._filterFindItemElements = function( elems ) { + // make array of elems + elems = makeArray( elems ); + var itemSelector = this.options.itemSelector; + var itemElems = []; + + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + // check that elem is an actual element + if ( !isElement( elem ) ) { + continue; + } + // filter & find items if we have an item selector + if ( itemSelector ) { + // filter siblings + if ( matchesSelector( elem, itemSelector ) ) { + itemElems.push( elem ); + } + // find children + var childElems = elem.querySelectorAll( itemSelector ); + // concat childElems to filterFound array + for ( var j=0, jLen = childElems.length; j < jLen; j++ ) { + itemElems.push( childElems[j] ); + } + } else { + itemElems.push( elem ); + } + } + + return itemElems; +}; + +/** + * getter method for getting item elements + * @returns {Array} elems - collection of item elements + */ +Outlayer.prototype.getItemElements = function() { + var elems = []; + for ( var i=0, len = this.items.length; i < len; i++ ) { + elems.push( this.items[i].element ); + } + return elems; +}; + +// ----- init & layout ----- // + +/** + * lays out all items + */ +Outlayer.prototype.layout = function() { + this._resetLayout(); + this._manageStamps(); + + // don't animate first layout + var isInstant = this.options.isLayoutInstant !== undefined ? + this.options.isLayoutInstant : !this._isLayoutInited; + this.layoutItems( this.items, isInstant ); + + // flag for initalized + this._isLayoutInited = true; +}; + +// _init is alias for layout +Outlayer.prototype._init = Outlayer.prototype.layout; + +/** + * logic before any new layout + */ +Outlayer.prototype._resetLayout = function() { + this.getSize(); +}; + + +Outlayer.prototype.getSize = function() { + this.size = getSize( this.element ); +}; + +/** + * get measurement from option, for columnWidth, rowHeight, gutter + * if option is String -> get element from selector string, & get size of element + * if option is Element -> get size of element + * else use option as a number + * + * @param {String} measurement + * @param {String} size - width or height + * @private + */ +Outlayer.prototype._getMeasurement = function( measurement, size ) { + var option = this.options[ measurement ]; + var elem; + if ( !option ) { + // default to 0 + this[ measurement ] = 0; + } else { + // use option as an element + if ( typeof option === 'string' ) { + elem = this.element.querySelector( option ); + } else if ( isElement( option ) ) { + elem = option; + } + // use size of element, if element + this[ measurement ] = elem ? getSize( elem )[ size ] : option; + } +}; + +/** + * layout a collection of item elements + * @api public + */ +Outlayer.prototype.layoutItems = function( items, isInstant ) { + items = this._getItemsForLayout( items ); + + this._layoutItems( items, isInstant ); + + this._postLayout(); +}; + +/** + * get the items to be laid out + * you may want to skip over some items + * @param {Array} items + * @returns {Array} items + */ +Outlayer.prototype._getItemsForLayout = function( items ) { + var layoutItems = []; + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( !item.isIgnored ) { + layoutItems.push( item ); + } + } + return layoutItems; +}; + +/** + * layout items + * @param {Array} items + * @param {Boolean} isInstant + */ +Outlayer.prototype._layoutItems = function( items, isInstant ) { + var _this = this; + function onItemsLayout() { + _this.emitEvent( 'layoutComplete', [ _this, items ] ); + } + + if ( !items || !items.length ) { + // no items, emit event with empty array + onItemsLayout(); + return; + } + + // emit layoutComplete when done + this._itemsOn( items, 'layout', onItemsLayout ); + + var queue = []; + + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + // get x/y object from method + var position = this._getItemLayoutPosition( item ); + // enqueue + position.item = item; + position.isInstant = isInstant || item.isLayoutInstant; + queue.push( position ); + } + + this._processLayoutQueue( queue ); +}; + +/** + * get item layout position + * @param {Outlayer.Item} item + * @returns {Object} x and y position + */ +Outlayer.prototype._getItemLayoutPosition = function( /* item */ ) { + return { + x: 0, + y: 0 + }; +}; + +/** + * iterate over array and position each item + * Reason being - separating this logic prevents 'layout invalidation' + * thx @paul_irish + * @param {Array} queue + */ +Outlayer.prototype._processLayoutQueue = function( queue ) { + for ( var i=0, len = queue.length; i < len; i++ ) { + var obj = queue[i]; + this._positionItem( obj.item, obj.x, obj.y, obj.isInstant ); + } +}; + +/** + * Sets position of item in DOM + * @param {Outlayer.Item} item + * @param {Number} x - horizontal position + * @param {Number} y - vertical position + * @param {Boolean} isInstant - disables transitions + */ +Outlayer.prototype._positionItem = function( item, x, y, isInstant ) { + if ( isInstant ) { + // if not transition, just set CSS + item.goTo( x, y ); + } else { + item.moveTo( x, y ); + } +}; + +/** + * Any logic you want to do after each layout, + * i.e. size the container + */ +Outlayer.prototype._postLayout = function() { + this.resizeContainer(); +}; + +Outlayer.prototype.resizeContainer = function() { + if ( !this.options.isResizingContainer ) { + return; + } + var size = this._getContainerSize(); + if ( size ) { + this._setContainerMeasure( size.width, true ); + this._setContainerMeasure( size.height, false ); + } +}; + +/** + * Sets width or height of container if returned + * @returns {Object} size + * @param {Number} width + * @param {Number} height + */ +Outlayer.prototype._getContainerSize = noop; + +/** + * @param {Number} measure - size of width or height + * @param {Boolean} isWidth + */ +Outlayer.prototype._setContainerMeasure = function( measure, isWidth ) { + if ( measure === undefined ) { + return; + } + + var elemSize = this.size; + // add padding and border width if border box + if ( elemSize.isBorderBox ) { + measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight + + elemSize.borderLeftWidth + elemSize.borderRightWidth : + elemSize.paddingBottom + elemSize.paddingTop + + elemSize.borderTopWidth + elemSize.borderBottomWidth; + } + + measure = Math.max( measure, 0 ); + this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px'; +}; + +/** + * trigger a callback for a collection of items events + * @param {Array} items - Outlayer.Items + * @param {String} eventName + * @param {Function} callback + */ +Outlayer.prototype._itemsOn = function( items, eventName, callback ) { + var doneCount = 0; + var count = items.length; + // event callback + var _this = this; + function tick() { + doneCount++; + if ( doneCount === count ) { + callback.call( _this ); + } + return true; // bind once + } + // bind callback + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.on( eventName, tick ); + } +}; + +// -------------------------- ignore & stamps -------------------------- // + + +/** + * keep item in collection, but do not lay it out + * ignored items do not get skipped in layout + * @param {Element} elem + */ +Outlayer.prototype.ignore = function( elem ) { + var item = this.getItem( elem ); + if ( item ) { + item.isIgnored = true; + } +}; + +/** + * return item to layout collection + * @param {Element} elem + */ +Outlayer.prototype.unignore = function( elem ) { + var item = this.getItem( elem ); + if ( item ) { + delete item.isIgnored; + } +}; + +/** + * adds elements to stamps + * @param {NodeList, Array, Element, or String} elems + */ +Outlayer.prototype.stamp = function( elems ) { + elems = this._find( elems ); + if ( !elems ) { + return; + } + + this.stamps = this.stamps.concat( elems ); + // ignore + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + this.ignore( elem ); + } +}; + +/** + * removes elements to stamps + * @param {NodeList, Array, or Element} elems + */ +Outlayer.prototype.unstamp = function( elems ) { + elems = this._find( elems ); + if ( !elems ){ + return; + } + + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + // filter out removed stamp elements + removeFrom( elem, this.stamps ); + this.unignore( elem ); + } + +}; + +/** + * finds child elements + * @param {NodeList, Array, Element, or String} elems + * @returns {Array} elems + */ +Outlayer.prototype._find = function( elems ) { + if ( !elems ) { + return; + } + // if string, use argument as selector string + if ( typeof elems === 'string' ) { + elems = this.element.querySelectorAll( elems ); + } + elems = makeArray( elems ); + return elems; +}; + +Outlayer.prototype._manageStamps = function() { + if ( !this.stamps || !this.stamps.length ) { + return; + } + + this._getBoundingRect(); + + for ( var i=0, len = this.stamps.length; i < len; i++ ) { + var stamp = this.stamps[i]; + this._manageStamp( stamp ); + } +}; + +// update boundingLeft / Top +Outlayer.prototype._getBoundingRect = function() { + // get bounding rect for container element + var boundingRect = this.element.getBoundingClientRect(); + var size = this.size; + this._boundingRect = { + left: boundingRect.left + size.paddingLeft + size.borderLeftWidth, + top: boundingRect.top + size.paddingTop + size.borderTopWidth, + right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ), + bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth ) + }; +}; + +/** + * @param {Element} stamp +**/ +Outlayer.prototype._manageStamp = noop; + +/** + * get x/y position of element relative to container element + * @param {Element} elem + * @returns {Object} offset - has left, top, right, bottom + */ +Outlayer.prototype._getElementOffset = function( elem ) { + var boundingRect = elem.getBoundingClientRect(); + var thisRect = this._boundingRect; + var size = getSize( elem ); + var offset = { + left: boundingRect.left - thisRect.left - size.marginLeft, + top: boundingRect.top - thisRect.top - size.marginTop, + right: thisRect.right - boundingRect.right - size.marginRight, + bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom + }; + return offset; +}; + +// -------------------------- resize -------------------------- // + +// enable event handlers for listeners +// i.e. resize -> onresize +Outlayer.prototype.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } +}; + +/** + * Bind layout to window resizing + */ +Outlayer.prototype.bindResize = function() { + // bind just one listener + if ( this.isResizeBound ) { + return; + } + eventie.bind( window, 'resize', this ); + this.isResizeBound = true; +}; + +/** + * Unbind layout to window resizing + */ +Outlayer.prototype.unbindResize = function() { + if ( this.isResizeBound ) { + eventie.unbind( window, 'resize', this ); + } + this.isResizeBound = false; +}; + +// original debounce by John Hann +// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + +// this fires every resize +Outlayer.prototype.onresize = function() { + if ( this.resizeTimeout ) { + clearTimeout( this.resizeTimeout ); + } + + var _this = this; + function delayed() { + _this.resize(); + delete _this.resizeTimeout; + } + + this.resizeTimeout = setTimeout( delayed, 100 ); +}; + +// debounced, layout on resize +Outlayer.prototype.resize = function() { + // don't trigger if size did not change + // or if resize was unbound. See #9 + if ( !this.isResizeBound || !this.needsResizeLayout() ) { + return; + } + + this.layout(); +}; + +/** + * check if layout is needed post layout + * @returns Boolean + */ +Outlayer.prototype.needsResizeLayout = function() { + var size = getSize( this.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.size && size; + return hasSizes && size.innerWidth !== this.size.innerWidth; +}; + +// -------------------------- methods -------------------------- // + +/** + * add items to Outlayer instance + * @param {Array or NodeList or Element} elems + * @returns {Array} items - Outlayer.Items +**/ +Outlayer.prototype.addItems = function( elems ) { + var items = this._itemize( elems ); + // add items to collection + if ( items.length ) { + this.items = this.items.concat( items ); + } + return items; +}; + +/** + * Layout newly-appended item elements + * @param {Array or NodeList or Element} elems + */ +Outlayer.prototype.appended = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + // layout and reveal just the new items + this.layoutItems( items, true ); + this.reveal( items ); +}; + +/** + * Layout prepended elements + * @param {Array or NodeList or Element} elems + */ +Outlayer.prototype.prepended = function( elems ) { + var items = this._itemize( elems ); + if ( !items.length ) { + return; + } + // add items to beginning of collection + var previousItems = this.items.slice(0); + this.items = items.concat( previousItems ); + // start new layout + this._resetLayout(); + this._manageStamps(); + // layout new stuff without transition + this.layoutItems( items, true ); + this.reveal( items ); + // layout previous items + this.layoutItems( previousItems ); +}; + +/** + * reveal a collection of items + * @param {Array of Outlayer.Items} items + */ +Outlayer.prototype.reveal = function( items ) { + var len = items && items.length; + if ( !len ) { + return; + } + for ( var i=0; i < len; i++ ) { + var item = items[i]; + item.reveal(); + } +}; + +/** + * hide a collection of items + * @param {Array of Outlayer.Items} items + */ +Outlayer.prototype.hide = function( items ) { + var len = items && items.length; + if ( !len ) { + return; + } + for ( var i=0; i < len; i++ ) { + var item = items[i]; + item.hide(); + } +}; + +/** + * get Outlayer.Item, given an Element + * @param {Element} elem + * @param {Function} callback + * @returns {Outlayer.Item} item + */ +Outlayer.prototype.getItem = function( elem ) { + // loop through items to get the one that matches + for ( var i=0, len = this.items.length; i < len; i++ ) { + var item = this.items[i]; + if ( item.element === elem ) { + // return item + return item; + } + } +}; + +/** + * get collection of Outlayer.Items, given Elements + * @param {Array} elems + * @returns {Array} items - Outlayer.Items + */ +Outlayer.prototype.getItems = function( elems ) { + if ( !elems || !elems.length ) { + return; + } + var items = []; + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + var item = this.getItem( elem ); + if ( item ) { + items.push( item ); + } + } + + return items; +}; + +/** + * remove element(s) from instance and DOM + * @param {Array or NodeList or Element} elems + */ +Outlayer.prototype.remove = function( elems ) { + elems = makeArray( elems ); + + var removeItems = this.getItems( elems ); + // bail if no items to remove + if ( !removeItems || !removeItems.length ) { + return; + } + + this._itemsOn( removeItems, 'remove', function() { + this.emitEvent( 'removeComplete', [ this, removeItems ] ); + }); + + for ( var i=0, len = removeItems.length; i < len; i++ ) { + var item = removeItems[i]; + item.remove(); + // remove item from collection + removeFrom( item, this.items ); + } +}; + +// ----- destroy ----- // + +// remove and disable Outlayer instance +Outlayer.prototype.destroy = function() { + // clean up dynamic styles + var style = this.element.style; + style.height = ''; + style.position = ''; + style.width = ''; + // destroy items + for ( var i=0, len = this.items.length; i < len; i++ ) { + var item = this.items[i]; + item.destroy(); + } + + this.unbindResize(); + + delete this.element.outlayerGUID; + // remove data for jQuery + if ( jQuery ) { + jQuery.removeData( this.element, this.constructor.namespace ); + } + +}; + +// -------------------------- data -------------------------- // + +/** + * get Outlayer instance from element + * @param {Element} elem + * @returns {Outlayer} + */ +Outlayer.data = function( elem ) { + var id = elem && elem.outlayerGUID; + return id && instances[ id ]; +}; + + +// -------------------------- create Outlayer class -------------------------- // + +/** + * create a layout class + * @param {String} namespace + */ +Outlayer.create = function( namespace, options ) { + // sub-class Outlayer + function Layout() { + Outlayer.apply( this, arguments ); + } + // inherit Outlayer prototype, use Object.create if there + if ( Object.create ) { + Layout.prototype = Object.create( Outlayer.prototype ); + } else { + extend( Layout.prototype, Outlayer.prototype ); + } + // set contructor, used for namespace and Item + Layout.prototype.constructor = Layout; + + Layout.defaults = extend( {}, Outlayer.defaults ); + // apply new options + extend( Layout.defaults, options ); + // keep prototype.settings for backwards compatibility (Packery v1.2.0) + Layout.prototype.settings = {}; + + Layout.namespace = namespace; + + Layout.data = Outlayer.data; + + // sub-class Item + Layout.Item = function LayoutItem() { + Item.apply( this, arguments ); + }; + + Layout.Item.prototype = new Item(); + + // -------------------------- declarative -------------------------- // + + /** + * allow user to initialize Outlayer via .js-namespace class + * options are parsed from data-namespace-option attribute + */ + docReady( function() { + var dashedNamespace = toDashed( namespace ); + var elems = document.querySelectorAll( '.js-' + dashedNamespace ); + var dataAttr = 'data-' + dashedNamespace + '-options'; + + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + var attr = elem.getAttribute( dataAttr ); + var options; + try { + options = attr && JSON.parse( attr ); + } catch ( error ) { + // log error, do not initialize + if ( console ) { + console.error( 'Error parsing ' + dataAttr + ' on ' + + elem.nodeName.toLowerCase() + ( elem.id ? '#' + elem.id : '' ) + ': ' + + error ); + } + continue; + } + // initialize + var instance = new Layout( elem, options ); + // make available via $().data('layoutname') + if ( jQuery ) { + jQuery.data( elem, namespace, instance ); + } + } + }); + + // -------------------------- jQuery bridge -------------------------- // + + // make into jQuery plugin + if ( jQuery && jQuery.bridget ) { + jQuery.bridget( namespace, Layout ); + } + + return Layout; +}; + +// ----- fin ----- // + +// back in global +Outlayer.Item = Item; + +return Outlayer; + +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'outlayer/outlayer',[ + 'eventie/eventie', + 'doc-ready/doc-ready', + 'eventEmitter/EventEmitter', + 'get-size/get-size', + 'matches-selector/matches-selector', + './item' + ], + outlayerDefinition ); +} else { + // browser global + window.Outlayer = outlayerDefinition( + window.eventie, + window.docReady, + window.EventEmitter, + window.getSize, + window.matchesSelector, + window.Outlayer.Item + ); +} + +})( window ); + +/** + * Isotope Item +**/ + +( function( window ) { + + + +// -------------------------- Item -------------------------- // + +function itemDefinition( Outlayer ) { + +// sub-class Outlayer Item +function Item() { + Outlayer.Item.apply( this, arguments ); +} + +Item.prototype = new Outlayer.Item(); + +Item.prototype._create = function() { + // assign id, used for original-order sorting + this.id = this.layout.itemGUID++; + Outlayer.Item.prototype._create.call( this ); + this.sortData = {}; +}; + +Item.prototype.updateSortData = function() { + if ( this.isIgnored ) { + return; + } + // default sorters + this.sortData.id = this.id; + // for backward compatibility + this.sortData['original-order'] = this.id; + this.sortData.random = Math.random(); + // go thru getSortData obj and apply the sorters + var getSortData = this.layout.options.getSortData; + var sorters = this.layout._sorters; + for ( var key in getSortData ) { + var sorter = sorters[ key ]; + this.sortData[ key ] = sorter( this.element, this ); + } +}; + +return Item; + +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'isotope/js/item',[ + 'outlayer/outlayer' + ], + itemDefinition ); +} else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.Item = itemDefinition( + window.Outlayer + ); +} + +})( window ); + +( function( window ) { + + + +// -------------------------- -------------------------- // + +function layoutModeDefinition( getSize, Outlayer ) { + + // layout mode class + function LayoutMode( isotope ) { + this.isotope = isotope; + // link properties + if ( isotope ) { + this.options = isotope.options[ this.namespace ]; + this.element = isotope.element; + this.items = isotope.filteredItems; + this.size = isotope.size; + } + } + + /** + * some methods should just defer to default Outlayer method + * and reference the Isotope instance as `this` + **/ + ( function() { + var facadeMethods = [ + '_resetLayout', + '_getItemLayoutPosition', + '_manageStamp', + '_getContainerSize', + '_getElementOffset', + 'needsResizeLayout' + ]; + + for ( var i=0, len = facadeMethods.length; i < len; i++ ) { + var methodName = facadeMethods[i]; + LayoutMode.prototype[ methodName ] = getOutlayerMethod( methodName ); + } + + function getOutlayerMethod( methodName ) { + return function() { + return Outlayer.prototype[ methodName ].apply( this.isotope, arguments ); + }; + } + })(); + + // ----- ----- // + + // for horizontal layout modes, check vertical size + LayoutMode.prototype.needsVerticalResizeLayout = function() { + // don't trigger if size did not change + var size = getSize( this.isotope.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.isotope.size && size; + return hasSizes && size.innerHeight !== this.isotope.size.innerHeight; + }; + + // ----- measurements ----- // + + LayoutMode.prototype._getMeasurement = function() { + this.isotope._getMeasurement.apply( this, arguments ); + }; + + LayoutMode.prototype.getColumnWidth = function() { + this.getSegmentSize( 'column', 'Width' ); + }; + + LayoutMode.prototype.getRowHeight = function() { + this.getSegmentSize( 'row', 'Height' ); + }; + + /** + * get columnWidth or rowHeight + * segment: 'column' or 'row' + * size 'Width' or 'Height' + **/ + LayoutMode.prototype.getSegmentSize = function( segment, size ) { + var segmentName = segment + size; + var outerSize = 'outer' + size; + // columnWidth / outerWidth // rowHeight / outerHeight + this._getMeasurement( segmentName, outerSize ); + // got rowHeight or columnWidth, we can chill + if ( this[ segmentName ] ) { + return; + } + // fall back to item of first element + var firstItemSize = this.getFirstItemSize(); + this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] || + // or size of container + this.isotope.size[ 'inner' + size ]; + }; + + LayoutMode.prototype.getFirstItemSize = function() { + var firstItem = this.isotope.filteredItems[0]; + return firstItem && firstItem.element && getSize( firstItem.element ); + }; + + // ----- methods that should reference isotope ----- // + + LayoutMode.prototype.layout = function() { + this.isotope.layout.apply( this.isotope, arguments ); + }; + + LayoutMode.prototype.getSize = function() { + this.isotope.getSize(); + this.size = this.isotope.size; + }; + + // -------------------------- create -------------------------- // + + LayoutMode.modes = {}; + + LayoutMode.create = function( namespace, options ) { + + function Mode() { + LayoutMode.apply( this, arguments ); + } + + Mode.prototype = new LayoutMode(); + + // default options + if ( options ) { + Mode.options = options; + } + + Mode.prototype.namespace = namespace; + // register in Isotope + LayoutMode.modes[ namespace ] = Mode; + + return Mode; + }; + + + return LayoutMode; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'isotope/js/layout-mode',[ + 'get-size/get-size', + 'outlayer/outlayer' + ], + layoutModeDefinition ); +} else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.LayoutMode = layoutModeDefinition( + window.getSize, + window.Outlayer + ); +} + + +})( window ); + +/*! + * Masonry v3.1.4 + * Cascading grid layout library + * http://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +( function( window ) { + + + +// -------------------------- helpers -------------------------- // + +var indexOf = Array.prototype.indexOf ? + function( items, value ) { + return items.indexOf( value ); + } : + function ( items, value ) { + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( item === value ) { + return i; + } + } + return -1; + }; + +// -------------------------- masonryDefinition -------------------------- // + +// used for AMD definition and requires +function masonryDefinition( Outlayer, getSize ) { + // create an Outlayer layout class + var Masonry = Outlayer.create('masonry'); + + Masonry.prototype._resetLayout = function() { + this.getSize(); + this._getMeasurement( 'columnWidth', 'outerWidth' ); + this._getMeasurement( 'gutter', 'outerWidth' ); + this.measureColumns(); + + // reset column Y + var i = this.cols; + this.colYs = []; + while (i--) { + this.colYs.push( 0 ); + } + + this.maxY = 0; + }; + + Masonry.prototype.measureColumns = function() { + this.getContainerWidth(); + // if columnWidth is 0, default to outerWidth of first item + if ( !this.columnWidth ) { + var firstItem = this.items[0]; + var firstItemElem = firstItem && firstItem.element; + // columnWidth fall back to item of first element + this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth || + // if first elem has no width, default to size of container + this.containerWidth; + } + + this.columnWidth += this.gutter; + + this.cols = Math.floor( ( this.containerWidth + this.gutter ) / this.columnWidth ); + this.cols = Math.max( this.cols, 1 ); + }; + + Masonry.prototype.getContainerWidth = function() { + // container is parent if fit width + var container = this.options.isFitWidth ? this.element.parentNode : this.element; + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var size = getSize( container ); + this.containerWidth = size && size.innerWidth; + }; + + Masonry.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + // how many columns does this brick span + var remainder = item.size.outerWidth % this.columnWidth; + var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; + // round if off by 1 pixel, otherwise use ceil + var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth ); + colSpan = Math.min( colSpan, this.cols ); + + var colGroup = this._getColGroup( colSpan ); + // get the minimum Y value from the columns + var minimumY = Math.min.apply( Math, colGroup ); + var shortColIndex = indexOf( colGroup, minimumY ); + + // position the brick + var position = { + x: this.columnWidth * shortColIndex, + y: minimumY + }; + + // apply setHeight to necessary columns + var setHeight = minimumY + item.size.outerHeight; + var setSpan = this.cols + 1 - colGroup.length; + for ( var i = 0; i < setSpan; i++ ) { + this.colYs[ shortColIndex + i ] = setHeight; + } + + return position; + }; + + /** + * @param {Number} colSpan - number of columns the element spans + * @returns {Array} colGroup + */ + Masonry.prototype._getColGroup = function( colSpan ) { + if ( colSpan < 2 ) { + // if brick spans only one column, use all the column Ys + return this.colYs; + } + + var colGroup = []; + // how many different places could this brick fit horizontally + var groupCount = this.cols + 1 - colSpan; + // for each group potential horizontal position + for ( var i = 0; i < groupCount; i++ ) { + // make an array of colY values for that one group + var groupColYs = this.colYs.slice( i, i + colSpan ); + // and get the max value of the array + colGroup[i] = Math.max.apply( Math, groupColYs ); + } + return colGroup; + }; + + Masonry.prototype._manageStamp = function( stamp ) { + var stampSize = getSize( stamp ); + var offset = this._getElementOffset( stamp ); + // get the columns that this stamp affects + var firstX = this.options.isOriginLeft ? offset.left : offset.right; + var lastX = firstX + stampSize.outerWidth; + var firstCol = Math.floor( firstX / this.columnWidth ); + firstCol = Math.max( 0, firstCol ); + var lastCol = Math.floor( lastX / this.columnWidth ); + // lastCol should not go over if multiple of columnWidth #425 + lastCol -= lastX % this.columnWidth ? 0 : 1; + lastCol = Math.min( this.cols - 1, lastCol ); + // set colYs to bottom of the stamp + var stampMaxY = ( this.options.isOriginTop ? offset.top : offset.bottom ) + + stampSize.outerHeight; + for ( var i = firstCol; i <= lastCol; i++ ) { + this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); + } + }; + + Masonry.prototype._getContainerSize = function() { + this.maxY = Math.max.apply( Math, this.colYs ); + var size = { + height: this.maxY + }; + + if ( this.options.isFitWidth ) { + size.width = this._getContainerFitWidth(); + } + + return size; + }; + + Masonry.prototype._getContainerFitWidth = function() { + var unusedCols = 0; + // count unused columns + var i = this.cols; + while ( --i ) { + if ( this.colYs[i] !== 0 ) { + break; + } + unusedCols++; + } + // fit container to columns that have been used + return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; + }; + + // debounced, layout on resize + // HEADS UP this overwrites Outlayer.resize + // Any changes in Outlayer.resize need to be manually added here + Masonry.prototype.resize = function() { + // don't trigger if size did not change + var previousWidth = this.containerWidth; + this.getContainerWidth(); + if ( previousWidth === this.containerWidth ) { + return; + } + + this.layout(); + }; + + return Masonry; +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'masonry/masonry',[ + 'outlayer/outlayer', + 'get-size/get-size' + ], + masonryDefinition ); +} else { + // browser global + window.Masonry = masonryDefinition( + window.Outlayer, + window.getSize + ); +} + +})( window ); + +/*! + * Masonry layout mode + * sub-classes Masonry + * http://masonry.desandro.com + */ + +( function( window ) { + + + +// -------------------------- helpers -------------------------- // + +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} + +// -------------------------- masonryDefinition -------------------------- // + +// used for AMD definition and requires +function masonryDefinition( LayoutMode, Masonry ) { + // create an Outlayer layout class + var MasonryMode = LayoutMode.create('masonry'); + + // save on to these methods + var _getElementOffset = MasonryMode.prototype._getElementOffset; + var layout = MasonryMode.prototype.layout; + var _getMeasurement = MasonryMode.prototype._getMeasurement; + + // sub-class Masonry + extend( MasonryMode.prototype, Masonry.prototype ); + + // set back, as it was overwritten by Masonry + MasonryMode.prototype._getElementOffset = _getElementOffset; + MasonryMode.prototype.layout = layout; + MasonryMode.prototype._getMeasurement = _getMeasurement; + + var measureColumns = MasonryMode.prototype.measureColumns; + MasonryMode.prototype.measureColumns = function() { + // set items, used if measuring first item + this.items = this.isotope.filteredItems; + measureColumns.call( this ); + }; + + // HACK copy over isOriginLeft/Top options + var _manageStamp = MasonryMode.prototype._manageStamp; + MasonryMode.prototype._manageStamp = function() { + this.options.isOriginLeft = this.isotope.options.isOriginLeft; + this.options.isOriginTop = this.isotope.options.isOriginTop; + _manageStamp.apply( this, arguments ); + }; + + return MasonryMode; +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'isotope/js/layout-modes/masonry',[ + '../layout-mode', + 'masonry/masonry' + ], + masonryDefinition ); +} else { + // browser global + masonryDefinition( + window.Isotope.LayoutMode, + window.Masonry + ); +} + +})( window ); + +( function( window ) { + + + +function fitRowsDefinition( LayoutMode ) { + +var FitRows = LayoutMode.create('fitRows'); + +FitRows.prototype._resetLayout = function() { + this.x = 0; + this.y = 0; + this.maxY = 0; +}; + +FitRows.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + + // if this element cannot fit in the current row + if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) { + this.x = 0; + this.y = this.maxY; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); + this.x += item.size.outerWidth; + + return position; +}; + +FitRows.prototype._getContainerSize = function() { + return { height: this.maxY }; +}; + +return FitRows; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'isotope/js/layout-modes/fit-rows',[ + '../layout-mode' + ], + fitRowsDefinition ); +} else { + // browser global + fitRowsDefinition( + window.Isotope.LayoutMode + ); +} + +})( window ); + +( function( window ) { + + + +function verticalDefinition( LayoutMode ) { + +var Vertical = LayoutMode.create( 'vertical', { + horizontalAlignment: 0 +}); + +Vertical.prototype._resetLayout = function() { + this.y = 0; +}; + +Vertical.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) * + this.options.horizontalAlignment; + var y = this.y; + this.y += item.size.outerHeight; + return { x: x, y: y }; +}; + +Vertical.prototype._getContainerSize = function() { + return { height: this.y }; +}; + +return Vertical; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'isotope/js/layout-modes/vertical',[ + '../layout-mode' + ], + verticalDefinition ); +} else { + // browser global + verticalDefinition( + window.Isotope.LayoutMode + ); +} + +})( window ); + +/*! + * Isotope v2.0.0-beta.9 + * Magical sorting and filtering layouts + * http://isotope.metafizzy.co + */ + +( function( window ) { + + + +// -------------------------- vars -------------------------- // + +var jQuery = window.jQuery; + +// -------------------------- helpers -------------------------- // + +// extend objects +function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +} + +var trim = String.prototype.trim ? + function( str ) { + return str.trim(); + } : + function( str ) { + return str.replace( /^\s+|\s+$/g, '' ); + }; + +var docElem = document.documentElement; + +var getText = docElem.textContent ? + function( elem ) { + return elem.textContent; + } : + function( elem ) { + return elem.innerText; + }; + +var objToString = Object.prototype.toString; +function isArray( obj ) { + return objToString.call( obj ) === '[object Array]'; +} + +// index of helper cause IE8 +var indexOf = Array.prototype.indexOf ? function( ary, obj ) { + return ary.indexOf( obj ); + } : function( ary, obj ) { + for ( var i=0, len = ary.length; i < len; i++ ) { + if ( ary[i] === obj ) { + return i; + } + } + return -1; + }; + +// turn element or nodeList into an array +function makeArray( obj ) { + var ary = []; + if ( isArray( obj ) ) { + // use object if already an array + ary = obj; + } else if ( obj && typeof obj.length === 'number' ) { + // convert nodeList to array + for ( var i=0, len = obj.length; i < len; i++ ) { + ary.push( obj[i] ); + } + } else { + // array of single index + ary.push( obj ); + } + return ary; +} + +function removeFrom( obj, ary ) { + var index = indexOf( ary, obj ); + if ( index !== -1 ) { + ary.splice( index, 1 ); + } +} + +// -------------------------- isotopeDefinition -------------------------- // + +// used for AMD definition and requires +function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode ) { + // create an Outlayer layout class + var Isotope = Outlayer.create( 'isotope', { + layoutMode: "masonry", + isJQueryFiltering: true, + sortAscending: true + }); + + Isotope.Item = Item; + Isotope.LayoutMode = LayoutMode; + + Isotope.prototype._create = function() { + this.itemGUID = 0; + // functions that sort items + this._sorters = {}; + this._getSorters(); + // call super + Outlayer.prototype._create.call( this ); + + // create layout modes + this.modes = {}; + // start filteredItems with all items + this.filteredItems = this.items; + // keep of track of sortBys + this.sortHistory = [ 'original-order' ]; + // create from registered layout modes + for ( var name in LayoutMode.modes ) { + this._initLayoutMode( name ); + } + }; + + Isotope.prototype.reloadItems = function() { + // reset item ID counter + this.itemGUID = 0; + // call super + Outlayer.prototype.reloadItems.call( this ); + }; + + Isotope.prototype._itemize = function() { + var items = Outlayer.prototype._itemize.apply( this, arguments ); + // assign ID for original-order + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.id = this.itemGUID++; + } + this._updateItemsSortData( items ); + return items; + }; + + + // -------------------------- layout -------------------------- // + + Isotope.prototype._initLayoutMode = function( name ) { + var Mode = LayoutMode.modes[ name ]; + // set mode options + // HACK extend initial options, back-fill in default options + var initialOpts = this.options[ name ] || {}; + this.options[ name ] = Mode.options ? + extend( Mode.options, initialOpts ) : initialOpts; + // init layout mode instance + this.modes[ name ] = new Mode( this ); + }; + + + Isotope.prototype.layout = function() { + // if first time doing layout, do all magic + if ( !this._isLayoutInited && this.options.isInitLayout ) { + this.arrange(); + return; + } + this._layout(); + }; + + // private method to be used in layout() & magic() + Isotope.prototype._layout = function() { + // don't animate first layout + var isInstant = this._getIsInstant(); + // layout flow + this._resetLayout(); + this._manageStamps(); + this.layoutItems( this.filteredItems, isInstant ); + + // flag for initalized + this._isLayoutInited = true; + }; + + // filter + sort + layout + Isotope.prototype.arrange = function( opts ) { + // set any options pass + this.option( opts ); + this._getIsInstant(); + // filter, sort, and layout + this.filteredItems = this._filter( this.items ); + this._sort(); + this._layout(); + }; + // alias to _init for main plugin method + Isotope.prototype._init = Isotope.prototype.arrange; + + // HACK + // Don't animate/transition first layout + // Or don't animate/transition other layouts + Isotope.prototype._getIsInstant = function() { + var isInstant = this.options.isLayoutInstant !== undefined ? + this.options.isLayoutInstant : !this._isLayoutInited; + this._isInstant = isInstant; + return isInstant; + }; + + // -------------------------- filter -------------------------- // + + Isotope.prototype._filter = function( items ) { + var filter = this.options.filter; + filter = filter || '*'; + var matches = []; + var hiddenMatched = []; + var visibleUnmatched = []; + + var test = this._getFilterTest( filter ); + + // test each item + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + if ( item.isIgnored ) { + continue; + } + // add item to either matched or unmatched group + var isMatched = test( item ); + // item.isFilterMatched = isMatched; + // add to matches if its a match + if ( isMatched ) { + matches.push( item ); + } + // add to additional group if item needs to be hidden or revealed + if ( isMatched && item.isHidden ) { + hiddenMatched.push( item ); + } else if ( !isMatched && !item.isHidden ) { + visibleUnmatched.push( item ); + } + } + + var _this = this; + function hideReveal() { + _this.reveal( hiddenMatched ); + _this.hide( visibleUnmatched ); + } + + if ( this._isInstant ) { + this._noTransition( hideReveal ); + } else { + hideReveal(); + } + + return matches; + }; + + // get a jQuery, function, or a matchesSelector test given the filter + Isotope.prototype._getFilterTest = function( filter ) { + if ( jQuery && this.options.isJQueryFiltering ) { + // use jQuery + return function( item ) { + return jQuery( item.element ).is( filter ); + }; + } + if ( typeof filter === 'function' ) { + // use filter as function + return function( item ) { + return filter( item.element ); + }; + } + // default, use filter as selector string + return function( item ) { + return matchesSelector( item.element, filter ); + }; + }; + + // -------------------------- sorting -------------------------- // + + /** + * @params {Array} elems + * @public + */ + Isotope.prototype.updateSortData = function( elems ) { + this._getSorters(); + // update item sort data + // default to all items if none are passed in + elems = makeArray( elems ); + var items = this.getItems( elems ); + // if no items found, update all items + items = items.length ? items : this.items; + this._updateItemsSortData( items ); + }; + + Isotope.prototype._getSorters = function() { + var getSortData = this.options.getSortData; + for ( var key in getSortData ) { + var sorter = getSortData[ key ]; + this._sorters[ key ] = mungeSorter( sorter ); + } + }; + + /** + * @params {Array} items - of Isotope.Items + * @private + */ + Isotope.prototype._updateItemsSortData = function( items ) { + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.updateSortData(); + } + }; + + // ----- munge sorter ----- // + + // encapsulate this, as we just need mungeSorter + // other functions in here are just for munging + var mungeSorter = ( function() { + // add a magic layer to sorters for convienent shorthands + // `.foo-bar` will use the text of .foo-bar querySelector + // `[foo-bar]` will use attribute + // you can also add parser + // `.foo-bar parseInt` will parse that as a number + function mungeSorter( sorter ) { + // if not a string, return function or whatever it is + if ( typeof sorter !== 'string' ) { + return sorter; + } + // parse the sorter string + var args = trim( sorter ).split(' '); + var query = args[0]; + // check if query looks like [an-attribute] + var attrMatch = query.match( /^\[(.+)\]$/ ); + var attr = attrMatch && attrMatch[1]; + var getValue = getValueGetter( attr, query ); + // use second argument as a parser + var parser = Isotope.sortDataParsers[ args[1] ]; + // parse the value, if there was a parser + sorter = parser ? function( elem ) { + return elem && parser( getValue( elem ) ); + } : + // otherwise just return value + function( elem ) { + return elem && getValue( elem ); + }; + + return sorter; + } + + // get an attribute getter, or get text of the querySelector + function getValueGetter( attr, query ) { + var getValue; + // if query looks like [foo-bar], get attribute + if ( attr ) { + getValue = function( elem ) { + return elem.getAttribute( attr ); + }; + } else { + // otherwise, assume its a querySelector, and get its text + getValue = function( elem ) { + var child = elem.querySelector( query ); + return child && getText( child ); + }; + } + return getValue; + } + + return mungeSorter; + })(); + + // parsers used in getSortData shortcut strings + Isotope.sortDataParsers = { + 'parseInt': function( val ) { + return parseInt( val, 10 ); + }, + 'parseFloat': function( val ) { + return parseFloat( val ); + } + }; + + // ----- sort method ----- // + + // sort filteredItem order + Isotope.prototype._sort = function() { + var sortByOpt = this.options.sortBy; + if ( !sortByOpt ) { + return; + } + // concat all sortBy and sortHistory + var sortBys = [].concat.apply( sortByOpt, this.sortHistory ); + // sort magic + var itemSorter = getItemSorter( sortBys, this.options.sortAscending ); + this.filteredItems.sort( itemSorter ); + // keep track of sortBy History + if ( sortByOpt !== this.sortHistory[0] ) { + // add to front, oldest goes in last + this.sortHistory.unshift( sortByOpt ); + } + }; + + // returns a function used for sorting + function getItemSorter( sortBys, sortAsc ) { + return function sorter( itemA, itemB ) { + // cycle through all sortKeys + for ( var i = 0, len = sortBys.length; i < len; i++ ) { + var sortBy = sortBys[i]; + var a = itemA.sortData[ sortBy ]; + var b = itemB.sortData[ sortBy ]; + if ( a > b || a < b ) { + // if sortAsc is an object, use the value given the sortBy key + var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc; + var direction = isAscending ? 1 : -1; + return ( a > b ? 1 : -1 ) * direction; + } + } + return 0; + }; + } + + // -------------------------- methods -------------------------- // + + // get layout mode + Isotope.prototype._mode = function() { + var layoutMode = this.options.layoutMode; + var mode = this.modes[ layoutMode ]; + if ( !mode ) { + // TODO console.error + throw new Error( 'No layout mode: ' + layoutMode ); + } + // HACK sync mode's options + // any options set after init for layout mode need to be synced + mode.options = this.options[ layoutMode ]; + return mode; + }; + + Isotope.prototype._resetLayout = function() { + // trigger original reset layout + Outlayer.prototype._resetLayout.call( this ); + this._mode()._resetLayout(); + }; + + Isotope.prototype._getItemLayoutPosition = function( item ) { + return this._mode()._getItemLayoutPosition( item ); + }; + + Isotope.prototype._manageStamp = function( stamp ) { + this._mode()._manageStamp( stamp ); + }; + + Isotope.prototype._getContainerSize = function() { + return this._mode()._getContainerSize(); + }; + + Isotope.prototype.needsResizeLayout = function() { + return this._mode().needsResizeLayout(); + }; + + // -------------------------- adding & removing -------------------------- // + + // HEADS UP overwrites default Outlayer appended + Isotope.prototype.appended = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + var filteredItems = this._filterRevealAdded( items ); + // add to filteredItems + this.filteredItems = this.filteredItems.concat( filteredItems ); + }; + + // HEADS UP overwrites default Outlayer prepended + Isotope.prototype.prepended = function( elems ) { + var items = this._itemize( elems ); + if ( !items.length ) { + return; + } + // add items to beginning of collection + var previousItems = this.items.slice(0); + this.items = items.concat( previousItems ); + // start new layout + this._resetLayout(); + this._manageStamps(); + // layout new stuff without transition + var filteredItems = this._filterRevealAdded( items ); + // layout previous items + this.layoutItems( previousItems ); + // add to filteredItems + this.filteredItems = filteredItems.concat( this.filteredItems ); + }; + + Isotope.prototype._filterRevealAdded = function( items ) { + var filteredItems = this._noTransition( function() { + return this._filter( items ); + }); + // layout and reveal just the new items + this.layoutItems( filteredItems, true ); + this.reveal( filteredItems ); + return items; + }; + + /** + * Filter, sort, and layout newly-appended item elements + * @param {Array or NodeList or Element} elems + */ + Isotope.prototype.insert = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + // append item elements + var i, item; + var len = items.length; + for ( i=0; i < len; i++ ) { + item = items[i]; + this.element.appendChild( item.element ); + } + // filter new stuff + /* + // this way adds hides new filtered items with NO transition + // so user can't see if new hidden items have been inserted + var filteredInsertItems; + this._noTransition( function() { + filteredInsertItems = this._filter( items ); + // hide all new items + this.hide( filteredInsertItems ); + }); + // */ + // this way hides new filtered items with transition + // so user at least sees that something has been added + var filteredInsertItems = this._filter( items ); + // hide all newitems + this._noTransition( function() { + this.hide( filteredInsertItems ); + }); + // */ + // set flag + for ( i=0; i < len; i++ ) { + items[i].isLayoutInstant = true; + } + this.arrange(); + // reset flag + for ( i=0; i < len; i++ ) { + delete items[i].isLayoutInstant; + } + this.reveal( filteredInsertItems ); + }; + + var _remove = Isotope.prototype.remove; + Isotope.prototype.remove = function( elems ) { + elems = makeArray( elems ); + var removeItems = this.getItems( elems ); + // do regular thing + _remove.call( this, elems ); + // bail if no items to remove + if ( !removeItems || !removeItems.length ) { + return; + } + // remove elems from filteredItems + for ( var i=0, len = removeItems.length; i < len; i++ ) { + var item = removeItems[i]; + // remove item from collection + removeFrom( item, this.filteredItems ); + } + }; + + /** + * trigger fn without transition + * kind of hacky to have this in the first place + * @param {Function} fn + * @returns ret + * @private + */ + Isotope.prototype._noTransition = function( fn ) { + // save transitionDuration before disabling + var transitionDuration = this.options.transitionDuration; + // disable transition + this.options.transitionDuration = 0; + // do it + var returnValue = fn.call( this ); + // re-enable transition for reveal + this.options.transitionDuration = transitionDuration; + return returnValue; + }; + + // ----- ----- // + + return Isotope; +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + 'outlayer/outlayer', + 'get-size/get-size', + 'matches-selector/matches-selector', + 'isotope/js/item', + 'isotope/js/layout-mode', + // include default layout modes + 'isotope/js/layout-modes/masonry', + 'isotope/js/layout-modes/fit-rows', + 'isotope/js/layout-modes/vertical' + ], + isotopeDefinition ); +} else { + // browser global + window.Isotope = isotopeDefinition( + window.Outlayer, + window.getSize, + window.matchesSelector, + window.Isotope.Item, + window.Isotope.LayoutMode + ); +} + +})( window ); + diff --git a/dist/isotope.pkgd.min.js b/dist/isotope.pkgd.min.js new file mode 100644 index 0000000..c8bc26e --- /dev/null +++ b/dist/isotope.pkgd.min.js @@ -0,0 +1,8 @@ +/*! + * Isotope PACKAGED v2.0.0-beta.9 + * Magical sorting and filtering layouts + * http://isotope.metafizzy.co + */ + +(function(t){function e(){}function i(t){function i(e){e.prototype.option||(e.prototype.option=function(e){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))})}function n(e,i){t.fn[e]=function(n){if("string"==typeof n){for(var s=o.call(arguments,1),a=0,u=this.length;u>a;a++){var p=this[a],h=t.data(p,e);if(h)if(t.isFunction(h[n])&&"_"!==n.charAt(0)){var f=h[n].apply(h,s);if(void 0!==f)return f}else r("no such method '"+n+"' for "+e+" instance");else r("cannot call methods on "+e+" prior to initialization; "+"attempted to call '"+n+"'")}return this}return this.each(function(){var o=t.data(this,e);o?(o.option(n),o._init()):(o=new i(this,n),t.data(this,e,o))})}}if(t){var r="undefined"==typeof console?e:function(t){console.error(t)};return t.bridget=function(t,e){i(e),n(t,e)},t.bridget}}var o=Array.prototype.slice;"function"==typeof define&&define.amd?define("jquery-bridget/jquery.bridget",["jquery"],i):i(t.jQuery)})(window),function(t){function e(e){var i=t.event;return i.target=i.target||i.srcElement||e,i}var i=document.documentElement,o=function(){};i.addEventListener?o=function(t,e,i){t.addEventListener(e,i,!1)}:i.attachEvent&&(o=function(t,i,o){t[i+o]=o.handleEvent?function(){var i=e(t);o.handleEvent.call(o,i)}:function(){var i=e(t);o.call(t,i)},t.attachEvent("on"+i,t[i+o])});var n=function(){};i.removeEventListener?n=function(t,e,i){t.removeEventListener(e,i,!1)}:i.detachEvent&&(n=function(t,e,i){t.detachEvent("on"+e,t[e+i]);try{delete t[e+i]}catch(o){t[e+i]=void 0}});var r={bind:o,unbind:n};"function"==typeof define&&define.amd?define("eventie/eventie",r):"object"==typeof exports?module.exports=r:t.eventie=r}(this),function(t){function e(t){"function"==typeof t&&(e.isReady?t():r.push(t))}function i(t){var i="readystatechange"===t.type&&"complete"!==n.readyState;if(!e.isReady&&!i){e.isReady=!0;for(var o=0,s=r.length;s>o;o++){var a=r[o];a()}}}function o(o){return o.bind(n,"DOMContentLoaded",i),o.bind(n,"readystatechange",i),o.bind(t,"load",i),e}var n=t.document,r=[];e.isReady=!1,"function"==typeof define&&define.amd?(e.isReady="function"==typeof requirejs,define("doc-ready/doc-ready",["eventie/eventie"],o)):t.docReady=o(t.eventie)}(this),function(){function t(){}function e(t,e){for(var i=t.length;i--;)if(t[i].listener===e)return i;return-1}function i(t){return function(){return this[t].apply(this,arguments)}}var o=t.prototype,n=this,r=n.EventEmitter;o.getListeners=function(t){var e,i,o=this._getEvents();if(t instanceof RegExp){e={};for(i in o)o.hasOwnProperty(i)&&t.test(i)&&(e[i]=o[i])}else e=o[t]||(o[t]=[]);return e},o.flattenListeners=function(t){var e,i=[];for(e=0;t.length>e;e+=1)i.push(t[e].listener);return i},o.getListenersAsObject=function(t){var e,i=this.getListeners(t);return i instanceof Array&&(e={},e[t]=i),e||i},o.addListener=function(t,i){var o,n=this.getListenersAsObject(t),r="object"==typeof i;for(o in n)n.hasOwnProperty(o)&&-1===e(n[o],i)&&n[o].push(r?i:{listener:i,once:!1});return this},o.on=i("addListener"),o.addOnceListener=function(t,e){return this.addListener(t,{listener:e,once:!0})},o.once=i("addOnceListener"),o.defineEvent=function(t){return this.getListeners(t),this},o.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},o.removeListener=function(t,i){var o,n,r=this.getListenersAsObject(t);for(n in r)r.hasOwnProperty(n)&&(o=e(r[n],i),-1!==o&&r[n].splice(o,1));return this},o.off=i("removeListener"),o.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},o.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},o.manipulateListeners=function(t,e,i){var o,n,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(o=i.length;o--;)r.call(this,e,i[o]);else for(o in e)e.hasOwnProperty(o)&&(n=e[o])&&("function"==typeof n?r.call(this,o,n):s.call(this,o,n));return this},o.removeEvent=function(t){var e,i=typeof t,o=this._getEvents();if("string"===i)delete o[t];else if(t instanceof RegExp)for(e in o)o.hasOwnProperty(e)&&t.test(e)&&delete o[e];else delete this._events;return this},o.removeAllListeners=i("removeEvent"),o.emitEvent=function(t,e){var i,o,n,r,s=this.getListenersAsObject(t);for(n in s)if(s.hasOwnProperty(n))for(o=s[n].length;o--;)i=s[n][o],i.once===!0&&this.removeListener(t,i.listener),r=i.listener.apply(this,e||[]),r===this._getOnceReturnValue()&&this.removeListener(t,i.listener);return this},o.trigger=i("emitEvent"),o.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},o.setOnceReturnValue=function(t){return this._onceReturnValue=t,this},o._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},o._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return n.EventEmitter=r,t},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:this.EventEmitter=t}.call(this),function(t){function e(t){if(t){if("string"==typeof o[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,n=0,r=i.length;r>n;n++)if(e=i[n]+t,"string"==typeof o[e])return e}}var i="Webkit Moz ms Ms O".split(" "),o=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return e}):"object"==typeof exports?module.exports=e:t.getStyleProperty=e}(window),function(t){function e(t){var e=parseFloat(t),i=-1===t.indexOf("%")&&!isNaN(e);return i&&e}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,i=s.length;i>e;e++){var o=s[e];t[o]=0}return t}function o(t){function o(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var o=r(t);if("none"===o.display)return i();var n={};n.width=t.offsetWidth,n.height=t.offsetHeight;for(var h=n.isBorderBox=!(!p||!o[p]||"border-box"!==o[p]),f=0,c=s.length;c>f;f++){var d=s[f],l=o[d];l=a(t,l);var y=parseFloat(l);n[d]=isNaN(y)?0:y}var m=n.paddingLeft+n.paddingRight,g=n.paddingTop+n.paddingBottom,v=n.marginLeft+n.marginRight,_=n.marginTop+n.marginBottom,I=n.borderLeftWidth+n.borderRightWidth,L=n.borderTopWidth+n.borderBottomWidth,z=h&&u,S=e(o.width);S!==!1&&(n.width=S+(z?0:m+I));var b=e(o.height);return b!==!1&&(n.height=b+(z?0:g+L)),n.innerWidth=n.width-(m+I),n.innerHeight=n.height-(g+L),n.outerWidth=n.width+v,n.outerHeight=n.height+_,n}}function a(t,e){if(n||-1===e.indexOf("%"))return e;var i=t.style,o=i.left,r=t.runtimeStyle,s=r&&r.left;return s&&(r.left=t.currentStyle.left),i.left=e,e=i.pixelLeft,i.left=o,s&&(r.left=s),e}var u,p=t("boxSizing");return function(){if(p){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[p]="border-box";var i=document.body||document.documentElement;i.appendChild(t);var o=r(t);u=200===e(o.width),i.removeChild(t)}}(),o}var n=t.getComputedStyle,r=n?function(t){return n(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],o):"object"==typeof exports?module.exports=o(require("get-style-property")):t.getSize=o(t.getStyleProperty)}(window),function(t,e){function i(t,e){return t[a](e)}function o(t){if(!t.parentNode){var e=document.createDocumentFragment();e.appendChild(t)}}function n(t,e){o(t);for(var i=t.parentNode.querySelectorAll(e),n=0,r=i.length;r>n;n++)if(i[n]===t)return!0;return!1}function r(t,e){return o(t),i(t,e)}var s,a=function(){if(e.matchesSelector)return"matchesSelector";for(var t=["webkit","moz","ms","o"],i=0,o=t.length;o>i;i++){var n=t[i],r=n+"MatchesSelector";if(e[r])return r}}();if(a){var u=document.createElement("div"),p=i(u,"div");s=p?i:r}else s=n;"function"==typeof define&&define.amd?define("matches-selector/matches-selector",[],function(){return s}):window.matchesSelector=s}(this,Element.prototype),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){for(var e in t)return!1;return e=null,!0}function o(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}function n(t,n,r){function a(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var u=r("transition"),p=r("transform"),h=u&&p,f=!!r("perspective"),c={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"}[u],d=["transform","transition","transitionDuration","transitionProperty"],l=function(){for(var t={},e=0,i=d.length;i>e;e++){var o=d[e],n=r(o);n&&n!==o&&(t[o]=n)}return t}();e(a.prototype,t.prototype),a.prototype._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},a.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},a.prototype.getSize=function(){this.size=n(this.element)},a.prototype.css=function(t){var e=this.element.style;for(var i in t){var o=l[i]||i;e[o]=t[i]}},a.prototype.getPosition=function(){var t=s(this.element),e=this.layout.options,i=e.isOriginLeft,o=e.isOriginTop,n=parseInt(t[i?"left":"right"],10),r=parseInt(t[o?"top":"bottom"],10);n=isNaN(n)?0:n,r=isNaN(r)?0:r;var a=this.layout.size;n-=i?a.paddingLeft:a.paddingRight,r-=o?a.paddingTop:a.paddingBottom,this.position.x=n,this.position.y=r},a.prototype.layoutPosition=function(){var t=this.layout.size,e=this.layout.options,i={};e.isOriginLeft?(i.left=this.position.x+t.paddingLeft+"px",i.right=""):(i.right=this.position.x+t.paddingRight+"px",i.left=""),e.isOriginTop?(i.top=this.position.y+t.paddingTop+"px",i.bottom=""):(i.bottom=this.position.y+t.paddingBottom+"px",i.top=""),this.css(i),this.emitEvent("layout",[this])};var y=f?function(t,e){return"translate3d("+t+"px, "+e+"px, 0)"}:function(t,e){return"translate("+t+"px, "+e+"px)"};a.prototype._transitionTo=function(t,e){this.getPosition();var i=this.position.x,o=this.position.y,n=parseInt(t,10),r=parseInt(e,10),s=n===this.position.x&&r===this.position.y;if(this.setPosition(t,e),s&&!this.isTransitioning)return this.layoutPosition(),void 0;var a=t-i,u=e-o,p={},h=this.layout.options;a=h.isOriginLeft?a:-a,u=h.isOriginTop?u:-u,p.transform=y(a,u),this.transition({to:p,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},a.prototype.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},a.prototype.moveTo=h?a.prototype._transitionTo:a.prototype.goTo,a.prototype.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},a.prototype._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},a.prototype._transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return this._nonTransition(t),void 0;var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var o=this.element.offsetHeight;o=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var m=p&&o(p)+",opacity";a.prototype.enableTransition=function(){this.isTransitioning||(this.css({transitionProperty:m,transitionDuration:this.layout.options.transitionDuration}),this.element.addEventListener(c,this,!1))},a.prototype.transition=a.prototype[u?"_transition":"_nonTransition"],a.prototype.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},a.prototype.onotransitionend=function(t){this.ontransitionend(t)};var g={"-webkit-transform":"transform","-moz-transform":"transform","-o-transform":"transform"};a.prototype.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,o=g[t.propertyName]||t.propertyName;if(delete e.ingProperties[o],i(e.ingProperties)&&this.disableTransition(),o in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[o]),o in e.onEnd){var n=e.onEnd[o];n.call(this),delete e.onEnd[o]}this.emitEvent("transitionEnd",[this])}},a.prototype.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(c,this,!1),this.isTransitioning=!1},a.prototype._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var v={transitionProperty:"",transitionDuration:""};return a.prototype.removeTransitionStyles=function(){this.css(v)},a.prototype.removeElem=function(){this.element.parentNode.removeChild(this.element),this.emitEvent("remove",[this])},a.prototype.remove=function(){if(!u||!parseFloat(this.layout.options.transitionDuration))return this.removeElem(),void 0;var t=this;this.on("transitionEnd",function(){return t.removeElem(),!0}),this.hide()},a.prototype.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options;this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0})},a.prototype.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options;this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:{opacity:function(){this.isHidden&&this.css({display:"none"})}}})},a.prototype.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},a}var r=t.getComputedStyle,s=r?function(t){return r(t,null)}:function(t){return t.currentStyle};"function"==typeof define&&define.amd?define("outlayer/item",["eventEmitter/EventEmitter","get-size/get-size","get-style-property/get-style-property"],n):(t.Outlayer={},t.Outlayer.Item=n(t.EventEmitter,t.getSize,t.getStyleProperty))}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===f.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=d(e,t);-1!==i&&e.splice(i,1)}function r(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()}function s(i,s,f,d,l,y){function m(t,i){if("string"==typeof t&&(t=a.querySelector(t)),!t||!c(t))return u&&u.error("Bad "+this.constructor.namespace+" element: "+t),void 0;this.element=t,this.options=e({},this.constructor.defaults),this.option(i);var o=++g;this.element.outlayerGUID=o,v[o]=this,this._create(),this.options.isInitLayout&&this.layout()}var g=0,v={};return m.namespace="outlayer",m.Item=y,m.defaults={containerStyle:{position:"relative"},isInitLayout:!0,isOriginLeft:!0,isOriginTop:!0,isResizeBound:!0,isResizingContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}},e(m.prototype,f.prototype),m.prototype.option=function(t){e(this.options,t)},m.prototype._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),e(this.element.style,this.options.containerStyle),this.options.isResizeBound&&this.bindResize()},m.prototype.reloadItems=function(){this.items=this._itemize(this.element.children)},m.prototype._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,o=[],n=0,r=e.length;r>n;n++){var s=e[n],a=new i(s,this);o.push(a)}return o},m.prototype._filterFindItemElements=function(t){t=o(t);for(var e=this.options.itemSelector,i=[],n=0,r=t.length;r>n;n++){var s=t[n];if(c(s))if(e){l(s,e)&&i.push(s);for(var a=s.querySelectorAll(e),u=0,p=a.length;p>u;u++)i.push(a[u])}else i.push(s)}return i},m.prototype.getItemElements=function(){for(var t=[],e=0,i=this.items.length;i>e;e++)t.push(this.items[e].element);return t},m.prototype.layout=function(){this._resetLayout(),this._manageStamps();var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;this.layoutItems(this.items,t),this._isLayoutInited=!0},m.prototype._init=m.prototype.layout,m.prototype._resetLayout=function(){this.getSize()},m.prototype.getSize=function(){this.size=d(this.element)},m.prototype._getMeasurement=function(t,e){var i,o=this.options[t];o?("string"==typeof o?i=this.element.querySelector(o):c(o)&&(i=o),this[t]=i?d(i)[e]:o):this[t]=0},m.prototype.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},m.prototype._getItemsForLayout=function(t){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i];n.isIgnored||e.push(n)}return e},m.prototype._layoutItems=function(t,e){function i(){o.emitEvent("layoutComplete",[o,t])}var o=this;if(!t||!t.length)return i(),void 0;this._itemsOn(t,"layout",i);for(var n=[],r=0,s=t.length;s>r;r++){var a=t[r],u=this._getItemLayoutPosition(a);u.item=a,u.isInstant=e||a.isLayoutInstant,n.push(u)}this._processLayoutQueue(n)},m.prototype._getItemLayoutPosition=function(){return{x:0,y:0}},m.prototype._processLayoutQueue=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];this._positionItem(o.item,o.x,o.y,o.isInstant)}},m.prototype._positionItem=function(t,e,i,o){o?t.goTo(e,i):t.moveTo(e,i)},m.prototype._postLayout=function(){this.resizeContainer()},m.prototype.resizeContainer=function(){if(this.options.isResizingContainer){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))}},m.prototype._getContainerSize=h,m.prototype._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},m.prototype._itemsOn=function(t,e,i){function o(){return n++,n===r&&i.call(s),!0}for(var n=0,r=t.length,s=this,a=0,u=t.length;u>a;a++){var p=t[a];p.on(e,o)}},m.prototype.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},m.prototype.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},m.prototype.stamp=function(t){if(t=this._find(t)){this.stamps=this.stamps.concat(t);for(var e=0,i=t.length;i>e;e++){var o=t[e];this.ignore(o)}}},m.prototype.unstamp=function(t){if(t=this._find(t))for(var e=0,i=t.length;i>e;e++){var o=t[e];n(o,this.stamps),this.unignore(o)}},m.prototype._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=o(t)):void 0},m.prototype._manageStamps=function(){if(this.stamps&&this.stamps.length){this._getBoundingRect();for(var t=0,e=this.stamps.length;e>t;t++){var i=this.stamps[t];this._manageStamp(i)}}},m.prototype._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},m.prototype._manageStamp=h,m.prototype._getElementOffset=function(t){var e=t.getBoundingClientRect(),i=this._boundingRect,o=d(t),n={left:e.left-i.left-o.marginLeft,top:e.top-i.top-o.marginTop,right:i.right-e.right-o.marginRight,bottom:i.bottom-e.bottom-o.marginBottom};return n},m.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},m.prototype.bindResize=function(){this.isResizeBound||(i.bind(t,"resize",this),this.isResizeBound=!0)},m.prototype.unbindResize=function(){this.isResizeBound&&i.unbind(t,"resize",this),this.isResizeBound=!1},m.prototype.onresize=function(){function t(){e.resize(),delete e.resizeTimeout}this.resizeTimeout&&clearTimeout(this.resizeTimeout);var e=this;this.resizeTimeout=setTimeout(t,100)},m.prototype.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},m.prototype.needsResizeLayout=function(){var t=d(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},m.prototype.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},m.prototype.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},m.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},m.prototype.reveal=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.reveal()}},m.prototype.hide=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.hide()}},m.prototype.getItem=function(t){for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];if(o.element===t)return o}},m.prototype.getItems=function(t){if(t&&t.length){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i],r=this.getItem(n);r&&e.push(r)}return e}},m.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(e&&e.length){this._itemsOn(e,"remove",function(){this.emitEvent("removeComplete",[this,e])});for(var i=0,r=e.length;r>i;i++){var s=e[i];s.remove(),n(s,this.items)}}},m.prototype.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="";for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];o.destroy()}this.unbindResize(),delete this.element.outlayerGUID,p&&p.removeData(this.element,this.constructor.namespace)},m.data=function(t){var e=t&&t.outlayerGUID;return e&&v[e]},m.create=function(t,i){function o(){m.apply(this,arguments)}return Object.create?o.prototype=Object.create(m.prototype):e(o.prototype,m.prototype),o.prototype.constructor=o,o.defaults=e({},m.defaults),e(o.defaults,i),o.prototype.settings={},o.namespace=t,o.data=m.data,o.Item=function(){y.apply(this,arguments)},o.Item.prototype=new y,s(function(){for(var e=r(t),i=a.querySelectorAll(".js-"+e),n="data-"+e+"-options",s=0,h=i.length;h>s;s++){var f,c=i[s],d=c.getAttribute(n);try{f=d&&JSON.parse(d)}catch(l){u&&u.error("Error parsing "+n+" on "+c.nodeName.toLowerCase()+(c.id?"#"+c.id:"")+": "+l);continue}var y=new o(c,f);p&&p.data(c,t,y)}}),p&&p.bridget&&p.bridget(t,o),o},m.Item=y,m}var a=t.document,u=t.console,p=t.jQuery,h=function(){},f=Object.prototype.toString,c="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},d=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define("outlayer/outlayer",["eventie/eventie","doc-ready/doc-ready","eventEmitter/EventEmitter","get-size/get-size","matches-selector/matches-selector","./item"],s):t.Outlayer=s(t.eventie,t.docReady,t.EventEmitter,t.getSize,t.matchesSelector,t.Outlayer.Item)}(window),function(t){function e(t){function e(){t.Item.apply(this,arguments)}return e.prototype=new t.Item,e.prototype._create=function(){this.id=this.layout.itemGUID++,t.Item.prototype._create.call(this),this.sortData={}},e.prototype.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var t=this.layout.options.getSortData,e=this.layout._sorters;for(var i in t){var o=e[i];this.sortData[i]=o(this.element,this)}}},e}"function"==typeof define&&define.amd?define("isotope/js/item",["outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.Item=e(t.Outlayer))}(window),function(t){function e(t,e){function i(t){this.isotope=t,t&&(this.options=t.options[this.namespace],this.element=t.element,this.items=t.filteredItems,this.size=t.size)}return function(){function t(t){return function(){return e.prototype[t].apply(this.isotope,arguments)}}for(var o=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout"],n=0,r=o.length;r>n;n++){var s=o[n];i.prototype[s]=t(s)}}(),i.prototype.needsVerticalResizeLayout=function(){var e=t(this.isotope.element),i=this.isotope.size&&e;return i&&e.innerHeight!==this.isotope.size.innerHeight},i.prototype._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},i.prototype.getColumnWidth=function(){this.getSegmentSize("column","Width")},i.prototype.getRowHeight=function(){this.getSegmentSize("row","Height")},i.prototype.getSegmentSize=function(t,e){var i=t+e,o="outer"+e;if(this._getMeasurement(i,o),!this[i]){var n=this.getFirstItemSize();this[i]=n&&n[o]||this.isotope.size["inner"+e]}},i.prototype.getFirstItemSize=function(){var e=this.isotope.filteredItems[0];return e&&e.element&&t(e.element)},i.prototype.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},i.prototype.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},i.modes={},i.create=function(t,e){function o(){i.apply(this,arguments)}return o.prototype=new i,e&&(o.options=e),o.prototype.namespace=t,i.modes[t]=o,o},i}"function"==typeof define&&define.amd?define("isotope/js/layout-mode",["get-size/get-size","outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.LayoutMode=e(t.getSize,t.Outlayer))}(window),function(t){function e(t,e){var o=t.create("masonry");return o.prototype._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns();var t=this.cols;for(this.colYs=[];t--;)this.colYs.push(0);this.maxY=0},o.prototype.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}this.columnWidth+=this.gutter,this.cols=Math.floor((this.containerWidth+this.gutter)/this.columnWidth),this.cols=Math.max(this.cols,1)},o.prototype.getContainerWidth=function(){var t=this.options.isFitWidth?this.element.parentNode:this.element,i=e(t);this.containerWidth=i&&i.innerWidth},o.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,o=e&&1>e?"round":"ceil",n=Math[o](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var r=this._getColGroup(n),s=Math.min.apply(Math,r),a=i(r,s),u={x:this.columnWidth*a,y:s},p=s+t.size.outerHeight,h=this.cols+1-r.length,f=0;h>f;f++)this.colYs[a+f]=p;return u},o.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,o=0;i>o;o++){var n=this.colYs.slice(o,o+t);e[o]=Math.max.apply(Math,n)}return e},o.prototype._manageStamp=function(t){var i=e(t),o=this._getElementOffset(t),n=this.options.isOriginLeft?o.left:o.right,r=n+i.outerWidth,s=Math.floor(n/this.columnWidth);s=Math.max(0,s);var a=Math.floor(r/this.columnWidth);a-=r%this.columnWidth?0:1,a=Math.min(this.cols-1,a);for(var u=(this.options.isOriginTop?o.top:o.bottom)+i.outerHeight,p=s;a>=p;p++)this.colYs[p]=Math.max(u,this.colYs[p])},o.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this.options.isFitWidth&&(t.width=this._getContainerFitWidth()),t},o.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},o.prototype.resize=function(){var t=this.containerWidth;this.getContainerWidth(),t!==this.containerWidth&&this.layout()},o}var i=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++){var n=t[i];if(n===e)return i}return-1};"function"==typeof define&&define.amd?define("masonry/masonry",["outlayer/outlayer","get-size/get-size"],e):t.Masonry=e(t.Outlayer,t.getSize)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t,i){var o=t.create("masonry"),n=o.prototype._getElementOffset,r=o.prototype.layout,s=o.prototype._getMeasurement;e(o.prototype,i.prototype),o.prototype._getElementOffset=n,o.prototype.layout=r,o.prototype._getMeasurement=s;var a=o.prototype.measureColumns;o.prototype.measureColumns=function(){this.items=this.isotope.filteredItems,a.call(this)};var u=o.prototype._manageStamp;return o.prototype._manageStamp=function(){this.options.isOriginLeft=this.isotope.options.isOriginLeft,this.options.isOriginTop=this.isotope.options.isOriginTop,u.apply(this,arguments)},o}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/masonry",["../layout-mode","masonry/masonry"],i):i(t.Isotope.LayoutMode,t.Masonry)}(window),function(t){function e(t){var e=t.create("fitRows");return e.prototype._resetLayout=function(){this.x=0,this.y=0,this.maxY=0},e.prototype._getItemLayoutPosition=function(t){t.getSize(),0!==this.x&&t.size.outerWidth+this.x>this.isotope.size.innerWidth&&(this.x=0,this.y=this.maxY);var e={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=t.size.outerWidth,e},e.prototype._getContainerSize=function(){return{height:this.maxY}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/fit-rows",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t){var e=t.create("vertical",{horizontalAlignment:0});return e.prototype._resetLayout=function(){this.y=0},e.prototype._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},e.prototype._getContainerSize=function(){return{height:this.y}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===h.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=f(e,t);-1!==i&&e.splice(i,1)}function r(t,i,r,u,h){function f(t,e){return function(i,o){for(var n=0,r=t.length;r>n;n++){var s=t[n],a=i.sortData[s],u=o.sortData[s];if(a>u||u>a){var p=void 0!==e[s]?e[s]:e,h=p?1:-1;return(a>u?1:-1)*h}}return 0}}var c=t.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});c.Item=u,c.LayoutMode=h,c.prototype._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),t.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var e in h.modes)this._initLayoutMode(e)},c.prototype.reloadItems=function(){this.itemGUID=0,t.prototype.reloadItems.call(this)},c.prototype._itemize=function(){for(var e=t.prototype._itemize.apply(this,arguments),i=0,o=e.length;o>i;i++){var n=e[i];n.id=this.itemGUID++}return this._updateItemsSortData(e),e},c.prototype._initLayoutMode=function(t){var i=h.modes[t],o=this.options[t]||{};this.options[t]=i.options?e(i.options,o):o,this.modes[t]=new i(this)},c.prototype.layout=function(){return!this._isLayoutInited&&this.options.isInitLayout?(this.arrange(),void 0):(this._layout(),void 0)},c.prototype._layout=function(){var t=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,t),this._isLayoutInited=!0},c.prototype.arrange=function(t){this.option(t),this._getIsInstant(),this.filteredItems=this._filter(this.items),this._sort(),this._layout()},c.prototype._init=c.prototype.arrange,c.prototype._getIsInstant=function(){var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;return this._isInstant=t,t},c.prototype._filter=function(t){function e(){f.reveal(n),f.hide(r)}var i=this.options.filter;i=i||"*";for(var o=[],n=[],r=[],s=this._getFilterTest(i),a=0,u=t.length;u>a;a++){var p=t[a];if(!p.isIgnored){var h=s(p);h&&o.push(p),h&&p.isHidden?n.push(p):h||p.isHidden||r.push(p)}}var f=this;return this._isInstant?this._noTransition(e):e(),o},c.prototype._getFilterTest=function(t){return s&&this.options.isJQueryFiltering?function(e){return s(e.element).is(t)}:"function"==typeof t?function(e){return t(e.element)}:function(e){return r(e.element,t)}},c.prototype.updateSortData=function(t){this._getSorters(),t=o(t);var e=this.getItems(t);e=e.length?e:this.items,this._updateItemsSortData(e)},c.prototype._getSorters=function(){var t=this.options.getSortData; +for(var e in t){var i=t[e];this._sorters[e]=d(i)}},c.prototype._updateItemsSortData=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];o.updateSortData()}};var d=function(){function t(t){if("string"!=typeof t)return t;var i=a(t).split(" "),o=i[0],n=o.match(/^\[(.+)\]$/),r=n&&n[1],s=e(r,o),u=c.sortDataParsers[i[1]];return t=u?function(t){return t&&u(s(t))}:function(t){return t&&s(t)}}function e(t,e){var i;return i=t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&p(i)}}return t}();c.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},c.prototype._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=f(e,this.options.sortAscending);this.filteredItems.sort(i),t!==this.sortHistory[0]&&this.sortHistory.unshift(t)}},c.prototype._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw Error("No layout mode: "+t);return e.options=this.options[t],e},c.prototype._resetLayout=function(){t.prototype._resetLayout.call(this),this._mode()._resetLayout()},c.prototype._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},c.prototype._manageStamp=function(t){this._mode()._manageStamp(t)},c.prototype._getContainerSize=function(){return this._mode()._getContainerSize()},c.prototype.needsResizeLayout=function(){return this._mode().needsResizeLayout()},c.prototype.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},c.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps();var o=this._filterRevealAdded(e);this.layoutItems(i),this.filteredItems=o.concat(this.filteredItems)}},c.prototype._filterRevealAdded=function(t){var e=this._noTransition(function(){return this._filter(t)});return this.layoutItems(e,!0),this.reveal(e),t},c.prototype.insert=function(t){var e=this.addItems(t);if(e.length){var i,o,n=e.length;for(i=0;n>i;i++)o=e[i],this.element.appendChild(o.element);var r=this._filter(e);for(this._noTransition(function(){this.hide(r)}),i=0;n>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;n>i;i++)delete e[i].isLayoutInstant;this.reveal(r)}};var l=c.prototype.remove;return c.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(l.call(this,t),e&&e.length)for(var i=0,r=e.length;r>i;i++){var s=e[i];n(s,this.filteredItems)}},c.prototype._noTransition=function(t){var e=this.options.transitionDuration;this.options.transitionDuration=0;var i=t.call(this);return this.options.transitionDuration=e,i},c}var s=t.jQuery,a=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},u=document.documentElement,p=u.textContent?function(t){return t.textContent}:function(t){return t.innerText},h=Object.prototype.toString,f=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","matches-selector/matches-selector","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],r):t.Isotope=r(t.Outlayer,t.getSize,t.matchesSelector,t.Isotope.Item,t.Isotope.LayoutMode)}(window); \ No newline at end of file diff --git a/js/isotope.js b/js/isotope.js index 7dbd527..b72082c 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -190,7 +190,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode Isotope.prototype._getIsInstant = function() { var isInstant = this.options.isLayoutInstant !== undefined ? this.options.isLayoutInstant : !this._isLayoutInited; - return this._isInstant = isInstant; + this._isInstant = isInstant; + return isInstant; }; // -------------------------- filter -------------------------- // From a041771c467abc3a6a23d02eab8c4172d5d99271 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 14 Mar 2014 07:59:23 -0400 Subject: [PATCH 112/122] fix test default layoutMode --- test/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/helpers.js b/test/helpers.js index 038d99f..6e2294c 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -3,7 +3,7 @@ 'use strict'; // ----- default layout mode ----- // -Isotope.prototype.options.layoutMode = 'fitRows'; +Isotope.defaults.layoutMode = 'fitRows'; // ----- getText ----- // var docElem = document.documentElement; From d856b23b00e325742b90a82cfb5c57b95a6e2a7a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 14 Mar 2014 07:59:29 -0400 Subject: [PATCH 113/122] masonry stamp test --- test/index.html | 11 +++++++++++ test/masonry-stamp.js | 27 +++++++++++++++++++++++++++ test/tests.css | 28 ++++++++++++++-------------- 3 files changed, 52 insertions(+), 14 deletions(-) create mode 100644 test/masonry-stamp.js diff --git a/test/index.html b/test/index.html index aba2d43..a6803ea 100644 --- a/test/index.html +++ b/test/index.html @@ -38,6 +38,7 @@ + @@ -110,5 +111,15 @@
c
+

Masonry stamp

+ +
+
+
+
+
+
+
+ diff --git a/test/masonry-stamp.js b/test/masonry-stamp.js new file mode 100644 index 0000000..e37c887 --- /dev/null +++ b/test/masonry-stamp.js @@ -0,0 +1,27 @@ +( function() { + +'use strict'; + +test( 'Masonry stamp', function() { + + var iso = new Isotope( '#masonry-stamp', { + layoutMode: 'masonry', + itemSelector: '.item', + stamp: '.stamp' + }); + + function checkPosition( item, x, y ) { + var elem = item.element; + var left = parseInt( elem.style.left, 10 ); + var top = parseInt( elem.style.top, 10 ); + deepEqual( [ left, top ], [ x, y ], 'item position ' + x + ', ' + y ); + } + + checkPosition( iso.items[0], 0, 0 ); + checkPosition( iso.items[1], 0, 30 ); + checkPosition( iso.items[2], 60, 45 ); + checkPosition( iso.items[3], 120, 45 ); + +}); + +})(); diff --git a/test/tests.css b/test/tests.css index 9b86827..c70d409 100644 --- a/test/tests.css +++ b/test/tests.css @@ -37,6 +37,9 @@ body { .item.h4 { height: 90px; } .item.h5 { height: 110px; } +/* ---- stamp ---- */ + + .stamp { background: red; opacity: 0.75; @@ -44,20 +47,8 @@ body { border: 1px solid; } -/* ---- stamp ---- */ - -.has-stamp .item { width: 45px; } - -/* stout, in the middle */ -.has-stamp .stamp1 { - width: 40px; - height: 30px; -} - -/* really wide */ -.has-stamp .stamp2 { - width: 200px; - height: 20px; +.has-stamp { + position: relative; } /* ---- get segment size ---- */ @@ -74,3 +65,12 @@ body { #masonry-measure-columns .grid-sizer { width: 70px; } + +/* ---- masonry stamp ---- */ + +#masonry-stamp .stamp1 { + width: 80px; + height: 30px; + right: 25px; + top: 15px; +} From d8a69fe74d40653525d990c000b8924ec49ae8d9 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 14 Mar 2014 08:10:01 -0400 Subject: [PATCH 114/122] remove notes.md --- notes.md | 68 -------------------------------------------------------- 1 file changed, 68 deletions(-) delete mode 100644 notes.md diff --git a/notes.md b/notes.md deleted file mode 100644 index b396945..0000000 --- a/notes.md +++ /dev/null @@ -1,68 +0,0 @@ -## to do - -provide nice error if getText doesn't provide an element - -move munge sorter to separate file? - -## tests - -updateSortData - -remove removes from filteredItems -insert with Masonry, do layout - -## discuss - -Method name for filterSortMagic. Currently .arrange() - -default to isJQueryFiltering = true, vs. not - -## bugs - -## misc - -iso.filterSortLayout() -iso.magic() -iso.isotope() -iso.process() -iso.fullLayout() -iso.go() -iso.change() -iso.activate(); -iso.move() -iso.processLayout() -iso.rearrange() -iso.arrange({}) -iso.reload() -iso.update() -iso.radiate() -iso.form({}) -iso.stabilize() -iso.react() -iso.act() -iso.doStuff() -iso.position -iso.configure -iso.apply -iso.display({}) - - -Orrrrrr keep .layout() and have reLayout() - - -## Isotope vs Masonry vs Packery - - Masonry Isotope Packery -Masonry Layouts x x x -no gaps x -draggable x -filtering x -sorting x -multiple layout x - - -## Combination filters - -.a OR .b = .a, .b -.a AND .b = .a.b - From d88a651d0292d9fad60aed8ddc270dc87b01d86f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 15 Mar 2014 11:32:08 -0400 Subject: [PATCH 115/122] remove unnecessary node modules --- package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index dcee329..dcad5bb 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,9 @@ "description": "Filter and sort magical layouts", "devDependencies": { "grunt": "~0.4.0", - "grunt-contrib-concat": "~0.1.3", - "grunt-contrib-copy": "~0.4.0", "grunt-contrib-jshint": "~0.4.1", "grunt-contrib-uglify": "~0.1.1", - "grunt-contrib-watch": "~0.3.1", - "grunt-requirejs": "~0.4.0", - "grunt-fizzy-docs": "git://github.com/metafizzy/grunt-fizzy-docs.git" + "grunt-requirejs": "~0.4.0" }, "repository": { "type": "git", From 51e5512756030f90751565427afb41de7c05eff4 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 15 Mar 2014 11:36:07 -0400 Subject: [PATCH 116/122] update Outlayer to v1.2, tick version 2b10 Ref #613 --- bower.json | 6 +++--- js/isotope.js | 2 +- package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bower.json b/bower.json index 375afa9..c4af0f2 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.9", + "version": "2.0.0-beta.10", "description": "Filter and sort magical layouts", "main": [ "js/item.js", @@ -13,8 +13,8 @@ "dependencies": { "get-size": "desandro/get-size#>=1 <2", "matches-selector": "desandro/matches-selector#>=1 <2", - "outlayer": "v1.2", - "masonry": "3.1.x" + "outlayer": "^1.2.0", + "masonry": "^3.1.5" }, "devDependencies": { "doc-ready": "desandro/doc-ready", diff --git a/js/isotope.js b/js/isotope.js index b72082c..fc99fd7 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.9 + * Isotope v2.0.0-beta.10 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ diff --git a/package.json b/package.json index dcad5bb..9fcbd61 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.9", + "version": "2.0.0-beta.10", "description": "Filter and sort magical layouts", "devDependencies": { "grunt": "~0.4.0", From e6c56dd8a118139b03770be2a1304c7a34a0f9d2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 15 Mar 2014 11:42:15 -0400 Subject: [PATCH 117/122] requirejs example to use dist/pkgd.js --- examples/js/require-js.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/examples/js/require-js.js b/examples/js/require-js.js index cdb7218..ac6eb9e 100644 --- a/examples/js/require-js.js +++ b/examples/js/require-js.js @@ -1,5 +1,7 @@ /*global requirejs: false*/ +// -------------------------- bower -------------------------- // + /* // with bower components requirejs.config({ @@ -15,9 +17,10 @@ requirejs( [ '../js/isotope' ], function( Isotope ) { }); // */ -// isotope.pkgd.js +// -------------------------- pkgd -------------------------- // + /* -requirejs( [ 'js/isotope.pkgd.js' ], function( Isotope ) { +requirejs( [ '../dist/isotope.pkgd.js' ], function( Isotope ) { new Isotope( '#basic', { layoutMode: 'masonry', masonry: { @@ -27,7 +30,8 @@ requirejs( [ 'js/isotope.pkgd.js' ], function( Isotope ) { }); // */ -// bower components and jQuery +// -------------------------- bower & jQuery -------------------------- // + /* requirejs.config({ baseUrl: '../bower_components', @@ -52,7 +56,8 @@ requirejs( [ // */ -// isotope.pkgd.js and jQuery +// -------------------------- pkgd & jQuery -------------------------- // + // /* requirejs.config({ paths: { @@ -60,7 +65,7 @@ requirejs.config({ } }); -requirejs( [ 'require', 'jquery', 'js/isotope.pkgd.js' ], +requirejs( [ 'require', 'jquery', '../dist/isotope.pkgd.js' ], function( require, $, Isotope ) { require( [ 'jquery-bridget/jquery.bridget' From 8dcb993f4f9dc20ec0e2ff626918065c77c5471c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 15 Mar 2014 11:53:58 -0400 Subject: [PATCH 118/122] build v2 beta 10 --- dist/isotope.pkgd.js | 20 ++++++-------------- dist/isotope.pkgd.min.js | 6 +++--- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/dist/isotope.pkgd.js b/dist/isotope.pkgd.js index fb76bc2..522e983 100644 --- a/dist/isotope.pkgd.js +++ b/dist/isotope.pkgd.js @@ -1,5 +1,5 @@ /*! - * Isotope PACKAGED v2.0.0-beta.9 + * Isotope PACKAGED v2.0.0-beta.10 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ @@ -1666,7 +1666,7 @@ if ( typeof define === 'function' && define.amd ) { })( window ); /*! - * Outlayer v1.1.10 + * Outlayer v1.2.0 * the brains and guts of a layout library * MIT license */ @@ -2899,7 +2899,7 @@ if ( typeof define === 'function' && define.amd ) { })( window ); /*! - * Masonry v3.1.4 + * Masonry v3.1.5 * Cascading grid layout library * http://masonry.desandro.com * MIT License @@ -3076,18 +3076,10 @@ function masonryDefinition( Outlayer, getSize ) { return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; }; - // debounced, layout on resize - // HEADS UP this overwrites Outlayer.resize - // Any changes in Outlayer.resize need to be manually added here - Masonry.prototype.resize = function() { - // don't trigger if size did not change + Masonry.prototype.needsResizeLayout = function() { var previousWidth = this.containerWidth; this.getContainerWidth(); - if ( previousWidth === this.containerWidth ) { - return; - } - - this.layout(); + return previousWidth !== this.containerWidth; }; return Masonry; @@ -3293,7 +3285,7 @@ if ( typeof define === 'function' && define.amd ) { })( window ); /*! - * Isotope v2.0.0-beta.9 + * Isotope v2.0.0-beta.10 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ diff --git a/dist/isotope.pkgd.min.js b/dist/isotope.pkgd.min.js index c8bc26e..550928d 100644 --- a/dist/isotope.pkgd.min.js +++ b/dist/isotope.pkgd.min.js @@ -1,8 +1,8 @@ /*! - * Isotope PACKAGED v2.0.0-beta.9 + * Isotope PACKAGED v2.0.0-beta.10 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ -(function(t){function e(){}function i(t){function i(e){e.prototype.option||(e.prototype.option=function(e){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))})}function n(e,i){t.fn[e]=function(n){if("string"==typeof n){for(var s=o.call(arguments,1),a=0,u=this.length;u>a;a++){var p=this[a],h=t.data(p,e);if(h)if(t.isFunction(h[n])&&"_"!==n.charAt(0)){var f=h[n].apply(h,s);if(void 0!==f)return f}else r("no such method '"+n+"' for "+e+" instance");else r("cannot call methods on "+e+" prior to initialization; "+"attempted to call '"+n+"'")}return this}return this.each(function(){var o=t.data(this,e);o?(o.option(n),o._init()):(o=new i(this,n),t.data(this,e,o))})}}if(t){var r="undefined"==typeof console?e:function(t){console.error(t)};return t.bridget=function(t,e){i(e),n(t,e)},t.bridget}}var o=Array.prototype.slice;"function"==typeof define&&define.amd?define("jquery-bridget/jquery.bridget",["jquery"],i):i(t.jQuery)})(window),function(t){function e(e){var i=t.event;return i.target=i.target||i.srcElement||e,i}var i=document.documentElement,o=function(){};i.addEventListener?o=function(t,e,i){t.addEventListener(e,i,!1)}:i.attachEvent&&(o=function(t,i,o){t[i+o]=o.handleEvent?function(){var i=e(t);o.handleEvent.call(o,i)}:function(){var i=e(t);o.call(t,i)},t.attachEvent("on"+i,t[i+o])});var n=function(){};i.removeEventListener?n=function(t,e,i){t.removeEventListener(e,i,!1)}:i.detachEvent&&(n=function(t,e,i){t.detachEvent("on"+e,t[e+i]);try{delete t[e+i]}catch(o){t[e+i]=void 0}});var r={bind:o,unbind:n};"function"==typeof define&&define.amd?define("eventie/eventie",r):"object"==typeof exports?module.exports=r:t.eventie=r}(this),function(t){function e(t){"function"==typeof t&&(e.isReady?t():r.push(t))}function i(t){var i="readystatechange"===t.type&&"complete"!==n.readyState;if(!e.isReady&&!i){e.isReady=!0;for(var o=0,s=r.length;s>o;o++){var a=r[o];a()}}}function o(o){return o.bind(n,"DOMContentLoaded",i),o.bind(n,"readystatechange",i),o.bind(t,"load",i),e}var n=t.document,r=[];e.isReady=!1,"function"==typeof define&&define.amd?(e.isReady="function"==typeof requirejs,define("doc-ready/doc-ready",["eventie/eventie"],o)):t.docReady=o(t.eventie)}(this),function(){function t(){}function e(t,e){for(var i=t.length;i--;)if(t[i].listener===e)return i;return-1}function i(t){return function(){return this[t].apply(this,arguments)}}var o=t.prototype,n=this,r=n.EventEmitter;o.getListeners=function(t){var e,i,o=this._getEvents();if(t instanceof RegExp){e={};for(i in o)o.hasOwnProperty(i)&&t.test(i)&&(e[i]=o[i])}else e=o[t]||(o[t]=[]);return e},o.flattenListeners=function(t){var e,i=[];for(e=0;t.length>e;e+=1)i.push(t[e].listener);return i},o.getListenersAsObject=function(t){var e,i=this.getListeners(t);return i instanceof Array&&(e={},e[t]=i),e||i},o.addListener=function(t,i){var o,n=this.getListenersAsObject(t),r="object"==typeof i;for(o in n)n.hasOwnProperty(o)&&-1===e(n[o],i)&&n[o].push(r?i:{listener:i,once:!1});return this},o.on=i("addListener"),o.addOnceListener=function(t,e){return this.addListener(t,{listener:e,once:!0})},o.once=i("addOnceListener"),o.defineEvent=function(t){return this.getListeners(t),this},o.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},o.removeListener=function(t,i){var o,n,r=this.getListenersAsObject(t);for(n in r)r.hasOwnProperty(n)&&(o=e(r[n],i),-1!==o&&r[n].splice(o,1));return this},o.off=i("removeListener"),o.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},o.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},o.manipulateListeners=function(t,e,i){var o,n,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(o=i.length;o--;)r.call(this,e,i[o]);else for(o in e)e.hasOwnProperty(o)&&(n=e[o])&&("function"==typeof n?r.call(this,o,n):s.call(this,o,n));return this},o.removeEvent=function(t){var e,i=typeof t,o=this._getEvents();if("string"===i)delete o[t];else if(t instanceof RegExp)for(e in o)o.hasOwnProperty(e)&&t.test(e)&&delete o[e];else delete this._events;return this},o.removeAllListeners=i("removeEvent"),o.emitEvent=function(t,e){var i,o,n,r,s=this.getListenersAsObject(t);for(n in s)if(s.hasOwnProperty(n))for(o=s[n].length;o--;)i=s[n][o],i.once===!0&&this.removeListener(t,i.listener),r=i.listener.apply(this,e||[]),r===this._getOnceReturnValue()&&this.removeListener(t,i.listener);return this},o.trigger=i("emitEvent"),o.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},o.setOnceReturnValue=function(t){return this._onceReturnValue=t,this},o._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},o._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return n.EventEmitter=r,t},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:this.EventEmitter=t}.call(this),function(t){function e(t){if(t){if("string"==typeof o[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,n=0,r=i.length;r>n;n++)if(e=i[n]+t,"string"==typeof o[e])return e}}var i="Webkit Moz ms Ms O".split(" "),o=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return e}):"object"==typeof exports?module.exports=e:t.getStyleProperty=e}(window),function(t){function e(t){var e=parseFloat(t),i=-1===t.indexOf("%")&&!isNaN(e);return i&&e}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,i=s.length;i>e;e++){var o=s[e];t[o]=0}return t}function o(t){function o(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var o=r(t);if("none"===o.display)return i();var n={};n.width=t.offsetWidth,n.height=t.offsetHeight;for(var h=n.isBorderBox=!(!p||!o[p]||"border-box"!==o[p]),f=0,c=s.length;c>f;f++){var d=s[f],l=o[d];l=a(t,l);var y=parseFloat(l);n[d]=isNaN(y)?0:y}var m=n.paddingLeft+n.paddingRight,g=n.paddingTop+n.paddingBottom,v=n.marginLeft+n.marginRight,_=n.marginTop+n.marginBottom,I=n.borderLeftWidth+n.borderRightWidth,L=n.borderTopWidth+n.borderBottomWidth,z=h&&u,S=e(o.width);S!==!1&&(n.width=S+(z?0:m+I));var b=e(o.height);return b!==!1&&(n.height=b+(z?0:g+L)),n.innerWidth=n.width-(m+I),n.innerHeight=n.height-(g+L),n.outerWidth=n.width+v,n.outerHeight=n.height+_,n}}function a(t,e){if(n||-1===e.indexOf("%"))return e;var i=t.style,o=i.left,r=t.runtimeStyle,s=r&&r.left;return s&&(r.left=t.currentStyle.left),i.left=e,e=i.pixelLeft,i.left=o,s&&(r.left=s),e}var u,p=t("boxSizing");return function(){if(p){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[p]="border-box";var i=document.body||document.documentElement;i.appendChild(t);var o=r(t);u=200===e(o.width),i.removeChild(t)}}(),o}var n=t.getComputedStyle,r=n?function(t){return n(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],o):"object"==typeof exports?module.exports=o(require("get-style-property")):t.getSize=o(t.getStyleProperty)}(window),function(t,e){function i(t,e){return t[a](e)}function o(t){if(!t.parentNode){var e=document.createDocumentFragment();e.appendChild(t)}}function n(t,e){o(t);for(var i=t.parentNode.querySelectorAll(e),n=0,r=i.length;r>n;n++)if(i[n]===t)return!0;return!1}function r(t,e){return o(t),i(t,e)}var s,a=function(){if(e.matchesSelector)return"matchesSelector";for(var t=["webkit","moz","ms","o"],i=0,o=t.length;o>i;i++){var n=t[i],r=n+"MatchesSelector";if(e[r])return r}}();if(a){var u=document.createElement("div"),p=i(u,"div");s=p?i:r}else s=n;"function"==typeof define&&define.amd?define("matches-selector/matches-selector",[],function(){return s}):window.matchesSelector=s}(this,Element.prototype),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){for(var e in t)return!1;return e=null,!0}function o(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}function n(t,n,r){function a(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var u=r("transition"),p=r("transform"),h=u&&p,f=!!r("perspective"),c={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"}[u],d=["transform","transition","transitionDuration","transitionProperty"],l=function(){for(var t={},e=0,i=d.length;i>e;e++){var o=d[e],n=r(o);n&&n!==o&&(t[o]=n)}return t}();e(a.prototype,t.prototype),a.prototype._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},a.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},a.prototype.getSize=function(){this.size=n(this.element)},a.prototype.css=function(t){var e=this.element.style;for(var i in t){var o=l[i]||i;e[o]=t[i]}},a.prototype.getPosition=function(){var t=s(this.element),e=this.layout.options,i=e.isOriginLeft,o=e.isOriginTop,n=parseInt(t[i?"left":"right"],10),r=parseInt(t[o?"top":"bottom"],10);n=isNaN(n)?0:n,r=isNaN(r)?0:r;var a=this.layout.size;n-=i?a.paddingLeft:a.paddingRight,r-=o?a.paddingTop:a.paddingBottom,this.position.x=n,this.position.y=r},a.prototype.layoutPosition=function(){var t=this.layout.size,e=this.layout.options,i={};e.isOriginLeft?(i.left=this.position.x+t.paddingLeft+"px",i.right=""):(i.right=this.position.x+t.paddingRight+"px",i.left=""),e.isOriginTop?(i.top=this.position.y+t.paddingTop+"px",i.bottom=""):(i.bottom=this.position.y+t.paddingBottom+"px",i.top=""),this.css(i),this.emitEvent("layout",[this])};var y=f?function(t,e){return"translate3d("+t+"px, "+e+"px, 0)"}:function(t,e){return"translate("+t+"px, "+e+"px)"};a.prototype._transitionTo=function(t,e){this.getPosition();var i=this.position.x,o=this.position.y,n=parseInt(t,10),r=parseInt(e,10),s=n===this.position.x&&r===this.position.y;if(this.setPosition(t,e),s&&!this.isTransitioning)return this.layoutPosition(),void 0;var a=t-i,u=e-o,p={},h=this.layout.options;a=h.isOriginLeft?a:-a,u=h.isOriginTop?u:-u,p.transform=y(a,u),this.transition({to:p,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},a.prototype.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},a.prototype.moveTo=h?a.prototype._transitionTo:a.prototype.goTo,a.prototype.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},a.prototype._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},a.prototype._transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return this._nonTransition(t),void 0;var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var o=this.element.offsetHeight;o=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var m=p&&o(p)+",opacity";a.prototype.enableTransition=function(){this.isTransitioning||(this.css({transitionProperty:m,transitionDuration:this.layout.options.transitionDuration}),this.element.addEventListener(c,this,!1))},a.prototype.transition=a.prototype[u?"_transition":"_nonTransition"],a.prototype.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},a.prototype.onotransitionend=function(t){this.ontransitionend(t)};var g={"-webkit-transform":"transform","-moz-transform":"transform","-o-transform":"transform"};a.prototype.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,o=g[t.propertyName]||t.propertyName;if(delete e.ingProperties[o],i(e.ingProperties)&&this.disableTransition(),o in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[o]),o in e.onEnd){var n=e.onEnd[o];n.call(this),delete e.onEnd[o]}this.emitEvent("transitionEnd",[this])}},a.prototype.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(c,this,!1),this.isTransitioning=!1},a.prototype._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var v={transitionProperty:"",transitionDuration:""};return a.prototype.removeTransitionStyles=function(){this.css(v)},a.prototype.removeElem=function(){this.element.parentNode.removeChild(this.element),this.emitEvent("remove",[this])},a.prototype.remove=function(){if(!u||!parseFloat(this.layout.options.transitionDuration))return this.removeElem(),void 0;var t=this;this.on("transitionEnd",function(){return t.removeElem(),!0}),this.hide()},a.prototype.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options;this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0})},a.prototype.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options;this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:{opacity:function(){this.isHidden&&this.css({display:"none"})}}})},a.prototype.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},a}var r=t.getComputedStyle,s=r?function(t){return r(t,null)}:function(t){return t.currentStyle};"function"==typeof define&&define.amd?define("outlayer/item",["eventEmitter/EventEmitter","get-size/get-size","get-style-property/get-style-property"],n):(t.Outlayer={},t.Outlayer.Item=n(t.EventEmitter,t.getSize,t.getStyleProperty))}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===f.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=d(e,t);-1!==i&&e.splice(i,1)}function r(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()}function s(i,s,f,d,l,y){function m(t,i){if("string"==typeof t&&(t=a.querySelector(t)),!t||!c(t))return u&&u.error("Bad "+this.constructor.namespace+" element: "+t),void 0;this.element=t,this.options=e({},this.constructor.defaults),this.option(i);var o=++g;this.element.outlayerGUID=o,v[o]=this,this._create(),this.options.isInitLayout&&this.layout()}var g=0,v={};return m.namespace="outlayer",m.Item=y,m.defaults={containerStyle:{position:"relative"},isInitLayout:!0,isOriginLeft:!0,isOriginTop:!0,isResizeBound:!0,isResizingContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}},e(m.prototype,f.prototype),m.prototype.option=function(t){e(this.options,t)},m.prototype._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),e(this.element.style,this.options.containerStyle),this.options.isResizeBound&&this.bindResize()},m.prototype.reloadItems=function(){this.items=this._itemize(this.element.children)},m.prototype._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,o=[],n=0,r=e.length;r>n;n++){var s=e[n],a=new i(s,this);o.push(a)}return o},m.prototype._filterFindItemElements=function(t){t=o(t);for(var e=this.options.itemSelector,i=[],n=0,r=t.length;r>n;n++){var s=t[n];if(c(s))if(e){l(s,e)&&i.push(s);for(var a=s.querySelectorAll(e),u=0,p=a.length;p>u;u++)i.push(a[u])}else i.push(s)}return i},m.prototype.getItemElements=function(){for(var t=[],e=0,i=this.items.length;i>e;e++)t.push(this.items[e].element);return t},m.prototype.layout=function(){this._resetLayout(),this._manageStamps();var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;this.layoutItems(this.items,t),this._isLayoutInited=!0},m.prototype._init=m.prototype.layout,m.prototype._resetLayout=function(){this.getSize()},m.prototype.getSize=function(){this.size=d(this.element)},m.prototype._getMeasurement=function(t,e){var i,o=this.options[t];o?("string"==typeof o?i=this.element.querySelector(o):c(o)&&(i=o),this[t]=i?d(i)[e]:o):this[t]=0},m.prototype.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},m.prototype._getItemsForLayout=function(t){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i];n.isIgnored||e.push(n)}return e},m.prototype._layoutItems=function(t,e){function i(){o.emitEvent("layoutComplete",[o,t])}var o=this;if(!t||!t.length)return i(),void 0;this._itemsOn(t,"layout",i);for(var n=[],r=0,s=t.length;s>r;r++){var a=t[r],u=this._getItemLayoutPosition(a);u.item=a,u.isInstant=e||a.isLayoutInstant,n.push(u)}this._processLayoutQueue(n)},m.prototype._getItemLayoutPosition=function(){return{x:0,y:0}},m.prototype._processLayoutQueue=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];this._positionItem(o.item,o.x,o.y,o.isInstant)}},m.prototype._positionItem=function(t,e,i,o){o?t.goTo(e,i):t.moveTo(e,i)},m.prototype._postLayout=function(){this.resizeContainer()},m.prototype.resizeContainer=function(){if(this.options.isResizingContainer){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))}},m.prototype._getContainerSize=h,m.prototype._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},m.prototype._itemsOn=function(t,e,i){function o(){return n++,n===r&&i.call(s),!0}for(var n=0,r=t.length,s=this,a=0,u=t.length;u>a;a++){var p=t[a];p.on(e,o)}},m.prototype.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},m.prototype.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},m.prototype.stamp=function(t){if(t=this._find(t)){this.stamps=this.stamps.concat(t);for(var e=0,i=t.length;i>e;e++){var o=t[e];this.ignore(o)}}},m.prototype.unstamp=function(t){if(t=this._find(t))for(var e=0,i=t.length;i>e;e++){var o=t[e];n(o,this.stamps),this.unignore(o)}},m.prototype._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=o(t)):void 0},m.prototype._manageStamps=function(){if(this.stamps&&this.stamps.length){this._getBoundingRect();for(var t=0,e=this.stamps.length;e>t;t++){var i=this.stamps[t];this._manageStamp(i)}}},m.prototype._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},m.prototype._manageStamp=h,m.prototype._getElementOffset=function(t){var e=t.getBoundingClientRect(),i=this._boundingRect,o=d(t),n={left:e.left-i.left-o.marginLeft,top:e.top-i.top-o.marginTop,right:i.right-e.right-o.marginRight,bottom:i.bottom-e.bottom-o.marginBottom};return n},m.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},m.prototype.bindResize=function(){this.isResizeBound||(i.bind(t,"resize",this),this.isResizeBound=!0)},m.prototype.unbindResize=function(){this.isResizeBound&&i.unbind(t,"resize",this),this.isResizeBound=!1},m.prototype.onresize=function(){function t(){e.resize(),delete e.resizeTimeout}this.resizeTimeout&&clearTimeout(this.resizeTimeout);var e=this;this.resizeTimeout=setTimeout(t,100)},m.prototype.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},m.prototype.needsResizeLayout=function(){var t=d(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},m.prototype.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},m.prototype.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},m.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},m.prototype.reveal=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.reveal()}},m.prototype.hide=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.hide()}},m.prototype.getItem=function(t){for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];if(o.element===t)return o}},m.prototype.getItems=function(t){if(t&&t.length){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i],r=this.getItem(n);r&&e.push(r)}return e}},m.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(e&&e.length){this._itemsOn(e,"remove",function(){this.emitEvent("removeComplete",[this,e])});for(var i=0,r=e.length;r>i;i++){var s=e[i];s.remove(),n(s,this.items)}}},m.prototype.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="";for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];o.destroy()}this.unbindResize(),delete this.element.outlayerGUID,p&&p.removeData(this.element,this.constructor.namespace)},m.data=function(t){var e=t&&t.outlayerGUID;return e&&v[e]},m.create=function(t,i){function o(){m.apply(this,arguments)}return Object.create?o.prototype=Object.create(m.prototype):e(o.prototype,m.prototype),o.prototype.constructor=o,o.defaults=e({},m.defaults),e(o.defaults,i),o.prototype.settings={},o.namespace=t,o.data=m.data,o.Item=function(){y.apply(this,arguments)},o.Item.prototype=new y,s(function(){for(var e=r(t),i=a.querySelectorAll(".js-"+e),n="data-"+e+"-options",s=0,h=i.length;h>s;s++){var f,c=i[s],d=c.getAttribute(n);try{f=d&&JSON.parse(d)}catch(l){u&&u.error("Error parsing "+n+" on "+c.nodeName.toLowerCase()+(c.id?"#"+c.id:"")+": "+l);continue}var y=new o(c,f);p&&p.data(c,t,y)}}),p&&p.bridget&&p.bridget(t,o),o},m.Item=y,m}var a=t.document,u=t.console,p=t.jQuery,h=function(){},f=Object.prototype.toString,c="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},d=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define("outlayer/outlayer",["eventie/eventie","doc-ready/doc-ready","eventEmitter/EventEmitter","get-size/get-size","matches-selector/matches-selector","./item"],s):t.Outlayer=s(t.eventie,t.docReady,t.EventEmitter,t.getSize,t.matchesSelector,t.Outlayer.Item)}(window),function(t){function e(t){function e(){t.Item.apply(this,arguments)}return e.prototype=new t.Item,e.prototype._create=function(){this.id=this.layout.itemGUID++,t.Item.prototype._create.call(this),this.sortData={}},e.prototype.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var t=this.layout.options.getSortData,e=this.layout._sorters;for(var i in t){var o=e[i];this.sortData[i]=o(this.element,this)}}},e}"function"==typeof define&&define.amd?define("isotope/js/item",["outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.Item=e(t.Outlayer))}(window),function(t){function e(t,e){function i(t){this.isotope=t,t&&(this.options=t.options[this.namespace],this.element=t.element,this.items=t.filteredItems,this.size=t.size)}return function(){function t(t){return function(){return e.prototype[t].apply(this.isotope,arguments)}}for(var o=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout"],n=0,r=o.length;r>n;n++){var s=o[n];i.prototype[s]=t(s)}}(),i.prototype.needsVerticalResizeLayout=function(){var e=t(this.isotope.element),i=this.isotope.size&&e;return i&&e.innerHeight!==this.isotope.size.innerHeight},i.prototype._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},i.prototype.getColumnWidth=function(){this.getSegmentSize("column","Width")},i.prototype.getRowHeight=function(){this.getSegmentSize("row","Height")},i.prototype.getSegmentSize=function(t,e){var i=t+e,o="outer"+e;if(this._getMeasurement(i,o),!this[i]){var n=this.getFirstItemSize();this[i]=n&&n[o]||this.isotope.size["inner"+e]}},i.prototype.getFirstItemSize=function(){var e=this.isotope.filteredItems[0];return e&&e.element&&t(e.element)},i.prototype.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},i.prototype.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},i.modes={},i.create=function(t,e){function o(){i.apply(this,arguments)}return o.prototype=new i,e&&(o.options=e),o.prototype.namespace=t,i.modes[t]=o,o},i}"function"==typeof define&&define.amd?define("isotope/js/layout-mode",["get-size/get-size","outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.LayoutMode=e(t.getSize,t.Outlayer))}(window),function(t){function e(t,e){var o=t.create("masonry");return o.prototype._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns();var t=this.cols;for(this.colYs=[];t--;)this.colYs.push(0);this.maxY=0},o.prototype.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}this.columnWidth+=this.gutter,this.cols=Math.floor((this.containerWidth+this.gutter)/this.columnWidth),this.cols=Math.max(this.cols,1)},o.prototype.getContainerWidth=function(){var t=this.options.isFitWidth?this.element.parentNode:this.element,i=e(t);this.containerWidth=i&&i.innerWidth},o.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,o=e&&1>e?"round":"ceil",n=Math[o](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var r=this._getColGroup(n),s=Math.min.apply(Math,r),a=i(r,s),u={x:this.columnWidth*a,y:s},p=s+t.size.outerHeight,h=this.cols+1-r.length,f=0;h>f;f++)this.colYs[a+f]=p;return u},o.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,o=0;i>o;o++){var n=this.colYs.slice(o,o+t);e[o]=Math.max.apply(Math,n)}return e},o.prototype._manageStamp=function(t){var i=e(t),o=this._getElementOffset(t),n=this.options.isOriginLeft?o.left:o.right,r=n+i.outerWidth,s=Math.floor(n/this.columnWidth);s=Math.max(0,s);var a=Math.floor(r/this.columnWidth);a-=r%this.columnWidth?0:1,a=Math.min(this.cols-1,a);for(var u=(this.options.isOriginTop?o.top:o.bottom)+i.outerHeight,p=s;a>=p;p++)this.colYs[p]=Math.max(u,this.colYs[p])},o.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this.options.isFitWidth&&(t.width=this._getContainerFitWidth()),t},o.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},o.prototype.resize=function(){var t=this.containerWidth;this.getContainerWidth(),t!==this.containerWidth&&this.layout()},o}var i=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++){var n=t[i];if(n===e)return i}return-1};"function"==typeof define&&define.amd?define("masonry/masonry",["outlayer/outlayer","get-size/get-size"],e):t.Masonry=e(t.Outlayer,t.getSize)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t,i){var o=t.create("masonry"),n=o.prototype._getElementOffset,r=o.prototype.layout,s=o.prototype._getMeasurement;e(o.prototype,i.prototype),o.prototype._getElementOffset=n,o.prototype.layout=r,o.prototype._getMeasurement=s;var a=o.prototype.measureColumns;o.prototype.measureColumns=function(){this.items=this.isotope.filteredItems,a.call(this)};var u=o.prototype._manageStamp;return o.prototype._manageStamp=function(){this.options.isOriginLeft=this.isotope.options.isOriginLeft,this.options.isOriginTop=this.isotope.options.isOriginTop,u.apply(this,arguments)},o}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/masonry",["../layout-mode","masonry/masonry"],i):i(t.Isotope.LayoutMode,t.Masonry)}(window),function(t){function e(t){var e=t.create("fitRows");return e.prototype._resetLayout=function(){this.x=0,this.y=0,this.maxY=0},e.prototype._getItemLayoutPosition=function(t){t.getSize(),0!==this.x&&t.size.outerWidth+this.x>this.isotope.size.innerWidth&&(this.x=0,this.y=this.maxY);var e={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=t.size.outerWidth,e},e.prototype._getContainerSize=function(){return{height:this.maxY}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/fit-rows",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t){var e=t.create("vertical",{horizontalAlignment:0});return e.prototype._resetLayout=function(){this.y=0},e.prototype._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},e.prototype._getContainerSize=function(){return{height:this.y}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===h.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=f(e,t);-1!==i&&e.splice(i,1)}function r(t,i,r,u,h){function f(t,e){return function(i,o){for(var n=0,r=t.length;r>n;n++){var s=t[n],a=i.sortData[s],u=o.sortData[s];if(a>u||u>a){var p=void 0!==e[s]?e[s]:e,h=p?1:-1;return(a>u?1:-1)*h}}return 0}}var c=t.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});c.Item=u,c.LayoutMode=h,c.prototype._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),t.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var e in h.modes)this._initLayoutMode(e)},c.prototype.reloadItems=function(){this.itemGUID=0,t.prototype.reloadItems.call(this)},c.prototype._itemize=function(){for(var e=t.prototype._itemize.apply(this,arguments),i=0,o=e.length;o>i;i++){var n=e[i];n.id=this.itemGUID++}return this._updateItemsSortData(e),e},c.prototype._initLayoutMode=function(t){var i=h.modes[t],o=this.options[t]||{};this.options[t]=i.options?e(i.options,o):o,this.modes[t]=new i(this)},c.prototype.layout=function(){return!this._isLayoutInited&&this.options.isInitLayout?(this.arrange(),void 0):(this._layout(),void 0)},c.prototype._layout=function(){var t=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,t),this._isLayoutInited=!0},c.prototype.arrange=function(t){this.option(t),this._getIsInstant(),this.filteredItems=this._filter(this.items),this._sort(),this._layout()},c.prototype._init=c.prototype.arrange,c.prototype._getIsInstant=function(){var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;return this._isInstant=t,t},c.prototype._filter=function(t){function e(){f.reveal(n),f.hide(r)}var i=this.options.filter;i=i||"*";for(var o=[],n=[],r=[],s=this._getFilterTest(i),a=0,u=t.length;u>a;a++){var p=t[a];if(!p.isIgnored){var h=s(p);h&&o.push(p),h&&p.isHidden?n.push(p):h||p.isHidden||r.push(p)}}var f=this;return this._isInstant?this._noTransition(e):e(),o},c.prototype._getFilterTest=function(t){return s&&this.options.isJQueryFiltering?function(e){return s(e.element).is(t)}:"function"==typeof t?function(e){return t(e.element)}:function(e){return r(e.element,t)}},c.prototype.updateSortData=function(t){this._getSorters(),t=o(t);var e=this.getItems(t);e=e.length?e:this.items,this._updateItemsSortData(e)},c.prototype._getSorters=function(){var t=this.options.getSortData; -for(var e in t){var i=t[e];this._sorters[e]=d(i)}},c.prototype._updateItemsSortData=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];o.updateSortData()}};var d=function(){function t(t){if("string"!=typeof t)return t;var i=a(t).split(" "),o=i[0],n=o.match(/^\[(.+)\]$/),r=n&&n[1],s=e(r,o),u=c.sortDataParsers[i[1]];return t=u?function(t){return t&&u(s(t))}:function(t){return t&&s(t)}}function e(t,e){var i;return i=t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&p(i)}}return t}();c.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},c.prototype._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=f(e,this.options.sortAscending);this.filteredItems.sort(i),t!==this.sortHistory[0]&&this.sortHistory.unshift(t)}},c.prototype._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw Error("No layout mode: "+t);return e.options=this.options[t],e},c.prototype._resetLayout=function(){t.prototype._resetLayout.call(this),this._mode()._resetLayout()},c.prototype._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},c.prototype._manageStamp=function(t){this._mode()._manageStamp(t)},c.prototype._getContainerSize=function(){return this._mode()._getContainerSize()},c.prototype.needsResizeLayout=function(){return this._mode().needsResizeLayout()},c.prototype.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},c.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps();var o=this._filterRevealAdded(e);this.layoutItems(i),this.filteredItems=o.concat(this.filteredItems)}},c.prototype._filterRevealAdded=function(t){var e=this._noTransition(function(){return this._filter(t)});return this.layoutItems(e,!0),this.reveal(e),t},c.prototype.insert=function(t){var e=this.addItems(t);if(e.length){var i,o,n=e.length;for(i=0;n>i;i++)o=e[i],this.element.appendChild(o.element);var r=this._filter(e);for(this._noTransition(function(){this.hide(r)}),i=0;n>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;n>i;i++)delete e[i].isLayoutInstant;this.reveal(r)}};var l=c.prototype.remove;return c.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(l.call(this,t),e&&e.length)for(var i=0,r=e.length;r>i;i++){var s=e[i];n(s,this.filteredItems)}},c.prototype._noTransition=function(t){var e=this.options.transitionDuration;this.options.transitionDuration=0;var i=t.call(this);return this.options.transitionDuration=e,i},c}var s=t.jQuery,a=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},u=document.documentElement,p=u.textContent?function(t){return t.textContent}:function(t){return t.innerText},h=Object.prototype.toString,f=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","matches-selector/matches-selector","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],r):t.Isotope=r(t.Outlayer,t.getSize,t.matchesSelector,t.Isotope.Item,t.Isotope.LayoutMode)}(window); \ No newline at end of file +(function(t){function e(){}function i(t){function i(e){e.prototype.option||(e.prototype.option=function(e){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))})}function n(e,i){t.fn[e]=function(n){if("string"==typeof n){for(var s=o.call(arguments,1),a=0,u=this.length;u>a;a++){var p=this[a],h=t.data(p,e);if(h)if(t.isFunction(h[n])&&"_"!==n.charAt(0)){var f=h[n].apply(h,s);if(void 0!==f)return f}else r("no such method '"+n+"' for "+e+" instance");else r("cannot call methods on "+e+" prior to initialization; "+"attempted to call '"+n+"'")}return this}return this.each(function(){var o=t.data(this,e);o?(o.option(n),o._init()):(o=new i(this,n),t.data(this,e,o))})}}if(t){var r="undefined"==typeof console?e:function(t){console.error(t)};return t.bridget=function(t,e){i(e),n(t,e)},t.bridget}}var o=Array.prototype.slice;"function"==typeof define&&define.amd?define("jquery-bridget/jquery.bridget",["jquery"],i):i(t.jQuery)})(window),function(t){function e(e){var i=t.event;return i.target=i.target||i.srcElement||e,i}var i=document.documentElement,o=function(){};i.addEventListener?o=function(t,e,i){t.addEventListener(e,i,!1)}:i.attachEvent&&(o=function(t,i,o){t[i+o]=o.handleEvent?function(){var i=e(t);o.handleEvent.call(o,i)}:function(){var i=e(t);o.call(t,i)},t.attachEvent("on"+i,t[i+o])});var n=function(){};i.removeEventListener?n=function(t,e,i){t.removeEventListener(e,i,!1)}:i.detachEvent&&(n=function(t,e,i){t.detachEvent("on"+e,t[e+i]);try{delete t[e+i]}catch(o){t[e+i]=void 0}});var r={bind:o,unbind:n};"function"==typeof define&&define.amd?define("eventie/eventie",r):"object"==typeof exports?module.exports=r:t.eventie=r}(this),function(t){function e(t){"function"==typeof t&&(e.isReady?t():r.push(t))}function i(t){var i="readystatechange"===t.type&&"complete"!==n.readyState;if(!e.isReady&&!i){e.isReady=!0;for(var o=0,s=r.length;s>o;o++){var a=r[o];a()}}}function o(o){return o.bind(n,"DOMContentLoaded",i),o.bind(n,"readystatechange",i),o.bind(t,"load",i),e}var n=t.document,r=[];e.isReady=!1,"function"==typeof define&&define.amd?(e.isReady="function"==typeof requirejs,define("doc-ready/doc-ready",["eventie/eventie"],o)):t.docReady=o(t.eventie)}(this),function(){function t(){}function e(t,e){for(var i=t.length;i--;)if(t[i].listener===e)return i;return-1}function i(t){return function(){return this[t].apply(this,arguments)}}var o=t.prototype,n=this,r=n.EventEmitter;o.getListeners=function(t){var e,i,o=this._getEvents();if(t instanceof RegExp){e={};for(i in o)o.hasOwnProperty(i)&&t.test(i)&&(e[i]=o[i])}else e=o[t]||(o[t]=[]);return e},o.flattenListeners=function(t){var e,i=[];for(e=0;t.length>e;e+=1)i.push(t[e].listener);return i},o.getListenersAsObject=function(t){var e,i=this.getListeners(t);return i instanceof Array&&(e={},e[t]=i),e||i},o.addListener=function(t,i){var o,n=this.getListenersAsObject(t),r="object"==typeof i;for(o in n)n.hasOwnProperty(o)&&-1===e(n[o],i)&&n[o].push(r?i:{listener:i,once:!1});return this},o.on=i("addListener"),o.addOnceListener=function(t,e){return this.addListener(t,{listener:e,once:!0})},o.once=i("addOnceListener"),o.defineEvent=function(t){return this.getListeners(t),this},o.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},o.removeListener=function(t,i){var o,n,r=this.getListenersAsObject(t);for(n in r)r.hasOwnProperty(n)&&(o=e(r[n],i),-1!==o&&r[n].splice(o,1));return this},o.off=i("removeListener"),o.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},o.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},o.manipulateListeners=function(t,e,i){var o,n,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(o=i.length;o--;)r.call(this,e,i[o]);else for(o in e)e.hasOwnProperty(o)&&(n=e[o])&&("function"==typeof n?r.call(this,o,n):s.call(this,o,n));return this},o.removeEvent=function(t){var e,i=typeof t,o=this._getEvents();if("string"===i)delete o[t];else if(t instanceof RegExp)for(e in o)o.hasOwnProperty(e)&&t.test(e)&&delete o[e];else delete this._events;return this},o.removeAllListeners=i("removeEvent"),o.emitEvent=function(t,e){var i,o,n,r,s=this.getListenersAsObject(t);for(n in s)if(s.hasOwnProperty(n))for(o=s[n].length;o--;)i=s[n][o],i.once===!0&&this.removeListener(t,i.listener),r=i.listener.apply(this,e||[]),r===this._getOnceReturnValue()&&this.removeListener(t,i.listener);return this},o.trigger=i("emitEvent"),o.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},o.setOnceReturnValue=function(t){return this._onceReturnValue=t,this},o._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},o._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return n.EventEmitter=r,t},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:this.EventEmitter=t}.call(this),function(t){function e(t){if(t){if("string"==typeof o[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,n=0,r=i.length;r>n;n++)if(e=i[n]+t,"string"==typeof o[e])return e}}var i="Webkit Moz ms Ms O".split(" "),o=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return e}):"object"==typeof exports?module.exports=e:t.getStyleProperty=e}(window),function(t){function e(t){var e=parseFloat(t),i=-1===t.indexOf("%")&&!isNaN(e);return i&&e}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,i=s.length;i>e;e++){var o=s[e];t[o]=0}return t}function o(t){function o(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var o=r(t);if("none"===o.display)return i();var n={};n.width=t.offsetWidth,n.height=t.offsetHeight;for(var h=n.isBorderBox=!(!p||!o[p]||"border-box"!==o[p]),f=0,c=s.length;c>f;f++){var d=s[f],l=o[d];l=a(t,l);var y=parseFloat(l);n[d]=isNaN(y)?0:y}var m=n.paddingLeft+n.paddingRight,g=n.paddingTop+n.paddingBottom,v=n.marginLeft+n.marginRight,_=n.marginTop+n.marginBottom,I=n.borderLeftWidth+n.borderRightWidth,L=n.borderTopWidth+n.borderBottomWidth,z=h&&u,S=e(o.width);S!==!1&&(n.width=S+(z?0:m+I));var b=e(o.height);return b!==!1&&(n.height=b+(z?0:g+L)),n.innerWidth=n.width-(m+I),n.innerHeight=n.height-(g+L),n.outerWidth=n.width+v,n.outerHeight=n.height+_,n}}function a(t,e){if(n||-1===e.indexOf("%"))return e;var i=t.style,o=i.left,r=t.runtimeStyle,s=r&&r.left;return s&&(r.left=t.currentStyle.left),i.left=e,e=i.pixelLeft,i.left=o,s&&(r.left=s),e}var u,p=t("boxSizing");return function(){if(p){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[p]="border-box";var i=document.body||document.documentElement;i.appendChild(t);var o=r(t);u=200===e(o.width),i.removeChild(t)}}(),o}var n=t.getComputedStyle,r=n?function(t){return n(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],o):"object"==typeof exports?module.exports=o(require("get-style-property")):t.getSize=o(t.getStyleProperty)}(window),function(t,e){function i(t,e){return t[a](e)}function o(t){if(!t.parentNode){var e=document.createDocumentFragment();e.appendChild(t)}}function n(t,e){o(t);for(var i=t.parentNode.querySelectorAll(e),n=0,r=i.length;r>n;n++)if(i[n]===t)return!0;return!1}function r(t,e){return o(t),i(t,e)}var s,a=function(){if(e.matchesSelector)return"matchesSelector";for(var t=["webkit","moz","ms","o"],i=0,o=t.length;o>i;i++){var n=t[i],r=n+"MatchesSelector";if(e[r])return r}}();if(a){var u=document.createElement("div"),p=i(u,"div");s=p?i:r}else s=n;"function"==typeof define&&define.amd?define("matches-selector/matches-selector",[],function(){return s}):window.matchesSelector=s}(this,Element.prototype),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){for(var e in t)return!1;return e=null,!0}function o(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}function n(t,n,r){function a(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var u=r("transition"),p=r("transform"),h=u&&p,f=!!r("perspective"),c={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"}[u],d=["transform","transition","transitionDuration","transitionProperty"],l=function(){for(var t={},e=0,i=d.length;i>e;e++){var o=d[e],n=r(o);n&&n!==o&&(t[o]=n)}return t}();e(a.prototype,t.prototype),a.prototype._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},a.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},a.prototype.getSize=function(){this.size=n(this.element)},a.prototype.css=function(t){var e=this.element.style;for(var i in t){var o=l[i]||i;e[o]=t[i]}},a.prototype.getPosition=function(){var t=s(this.element),e=this.layout.options,i=e.isOriginLeft,o=e.isOriginTop,n=parseInt(t[i?"left":"right"],10),r=parseInt(t[o?"top":"bottom"],10);n=isNaN(n)?0:n,r=isNaN(r)?0:r;var a=this.layout.size;n-=i?a.paddingLeft:a.paddingRight,r-=o?a.paddingTop:a.paddingBottom,this.position.x=n,this.position.y=r},a.prototype.layoutPosition=function(){var t=this.layout.size,e=this.layout.options,i={};e.isOriginLeft?(i.left=this.position.x+t.paddingLeft+"px",i.right=""):(i.right=this.position.x+t.paddingRight+"px",i.left=""),e.isOriginTop?(i.top=this.position.y+t.paddingTop+"px",i.bottom=""):(i.bottom=this.position.y+t.paddingBottom+"px",i.top=""),this.css(i),this.emitEvent("layout",[this])};var y=f?function(t,e){return"translate3d("+t+"px, "+e+"px, 0)"}:function(t,e){return"translate("+t+"px, "+e+"px)"};a.prototype._transitionTo=function(t,e){this.getPosition();var i=this.position.x,o=this.position.y,n=parseInt(t,10),r=parseInt(e,10),s=n===this.position.x&&r===this.position.y;if(this.setPosition(t,e),s&&!this.isTransitioning)return this.layoutPosition(),void 0;var a=t-i,u=e-o,p={},h=this.layout.options;a=h.isOriginLeft?a:-a,u=h.isOriginTop?u:-u,p.transform=y(a,u),this.transition({to:p,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},a.prototype.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},a.prototype.moveTo=h?a.prototype._transitionTo:a.prototype.goTo,a.prototype.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},a.prototype._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},a.prototype._transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return this._nonTransition(t),void 0;var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var o=this.element.offsetHeight;o=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var m=p&&o(p)+",opacity";a.prototype.enableTransition=function(){this.isTransitioning||(this.css({transitionProperty:m,transitionDuration:this.layout.options.transitionDuration}),this.element.addEventListener(c,this,!1))},a.prototype.transition=a.prototype[u?"_transition":"_nonTransition"],a.prototype.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},a.prototype.onotransitionend=function(t){this.ontransitionend(t)};var g={"-webkit-transform":"transform","-moz-transform":"transform","-o-transform":"transform"};a.prototype.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,o=g[t.propertyName]||t.propertyName;if(delete e.ingProperties[o],i(e.ingProperties)&&this.disableTransition(),o in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[o]),o in e.onEnd){var n=e.onEnd[o];n.call(this),delete e.onEnd[o]}this.emitEvent("transitionEnd",[this])}},a.prototype.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(c,this,!1),this.isTransitioning=!1},a.prototype._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var v={transitionProperty:"",transitionDuration:""};return a.prototype.removeTransitionStyles=function(){this.css(v)},a.prototype.removeElem=function(){this.element.parentNode.removeChild(this.element),this.emitEvent("remove",[this])},a.prototype.remove=function(){if(!u||!parseFloat(this.layout.options.transitionDuration))return this.removeElem(),void 0;var t=this;this.on("transitionEnd",function(){return t.removeElem(),!0}),this.hide()},a.prototype.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options;this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0})},a.prototype.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options;this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:{opacity:function(){this.isHidden&&this.css({display:"none"})}}})},a.prototype.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},a}var r=t.getComputedStyle,s=r?function(t){return r(t,null)}:function(t){return t.currentStyle};"function"==typeof define&&define.amd?define("outlayer/item",["eventEmitter/EventEmitter","get-size/get-size","get-style-property/get-style-property"],n):(t.Outlayer={},t.Outlayer.Item=n(t.EventEmitter,t.getSize,t.getStyleProperty))}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===f.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=d(e,t);-1!==i&&e.splice(i,1)}function r(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()}function s(i,s,f,d,l,y){function m(t,i){if("string"==typeof t&&(t=a.querySelector(t)),!t||!c(t))return u&&u.error("Bad "+this.constructor.namespace+" element: "+t),void 0;this.element=t,this.options=e({},this.constructor.defaults),this.option(i);var o=++g;this.element.outlayerGUID=o,v[o]=this,this._create(),this.options.isInitLayout&&this.layout()}var g=0,v={};return m.namespace="outlayer",m.Item=y,m.defaults={containerStyle:{position:"relative"},isInitLayout:!0,isOriginLeft:!0,isOriginTop:!0,isResizeBound:!0,isResizingContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}},e(m.prototype,f.prototype),m.prototype.option=function(t){e(this.options,t)},m.prototype._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),e(this.element.style,this.options.containerStyle),this.options.isResizeBound&&this.bindResize()},m.prototype.reloadItems=function(){this.items=this._itemize(this.element.children)},m.prototype._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,o=[],n=0,r=e.length;r>n;n++){var s=e[n],a=new i(s,this);o.push(a)}return o},m.prototype._filterFindItemElements=function(t){t=o(t);for(var e=this.options.itemSelector,i=[],n=0,r=t.length;r>n;n++){var s=t[n];if(c(s))if(e){l(s,e)&&i.push(s);for(var a=s.querySelectorAll(e),u=0,p=a.length;p>u;u++)i.push(a[u])}else i.push(s)}return i},m.prototype.getItemElements=function(){for(var t=[],e=0,i=this.items.length;i>e;e++)t.push(this.items[e].element);return t},m.prototype.layout=function(){this._resetLayout(),this._manageStamps();var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;this.layoutItems(this.items,t),this._isLayoutInited=!0},m.prototype._init=m.prototype.layout,m.prototype._resetLayout=function(){this.getSize()},m.prototype.getSize=function(){this.size=d(this.element)},m.prototype._getMeasurement=function(t,e){var i,o=this.options[t];o?("string"==typeof o?i=this.element.querySelector(o):c(o)&&(i=o),this[t]=i?d(i)[e]:o):this[t]=0},m.prototype.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},m.prototype._getItemsForLayout=function(t){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i];n.isIgnored||e.push(n)}return e},m.prototype._layoutItems=function(t,e){function i(){o.emitEvent("layoutComplete",[o,t])}var o=this;if(!t||!t.length)return i(),void 0;this._itemsOn(t,"layout",i);for(var n=[],r=0,s=t.length;s>r;r++){var a=t[r],u=this._getItemLayoutPosition(a);u.item=a,u.isInstant=e||a.isLayoutInstant,n.push(u)}this._processLayoutQueue(n)},m.prototype._getItemLayoutPosition=function(){return{x:0,y:0}},m.prototype._processLayoutQueue=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];this._positionItem(o.item,o.x,o.y,o.isInstant)}},m.prototype._positionItem=function(t,e,i,o){o?t.goTo(e,i):t.moveTo(e,i)},m.prototype._postLayout=function(){this.resizeContainer()},m.prototype.resizeContainer=function(){if(this.options.isResizingContainer){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))}},m.prototype._getContainerSize=h,m.prototype._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},m.prototype._itemsOn=function(t,e,i){function o(){return n++,n===r&&i.call(s),!0}for(var n=0,r=t.length,s=this,a=0,u=t.length;u>a;a++){var p=t[a];p.on(e,o)}},m.prototype.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},m.prototype.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},m.prototype.stamp=function(t){if(t=this._find(t)){this.stamps=this.stamps.concat(t);for(var e=0,i=t.length;i>e;e++){var o=t[e];this.ignore(o)}}},m.prototype.unstamp=function(t){if(t=this._find(t))for(var e=0,i=t.length;i>e;e++){var o=t[e];n(o,this.stamps),this.unignore(o)}},m.prototype._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=o(t)):void 0},m.prototype._manageStamps=function(){if(this.stamps&&this.stamps.length){this._getBoundingRect();for(var t=0,e=this.stamps.length;e>t;t++){var i=this.stamps[t];this._manageStamp(i)}}},m.prototype._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},m.prototype._manageStamp=h,m.prototype._getElementOffset=function(t){var e=t.getBoundingClientRect(),i=this._boundingRect,o=d(t),n={left:e.left-i.left-o.marginLeft,top:e.top-i.top-o.marginTop,right:i.right-e.right-o.marginRight,bottom:i.bottom-e.bottom-o.marginBottom};return n},m.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},m.prototype.bindResize=function(){this.isResizeBound||(i.bind(t,"resize",this),this.isResizeBound=!0)},m.prototype.unbindResize=function(){this.isResizeBound&&i.unbind(t,"resize",this),this.isResizeBound=!1},m.prototype.onresize=function(){function t(){e.resize(),delete e.resizeTimeout}this.resizeTimeout&&clearTimeout(this.resizeTimeout);var e=this;this.resizeTimeout=setTimeout(t,100)},m.prototype.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},m.prototype.needsResizeLayout=function(){var t=d(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},m.prototype.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},m.prototype.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},m.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},m.prototype.reveal=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.reveal()}},m.prototype.hide=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.hide()}},m.prototype.getItem=function(t){for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];if(o.element===t)return o}},m.prototype.getItems=function(t){if(t&&t.length){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i],r=this.getItem(n);r&&e.push(r)}return e}},m.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(e&&e.length){this._itemsOn(e,"remove",function(){this.emitEvent("removeComplete",[this,e])});for(var i=0,r=e.length;r>i;i++){var s=e[i];s.remove(),n(s,this.items)}}},m.prototype.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="";for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];o.destroy()}this.unbindResize(),delete this.element.outlayerGUID,p&&p.removeData(this.element,this.constructor.namespace)},m.data=function(t){var e=t&&t.outlayerGUID;return e&&v[e]},m.create=function(t,i){function o(){m.apply(this,arguments)}return Object.create?o.prototype=Object.create(m.prototype):e(o.prototype,m.prototype),o.prototype.constructor=o,o.defaults=e({},m.defaults),e(o.defaults,i),o.prototype.settings={},o.namespace=t,o.data=m.data,o.Item=function(){y.apply(this,arguments)},o.Item.prototype=new y,s(function(){for(var e=r(t),i=a.querySelectorAll(".js-"+e),n="data-"+e+"-options",s=0,h=i.length;h>s;s++){var f,c=i[s],d=c.getAttribute(n);try{f=d&&JSON.parse(d)}catch(l){u&&u.error("Error parsing "+n+" on "+c.nodeName.toLowerCase()+(c.id?"#"+c.id:"")+": "+l);continue}var y=new o(c,f);p&&p.data(c,t,y)}}),p&&p.bridget&&p.bridget(t,o),o},m.Item=y,m}var a=t.document,u=t.console,p=t.jQuery,h=function(){},f=Object.prototype.toString,c="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},d=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define("outlayer/outlayer",["eventie/eventie","doc-ready/doc-ready","eventEmitter/EventEmitter","get-size/get-size","matches-selector/matches-selector","./item"],s):t.Outlayer=s(t.eventie,t.docReady,t.EventEmitter,t.getSize,t.matchesSelector,t.Outlayer.Item)}(window),function(t){function e(t){function e(){t.Item.apply(this,arguments)}return e.prototype=new t.Item,e.prototype._create=function(){this.id=this.layout.itemGUID++,t.Item.prototype._create.call(this),this.sortData={}},e.prototype.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var t=this.layout.options.getSortData,e=this.layout._sorters;for(var i in t){var o=e[i];this.sortData[i]=o(this.element,this)}}},e}"function"==typeof define&&define.amd?define("isotope/js/item",["outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.Item=e(t.Outlayer))}(window),function(t){function e(t,e){function i(t){this.isotope=t,t&&(this.options=t.options[this.namespace],this.element=t.element,this.items=t.filteredItems,this.size=t.size)}return function(){function t(t){return function(){return e.prototype[t].apply(this.isotope,arguments)}}for(var o=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout"],n=0,r=o.length;r>n;n++){var s=o[n];i.prototype[s]=t(s)}}(),i.prototype.needsVerticalResizeLayout=function(){var e=t(this.isotope.element),i=this.isotope.size&&e;return i&&e.innerHeight!==this.isotope.size.innerHeight},i.prototype._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},i.prototype.getColumnWidth=function(){this.getSegmentSize("column","Width")},i.prototype.getRowHeight=function(){this.getSegmentSize("row","Height")},i.prototype.getSegmentSize=function(t,e){var i=t+e,o="outer"+e;if(this._getMeasurement(i,o),!this[i]){var n=this.getFirstItemSize();this[i]=n&&n[o]||this.isotope.size["inner"+e]}},i.prototype.getFirstItemSize=function(){var e=this.isotope.filteredItems[0];return e&&e.element&&t(e.element)},i.prototype.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},i.prototype.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},i.modes={},i.create=function(t,e){function o(){i.apply(this,arguments)}return o.prototype=new i,e&&(o.options=e),o.prototype.namespace=t,i.modes[t]=o,o},i}"function"==typeof define&&define.amd?define("isotope/js/layout-mode",["get-size/get-size","outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.LayoutMode=e(t.getSize,t.Outlayer))}(window),function(t){function e(t,e){var o=t.create("masonry");return o.prototype._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns();var t=this.cols;for(this.colYs=[];t--;)this.colYs.push(0);this.maxY=0},o.prototype.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}this.columnWidth+=this.gutter,this.cols=Math.floor((this.containerWidth+this.gutter)/this.columnWidth),this.cols=Math.max(this.cols,1)},o.prototype.getContainerWidth=function(){var t=this.options.isFitWidth?this.element.parentNode:this.element,i=e(t);this.containerWidth=i&&i.innerWidth},o.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,o=e&&1>e?"round":"ceil",n=Math[o](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var r=this._getColGroup(n),s=Math.min.apply(Math,r),a=i(r,s),u={x:this.columnWidth*a,y:s},p=s+t.size.outerHeight,h=this.cols+1-r.length,f=0;h>f;f++)this.colYs[a+f]=p;return u},o.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,o=0;i>o;o++){var n=this.colYs.slice(o,o+t);e[o]=Math.max.apply(Math,n)}return e},o.prototype._manageStamp=function(t){var i=e(t),o=this._getElementOffset(t),n=this.options.isOriginLeft?o.left:o.right,r=n+i.outerWidth,s=Math.floor(n/this.columnWidth);s=Math.max(0,s);var a=Math.floor(r/this.columnWidth);a-=r%this.columnWidth?0:1,a=Math.min(this.cols-1,a);for(var u=(this.options.isOriginTop?o.top:o.bottom)+i.outerHeight,p=s;a>=p;p++)this.colYs[p]=Math.max(u,this.colYs[p])},o.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this.options.isFitWidth&&(t.width=this._getContainerFitWidth()),t},o.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},o.prototype.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!==this.containerWidth},o}var i=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++){var n=t[i];if(n===e)return i}return-1};"function"==typeof define&&define.amd?define("masonry/masonry",["outlayer/outlayer","get-size/get-size"],e):t.Masonry=e(t.Outlayer,t.getSize)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t,i){var o=t.create("masonry"),n=o.prototype._getElementOffset,r=o.prototype.layout,s=o.prototype._getMeasurement;e(o.prototype,i.prototype),o.prototype._getElementOffset=n,o.prototype.layout=r,o.prototype._getMeasurement=s;var a=o.prototype.measureColumns;o.prototype.measureColumns=function(){this.items=this.isotope.filteredItems,a.call(this)};var u=o.prototype._manageStamp;return o.prototype._manageStamp=function(){this.options.isOriginLeft=this.isotope.options.isOriginLeft,this.options.isOriginTop=this.isotope.options.isOriginTop,u.apply(this,arguments)},o}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/masonry",["../layout-mode","masonry/masonry"],i):i(t.Isotope.LayoutMode,t.Masonry)}(window),function(t){function e(t){var e=t.create("fitRows");return e.prototype._resetLayout=function(){this.x=0,this.y=0,this.maxY=0},e.prototype._getItemLayoutPosition=function(t){t.getSize(),0!==this.x&&t.size.outerWidth+this.x>this.isotope.size.innerWidth&&(this.x=0,this.y=this.maxY);var e={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=t.size.outerWidth,e},e.prototype._getContainerSize=function(){return{height:this.maxY}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/fit-rows",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t){var e=t.create("vertical",{horizontalAlignment:0});return e.prototype._resetLayout=function(){this.y=0},e.prototype._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},e.prototype._getContainerSize=function(){return{height:this.y}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===h.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=f(e,t);-1!==i&&e.splice(i,1)}function r(t,i,r,u,h){function f(t,e){return function(i,o){for(var n=0,r=t.length;r>n;n++){var s=t[n],a=i.sortData[s],u=o.sortData[s];if(a>u||u>a){var p=void 0!==e[s]?e[s]:e,h=p?1:-1;return(a>u?1:-1)*h}}return 0}}var c=t.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});c.Item=u,c.LayoutMode=h,c.prototype._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),t.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var e in h.modes)this._initLayoutMode(e)},c.prototype.reloadItems=function(){this.itemGUID=0,t.prototype.reloadItems.call(this)},c.prototype._itemize=function(){for(var e=t.prototype._itemize.apply(this,arguments),i=0,o=e.length;o>i;i++){var n=e[i];n.id=this.itemGUID++}return this._updateItemsSortData(e),e},c.prototype._initLayoutMode=function(t){var i=h.modes[t],o=this.options[t]||{};this.options[t]=i.options?e(i.options,o):o,this.modes[t]=new i(this)},c.prototype.layout=function(){return!this._isLayoutInited&&this.options.isInitLayout?(this.arrange(),void 0):(this._layout(),void 0)},c.prototype._layout=function(){var t=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,t),this._isLayoutInited=!0},c.prototype.arrange=function(t){this.option(t),this._getIsInstant(),this.filteredItems=this._filter(this.items),this._sort(),this._layout()},c.prototype._init=c.prototype.arrange,c.prototype._getIsInstant=function(){var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;return this._isInstant=t,t},c.prototype._filter=function(t){function e(){f.reveal(n),f.hide(r)}var i=this.options.filter;i=i||"*";for(var o=[],n=[],r=[],s=this._getFilterTest(i),a=0,u=t.length;u>a;a++){var p=t[a];if(!p.isIgnored){var h=s(p);h&&o.push(p),h&&p.isHidden?n.push(p):h||p.isHidden||r.push(p)}}var f=this;return this._isInstant?this._noTransition(e):e(),o},c.prototype._getFilterTest=function(t){return s&&this.options.isJQueryFiltering?function(e){return s(e.element).is(t)}:"function"==typeof t?function(e){return t(e.element)}:function(e){return r(e.element,t)}},c.prototype.updateSortData=function(t){this._getSorters(),t=o(t);var e=this.getItems(t);e=e.length?e:this.items,this._updateItemsSortData(e) +},c.prototype._getSorters=function(){var t=this.options.getSortData;for(var e in t){var i=t[e];this._sorters[e]=d(i)}},c.prototype._updateItemsSortData=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];o.updateSortData()}};var d=function(){function t(t){if("string"!=typeof t)return t;var i=a(t).split(" "),o=i[0],n=o.match(/^\[(.+)\]$/),r=n&&n[1],s=e(r,o),u=c.sortDataParsers[i[1]];return t=u?function(t){return t&&u(s(t))}:function(t){return t&&s(t)}}function e(t,e){var i;return i=t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&p(i)}}return t}();c.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},c.prototype._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=f(e,this.options.sortAscending);this.filteredItems.sort(i),t!==this.sortHistory[0]&&this.sortHistory.unshift(t)}},c.prototype._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw Error("No layout mode: "+t);return e.options=this.options[t],e},c.prototype._resetLayout=function(){t.prototype._resetLayout.call(this),this._mode()._resetLayout()},c.prototype._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},c.prototype._manageStamp=function(t){this._mode()._manageStamp(t)},c.prototype._getContainerSize=function(){return this._mode()._getContainerSize()},c.prototype.needsResizeLayout=function(){return this._mode().needsResizeLayout()},c.prototype.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},c.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps();var o=this._filterRevealAdded(e);this.layoutItems(i),this.filteredItems=o.concat(this.filteredItems)}},c.prototype._filterRevealAdded=function(t){var e=this._noTransition(function(){return this._filter(t)});return this.layoutItems(e,!0),this.reveal(e),t},c.prototype.insert=function(t){var e=this.addItems(t);if(e.length){var i,o,n=e.length;for(i=0;n>i;i++)o=e[i],this.element.appendChild(o.element);var r=this._filter(e);for(this._noTransition(function(){this.hide(r)}),i=0;n>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;n>i;i++)delete e[i].isLayoutInstant;this.reveal(r)}};var l=c.prototype.remove;return c.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(l.call(this,t),e&&e.length)for(var i=0,r=e.length;r>i;i++){var s=e[i];n(s,this.filteredItems)}},c.prototype._noTransition=function(t){var e=this.options.transitionDuration;this.options.transitionDuration=0;var i=t.call(this);return this.options.transitionDuration=e,i},c}var s=t.jQuery,a=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},u=document.documentElement,p=u.textContent?function(t){return t.textContent}:function(t){return t.innerText},h=Object.prototype.toString,f=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","matches-selector/matches-selector","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],r):t.Isotope=r(t.Outlayer,t.getSize,t.matchesSelector,t.Isotope.Item,t.Isotope.LayoutMode)}(window); \ No newline at end of file From 4fb9583880694ff6e29c4df7d7b6cdd701bddb67 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 18 Mar 2014 07:47:06 -0400 Subject: [PATCH 119/122] masonry example fixes for IE8 --- examples/masonry.html | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/examples/masonry.html b/examples/masonry.html index 87692d3..7d164cd 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -26,14 +26,12 @@

Sort

- + + + + +
@@ -174,7 +172,7 @@ docReady( function() { masonry: { columnWidth: 90 }, - // itemSelector: '.element', + itemSelector: '.element', stamp: '.stamp', getSortData: { @@ -194,16 +192,11 @@ docReady( function() { var options = document.querySelector('#options'); eventie.bind( options, 'click', function( event ) { - if ( !matchesSelector( event.target, 'a' ) ) { + if ( !matchesSelector( event.target, 'button' ) ) { return; } - - // use link's href, remove leading hash - var sortBy = event.target.getAttribute('href').slice( 1 ); - sortBy.slice( 0, 1 ); - iso.options.sortBy = sortBy; - iso.arrange(); - event.preventDefault(); + var sortBy = event.target.getAttribute('data-sort-by'); + iso.arrange({ sortBy: sortBy }); }); }); From bdc41e9cc150d726cc5aa5c142e7c34a9f73e11a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 20 Mar 2014 23:00:04 -0400 Subject: [PATCH 120/122] add Support and Pull requests to contrib; README updates --- CONTRIBUTING.mdown | 25 ++++++++++++++++++------- README.mdown | 22 ++++++++++++++-------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/CONTRIBUTING.mdown b/CONTRIBUTING.mdown index 1245647..2251f72 100644 --- a/CONTRIBUTING.mdown +++ b/CONTRIBUTING.mdown @@ -2,12 +2,23 @@ ### Reduced test case required -All bug reports and problem issues require a reduced test case. See [CSS Tricks - Reduced Test Cases](http://css-tricks.com/reduced-test-cases/) on why they _"are the absolute, ... number one way to troubleshoot bugs."_ +All bug reports and problem issues require a [**reduced test case**](http://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen examples](http://codepen.io/desandro/tag/isotope-docs) from [the docs](http://isotope.metafizzy.co). -+ A reduced test case is an isolated example that demonstrates the bug or issue. -+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling. -+ Any one of the [CodePen examples](http://codepen.io/desandro/tag/isotope-docs) in [the docs](http://isotope.metafizzy.co) may be forked and used to build your reduced test case. -+ A link to your site is **not** a reduced test case. -+ Until you provide a reduced test case, your issue will be closed. ++ A reduced test case clearly demonstrates the bug or issue. ++ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. ++ A link to your production site is **not** a reduced test case. -Reduced test cases dramatically help both you and me. They help you identify the issue at hand and understand your own code. On my side, they greatly reduce the amount of time spent resolving the issue. +Providing a reduced test case is the best way to get your issue addressed. Without a reduced test case, your issue may be closed. + +## Support + ++ Having trouble setting up Isotope? ++ Running into a time-consuming problem? + +[CodersClan has a dedicated support forum for Isotope](https://www.codersclan.net/?repo_id=1), where you can get personal support from experienced developers. + +#### [Get support on CodersClan](https://www.codersclan.net/?repo_id=1) + +## Pull requests + +Contributions are welcome! Please note: your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. [The MIT license](http://choosealicense.com/licenses/mit/) or [public domain unlicense](http://choosealicense.com/licenses/unlicense/) are permissive, and allow integration of your patch into Isotope as part of a commercial product. diff --git a/README.mdown b/README.mdown index c171e3a..75c1cd1 100644 --- a/README.mdown +++ b/README.mdown @@ -1,6 +1,6 @@ # Isotope -_Filter and sort magical layouts_ +_Filter & sort magical layouts_ See [isotopejs.com](http://isotopejs.com) for complete docs and demos. @@ -18,7 +18,7 @@ If you are cool with the command line, install Isotope as a [Bower](http://bower bower install isotope ``` -## Isotope +## License Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. @@ -31,8 +31,8 @@ For non-commercial, personal, or open source projects and applications, you may ### In JavaScript ``` js -var container = document.querySelector('#container'); -var iso = new Isotope( container, { +// jQuery +$('#container').isotope({ // options... itemSelector: '.item', masonry: { @@ -41,10 +41,10 @@ var iso = new Isotope( container, { }); ``` -Or with jQuery - ``` js -$('#container').isotope({ +// vanilla JS +var container = document.querySelector('#container'); +var iso = new Isotope( container, { // options... itemSelector: '.item', masonry: { @@ -65,6 +65,12 @@ Add a class of `js-isotope` to your element. Options can be set in JSON in `data
``` +## Support + +[CodersClan has a dedicated support forum for Isotope](https://www.codersclan.net/?repo_id=1), where you can get personal support from experienced developers. + +#### [Get support on CodersClan](https://www.codersclan.net/?repo_id=1) + * * * -Copyright (c) 2013 Metafizzy +By [Metafizzy](http://metafizzy.co) From c6d915f0317f41ef2eee5bc2123be3c38f52e47d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 21 Mar 2014 08:04:56 -0400 Subject: [PATCH 121/122] pkgd links in README --- README.mdown | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.mdown b/README.mdown index 75c1cd1..bd8ed24 100644 --- a/README.mdown +++ b/README.mdown @@ -8,7 +8,8 @@ See [isotopejs.com](http://isotopejs.com) for complete docs and demos. A packaged source file includes everything you need to use Isotope. -TBD ++ [isotope.pkgd.js](http://isotope.metafizzy.co/beta/isotope.pkgd.js) ++ [isotope.pkgd.min.js](http://isotope.metafizzy.co/beta/isotope.pkgd.min.js) ### Bower From 1d0cd0625908aaf6f15d6a8d9a2e7c0e71c959a5 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 31 Mar 2014 07:42:11 -0400 Subject: [PATCH 122/122] v2.0.0 dist pkgd v2.0.0 --- bower.json | 2 +- dist/isotope.pkgd.js | 8 ++++---- dist/isotope.pkgd.min.js | 4 ++-- js/isotope.js | 4 ++-- package.json | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/bower.json b/bower.json index c4af0f2..4e09284 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.10", + "version": "2.0.0", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/dist/isotope.pkgd.js b/dist/isotope.pkgd.js index 522e983..9dc4937 100644 --- a/dist/isotope.pkgd.js +++ b/dist/isotope.pkgd.js @@ -1,6 +1,6 @@ /*! - * Isotope PACKAGED v2.0.0-beta.10 - * Magical sorting and filtering layouts + * Isotope PACKAGED v2.0.0 + * Filter & sort magical layouts * http://isotope.metafizzy.co */ @@ -3285,8 +3285,8 @@ if ( typeof define === 'function' && define.amd ) { })( window ); /*! - * Isotope v2.0.0-beta.10 - * Magical sorting and filtering layouts + * Isotope v2.0.0 + * Filter & sort magical layouts * http://isotope.metafizzy.co */ diff --git a/dist/isotope.pkgd.min.js b/dist/isotope.pkgd.min.js index 550928d..c225f67 100644 --- a/dist/isotope.pkgd.min.js +++ b/dist/isotope.pkgd.min.js @@ -1,6 +1,6 @@ /*! - * Isotope PACKAGED v2.0.0-beta.10 - * Magical sorting and filtering layouts + * Isotope PACKAGED v2.0.0 + * Filter & sort magical layouts * http://isotope.metafizzy.co */ diff --git a/js/isotope.js b/js/isotope.js index fc99fd7..c44df89 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,6 +1,6 @@ /*! - * Isotope v2.0.0-beta.10 - * Magical sorting and filtering layouts + * Isotope v2.0.0 + * Filter & sort magical layouts * http://isotope.metafizzy.co */ diff --git a/package.json b/package.json index 9fcbd61..c088217 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.10", + "version": "2.0.0", "description": "Filter and sort magical layouts", "devDependencies": { "grunt": "~0.4.0",