diff --git a/src/jquery.molequul-widget.js b/src/jquery.molequul-widget.js index 9abbc18..2100bf0 100644 --- a/src/jquery.molequul-widget.js +++ b/src/jquery.molequul-widget.js @@ -1,20 +1,148 @@ (function( $, undefined ) { // our "Widget" object constructor + + var MolequulDefaults = { + columnWidth : 150, + resizeable: true, + layoutMode : 'masonry', + masonrySingleMode : false, + containerClass : 'molequul', + hiddenClass : 'molequul-hidden', + hiddenStyle : { + opacity : 0 + }, + visibleStyle : { + opacity : 1 + }, + animationEngine : 'best-available', + animationOptions: { + queue: false + }, + sortBy : 'original-order', + sortDir : 1 + + }; + var Molequul = function( options, element ){ - this.options = options; - this.element = element; + this.elem = element; + this.$elem = $( element ); - this._init(); + this._create( options ); + this._init(); }; Molequul.prototype = { + + options : { + columnWidth : 150, + resizeable: true, + layoutMode : 'masonry', + masonrySingleMode : false, + containerClass : 'molequul', + hiddenClass : 'molequul-hidden', + hiddenStyle : { + opacity : 0 + }, + visibleStyle : { + opacity : 1 + }, + animationEngine : 'best-available', + animationOptions: { + queue: false + }, + sortBy : 'original-order', + sortDir : 1 + + }, + + _filterFind: function( selector ) { + return selector ? this.find( selector ).add( this.find( selector ) ) : this; + }, + + // sets up widget + _create: function( options ) { + + this.options = $.extend( true, this.options, options ); + + this.atoms = {}; + this.isNew = {}; + this.styleQueue = []; + this.elemCount = 0; + // need to get atoms + this.atoms.$all = this.$elem.children().molequul('_filterFind', this.options.itemSelector ); + + console.log( 'all atoms', this.atoms.$all.length ) + + this.$elem.css({ + overflow : 'hidden', + position : 'relative' + }); + + var jQueryAnimation = false; + + // get applyStyleFnName + switch ( this.options.animationEngine.toLowerCase().replace( /[ _\-]/g, '') ) { + case 'none' : + this.applyStyleFnName = 'css'; + break; + case 'jquery' : + this.applyStyleFnName = 'animate'; + jQueryAnimation = true; + break; + case 'bestavailable' : + default : + this.applyStyleFnName = Modernizr.csstransitions ? 'css' : 'animate'; + } + + this.usingTransforms = Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation; + + this.positionFn = this.usingTransforms ? Molequul.translate : Molequul.positionAbs; + + // sorting + var originalOrderSorter = { + 'original-order' : function( $elem ) { + return props.elemCount; + } + }; + this.options.getSortData = $.extend( originalOrderSorter, this.options.getSortData ); + + this.atoms.$all.molequul( '_setupAtoms' ); + + + // get top left position of where the bricks should be + var $cursor = $( document.createElement('div') ); + this.$elem.prepend( $cursor ); + this.posTop = Math.round( $cursor.position().top ); + this.posLeft = Math.round( $cursor.position().left ); + $cursor.remove(); + + // add molequul class first time around + var $container = this.$elem, + containerClass = this.options.containerClass; + setTimeout( function() { + $container.addClass( containerClass ); + }, 0 ); + + // console.log( this.options.layoutMode ) + + // do any layout-specific setup + this.$elem.molequul( '_' + this.options.layoutMode + 'Setup' ); + + // save data + // this.data( 'molequul', props ); + + }, // _init fires when your instance is first created // (from the constructor above), and when you // attempt to initialize the widget again (by the bridge) // after it has already been initialized. _init: function(){ + + // this.options = $.extend( true, Molequul.options, this.options ); + + console.log( this ) // init code }, @@ -40,13 +168,15 @@ return this; // make sure to return the instance! }, - publicFn: function(){ // notice no underscore - return "public method"; - }, - _privateFn: function(){ - return "private method"; - } + + // publicFn: function(){ // notice no underscore + // return "public method"; + // }, + // + // _privateFn: function(){ + // return "private method"; + // } }; $.widget.bridge( 'molequul', Molequul );