From fbcae20a6f6d056dc623160aee6f858a24a0c9ca Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 12:34:26 -0400 Subject: [PATCH] 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; +} +