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

add fitColumns and horizontal layout modes

pull/563/head
David DeSandro 11 years ago
parent
4767bcf3d1
commit
e7fb40fee0
4 changed files with 327 additions and 1 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. 215
      examples/horizontal-layout-modes.html
  2. 60
      layout-modes/fit-columns.js
  3. 50
      layout-modes/horizontal.js
  4. 3
      notes.md

215
examples/horizontal-layout-modes.html
Unescape View File

@ -0,0 +1,215 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>filter sort</title>
<link rel="stylesheet" href="examples.css" />
<style>
body, html {
height: 100%;
}
#container {
position: relative;
height: 70%;
margin-bottom: 20px;
}
</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-columns.js"></script>
<script src="../layout-modes/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
},
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');
console.log( key, value );
iso.options[ key ] = value;
iso.layout();
});
});
function getText( elem ) {
return elem.textContent || elem.innerText;
}
</script>
</body>
</html>

60
layout-modes/fit-columns.js
Unescape View File

@ -0,0 +1,60 @@
( function( window ) {
'use strict';
function fitColumnsDefinition( layoutMode ) {
var FitColumns = layoutMode.create('fitColumns');
FitColumns.prototype._resetLayout = function() {
this.x = 0;
this.y = 0;
this.maxX = 0;
};
FitColumns.prototype._getItemLayoutPosition = function( item ) {
item.getSize();
// if this element cannot fit in the current row
if ( this.y !== 0 && item.size.outerHeight + this.y > this.isotope.size.innerHeight ) {
this.y = 0;
this.x = this.maxX;
}
var position = {
x: this.x,
y: this.y
};
this.maxX = Math.max( this.maxX, this.x + item.size.outerWidth );
this.y += item.size.outerHeight;
return position;
};
FitColumns.prototype._getContainerSize = function() {
return { width: this.maxX };
};
FitColumns.prototype.resize = function() {
this.isotope.resizeVertical();
};
return FitColumns;
}
if ( typeof define === 'function' && define.amd ) {
// AMD
define( [
'../layout-mode'
],
fitColumnsDefinition );
} else {
// browser global
fitColumnsDefinition(
window.Isotope.layoutMode
);
}
})( window );

50
layout-modes/horizontal.js
Unescape View File

@ -0,0 +1,50 @@
( function( window ) {
'use strict';
function horizontalDefinition( layoutMode ) {
var Horizontal = layoutMode.create( 'horizontal', {
verticalAlignment: 0
});
Horizontal.prototype._resetLayout = function() {
this.x = 0;
};
Horizontal.prototype._getItemLayoutPosition = function( item ) {
item.getSize();
var y = ( this.isotope.size.innerHeight - item.size.outerHeight ) *
this.options.verticalAlignment;
var x = this.x;
this.x += item.size.outerWidth;
console.log( x, y );
return { x: x, y: y };
};
Horizontal.prototype._getContainerSize = function() {
return { width: this.x };
};
Horizontal.prototype.resize = function() {
this.isotope.resizeVertical();
};
return Horizontal;
}
if ( typeof define === 'function' && define.amd ) {
// AMD
define( [
'../layout-mode'
],
horizontalDefinition );
} else {
// browser global
horizontalDefinition(
window.Isotope.layoutMode
);
}
})( window );

3
notes.md
Unescape View File

@ -1,5 +1,7 @@
## to do ## to do
add horizontal layout modes
isOriginTop / isOriginLeft integration isOriginTop / isOriginLeft integration
manageStamp manageStamp
@ -23,4 +25,3 @@ sortAscending for object
## bugs ## bugs
click _filter: some_, then while transitioning _filter: all_. The some will be hidden when transition ends
Write Preview
Loading…
Cancel
Save