Layout class
Outlayer is a base layout class for layout libraries like Packery and Masonry
Outlayer layouts work with a container element and children item elements.
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> ... </div>
Create a layout class with Outlayer.create()
var Layout = Outlayer.create( namespace ); // for example var Masonry = Outlayer.create('masonry');
namespace{String} should be camelCased- returns
LayoutClass{Function}
Create a new layout class. namespace is used for jQuery plugin, and for declarative initialization.
The Layout inherits from Outlayer.prototype.
var elem = document.querySelector('#selector');
var msnry = new Masonry( elem, {
// set options...
columnWidth: 200
});
Layouts work with Items, accessible as Layout.Item. See Item API.
An Outlayer layout class can be initialized via HTML, by setting a class of .js-namespace on the element. Options can be set via a data-namespace-options attribution. For example:
<!-- var Masonry = Outlayer.create('masonry') --> <div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'> ... </div>
The declarative attributes and class will be dashed. i.e. Outlayer.create('myNiceLayout') will use js-my-nice-layout the class and data-my-nice-layout-options as the options attribute.
Get a layout instance from an element.
var myMasonry = Masonry.data( document.querySelector('#container') );
The layout class also works as jQuery plugin.
// create Masonry layout class, namespace will be the jQuery method var Masonry = Outlayer.create('masonry'); // rock some jQuery $( function() { // .masonry() to initialize var $container = $('#container').masonry({ // options... }); // methods are available by passing a string as first parameter $container.masonry( 'reveal', elems ); });
To use Outlayer with RequireJS, you'll need to set some config.
Set baseUrl to bower_components and set a path config for all your application code.
requirejs.config({ baseUrl: 'bower_components', paths: { app: '../' } }); requirejs( [ 'outlayer/outlayer', 'app/my-component.js' ], function( Outlayer, myComp ) { new Outlayer( /*...*/ ) });
Or set a path config for all Outlayer dependencies.
requirejs.config({ paths: { eventie: 'bower_components/eventie', 'doc-ready': 'bower_components/doc-ready', eventEmitter: 'bower_components/eventEmitter', 'get-style-property': 'bower_components/get-style-property', 'get-size': 'bower_components/get-size', 'matches-selector': 'bower_components/matches-selector' } });
Outlayer is released under the MIT license.