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

Add horizontal demo and cellsByColumn

pull/14/head
David DeSandro 14 years ago
parent
b801948bb0
commit
e21ae8354b
7 changed files with 369 additions and 262 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. 4
      README.md
  2. 13
      README.mdown
  3. 337
      _layouts/elements.html
  4. 1
      _posts/examples/2010-12-16-elements-partial.html
  5. 16
      _posts/examples/2010-12-19-elements-partial-horizontal.html
  6. 204
      css/style.css
  7. 56
      src/jquery.molequul.js

4
README.md
Unescape View File

@ -1,4 +0,0 @@
Molequul
========
An exquisite filtering, sorting, layout jQuery plugin.

13
README.mdown
Unescape View File

@ -0,0 +1,13 @@
Molequul
========
**An exquisite filtering, sorting, layout jQuery plugin.**
Features
--------
Issues
------
+ Must reset `width: auto` or `height: auto` when switching from vertical to horizontal layouts

337
_layouts/elements.html
Unescape View File

@ -4,265 +4,84 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<style media="screen"> <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
body {
padding: 20px; </head>
font-family: 'Helvetica Neue', Arial, sans-serif; <body{% if page.body_class %} class="{{ page.body_class}}"{% endif %}>
font-size: 13px;
line-height: 1.5em; <section id="options">
background: #1D1D1D;
color: #FFF; <h1>{{ page.title }}</h1>
}
<h3>Filters</h3>
a {
color: #FB4; <ul id="filters">
text-decoration: none; <li><a href="#show-all">show all</a></li>
} <li><a href="#metalloid">metalloid</a></li>
<li>
.wrap { <a href="#metal">metal</a>
background: transparent; <ul>
border: 4px solid #FFF; <li><a href="#alkali">alkali</a></li>
padding: 20px; <li><a href="#alkaline-earth">alkaline-earth</a></li>
} <li><a href="#lanthanoid">lanthanoid</a></li>
<li><a href="#actinoid">actinoid</a></li>
.element { <li><a href="#transition">transition</a></li>
width: 110px; <li><a href="#post-transition">post-transition</a></li>
height: 110px; </ul>
margin: 5px; </li>
float: left; <li>
background: white; <a href="#nonmetal">nonmetal</a>
overflow: hidden; <ul>
position: relative; <li><a href="#other">other</a></li>
color: #222; <li><a href="#halogen">halogen</a></li>
border-top-right-radius: 1.2em; <li><a href="#noble-gas">noble-gas</a></li>
} </ul>
</li>
.xray .element { </ul>
border-width: 5px;
border-style: solid;
width: 100px; <h3>Sort Ascending</h3>
height: 100px;
background-color: hsla( 0, 0%, 14%, 0.8 ) !important; <ul id="sort-asc" class="sort asc options">
} <li><a href="#original-order">original-order</a></li>
<li><a href="#name">name</a></li>
.element.alkali { background-color: hsl( 0, 100%, 50%); } <li><a href="#symbol">symbol</a></li>
.element.alkaline-earth { background-color: hsl( 36, 100%, 50%); } <li><a href="#number">number</a></li>
.element.lanthanoid { background-color: hsl( 72, 100%, 50%); } <li><a href="#weight">weight</a></li>
.element.actinoid { background-color: hsl( 108, 100%, 50%); } <li><a href="#category">category</a></li>
.element.transition { background-color: hsl( 144, 100%, 50%); } </ul>
.element.post-transition { background-color: hsl( 180, 100%, 50%); }
.element.metalloid { background-color: hsl( 216, 100%, 50%); } <h3>Sort Descending</h3>
.element.other.nonmetal { background-color: hsl( 252, 100%, 50%); }
.element.halogen { background-color: hsl( 288, 100%, 50%); } <ul id="sort-desc" class="sort desc options">
.element.noble-gas { background-color: hsl( 324, 100%, 50%); } <li><a href="#original-order">original-order</a></li>
<li><a href="#name">name</a></li>
<li><a href="#symbol">symbol</a></li>
.xray .element.alkali { color: hsl( 0, 100%, 50%); background-color: inherit; } <li><a href="#number">number</a></li>
.xray .element.alkaline-earth { color: hsl( 36, 100%, 50%); background-color: inherit; } <li><a href="#weight">weight</a></li>
.xray .element.lanthanoid { color: hsl( 72, 100%, 50%); background-color: inherit; } <li><a href="#category">category</a></li>
.xray .element.actinoid { color: hsl( 108, 100%, 50%); background-color: inherit; } </ul>
.xray .element.transition { color: hsl( 144, 100%, 50%); background-color: inherit; }
.xray .element.post-transition { color: hsl( 180, 100%, 50%); background-color: inherit; } <h3>Layouts</h3>
.xray .element.metalloid { color: hsl( 216, 100%, 50%); background-color: inherit; }
.xray .element.other.nonmetal { color: hsl( 252, 100%, 50%); background-color: inherit; }
.xray .element.halogen { color: hsl( 288, 100%, 50%); background-color: inherit; }
.xray .element.noble-gas { color: hsl( 324, 100%, 50%); background-color: inherit; }
.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;
}
.xray .element .symbol {
left: 0.1em;
top: 0.3em;
color: inherit;
}
.xray .element.large .symbol {
font-size: 4.2em;
}
.xray .element.fake {
background-color: hsla( 0, 0%, 25%, 0.8 ) !important;
}
.element.fake .symbol {
color: #000;
}
.xray .element.fake .symbol {
color: inherit;
}
.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;
}
.xray .element .number { color: inherit; }
.variable-sizes .element.width2 { width: 230px; }
.variable-sizes.xray .element.width2 { width: 220px; }
.variable-sizes .element.height2 { height: 230px; }
.variable-sizes.xray .element.height2 { height: 220px; }
.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;
}
.xray .element.large,
.xray .variable-sizes .element.large,
.xray .variable-sizes .element.large.width2,
.xray .variable-sizes .element.large.height2 {
width: 340px;
height: 340px;
}
.wrap.molequul,
.molequul .element {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
/* -o-transition-duration: 1.0s;*/
transition-duration: 1.0s;
}
.wrap.molequul {
-webkit-transition-property: height;
-moz-transition-property: height;
/* -o-transition-property: height;*/
transition-property: height;
}
.molequul .element {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
/* -o-transition-property: -o-transform, opacity;*/
transition-property: transform, opacity;
}
#filters li li,
.options li {
display: inline-block;
margin-right: 0.5em;
list-style: none;
}
.molequul-hidden {
pointer-events: none;
}
</style>
</head>
<body>
<h1>the elements</h1>
<h3>Filters</h3>
<ul id="filters">
<li><a href="#show-all">show all</a></li>
<li><a href="#metalloid">metalloid</a></li>
<li>
<a href="#metal">metal</a>
<ul>
<li><a href="#alkali">alkali</a></li>
<li><a href="#alkaline-earth">alkaline-earth</a></li>
<li><a href="#lanthanoid">lanthanoid</a></li>
<li><a href="#actinoid">actinoid</a></li>
<li><a href="#transition">transition</a></li>
<li><a href="#post-transition">post-transition</a></li>
</ul>
</li>
<li>
<a href="#nonmetal">nonmetal</a>
<ul>
<li><a href="#other">other</a></li>
<li><a href="#halogen">halogen</a></li>
<li><a href="#noble-gas">noble-gas</a></li>
</ul>
</li>
</ul>
<h3>Sort Ascending</h3>
<ul id="sort-asc" class="sort asc options">
<li><a href="#original-order">original-order</a></li>
<li><a href="#name">name</a></li>
<li><a href="#symbol">symbol</a></li>
<li><a href="#number">number</a></li>
<li><a href="#weight">weight</a></li>
<li><a href="#category">category</a></li>
</ul>
<h3>Sort Descending</h3>
<ul id="sort-desc" class="sort desc options">
<li><a href="#original-order">original-order</a></li>
<li><a href="#name">name</a></li>
<li><a href="#symbol">symbol</a></li>
<li><a href="#number">number</a></li>
<li><a href="#weight">weight</a></li>
<li><a href="#category">category</a></li>
</ul>
<h3>Layouts</h3>
<ul id="layouts" class="options"> <ul id="layouts" class="options">
<li><a href="#masonry">masonry</a></li> {% for layout in page.layout_options %}
<li><a href="#clearFloat">clearFloat</a></li> <li><a href="#{{ layout }}">{{ layout }}</a></li>
<li><a href="#cellsByRow">cellsByRow</a></li> {% endfor %}
</ul> </ul>
<h3>Etc</h3> <h3>Etc</h3>
<ul id="etc" class="options"> <ul id="etc" class="options">
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> <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="insert"><a href="#insert">Insert new elements</a></li>
<li id="append"><a href='#append'>Append new elements</a></li> <li id="append"><a href='#append'>Append new elements</a></li>
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li> <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
</ul> </ul>
</section> <!-- #options -->
{{ content }} {{ content }}
@ -298,7 +117,7 @@
console.time('initializeMe'); console.time('initializeMe');
$demo.molequul({ $demo.molequul({
itemSelector : '.element', itemSelector : '.element',
// layoutMode : 'clearFloat', layoutMode : '{{ page.layout_options limit:1 }}',
masonry : { masonry : {
columnWidth : 120 columnWidth : 120
}, },
@ -306,6 +125,10 @@
columnWidth : 240, columnWidth : 240,
rowHeight : 240 rowHeight : 240
}, },
cellsByColumn : {
columnWidth : 240,
rowHeight : 240
},
animationEngine : $.browser.opera ? 'jquery' : 'best-available', animationEngine : $.browser.opera ? 'jquery' : 'best-available',
// animationEngine : 'jquery', // animationEngine : 'jquery',
getSortData : { getSortData : {
@ -372,7 +195,7 @@
}); });
// toggle masonry / clearFloat layout // change layout
$('#layouts a').click(function(){ $('#layouts a').click(function(){
var mode = $(this).attr('href').slice(1); var mode = $(this).attr('href').slice(1);
$demo.molequul({ layoutMode : mode }); $demo.molequul({ layoutMode : mode });

1
_posts/examples/2010-12-16-elements-partial.html
Unescape View File

@ -5,7 +5,6 @@ category: examples
--- ---
<div id="demo" class="wrap"> <div id="demo" class="wrap">
{% for element in site.elements_partial %} {% for element in site.elements_partial %}
{% include element-partial.html %} {% include element-partial.html %}

16
_posts/examples/2010-12-19-elements-partial-horizontal.html
Unescape View File

@ -0,0 +1,16 @@
---
title: Elements Partial Horizontal
layout: elements
category: examples
body_class: horizontal
layout_options: cellsByColumn
---
<div id="demo" class="wrap">
{% for element in site.elements_partial %}
{% include element-partial.html %}
{% endfor %}
</div>

204
css/style.css
Unescape View File

@ -0,0 +1,204 @@
html {
height: 100%;
}
body {
padding: 20px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
line-height: 1.5em;
background: #1D1D1D;
color: #FFF;
height: 100%;
}
a {
color: #FB4;
text-decoration: none;
}
.wrap {
background: transparent;
border: 4px solid #FFF;
padding: 20px;
}
.element {
width: 110px;
height: 110px;
margin: 5px;
float: left;
background: white;
overflow: hidden;
position: relative;
color: #222;
border-top-right-radius: 1.2em;
}
.xray .element {
border-width: 5px;
border-style: solid;
width: 100px;
height: 100px;
background-color: hsla( 0, 0%, 14%, 0.8 ) !important;
}
.element.alkali { background-color: hsl( 0, 100%, 50%); }
.element.alkaline-earth { background-color: hsl( 36, 100%, 50%); }
.element.lanthanoid { background-color: hsl( 72, 100%, 50%); }
.element.actinoid { background-color: hsl( 108, 100%, 50%); }
.element.transition { background-color: hsl( 144, 100%, 50%); }
.element.post-transition { background-color: hsl( 180, 100%, 50%); }
.element.metalloid { background-color: hsl( 216, 100%, 50%); }
.element.other.nonmetal { background-color: hsl( 252, 100%, 50%); }
.element.halogen { background-color: hsl( 288, 100%, 50%); }
.element.noble-gas { background-color: hsl( 324, 100%, 50%); }
.xray .element.alkali { color: hsl( 0, 100%, 50%); background-color: inherit; }
.xray .element.alkaline-earth { color: hsl( 36, 100%, 50%); background-color: inherit; }
.xray .element.lanthanoid { color: hsl( 72, 100%, 50%); background-color: inherit; }
.xray .element.actinoid { color: hsl( 108, 100%, 50%); background-color: inherit; }
.xray .element.transition { color: hsl( 144, 100%, 50%); background-color: inherit; }
.xray .element.post-transition { color: hsl( 180, 100%, 50%); background-color: inherit; }
.xray .element.metalloid { color: hsl( 216, 100%, 50%); background-color: inherit; }
.xray .element.other.nonmetal { color: hsl( 252, 100%, 50%); background-color: inherit; }
.xray .element.halogen { color: hsl( 288, 100%, 50%); background-color: inherit; }
.xray .element.noble-gas { color: hsl( 324, 100%, 50%); background-color: inherit; }
.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;
}
.xray .element .symbol {
left: 0.1em;
top: 0.3em;
color: inherit;
}
.xray .element.large .symbol {
font-size: 4.2em;
}
.xray .element.fake {
background-color: hsla( 0, 0%, 25%, 0.8 ) !important;
}
.element.fake .symbol {
color: #000;
}
.xray .element.fake .symbol {
color: inherit;
}
.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;
}
.xray .element .number { color: inherit; }
.variable-sizes .element.width2 { width: 230px; }
.variable-sizes.xray .element.width2 { width: 220px; }
.variable-sizes .element.height2 { height: 230px; }
.variable-sizes.xray .element.height2 { height: 220px; }
.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;
}
.xray .element.large,
.xray .variable-sizes .element.large,
.xray .variable-sizes .element.large.width2,
.xray .variable-sizes .element.large.height2 {
width: 340px;
height: 340px;
}
.wrap.molequul,
.molequul .element {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
/* -o-transition-duration: 1.0s;*/
transition-duration: 1.0s;
}
.wrap.molequul {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
/* -o-transition-property: height, width;*/
transition-property: height, width;
}
.molequul .element {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
/* -o-transition-property: -o-transform, opacity;*/
transition-property: transform, opacity;
}
#filters li li,
.options li {
display: inline-block;
margin-right: 0.5em;
list-style: none;
}
.molequul-hidden {
pointer-events: none;
}
/**** Horizontal ****/
.horizontal #options {
width: 300px;
position: absolute;
left: 20px;
top: 20px;
}
.horizontal .wrap {
height: 80%;
position: relative;
margin-left: 340px;
top: 20px;
}

56
src/jquery.molequul.js
Unescape View File

@ -461,6 +461,22 @@
return this; return this;
},
_getRows : function( namespace ) {
this[ namespace ].rowHeight = ( this.options[ namespace ] && this.options[ namespace ].rowHeight ) || this.$allAtoms.outerHeight(true);
// if colW == 0, back out before divide by zero
if ( !this[ namespace ].rowHeight ) {
window.console && console.error('Row height calculated to be zero. Stopping Molequul plugin before divide by zero. Check that the width of first child inside the molequul container is not zero.');
return this;
}
this.height = this.element.height();
this[ namespace ].rows = Math.floor( this.height / this[ namespace ].rowHeight ) ;
this[ namespace ].rows = Math.max( this[ namespace ].rows, 1 );
return this;
} }
}; };
@ -653,6 +669,46 @@
} }
}); });
$.extend( $.Molequul.prototype, {
_cellsByColumnReset : function() {
this.cellsByColumn = {};
this._getRows('cellsByColumn');
this.cellsByColumn.columnWidth = this.options.cellsByColumn.columnWidth || this.$allAtoms.outerHeight(true);
return this;
},
_cellsByColumnLayout : function( $elems ) {
var instance = this,
rows = this.cellsByColumn.rows;
this.cellsByColumn.atomsLen = $elems.length;
$elems.each( function( i ){
var $this = $(this),
x = ( ~~( i / rows ) + 0.5 ) * instance.cellsByColumn.columnWidth
- $this.outerWidth(true) / 2 + instance.posLeft,
y = ( i % rows + 0.5 ) * instance.cellsByColumn.rowHeight
- $this.outerHeight(true) / 2 + instance.posTop;
instance._pushPosition( $this, x, y );
});
return this;
},
_cellsByColumnGetContainerSize : function() {
return { width : Math.ceil( this.cellsByColumn.atomsLen / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth + this.posLeft };
},
_cellsByColumnResize : function() {
var prevRows = this.cellsByColumn.rows;
this._getRows('cellsByColumn');
// if column count has changed, do a new column cound
if ( this.cellsByColumn.rows !== prevRows ) {
this.reLayout();
}
return this;
}
});

Write Preview
Loading…
Cancel
Save