playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add vertical layout mode; add filter + sort demo

pull/563/head
David DeSandro 11 years ago
parent
d5ff000547
commit
8cb6565c7a
4 changed files with 266 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      examples/cells-by-row.html
  2. 203
      examples/filter-sort.html
  3. 45
      layout-modes/vertical.js
  4. 14
      notes.md

10
examples/cells-by-row.html
Unescape View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>masonry</title> <title>cellsByRow</title>
<link rel="stylesheet" href="examples.css" /> <link rel="stylesheet" href="examples.css" />
<style> <style>
@ -22,7 +22,7 @@
</head> </head>
<body> <body>
<h1>sorting</h1> <h1>cellsByRow</h1>
<div id="options"> <div id="options">
<h2>Sort</h2> <h2>Sort</h2>
@ -160,6 +160,7 @@
<script src="../isotope.js"></script> <script src="../isotope.js"></script>
<script src="../layout-modes/fit-rows.js"></script> <script src="../layout-modes/fit-rows.js"></script>
<script src="../layout-modes/cells-by-row.js"></script> <script src="../layout-modes/cells-by-row.js"></script>
<script src="../layout-modes/vertical.js"></script>
<script> <script>
docReady( function() { docReady( function() {
@ -168,10 +169,15 @@ docReady( function() {
// sortBy: 'symbol', // sortBy: 'symbol',
// filter: '.metal', // filter: '.metal',
layoutMode: 'cellsByRow', layoutMode: 'cellsByRow',
isOriginLeft: false,
isOriginTop: false,
cellsByRow: { cellsByRow: {
columnWidth: 200, columnWidth: 200,
rowHeight: 150 rowHeight: 150
}, },
vertical: {
horizontalAlignment: 0.5
},
getSortData: { getSortData: {
number: '.number parseInt', number: '.number parseInt',

203
examples/filter-sort.html
Unescape View File

@ -0,0 +1,203 @@
<!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>
</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="../item.js"></script>
<script src="../layout-mode.js"></script>
<script src="../isotope.js"></script>
<script src="../layout-modes/fit-rows.js"></script>
<script>
docReady( function() {
var container = document.querySelector('#container');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitRows',
transitionDuration: '0.8s',
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.layout();
});
});
function getText( elem ) {
return elem.textContent || elem.innerText;
}
</script>
</body>
</html>

45
layout-modes/vertical.js
Unescape View File

@ -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 );

14
notes.md
Unescape View File

@ -1,3 +1,11 @@
## to do
isOriginTop / isOriginLeft integration
manageStamp
## tests
sortBy an array sortBy an array
sortBy the history sortBy the history
@ -13,8 +21,6 @@ sortAscending
sortAscending for object sortAscending for object
--- ## bugs
set default options somewhere
new layout mode comes with those options by default click _filter: some_, then while transitioning _filter: all_. The some will be hidden when transition ends
Write Preview
Loading…
Cancel
Save