Browse Source

rename project as isotope

this makes name change #3
pull/14/head
David DeSandro 14 years ago
parent
commit
861e894a21
  1. 28
      _layouts/elements.html
  2. 14
      css/style.css
  3. 40
      src/jquery.isotope.js
  4. 2
      src/jquery.ui.widget.js

28
_layouts/elements.html

@ -94,7 +94,7 @@
<script src="../src/mini-modernizr.js"></script> <script src="../src/mini-modernizr.js"></script>
<script src="../src/jquery.opto-transform.js"></script> <script src="../src/jquery.opto-transform.js"></script>
<script src="../src/jquery.smartresize.js"></script> <script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.ionize.js"></script> <script src="../src/jquery.isotope.js"></script>
<script src="../src/jquery.ui.widget.js"></script> <script src="../src/jquery.ui.widget.js"></script>
<script src="../js/fake-element.js"></script> <script src="../js/fake-element.js"></script>
<script> <script>
@ -118,7 +118,7 @@
// console.log('starting') // console.log('starting')
// console.time('initializeMe'); // console.time('initializeMe');
$demo.ionize({ $demo.isotope({
itemSelector : '.element', itemSelector : '.element',
// layoutMode : 'clearFloat', // layoutMode : 'clearFloat',
masonry : { masonry : {
@ -164,7 +164,7 @@
filterName = filterName === '.show-all' ? '*' : filterName; filterName = filterName === '.show-all' ? '*' : filterName;
// var filterTest = 'filter ' + filterName; // var filterTest = 'filter ' + filterName;
// console.time( filterTest ); // console.time( filterTest );
$demo.ionize({ filter: filterName }) $demo.isotope({ filter: filterName })
// console.timeEnd( filterTest ); // console.timeEnd( filterTest );
return false; return false;
}); });
@ -176,7 +176,7 @@
asc = $this.parents('.sort').hasClass('asc'); asc = $this.parents('.sort').hasClass('asc');
// var sortTest = 'sort ' + sortName + ' ' + direction; // var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest ); // console.time( sortTest );
$demo.ionize({ $demo.isotope({
sortBy : sortName, sortBy : sortName,
sortAscending : asc sortAscending : asc
}); });
@ -188,7 +188,7 @@
$demo.find('.element').live('click', function(){ $demo.find('.element').live('click', function(){
$(this).toggleClass('large'); $(this).toggleClass('large');
// console.time('relayout'); // console.time('relayout');
$demo.ionize('reLayout'); $demo.isotope('reLayout');
// console.timeEnd('relayout'); // console.timeEnd('relayout');
}); });
@ -196,7 +196,7 @@
$('#toggle-sizes').find('a').click(function(){ $('#toggle-sizes').find('a').click(function(){
$demo $demo
.toggleClass('variable-sizes') .toggleClass('variable-sizes')
.ionize('reLayout'); .isotope('reLayout');
return false; return false;
}); });
@ -215,11 +215,11 @@
{ width: 'auto' }; { width: 'auto' };
$demo.addClass('no-transition').css( style ); $demo.addClass('no-transition').css( style );
setTimeout(function(){ setTimeout(function(){
$demo.removeClass('no-transition').ionize({ layoutMode : mode }); $demo.removeClass('no-transition').isotope({ layoutMode : mode });
}, 100 ) }, 100 )
} else { } else {
// go ahead and apply new layout // go ahead and apply new layout
$demo.ionize({ layoutMode : mode }); $demo.isotope({ layoutMode : mode });
} }
@ -235,10 +235,10 @@
newEls += fakeElement.create(); newEls += fakeElement.create();
} }
var $newEls = $( newEls ) var $newEls = $( newEls )
// $demo.append( $newEls ).ionize( 'appendToLayout', $newEls ); // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls );
$demo.ionize( 'insert', $newEls ); $demo.isotope( 'insert', $newEls );
// $demo.append( $newEls ).ionize( 'addAtoms', $newEls ).ionize(); // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
// $demo.ionize() // $demo.isotope()
// console.log( next ) // console.log( next )
return false; return false;
@ -251,13 +251,13 @@
newEls += fakeElement.create(); newEls += fakeElement.create();
} }
var $newEls = $( newEls ) var $newEls = $( newEls )
$demo.append( $newEls ).ionize( 'appended', $newEls ); $demo.append( $newEls ).isotope( 'appended', $newEls );
return false; return false;
}); });
$('#shuffle a').click(function(){ $('#shuffle a').click(function(){
$demo.ionize('shuffle'); $demo.isotope('shuffle');
return false; return false;
}); });

14
css/style.css

@ -152,8 +152,8 @@ a {
height: 340px; height: 340px;
} }
.wrap.ionize, .wrap.isotope,
.ionize .element { .isotope .element {
-webkit-transition-duration: 1.0s; -webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s; -moz-transition-duration: 1.0s;
/* -o-transition-duration: 1.0s;*/ /* -o-transition-duration: 1.0s;*/
@ -161,8 +161,8 @@ a {
} }
.wrap.ionize.no-transition, .wrap.isotope.no-transition,
.ionize.no-transition .element { .isotope.no-transition .element {
-webkit-transition-duration: 0s; -webkit-transition-duration: 0s;
-moz-transition-duration: 0s; -moz-transition-duration: 0s;
/* -o-transition-duration: 0s;*/ /* -o-transition-duration: 0s;*/
@ -170,14 +170,14 @@ a {
} }
.wrap.ionize { .wrap.isotope {
-webkit-transition-property: height, width; -webkit-transition-property: height, width;
-moz-transition-property: height, width; -moz-transition-property: height, width;
/* -o-transition-property: height, width;*/ /* -o-transition-property: height, width;*/
transition-property: height, width; transition-property: height, width;
} }
.ionize .element { .isotope .element {
-webkit-transition-property: -webkit-transform, opacity; -webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity; -moz-transition-property: -moz-transform, opacity;
/* -o-transition-property: -o-transform, opacity;*/ /* -o-transition-property: -o-transform, opacity;*/
@ -192,7 +192,7 @@ a {
list-style: none; list-style: none;
} }
.ionize-hidden { .isotope-hidden {
pointer-events: none; pointer-events: none;
} }

40
src/jquery.ionize.js → src/jquery.isotope.js

@ -5,22 +5,22 @@
(function( $, undefined ) { (function( $, undefined ) {
// our "Widget" object constructor // our "Widget" object constructor
$.Ionizer = function( options, element ){ $.Isotope = function( options, element ){
this.element = $( element ); this.element = $( element );
this._create( options ); this._create( options );
this._init(); this._init();
}; };
$.Ionizer.prototype = { $.Isotope.prototype = {
options : { options : {
// columnWidth : 150, // columnWidth : 150,
resizeable: true, resizeable: true,
layoutMode : 'masonry', layoutMode : 'masonry',
masonrySingleMode : false, masonrySingleMode : false,
containerClass : 'ionize', containerClass : 'isotope',
hiddenClass : 'ionize-hidden', hiddenClass : 'isotope-hidden',
hiddenStyle : Modernizr.csstransforms && !$.browser.opera ? hiddenStyle : Modernizr.csstransforms && !$.browser.opera ?
{ opacity : 0, scale : 0.001 } : { opacity : 0, scale : 0.001 } :
{ opacity : 0 }, { opacity : 0 },
@ -97,7 +97,7 @@
this.posLeft = Math.round( $cursor.position().left ); this.posLeft = Math.round( $cursor.position().left );
$cursor.remove(); $cursor.remove();
// add ionize class first time around // add isotope class first time around
var instance = this; var instance = this;
setTimeout( function() { setTimeout( function() {
instance.element.addClass( instance.options.containerClass ); instance.element.addClass( instance.options.containerClass );
@ -109,7 +109,7 @@
// bind resize method // bind resize method
if ( this.options.resizeable ) { if ( this.options.resizeable ) {
$(window).bind('smartresize.ionize', function() { instance.element.ionize('resize') } ); $(window).bind('smartresize.isotope', function() { instance.element.isotope('resize') } );
} }
}, },
@ -192,7 +192,7 @@
sortData[ key ] = getSortData[ key ]( $this, instance ); sortData[ key ] = getSortData[ key ]( $this, instance );
} }
// apply sort data to $element // apply sort data to $element
$this.data( 'ionize-sort-data', sortData ); $this.data( 'isotope-sort-data', sortData );
// increment element count // increment element count
// console.log( instance.elemCount ) // console.log( instance.elemCount )
instance.elemCount ++; instance.elemCount ++;
@ -239,7 +239,7 @@
var instance = this, var instance = this,
getSorter = function( elem ) { getSorter = function( elem ) {
return $(elem).data('ionize-sort-data')[ instance.options.sortBy ]; return $(elem).data('isotope-sort-data')[ instance.options.sortBy ];
}, },
sortDir = this.options.sortAscending ? 1 : -1; sortDir = this.options.sortAscending ? 1 : -1;
sortFn = function( alpha, beta ) { sortFn = function( alpha, beta ) {
@ -306,7 +306,7 @@
// are we animating the layout arrangement? // are we animating the layout arrangement?
// use plugin-ish syntax for css or animate // use plugin-ish syntax for css or animate
var styleFn = ( this.applyStyleFnName === 'animate' && !$.data( this.element, 'ionize' ) ) ? var styleFn = ( this.applyStyleFnName === 'animate' && !$.data( this.element, 'isotope' ) ) ?
'css' : this.applyStyleFnName, 'css' : this.applyStyleFnName,
animOpts = this.options.animationOptions; animOpts = this.options.animationOptions;
@ -345,7 +345,7 @@
// ====================== Convenience methods ====================== // ====================== Convenience methods ======================
// adds a jQuery object of items to a ionize container // adds a jQuery object of items to a isotope container
addAtoms : function( $content, callback ) { addAtoms : function( $content, callback ) {
var $newAtoms = this._filterFind( $content, this.options.itemSelector ); var $newAtoms = this._filterFind( $content, this.options.itemSelector );
this._setupAtoms( $newAtoms ); this._setupAtoms( $newAtoms );
@ -440,11 +440,11 @@
width: 'auto', width: 'auto',
height: 'auto' height: 'auto'
}) })
.unbind('.ionize') .unbind('.isotope')
.removeClass( this.options.containerClass ) .removeClass( this.options.containerClass )
.removeData('ionize'); .removeData('isotope');
$(window).unbind('.ionize'); $(window).unbind('.isotope');
}, },
@ -458,7 +458,7 @@
// if colW == 0, back out before divide by zero // if colW == 0, back out before divide by zero
if ( !this[ namespace ][ measure ] ) { if ( !this[ namespace ][ measure ] ) {
$.error( measure + 'calculated to be zero. Stopping Ionize plugin before divide by zero. Check that the width of first child inside the ionize container is not zero.') $.error( measure + 'calculated to be zero. Stopping Ionize plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.')
return this; return this;
} }
this[ size ] = this.element[ size ](); this[ size ] = this.element[ size ]();
@ -477,7 +477,7 @@
// ====================== Masonry ====================== // ====================== Masonry ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_masonryPlaceBrick : function( $brick, setCount, setY ) { _masonryPlaceBrick : function( $brick, setCount, setY ) {
// here, `this` refers to a child element or "brick" // here, `this` refers to a child element or "brick"
@ -576,7 +576,7 @@
// ====================== clearFloat ====================== // ====================== clearFloat ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_clearFloatLayout : function( $elems ) { _clearFloatLayout : function( $elems ) {
var instance = this; var instance = this;
@ -626,7 +626,7 @@
// ====================== cellsByRow ====================== // ====================== cellsByRow ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_cellsByRowReset : function() { _cellsByRowReset : function() {
this.cellsByRow = {}; this.cellsByRow = {};
@ -669,7 +669,7 @@
// ====================== masonryHorizontal ====================== // ====================== masonryHorizontal ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_masonryHorizontalPlaceBrick : function( $brick, setCount, setX ) { _masonryHorizontalPlaceBrick : function( $brick, setCount, setX ) {
// here, `this` refers to a child element or "brick" // here, `this` refers to a child element or "brick"
@ -765,7 +765,7 @@
// ====================== fitColumns ====================== // ====================== fitColumns ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_fitColumnsReset : function() { _fitColumnsReset : function() {
this.fitColumns = { this.fitColumns = {
@ -817,7 +817,7 @@
// ====================== cellsByColumn ====================== // ====================== cellsByColumn ======================
$.extend( $.Ionizer.prototype, { $.extend( $.Isotope.prototype, {
_cellsByColumnReset : function() { _cellsByColumnReset : function() {
this.cellsByColumn = {}; this.cellsByColumn = {};

2
src/jquery.ui.widget.js vendored

@ -59,6 +59,6 @@
}; };
$.widget.bridge( 'ionize', $.Ionizer ); $.widget.bridge( 'isotope', $.Isotope );
})( jQuery ); })( jQuery );

Loading…
Cancel
Save