mirror of https://github.com/metafizzy/isotope
Browse Source
Conflicts: .gitignore CONTRIBUTING.mdown README.mdown _posts/docs/2010-12-01-introduction.md _posts/docs/2010-12-03-options.md _posts/docs/2010-12-04-methods.md _posts/docs/2010-12-05-layout-modes.md _posts/docs/2010-12-06-filtering.md _posts/docs/2010-12-07-sorting.md _posts/docs/2010-12-09-animating.md _posts/docs/2010-12-10-adding-items.md _posts/docs/2011-05-25-extending-isotope.md _posts/docs/2011-06-16-hash-history-jquery-bbq.md _posts/docs/2011-12-11-help.md _posts/docs/2011-12-20-license.md jquery.isotope.js jquery.isotope.min.js minify.shpull/726/head v2.0.0
David DeSandro
11 years ago
104 changed files with 7902 additions and 5623 deletions
@ -1,4 +1,5 @@
|
||||
_site |
||||
isotope-site.zip |
||||
components/ |
||||
bower_components/ |
||||
node_modules/ |
||||
|
||||
@ -0,0 +1,10 @@
|
||||
{ |
||||
"browser": true, |
||||
"devel": false, |
||||
"strict": true, |
||||
"undef": true, |
||||
"unused": true, |
||||
"predef": { |
||||
"define": false |
||||
} |
||||
} |
||||
@ -1,3 +1,3 @@
|
||||
softTabs = true |
||||
tabSize = 2 |
||||
excludeInFileChooser = "{$exclude,_site/*}" |
||||
excludeInFileChooser = "{$exclude,_site/*,bower_components,node_modules}" |
||||
|
||||
@ -1,15 +1,24 @@
|
||||
## Submitting issues |
||||
|
||||
### Read the Help page |
||||
### Reduced test case required |
||||
|
||||
[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. |
||||
All bug reports and problem issues require a [**reduced test case**](http://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen examples](http://codepen.io/desandro/tag/isotope-docs) from [the docs](http://isotope.metafizzy.co). |
||||
|
||||
### Provide an isolated example with a live URL |
||||
+ A reduced test case clearly demonstrates the bug or issue. |
||||
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. |
||||
+ A link to your production site is **not** a reduced test case. |
||||
|
||||
**A live URL is required** for any bug report or personal support request. Try re-creating the issue in jsFiddle using this template: |
||||
Providing a reduced test case is the best way to get your issue addressed. Without a reduced test case, your issue may be closed. |
||||
|
||||
+ [jsFiddle jQuery Isotope template](http://jsfiddle.net/desandro/DQydj/) |
||||
## Support |
||||
|
||||
### Look over the Issues Agreement |
||||
+ Having trouble setting up Isotope? |
||||
+ Running into a time-consuming problem? |
||||
|
||||
I wrote an [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) that covers how to submit a good issue. |
||||
[CodersClan has a dedicated support forum for Isotope](https://www.codersclan.net/?repo_id=1), where you can get personal support from experienced developers. |
||||
|
||||
#### [Get support on CodersClan](https://www.codersclan.net/?repo_id=1) |
||||
|
||||
## Pull requests |
||||
|
||||
Contributions are welcome! Please note: your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. [The MIT license](http://choosealicense.com/licenses/mit/) or [public domain unlicense](http://choosealicense.com/licenses/unlicense/) are permissive, and allow integration of your patch into Isotope as part of a commercial product. |
||||
|
||||
@ -0,0 +1,87 @@
|
||||
/*jshint node: true, strict: false */ |
||||
|
||||
// -------------------------- grunt -------------------------- //
|
||||
|
||||
module.exports = function( grunt ) { |
||||
|
||||
var banner = ( function() { |
||||
var src = grunt.file.read('js/isotope.js'); |
||||
var re = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*'); |
||||
var matches = src.match( re ); |
||||
var banner = matches[0].replace( 'Isotope', 'Isotope PACKAGED' ); |
||||
return banner; |
||||
})(); |
||||
|
||||
grunt.initConfig({ |
||||
// ----- global settings ----- //
|
||||
namespace: 'isotope', |
||||
dataDir: 'tasks/data', |
||||
|
||||
// ----- tasks settings ----- //
|
||||
|
||||
jshint: { |
||||
docs: [ 'js/**/*.js' ], |
||||
options: grunt.file.readJSON('.jshintrc') |
||||
}, |
||||
|
||||
requirejs: { |
||||
pkgd: { |
||||
options: { |
||||
baseUrl: 'bower_components', |
||||
include: [ |
||||
'jquery-bridget/jquery.bridget', |
||||
'isotope/js/isotope' |
||||
], |
||||
out: 'dist/isotope.pkgd.js', |
||||
optimize: 'none', |
||||
paths: { |
||||
isotope: '../', |
||||
jquery: 'empty:' |
||||
}, |
||||
wrap: { |
||||
start: banner |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
|
||||
uglify: { |
||||
pkgd: { |
||||
files: { |
||||
'dist/isotope.pkgd.min.js': [ 'dist/isotope.pkgd.js' ] |
||||
}, |
||||
options: { |
||||
banner: banner |
||||
} |
||||
} |
||||
} |
||||
|
||||
}); |
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint'); |
||||
grunt.loadNpmTasks('grunt-contrib-uglify'); |
||||
grunt.loadNpmTasks('grunt-requirejs'); |
||||
|
||||
grunt.registerTask( 'pkgd-edit', function() { |
||||
var outFile = grunt.config.get('requirejs.pkgd.options.out'); |
||||
var contents = grunt.file.read( outFile ); |
||||
// get requireJS definition code
|
||||
var definitionRE = /define\(\s*'isotope\/js\/isotope'(.|\n)+isotopeDefinition\s*\)/; |
||||
var definition = contents.match( definitionRE )[0]; |
||||
// remove name module
|
||||
var fixDefinition = definition.replace( "'isotope/js/isotope',", '' ) |
||||
// ./item -> isotope/js/item
|
||||
.replace( /'.\//g, "'isotope/js/" ); |
||||
contents = contents.replace( definition, fixDefinition ); |
||||
grunt.file.write( outFile, contents ); |
||||
grunt.log.writeln( 'Edited ' + outFile ); |
||||
}); |
||||
|
||||
grunt.registerTask( 'default', [ |
||||
'jshint', |
||||
'requirejs', |
||||
'pkgd-edit', |
||||
'uglify' |
||||
]); |
||||
|
||||
}; |
||||
@ -1,64 +1,77 @@
|
||||
Isotope |
||||
======== |
||||
# Isotope |
||||
|
||||
**An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.** |
||||
_Filter & sort magical layouts_ |
||||
|
||||
This package has all the documentation and demos to get you started. |
||||
See [isotopejs.com](http://isotopejs.com) for complete docs and demos. |
||||
|
||||
View this project live at [http://isotope.metafizzy.co](http://isotope.metafizzy.co). |
||||
## Install |
||||
|
||||
## Licensing |
||||
A packaged source file includes everything you need to use Isotope. |
||||
|
||||
Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required. |
||||
+ [isotope.pkgd.js](http://isotope.metafizzy.co/beta/isotope.pkgd.js) |
||||
+ [isotope.pkgd.min.js](http://isotope.metafizzy.co/beta/isotope.pkgd.min.js) |
||||
|
||||
http://isotope.metafizzy.co/docs/license.html |
||||
### Bower |
||||
|
||||
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. |
||||
If you are cool with the command line, install Isotope as a [Bower](http://bower.io) package: |
||||
|
||||
## Support |
||||
``` bash |
||||
bower install isotope |
||||
``` |
||||
|
||||
Need help with getting Isotope up and running? Got a time-consuming problem you want to get solved quickly? Get [Isotope support on CodersClan](http://codersclan.net/?repo_id=1). |
||||
## License |
||||
|
||||
<p><a href="http://codersclan.net/?repo_id=1"><img src="http://www.codersclan.net/gs_button/?repo_id=1" width="200" /></a></p> |
||||
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. |
||||
|
||||
## Viewing this project locally |
||||
http://isotope.metafizzy.co/license.html |
||||
|
||||
### Via download |
||||
For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the [GPL v3 License](http://choosealicense.com/licenses/gpl-v3/). You may use Isotope for free. |
||||
|
||||
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). |
||||
## Initialize |
||||
|
||||
### Via Jekyll |
||||
### In JavaScript |
||||
|
||||
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: |
||||
``` js |
||||
// jQuery |
||||
$('#container').isotope({ |
||||
// options... |
||||
itemSelector: '.item', |
||||
masonry: { |
||||
columnWidth: 200 |
||||
} |
||||
}); |
||||
``` |
||||
|
||||
``` bash |
||||
git clone https://github.com/desandro/isotope.git |
||||
cd isotope/ |
||||
jekyll --server --auto |
||||
``` js |
||||
// vanilla JS |
||||
var container = document.querySelector('#container'); |
||||
var iso = new Isotope( container, { |
||||
// options... |
||||
itemSelector: '.item', |
||||
masonry: { |
||||
columnWidth: 200 |
||||
} |
||||
}); |
||||
``` |
||||
|
||||
Then view the live site at [http://localhost:4000](http://localhost:4000). |
||||
### In HTML |
||||
|
||||
Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`. |
||||
|
||||
## Changelog |
||||
``` html |
||||
<div class="js-isotope" data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
... |
||||
</div> |
||||
``` |
||||
|
||||
## Support |
||||
|
||||
View the [commit history](https://github.com/desandro/isotope/commits/master/jquery.isotope.js) for a complete robust list of changes to the script. |
||||
[CodersClan has a dedicated support forum for Isotope](https://www.codersclan.net/?repo_id=1), where you can get personal support from experienced developers. |
||||
|
||||
+ **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 |
||||
#### [Get support on CodersClan](https://www.codersclan.net/?repo_id=1) |
||||
|
||||
* * * |
||||
|
||||
Copyright (c) 2011-2014 David DeSandro / Metafizzy LLC |
||||
By [Metafizzy](http://metafizzy.co) |
||||
|
||||
@ -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) |
||||
|
||||
|
||||
|
||||
@ -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; |
||||
}); |
||||
@ -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; |
||||
}); |
||||
@ -1 +0,0 @@
|
||||
<a href="https://www.simplegoods.co/i/WFOLIVJF" class="simple-goods-btn">Buy Developer License - $25.00</a> |
||||
@ -1,7 +0,0 @@
|
||||
{% capture classnames %}{% for cat in element.categories %}{{ cat }} {% endfor %} {% if page.infinite_scroll %} width2 height2 {% endif %} {% endcapture %} |
||||
<div class="element {{ classnames }}" data-symbol="{{ element.symbol }}" data-category="{{ element.categories[0] }}"> |
||||
<p class="number">{{ element.number }}</p> |
||||
<h3 class="symbol">{{ element.symbol }}</h3> |
||||
<h2 class="name">{{ element.name }}</h2> |
||||
<p class="weight">{{ element.weight }}</p> |
||||
</div> |
||||
@ -1,64 +0,0 @@
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -1,22 +0,0 @@
|
||||
<section id="copy"> |
||||
<p>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.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
@ -1,14 +0,0 @@
|
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter"> |
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li> |
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li> |
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li> |
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li> |
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li> |
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li> |
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li> |
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li> |
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li> |
||||
</ul> |
||||
@ -1,21 +0,0 @@
|
||||
<div id="container" class="variable-sizes"> |
||||
{% assign page_position = page.page_position %} |
||||
{% for element in site.elements limit:20 offset:page.page_position %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
layoutMode : 'fitRows' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -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 ); |
||||
} |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
|
||||
<h3>Layout modes</h3> |
||||
|
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode"> |
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li> |
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li> |
||||
<li><a href="#cellsByRow" data-option-value="cellsByRow">cellsByRow</a></li> |
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li> |
||||
<li><a href="#masonryHorizontal" data-option-value="masonryHorizontal" class="horizontal">masonryHorizontal</a></li> |
||||
<li><a href="#fitColumns" data-option-value="fitColumns" class="horizontal">fitColumns</a></li> |
||||
<li><a href="#cellsByColumn" data-option-value="cellsByColumn" class="horizontal">cellsByColumn</a></li> |
||||
<li><a href="#straightAcross" data-option-value="straightAcross" class="horizontal">straightAcross</a></li> |
||||
</ul> |
||||
@ -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; |
||||
}); |
||||
@ -1 +0,0 @@
|
||||
<a href="https://www.simplegoods.co/i/NWONVKMO" class="simple-goods-btn">Buy Organization License - $90.00</a> |
||||
@ -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'); |
||||
} |
||||
}); |
||||
@ -1,19 +0,0 @@
|
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li> |
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li> |
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li> |
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li> |
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li> |
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li> |
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li> |
||||
</ul> |
||||
|
||||
<h3>Sort direction</h3> |
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending"> |
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li> |
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li> |
||||
</ul> |
||||
@ -1,81 +0,0 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
{% if page.category != 'homepage' %}{% assign root_path = '../' %}{% assign link_path = '..' %}{% else %}{% assign link_path = '.' %}{% endif %} |
||||
<meta charset="utf-8" /> |
||||
<title>{{ page.title }}{% if page.category != 'homepage' %} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}{% endif %}</title> |
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||
|
||||
<link rel="stylesheet" href="{{ root_path }}css/style.css" /> |
||||
|
||||
<!-- scripts at bottom of page --> |
||||
|
||||
</head> |
||||
<body class="{{ page.category }} {{ page.body_class }}"> |
||||
|
||||
<nav id="site-nav"> |
||||
<h1><a href="{{ root_path }}index.html">{{ site.name }}</a></h1> |
||||
|
||||
<h2>Docs</h2> |
||||
|
||||
<ul> |
||||
{% for doc in site.categories.docs reversed %} |
||||
{% if page.title == doc.title and page.category == 'docs' %} |
||||
<li class="current"><a href="#content">{{ doc.title }}</a> |
||||
<ul class="toc"> |
||||
{% for item in page.toc %} |
||||
<li><a href="#{{ item.anchor }}">{{ item.title }}</a></li> |
||||
{% endfor %} |
||||
</ul> |
||||
</li> |
||||
{% else %} |
||||
<li><a href="{{ link_path }}{{ doc.url }}">{{ doc.title }}</a> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
<h2>Demos</h2> |
||||
|
||||
<ul> |
||||
{% for demo in site.categories.demos reversed %} |
||||
{% if page.title == demo.title and page.category == 'demos' %} |
||||
<li class="current"><a href="#content">{{ demo.title }}</a></li> |
||||
{% else %} |
||||
<li><a href="{{ link_path }}{{ demo.url }}">{{ demo.title }}</a> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
<h2>Custom layout modes</h2> |
||||
|
||||
<ul> |
||||
{% for demo in site.categories['custom-layout-modes'] reversed %} |
||||
{% if page.title == demo.title and page.category == 'custom-layout-modes' %} |
||||
<li class="current"><a href="#content">{{ demo.title }}</a></li> |
||||
{% else %} |
||||
<li><a href="{{ link_path }}{{ demo.url }}">{{ demo.title }}</a> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
<h2><a href="{{ root_path }}tests/index.html">Tests</a></h2> |
||||
|
||||
</nav> <!-- #site-nav --> |
||||
|
||||
<section id="content"> |
||||
{% if page.category != 'homepage' %} |
||||
<h1>{{ page.title }}</h1> |
||||
{% endif %} |
||||
|
||||
{{ content }} |
||||
|
||||
<footer> |
||||
{{ site.name }} by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a> |
||||
</footer> |
||||
|
||||
</section> <!-- #content --> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,151 +0,0 @@
|
||||
--- |
||||
title: Centered Masonry |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<style> |
||||
#container { |
||||
margin: 0 auto 20px; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for centered container.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
$.Isotope.prototype._getCenteredMasonryColumns = function() { |
||||
this.width = this.element.width(); |
||||
|
||||
var parentWidth = this.element.parent().width(); |
||||
|
||||
// i.e. options.masonry && options.masonry.columnWidth |
||||
var colW = this.options.masonry && this.options.masonry.columnWidth || |
||||
// or use the size of the first item |
||||
this.$filteredAtoms.outerWidth(true) || |
||||
// if there's no items, use size of container |
||||
parentWidth; |
||||
|
||||
var cols = Math.floor( parentWidth / colW ); |
||||
cols = Math.max( cols, 1 ); |
||||
|
||||
// i.e. this.masonry.cols = .... |
||||
this.masonry.cols = cols; |
||||
// i.e. this.masonry.columnWidth = ... |
||||
this.masonry.columnWidth = colW; |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryReset = function() { |
||||
// layout-specific props |
||||
this.masonry = {}; |
||||
// FIXME shouldn't have to call this again |
||||
this._getCenteredMasonryColumns(); |
||||
var i = this.masonry.cols; |
||||
this.masonry.colYs = []; |
||||
while (i--) { |
||||
this.masonry.colYs.push( 0 ); |
||||
} |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() { |
||||
var prevColCount = this.masonry.cols; |
||||
// get updated colCount |
||||
this._getCenteredMasonryColumns(); |
||||
return ( this.masonry.cols !== prevColCount ); |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryGetContainerSize = function() { |
||||
var unusedCols = 0, |
||||
i = this.masonry.cols; |
||||
// count unused columns |
||||
while ( --i ) { |
||||
if ( this.masonry.colYs[i] !== 0 ) { |
||||
break; |
||||
} |
||||
unusedCols++; |
||||
} |
||||
|
||||
return { |
||||
height : Math.max.apply( Math, this.masonry.colYs ), |
||||
// fit container to columns that have been used; |
||||
width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth |
||||
}; |
||||
}; |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,126 +0,0 @@
|
||||
--- |
||||
title: Category rows |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>This demo uses a <a href="../docs/extending-isotope.html">custom layout mode</a>, <code>categoryRows</code> that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
</ul> |
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for elem_number in site.random_order | limit:60 %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
// categoryRows custom layout mode |
||||
$.extend( $.Isotope.prototype, { |
||||
|
||||
_categoryRowsReset : function() { |
||||
this.categoryRows = { |
||||
x : 0, |
||||
y : 0, |
||||
height : 0, |
||||
currentCategory : null |
||||
}; |
||||
}, |
||||
|
||||
_categoryRowsLayout : function( $elems ) { |
||||
var instance = this, |
||||
containerWidth = this.element.width(), |
||||
sortBy = this.options.sortBy, |
||||
props = this.categoryRows; |
||||
|
||||
$elems.each( function() { |
||||
var $this = $(this), |
||||
atomW = $this.outerWidth(true), |
||||
atomH = $this.outerHeight(true), |
||||
category = $.data( this, 'isotope-sort-data' )[ sortBy ], |
||||
x, y; |
||||
|
||||
if ( category !== props.currentCategory ) { |
||||
// new category, new row |
||||
props.x = 0; |
||||
props.height += props.currentCategory ? instance.options.categoryRows.gutter : 0; |
||||
props.y = props.height; |
||||
props.currentCategory = category; |
||||
} else 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; |
||||
|
||||
}); |
||||
}, |
||||
|
||||
_categoryRowsGetContainerSize : function () { |
||||
return { height : this.categoryRows.height }; |
||||
}, |
||||
|
||||
_categoryRowsResizeChanged : function() { |
||||
return true; |
||||
} |
||||
|
||||
}); |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
layoutMode : 'categoryRows', |
||||
categoryRows : { |
||||
gutter : 20 |
||||
}, |
||||
getSortData : { |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
} |
||||
}, |
||||
sortBy: 'category' |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
// toggle variable sizes of all elements |
||||
$('#toggle-sizes').find('a').click(function(){ |
||||
$container |
||||
.toggleClass('variable-sizes') |
||||
.isotope('reLayout'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
|
||||
@ -1,145 +0,0 @@
|
||||
--- |
||||
title: Masonry corner stamp |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<style> |
||||
.corner-stamp { |
||||
width: 280px; |
||||
height: 340px; |
||||
padding: 10px; |
||||
margin: 10px; |
||||
float: right; |
||||
background: red; |
||||
color: white; |
||||
-webkit-border-radius: 5px; |
||||
-moz-border-radius: 5px; |
||||
border-radius: 5px; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for corner stamp. An element can be "stamped" in the right top corner.</p> |
||||
<p>Set <code>cornerStampSelector</code> within <code>masonry</code> options. <code>itemSelector</code> needs to be set as well.</p> |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
itemSelector: '.item', |
||||
masonry: { |
||||
columnWidth: 120, |
||||
cornerStampSelector: '.corner-stamp' |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
|
||||
<div class="corner-stamp">corner stamp here.</div> |
||||
|
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() { |
||||
return true; |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryReset = function() { |
||||
// layout-specific props |
||||
this.masonry = {}; |
||||
this._getSegments(); |
||||
var i = this.masonry.cols; |
||||
this.masonry.colYs = []; |
||||
while (i--) { |
||||
this.masonry.colYs.push( 0 ); |
||||
} |
||||
|
||||
if ( this.options.masonry.cornerStampSelector ) { |
||||
var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ), |
||||
stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ), |
||||
cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ), |
||||
cornerStampHeight = $cornerStamp.outerHeight(true); |
||||
for ( i = Math.max( this.masonry.cols - cornerCols, cornerCols ); i < this.masonry.cols; i++ ) { |
||||
this.masonry.colYs[i] = cornerStampHeight; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120, |
||||
cornerStampSelector: '.corner-stamp' |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,148 +0,0 @@
|
||||
--- |
||||
title: Masonry gutters |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<style> |
||||
.element { |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
#container { |
||||
padding: 5px 0; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p> |
||||
<p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p> |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
masonry: { |
||||
columnWidth: 110, |
||||
gutterWidth: 10 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
// modified Isotope methods for gutters in masonry |
||||
$.Isotope.prototype._getMasonryGutterColumns = function() { |
||||
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0; |
||||
containerWidth = this.element.width(); |
||||
|
||||
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth || |
||||
// or use the size of the first item |
||||
this.$filteredAtoms.outerWidth(true) || |
||||
// if there's no items, use size of container |
||||
containerWidth; |
||||
|
||||
this.masonry.columnWidth += gutter; |
||||
|
||||
this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth ); |
||||
this.masonry.cols = Math.max( this.masonry.cols, 1 ); |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryReset = function() { |
||||
// layout-specific props |
||||
this.masonry = {}; |
||||
// FIXME shouldn't have to call this again |
||||
this._getMasonryGutterColumns(); |
||||
var i = this.masonry.cols; |
||||
this.masonry.colYs = []; |
||||
while (i--) { |
||||
this.masonry.colYs.push( 0 ); |
||||
} |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() { |
||||
var prevSegments = this.masonry.cols; |
||||
// update cols/rows |
||||
this._getMasonryGutterColumns(); |
||||
// return if updated cols/rows is not equal to previous |
||||
return ( this.masonry.cols !== prevSegments ); |
||||
}; |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 110, |
||||
gutterWidth : 10 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,139 +0,0 @@
|
||||
--- |
||||
title: Spine align |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/extending-isotope.html">Custom layout mode</a> that aligns items to the center, placing them either left or right of the spine. <code>gutterWidth</code> option available.</p> |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$container.isotope({ |
||||
layoutMode: 'spineAlign', |
||||
spineAlign: { |
||||
gutterWidth: 20 |
||||
}, |
||||
// options... |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
<p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p> |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
// custom layout mode spineAlign |
||||
$.Isotope.prototype._spineAlignReset = function() { |
||||
this.spineAlign = { |
||||
colA: 0, |
||||
colB: 0 |
||||
}; |
||||
}; |
||||
|
||||
$.Isotope.prototype._spineAlignLayout = function( $elems ) { |
||||
var instance = this, |
||||
props = this.spineAlign, |
||||
gutterWidth = Math.round( this.options.spineAlign && this.options.spineAlign.gutterWidth ) || 0, |
||||
centerX = Math.round(this.element.width() / 2); |
||||
|
||||
$elems.each(function(){ |
||||
var $this = $(this), |
||||
isColA = props.colA <= props.colB, |
||||
x = isColA ? |
||||
centerX - ( $this.outerWidth(true) + gutterWidth / 2 ) : // left side |
||||
centerX + gutterWidth / 2, // right side |
||||
y = isColA ? props.colA : props.colB; |
||||
instance._pushPosition( $this, x, y ); |
||||
props[( isColA ? 'colA' : 'colB' )] += $this.outerHeight(true); |
||||
}); |
||||
}; |
||||
|
||||
$.Isotope.prototype._spineAlignGetContainerSize = function() { |
||||
var size = {}; |
||||
size.height = this.spineAlign[( this.spineAlign.colB > this.spineAlign.colA ? 'colB' : 'colA' )]; |
||||
return size; |
||||
}; |
||||
|
||||
$.Isotope.prototype._spineAlignResizeChanged = function() { |
||||
return true; |
||||
}; |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
layoutMode: 'spineAlign', |
||||
spineAlign: { |
||||
gutterWidth: 20 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,196 +0,0 @@
|
||||
--- |
||||
title: BIG Graph |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/extending-isotope.html">Custom layout mode</a> to replicate the Flash interface of <a href="http://big.dk">big.dk</a>. Similiar to <a href="category-rows.html">Category rows</a>, item elements are grouped by their sorting data into columns.</p> |
||||
|
||||
{% 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 %} |
||||
|
||||
<p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p> |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#sortBy=year" data-option-value="year" class="selected" data>Chronological</a></li> |
||||
<li><a href="#sortBy=title" data-option-value="title">Alphabetical</a></li> |
||||
<li><a href="#sortBy=program" data-option-value="program">Programmatic</a></li> |
||||
<li><a href="#sortBy=scale" data-option-value="scale">Scale</a></li> |
||||
<li><a href="#sortBy=status" data-option-value="status">Status</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="big-graph clearfix"> |
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/make-big-graph-projects.js"></script> |
||||
<script> |
||||
|
||||
// categoryRows custom layout mode |
||||
$.extend( $.Isotope.prototype, { |
||||
|
||||
_bigGraphReset : function() { |
||||
this.bigGraph = { |
||||
x : 0, |
||||
y : 0, |
||||
height : 0, |
||||
column: 0, |
||||
row: 0, |
||||
gutter: 0, |
||||
currentCategory : null |
||||
}; |
||||
}, |
||||
|
||||
_bigGraphLayout : function( $elems ) { |
||||
var instance = this, |
||||
containerWidth = this.element.width(), |
||||
bigGraphOpts = this.options.bigGraph, |
||||
sortBy = this.options.sortBy, |
||||
elemsGroup = {}, |
||||
props = this.bigGraph; |
||||
|
||||
// group item elements into categories based on their sorting data |
||||
$elems.each( function() { |
||||
var category = $.data( this, 'isotope-sort-data' )[ sortBy ]; |
||||
elemsGroup[ category ] = elemsGroup[ category ] || []; |
||||
elemsGroup[ category ].push( this ); |
||||
}); |
||||
|
||||
var group, groupName, groupMaxRows, groupLen, |
||||
gutterWidth = bigGraphOpts.gutterWidth[ sortBy ], |
||||
x, y; |
||||
// for each group... |
||||
for ( groupName in elemsGroup ) { |
||||
group = elemsGroup[ groupName ]; |
||||
groupLen = group.length; |
||||
// make groups look nice, by limiting rows, makes for blockier blocks |
||||
groupMaxRows = groupLen / Math.ceil( groupLen / bigGraphOpts.maxRows ); |
||||
|
||||
$.each( group, function( i, elem ) { |
||||
x = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
||||
y = (bigGraphOpts.maxRows - props.row - 1) * bigGraphOpts.rowHeight; |
||||
instance._pushPosition( $(elem), x, y ); |
||||
|
||||
if ( props.row >= groupMaxRows - 1 ) { |
||||
// start a new column |
||||
props.row = 0; |
||||
props.column++; |
||||
} else { |
||||
props.row++; |
||||
} |
||||
}); |
||||
// start a new group |
||||
if ( props.row > 0 ) { |
||||
props.row = 0; |
||||
props.column++; |
||||
} |
||||
props.gutter++; |
||||
} |
||||
props.gutter--; |
||||
props.width = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
||||
}, |
||||
|
||||
_bigGraphGetContainerSize : function () { |
||||
bigGraphOpts = this.options.bigGraph; |
||||
this.bigGraph.column++; |
||||
return { |
||||
width: this.bigGraph.width, |
||||
height: bigGraphOpts.maxRows * bigGraphOpts.rowHeight |
||||
}; |
||||
}, |
||||
|
||||
_bigGraphResizeChanged : function() { |
||||
return false; |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
// -------- dynamically create items ---------------- // |
||||
|
||||
var i = 120, |
||||
projects = []; |
||||
|
||||
while (i--) { |
||||
projects.push( makeBigGraphProject() ); |
||||
} |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.append( $( projects.join('') ) ); |
||||
|
||||
// -------- isotope ---------------- // |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.project', |
||||
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: 0, |
||||
program: 35, |
||||
status: 80, |
||||
title: 0 |
||||
} |
||||
}, |
||||
sortBy: 'year', |
||||
getSortData: { |
||||
year: function( $elem ) { |
||||
return $elem.attr('data-year'); |
||||
}, |
||||
scale: function( $elem ) { |
||||
return $elem.attr('data-scale'); |
||||
}, |
||||
program: function( $elem ) { |
||||
return $elem.attr('data-program'); |
||||
}, |
||||
status: function( $elem ) { |
||||
return $elem.attr('data-status'); |
||||
}, |
||||
title: function( $elem ) { |
||||
var chara = $elem.find('p').text()[0]; |
||||
return isNaN( parseInt( chara ) ) ? chara : '0'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -1,220 +0,0 @@
|
||||
--- |
||||
title: Masonry Column Shift |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<style> |
||||
.shifty-item { |
||||
width: 210px; |
||||
margin: 10px; |
||||
float: left; |
||||
background: #AAA; |
||||
border: 5px solid white; |
||||
} |
||||
|
||||
.shifty-item:hover { z-index: 10; } |
||||
|
||||
.shifty-item.h1 { height: 140px; background: #66F; } |
||||
.shifty-item.h2 { height: 200px; background: #F66; } |
||||
.shifty-item.h3 { height: 240px; background: #6F6; } |
||||
.shifty-item.h4 { height: 280px; background: #FF6; } |
||||
|
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Custom layout mode <code>masonryColumnShift</code>. 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 <code>columnShiftOfItem</code> method that will push the column down. This layout only works with item elements that have the same width</p> |
||||
|
||||
{% 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 %} |
||||
|
||||
</section> |
||||
|
||||
|
||||
<div id="container"> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h3"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h3"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h3"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h4"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h1"></div> |
||||
<div class="shifty-item h2"></div> |
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
|
||||
|
||||
// -------------------------- Masonry Column Shift -------------------------- // |
||||
|
||||
// custom layout mode |
||||
$.Isotope.prototype._masonryColumnShiftReset = function() { |
||||
// layout-specific props |
||||
var props = this.masonryColumnShift = { |
||||
columnBricks: [] |
||||
}; |
||||
// FIXME shouldn't have to call this again |
||||
this._getSegments(); |
||||
var i = props.cols; |
||||
props.colYs = []; |
||||
while (i--) { |
||||
props.colYs.push( 0 ); |
||||
// push an array, for bricks in each column |
||||
props.columnBricks.push([]) |
||||
} |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryColumnShiftLayout = function( $elems ) { |
||||
var instance = this, |
||||
props = instance.masonryColumnShift; |
||||
$elems.each(function(){ |
||||
var $brick = $(this); |
||||
var setY = props.colYs; |
||||
|
||||
// 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 = props.columnWidth * shortCol, |
||||
y = minimumY; |
||||
instance._pushPosition( $brick, x, y ); |
||||
// keep track of columnIndex |
||||
$.data( this, 'masonryColumnIndex', i ); |
||||
props.columnBricks[i].push( this ); |
||||
|
||||
// apply setHeight to necessary columns |
||||
var setHeight = minimumY + $brick.outerHeight(true), |
||||
setSpan = props.cols + 1 - len; |
||||
for ( i=0; i < setSpan; i++ ) { |
||||
props.colYs[ shortCol + i ] = setHeight; |
||||
} |
||||
|
||||
}); |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryColumnShiftGetContainerSize = function() { |
||||
var containerHeight = Math.max.apply( Math, this.masonryColumnShift.colYs ); |
||||
return { height: containerHeight }; |
||||
}; |
||||
|
||||
$.Isotope.prototype._masonryColumnShiftResizeChanged = function() { |
||||
return this._checkIfSegmentsChanged(); |
||||
}; |
||||
|
||||
$.Isotope.prototype.shiftColumnOfItem = function( itemElem, callback ) { |
||||
|
||||
var columnIndex = $.data( itemElem, 'masonryColumnIndex' ); |
||||
|
||||
// don't proceed if no columnIndex |
||||
if ( !isFinite(columnIndex) ) { |
||||
return; |
||||
} |
||||
|
||||
var props = this.masonryColumnShift; |
||||
var columnBricks = props.columnBricks[ columnIndex ]; |
||||
var $brick; |
||||
var x = props.columnWidth * columnIndex; |
||||
var y = 0; |
||||
for (var i=0, len = columnBricks.length; i < len; i++) { |
||||
$brick = $( columnBricks[i] ); |
||||
this._pushPosition( $brick, x, y ); |
||||
y += $brick.outerHeight(true); |
||||
} |
||||
|
||||
// set the size of the container |
||||
if ( this.options.resizesContainer ) { |
||||
var containerStyle = this._masonryColumnShiftGetContainerSize(); |
||||
containerStyle.height = Math.max( y, containerStyle.height ); |
||||
this.styleQueue.push({ $el: this.element, style: containerStyle }); |
||||
} |
||||
|
||||
this._processStyleQueue( $(columnBricks), callback ) |
||||
|
||||
}; |
||||
|
||||
$(function(){ |
||||
|
||||
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 ); |
||||
} |
||||
); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,30 +0,0 @@
|
||||
--- |
||||
title: Basic |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>This is a basic demo of Isotope. Resize the browser window to see the layout animate.</p> |
||||
</section> |
||||
|
||||
<div id="container"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.element' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,16 +0,0 @@
|
||||
--- |
||||
title: Elements Complete |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
{% include elements-demo-head.html %} |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.random_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
{% include elements-demo-foot.html %} |
||||
@ -1,16 +0,0 @@
|
||||
--- |
||||
title: Elements Partial |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
{% include elements-demo-head.html %} |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
{% include elements-demo-foot.html %} |
||||
@ -1,59 +0,0 @@
|
||||
--- |
||||
title: Layout modes |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>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.</p> |
||||
<p>See <a href="../docs/layout-modes.html">docs on layout modes</a>.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="variable-sizes clearfix"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
} |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,41 +0,0 @@
|
||||
--- |
||||
title: Filtering |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Filtering hides and reveals item elements.</p> |
||||
<p>See <a href="../docs/filtering.html">docs on filtering</a>.</p> |
||||
</section> |
||||
|
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element' |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,56 +0,0 @@
|
||||
--- |
||||
title: Sorting |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Sort item elements based on any data you can extract from them.</p> |
||||
<p>See <a href="../docs/sorting.html">docs on sorting</a>.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,44 +0,0 @@
|
||||
--- |
||||
title: reLayout |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Use the <a href="../docs/methods.html#relayout"><code>reLayout</code> method</a> to easily arrange item elements after a change.</p> |
||||
<p>Click on any item element to change its size.</p> |
||||
</section> |
||||
|
||||
<section id="options"> |
||||
<ul class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
</ul> |
||||
</section> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
} |
||||
}); |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,61 +0,0 @@
|
||||
--- |
||||
title: Adding items |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p> |
||||
<p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p> |
||||
<p>The <code>reloadItems</code> method re-collects all items in their current order in the DOM, which can be useful for prepending items.</p> |
||||
<p>See docs on <a href="../docs/adding-items.html">adding items</a>.</p> |
||||
</section> |
||||
|
||||
<section id="options"> |
||||
<ul class="clearfix"> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="prepend"><a href='#prepend'>Prepend</a></li> |
||||
</ul> |
||||
</section> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for elem_number in site.best_of_order :limit 10 %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
$('#prepend a').click(function(){ |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
$container |
||||
.prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' }) |
||||
// set sort back to symbol for inserting |
||||
.isotope('option', { sortBy: 'symbol' }); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
filter: '*', |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
} |
||||
}, |
||||
sortBy : 'symbol' |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,51 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll |
||||
layout: default |
||||
category: demos |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout. CSS transitions have been disabled on the container element to avoid triggering AJAX call prematurely.</p> |
||||
</section> |
||||
|
||||
<div id="container" class="variable-sizes clearfix infinite-scrolling"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<nav id="page_nav"> |
||||
<a href="../pages/2.html"></a> |
||||
</nav> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/jquery.infinitescroll.min.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element' |
||||
}); |
||||
|
||||
$container.infinitescroll({ |
||||
navSelector : '#page_nav', // selector for the paged navigation |
||||
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) |
||||
itemSelector : '.element', // selector for all items you'll retrieve |
||||
loading: { |
||||
finishedMsg: 'No more pages to load.', |
||||
img: 'http://i.imgur.com/qkKy8.gif' |
||||
} |
||||
}, |
||||
// call Isotope as a callback |
||||
function( newElements ) { |
||||
$container.isotope( 'appended', $( newElements ) ); |
||||
} |
||||
); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -1,44 +0,0 @@
|
||||
--- |
||||
title: Images |
||||
layout: default |
||||
category: demos |
||||
photos: |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039885/" title="Officer by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039583/" title="Tony by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013646070/" title="Kendra by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039541/" title="Giraffe by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039741/" title="Gavin by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" alt="Gavin" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013039697/" title="Anita by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg" alt="Anita" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013646314/" title="Take My Portrait by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" alt="Take My Portrait" /></a> |
||||
- <a href="http://www.flickr.com/photos/nemoorange/5013040075/" title="Wonder by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg" alt="Wonder" /></a> |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Isotope is triggered after all images are loaded with the <a href="../docs/help.html#imagesloaded_plugin"><code>imagesLoaded</code> plugin</a>. </p> |
||||
</section> |
||||
|
||||
<div id="container" class="photos clearfix"> |
||||
{% for photo in page.photos %} |
||||
<div class="photo"> |
||||
{{ photo }} |
||||
</div> |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.imagesLoaded( function(){ |
||||
$container.isotope({ |
||||
itemSelector : '.photo' |
||||
}); |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -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 ] |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Filters can be combined. In addition to filtering for just <code>.red</code> or <code>.tall</code>, you can pass in a filter selector of both: <code>.red.tall</code>.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix combo-filters"> |
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
{% for group in page.schema %} |
||||
<div class="option-combo {{ group.name }}"> |
||||
<h4>{{ group.name }}</h4> |
||||
<ul class="filter option-set clearfix " data-filter-group="{{ group.name }}"> |
||||
<li><a href="#filter-{{ group.name }}-any" data-filter-value="" class="selected">any</a> |
||||
{% for filter in group.filters %} |
||||
<li><a href="#filter-{{ group.name }}-{{ filter }}" data-filter-value=".{{ filter }}">{{ filter }}</a> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
{% endfor %} |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for size in page.schema[1].filters %} |
||||
{% for shape in page.schema[2].filters %} |
||||
{% for color in page.schema[0].filters %} |
||||
<div class="color-shape {{ size }} {{ shape }} {{ color }}"></div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
|
||||
|
||||
{% for color in page.schema[0].filters %} |
||||
{% for shape in page.schema[2].filters %} |
||||
{% for size in page.schema[1].filters %} |
||||
<div class="color-shape {{ size }} {{ shape }} {{ color }}"></div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'), |
||||
filters = {}; |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.color-shape', |
||||
masonry: { |
||||
columnWidth: 80 |
||||
} |
||||
}); |
||||
|
||||
// filter buttons |
||||
$('.filter a').click(function(){ |
||||
var $this = $(this); |
||||
// don't proceed if already selected |
||||
if ( $this.hasClass('selected') ) { |
||||
return; |
||||
} |
||||
|
||||
var $optionSet = $this.parents('.option-set'); |
||||
// change selected class |
||||
$optionSet.find('.selected').removeClass('selected'); |
||||
$this.addClass('selected'); |
||||
|
||||
// store filter value in object |
||||
// i.e. filters.color = 'red' |
||||
var group = $optionSet.attr('data-filter-group'); |
||||
filters[ group ] = $this.attr('data-filter-value'); |
||||
// convert object into array |
||||
var isoFilters = []; |
||||
for ( var prop in filters ) { |
||||
isoFilters.push( filters[ prop ] ) |
||||
} |
||||
var selector = isoFilters.join(''); |
||||
$container.isotope({ filter: selector }); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,185 +0,0 @@
|
||||
--- |
||||
title: Hash history |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p><a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> 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.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
<ul class="option-set clearfix"> |
||||
<li><a href="#filter=*" class="selected">show all</a></li> |
||||
<li><a href="#filter=.metal">metal</a></li> |
||||
<li><a href="#filter=.transition">transition</a></li> |
||||
<li><a href="#filter=.post-transition">post-transition</a></li> |
||||
<li><a href="#filter=.nonmetal">nonmetal</a></li> |
||||
<li><a href="#filter=.inner-transition">inner-transition</a></li> |
||||
<li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li> |
||||
<li><a href="#filter=%3Anot(.transition)">not transition</a></li> |
||||
<li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li> |
||||
</ul> |
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul class="option-set clearfix"> |
||||
<li><a href="#sortBy=original-order" class="selected">original-order</a></li> |
||||
<li><a href="#sortBy=name">name</a></li> |
||||
<li><a href="#sortBy=symbol">symbol</a></li> |
||||
<li><a href="#sortBy=number">number</a></li> |
||||
<li><a href="#sortBy=weight">weight</a></li> |
||||
<li><a href="#sortBy=category">category</a></li> |
||||
<li><a href="#sortBy=random">random</a></li> |
||||
</ul> |
||||
|
||||
<h3>Sort direction</h3> |
||||
|
||||
<ul class="option-set clearfix"> |
||||
<li><a href="#sortAscending=true" class="selected">sort ascending</a></li> |
||||
<li><a href="#sortAscending=false">sort descending</a></li> |
||||
</ul> |
||||
|
||||
<h3>Layout modes</h3> |
||||
|
||||
<ul class="option-set clearfix"> |
||||
<li><a href="#layoutMode=masonry" class="selected">masonry</a></li> |
||||
<li><a href="#layoutMode=fitRows">fitRows</a></li> |
||||
<li><a href="#layoutMode=cellsByRow">cellsByRow</a></li> |
||||
<li><a href="#layoutMode=straightDown">straightDown</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="variable-sizes clearfix"> |
||||
{% for elem_number in site.random_order | limit:60 %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/jquery.ba-bbq.min.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'), |
||||
// object that will keep track of options |
||||
isotopeOptions = {}, |
||||
// defaults, used if not explicitly set in hash |
||||
defaultOptions = { |
||||
filter: '*', |
||||
sortBy: 'original-order', |
||||
sortAscending: true, |
||||
layoutMode: 'masonry' |
||||
}; |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
var setupOptions = $.extend( {}, defaultOptions, { |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// set up Isotope |
||||
$container.isotope( setupOptions ); |
||||
|
||||
var $optionSets = $('#options').find('.option-set'), |
||||
isOptionLinkClicked = false; |
||||
|
||||
// switches selected class on buttons |
||||
function changeSelectedLink( $elem ) { |
||||
// remove selected class on previous item |
||||
$elem.parents('.option-set').find('.selected').removeClass('selected'); |
||||
// set selected class on new item |
||||
$elem.addClass('selected'); |
||||
} |
||||
|
||||
|
||||
$optionSets.find('a').click(function(){ |
||||
var $this = $(this); |
||||
// don't proceed if already selected |
||||
if ( $this.hasClass('selected') ) { |
||||
return; |
||||
} |
||||
changeSelectedLink( $this ); |
||||
// 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 ); |
||||
// apply new option to previous |
||||
$.extend( isotopeOptions, option ); |
||||
// set hash, triggers hashchange on window |
||||
$.bbq.pushState( isotopeOptions ); |
||||
isOptionLinkClicked = true; |
||||
return false; |
||||
}); |
||||
|
||||
var hashChanged = false; |
||||
|
||||
$(window).bind( 'hashchange', function( event ){ |
||||
// get options object from hash |
||||
var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {}, |
||||
// do not animate first call |
||||
aniEngine = hashChanged ? 'best-available' : 'none', |
||||
// apply defaults where no option was specified |
||||
options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } ); |
||||
// apply options from hash |
||||
$container.isotope( options ); |
||||
// save options |
||||
isotopeOptions = hashOptions; |
||||
|
||||
// if option link was not clicked |
||||
// then we'll need to update selected links |
||||
if ( !isOptionLinkClicked ) { |
||||
// iterate over options |
||||
var hrefObj, hrefValue, $selectedLink; |
||||
for ( var key in options ) { |
||||
hrefObj = {}; |
||||
hrefObj[ key ] = options[ key ]; |
||||
// convert object into parameter string |
||||
// i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition' |
||||
hrefValue = $.param( hrefObj ); |
||||
// get matching link |
||||
$selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); |
||||
changeSelectedLink( $selectedLink ); |
||||
} |
||||
} |
||||
|
||||
isOptionLinkClicked = false; |
||||
hashChanged = true; |
||||
}) |
||||
// trigger hashchange to capture any hash data on init |
||||
.trigger('hashchange'); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,141 +0,0 @@
|
||||
--- |
||||
title: Fluid / responsive |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<style> |
||||
/* percentage-based widths for fluid/responsive layout */ |
||||
.element { |
||||
margin: 5px 1%; |
||||
width: 18%; |
||||
} |
||||
|
||||
.variable-sizes .element.width2 { width: 38%; } |
||||
|
||||
.element.large, |
||||
.variable-sizes .element.large, |
||||
.variable-sizes .element.large.width2.height2 { |
||||
width: 58%; |
||||
} |
||||
|
||||
#container { |
||||
padding: 5px 0; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.</p> |
||||
|
||||
{% 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 %} |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
// disable resizing |
||||
resizable: false, |
||||
// set columnWidth to a percentage of container width |
||||
masonry: { |
||||
columnWidth: $container.width() / 5 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// update columnWidth on window resize |
||||
$(window).smartresize(function(){ |
||||
$container.isotope({ |
||||
// set columnWidth to a percentage of container width |
||||
masonry: { |
||||
columnWidth: $container.width() / 5 |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,79 +0,0 @@
|
||||
--- |
||||
title: Removing |
||||
layout: default |
||||
category: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.</p> |
||||
</section> |
||||
|
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
|
||||
<h3>Remove</h3> |
||||
|
||||
<ul id="removable" class="option-set clearfix"> |
||||
<li><a href="#remove" data-option-value=".metal">metal</a></li> |
||||
<li><a href="#remove" data-option-value=".transition">transition</a></li> |
||||
<li><a href="#remove" data-option-value=".post-transition">post-transition</a></li> |
||||
<li><a href="#remove" data-option-value=".nonmetal">nonmetal</a></li> |
||||
<li><a href="#remove" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li> |
||||
<li><a href="#remove" data-option-value=".metalloid">metalloid</a></li> |
||||
</ul> |
||||
|
||||
<ul id="add-remove"> |
||||
<li><a href="#add-remove">Add / remove</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="variable-sizes clickable clearfix"> |
||||
{% for element in site.elements limit:40 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element' |
||||
}); |
||||
|
||||
$('#removable a').click( function( jQEvent ) { |
||||
var selector = $(this).attr('data-option-value'); |
||||
var $removable = $container.find( selector ); |
||||
$container.isotope( 'remove', $removable ); |
||||
jQEvent.preventDefault(); |
||||
}); |
||||
|
||||
$('#add-remove a').click( function( jQEvent ) { |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
var $firstTwoElems = $container.data('isotope') |
||||
.$filteredAtoms.filter( function( i ) { |
||||
return i < 2; |
||||
}); |
||||
|
||||
$container |
||||
.isotope( 'insert', $newEls ) |
||||
.isotope( 'remove', $firstTwoElems, function() { |
||||
// console.log('items removed') |
||||
}); |
||||
jQEvent.preventDefault(); |
||||
}); |
||||
|
||||
// remove item if clicked |
||||
$container.delegate( '.element', 'click', function(){ |
||||
$container.isotope( 'remove', $(this) ); |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
@ -1,9 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll Page 2 |
||||
category: pages |
||||
layout: default |
||||
page_position: 20 |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,9 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll Page 3 |
||||
category: pages |
||||
layout: default |
||||
page_position: 40 |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,9 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll Page 4 |
||||
category: pages |
||||
layout: default |
||||
page_position: 60 |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,9 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll Page 5 |
||||
category: pages |
||||
layout: default |
||||
page_position: 80 |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,9 +0,0 @@
|
||||
--- |
||||
title: Infinite Scroll Page 6 |
||||
category: pages |
||||
layout: default |
||||
page_position: 100 |
||||
infinite_scroll: true |
||||
--- |
||||
|
||||
{% include inf-scroll-page.html %} |
||||
@ -1,14 +0,0 @@
|
||||
--- |
||||
title: Tests Index |
||||
layout: default |
||||
category: tests |
||||
is_index_page: true |
||||
--- |
||||
|
||||
<ul> |
||||
{% for post in site.categories.tests reversed %} |
||||
{% if post.is_index_page != true %} |
||||
<li><a href="..{{ post.url }}">{{ post.title }}</a></li> |
||||
{% endif %} |
||||
{% endfor %} |
||||
</ul> |
||||
@ -1,48 +0,0 @@
|
||||
--- |
||||
title: destroy |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<style> |
||||
#container { |
||||
width: 80%; |
||||
height: 80%; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p> |
||||
</section> |
||||
|
||||
<section id="options"> |
||||
<button id="init">Init Isotope instance</button> |
||||
<button id="destroy">Destroy Isotope instance</button> |
||||
</section> |
||||
|
||||
<div id="container" style="height: 600px"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$('#init').click(function(){ |
||||
$container.isotope({ |
||||
itemSelector: '.element', |
||||
filter: '.metal' |
||||
}); |
||||
}); |
||||
|
||||
$('#destroy').click(function(){ |
||||
$container.isotope('destroy'); |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,118 +0,0 @@
|
||||
--- |
||||
title: flash |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<style> |
||||
.item { |
||||
width: 500px; |
||||
margin: 5px; |
||||
float: left; |
||||
background: #333; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Flash content like YouTube or Vimeo videos</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter"> |
||||
<li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li> |
||||
<li><a href="#filter-link" data-option-value=".link">link</a></li> |
||||
<li><a href="#filter-audio" data-option-value=".audio">audio</a></li> |
||||
<li><a href="#filter-video" data-option-value=".video">video</a></li> |
||||
<li><a href="#filter-photo" data-option-value=".photo">photo</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
|
||||
<div class="item video"> |
||||
|
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowfullscreen="true" wmode="transparent"></object> |
||||
|
||||
<p>Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by <a href="http://www.youtube.com/watch?v=GaoLU6zKaws&feature=youtu.be">mikedahlquist</a>)</p> |
||||
|
||||
</div> |
||||
|
||||
<div class="item photo"> |
||||
<figure class="content"> |
||||
<a href="http://danimaree.tumblr.com"><img src="http://29.media.tumblr.com/tumblr_lhbbz91Wg51qa5ylbo1_500.gif" alt="WIN"></a> |
||||
<figcaption><p>WIN</p></figcaption> |
||||
</figure> |
||||
|
||||
</div> |
||||
|
||||
<div class="item audio"> |
||||
<figure class="content audio"> |
||||
|
||||
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?505"></script><span id="audio_player_3674118149">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span><script type="text/javascript">replaceIfFlash(9,"audio_player_3674118149",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/3674118149/tumblr_lhmdlpR0Kl1qashpb&color=FFFFFF" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script> |
||||
Smashing Pumpkins |
||||
<em>Set The Ray To Jerry</em> |
||||
Judas 0: B-Sides and Rarities |
||||
<figcaption><blockquote> |
||||
<p>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.”</p> |
||||
</blockquote> |
||||
|
||||
<p>— Ross McGowan <a href="http://www.stylusmagazine.com/articles/seconds/the-smashing-pumpkins-set-the-ray-to-jerry.htm">The Smashing Pumpkins: Set the Ray to Jerry</a></p></figcaption> |
||||
</figure> |
||||
|
||||
|
||||
</div> |
||||
|
||||
<div class="item photo"> |
||||
<figure class="content photo"> |
||||
<a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460"><img src="http://27.media.tumblr.com/tumblr_lh8j1hUuvO1qashpbo1_500.jpg" alt="and there&#8217;s a light on by *zenibyfajnie on deviantART"></a> |
||||
<figcaption><p><a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460">and there’s a light on by *zenibyfajnie on deviantART</a></p></figcaption> |
||||
</figure> |
||||
|
||||
</div> |
||||
|
||||
<div class="item link"> |
||||
<h2><a href="http://www.kaplusa.com/blog/2011/01/twitter-icon-evolution/" >KA+A : Blog : Iconoclast – A Twitter Icon’s Journey From Discreet to Disaster</a></h2> |
||||
<p>Via <a href="https://twitter.com/kristianindy/status/31100858091442178">kristianindy</a></p> |
||||
</div> |
||||
|
||||
<div class="item video"> |
||||
<figure class="content video"> |
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowFullScreen="true" wmode="transparent"></embed></object> |
||||
<figcaption><p><a href="http://www.youtube.com/watch?v=7g0We1DY7WI">Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10]</a> (via <a href="http://youtube.com/user/alohaband1">alohaband1</a>)</p> |
||||
|
||||
<p>I was at this show. This is my favorite song from 2010. I love Aloha so much.</p></figcaption> |
||||
</figure> |
||||
|
||||
</div> |
||||
|
||||
<div class="item video"> |
||||
<iframe title="YouTube video player" width="500" height="311" src="http://www.youtube.com/embed/7g0We1DY7WI" frameborder="0" allowfullscreen></iframe> |
||||
</div> |
||||
|
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.imagesLoaded(function(){ |
||||
$container.isotope({ |
||||
transformsEnabled: false, |
||||
visibleStyle: { opacity: 1 }, |
||||
hiddenStyle: { opacity: 0 } |
||||
}); |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,29 +0,0 @@
|
||||
--- |
||||
title: no items |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still <code>return this</code>.</p> |
||||
</section> |
||||
|
||||
<div id="container"> |
||||
{% for element in site.elements limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.foo' |
||||
}).css('border', '10px solid'); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,69 +0,0 @@
|
||||
--- |
||||
title: item position data |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p><code>itemPositionDataEnabled</code> option is enabled. </p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
</ul> |
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for element in site.elements limit:40 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.element', |
||||
itemPositionDataEnabled: true, |
||||
masonry: { |
||||
columnWidth : 120 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,92 +0,0 @@
|
||||
--- |
||||
title: jquery animation |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<style> |
||||
.isotope, |
||||
.isotope .isotope-item { |
||||
-webkit-transition: none; |
||||
-moz-transition: none; |
||||
-ms-transition: none; |
||||
-o-transition: none; |
||||
transition: none; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Check that the option setter for animationEngine is properly triggered.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
|
||||
<li id="toggle-animation"><a href="#toggle-animation">Toggle jQuery animation</a></li> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
</ul> |
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for element in site.elements limit:40 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.element', |
||||
transformsEnabled: false, |
||||
animationEngine: 'jquery', |
||||
masonry: { |
||||
columnWidth : 120 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
var isAnimated = true; |
||||
$('#toggle-animation').click(function(){ |
||||
isAnimated = !isAnimated; |
||||
var aniEngine = isAnimated ? 'jquery' : 'css'; |
||||
$container.isotope( 'option', { animationEngine: aniEngine } ); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,140 +0,0 @@
|
||||
--- |
||||
title: elements complete test |
||||
layout: default |
||||
category: tests |
||||
body_class: demos |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>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.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.random_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
console.time('init'); |
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
// layoutMode : 'fitRows', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
console.timeEnd('init'); |
||||
|
||||
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; |
||||
|
||||
console.time( key ); |
||||
if ( key === 'layoutMode' && changeLayoutMode ) { |
||||
// changes in layout modes need extra logic |
||||
changeLayoutMode( $this, options ) |
||||
} else { |
||||
// otherwise, apply new options |
||||
$container.isotope( options ); |
||||
} |
||||
console.timeEnd( key ); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
console.time('shuffle'); |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
console.timeEnd('shuffle'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -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. |
||||
--- |
||||
|
||||
<style> |
||||
.text-box { |
||||
width: 200px; |
||||
margin: 10px; |
||||
color: #000; |
||||
float: left; |
||||
font-size: 11px; |
||||
line-height: 1.3em; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.blue { background: #88F; } |
||||
.red { background: #F88; } |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Test to see how IE7 deals with type rendering</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<h3>Filters</h3> |
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter"> |
||||
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li> |
||||
<li><a href="#red" data-option-value=".red">red</a></li> |
||||
<li><a href="#blue" data-option-value=".blue">blue</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
<div class="red text-box">{{ page.lorem }}</div> |
||||
<div class="blue text-box">{{ page.lorem }}</div> |
||||
</div> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,151 +0,0 @@
|
||||
--- |
||||
title: Right to left |
||||
layout: default |
||||
category: tests |
||||
body_class: demos |
||||
--- |
||||
|
||||
<style> |
||||
#content { direction: rtl; } |
||||
|
||||
#options li { float: right; } |
||||
|
||||
.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; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: <a href="../docs/help.html#righttoleft_layouts">Help - Right to left layouts</a>.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
|
||||
<div id="container" class="clickable clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$.Isotope.prototype._positionAbs = function( x, y ) { |
||||
return { right: x, top: y }; |
||||
}; |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
transformsEnabled: false, |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
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' && changeLayoutMode ) { |
||||
// changes in layout modes need extra logic |
||||
changeLayoutMode( $this, options ) |
||||
} else { |
||||
// otherwise, apply new options |
||||
$container.isotope( options ); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include change-sizes.js %} |
||||
|
||||
{% include add-buttons.js %} |
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,118 +0,0 @@
|
||||
--- |
||||
title: Unclickable filtered |
||||
layout: default |
||||
category: tests |
||||
body_class: demos |
||||
--- |
||||
|
||||
<style> |
||||
#container { |
||||
width: 50%; |
||||
} |
||||
|
||||
#clicked-display { |
||||
display: inline-block; |
||||
border: 1px dotted white; |
||||
font-size: 1.1em; |
||||
padding: 0 0.5em; |
||||
} |
||||
</style> |
||||
|
||||
<section id="copy"> |
||||
<p>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</p> |
||||
<p id="clicked-display">(Last item clicked)</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-red"><a href="#toggle-red">Toggle big red blocks</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div> |
||||
</div> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'), |
||||
isRedFiltered = true; |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.color-shape', |
||||
masonry: { |
||||
columnWidth: 80 |
||||
}, |
||||
hiddenStyle: { |
||||
opacity: 0.25 |
||||
} |
||||
}).isotope({ |
||||
filter: '.blue' |
||||
}).isotope('shuffle'); |
||||
|
||||
$('#toggle-red a').click(function(){ |
||||
isRedFiltered = !isRedFiltered; |
||||
var selector = isRedFiltered ? '.blue' : '*'; |
||||
$container.isotope({ filter: selector }); |
||||
return false; |
||||
}); |
||||
|
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope('shuffle'); |
||||
return false; |
||||
}); |
||||
|
||||
var $clickedDisplay = $('#clicked-display'); |
||||
|
||||
$('.color-shape a').click(function(){ |
||||
var $this = $(this); |
||||
// back out if hidden item |
||||
if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) { |
||||
return; |
||||
} |
||||
$clickedDisplay.text( $(this).attr('href') ); |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,165 +0,0 @@
|
||||
--- |
||||
title: Callbacks |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Tests that callbacks are triggering properly, after animation/transition has completed.</p> |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'], |
||||
colorI = 0; |
||||
|
||||
function changeBGColor() { |
||||
var color = colors[ colorI % colors.length ]; |
||||
$container.css({ background: color }) |
||||
colorI++; |
||||
} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}, changeBGColor ); |
||||
|
||||
|
||||
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, changeBGColor ); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){ |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
$container.isotope( 'insert', $newEls, changeBGColor ); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
$('#append a').click(function(){ |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
$container.append( $newEls ).isotope( 'appended', $newEls, changeBGColor ); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
|
||||
// change size of clicked element |
||||
$container.delegate( '.element', 'click', function(){ |
||||
$(this).toggleClass('large'); |
||||
$container.isotope( 'reLayout', changeBGColor ); |
||||
}); |
||||
|
||||
// toggle variable sizes of all elements |
||||
$('#toggle-sizes').find('a').click(function(){ |
||||
$container |
||||
.toggleClass('variable-sizes') |
||||
.isotope( 'reLayout', changeBGColor ); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope( 'shuffle', changeBGColor ); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -1,171 +0,0 @@
|
||||
--- |
||||
title: onLayout |
||||
layout: default |
||||
category: tests |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Tests that <a href="../docs/options.html#onlayout">onLayout callback</a> is triggering properly, after animation/transition has completed.</p> |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include filter-buttons.html %} |
||||
|
||||
{% include sort-buttons.html %} |
||||
|
||||
<h3>Etc</h3> |
||||
|
||||
<ul id="etc" class="clearfix"> |
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> |
||||
<li id="insert"><a href="#insert">Insert new elements</a></li> |
||||
<li id="append"><a href='#append'>Append new elements</a></li> |
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix"> |
||||
{% for elem_number in site.best_of_order %} |
||||
{% assign element = site.elements[elem_number] %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
|
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
{% include random-sizes.js %} |
||||
|
||||
var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'], |
||||
colorI = 0; |
||||
|
||||
function changeBGColor( $elems, instance ) { |
||||
var color = colors[ colorI % colors.length ]; |
||||
$container.css({ background: color }) |
||||
colorI++; |
||||
// console.log( $elems.length, instance.$filteredAtoms.length ); |
||||
} |
||||
|
||||
function lmk() { |
||||
// console.log('callback still works'); |
||||
} |
||||
|
||||
$container.isotope({ |
||||
itemSelector : '.element', |
||||
onLayout: changeBGColor, |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
getSortData : { |
||||
symbol : function( $elem ) { |
||||
return $elem.attr('data-symbol'); |
||||
}, |
||||
category : function( $elem ) { |
||||
return $elem.attr('data-category'); |
||||
}, |
||||
number : function( $elem ) { |
||||
return parseInt( $elem.find('.number').text(), 10 ); |
||||
}, |
||||
weight : function( $elem ) { |
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); |
||||
}, |
||||
name : function ( $elem ) { |
||||
return $elem.find('.name').text(); |
||||
} |
||||
} |
||||
}, lmk ); |
||||
|
||||
|
||||
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, lmk ); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){ |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
$container.isotope( 'insert', $newEls, lmk ); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
$('#append a').click(function(){ |
||||
var $newEls = $( fakeElement.getGroup() ); |
||||
$container.append( $newEls ).isotope( 'appended', $newEls, lmk ); |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
|
||||
// change size of clicked element |
||||
$container.delegate( '.element', 'click', function(){ |
||||
$(this).toggleClass('large'); |
||||
$container.isotope( 'reLayout', lmk ); |
||||
}); |
||||
|
||||
// toggle variable sizes of all elements |
||||
$('#toggle-sizes').find('a').click(function(){ |
||||
$container |
||||
.toggleClass('variable-sizes') |
||||
.isotope( 'reLayout', lmk ); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
var $sortBy = $('#sort-by'); |
||||
$('#shuffle a').click(function(){ |
||||
$container.isotope( 'shuffle', lmk ); |
||||
$sortBy.find('.selected').removeClass('selected'); |
||||
$sortBy.find('[data-option-value="random"]').addClass('selected'); |
||||
return false; |
||||
}); |
||||
|
||||
}); |
||||
</script> |
||||
@ -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 ] |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p>Filters can be combined. In addition to filtering for just <code>.red</code> or <code>.tall</code>, you can pass in a filter selector of both: <code>.red.tall</code>.</p> |
||||
</section> |
||||
|
||||
<section id="options" class="clearfix combo-filters"> |
||||
<div class="clearfix"> |
||||
<h3>Filters</h3> |
||||
|
||||
{% for group in page.schema %} |
||||
<div class="option-combo {{ group.name }}"> |
||||
<h4>{{ group.name }}</h4> |
||||
<ul class="filter option-set clearfix " data-filter-group="{{ group.name }}"> |
||||
<li><a href="#filter-{{ group.name }}-any" data-filter-value="" class="selected">any</a> |
||||
{% for filter in group.filters %} |
||||
<li><a href="#filter-{{ group.name }}-{{ filter }}" data-filter-value=".{{ filter }}">{{ filter }}</a> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li> |
||||
<li><a href="#sortBy=color" data-option-value="color">color</a></li> |
||||
<li><a href="#sortBy=size" data-option-value="size">size</a></li> |
||||
<li><a href="#sortBy=shape" data-option-value="shape">shape</a></li> |
||||
</ul> |
||||
|
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="clearfix"> |
||||
{% for size in page.schema[1].filters %} |
||||
{% for shape in page.schema[2].filters %} |
||||
{% for color in page.schema[0].filters %} |
||||
<div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
|
||||
|
||||
{% for color in page.schema[0].filters %} |
||||
{% for shape in page.schema[2].filters %} |
||||
{% for size in page.schema[1].filters %} |
||||
<div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
<script src="../js/jquery-1.7.1.min.js"></script> |
||||
<script src="../js/jquery.ba-bbq.min.js"></script> |
||||
<script src="../jquery.isotope.min.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
var initialOptions = { |
||||
itemSelector : '.color-shape', |
||||
masonry: { |
||||
columnWidth: 80 |
||||
}, |
||||
getSortData: { |
||||
color: function( $elem ) { |
||||
return $elem.attr('data-color'); |
||||
}, |
||||
shape: function( $elem ) { |
||||
return $elem.attr('data-shape'); |
||||
}, |
||||
size: function( $elem ) { |
||||
return $elem.attr('data-size'); |
||||
} |
||||
} |
||||
}; |
||||
// build a hash for all our options |
||||
var options = { |
||||
// special hash for combination filters |
||||
comboFilters: {} |
||||
}; |
||||
|
||||
|
||||
// filter buttons |
||||
$('.filter').on( 'click', 'a', function( event ) { |
||||
event.preventDefault(); |
||||
var $this = $(this); |
||||
// don't proceed if already selected |
||||
if ( $this.hasClass('selected') ) { |
||||
return false; |
||||
} |
||||
|
||||
// console.log('hello world'); |
||||
var $optionSet = $this.parents('.option-set'); |
||||
var group = $optionSet.attr('data-filter-group'); |
||||
options.comboFilters[ group ] = $this.attr('data-filter-value'); |
||||
$.bbq.pushState( options ); |
||||
}); |
||||
|
||||
var $sortBy = $('#sort-by').on( 'click', 'a', function( event ) { |
||||
event.preventDefault(); |
||||
var $this = $(this); |
||||
// don't proceed if already selected |
||||
if ( $this.hasClass('selected') ) { |
||||
return false; |
||||
} |
||||
options.sortBy = $this.attr('data-option-value'); |
||||
// console.log( options ); |
||||
$.bbq.pushState( options ); |
||||
}); |
||||
|
||||
function selectLink( $link ) { |
||||
$link.parents('.option-set').find('.selected').removeClass('selected'); |
||||
$link.addClass('selected') |
||||
} |
||||
|
||||
var location = window.location; |
||||
var $comboFilterOptionSets = $('.combo-filters .option-set'); |
||||
|
||||
|
||||
function getComboFilterSelector( comboFilters ) { |
||||
// build filter |
||||
var isoFilters = []; |
||||
var filterValue, $link, $optionSet; |
||||
for ( var prop in comboFilters ) { |
||||
filterValue = comboFilters[ prop ]; |
||||
isoFilters.push( filterValue ); |
||||
// change selected combo filter link |
||||
$optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]'); |
||||
$link = $optionSet.find('a[data-filter-value="' + filterValue + '"]'); |
||||
selectLink( $link ); |
||||
} |
||||
var selector = isoFilters.join(''); |
||||
return selector; |
||||
} |
||||
|
||||
$( window ).on( 'hashchange', function() { |
||||
// get options from hash |
||||
if ( location.hash ) { |
||||
$.extend( options, $.deparam.fragment( location.hash, true ) ); |
||||
} |
||||
// build options from hash and initial options |
||||
var isoOptions = $.extend( {}, initialOptions, options ); |
||||
|
||||
if ( options.comboFilters ) { |
||||
isoOptions.filter = getComboFilterSelector( options.comboFilters ); |
||||
} |
||||
|
||||
// change selected link for sortBy |
||||
if ( options.sortBy ) { |
||||
var $link = $sortBy.find('a[data-option-value="' + options.sortBy + '"]'); |
||||
selectLink( $link ); |
||||
} |
||||
|
||||
$container.isotope( isoOptions ); |
||||
}) |
||||
// trigger hashchange to capture initial hash options |
||||
.trigger( 'hashchange' ); |
||||
|
||||
}); |
||||
|
||||
</script> |
||||
|
||||
@ -0,0 +1,37 @@
|
||||
{ |
||||
"name": "isotope", |
||||
"version": "2.0.0", |
||||
"description": "Filter and sort magical layouts", |
||||
"main": [ |
||||
"js/item.js", |
||||
"js/layout-mode.js", |
||||
"js/isotope.js", |
||||
"js/layout-modes/vertical.js", |
||||
"js/layout-modes/fit-rows.js", |
||||
"js/layout-modes/masonry.js" |
||||
], |
||||
"dependencies": { |
||||
"get-size": "desandro/get-size#>=1 <2", |
||||
"matches-selector": "desandro/matches-selector#>=1 <2", |
||||
"outlayer": "^1.2.0", |
||||
"masonry": "^3.1.5" |
||||
}, |
||||
"devDependencies": { |
||||
"doc-ready": "desandro/doc-ready", |
||||
"isotope-cells-by-column": "metafizzy/isotope-cells-by-column", |
||||
"isotope-cells-by-row": "metafizzy/isotope-cells-by-row", |
||||
"isotope-fit-columns": "metafizzy/isotope-fit-columns", |
||||
"isotope-horizontal": "metafizzy/isotope-horizontal", |
||||
"isotope-masonry-horizontal": "metafizzy/isotope-masonry-horizontal", |
||||
"jquery": "1", |
||||
"qunit": "1.12" |
||||
}, |
||||
"ignore": [ |
||||
"test/", |
||||
"examples/", |
||||
"**/.*", |
||||
"Gruntfile.js", |
||||
"package.json", |
||||
"notes.md" |
||||
] |
||||
} |
||||
@ -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; } |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,64 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>basic</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>basic</h1> |
||||
|
||||
<div id="basic" class="container"> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#basic'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
layoutMode: 'fitRows' |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,120 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>bottom up</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
<style> |
||||
#stamped .stamp1 { |
||||
width: 30%; |
||||
height: 100px; |
||||
left: 30%; |
||||
bottom: 20px; |
||||
} |
||||
|
||||
#stamped .stamp2 { |
||||
width: 200px; |
||||
height: 50px; |
||||
left: 20px; |
||||
bottom: 50px; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>bottom up</h1> |
||||
|
||||
<div id="basic" class="container"> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<div id="stamped" class="container"> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="stamp stamp2"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<script src="../components/classie/classie.js"></script> |
||||
<script src="../components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../components/eventEmitter/EventEmitter.min.js"></script> |
||||
<script src="../components/eventie/eventie.js"></script> |
||||
<script src="../components/doc-ready/doc-ready.js"></script> |
||||
<script src="../components/get-style-property/get-style-property.js"></script> |
||||
<script src="../components/get-size/get-size.js"></script> |
||||
<script src="../components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../components/matches-selector/matches-selector.js"></script> |
||||
<script src="../components/outlayer/item.js"></script> |
||||
<script src="../components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../masonry.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
( function() { |
||||
var container = document.querySelector('#basic'); |
||||
var msnry = new Masonry( container, { |
||||
isOriginTop: false, |
||||
columnWidth: 60 |
||||
}); |
||||
})(); |
||||
|
||||
( function() { |
||||
var container = document.querySelector('#stamped'); |
||||
var msnry = new Masonry( container, { |
||||
itemSelector: '.item', |
||||
isOriginTop: false, |
||||
columnWidth: 60, |
||||
gutter: 10, |
||||
stamp: '.stamp' |
||||
}); |
||||
})(); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,220 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>cellsByRow</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
.element.alkali { width: 170px; height: 120px; } |
||||
.element.alkaline-earth {} |
||||
.element.lanthanoid { height: 170px; } |
||||
.element.actinoid { width: 170px; } |
||||
.element.transition { height: 220px; } |
||||
/* .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%); }*/ |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>cellsByRow</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Sort</h2> |
||||
<ul class="option-set"> |
||||
<li><a href="#original-order">original-order</a></li> |
||||
<li><a href="#number">number</a></li> |
||||
<li><a href="#name">name</a></li> |
||||
<li><a href="#symbol">symbol</a></li> |
||||
<li><a href="#weight">weight</a></li> |
||||
<li><a href="#category">category</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
<script src="../js/layout-modes/vertical.js"></script> |
||||
|
||||
<script src="../bower_components/isotope-cells-by-row/cells-by-row.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
// sortBy: 'symbol', |
||||
// filter: '.metal', |
||||
layoutMode: 'cellsByRow', |
||||
// isOriginLeft: false, |
||||
// isOriginTop: false, |
||||
cellsByRow: { |
||||
columnWidth: 200, |
||||
rowHeight: 150 |
||||
}, |
||||
vertical: { |
||||
horizontalAlignment: 0.5 |
||||
}, |
||||
getSortData: { |
||||
|
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
|
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'a' ) ) { |
||||
return; |
||||
} |
||||
|
||||
// use link's href, remove leading hash |
||||
var sortBy = event.target.getAttribute('href').slice( 1 ); |
||||
sortBy.slice( 0, 1 ); |
||||
iso.arrange({ sortBy: sortBy }); |
||||
event.preventDefault(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,104 @@
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
#container, |
||||
.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; |
||||
} |
||||
|
||||
|
||||
/* element */ |
||||
|
||||
.element { |
||||
width: 80px; |
||||
height: 90px; |
||||
margin: 5px; |
||||
background: #DDD; |
||||
float: left; |
||||
position: relative; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.element > * { |
||||
margin: 0; |
||||
} |
||||
|
||||
.element .number { |
||||
right: 5px; |
||||
top: 5px; |
||||
position: absolute; |
||||
} |
||||
|
||||
.element .symbol { |
||||
font-size: 30px; |
||||
left: 5px; |
||||
top: 5px; |
||||
color: white; |
||||
} |
||||
|
||||
.element .name { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.element .weight { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } |
||||
.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } |
||||
.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } |
||||
.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } |
||||
.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } |
||||
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } |
||||
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } |
||||
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } |
||||
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } |
||||
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } |
||||
|
||||
/* stamps */ |
||||
|
||||
.stamp { |
||||
position: absolute; |
||||
background: hsla(0, 100%, 50%, 0.8); |
||||
border: 1px solid; |
||||
} |
||||
|
||||
.stamp1 { |
||||
left: 10%; |
||||
top: 20px; |
||||
width: 20%; |
||||
height: 200px; |
||||
} |
||||
|
||||
.stamp2 { |
||||
right: 200px; |
||||
top: 100px; |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
@ -0,0 +1,218 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>filter sort</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
#container { width: 100%; } |
||||
</style> |
||||
</head> |
||||
<body> |
||||
|
||||
<h1>filter sort</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Filter</h2> |
||||
<div class="option-set" data-isotope-key="filter"> |
||||
<button data-isotope-value="*">show all</button> |
||||
<button data-isotope-value=".metal">metal</button> |
||||
<button data-isotope-value=".post-transition">post-transition</button> |
||||
<button data-isotope-value="number-greater-than-50">number > 50</button> |
||||
</div> |
||||
<h2>Sort</h2> |
||||
<div class="option-set" data-isotope-key="sortBy"> |
||||
<button data-isotope-value="original-order">original-order</button> |
||||
<button data-isotope-value="number">number</button> |
||||
<button data-isotope-value="name">name</button> |
||||
<button data-isotope-value="symbol">symbol</button> |
||||
<button data-isotope-value="weight">weight</button> |
||||
<button data-isotope-value="category">category</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
<script src="../js/layout-modes/vertical.js"></script> |
||||
|
||||
<script src="../bower_components/isotope-cells-by-row/cells-by-row.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
layoutMode: 'fitRows', |
||||
transitionDuration: '0.8s', |
||||
cellsByRow: { |
||||
columnWidth: 130, |
||||
rowHeight: 140, |
||||
}, |
||||
getSortData: { |
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'button' ) ) { |
||||
return; |
||||
} |
||||
|
||||
// var opt = {}; |
||||
var key = event.target.parentNode.getAttribute('data-isotope-key'); |
||||
var value = event.target.getAttribute('data-isotope-value'); |
||||
|
||||
if ( key === 'filter' && value === 'number-greater-than-50' ) { |
||||
value = function( elem ) { |
||||
var numberText = getText( elem.querySelector('.number') ); |
||||
return parseInt( numberText, 10 ) > 40; |
||||
}; |
||||
} |
||||
console.log( key, value ); |
||||
iso.options[ key ] = value; |
||||
iso.arrange(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,217 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>horizontal layout modes</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
body, html { |
||||
height: 100%; |
||||
} |
||||
#container { |
||||
position: relative; |
||||
height: 70%; |
||||
margin-bottom: 20px; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
|
||||
<h1>horizontal layout modes</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Filter</h2> |
||||
<div class="option-set" data-isotope-key="filter"> |
||||
<button data-isotope-value="*">show all</button> |
||||
<button data-isotope-value=".metal">metal</button> |
||||
<button data-isotope-value=".post-transition">post-transition</button> |
||||
</div> |
||||
<h2>Sort</h2> |
||||
<div class="option-set" data-isotope-key="sortBy"> |
||||
<button data-isotope-value="original-order">original-order</button> |
||||
<button data-isotope-value="number">number</button> |
||||
<button data-isotope-value="name">name</button> |
||||
<button data-isotope-value="symbol">symbol</button> |
||||
<button data-isotope-value="weight">weight</button> |
||||
<button data-isotope-value="category">category</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
|
||||
<script src="../bower_components/isotope-fit-columns/fit-columns.js"></script> |
||||
<script src="../bower_components/isotope-cells-by-column/cells-by-column.js"></script> |
||||
<script src="../bower_components/isotope-horizontal/horizontal.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
layoutMode: 'fitColumns', |
||||
transitionDuration: '0.8s', |
||||
horizontal: { |
||||
verticalAlignment: 0.5 |
||||
}, |
||||
cellsByColumn: { |
||||
columnWidth: 130, |
||||
rowHeight: 140, |
||||
}, |
||||
getSortData: { |
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'button' ) ) { |
||||
return; |
||||
} |
||||
|
||||
// var opt = {}; |
||||
var key = event.target.parentNode.getAttribute('data-isotope-key'); |
||||
var value = event.target.getAttribute('data-isotope-value'); |
||||
console.log( key, value ); |
||||
iso.options[ key ] = value; |
||||
iso.arrange(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,104 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>insert</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>insert</h1> |
||||
|
||||
<p><button id="insert">Insert</button> <button id="append">Append</button></p> |
||||
|
||||
<div id="container"> |
||||
<div class="item"><b>49</b></div> |
||||
<div class="item"><b>35</b></div> |
||||
<div class="item"><b>60</b></div> |
||||
<div class="item"><b>29</b></div> |
||||
<div class="item"><b>78</b></div> |
||||
<div class="item"><b>92</b></div> |
||||
<div class="item"><b>10</b></div> |
||||
<div class="item"><b>55</b></div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
<script src="../js/layout-modes/masonry.js"></script> |
||||
|
||||
<script> |
||||
|
||||
docReady( function() { |
||||
|
||||
var container = document.querySelector('#container'); |
||||
var iso = new Isotope( container, { |
||||
layoutMode: 'masonry', |
||||
transitionDuration: '0.8s', |
||||
getSortData: { |
||||
b: 'b parseInt' |
||||
}, |
||||
sortBy: 'b', |
||||
// filter b greater than 40 |
||||
filter: function( elem ) { |
||||
return parseInt( getText( elem.querySelector('b') ), 10 ) > 40 |
||||
} |
||||
}); |
||||
|
||||
eventie.bind( document.querySelector('#insert'), 'click', function() { |
||||
// append 3 new items |
||||
iso.insert( [ getItem(), getItem(), getItem() ] ); |
||||
}); |
||||
|
||||
eventie.bind( document.querySelector('#append'), 'click', function() { |
||||
// append 3 new items |
||||
iso.appended( [ appendItem(), appendItem(), appendItem() ] ); |
||||
}); |
||||
|
||||
function getItem() { |
||||
var item = document.createElement('div'); |
||||
item.className = 'item'; |
||||
var num = Math.floor( Math.random() * 100 ); |
||||
item.innerHTML = '<b>' + num + '</b>'; |
||||
return item; |
||||
} |
||||
|
||||
function appendItem() { |
||||
var item = getItem(); |
||||
container.appendChild( item ); |
||||
return item; |
||||
} |
||||
|
||||
}); |
||||
|
||||
var docElem = document.documentElement; |
||||
|
||||
var getText = docElem.textContent ? |
||||
function( elem ) { |
||||
return elem.textContent; |
||||
} : |
||||
function( elem ) { |
||||
return elem.innerText; |
||||
}; |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,85 @@
|
||||
/*global requirejs: false*/ |
||||
|
||||
// -------------------------- bower -------------------------- //
|
||||
|
||||
/* |
||||
// with bower components
|
||||
requirejs.config({ |
||||
baseUrl: '../bower_components' |
||||
}); |
||||
|
||||
requirejs( [ '../js/isotope' ], function( Isotope ) { |
||||
new Isotope( '#basic', { |
||||
masonry: { |
||||
columnWidth: 60 |
||||
} |
||||
}); |
||||
}); |
||||
// */
|
||||
|
||||
// -------------------------- pkgd -------------------------- //
|
||||
|
||||
/* |
||||
requirejs( [ '../dist/isotope.pkgd.js' ], function( Isotope ) { |
||||
new Isotope( '#basic', { |
||||
layoutMode: 'masonry', |
||||
masonry: { |
||||
columnWidth: 60 |
||||
} |
||||
}); |
||||
}); |
||||
// */
|
||||
|
||||
// -------------------------- bower & jQuery -------------------------- //
|
||||
|
||||
/* |
||||
requirejs.config({ |
||||
baseUrl: '../bower_components', |
||||
paths: { |
||||
jquery: 'jquery/jquery' |
||||
} |
||||
}) |
||||
|
||||
requirejs( [ |
||||
'jquery', |
||||
'isotope/js/isotope', |
||||
'jquery-bridget/jquery.bridget' |
||||
], |
||||
function( $, Isotope ) { |
||||
$.bridget( 'isotope', Isotope ); |
||||
$('#basic').isotope({ |
||||
masonry: { |
||||
columnWidth: 60 |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// */
|
||||
|
||||
// -------------------------- pkgd & jQuery -------------------------- //
|
||||
|
||||
// /*
|
||||
requirejs.config({ |
||||
paths: { |
||||
jquery: '../../bower_components/jquery/jquery' |
||||
} |
||||
}); |
||||
|
||||
requirejs( [ 'require', 'jquery', '../dist/isotope.pkgd.js' ], |
||||
function( require, $, Isotope ) { |
||||
require( [ |
||||
'jquery-bridget/jquery.bridget' |
||||
], |
||||
function() { |
||||
$.bridget( 'isotope', Isotope ); |
||||
$('#basic').isotope({ |
||||
masonry: { |
||||
columnWidth: 60 |
||||
} |
||||
}); |
||||
} |
||||
); |
||||
}); |
||||
|
||||
// */
|
||||
|
||||
@ -0,0 +1,249 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>horizontal layout modes</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
body, html { |
||||
height: 100%; |
||||
} |
||||
#container { |
||||
position: relative; |
||||
height: 70%; |
||||
margin-bottom: 20px; |
||||
} |
||||
.element.alkali { width: 170px; height: 190px; } |
||||
.element.alkaline-earth {} |
||||
.element.lanthanoid { height: 190px; } |
||||
.element.actinoid { width: 170px; } |
||||
.element.transition { width: 220px; } |
||||
|
||||
.stamp { |
||||
background: #DDD; |
||||
border: 2px dotted; |
||||
position: absolute; |
||||
} |
||||
|
||||
.stamp1 { |
||||
height: 30%; |
||||
width: 80px; |
||||
left: 30px; |
||||
top: 10%; |
||||
} |
||||
|
||||
.stamp2 { |
||||
height: 200px; |
||||
width: 40px; |
||||
left: 15px; |
||||
top: 100px; |
||||
} |
||||
|
||||
</style> |
||||
</head> |
||||
<body> |
||||
|
||||
<h1>horizontal layout modes</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Filter</h2> |
||||
<div class="option-set" data-isotope-key="filter"> |
||||
<button data-isotope-value="*">show all</button> |
||||
<button data-isotope-value=".metal">metal</button> |
||||
<button data-isotope-value=".post-transition">post-transition</button> |
||||
</div> |
||||
<h2>Sort</h2> |
||||
<div class="option-set" data-isotope-key="sortBy"> |
||||
<button data-isotope-value="original-order">original-order</button> |
||||
<button data-isotope-value="number">number</button> |
||||
<button data-isotope-value="name">name</button> |
||||
<button data-isotope-value="symbol">symbol</button> |
||||
<button data-isotope-value="weight">weight</button> |
||||
<button data-isotope-value="category">category</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="stamp stamp2"></div> |
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
|
||||
<script src="../bower_components/isotope-fit-columns/fit-columns.js"></script> |
||||
<script src="../bower_components/isotope-cells-by-column/cells-by-column.js"></script> |
||||
<script src="../bower_components/isotope-horizontal/horizontal.js"></script> |
||||
<script src="../bower_components/isotope-masonry-horizontal/masonry-horizontal.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
itemSelector: '.element', |
||||
stamp: '.stamp', |
||||
layoutMode: 'masonryHorizontal', |
||||
transitionDuration: '0.8s', |
||||
masonryHorizontal: { |
||||
rowHeight: 100 |
||||
}, |
||||
cellsByColumn: { |
||||
columnWidth: 130, |
||||
rowHeight: 140, |
||||
}, |
||||
getSortData: { |
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'button' ) ) { |
||||
return; |
||||
} |
||||
|
||||
// var opt = {}; |
||||
var key = event.target.parentNode.getAttribute('data-isotope-key'); |
||||
var value = event.target.getAttribute('data-isotope-value'); |
||||
console.log( key, value ); |
||||
iso.options[ key ] = value; |
||||
iso.arrange(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,211 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>masonry</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
.element.alkali { width: 170px; height: 120px; } |
||||
.element.alkaline-earth {} |
||||
.element.lanthanoid { height: 170px; } |
||||
.element.actinoid { width: 170px; } |
||||
.element.transition { height: 220px; } |
||||
/* .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%); }*/ |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>sorting</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Sort</h2> |
||||
<button data-sort-by="original-order">original-order</a></li> |
||||
<button data-sort-by="number">number</button> |
||||
<button data-sort-by="name">name</button> |
||||
<button data-sort-by="symbol">symbol</button> |
||||
<button data-sort-by="weight">weight</button> |
||||
<button data-sort-by="category">category</button> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<div class="stamp stamp1"></div> |
||||
<div class="stamp stamp2"></div> |
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/masonry.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
// sortBy: 'symbol', |
||||
// filter: '.metal', |
||||
layoutMode: 'masonry', |
||||
masonry: { |
||||
columnWidth: 90 |
||||
}, |
||||
itemSelector: '.element', |
||||
stamp: '.stamp', |
||||
getSortData: { |
||||
|
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
|
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'button' ) ) { |
||||
return; |
||||
} |
||||
var sortBy = event.target.getAttribute('data-sort-by'); |
||||
iso.arrange({ sortBy: sortBy }); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,41 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>require js</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<script data-main="js/require-js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.js"></script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>require js</h1> |
||||
|
||||
<div id="basic" class="container"> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,127 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>right to left</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
<style> |
||||
#stamped .stamp1 { |
||||
width: 30%; |
||||
height: 100px; |
||||
left: 30%; |
||||
top: 20px; |
||||
margin: 10px; |
||||
} |
||||
|
||||
#stamped .stamp2 { |
||||
width: 200px; |
||||
height: 50px; |
||||
left: 20px; |
||||
top: 50px; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>right to left</h1> |
||||
|
||||
<div id="basic" class="container"> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<div id="stamped" class="container"> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="stamp stamp2"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item w2 h2"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h4"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h5"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item w2 h5"></div> |
||||
<div class="item w2"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item w3"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/masonry.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
( function() { |
||||
var container = document.querySelector('#basic'); |
||||
var iso = new Isotope( container, { |
||||
isOriginLeft: false, |
||||
masonry: { |
||||
columnWidth: 60 |
||||
} |
||||
}); |
||||
})(); |
||||
|
||||
( function() { |
||||
var container = document.querySelector('#stamped'); |
||||
var msnry = new Isotope( container, { |
||||
itemSelector: '.item', |
||||
isOriginLeft: false, |
||||
gutter: 10, |
||||
stamp: '.stamp', |
||||
masonry: { |
||||
columnWidth: 60, |
||||
} |
||||
}); |
||||
})(); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,210 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>sorting</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>sorting</h1> |
||||
|
||||
<div id="options"> |
||||
<h2>Sort</h2> |
||||
<ul class="option-set"> |
||||
<li><a href="#original-order">original-order</a></li> |
||||
<li><a href="#number">number</a></li> |
||||
<li><a href="#name">name</a></li> |
||||
<li><a href="#symbol">symbol</a></li> |
||||
<li><a href="#weight">weight</a></li> |
||||
<li><a href="#category">category</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition"> |
||||
<p class="number">80</p> |
||||
<h3 class="symbol">Hg</h3> |
||||
<h2 class="name">Mercury</h2> |
||||
<p class="weight">200.59</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid"> |
||||
<p class="number">52</p> |
||||
<h3 class="symbol">Te</h3> |
||||
<h2 class="name">Tellurium</h2> |
||||
<p class="weight">127.6</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition"> |
||||
<p class="number">83</p> |
||||
<h3 class="symbol">Bi</h3> |
||||
<h2 class="name">Bismuth</h2> |
||||
<p class="weight">208.9804</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition"> |
||||
<p class="number">48</p> |
||||
<h3 class="symbol">Cd</h3> |
||||
<h2 class="name">Cadmium</h2> |
||||
<p class="weight">112.411</p> |
||||
</div> |
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> |
||||
<p class="number">20</p> |
||||
<h3 class="symbol">Ca</h3> |
||||
<h2 class="name">Calcium</h2> |
||||
<p class="weight">40.078</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition"> |
||||
<p class="number">75</p> |
||||
<h3 class="symbol">Re</h3> |
||||
<h2 class="name">Rhenium</h2> |
||||
<p class="weight">186.207</p> |
||||
</div> |
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">Tl</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">204.3833</p> |
||||
</div> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition"> |
||||
<p class="number">27</p> |
||||
<h3 class="symbol">Co</h3> |
||||
<h2 class="name">Cobalt</h2> |
||||
<p class="weight">58.933195</p> |
||||
</div> |
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid"> |
||||
<p class="number">71</p> |
||||
<h3 class="symbol">Lu</h3> |
||||
<h2 class="name">Lutetium</h2> |
||||
<p class="weight">174.9668</p> |
||||
</div> |
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas"> |
||||
<p class="number">18</p> |
||||
<h3 class="symbol">Ar</h3> |
||||
<h2 class="name">Argon</h2> |
||||
<p class="weight">39.948</p> |
||||
</div> |
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali"> |
||||
<p class="number">37</p> |
||||
<h3 class="symbol">Rb</h3> |
||||
<h2 class="name">Rubidium</h2> |
||||
<p class="weight">85.4678</p> |
||||
</div> |
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other"> |
||||
<p class="number">7</p> |
||||
<h3 class="symbol">N</h3> |
||||
<h2 class="name">Nitrogen</h2> |
||||
<p class="weight">14.0067</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid"> |
||||
<p class="number">93</p> |
||||
<h3 class="symbol">Np</h3> |
||||
<h2 class="name">Neptunium</h2> |
||||
<p class="weight">(237)</p> |
||||
</div> |
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid"> |
||||
<p class="number">89</p> |
||||
<h3 class="symbol">Ac</h3> |
||||
<h2 class="name">Actinium</h2> |
||||
<p class="weight">(227)</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
layoutMode: 'fitRows', |
||||
getSortData: { |
||||
// number: function( itemElem ) { |
||||
// return parseInt( getText( itemElem.querySelector('.number') ), 10 ); |
||||
// }, |
||||
// symbol: function( itemElem ) { |
||||
// return getText( itemElem.querySelector('.symbol') ); |
||||
// }, |
||||
// name: function( itemElem ) { |
||||
// return getText( itemElem.querySelector('.name') ); |
||||
// }, |
||||
// category: function( itemElem ) { |
||||
// return itemElem.getAttribute('data-category'); |
||||
// }, |
||||
|
||||
number: '.number parseInt', |
||||
symbol: '.symbol', |
||||
name: '.name', |
||||
category: '[data-category]', |
||||
|
||||
weight: function( itemElem ) { |
||||
// remove parenthesis |
||||
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') ); |
||||
} |
||||
|
||||
|
||||
} |
||||
}); |
||||
|
||||
var options = document.querySelector('#options'); |
||||
|
||||
eventie.bind( options, 'click', function( event ) { |
||||
if ( !matchesSelector( event.target, 'a' ) ) { |
||||
return; |
||||
} |
||||
|
||||
// use link's href, remove leading hash |
||||
var sortBy = event.target.getAttribute('href').slice( 1 ); |
||||
sortBy.slice( 0, 1 ); |
||||
iso.options.sortBy = sortBy; |
||||
iso.arrange(); |
||||
event.preventDefault(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,132 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>stamps</title> |
||||
|
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
|
||||
<style> |
||||
|
||||
#alpha .stamp1 { |
||||
width: 30%; |
||||
height: 100px; |
||||
left: 30%; |
||||
top: 20px; |
||||
} |
||||
|
||||
#alpha .stamp2 { |
||||
width: 200px; |
||||
height: 50px; |
||||
left: 20px; |
||||
top: 50px; |
||||
} |
||||
|
||||
#beta { |
||||
border-style: solid; |
||||
border-width: 40px 30px 20px 10px; |
||||
padding: 10px 20px 30px 40px; |
||||
} |
||||
|
||||
#beta .stamp1 { |
||||
width: 30%; |
||||
height: 100px; |
||||
left: 10%; |
||||
top: 20px; |
||||
} |
||||
|
||||
#beta .stamp2 { |
||||
width: 200px; |
||||
height: 50px; |
||||
right: 20px; |
||||
top: 50px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>stamps</h1> |
||||
|
||||
<div id="alpha" class="container"> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="stamp stamp2"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item h2"></div> |
||||
<div class="item"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<div id="beta" class="container"> |
||||
<div class="stamp stamp2"></div> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item h2"></div> |
||||
<div class="item"></div> |
||||
<div class="item h3"></div> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
<div class="item h4"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/masonry.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
( function() { |
||||
var container = document.querySelector('#alpha'); |
||||
var iso = new Isotope( container, { |
||||
itemSelector: '.item', |
||||
stamp: '.stamp', |
||||
masonry: { |
||||
columnWidth: 60, |
||||
gutter: 10 |
||||
} |
||||
}); |
||||
|
||||
})(); |
||||
|
||||
( function() { |
||||
var container = document.querySelector('#beta'); |
||||
var iso = new Isotope( container, { |
||||
stamp: '.stamp', |
||||
masonry: { |
||||
columnWidth: 60, |
||||
gutter: 10 |
||||
} |
||||
}); |
||||
|
||||
})(); |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,86 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>filter sort</title> |
||||
|
||||
<link rel="stylesheet" href="examples.css" /> |
||||
<style> |
||||
#container { width: 100%; } |
||||
</style> |
||||
</head> |
||||
<body> |
||||
|
||||
<h1>filter sort</h1> |
||||
|
||||
<div> |
||||
<button id="bug-me">Bug me</button> |
||||
</div> |
||||
|
||||
<div id="container"> |
||||
|
||||
<!-- <div class="element post-transition metal " data-symbol="Tl" data-category="post-transition"> |
||||
<p class="number">81</p> |
||||
<h3 class="symbol">H</h3> |
||||
<h2 class="name">Thallium</h2> |
||||
<p class="weight">58.3833</p> |
||||
</div> --> |
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid"> |
||||
<p class="number">51</p> |
||||
<h3 class="symbol">Sb</h3> |
||||
<h2 class="name">Antimony</h2> |
||||
<p class="weight">121.76</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
<script src="../js/layout-modes/cells-by-row.js"></script> |
||||
<script src="../js/layout-modes/vertical.js"></script> |
||||
|
||||
<script> |
||||
docReady( function() { |
||||
var container = document.querySelector('#container'); |
||||
var iso = window.iso = new Isotope( container, { |
||||
layoutMode: 'fitRows', |
||||
transitionDuration: '2s' |
||||
}); |
||||
|
||||
var item = iso.items[0]; |
||||
|
||||
var bugButton = document.querySelector('#bug-me'); |
||||
eventie.bind( bugButton, 'click', function() { |
||||
item.reveal(); |
||||
item.moveTo( 200, 100 ); |
||||
setTimeout( function() { |
||||
item.moveTo( 100, 50 ); |
||||
}, 1500 ); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
function getText( elem ) { |
||||
return elem.textContent || elem.innerText; |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
|
||||
@ -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 |
||||
--- |
||||
|
||||
<section id="options" class="clearfix"> |
||||
<div class="option-combo"> |
||||
<h2>Filter:</h2> |
||||
<ul id="filter" class="option-set clearfix" data-option-key="filter"> |
||||
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li> |
||||
<li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li> |
||||
<li><a href="#features" data-option-value=".feature">features</a></li> |
||||
<li><a href="#examples" data-option-value=".example">examples</a></li> |
||||
</ul> |
||||
</div> |
||||
<div class="option-combo"> |
||||
<h2>Sort:</h2> |
||||
<ul id="sort" class="option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li> |
||||
<li><a href="#original" data-option-value="original-order">original</a></li> |
||||
<li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li> |
||||
</ul> |
||||
</div> |
||||
<div class="option-combo"> |
||||
<h2>Layout: </h2> |
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode"> |
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li> |
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li> |
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li> |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
|
||||
<div id="container" class="super-list variable-sizes clearfix"> |
||||
{% 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 %} |
||||
<div class="element feature {{ feature.category }} width2 height2"> |
||||
<p class="number">{{ feature.number }}</p> |
||||
<h3 class="symbol">{{ feature.symbol }}</h3> |
||||
<h2 class="name">{{ feature.name }}</h2> |
||||
</div> |
||||
{% endfor %} |
||||
<div class="link" data-number="5"><a href="jquery.isotope.min.js">Down​load jquery​.isotope​.min.js</a></div> |
||||
<div class="link" data-number="13"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Down​load this project</a></div> |
||||
<div class="link away" data-number="35"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></div> |
||||
</div> |
||||
|
||||
<div id="sites"></div> |
||||
|
||||
|
||||
<script src="{{ site.jquery_js }}"></script> |
||||
<script src="{{ site.isotope_js }}"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.isotope({ |
||||
masonry: { |
||||
columnWidth: 120 |
||||
}, |
||||
sortBy: 'number', |
||||
getSortData: { |
||||
number: function( $elem ) { |
||||
var number = $elem.hasClass('element') ? |
||||
$elem.find('.number').text() : |
||||
$elem.attr('data-number'); |
||||
return parseInt( number, 10 ); |
||||
}, |
||||
alphabetical: function( $elem ) { |
||||
var name = $elem.find('.name'), |
||||
itemText = name.length ? name : $elem; |
||||
return itemText.text(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
|
||||
// Sites using Isotope markup |
||||
var $sites = $('#sites'), |
||||
$sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'), |
||||
$sitesList = $('<ul class="clearfix"></ul>'); |
||||
|
||||
$sites.append( $sitesTitle ).append( $sitesList ); |
||||
|
||||
$sitesList.isotope({ |
||||
layoutMode: 'cellsByRow', |
||||
cellsByRow: { |
||||
columnWidth: 290, |
||||
rowHeight: 400 |
||||
} |
||||
}); |
||||
|
||||
var ajaxError = function(){ |
||||
$sitesTitle.removeClass('loading').addClass('error') |
||||
.text('Could not load sites using Isotope :('); |
||||
}; |
||||
|
||||
// dynamically load sites using Isotope from Zootool |
||||
$.getJSON('http://zootool.com/api/users/items/?username=desandro' + |
||||
'&apikey=8b604e5d4841c2cd976241dd90d319d7' + |
||||
'&tag=bestofisotope&callback=?') |
||||
.error( ajaxError ) |
||||
.success(function( data ){ |
||||
|
||||
// proceed only if we have data |
||||
if ( !data || !data.length ) { |
||||
ajaxError(); |
||||
return; |
||||
} |
||||
var items = [], |
||||
item, datum; |
||||
|
||||
for ( var i=0, len = data.length; i < len; i++ ) { |
||||
datum = data[i]; |
||||
item = '<li><a href="' + datum.url + '">' |
||||
+ '<img src="' + datum.image.replace('/l.', '/m.') + '" />' |
||||
+ '<b>' + datum.title + '</b>' |
||||
+ '</a></li>'; |
||||
items.push( item ); |
||||
} |
||||
|
||||
var $items = $( items.join('') ) |
||||
.addClass('example'); |
||||
|
||||
// set random number for each item |
||||
$items.each(function(){ |
||||
$(this).attr('data-number', ~~( Math.random() * 100 + 15 )); |
||||
}); |
||||
|
||||
$items.imagesLoaded(function(){ |
||||
$sitesTitle.removeClass('loading').text('Sites using Isotope'); |
||||
$container.append( $items ); |
||||
$items.each(function(){ |
||||
var $this = $(this), |
||||
itemHeight = Math.ceil( $this.height() / 120 ) * 120 - 10; |
||||
$this.height( itemHeight ); |
||||
}); |
||||
$container.isotope( 'insert', $items ); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
@ -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 '<div class="' + className + '" data-symbol="' + symbol +
|
||||
'" data-category="' + category + '"><p class="number">' + number +
|
||||
'</p><h3 class="symbol">' + symbol + '</h3><h2 class="name">' + name +
|
||||
'</h2><p class="weight">' + weight + '</p></div>'; |
||||
}; |
||||
|
||||
fakeElement.getGroup = function() { |
||||
var i = Math.ceil( Math.random()*3 + 1 ), |
||||
newEls = ''; |
||||
while ( i-- ) { |
||||
newEls += fakeElement.create(); |
||||
} |
||||
return newEls; |
||||
}; |
||||
@ -0,0 +1,603 @@
|
||||
/*! |
||||
* Isotope v2.0.0 |
||||
* Filter & sort magical layouts |
||||
* http://isotope.metafizzy.co
|
||||
*/ |
||||
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
// -------------------------- vars -------------------------- //
|
||||
|
||||
var jQuery = window.jQuery; |
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) { |
||||
for ( var prop in b ) { |
||||
a[ prop ] = b[ prop ]; |
||||
} |
||||
return a; |
||||
} |
||||
|
||||
var trim = String.prototype.trim ? |
||||
function( str ) { |
||||
return str.trim(); |
||||
} : |
||||
function( str ) { |
||||
return str.replace( /^\s+|\s+$/g, '' ); |
||||
}; |
||||
|
||||
var docElem = document.documentElement; |
||||
|
||||
var getText = docElem.textContent ? |
||||
function( elem ) { |
||||
return elem.textContent; |
||||
} : |
||||
function( elem ) { |
||||
return elem.innerText; |
||||
}; |
||||
|
||||
var objToString = Object.prototype.toString; |
||||
function isArray( obj ) { |
||||
return objToString.call( obj ) === '[object Array]'; |
||||
} |
||||
|
||||
// index of helper cause IE8
|
||||
var indexOf = Array.prototype.indexOf ? function( ary, obj ) { |
||||
return ary.indexOf( obj ); |
||||
} : function( ary, obj ) { |
||||
for ( var i=0, len = ary.length; i < len; i++ ) { |
||||
if ( ary[i] === obj ) { |
||||
return i; |
||||
} |
||||
} |
||||
return -1; |
||||
}; |
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) { |
||||
var ary = []; |
||||
if ( isArray( obj ) ) { |
||||
// use object if already an array
|
||||
ary = obj; |
||||
} else if ( obj && typeof obj.length === 'number' ) { |
||||
// convert nodeList to array
|
||||
for ( var i=0, len = obj.length; i < len; i++ ) { |
||||
ary.push( obj[i] ); |
||||
} |
||||
} else { |
||||
// array of single index
|
||||
ary.push( obj ); |
||||
} |
||||
return ary; |
||||
} |
||||
|
||||
function removeFrom( obj, ary ) { |
||||
var index = indexOf( ary, obj ); |
||||
if ( index !== -1 ) { |
||||
ary.splice( index, 1 ); |
||||
} |
||||
} |
||||
|
||||
// -------------------------- isotopeDefinition -------------------------- //
|
||||
|
||||
// used for AMD definition and requires
|
||||
function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode ) { |
||||
// create an Outlayer layout class
|
||||
var Isotope = Outlayer.create( 'isotope', { |
||||
layoutMode: "masonry", |
||||
isJQueryFiltering: true, |
||||
sortAscending: true |
||||
}); |
||||
|
||||
Isotope.Item = Item; |
||||
Isotope.LayoutMode = LayoutMode; |
||||
|
||||
Isotope.prototype._create = function() { |
||||
this.itemGUID = 0; |
||||
// functions that sort items
|
||||
this._sorters = {}; |
||||
this._getSorters(); |
||||
// call super
|
||||
Outlayer.prototype._create.call( this ); |
||||
|
||||
// create layout modes
|
||||
this.modes = {}; |
||||
// start filteredItems with all items
|
||||
this.filteredItems = this.items; |
||||
// keep of track of sortBys
|
||||
this.sortHistory = [ 'original-order' ]; |
||||
// create from registered layout modes
|
||||
for ( var name in LayoutMode.modes ) { |
||||
this._initLayoutMode( name ); |
||||
} |
||||
}; |
||||
|
||||
Isotope.prototype.reloadItems = function() { |
||||
// reset item ID counter
|
||||
this.itemGUID = 0; |
||||
// call super
|
||||
Outlayer.prototype.reloadItems.call( this ); |
||||
}; |
||||
|
||||
Isotope.prototype._itemize = function() { |
||||
var items = Outlayer.prototype._itemize.apply( this, arguments ); |
||||
// assign ID for original-order
|
||||
for ( var i=0, len = items.length; i < len; i++ ) { |
||||
var item = items[i]; |
||||
item.id = this.itemGUID++; |
||||
} |
||||
this._updateItemsSortData( items ); |
||||
return items; |
||||
}; |
||||
|
||||
|
||||
// -------------------------- layout -------------------------- //
|
||||
|
||||
Isotope.prototype._initLayoutMode = function( name ) { |
||||
var Mode = LayoutMode.modes[ name ]; |
||||
// set mode options
|
||||
// HACK extend initial options, back-fill in default options
|
||||
var initialOpts = this.options[ name ] || {}; |
||||
this.options[ name ] = Mode.options ? |
||||
extend( Mode.options, initialOpts ) : initialOpts; |
||||
// init layout mode instance
|
||||
this.modes[ name ] = new Mode( this ); |
||||
}; |
||||
|
||||
|
||||
Isotope.prototype.layout = function() { |
||||
// if first time doing layout, do all magic
|
||||
if ( !this._isLayoutInited && this.options.isInitLayout ) { |
||||
this.arrange(); |
||||
return; |
||||
} |
||||
this._layout(); |
||||
}; |
||||
|
||||
// private method to be used in layout() & magic()
|
||||
Isotope.prototype._layout = function() { |
||||
// don't animate first layout
|
||||
var isInstant = this._getIsInstant(); |
||||
// layout flow
|
||||
this._resetLayout(); |
||||
this._manageStamps(); |
||||
this.layoutItems( this.filteredItems, isInstant ); |
||||
|
||||
// flag for initalized
|
||||
this._isLayoutInited = true; |
||||
}; |
||||
|
||||
// filter + sort + layout
|
||||
Isotope.prototype.arrange = function( opts ) { |
||||
// set any options pass
|
||||
this.option( opts ); |
||||
this._getIsInstant(); |
||||
// filter, sort, and layout
|
||||
this.filteredItems = this._filter( this.items ); |
||||
this._sort(); |
||||
this._layout(); |
||||
}; |
||||
// alias to _init for main plugin method
|
||||
Isotope.prototype._init = Isotope.prototype.arrange; |
||||
|
||||
// HACK
|
||||
// Don't animate/transition first layout
|
||||
// Or don't animate/transition other layouts
|
||||
Isotope.prototype._getIsInstant = function() { |
||||
var isInstant = this.options.isLayoutInstant !== undefined ? |
||||
this.options.isLayoutInstant : !this._isLayoutInited; |
||||
this._isInstant = isInstant; |
||||
return isInstant; |
||||
}; |
||||
|
||||
// -------------------------- filter -------------------------- //
|
||||
|
||||
Isotope.prototype._filter = function( items ) { |
||||
var filter = this.options.filter; |
||||
filter = filter || '*'; |
||||
var matches = []; |
||||
var hiddenMatched = []; |
||||
var visibleUnmatched = []; |
||||
|
||||
var test = this._getFilterTest( filter ); |
||||
|
||||
// test each item
|
||||
for ( var i=0, len = items.length; i < len; i++ ) { |
||||
var item = items[i]; |
||||
if ( item.isIgnored ) { |
||||
continue; |
||||
} |
||||
// add item to either matched or unmatched group
|
||||
var isMatched = test( item ); |
||||
// item.isFilterMatched = isMatched;
|
||||
// add to matches if its a match
|
||||
if ( isMatched ) { |
||||
matches.push( item ); |
||||
} |
||||
// add to additional group if item needs to be hidden or revealed
|
||||
if ( isMatched && item.isHidden ) { |
||||
hiddenMatched.push( item ); |
||||
} else if ( !isMatched && !item.isHidden ) { |
||||
visibleUnmatched.push( item ); |
||||
} |
||||
} |
||||
|
||||
var _this = this; |
||||
function hideReveal() { |
||||
_this.reveal( hiddenMatched ); |
||||
_this.hide( visibleUnmatched ); |
||||
} |
||||
|
||||
if ( this._isInstant ) { |
||||
this._noTransition( hideReveal ); |
||||
} else { |
||||
hideReveal(); |
||||
} |
||||
|
||||
return matches; |
||||
}; |
||||
|
||||
// get a jQuery, function, or a matchesSelector test given the filter
|
||||
Isotope.prototype._getFilterTest = function( filter ) { |
||||
if ( jQuery && this.options.isJQueryFiltering ) { |
||||
// use jQuery
|
||||
return function( item ) { |
||||
return jQuery( item.element ).is( filter ); |
||||
}; |
||||
} |
||||
if ( typeof filter === 'function' ) { |
||||
// use filter as function
|
||||
return function( item ) { |
||||
return filter( item.element ); |
||||
}; |
||||
} |
||||
// default, use filter as selector string
|
||||
return function( item ) { |
||||
return matchesSelector( item.element, filter ); |
||||
}; |
||||
}; |
||||
|
||||
// -------------------------- sorting -------------------------- //
|
||||
|
||||
/** |
||||
* @params {Array} elems |
||||
* @public |
||||
*/ |
||||
Isotope.prototype.updateSortData = function( elems ) { |
||||
this._getSorters(); |
||||
// update item sort data
|
||||
// default to all items if none are passed in
|
||||
elems = makeArray( elems ); |
||||
var items = this.getItems( elems ); |
||||
// if no items found, update all items
|
||||
items = items.length ? items : this.items; |
||||
this._updateItemsSortData( items ); |
||||
}; |
||||
|
||||
Isotope.prototype._getSorters = function() { |
||||
var getSortData = this.options.getSortData; |
||||
for ( var key in getSortData ) { |
||||
var sorter = getSortData[ key ]; |
||||
this._sorters[ key ] = mungeSorter( sorter ); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* @params {Array} items - of Isotope.Items |
||||
* @private |
||||
*/ |
||||
Isotope.prototype._updateItemsSortData = function( items ) { |
||||
for ( var i=0, len = items.length; i < len; i++ ) { |
||||
var item = items[i]; |
||||
item.updateSortData(); |
||||
} |
||||
}; |
||||
|
||||
// ----- munge sorter ----- //
|
||||
|
||||
// encapsulate this, as we just need mungeSorter
|
||||
// other functions in here are just for munging
|
||||
var mungeSorter = ( function() { |
||||
// add a magic layer to sorters for convienent shorthands
|
||||
// `.foo-bar` will use the text of .foo-bar querySelector
|
||||
// `[foo-bar]` will use attribute
|
||||
// you can also add parser
|
||||
// `.foo-bar parseInt` will parse that as a number
|
||||
function mungeSorter( sorter ) { |
||||
// if not a string, return function or whatever it is
|
||||
if ( typeof sorter !== 'string' ) { |
||||
return sorter; |
||||
} |
||||
// parse the sorter string
|
||||
var args = trim( sorter ).split(' '); |
||||
var query = args[0]; |
||||
// check if query looks like [an-attribute]
|
||||
var attrMatch = query.match( /^\[(.+)\]$/ ); |
||||
var attr = attrMatch && attrMatch[1]; |
||||
var getValue = getValueGetter( attr, query ); |
||||
// use second argument as a parser
|
||||
var parser = Isotope.sortDataParsers[ args[1] ]; |
||||
// parse the value, if there was a parser
|
||||
sorter = parser ? function( elem ) { |
||||
return elem && parser( getValue( elem ) ); |
||||
} : |
||||
// otherwise just return value
|
||||
function( elem ) { |
||||
return elem && getValue( elem ); |
||||
}; |
||||
|
||||
return sorter; |
||||
} |
||||
|
||||
// get an attribute getter, or get text of the querySelector
|
||||
function getValueGetter( attr, query ) { |
||||
var getValue; |
||||
// if query looks like [foo-bar], get attribute
|
||||
if ( attr ) { |
||||
getValue = function( elem ) { |
||||
return elem.getAttribute( attr ); |
||||
}; |
||||
} else { |
||||
// otherwise, assume its a querySelector, and get its text
|
||||
getValue = function( elem ) { |
||||
var child = elem.querySelector( query ); |
||||
return child && getText( child ); |
||||
}; |
||||
} |
||||
return getValue; |
||||
} |
||||
|
||||
return mungeSorter; |
||||
})(); |
||||
|
||||
// parsers used in getSortData shortcut strings
|
||||
Isotope.sortDataParsers = { |
||||
'parseInt': function( val ) { |
||||
return parseInt( val, 10 ); |
||||
}, |
||||
'parseFloat': function( val ) { |
||||
return parseFloat( val ); |
||||
} |
||||
}; |
||||
|
||||
// ----- sort method ----- //
|
||||
|
||||
// sort filteredItem order
|
||||
Isotope.prototype._sort = function() { |
||||
var sortByOpt = this.options.sortBy; |
||||
if ( !sortByOpt ) { |
||||
return; |
||||
} |
||||
// concat all sortBy and sortHistory
|
||||
var sortBys = [].concat.apply( sortByOpt, this.sortHistory ); |
||||
// sort magic
|
||||
var itemSorter = getItemSorter( sortBys, this.options.sortAscending ); |
||||
this.filteredItems.sort( itemSorter ); |
||||
// keep track of sortBy History
|
||||
if ( sortByOpt !== this.sortHistory[0] ) { |
||||
// add to front, oldest goes in last
|
||||
this.sortHistory.unshift( sortByOpt ); |
||||
} |
||||
}; |
||||
|
||||
// returns a function used for sorting
|
||||
function getItemSorter( sortBys, sortAsc ) { |
||||
return function sorter( itemA, itemB ) { |
||||
// cycle through all sortKeys
|
||||
for ( var i = 0, len = sortBys.length; i < len; i++ ) { |
||||
var sortBy = sortBys[i]; |
||||
var a = itemA.sortData[ sortBy ]; |
||||
var b = itemB.sortData[ sortBy ]; |
||||
if ( a > b || a < b ) { |
||||
// if sortAsc is an object, use the value given the sortBy key
|
||||
var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc; |
||||
var direction = isAscending ? 1 : -1; |
||||
return ( a > b ? 1 : -1 ) * direction; |
||||
} |
||||
} |
||||
return 0; |
||||
}; |
||||
} |
||||
|
||||
// -------------------------- methods -------------------------- //
|
||||
|
||||
// get layout mode
|
||||
Isotope.prototype._mode = function() { |
||||
var layoutMode = this.options.layoutMode; |
||||
var mode = this.modes[ layoutMode ]; |
||||
if ( !mode ) { |
||||
// TODO console.error
|
||||
throw new Error( 'No layout mode: ' + layoutMode ); |
||||
} |
||||
// HACK sync mode's options
|
||||
// any options set after init for layout mode need to be synced
|
||||
mode.options = this.options[ layoutMode ]; |
||||
return mode; |
||||
}; |
||||
|
||||
Isotope.prototype._resetLayout = function() { |
||||
// trigger original reset layout
|
||||
Outlayer.prototype._resetLayout.call( this ); |
||||
this._mode()._resetLayout(); |
||||
}; |
||||
|
||||
Isotope.prototype._getItemLayoutPosition = function( item ) { |
||||
return this._mode()._getItemLayoutPosition( item ); |
||||
}; |
||||
|
||||
Isotope.prototype._manageStamp = function( stamp ) { |
||||
this._mode()._manageStamp( stamp ); |
||||
}; |
||||
|
||||
Isotope.prototype._getContainerSize = function() { |
||||
return this._mode()._getContainerSize(); |
||||
}; |
||||
|
||||
Isotope.prototype.needsResizeLayout = function() { |
||||
return this._mode().needsResizeLayout(); |
||||
}; |
||||
|
||||
// -------------------------- adding & removing -------------------------- //
|
||||
|
||||
// HEADS UP overwrites default Outlayer appended
|
||||
Isotope.prototype.appended = function( elems ) { |
||||
var items = this.addItems( elems ); |
||||
if ( !items.length ) { |
||||
return; |
||||
} |
||||
var filteredItems = this._filterRevealAdded( items ); |
||||
// add to filteredItems
|
||||
this.filteredItems = this.filteredItems.concat( filteredItems ); |
||||
}; |
||||
|
||||
// HEADS UP overwrites default Outlayer prepended
|
||||
Isotope.prototype.prepended = function( elems ) { |
||||
var items = this._itemize( elems ); |
||||
if ( !items.length ) { |
||||
return; |
||||
} |
||||
// add items to beginning of collection
|
||||
var previousItems = this.items.slice(0); |
||||
this.items = items.concat( previousItems ); |
||||
// start new layout
|
||||
this._resetLayout(); |
||||
this._manageStamps(); |
||||
// layout new stuff without transition
|
||||
var filteredItems = this._filterRevealAdded( items ); |
||||
// layout previous items
|
||||
this.layoutItems( previousItems ); |
||||
// add to filteredItems
|
||||
this.filteredItems = filteredItems.concat( this.filteredItems ); |
||||
}; |
||||
|
||||
Isotope.prototype._filterRevealAdded = function( items ) { |
||||
var filteredItems = this._noTransition( function() { |
||||
return this._filter( items ); |
||||
}); |
||||
// layout and reveal just the new items
|
||||
this.layoutItems( filteredItems, true ); |
||||
this.reveal( filteredItems ); |
||||
return items; |
||||
}; |
||||
|
||||
/** |
||||
* Filter, sort, and layout newly-appended item elements |
||||
* @param {Array or NodeList or Element} elems |
||||
*/ |
||||
Isotope.prototype.insert = function( elems ) { |
||||
var items = this.addItems( elems ); |
||||
if ( !items.length ) { |
||||
return; |
||||
} |
||||
// append item elements
|
||||
var i, item; |
||||
var len = items.length; |
||||
for ( i=0; i < len; i++ ) { |
||||
item = items[i]; |
||||
this.element.appendChild( item.element ); |
||||
} |
||||
// filter new stuff
|
||||
/* |
||||
// this way adds hides new filtered items with NO transition
|
||||
// so user can't see if new hidden items have been inserted
|
||||
var filteredInsertItems; |
||||
this._noTransition( function() { |
||||
filteredInsertItems = this._filter( items ); |
||||
// hide all new items
|
||||
this.hide( filteredInsertItems ); |
||||
}); |
||||
// */
|
||||
// this way hides new filtered items with transition
|
||||
// so user at least sees that something has been added
|
||||
var filteredInsertItems = this._filter( items ); |
||||
// hide all newitems
|
||||
this._noTransition( function() { |
||||
this.hide( filteredInsertItems ); |
||||
}); |
||||
// */
|
||||
// set flag
|
||||
for ( i=0; i < len; i++ ) { |
||||
items[i].isLayoutInstant = true; |
||||
} |
||||
this.arrange(); |
||||
// reset flag
|
||||
for ( i=0; i < len; i++ ) { |
||||
delete items[i].isLayoutInstant; |
||||
} |
||||
this.reveal( filteredInsertItems ); |
||||
}; |
||||
|
||||
var _remove = Isotope.prototype.remove; |
||||
Isotope.prototype.remove = function( elems ) { |
||||
elems = makeArray( elems ); |
||||
var removeItems = this.getItems( elems ); |
||||
// do regular thing
|
||||
_remove.call( this, elems ); |
||||
// bail if no items to remove
|
||||
if ( !removeItems || !removeItems.length ) { |
||||
return; |
||||
} |
||||
// remove elems from filteredItems
|
||||
for ( var i=0, len = removeItems.length; i < len; i++ ) { |
||||
var item = removeItems[i]; |
||||
// remove item from collection
|
||||
removeFrom( item, this.filteredItems ); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* trigger fn without transition |
||||
* kind of hacky to have this in the first place |
||||
* @param {Function} fn |
||||
* @returns ret |
||||
* @private |
||||
*/ |
||||
Isotope.prototype._noTransition = function( fn ) { |
||||
// save transitionDuration before disabling
|
||||
var transitionDuration = this.options.transitionDuration; |
||||
// disable transition
|
||||
this.options.transitionDuration = 0; |
||||
// do it
|
||||
var returnValue = fn.call( this ); |
||||
// re-enable transition for reveal
|
||||
this.options.transitionDuration = transitionDuration; |
||||
return returnValue; |
||||
}; |
||||
|
||||
// ----- ----- //
|
||||
|
||||
return Isotope; |
||||
} |
||||
|
||||
// -------------------------- transport -------------------------- //
|
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'outlayer/outlayer', |
||||
'get-size/get-size', |
||||
'matches-selector/matches-selector', |
||||
'./item', |
||||
'./layout-mode', |
||||
// include default layout modes
|
||||
'./layout-modes/masonry', |
||||
'./layout-modes/fit-rows', |
||||
'./layout-modes/vertical' |
||||
], |
||||
isotopeDefinition ); |
||||
} else { |
||||
// browser global
|
||||
window.Isotope = isotopeDefinition( |
||||
window.Outlayer, |
||||
window.getSize, |
||||
window.matchesSelector, |
||||
window.Isotope.Item, |
||||
window.Isotope.LayoutMode |
||||
); |
||||
} |
||||
|
||||
})( window ); |
||||
@ -0,0 +1,65 @@
|
||||
/** |
||||
* Isotope Item |
||||
**/ |
||||
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
// -------------------------- Item -------------------------- //
|
||||
|
||||
function itemDefinition( Outlayer ) { |
||||
|
||||
// sub-class Outlayer Item
|
||||
function Item() { |
||||
Outlayer.Item.apply( this, arguments ); |
||||
} |
||||
|
||||
Item.prototype = new Outlayer.Item(); |
||||
|
||||
Item.prototype._create = function() { |
||||
// assign id, used for original-order sorting
|
||||
this.id = this.layout.itemGUID++; |
||||
Outlayer.Item.prototype._create.call( this ); |
||||
this.sortData = {}; |
||||
}; |
||||
|
||||
Item.prototype.updateSortData = function() { |
||||
if ( this.isIgnored ) { |
||||
return; |
||||
} |
||||
// default sorters
|
||||
this.sortData.id = this.id; |
||||
// for backward compatibility
|
||||
this.sortData['original-order'] = this.id; |
||||
this.sortData.random = Math.random(); |
||||
// go thru getSortData obj and apply the sorters
|
||||
var getSortData = this.layout.options.getSortData; |
||||
var sorters = this.layout._sorters; |
||||
for ( var key in getSortData ) { |
||||
var sorter = sorters[ key ]; |
||||
this.sortData[ key ] = sorter( this.element, this ); |
||||
} |
||||
}; |
||||
|
||||
return Item; |
||||
|
||||
} |
||||
|
||||
// -------------------------- transport -------------------------- //
|
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'outlayer/outlayer' |
||||
], |
||||
itemDefinition ); |
||||
} else { |
||||
// browser global
|
||||
window.Isotope = window.Isotope || {}; |
||||
window.Isotope.Item = itemDefinition( |
||||
window.Outlayer |
||||
); |
||||
} |
||||
|
||||
})( window ); |
||||
File diff suppressed because one or more lines are too long
@ -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<N?O[P]||(R[M+1]&&isNaN(R[M+1])?{}:[]):J}}else{if($.isArray(H[P])){H[P].push(J)}else{if(H[P]!==i){H[P]=[H[P],J]}else{H[P]=J}}}}else{if(P){H[P]=F?i:""}}});return H};function z(H,F,G){if(F===i||typeof F==="boolean"){G=F;F=a[H?D:A]()}else{F=E(F)?F.replace(H?w:x,""):F}return l(F,G)}l[A]=B(z,0);l[D]=v=B(z,1);$[y]||($[y]=function(F){return $.extend(C,F)})({a:k,base:k,iframe:t,img:t,input:t,form:"action",link:k,script:t});j=$[y];function s(I,G,H,F){if(!E(H)&&typeof H!=="object"){F=H;H=G;G=i}return this.each(function(){var L=$(this),J=G||j()[(this.nodeName||"").toLowerCase()]||"",K=J&&L.attr(J)||"";L.attr(J,a[I](K,H,F))})}$.fn[A]=B(s,A);$.fn[D]=B(s,D);b.pushState=q=function(I,F){if(E(I)&&/^#/.test(I)&&F===i){F=2}var H=I!==i,G=c(p[g][k],H?I:{},H?F:2);p[g][k]=G+(/#/.test(G)?"":"#")};b.getState=u=function(F,G){return F===i||typeof F==="boolean"?v(F):v(G)[F]};b.removeState=function(F){var G={};if(F!==i){G=u();$.each($.isArray(F)?F:arguments,function(I,H){delete G[H]})}q(G,2)};e[d]=$.extend(e[d],{add:function(F){var H;function G(J){var I=J[D]=c();J.getState=function(K,L){return K===i||typeof K==="boolean"?l(I,K):l(I,L)[K]};H.apply(this,arguments)}if($.isFunction(F)){H=F;return G}else{H=F.handler;F.handler=G}}})})(jQuery,this); |
||||
/* |
||||
* jQuery hashchange event - v1.2 - 2/11/2010 |
||||
* http://benalman.com/projects/jquery-hashchange-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman |
||||
* Dual licensed under the MIT and GPL licenses. |
||||
* http://benalman.com/about/license/
|
||||
*/ |
||||
(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').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); |
||||
@ -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:"<em>Congratulations, you've reached the end of the internet.</em>",img:"http://www.infinite-scroll.com/loading.gif",msg:null,msgText:"<em>Loading the next set of posts...</em>",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=$('<div id="infscr-loading"><img alt="Loading..." src="'+opts.loading.img+'" /><div>'+opts.loading.msgText+'</div></div>');(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='<div>'+data+'</div>';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<opts.pixelsFromNavToBottom);},_pausing:function infscr_pausing(pause){var opts=this.options;if(!!opts.behavior&&this['_pausing_'+opts.behavior]!==undefined){this['_pausing_'+opts.behavior].call(this,pause);return;} |
||||
if(pause!=='pause'&&pause!=='resume'&&pause!==null){this._debug('Invalid argument. Toggling pause value instead');};pause=(pause&&(pause=='pause'||pause=='resume'))?pause:'toggle';switch(pause){case'pause':opts.state.isPaused=true;break;case'resume':opts.state.isPaused=false;break;case'toggle':opts.state.isPaused=!opts.state.isPaused;break;} |
||||
this._debug('Paused',opts.state.isPaused);return false;},_setup:function infscr_setup(){var opts=this.options;if(!!opts.behavior&&this['_setup_'+opts.behavior]!==undefined){this['_setup_'+opts.behavior].call(this);return;} |
||||
this._binding('bind');return false;},_showdonemsg:function infscr_showdonemsg(){var opts=this.options;if(!!opts.behavior&&this['_showdonemsg_'+opts.behavior]!==undefined){this['_showdonemsg_'+opts.behavior].call(this);return;} |
||||
opts.loading.msg.find('img').hide().parent().find('div').html(opts.loading.finishedMsg).animate({opacity:1},2000,function(){$(this).parent().fadeOut('normal');});opts.errorCallback.call($(opts.contentSelector)[0],'done');},_validate:function infscr_validate(opts){for(var key in opts){if(key.indexOf&&key.indexOf('Selector')>-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')?$('<tbody/>'):$('<div/>');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); |
||||
@ -0,0 +1,156 @@
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
function layoutModeDefinition( getSize, Outlayer ) { |
||||
|
||||
// layout mode class
|
||||
function LayoutMode( isotope ) { |
||||
this.isotope = isotope; |
||||
// link properties
|
||||
if ( isotope ) { |
||||
this.options = isotope.options[ this.namespace ]; |
||||
this.element = isotope.element; |
||||
this.items = isotope.filteredItems; |
||||
this.size = isotope.size; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* some methods should just defer to default Outlayer method |
||||
* and reference the Isotope instance as `this` |
||||
**/ |
||||
( function() { |
||||
var facadeMethods = [ |
||||
'_resetLayout', |
||||
'_getItemLayoutPosition', |
||||
'_manageStamp', |
||||
'_getContainerSize', |
||||
'_getElementOffset', |
||||
'needsResizeLayout' |
||||
]; |
||||
|
||||
for ( var i=0, len = facadeMethods.length; i < len; i++ ) { |
||||
var methodName = facadeMethods[i]; |
||||
LayoutMode.prototype[ methodName ] = getOutlayerMethod( methodName ); |
||||
} |
||||
|
||||
function getOutlayerMethod( methodName ) { |
||||
return function() { |
||||
return Outlayer.prototype[ methodName ].apply( this.isotope, arguments ); |
||||
}; |
||||
} |
||||
})(); |
||||
|
||||
// ----- ----- //
|
||||
|
||||
// for horizontal layout modes, check vertical size
|
||||
LayoutMode.prototype.needsVerticalResizeLayout = function() { |
||||
// don't trigger if size did not change
|
||||
var size = getSize( this.isotope.element ); |
||||
// check that this.size and size are there
|
||||
// IE8 triggers resize on body size change, so they might not be
|
||||
var hasSizes = this.isotope.size && size; |
||||
return hasSizes && size.innerHeight !== this.isotope.size.innerHeight; |
||||
}; |
||||
|
||||
// ----- measurements ----- //
|
||||
|
||||
LayoutMode.prototype._getMeasurement = function() { |
||||
this.isotope._getMeasurement.apply( this, arguments ); |
||||
}; |
||||
|
||||
LayoutMode.prototype.getColumnWidth = function() { |
||||
this.getSegmentSize( 'column', 'Width' ); |
||||
}; |
||||
|
||||
LayoutMode.prototype.getRowHeight = function() { |
||||
this.getSegmentSize( 'row', 'Height' ); |
||||
}; |
||||
|
||||
/** |
||||
* get columnWidth or rowHeight |
||||
* segment: 'column' or 'row' |
||||
* size 'Width' or 'Height' |
||||
**/ |
||||
LayoutMode.prototype.getSegmentSize = function( segment, size ) { |
||||
var segmentName = segment + size; |
||||
var outerSize = 'outer' + size; |
||||
// columnWidth / outerWidth // rowHeight / outerHeight
|
||||
this._getMeasurement( segmentName, outerSize ); |
||||
// got rowHeight or columnWidth, we can chill
|
||||
if ( this[ segmentName ] ) { |
||||
return; |
||||
} |
||||
// fall back to item of first element
|
||||
var firstItemSize = this.getFirstItemSize(); |
||||
this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] || |
||||
// or size of container
|
||||
this.isotope.size[ 'inner' + size ]; |
||||
}; |
||||
|
||||
LayoutMode.prototype.getFirstItemSize = function() { |
||||
var firstItem = this.isotope.filteredItems[0]; |
||||
return firstItem && firstItem.element && getSize( firstItem.element ); |
||||
}; |
||||
|
||||
// ----- methods that should reference isotope ----- //
|
||||
|
||||
LayoutMode.prototype.layout = function() { |
||||
this.isotope.layout.apply( this.isotope, arguments ); |
||||
}; |
||||
|
||||
LayoutMode.prototype.getSize = function() { |
||||
this.isotope.getSize(); |
||||
this.size = this.isotope.size; |
||||
}; |
||||
|
||||
// -------------------------- create -------------------------- //
|
||||
|
||||
LayoutMode.modes = {}; |
||||
|
||||
LayoutMode.create = function( namespace, options ) { |
||||
|
||||
function Mode() { |
||||
LayoutMode.apply( this, arguments ); |
||||
} |
||||
|
||||
Mode.prototype = new LayoutMode(); |
||||
|
||||
// default options
|
||||
if ( options ) { |
||||
Mode.options = options; |
||||
} |
||||
|
||||
Mode.prototype.namespace = namespace; |
||||
// register in Isotope
|
||||
LayoutMode.modes[ namespace ] = Mode; |
||||
|
||||
return Mode; |
||||
}; |
||||
|
||||
|
||||
return LayoutMode; |
||||
|
||||
} |
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'get-size/get-size', |
||||
'outlayer/outlayer' |
||||
], |
||||
layoutModeDefinition ); |
||||
} else { |
||||
// browser global
|
||||
window.Isotope = window.Isotope || {}; |
||||
window.Isotope.LayoutMode = layoutModeDefinition( |
||||
window.getSize, |
||||
window.Outlayer |
||||
); |
||||
} |
||||
|
||||
|
||||
})( window ); |
||||
@ -0,0 +1,56 @@
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
function fitRowsDefinition( LayoutMode ) { |
||||
|
||||
var FitRows = LayoutMode.create('fitRows'); |
||||
|
||||
FitRows.prototype._resetLayout = function() { |
||||
this.x = 0; |
||||
this.y = 0; |
||||
this.maxY = 0; |
||||
}; |
||||
|
||||
FitRows.prototype._getItemLayoutPosition = function( item ) { |
||||
item.getSize(); |
||||
|
||||
// if this element cannot fit in the current row
|
||||
if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) { |
||||
this.x = 0; |
||||
this.y = this.maxY; |
||||
} |
||||
|
||||
var position = { |
||||
x: this.x, |
||||
y: this.y |
||||
}; |
||||
|
||||
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); |
||||
this.x += item.size.outerWidth; |
||||
|
||||
return position; |
||||
}; |
||||
|
||||
FitRows.prototype._getContainerSize = function() { |
||||
return { height: this.maxY }; |
||||
}; |
||||
|
||||
return FitRows; |
||||
|
||||
} |
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'../layout-mode' |
||||
], |
||||
fitRowsDefinition ); |
||||
} else { |
||||
// browser global
|
||||
fitRowsDefinition( |
||||
window.Isotope.LayoutMode |
||||
); |
||||
} |
||||
|
||||
})( window ); |
||||
@ -0,0 +1,76 @@
|
||||
/*! |
||||
* Masonry layout mode |
||||
* sub-classes Masonry |
||||
* http://masonry.desandro.com
|
||||
*/ |
||||
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) { |
||||
for ( var prop in b ) { |
||||
a[ prop ] = b[ prop ]; |
||||
} |
||||
return a; |
||||
} |
||||
|
||||
// -------------------------- masonryDefinition -------------------------- //
|
||||
|
||||
// used for AMD definition and requires
|
||||
function masonryDefinition( LayoutMode, Masonry ) { |
||||
// create an Outlayer layout class
|
||||
var MasonryMode = LayoutMode.create('masonry'); |
||||
|
||||
// save on to these methods
|
||||
var _getElementOffset = MasonryMode.prototype._getElementOffset; |
||||
var layout = MasonryMode.prototype.layout; |
||||
var _getMeasurement = MasonryMode.prototype._getMeasurement; |
||||
|
||||
// sub-class Masonry
|
||||
extend( MasonryMode.prototype, Masonry.prototype ); |
||||
|
||||
// set back, as it was overwritten by Masonry
|
||||
MasonryMode.prototype._getElementOffset = _getElementOffset; |
||||
MasonryMode.prototype.layout = layout; |
||||
MasonryMode.prototype._getMeasurement = _getMeasurement; |
||||
|
||||
var measureColumns = MasonryMode.prototype.measureColumns; |
||||
MasonryMode.prototype.measureColumns = function() { |
||||
// set items, used if measuring first item
|
||||
this.items = this.isotope.filteredItems; |
||||
measureColumns.call( this ); |
||||
}; |
||||
|
||||
// HACK copy over isOriginLeft/Top options
|
||||
var _manageStamp = MasonryMode.prototype._manageStamp; |
||||
MasonryMode.prototype._manageStamp = function() { |
||||
this.options.isOriginLeft = this.isotope.options.isOriginLeft; |
||||
this.options.isOriginTop = this.isotope.options.isOriginTop; |
||||
_manageStamp.apply( this, arguments ); |
||||
}; |
||||
|
||||
return MasonryMode; |
||||
} |
||||
|
||||
// -------------------------- transport -------------------------- //
|
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'../layout-mode', |
||||
'masonry/masonry' |
||||
], |
||||
masonryDefinition ); |
||||
} else { |
||||
// browser global
|
||||
masonryDefinition( |
||||
window.Isotope.LayoutMode, |
||||
window.Masonry |
||||
); |
||||
} |
||||
|
||||
})( window ); |
||||
@ -0,0 +1,45 @@
|
||||
( function( window ) { |
||||
|
||||
'use strict'; |
||||
|
||||
function verticalDefinition( LayoutMode ) { |
||||
|
||||
var Vertical = LayoutMode.create( 'vertical', { |
||||
horizontalAlignment: 0 |
||||
}); |
||||
|
||||
Vertical.prototype._resetLayout = function() { |
||||
this.y = 0; |
||||
}; |
||||
|
||||
Vertical.prototype._getItemLayoutPosition = function( item ) { |
||||
item.getSize(); |
||||
var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) * |
||||
this.options.horizontalAlignment; |
||||
var y = this.y; |
||||
this.y += item.size.outerHeight; |
||||
return { x: x, y: y }; |
||||
}; |
||||
|
||||
Vertical.prototype._getContainerSize = function() { |
||||
return { height: this.y }; |
||||
}; |
||||
|
||||
return Vertical; |
||||
|
||||
} |
||||
|
||||
if ( typeof define === 'function' && define.amd ) { |
||||
// AMD
|
||||
define( [ |
||||
'../layout-mode' |
||||
], |
||||
verticalDefinition ); |
||||
} else { |
||||
// browser global
|
||||
verticalDefinition( |
||||
window.Isotope.LayoutMode |
||||
); |
||||
} |
||||
|
||||
})( window ); |
||||
@ -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 = '<div class="project ' + program + '" ' +
|
||||
'data-year="' + year + '" ' + |
||||
'data-program="' + program + '" ' + |
||||
'data-scale="' + scale + '" ' + |
||||
'data-status="' + status + '" ' + |
||||
'><div class="icon"></div>' +
|
||||
'<p class="title">' + title + '</p>' + |
||||
'</div>'; |
||||
|
||||
return project; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
{ |
||||
"name": "isotope", |
||||
"version": "2.0.0", |
||||
"description": "Filter and sort magical layouts", |
||||
"devDependencies": { |
||||
"grunt": "~0.4.0", |
||||
"grunt-contrib-jshint": "~0.4.1", |
||||
"grunt-contrib-uglify": "~0.1.1", |
||||
"grunt-requirejs": "~0.4.0" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "git://github.com/desandro/isotope.git" |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
{ |
||||
"browser": true, |
||||
"devel": false, |
||||
"strict": true, |
||||
"undef": true, |
||||
"unused": true, |
||||
"predef": { |
||||
"Isotope": false, |
||||
"getText": 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 |
||||
} |
||||
} |
||||
@ -0,0 +1,78 @@
|
||||
( function() { |
||||
|
||||
'use strict'; |
||||
|
||||
var $ = window.jQuery; |
||||
|
||||
// return a string of item ids
|
||||
function getFilteredItemIDs( iso ) { |
||||
var texts = []; |
||||
for ( var i=0, len = iso.filteredItems.length; i < len; i++ ) { |
||||
var item = iso.filteredItems[i]; |
||||
var id = item.element.getAttribute('data-item-id'); |
||||
texts.push( id ); |
||||
} |
||||
return texts.join(','); |
||||
} |
||||
|
||||
/* |
||||
<div data-item-id="1" class="item orange">5</div> |
||||
<div data-item-id="2" class="item">3</div> |
||||
<div data-item-id="3" class="item orange tall">2</div> |
||||
<div data-item-id="4" class="item tall">9</div> |
||||
<div data-item-id="5" class="item">7</div> |
||||
<div data-item-id="6" class="item orange">1</div> |
||||
<div data-item-id="7" class="item orange tall">8</div> |
||||
*/ |
||||
|
||||
test( 'filtering', function() { |
||||
|
||||
var iso = new Isotope( '#filtering', { |
||||
isJQueryFiltering: false, |
||||
transitionDuration: 0 |
||||
}); |
||||
|
||||
var ids = getFilteredItemIDs( iso ); |
||||
equal( ids, '1,2,3,4,5,6,7', 'all items there by default' ); |
||||
|
||||
function checkFilter( filter, expectedIDs, message ) { |
||||
iso.arrange({ filter: filter }); |
||||
ids = getFilteredItemIDs( iso ); |
||||
equal( ids, expectedIDs, message || filter ); |
||||
} |
||||
|
||||
checkFilter( '.orange', '1,3,6,7' ); |
||||
checkFilter( '.tall', '3,4,7' ); |
||||
checkFilter( '.tall.orange', '3,7' ); |
||||
|
||||
iso.arrange({ |
||||
filter: function( elem ) { |
||||
var num = parseInt( getText( elem ), 10 ); |
||||
return num > 5; |
||||
} |
||||
}); |
||||
ids = getFilteredItemIDs( iso ); |
||||
equal( ids, '4,5,7', 'function, text is greater than 5' ); |
||||
|
||||
// filter with jQuery
|
||||
iso.options.isJQueryFiltering = true; |
||||
|
||||
checkFilter( '.orange', '1,3,6,7', '.orange with jQuery' ); |
||||
checkFilter( '.tall', '3,4,7', '.orange with jQuery' ); |
||||
checkFilter( '.tall.orange', '3,7', '.tall.orange with jQuery' ); |
||||
|
||||
checkFilter( ':not(.orange)', '2,4,5' ); |
||||
checkFilter( '.orange:not(.tall)', '1,6' ); |
||||
|
||||
iso.arrange({ |
||||
filter: function() { |
||||
var num = parseInt( $(this).text(), 10 ); |
||||
return num > 5; |
||||
} |
||||
}); |
||||
ids = getFilteredItemIDs( iso ); |
||||
equal( ids, '4,5,7', 'function, text is greater than 5, with jQuery' ); |
||||
|
||||
}); |
||||
|
||||
})(); |
||||
@ -0,0 +1,38 @@
|
||||
( function() { |
||||
|
||||
'use strict'; |
||||
|
||||
test( 'LayoutMode.getSegmentSize', function() { |
||||
|
||||
var iso = new Isotope( '#get-segment-size', { |
||||
layoutMode: 'cellsByRow', |
||||
itemSelector: '.item', |
||||
cellsByRow: { |
||||
columnWidth: 17, |
||||
rowHeight: 23 |
||||
} |
||||
}); |
||||
|
||||
var cellsByRow = iso.modes.cellsByRow; |
||||
equal( cellsByRow.columnWidth, 17, 'explicit columnWidth option set' ); |
||||
equal( cellsByRow.rowHeight, 23, 'explicit rowHeight option set' ); |
||||
|
||||
// set element sizing
|
||||
iso.options.cellsByRow.columnWidth = '.grid-sizer'; |
||||
iso.options.cellsByRow.rowHeight = '.grid-sizer'; |
||||
cellsByRow.getColumnWidth(); |
||||
cellsByRow.getRowHeight(); |
||||
equal( cellsByRow.columnWidth, 57, 'element sizing columnWidth' ); |
||||
equal( cellsByRow.rowHeight, 47, 'element sizing rowHeight' ); |
||||
|
||||
// default to first item
|
||||
delete iso.options.cellsByRow.columnWidth; |
||||
delete iso.options.cellsByRow.rowHeight; |
||||
cellsByRow.getColumnWidth(); |
||||
cellsByRow.getRowHeight(); |
||||
equal( cellsByRow.columnWidth, 60, 'first item columnWidth' ); |
||||
equal( cellsByRow.rowHeight, 30, 'first item rowHeight' ); |
||||
|
||||
}); |
||||
|
||||
})(); |
||||
@ -0,0 +1,24 @@
|
||||
test( 'getSortData', function() { |
||||
|
||||
'use strict'; |
||||
|
||||
var iso = new Isotope( '#get-sort-data', { |
||||
layoutMode: 'fitRows', |
||||
getSortData: { |
||||
ninjaTurtle: '[data-ninja-turtle]', |
||||
fruit: 'span.fruit', |
||||
b: 'b parseFloat', |
||||
i: 'i parseInt', |
||||
bbroke: 'b foobar' |
||||
} |
||||
}); |
||||
|
||||
var item = iso.items[0]; |
||||
|
||||
equal( item.sortData.ninjaTurtle, 'leonardo', '[data-attr] shorthand' ); |
||||
equal( item.sortData.fruit, 'watermelon', 'query selector shorthand' ); |
||||
equal( item.sortData.b, 3.14, 'parseFloat parser' ); |
||||
equal( item.sortData.i, 42, 'parseInt parser' ); |
||||
equal( item.sortData.bbroke, '3.14', 'default nonparser' ); |
||||
|
||||
}); |
||||
@ -0,0 +1,19 @@
|
||||
( function() { |
||||
|
||||
'use strict'; |
||||
|
||||
// ----- default layout mode ----- //
|
||||
Isotope.defaults.layoutMode = 'fitRows'; |
||||
|
||||
// ----- getText ----- //
|
||||
var docElem = document.documentElement; |
||||
|
||||
window.getText = docElem.textContent ? |
||||
function( elem ) { |
||||
return elem.textContent; |
||||
} : |
||||
function( elem ) { |
||||
return elem.innerText; |
||||
}; |
||||
|
||||
})(); |
||||
@ -0,0 +1,125 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
|
||||
<title>Isotope tests</title> |
||||
|
||||
<link rel="stylesheet" href="tests.css" /> |
||||
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" /> |
||||
|
||||
<script src="../bower_components/qunit/qunit/qunit.js"></script> |
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script> |
||||
<script src="../bower_components/eventie/eventie.js"></script> |
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script> |
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script> |
||||
<script src="../bower_components/get-size/get-size.js"></script> |
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script> |
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script> |
||||
<script src="../bower_components/outlayer/item.js"></script> |
||||
<script src="../bower_components/outlayer/outlayer.js"></script> |
||||
<script src="../bower_components/masonry/masonry.js"></script> |
||||
|
||||
<script src="../bower_components/jquery/jquery.js"></script> |
||||
|
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/layout-mode.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
<script src="../js/layout-modes/masonry.js"></script> |
||||
|
||||
<script src="../bower_components/isotope-cells-by-row/cells-by-row.js"></script> |
||||
|
||||
<script src="helpers.js"></script> |
||||
<script src="sorting.js"></script> |
||||
<script src="get-sort-data.js"></script> |
||||
<script src="filtering.js"></script> |
||||
<script src="layout-complete.js"></script> |
||||
<script src="get-segment-size.js"></script> |
||||
<script src="masonry-measure-columns.js"></script> |
||||
<script src="masonry-stamp.js"></script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>Isotope tests</h1> |
||||
|
||||
<div id="qunit"></div> |
||||
|
||||
<h2>Sorting</h2> |
||||
|
||||
<div id="sorting1" class="container"> |
||||
<div class="item"><b>B</b><i>4</i></div> |
||||
<div class="item"><b>B</b><i>2</i></div> |
||||
<div class="item"><b>A</b><i>4</i></div> |
||||
<div class="item"><b>A</b><i>1</i></div> |
||||
<div class="item"><b>B</b><i>1</i></div> |
||||
<div class="item"><b>A</b><i>3</i></div> |
||||
<div class="item"><b>A</b><i>2</i></div> |
||||
</div> |
||||
|
||||
<h2>getSortData</h2> |
||||
|
||||
<div id="get-sort-data" class="container"> |
||||
<div class="item" data-ninja-turtle="leonardo"> |
||||
<span class="fruit">watermelon</span> |
||||
<b>3.14</b> |
||||
<i>42</i> |
||||
</div> |
||||
</div> |
||||
|
||||
<h2>Filtering</h2> |
||||
|
||||
<div id="filtering" class="container"> |
||||
<div data-item-id="1" class="item orange">5</div> |
||||
<div data-item-id="2" class="item">3</div> |
||||
<div data-item-id="3" class="item orange tall">2</div> |
||||
<div data-item-id="4" class="item tall">9</div> |
||||
<div data-item-id="5" class="item">7</div> |
||||
<div data-item-id="6" class="item orange">1</div> |
||||
<div data-item-id="7" class="item orange tall">8</div> |
||||
</div> |
||||
|
||||
<h2>layoutComplete</h2> |
||||
|
||||
<div id="layout-complete" class="container"> |
||||
<div class="item a1 b1">a1 b1</div> |
||||
<div class="item a2 b1">a2 b1</div> |
||||
<div class="item a3 b1">a3 b1</div> |
||||
<div class="item a1 b2">a1 b2</div> |
||||
<div class="item a2 b2">a2 b2</div> |
||||
<div class="item a3 b2">a3 b2</div> |
||||
<div class="item a1 b3">a1 b3</div> |
||||
<div class="item a2 b3">a2 b3</div> |
||||
<div class="item a3 b3">a3 b3</div> |
||||
</div> |
||||
|
||||
<h2>LayoutMode.getSegmentSize</h2> |
||||
|
||||
<div id="get-segment-size" class="container"> |
||||
<div class="grid-sizer"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
<h2>Masonry</h2> |
||||
|
||||
<div id="masonry-measure-columns" class="container"> |
||||
<div class="grid-sizer"></div> |
||||
<div class="item a">a</div> |
||||
<div class="item b">b</div> |
||||
<div class="item c">c</div> |
||||
</div> |
||||
|
||||
<h2>Masonry stamp</h2> |
||||
|
||||
<div id="masonry-stamp" class="container"> |
||||
<div class="stamp stamp1"></div> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
<div class="item"></div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,73 @@
|
||||
test( 'layoutComplete', function() { |
||||
|
||||
'use strict'; |
||||
|
||||
var iso = new Isotope( '#layout-complete', { |
||||
layoutMode: 'fitRows', |
||||
transitionDuration: '0.1s' |
||||
}); |
||||
|
||||
var tests = [ |
||||
function() { |
||||
iso.once( 'layoutComplete', function() { |
||||
ok( true, 'layoutComplete after some were filtered' ); |
||||
next(); |
||||
}); |
||||
|
||||
iso.arrange({ |
||||
filter: '.a1' |
||||
}); |
||||
}, |
||||
function() { |
||||
iso.once( 'layoutComplete', function() { |
||||
ok( true, 'after some revealed, some hidden, some same' ); |
||||
next(); |
||||
}); |
||||
|
||||
iso.arrange({ |
||||
filter: '.b2' |
||||
}); |
||||
}, |
||||
function() { |
||||
iso.once( 'layoutComplete', function() { |
||||
ok( true, 'after random sort' ); |
||||
next(); |
||||
}); |
||||
|
||||
iso.arrange({ |
||||
sortBy: 'random' |
||||
}); |
||||
}, |
||||
function() { |
||||
iso.once( 'layoutComplete', function() { |
||||
ok( true, 'after layout mid-way thru transition' ); |
||||
next(); |
||||
}); |
||||
|
||||
iso.arrange({ |
||||
filter: '.a2', |
||||
transitionDuration: '0.6s' |
||||
}); |
||||
|
||||
setTimeout( function() { |
||||
iso.arrange({ |
||||
filter: '.b2' |
||||
}); |
||||
}, 300 ); |
||||
} |
||||
]; |
||||
|
||||
function next() { |
||||
if ( tests.length ) { |
||||
var nextTest = tests.shift(); |
||||
// HACK for consecutive layoutComplete calls
|
||||
setTimeout( nextTest ); |
||||
} else { |
||||
start(); |
||||
} |
||||
} |
||||
|
||||
next(); |
||||
stop(); |
||||
|
||||
}); |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue