Browse Source

rename the whole shebang as "Ionize"

pull/14/head
David DeSandro 14 years ago
parent
commit
4644c55784
  1. 2
      README.mdown
  2. 2
      _config.yml
  3. 26
      _layouts/elements.html
  4. 2
      _posts/docs/2010-12-01-introduction.mdown
  5. 10
      css/style.css
  6. 58
      src/jquery.ionize.js
  7. 2
      src/jquery.ui.widget.js
  8. 4
      src/mini-modernizr.js

2
README.mdown

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

2
_config.yml

@ -1,4 +1,4 @@
site_name: Molequul
site_name: Ionize
permalink: /:categories/:title.html
elements:

26
_layouts/elements.html

@ -91,7 +91,7 @@
<script src="../src/mini-modernizr.js"></script>
<script src="../src/jquery.opto-transform.js"></script>
<script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.molequul.js"></script>
<script src="../src/jquery.ionize.js"></script>
<script src="../src/jquery.ui.widget.js"></script>
<script src="../js/fake-element.js"></script>
<script>
@ -115,7 +115,7 @@
// console.log('starting')
console.time('initializeMe');
$demo.molequul({
$demo.ionize({
itemSelector : '.element',
layoutMode : '{% for layout in page.layout_options limit:1 %}{{ layout }}{% endfor %}',
masonry : {
@ -161,7 +161,7 @@
filterName = filterName === '.show-all' ? '*' : filterName;
// var filterTest = 'filter ' + filterName;
// console.time( filterTest );
$demo.molequul({ filter: filterName })
$demo.ionize({ filter: filterName })
// console.timeEnd( filterTest );
return false;
});
@ -173,7 +173,7 @@
asc = $this.parents('.sort').hasClass('asc');
// var sortTest = 'sort ' + sortName + ' ' + direction;
// console.time( sortTest );
$demo.molequul({
$demo.ionize({
sortBy : sortName,
sortAscending : asc
});
@ -185,7 +185,7 @@
$demo.find('.element').live('click', function(){
$(this).toggleClass('large');
// console.time('relayout');
$demo.molequul('reLayout');
$demo.ionize('reLayout');
// console.timeEnd('relayout');
});
@ -193,7 +193,7 @@
$('#toggle-sizes').find('a').click(function(){
$demo
.toggleClass('variable-sizes')
.molequul('reLayout');
.ionize('reLayout');
return false;
});
@ -201,7 +201,7 @@
// change layout
$('#layouts a').click(function(){
var mode = $(this).attr('href').slice(1);
$demo.molequul({ layoutMode : mode });
$demo.ionize({ layoutMode : mode });
return false;
});
@ -214,10 +214,10 @@
newEls += fakeElement.create();
}
var $newEls = $( newEls )
// $demo.append( $newEls ).molequul( 'appendToLayout', $newEls );
$demo.molequul( 'insert', $newEls );
// $demo.append( $newEls ).molequul( 'addAtoms', $newEls ).molequul();
// $demo.molequul()
// $demo.append( $newEls ).ionize( 'appendToLayout', $newEls );
$demo.ionize( 'insert', $newEls );
// $demo.append( $newEls ).ionize( 'addAtoms', $newEls ).ionize();
// $demo.ionize()
// console.log( next )
return false;
@ -230,13 +230,13 @@
newEls += fakeElement.create();
}
var $newEls = $( newEls )
$demo.append( $newEls ).molequul( 'appended', $newEls );
$demo.append( $newEls ).ionize( 'appended', $newEls );
return false;
});
$('#shuffle a').click(function(){
$demo.molequul('shuffle');
$demo.ionize('shuffle');
return false;
});

2
_posts/docs/2010-12-01-introduction.mdown

@ -6,4 +6,4 @@ layout: doc
---
Molequul
Ionize

10
css/style.css

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

58
src/jquery.molequul.js → src/jquery.ionize.js

@ -1,26 +1,26 @@
/*************************************************
** jQuery Molequul version 0.1
** jQuery Ionize version 0.1
** Copyright David DeSandro
**************************************************/
(function( $, undefined ) {
// our "Widget" object constructor
$.Molequul = function( options, element ){
$.Ionizer = function( options, element ){
this.element = $( element );
this._create( options );
this._init();
};
$.Molequul.prototype = {
$.Ionizer.prototype = {
options : {
// columnWidth : 150,
resizeable: true,
layoutMode : 'masonry',
masonrySingleMode : false,
containerClass : 'molequul',
hiddenClass : 'molequul-hidden',
containerClass : 'ionize',
hiddenClass : 'ionize-hidden',
hiddenStyle : Modernizr.csstransforms && !$.browser.opera ?
{ opacity : 0, scale : 0.001 } :
{ opacity : 0 },
@ -97,7 +97,7 @@
this.posLeft = Math.round( $cursor.position().left );
$cursor.remove();
// add molequul class first time around
// add ionize class first time around
var instance = this;
setTimeout( function() {
instance.element.addClass( instance.options.containerClass );
@ -109,7 +109,7 @@
// bind resize method
if ( this.options.resizeable ) {
$(window).bind('smartresize.molequul', function() { instance.element.molequul('resize') } );
$(window).bind('smartresize.ionize', function() { instance.element.ionize('resize') } );
}
},
@ -192,7 +192,7 @@
sortData[ key ] = getSortData[ key ]( $this, instance );
}
// apply sort data to $element
$this.data( 'molequul-sort-data', sortData );
$this.data( 'ionize-sort-data', sortData );
// increment element count
// console.log( instance.elemCount )
instance.elemCount ++;
@ -239,7 +239,7 @@
var instance = this,
getSorter = function( elem ) {
return $(elem).data('molequul-sort-data')[ instance.options.sortBy ];
return $(elem).data('ionize-sort-data')[ instance.options.sortBy ];
},
sortDir = this.options.sortAscending ? 1 : -1;
sortFn = function( alpha, beta ) {
@ -306,7 +306,7 @@
// are we animating the layout arrangement?
// use plugin-ish syntax for css or animate
var styleFn = ( this.applyStyleFnName === 'animate' && !$.data( this.element, 'molequul' ) ) ?
var styleFn = ( this.applyStyleFnName === 'animate' && !$.data( this.element, 'ionize' ) ) ?
'css' : this.applyStyleFnName,
animOpts = this.options.animationOptions;
@ -345,7 +345,7 @@
// ====================== Convenience methods ======================
// adds a jQuery object of items to a molequul container
// adds a jQuery object of items to a ionize container
addAtoms : function( $content, callback ) {
var $newAtoms = this._filterFind( $content, this.options.itemSelector );
this._setupAtoms( $newAtoms );
@ -440,11 +440,11 @@
width: 'auto',
height: 'auto'
})
.unbind('.molequul')
.unbind('.ionize')
.removeClass( this.options.containerClass )
.removeData('molequul');
.removeData('ionize');
$(window).unbind('.molequul');
$(window).unbind('.ionize');
},
@ -453,7 +453,7 @@
// if colW == 0, back out before divide by zero
if ( !this[ namespace ].columnWidth ) {
window.console && console.error('Column width 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.');
window.console && console.error('Column width 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.');
return this;
}
this.width = this.element.width();
@ -469,7 +469,7 @@
// 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.');
window.console && console.error('Row height 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.');
return this;
}
this.height = this.element.height();
@ -488,7 +488,7 @@
// ====================== Masonry ======================
$.Molequul.prototype._masonryPlaceBrick = function( $brick, setCount, setY ) {
$.Ionizer.prototype._masonryPlaceBrick = function( $brick, setCount, setY ) {
// here, `this` refers to a child element or "brick"
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, setY ),
@ -517,7 +517,7 @@
};
$.Molequul.prototype._masonryLayout = function( $elems ) {
$.Ionizer.prototype._masonryLayout = function( $elems ) {
var instance = this;
$elems.each(function(){
var $this = $(this),
@ -549,7 +549,7 @@
};
// reset
$.Molequul.prototype._masonryReset = function() {
$.Ionizer.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
@ -564,7 +564,7 @@
$.Molequul.prototype._masonryResize = function() {
$.Ionizer.prototype._masonryResize = function() {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getCols('masonry');
@ -576,7 +576,7 @@
return this;
};
$.Molequul.prototype._masonryGetContainerSize = function() {
$.Ionizer.prototype._masonryGetContainerSize = function() {
var containerHeight = Math.max.apply( Math, this.masonry.colYs ) - this.posTop;
return { height: containerHeight };
};
@ -584,7 +584,7 @@
// ====================== clearFloat ======================
$.Molequul.prototype._clearFloatLayout = function( $elems ) {
$.Ionizer.prototype._clearFloatLayout = function( $elems ) {
var instance = this;
return $elems.each( function() {
var $this = $(this),
@ -609,7 +609,7 @@
});
};
$.Molequul.prototype._clearFloatReset = function() {
$.Ionizer.prototype._clearFloatReset = function() {
this.clearFloat = {
x : 0,
y : 0,
@ -618,11 +618,11 @@
return this;
};
$.Molequul.prototype._clearFloatGetContainerSize = function () {
$.Ionizer.prototype._clearFloatGetContainerSize = function () {
return { height : this.clearFloat.height };
};
$.Molequul.prototype._clearFloatResize = function() {
$.Ionizer.prototype._clearFloatResize = function() {
this.width = this.element.width();
return this.reLayout()
};
@ -630,7 +630,7 @@
// ====================== cellsByRow ======================
$.extend( $.Molequul.prototype, {
$.extend( $.Ionizer.prototype, {
_cellsByRowReset : function() {
this.cellsByRow = {};
@ -673,7 +673,7 @@
// ====================== masonryHorizontal ======================
$.extend( $.Molequul.prototype, {
$.extend( $.Ionizer.prototype, {
_masonryHorizontalPlaceBrick : function( $brick, setCount, setX ) {
// here, `this` refers to a child element or "brick"
@ -769,7 +769,7 @@
// ====================== fitColumns ======================
$.extend( $.Molequul.prototype, {
$.extend( $.Ionizer.prototype, {
_fitColumnsReset : function() {
this.fitColumns = {
@ -821,7 +821,7 @@
// ====================== cellsByColumn ======================
$.extend( $.Molequul.prototype, {
$.extend( $.Ionizer.prototype, {
_cellsByColumnReset : function() {
this.cellsByColumn = {};

2
src/jquery.ui.widget.js vendored

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

4
src/mini-modernizr.js

@ -41,7 +41,7 @@ var getStyleProperty = (function(){
// <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting
/*!
* Modernizr v1.6ish: miniModernizr for Molequul
* Modernizr v1.6ish: miniModernizr for Ionize
* http://www.modernizr.com
*
* Developed by:
@ -77,7 +77,7 @@ var getStyleProperty = (function(){
window.Modernizr = window.Modernizr || (function(window,doc,undefined){
var version = '1.6ish: miniModernizr for Molequul',
var version = '1.6ish: miniModernizr for Ionize',
miniModernizr = {},
vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '),
classes = [],

Loading…
Cancel
Save