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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      README.md
  2. 13
      README.mdown
  3. 211
      _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

211
_layouts/elements.html
Unescape View File

@ -4,198 +4,14 @@
<meta charset="utf-8" />
<title>{{ page.title }}</title>
<style media="screen">
body {
padding: 20px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
line-height: 1.5em;
background: #1D1D1D;
color: #FFF;
}
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;
}
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
.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;
}
</head>
<body{% if page.body_class %} class="{{ page.body_class}}"{% endif %}>
.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; }
<section id="options">
.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>
<h1>{{ page.title }}</h1>
<h3>Filters</h3>
@ -249,9 +65,9 @@
<h3>Layouts</h3>
<ul id="layouts" class="options">
<li><a href="#masonry">masonry</a></li>
<li><a href="#clearFloat">clearFloat</a></li>
<li><a href="#cellsByRow">cellsByRow</a></li>
{% for layout in page.layout_options %}
<li><a href="#{{ layout }}">{{ layout }}</a></li>
{% endfor %}
</ul>
<h3>Etc</h3>
@ -263,6 +79,9 @@
<li id="append"><a href='#append'>Append new elements</a></li>
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
</ul>
</section> <!-- #options -->
{{ content }}
@ -298,7 +117,7 @@
console.time('initializeMe');
$demo.molequul({
itemSelector : '.element',
// layoutMode : 'clearFloat',
layoutMode : '{{ page.layout_options limit:1 }}',
masonry : {
columnWidth : 120
},
@ -306,6 +125,10 @@
columnWidth : 240,
rowHeight : 240
},
cellsByColumn : {
columnWidth : 240,
rowHeight : 240
},
animationEngine : $.browser.opera ? 'jquery' : 'best-available',
// animationEngine : 'jquery',
getSortData : {
@ -372,7 +195,7 @@
});
// toggle masonry / clearFloat layout
// change layout
$('#layouts a').click(function(){
var mode = $(this).attr('href').slice(1);
$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">
{% for element in site.elements_partial %}
{% 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;
},
_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