Showing preview only (256K chars total). Download the full file or copy to clipboard to get everything.
Repository: metafizzy/isotope
Branch: master
Commit: 1dd4cd186a59
Files: 55
Total size: 241.8 KB
Directory structure:
gitextract_aix0tdoj/
├── .eslintrc.js
├── .github/
│ ├── contributing.md
│ └── issue_template.md
├── .gitignore
├── .jshintrc
├── README.md
├── bin/
│ ├── .eslintrc.js
│ ├── bundle-js.js
│ ├── lint-json.js
│ └── version.js
├── bower.json
├── dist/
│ └── isotope.pkgd.js
├── js/
│ ├── isotope.js
│ ├── item.js
│ ├── layout-mode.js
│ └── layout-modes/
│ ├── fit-rows.js
│ ├── masonry.js
│ └── vertical.js
├── package.json
├── sandbox/
│ ├── basic.html
│ ├── bottom-up.html
│ ├── browserify/
│ │ ├── browserify.html
│ │ ├── jq-main.js
│ │ └── main.js
│ ├── cells-by-row.html
│ ├── combination-filters-inclusive.html
│ ├── combination-filters.html
│ ├── filter-sort.html
│ ├── fitrows.html
│ ├── fluid.html
│ ├── horizontal-layout-modes.html
│ ├── insert.html
│ ├── jquery.html
│ ├── js/
│ │ └── require-js.js
│ ├── masonry-horizontal.html
│ ├── masonry.html
│ ├── require-js.html
│ ├── right-to-left.html
│ ├── sandbox.css
│ ├── sorting.html
│ ├── stamps.html
│ ├── transition-bug.html
│ └── v3-release-gif2.html
└── test/
├── .jshintrc
├── index.html
├── tests.css
└── unit/
├── arrange-complete.js
├── filtering.js
├── fit-rows.js
├── get-segment-size.js
├── helpers.js
├── masonry-measure-columns.js
├── masonry-stamp.js
├── sort-data.js
└── sorting.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.js
================================================
/* eslint-env node */
module.exports = {
plugins: [ 'metafizzy' ],
extends: 'plugin:metafizzy/browser',
env: {
browser: true,
commonjs: true,
},
parserOptions: {
ecmaVersion: 5,
},
globals: {
Isotope: 'readonly',
QUnit: 'readonly',
define: 'readonly',
},
rules: {
'no-var': 'off',
'prefer-spread': 'off',
strict: 'off',
},
ignorePatterns: [
'sandbox/browserify/bundle.js',
],
};
================================================
FILE: .github/contributing.md
================================================
## Submitting issues
### Reduced test case required
All bug reports and problem issues require a [**reduced test case**](https://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen examples](https://codepen.io/desandro/tag/isotope-docs) from [the docs](https://isotope.metafizzy.co).
**CodePens**
+ [Filtering](https://codepen.io/desandro/pen/Ehgij)
+ [Sorting](https://codepen.io/desandro/pen/lzCqe)
+ [Filtering and sorting](https://codepen.io/desandro/pen/nFrte)
+ [Masonry layout](https://codepen.io/desandro/pen/mEinp)
+ [Fluid Masonry layout](https://codepen.io/desandro/pen/mIkhq)
**Test cases**
+ A reduced test case clearly demonstrates the bug or issue.
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
+ A link to your production site is **not** a reduced test case.
Providing a reduced test case is the best way to get your issue addressed. Without a reduced test case, your issue may be closed.
## Pull requests
Contributions are welcome!
Your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. [The MIT license](https://choosealicense.com/licenses/mit/) or [public domain unlicense](https://choosealicense.com/licenses/unlicense/) are permissive, and allow integration of your patch into Isotope as part of a commercial product.
Do not edit `dist/` files. I'll update these after your PR has been merged.
### Development setup / Sandbox
After a fresh git clone, to run the examples in sandbox, you will first need to run (from the root directory):
```shell
$ npm install bower
$ bower install
```
================================================
FILE: .github/issue_template.md
================================================
<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by forking any one of the CodePen examples from the docs. See guidelines link above. -->
**Test case:** https://codepen.io/desandro/pen/mEinp
================================================
FILE: .gitignore
================================================
_site
isotope-site.zip
components/
bower_components/
node_modules/
sandbox/**/bundle.js
================================================
FILE: .jshintrc
================================================
{
"browser": true,
"devel": false,
"strict": true,
"undef": true,
"unused": true
}
================================================
FILE: README.md
================================================
# Isotope
_Filter & sort magical layouts_
See [isotope.metafizzy.co](https://isotope.metafizzy.co) for complete docs and demos.
## Install
### Download
+ [isotope.pkgd.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js) un-minified, or
+ [isotope.pkgd.min.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js) minified
### CDN
Link directly to Isotope files on [unpkg](https://unpkg.com).
``` html
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
```
### Package managers
npm: `npm install isotope-layout --save`
Bower: `bower install isotope-layout --save`
## License
### Commercial license
If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Isotope Commercial License at [isotope.metafizzy.co](https://isotope.metafizzy.co/#commercial-license)
### Open source license
If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Isotope under the terms of the GPLv3.
[Read more about Isotope's license](https://isotope.metafizzy.co/license.html).
## Initialize
With jQuery
``` js
$('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
```
With vanilla JavaScript
``` js
// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
```
With HTML
Add a `data-isotope` attribute to your element. Options can be set in JSON in the value.
``` html
<div class="grid"
data-isotope='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
```
* * *
By [Metafizzy 🌈🐻](https://metafizzy.co), 2010–2020
================================================
FILE: bin/.eslintrc.js
================================================
module.exports = {
plugins: [ 'metafizzy' ],
extends: 'plugin:metafizzy/node',
};
================================================
FILE: bin/bundle-js.js
================================================
const fs = require('fs');
const requirejs = require('requirejs');
// get banner
let isotopeJsSrc = fs.readFileSync( 'js/isotope.js', 'utf8' );
let banner = isotopeJsSrc.split(' */')[0] + ' */\n\n';
banner = banner.replace( 'Isotope', 'Isotope PACKAGED' );
let options = {
out: 'dist/isotope.pkgd.js',
baseUrl: 'bower_components',
optimize: 'none',
include: [
'jquery-bridget/jquery-bridget',
'isotope-layout/js/isotope',
],
paths: {
'isotope-layout': '../',
jquery: 'empty:',
},
};
requirejs.optimize(
options,
function() {
let pkgdSrc = fs.readFileSync( options.out, 'utf8' );
let definitionRE = /define\(\s*'isotope-layout\/js\/isotope'(.|\n)+\],/;
// remove named module
pkgdSrc.replace( definitionRE, function( definition ) {
// remove named module
return definition.replace( "'isotope-layout/js/isotope',", '' )
// use explicit file paths, './item' -> 'isotope-layout/js/item'
.replace( /'.\//g, "'isotope-layout/js/" );
} );
pkgdSrc = banner + pkgdSrc;
fs.writeFileSync( options.out, pkgdSrc );
},
function( err ) {
throw new Error( err );
},
);
================================================
FILE: bin/lint-json.js
================================================
require('../package.json');
require('../bower.json');
================================================
FILE: bin/version.js
================================================
const fs = require('fs');
const version = require('../package.json').version;
const file = 'js/isotope.js';
let src = fs.readFileSync( file, 'utf8' );
src = src.replace( /Isotope v\d+\.\d+\.\d+/, `Isotope v${version}` );
fs.writeFileSync( file, src, 'utf8' );
================================================
FILE: bower.json
================================================
{
"name": "isotope-layout",
"description": "Filter and sort magical layouts",
"main": "js/isotope.js",
"dependencies": {
"desandro-matches-selector": "^2.0.0",
"fizzy-ui-utils": "^2.0.4",
"get-size": "^2.0.0",
"masonry-layout": "^4.1.0",
"outlayer": "^2.1.0"
},
"devDependencies": {
"jquery": "^3.3.1",
"jquery-bridget": "^2",
"qunit": "^2.6.0"
},
"ignore": [
"test/",
"sandbox/",
"**/.*",
"package.json",
"notes.md",
"node_modules",
"bower_components",
"test",
"tests"
],
"homepage": "https://isotope.metafizzy.co",
"authors": [
"David DeSandro"
],
"moduleType": [
"amd",
"globals",
"node"
],
"keywords": [
"filter",
"sort",
"masonry",
"jquery-plugin"
],
"license": "GPL-3.0"
}
================================================
FILE: dist/isotope.pkgd.js
================================================
/*!
* Isotope PACKAGED v3.0.6
*
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
*
* https://isotope.metafizzy.co
* Copyright 2010-2018 Metafizzy
*/
/**
* Bridget makes jQuery widgets
* v2.0.1
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
( function( window, factory ) {
// universal module definition
/*jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
return factory( window, jQuery );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('jquery')
);
} else {
// browser global
window.jQueryBridget = factory(
window,
window.jQuery
);
}
}( window, function factory( window, jQuery ) {
'use strict';
// ----- utils ----- //
var arraySlice = Array.prototype.slice;
// helper function for logging errors
// $.error breaks jQuery chaining
var console = window.console;
var logError = typeof console == 'undefined' ? function() {} :
function( message ) {
console.error( message );
};
// ----- jQueryBridget ----- //
function jQueryBridget( namespace, PluginClass, $ ) {
$ = $ || jQuery || window.jQuery;
if ( !$ ) {
return;
}
// add option method -> $().plugin('option', {...})
if ( !PluginClass.prototype.option ) {
// option setter
PluginClass.prototype.option = function( opts ) {
// bail out if not an object
if ( !$.isPlainObject( opts ) ){
return;
}
this.options = $.extend( true, this.options, opts );
};
}
// make jQuery plugin
$.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
if ( typeof arg0 == 'string' ) {
// method call $().plugin( 'methodName', { options } )
// shift arguments by 1
var args = arraySlice.call( arguments, 1 );
return methodCall( this, arg0, args );
}
// just $().plugin({ options })
plainCall( this, arg0 );
return this;
};
// $().plugin('methodName')
function methodCall( $elems, methodName, args ) {
var returnValue;
var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
$elems.each( function( i, elem ) {
// get instance
var instance = $.data( elem, namespace );
if ( !instance ) {
logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
pluginMethodStr );
return;
}
var method = instance[ methodName ];
if ( !method || methodName.charAt(0) == '_' ) {
logError( pluginMethodStr + ' is not a valid method' );
return;
}
// apply method, get return value
var value = method.apply( instance, args );
// set return value if value is returned, use only first value
returnValue = returnValue === undefined ? value : returnValue;
});
return returnValue !== undefined ? returnValue : $elems;
}
function plainCall( $elems, options ) {
$elems.each( function( i, elem ) {
var instance = $.data( elem, namespace );
if ( instance ) {
// set options & init
instance.option( options );
instance._init();
} else {
// initialize new instance
instance = new PluginClass( elem, options );
$.data( elem, namespace, instance );
}
});
}
updateJQuery( $ );
}
// ----- updateJQuery ----- //
// set $.bridget for v1 backwards compatibility
function updateJQuery( $ ) {
if ( !$ || ( $ && $.bridget ) ) {
return;
}
$.bridget = jQueryBridget;
}
updateJQuery( jQuery || window.jQuery );
// ----- ----- //
return jQueryBridget;
}));
/**
* EvEmitter v1.1.0
* Lil' event emitter
* MIT License
*/
/* jshint unused: true, undef: true, strict: true */
( function( global, factory ) {
// universal module definition
/* jshint strict: false */ /* globals define, module, window */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'ev-emitter/ev-emitter',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory();
} else {
// Browser globals
global.EvEmitter = factory();
}
}( typeof window != 'undefined' ? window : this, function() {
function EvEmitter() {}
var proto = EvEmitter.prototype;
proto.on = function( eventName, listener ) {
if ( !eventName || !listener ) {
return;
}
// set events hash
var events = this._events = this._events || {};
// set listeners array
var listeners = events[ eventName ] = events[ eventName ] || [];
// only add once
if ( listeners.indexOf( listener ) == -1 ) {
listeners.push( listener );
}
return this;
};
proto.once = function( eventName, listener ) {
if ( !eventName || !listener ) {
return;
}
// add event
this.on( eventName, listener );
// set once flag
// set onceEvents hash
var onceEvents = this._onceEvents = this._onceEvents || {};
// set onceListeners object
var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
// set flag
onceListeners[ listener ] = true;
return this;
};
proto.off = function( eventName, listener ) {
var listeners = this._events && this._events[ eventName ];
if ( !listeners || !listeners.length ) {
return;
}
var index = listeners.indexOf( listener );
if ( index != -1 ) {
listeners.splice( index, 1 );
}
return this;
};
proto.emitEvent = function( eventName, args ) {
var listeners = this._events && this._events[ eventName ];
if ( !listeners || !listeners.length ) {
return;
}
// copy over to avoid interference if .off() in listener
listeners = listeners.slice(0);
args = args || [];
// once stuff
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
for ( var i=0; i < listeners.length; i++ ) {
var listener = listeners[i]
var isOnce = onceListeners && onceListeners[ listener ];
if ( isOnce ) {
// remove listener
// remove before trigger to prevent recursion
this.off( eventName, listener );
// unset once flag
delete onceListeners[ listener ];
}
// trigger listener
listener.apply( this, args );
}
return this;
};
proto.allOff = function() {
delete this._events;
delete this._onceEvents;
};
return EvEmitter;
}));
/*!
* getSize v2.0.3
* measure size of elements
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
/* globals console: false */
( function( window, factory ) {
/* jshint strict: false */ /* globals define, module */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'get-size/get-size',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.getSize = factory();
}
})( window, function factory() {
'use strict';
// -------------------------- helpers -------------------------- //
// get a number from a string, not a percentage
function getStyleSize( value ) {
var num = parseFloat( value );
// not a percent like '100%', and a number
var isValid = value.indexOf('%') == -1 && !isNaN( num );
return isValid && num;
}
function noop() {}
var logError = typeof console == 'undefined' ? noop :
function( message ) {
console.error( message );
};
// -------------------------- measurements -------------------------- //
var measurements = [
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginBottom',
'borderLeftWidth',
'borderRightWidth',
'borderTopWidth',
'borderBottomWidth'
];
var measurementsLength = measurements.length;
function getZeroSize() {
var size = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
};
for ( var i=0; i < measurementsLength; i++ ) {
var measurement = measurements[i];
size[ measurement ] = 0;
}
return size;
}
// -------------------------- getStyle -------------------------- //
/**
* getStyle, get style of element, check for Firefox bug
* https://bugzilla.mozilla.org/show_bug.cgi?id=548397
*/
function getStyle( elem ) {
var style = getComputedStyle( elem );
if ( !style ) {
logError( 'Style returned ' + style +
'. Are you running this code in a hidden iframe on Firefox? ' +
'See https://bit.ly/getsizebug1' );
}
return style;
}
// -------------------------- setup -------------------------- //
var isSetup = false;
var isBoxSizeOuter;
/**
* setup
* check isBoxSizerOuter
* do on first getSize() rather than on page load for Firefox bug
*/
function setup() {
// setup once
if ( isSetup ) {
return;
}
isSetup = true;
// -------------------------- box sizing -------------------------- //
/**
* Chrome & Safari measure the outer-width on style.width on border-box elems
* IE11 & Firefox<29 measures the inner-width
*/
var div = document.createElement('div');
div.style.width = '200px';
div.style.padding = '1px 2px 3px 4px';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px 2px 3px 4px';
div.style.boxSizing = 'border-box';
var body = document.body || document.documentElement;
body.appendChild( div );
var style = getStyle( div );
// round value for browser zoom. desandro/masonry#928
isBoxSizeOuter = Math.round( getStyleSize( style.width ) ) == 200;
getSize.isBoxSizeOuter = isBoxSizeOuter;
body.removeChild( div );
}
// -------------------------- getSize -------------------------- //
function getSize( elem ) {
setup();
// use querySeletor if elem is string
if ( typeof elem == 'string' ) {
elem = document.querySelector( elem );
}
// do not proceed on non-objects
if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
return;
}
var style = getStyle( elem );
// if hidden, everything is 0
if ( style.display == 'none' ) {
return getZeroSize();
}
var size = {};
size.width = elem.offsetWidth;
size.height = elem.offsetHeight;
var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
// get all measurements
for ( var i=0; i < measurementsLength; i++ ) {
var measurement = measurements[i];
var value = style[ measurement ];
var num = parseFloat( value );
// any 'auto', 'medium' value will be 0
size[ measurement ] = !isNaN( num ) ? num : 0;
}
var paddingWidth = size.paddingLeft + size.paddingRight;
var paddingHeight = size.paddingTop + size.paddingBottom;
var marginWidth = size.marginLeft + size.marginRight;
var marginHeight = size.marginTop + size.marginBottom;
var borderWidth = size.borderLeftWidth + size.borderRightWidth;
var borderHeight = size.borderTopWidth + size.borderBottomWidth;
var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
// overwrite width and height if we can get it from style
var styleWidth = getStyleSize( style.width );
if ( styleWidth !== false ) {
size.width = styleWidth +
// add padding and border unless it's already including it
( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
}
var styleHeight = getStyleSize( style.height );
if ( styleHeight !== false ) {
size.height = styleHeight +
// add padding and border unless it's already including it
( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
}
size.innerWidth = size.width - ( paddingWidth + borderWidth );
size.innerHeight = size.height - ( paddingHeight + borderHeight );
size.outerWidth = size.width + marginWidth;
size.outerHeight = size.height + marginHeight;
return size;
}
return getSize;
});
/**
* matchesSelector v2.0.2
* matchesSelector( element, '.selector' )
* MIT license
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
( function( window, factory ) {
/*global define: false, module: false */
'use strict';
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'desandro-matches-selector/matches-selector',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.matchesSelector = factory();
}
}( window, function factory() {
'use strict';
var matchesMethod = ( function() {
var ElemProto = window.Element.prototype;
// check for the standard method name first
if ( ElemProto.matches ) {
return 'matches';
}
// check un-prefixed
if ( ElemProto.matchesSelector ) {
return 'matchesSelector';
}
// check vendor prefixes
var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
for ( var i=0; i < prefixes.length; i++ ) {
var prefix = prefixes[i];
var method = prefix + 'MatchesSelector';
if ( ElemProto[ method ] ) {
return method;
}
}
})();
return function matchesSelector( elem, selector ) {
return elem[ matchesMethod ]( selector );
};
}));
/**
* Fizzy UI utils v2.0.7
* MIT license
*/
/*jshint browser: true, undef: true, unused: true, strict: true */
( function( window, factory ) {
// universal module definition
/*jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'fizzy-ui-utils/utils',[
'desandro-matches-selector/matches-selector'
], function( matchesSelector ) {
return factory( window, matchesSelector );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('desandro-matches-selector')
);
} else {
// browser global
window.fizzyUIUtils = factory(
window,
window.matchesSelector
);
}
}( window, function factory( window, matchesSelector ) {
var utils = {};
// ----- extend ----- //
// extends objects
utils.extend = function( a, b ) {
for ( var prop in b ) {
a[ prop ] = b[ prop ];
}
return a;
};
// ----- modulo ----- //
utils.modulo = function( num, div ) {
return ( ( num % div ) + div ) % div;
};
// ----- makeArray ----- //
var arraySlice = Array.prototype.slice;
// turn element or nodeList into an array
utils.makeArray = function( obj ) {
if ( Array.isArray( obj ) ) {
// use object if already an array
return obj;
}
// return empty array if undefined or null. #6
if ( obj === null || obj === undefined ) {
return [];
}
var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
if ( isArrayLike ) {
// convert nodeList to array
return arraySlice.call( obj );
}
// array of single index
return [ obj ];
};
// ----- removeFrom ----- //
utils.removeFrom = function( ary, obj ) {
var index = ary.indexOf( obj );
if ( index != -1 ) {
ary.splice( index, 1 );
}
};
// ----- getParent ----- //
utils.getParent = function( elem, selector ) {
while ( elem.parentNode && elem != document.body ) {
elem = elem.parentNode;
if ( matchesSelector( elem, selector ) ) {
return elem;
}
}
};
// ----- getQueryElement ----- //
// use element as selector string
utils.getQueryElement = function( elem ) {
if ( typeof elem == 'string' ) {
return document.querySelector( elem );
}
return elem;
};
// ----- handleEvent ----- //
// enable .ontype to trigger from .addEventListener( elem, 'type' )
utils.handleEvent = function( event ) {
var method = 'on' + event.type;
if ( this[ method ] ) {
this[ method ]( event );
}
};
// ----- filterFindElements ----- //
utils.filterFindElements = function( elems, selector ) {
// make array of elems
elems = utils.makeArray( elems );
var ffElems = [];
elems.forEach( function( elem ) {
// check that elem is an actual element
if ( !( elem instanceof HTMLElement ) ) {
return;
}
// add elem if no selector
if ( !selector ) {
ffElems.push( elem );
return;
}
// filter & find items if we have a selector
// filter
if ( matchesSelector( elem, selector ) ) {
ffElems.push( elem );
}
// find children
var childElems = elem.querySelectorAll( selector );
// concat childElems to filterFound array
for ( var i=0; i < childElems.length; i++ ) {
ffElems.push( childElems[i] );
}
});
return ffElems;
};
// ----- debounceMethod ----- //
utils.debounceMethod = function( _class, methodName, threshold ) {
threshold = threshold || 100;
// original method
var method = _class.prototype[ methodName ];
var timeoutName = methodName + 'Timeout';
_class.prototype[ methodName ] = function() {
var timeout = this[ timeoutName ];
clearTimeout( timeout );
var args = arguments;
var _this = this;
this[ timeoutName ] = setTimeout( function() {
method.apply( _this, args );
delete _this[ timeoutName ];
}, threshold );
};
};
// ----- docReady ----- //
utils.docReady = function( callback ) {
var readyState = document.readyState;
if ( readyState == 'complete' || readyState == 'interactive' ) {
// do async to allow for other scripts to run. metafizzy/flickity#441
setTimeout( callback );
} else {
document.addEventListener( 'DOMContentLoaded', callback );
}
};
// ----- htmlInit ----- //
// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
utils.toDashed = function( str ) {
return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
return $1 + '-' + $2;
}).toLowerCase();
};
var console = window.console;
/**
* allow user to initialize classes via [data-namespace] or .js-namespace class
* htmlInit( Widget, 'widgetName' )
* options are parsed from data-namespace-options
*/
utils.htmlInit = function( WidgetClass, namespace ) {
utils.docReady( function() {
var dashedNamespace = utils.toDashed( namespace );
var dataAttr = 'data-' + dashedNamespace;
var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
var elems = utils.makeArray( dataAttrElems )
.concat( utils.makeArray( jsDashElems ) );
var dataOptionsAttr = dataAttr + '-options';
var jQuery = window.jQuery;
elems.forEach( function( elem ) {
var attr = elem.getAttribute( dataAttr ) ||
elem.getAttribute( dataOptionsAttr );
var options;
try {
options = attr && JSON.parse( attr );
} catch ( error ) {
// log error, do not initialize
if ( console ) {
console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
': ' + error );
}
return;
}
// initialize
var instance = new WidgetClass( elem, options );
// make available via $().data('namespace')
if ( jQuery ) {
jQuery.data( elem, namespace, instance );
}
});
});
};
// ----- ----- //
return utils;
}));
/**
* Outlayer Item
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'outlayer/item',[
'ev-emitter/ev-emitter',
'get-size/get-size'
],
factory
);
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory(
require('ev-emitter'),
require('get-size')
);
} else {
// browser global
window.Outlayer = {};
window.Outlayer.Item = factory(
window.EvEmitter,
window.getSize
);
}
}( window, function factory( EvEmitter, getSize ) {
'use strict';
// ----- helpers ----- //
function isEmptyObj( obj ) {
for ( var prop in obj ) {
return false;
}
prop = null;
return true;
}
// -------------------------- CSS3 support -------------------------- //
var docElemStyle = document.documentElement.style;
var transitionProperty = typeof docElemStyle.transition == 'string' ?
'transition' : 'WebkitTransition';
var transformProperty = typeof docElemStyle.transform == 'string' ?
'transform' : 'WebkitTransform';
var transitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
transition: 'transitionend'
}[ transitionProperty ];
// cache all vendor properties that could have vendor prefix
var vendorProperties = {
transform: transformProperty,
transition: transitionProperty,
transitionDuration: transitionProperty + 'Duration',
transitionProperty: transitionProperty + 'Property',
transitionDelay: transitionProperty + 'Delay'
};
// -------------------------- Item -------------------------- //
function Item( element, layout ) {
if ( !element ) {
return;
}
this.element = element;
// parent layout class, i.e. Masonry, Isotope, or Packery
this.layout = layout;
this.position = {
x: 0,
y: 0
};
this._create();
}
// inherit EvEmitter
var proto = Item.prototype = Object.create( EvEmitter.prototype );
proto.constructor = Item;
proto._create = function() {
// transition objects
this._transn = {
ingProperties: {},
clean: {},
onEnd: {}
};
this.css({
position: 'absolute'
});
};
// trigger specified handler for event type
proto.handleEvent = function( event ) {
var method = 'on' + event.type;
if ( this[ method ] ) {
this[ method ]( event );
}
};
proto.getSize = function() {
this.size = getSize( this.element );
};
/**
* apply CSS styles to element
* @param {Object} style
*/
proto.css = function( style ) {
var elemStyle = this.element.style;
for ( var prop in style ) {
// use vendor property if available
var supportedProp = vendorProperties[ prop ] || prop;
elemStyle[ supportedProp ] = style[ prop ];
}
};
// measure position, and sets it
proto.getPosition = function() {
var style = getComputedStyle( this.element );
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
var xValue = style[ isOriginLeft ? 'left' : 'right' ];
var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
var x = parseFloat( xValue );
var y = parseFloat( yValue );
// convert percent to pixels
var layoutSize = this.layout.size;
if ( xValue.indexOf('%') != -1 ) {
x = ( x / 100 ) * layoutSize.width;
}
if ( yValue.indexOf('%') != -1 ) {
y = ( y / 100 ) * layoutSize.height;
}
// clean up 'auto' or other non-integer values
x = isNaN( x ) ? 0 : x;
y = isNaN( y ) ? 0 : y;
// remove padding from measurement
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
this.position.x = x;
this.position.y = y;
};
// set settled position, apply padding
proto.layoutPosition = function() {
var layoutSize = this.layout.size;
var style = {};
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
// x
var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
var xProperty = isOriginLeft ? 'left' : 'right';
var xResetProperty = isOriginLeft ? 'right' : 'left';
var x = this.position.x + layoutSize[ xPadding ];
// set in percentage or pixels
style[ xProperty ] = this.getXValue( x );
// reset other property
style[ xResetProperty ] = '';
// y
var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
var yProperty = isOriginTop ? 'top' : 'bottom';
var yResetProperty = isOriginTop ? 'bottom' : 'top';
var y = this.position.y + layoutSize[ yPadding ];
// set in percentage or pixels
style[ yProperty ] = this.getYValue( y );
// reset other property
style[ yResetProperty ] = '';
this.css( style );
this.emitEvent( 'layout', [ this ] );
};
proto.getXValue = function( x ) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && !isHorizontal ?
( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
};
proto.getYValue = function( y ) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && isHorizontal ?
( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
};
proto._transitionTo = function( x, y ) {
this.getPosition();
// get current x & y from top/left
var curX = this.position.x;
var curY = this.position.y;
var didNotMove = x == this.position.x && y == this.position.y;
// save end position
this.setPosition( x, y );
// if did not move and not transitioning, just go to layout
if ( didNotMove && !this.isTransitioning ) {
this.layoutPosition();
return;
}
var transX = x - curX;
var transY = y - curY;
var transitionStyle = {};
transitionStyle.transform = this.getTranslate( transX, transY );
this.transition({
to: transitionStyle,
onTransitionEnd: {
transform: this.layoutPosition
},
isCleaning: true
});
};
proto.getTranslate = function( x, y ) {
// flip cooridinates if origin on right or bottom
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
x = isOriginLeft ? x : -x;
y = isOriginTop ? y : -y;
return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
};
// non transition + transform support
proto.goTo = function( x, y ) {
this.setPosition( x, y );
this.layoutPosition();
};
proto.moveTo = proto._transitionTo;
proto.setPosition = function( x, y ) {
this.position.x = parseFloat( x );
this.position.y = parseFloat( y );
};
// ----- transition ----- //
/**
* @param {Object} style - CSS
* @param {Function} onTransitionEnd
*/
// non transition, just trigger callback
proto._nonTransition = function( args ) {
this.css( args.to );
if ( args.isCleaning ) {
this._removeStyles( args.to );
}
for ( var prop in args.onTransitionEnd ) {
args.onTransitionEnd[ prop ].call( this );
}
};
/**
* proper transition
* @param {Object} args - arguments
* @param {Object} to - style to transition to
* @param {Object} from - style to start transition from
* @param {Boolean} isCleaning - removes transition styles after transition
* @param {Function} onTransitionEnd - callback
*/
proto.transition = function( args ) {
// redirect to nonTransition if no transition duration
if ( !parseFloat( this.layout.options.transitionDuration ) ) {
this._nonTransition( args );
return;
}
var _transition = this._transn;
// keep track of onTransitionEnd callback by css property
for ( var prop in args.onTransitionEnd ) {
_transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
}
// keep track of properties that are transitioning
for ( prop in args.to ) {
_transition.ingProperties[ prop ] = true;
// keep track of properties to clean up when transition is done
if ( args.isCleaning ) {
_transition.clean[ prop ] = true;
}
}
// set from styles
if ( args.from ) {
this.css( args.from );
// force redraw. http://blog.alexmaccaw.com/css-transitions
var h = this.element.offsetHeight;
// hack for JSHint to hush about unused var
h = null;
}
// enable transition
this.enableTransition( args.to );
// set styles that are transitioning
this.css( args.to );
this.isTransitioning = true;
};
// dash before all cap letters, including first for
// WebkitTransform => -webkit-transform
function toDashedAll( str ) {
return str.replace( /([A-Z])/g, function( $1 ) {
return '-' + $1.toLowerCase();
});
}
var transitionProps = 'opacity,' + toDashedAll( transformProperty );
proto.enableTransition = function(/* style */) {
// HACK changing transitionProperty during a transition
// will cause transition to jump
if ( this.isTransitioning ) {
return;
}
// make `transition: foo, bar, baz` from style object
// HACK un-comment this when enableTransition can work
// while a transition is happening
// var transitionValues = [];
// for ( var prop in style ) {
// // dash-ify camelCased properties like WebkitTransition
// prop = vendorProperties[ prop ] || prop;
// transitionValues.push( toDashedAll( prop ) );
// }
// munge number to millisecond, to match stagger
var duration = this.layout.options.transitionDuration;
duration = typeof duration == 'number' ? duration + 'ms' : duration;
// enable transition styles
this.css({
transitionProperty: transitionProps,
transitionDuration: duration,
transitionDelay: this.staggerDelay || 0
});
// listen for transition end event
this.element.addEventListener( transitionEndEvent, this, false );
};
// ----- events ----- //
proto.onwebkitTransitionEnd = function( event ) {
this.ontransitionend( event );
};
proto.onotransitionend = function( event ) {
this.ontransitionend( event );
};
// properties that I munge to make my life easier
var dashedVendorProperties = {
'-webkit-transform': 'transform'
};
proto.ontransitionend = function( event ) {
// disregard bubbled events from children
if ( event.target !== this.element ) {
return;
}
var _transition = this._transn;
// get property name of transitioned property, convert to prefix-free
var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
// remove property that has completed transitioning
delete _transition.ingProperties[ propertyName ];
// check if any properties are still transitioning
if ( isEmptyObj( _transition.ingProperties ) ) {
// all properties have completed transitioning
this.disableTransition();
}
// clean style
if ( propertyName in _transition.clean ) {
// clean up style
this.element.style[ event.propertyName ] = '';
delete _transition.clean[ propertyName ];
}
// trigger onTransitionEnd callback
if ( propertyName in _transition.onEnd ) {
var onTransitionEnd = _transition.onEnd[ propertyName ];
onTransitionEnd.call( this );
delete _transition.onEnd[ propertyName ];
}
this.emitEvent( 'transitionEnd', [ this ] );
};
proto.disableTransition = function() {
this.removeTransitionStyles();
this.element.removeEventListener( transitionEndEvent, this, false );
this.isTransitioning = false;
};
/**
* removes style property from element
* @param {Object} style
**/
proto._removeStyles = function( style ) {
// clean up transition styles
var cleanStyle = {};
for ( var prop in style ) {
cleanStyle[ prop ] = '';
}
this.css( cleanStyle );
};
var cleanTransitionStyle = {
transitionProperty: '',
transitionDuration: '',
transitionDelay: ''
};
proto.removeTransitionStyles = function() {
// remove transition
this.css( cleanTransitionStyle );
};
// ----- stagger ----- //
proto.stagger = function( delay ) {
delay = isNaN( delay ) ? 0 : delay;
this.staggerDelay = delay + 'ms';
};
// ----- show/hide/remove ----- //
// remove element from DOM
proto.removeElem = function() {
this.element.parentNode.removeChild( this.element );
// remove display: none
this.css({ display: '' });
this.emitEvent( 'remove', [ this ] );
};
proto.remove = function() {
// just remove element if no transition support or no transition
if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
this.removeElem();
return;
}
// start transition
this.once( 'transitionEnd', function() {
this.removeElem();
});
this.hide();
};
proto.reveal = function() {
delete this.isHidden;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
this.transition({
from: options.hiddenStyle,
to: options.visibleStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onRevealTransitionEnd = function() {
// check if still visible
// during transition, item may have been hidden
if ( !this.isHidden ) {
this.emitEvent('reveal');
}
};
/**
* get style property use for hide/reveal transition end
* @param {String} styleProperty - hiddenStyle/visibleStyle
* @returns {String}
*/
proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
var optionStyle = this.layout.options[ styleProperty ];
// use opacity
if ( optionStyle.opacity ) {
return 'opacity';
}
// get first property
for ( var prop in optionStyle ) {
return prop;
}
};
proto.hide = function() {
// set flag
this.isHidden = true;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
this.transition({
from: options.visibleStyle,
to: options.hiddenStyle,
// keep hidden stuff hidden
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onHideTransitionEnd = function() {
// check if still hidden
// during transition, item may have been un-hidden
if ( this.isHidden ) {
this.css({ display: 'none' });
this.emitEvent('hide');
}
};
proto.destroy = function() {
this.css({
position: '',
left: '',
right: '',
top: '',
bottom: '',
transition: '',
transform: ''
});
};
return Item;
}));
/*!
* Outlayer v2.1.1
* the brains and guts of a layout library
* MIT license
*/
( function( window, factory ) {
'use strict';
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'outlayer/outlayer',[
'ev-emitter/ev-emitter',
'get-size/get-size',
'fizzy-ui-utils/utils',
'./item'
],
function( EvEmitter, getSize, utils, Item ) {
return factory( window, EvEmitter, getSize, utils, Item);
}
);
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory(
window,
require('ev-emitter'),
require('get-size'),
require('fizzy-ui-utils'),
require('./item')
);
} else {
// browser global
window.Outlayer = factory(
window,
window.EvEmitter,
window.getSize,
window.fizzyUIUtils,
window.Outlayer.Item
);
}
}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
'use strict';
// ----- vars ----- //
var console = window.console;
var jQuery = window.jQuery;
var noop = function() {};
// -------------------------- Outlayer -------------------------- //
// globally unique identifiers
var GUID = 0;
// internal store of all Outlayer intances
var instances = {};
/**
* @param {Element, String} element
* @param {Object} options
* @constructor
*/
function Outlayer( element, options ) {
var queryElement = utils.getQueryElement( element );
if ( !queryElement ) {
if ( console ) {
console.error( 'Bad element for ' + this.constructor.namespace +
': ' + ( queryElement || element ) );
}
return;
}
this.element = queryElement;
// add jQuery
if ( jQuery ) {
this.$element = jQuery( this.element );
}
// options
this.options = utils.extend( {}, this.constructor.defaults );
this.option( options );
// add id for Outlayer.getFromElement
var id = ++GUID;
this.element.outlayerGUID = id; // expando
instances[ id ] = this; // associate via id
// kick it off
this._create();
var isInitLayout = this._getOption('initLayout');
if ( isInitLayout ) {
this.layout();
}
}
// settings are for internal use only
Outlayer.namespace = 'outlayer';
Outlayer.Item = Item;
// default options
Outlayer.defaults = {
containerStyle: {
position: 'relative'
},
initLayout: true,
originLeft: true,
originTop: true,
resize: true,
resizeContainer: true,
// item options
transitionDuration: '0.4s',
hiddenStyle: {
opacity: 0,
transform: 'scale(0.001)'
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
};
var proto = Outlayer.prototype;
// inherit EvEmitter
utils.extend( proto, EvEmitter.prototype );
/**
* set options
* @param {Object} opts
*/
proto.option = function( opts ) {
utils.extend( this.options, opts );
};
/**
* get backwards compatible option value, check old name
*/
proto._getOption = function( option ) {
var oldOption = this.constructor.compatOptions[ option ];
return oldOption && this.options[ oldOption ] !== undefined ?
this.options[ oldOption ] : this.options[ option ];
};
Outlayer.compatOptions = {
// currentName: oldName
initLayout: 'isInitLayout',
horizontal: 'isHorizontal',
layoutInstant: 'isLayoutInstant',
originLeft: 'isOriginLeft',
originTop: 'isOriginTop',
resize: 'isResizeBound',
resizeContainer: 'isResizingContainer'
};
proto._create = function() {
// get items from children
this.reloadItems();
// elements that affect layout, but are not laid out
this.stamps = [];
this.stamp( this.options.stamp );
// set container style
utils.extend( this.element.style, this.options.containerStyle );
// bind resize method
var canBindResize = this._getOption('resize');
if ( canBindResize ) {
this.bindResize();
}
};
// goes through all children again and gets bricks in proper order
proto.reloadItems = function() {
// collection of item elements
this.items = this._itemize( this.element.children );
};
/**
* turn elements into Outlayer.Items to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - collection of new Outlayer Items
*/
proto._itemize = function( elems ) {
var itemElems = this._filterFindItemElements( elems );
var Item = this.constructor.Item;
// create new Outlayer Items for collection
var items = [];
for ( var i=0; i < itemElems.length; i++ ) {
var elem = itemElems[i];
var item = new Item( elem, this );
items.push( item );
}
return items;
};
/**
* get item elements to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - item elements
*/
proto._filterFindItemElements = function( elems ) {
return utils.filterFindElements( elems, this.options.itemSelector );
};
/**
* getter method for getting item elements
* @returns {Array} elems - collection of item elements
*/
proto.getItemElements = function() {
return this.items.map( function( item ) {
return item.element;
});
};
// ----- init & layout ----- //
/**
* lays out all items
*/
proto.layout = function() {
this._resetLayout();
this._manageStamps();
// don't animate first layout
var layoutInstant = this._getOption('layoutInstant');
var isInstant = layoutInstant !== undefined ?
layoutInstant : !this._isLayoutInited;
this.layoutItems( this.items, isInstant );
// flag for initalized
this._isLayoutInited = true;
};
// _init is alias for layout
proto._init = proto.layout;
/**
* logic before any new layout
*/
proto._resetLayout = function() {
this.getSize();
};
proto.getSize = function() {
this.size = getSize( this.element );
};
/**
* get measurement from option, for columnWidth, rowHeight, gutter
* if option is String -> get element from selector string, & get size of element
* if option is Element -> get size of element
* else use option as a number
*
* @param {String} measurement
* @param {String} size - width or height
* @private
*/
proto._getMeasurement = function( measurement, size ) {
var option = this.options[ measurement ];
var elem;
if ( !option ) {
// default to 0
this[ measurement ] = 0;
} else {
// use option as an element
if ( typeof option == 'string' ) {
elem = this.element.querySelector( option );
} else if ( option instanceof HTMLElement ) {
elem = option;
}
// use size of element, if element
this[ measurement ] = elem ? getSize( elem )[ size ] : option;
}
};
/**
* layout a collection of item elements
* @api public
*/
proto.layoutItems = function( items, isInstant ) {
items = this._getItemsForLayout( items );
this._layoutItems( items, isInstant );
this._postLayout();
};
/**
* get the items to be laid out
* you may want to skip over some items
* @param {Array} items
* @returns {Array} items
*/
proto._getItemsForLayout = function( items ) {
return items.filter( function( item ) {
return !item.isIgnored;
});
};
/**
* layout items
* @param {Array} items
* @param {Boolean} isInstant
*/
proto._layoutItems = function( items, isInstant ) {
this._emitCompleteOnItems( 'layout', items );
if ( !items || !items.length ) {
// no items, emit event with empty array
return;
}
var queue = [];
items.forEach( function( item ) {
// get x/y object from method
var position = this._getItemLayoutPosition( item );
// enqueue
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push( position );
}, this );
this._processLayoutQueue( queue );
};
/**
* get item layout position
* @param {Outlayer.Item} item
* @returns {Object} x and y position
*/
proto._getItemLayoutPosition = function( /* item */ ) {
return {
x: 0,
y: 0
};
};
/**
* iterate over array and position each item
* Reason being - separating this logic prevents 'layout invalidation'
* thx @paul_irish
* @param {Array} queue
*/
proto._processLayoutQueue = function( queue ) {
this.updateStagger();
queue.forEach( function( obj, i ) {
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
}, this );
};
// set stagger from option in milliseconds number
proto.updateStagger = function() {
var stagger = this.options.stagger;
if ( stagger === null || stagger === undefined ) {
this.stagger = 0;
return;
}
this.stagger = getMilliseconds( stagger );
return this.stagger;
};
/**
* Sets position of item in DOM
* @param {Outlayer.Item} item
* @param {Number} x - horizontal position
* @param {Number} y - vertical position
* @param {Boolean} isInstant - disables transitions
*/
proto._positionItem = function( item, x, y, isInstant, i ) {
if ( isInstant ) {
// if not transition, just set CSS
item.goTo( x, y );
} else {
item.stagger( i * this.stagger );
item.moveTo( x, y );
}
};
/**
* Any logic you want to do after each layout,
* i.e. size the container
*/
proto._postLayout = function() {
this.resizeContainer();
};
proto.resizeContainer = function() {
var isResizingContainer = this._getOption('resizeContainer');
if ( !isResizingContainer ) {
return;
}
var size = this._getContainerSize();
if ( size ) {
this._setContainerMeasure( size.width, true );
this._setContainerMeasure( size.height, false );
}
};
/**
* Sets width or height of container if returned
* @returns {Object} size
* @param {Number} width
* @param {Number} height
*/
proto._getContainerSize = noop;
/**
* @param {Number} measure - size of width or height
* @param {Boolean} isWidth
*/
proto._setContainerMeasure = function( measure, isWidth ) {
if ( measure === undefined ) {
return;
}
var elemSize = this.size;
// add padding and border width if border box
if ( elemSize.isBorderBox ) {
measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
elemSize.borderLeftWidth + elemSize.borderRightWidth :
elemSize.paddingBottom + elemSize.paddingTop +
elemSize.borderTopWidth + elemSize.borderBottomWidth;
}
measure = Math.max( measure, 0 );
this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
};
/**
* emit eventComplete on a collection of items events
* @param {String} eventName
* @param {Array} items - Outlayer.Items
*/
proto._emitCompleteOnItems = function( eventName, items ) {
var _this = this;
function onComplete() {
_this.dispatchEvent( eventName + 'Complete', null, [ items ] );
}
var count = items.length;
if ( !items || !count ) {
onComplete();
return;
}
var doneCount = 0;
function tick() {
doneCount++;
if ( doneCount == count ) {
onComplete();
}
}
// bind callback
items.forEach( function( item ) {
item.once( eventName, tick );
});
};
/**
* emits events via EvEmitter and jQuery events
* @param {String} type - name of event
* @param {Event} event - original event
* @param {Array} args - extra arguments
*/
proto.dispatchEvent = function( type, event, args ) {
// add original event to arguments
var emitArgs = event ? [ event ].concat( args ) : args;
this.emitEvent( type, emitArgs );
if ( jQuery ) {
// set this.$element
this.$element = this.$element || jQuery( this.element );
if ( event ) {
// create jQuery event
var $event = jQuery.Event( event );
$event.type = type;
this.$element.trigger( $event, args );
} else {
// just trigger with type if no event available
this.$element.trigger( type, args );
}
}
};
// -------------------------- ignore & stamps -------------------------- //
/**
* keep item in collection, but do not lay it out
* ignored items do not get skipped in layout
* @param {Element} elem
*/
proto.ignore = function( elem ) {
var item = this.getItem( elem );
if ( item ) {
item.isIgnored = true;
}
};
/**
* return item to layout collection
* @param {Element} elem
*/
proto.unignore = function( elem ) {
var item = this.getItem( elem );
if ( item ) {
delete item.isIgnored;
}
};
/**
* adds elements to stamps
* @param {NodeList, Array, Element, or String} elems
*/
proto.stamp = function( elems ) {
elems = this._find( elems );
if ( !elems ) {
return;
}
this.stamps = this.stamps.concat( elems );
// ignore
elems.forEach( this.ignore, this );
};
/**
* removes elements to stamps
* @param {NodeList, Array, or Element} elems
*/
proto.unstamp = function( elems ) {
elems = this._find( elems );
if ( !elems ){
return;
}
elems.forEach( function( elem ) {
// filter out removed stamp elements
utils.removeFrom( this.stamps, elem );
this.unignore( elem );
}, this );
};
/**
* finds child elements
* @param {NodeList, Array, Element, or String} elems
* @returns {Array} elems
*/
proto._find = function( elems ) {
if ( !elems ) {
return;
}
// if string, use argument as selector string
if ( typeof elems == 'string' ) {
elems = this.element.querySelectorAll( elems );
}
elems = utils.makeArray( elems );
return elems;
};
proto._manageStamps = function() {
if ( !this.stamps || !this.stamps.length ) {
return;
}
this._getBoundingRect();
this.stamps.forEach( this._manageStamp, this );
};
// update boundingLeft / Top
proto._getBoundingRect = function() {
// get bounding rect for container element
var boundingRect = this.element.getBoundingClientRect();
var size = this.size;
this._boundingRect = {
left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
top: boundingRect.top + size.paddingTop + size.borderTopWidth,
right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
};
};
/**
* @param {Element} stamp
**/
proto._manageStamp = noop;
/**
* get x/y position of element relative to container element
* @param {Element} elem
* @returns {Object} offset - has left, top, right, bottom
*/
proto._getElementOffset = function( elem ) {
var boundingRect = elem.getBoundingClientRect();
var thisRect = this._boundingRect;
var size = getSize( elem );
var offset = {
left: boundingRect.left - thisRect.left - size.marginLeft,
top: boundingRect.top - thisRect.top - size.marginTop,
right: thisRect.right - boundingRect.right - size.marginRight,
bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
};
return offset;
};
// -------------------------- resize -------------------------- //
// enable event handlers for listeners
// i.e. resize -> onresize
proto.handleEvent = utils.handleEvent;
/**
* Bind layout to window resizing
*/
proto.bindResize = function() {
window.addEventListener( 'resize', this );
this.isResizeBound = true;
};
/**
* Unbind layout to window resizing
*/
proto.unbindResize = function() {
window.removeEventListener( 'resize', this );
this.isResizeBound = false;
};
proto.onresize = function() {
this.resize();
};
utils.debounceMethod( Outlayer, 'onresize', 100 );
proto.resize = function() {
// don't trigger if size did not change
// or if resize was unbound. See #9
if ( !this.isResizeBound || !this.needsResizeLayout() ) {
return;
}
this.layout();
};
/**
* check if layout is needed post layout
* @returns Boolean
*/
proto.needsResizeLayout = function() {
var size = getSize( this.element );
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.size && size;
return hasSizes && size.innerWidth !== this.size.innerWidth;
};
// -------------------------- methods -------------------------- //
/**
* add items to Outlayer instance
* @param {Array or NodeList or Element} elems
* @returns {Array} items - Outlayer.Items
**/
proto.addItems = function( elems ) {
var items = this._itemize( elems );
// add items to collection
if ( items.length ) {
this.items = this.items.concat( items );
}
return items;
};
/**
* Layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.appended = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// layout and reveal just the new items
this.layoutItems( items, true );
this.reveal( items );
};
/**
* Layout prepended elements
* @param {Array or NodeList or Element} elems
*/
proto.prepended = function( elems ) {
var items = this._itemize( elems );
if ( !items.length ) {
return;
}
// add items to beginning of collection
var previousItems = this.items.slice(0);
this.items = items.concat( previousItems );
// start new layout
this._resetLayout();
this._manageStamps();
// layout new stuff without transition
this.layoutItems( items, true );
this.reveal( items );
// layout previous items
this.layoutItems( previousItems );
};
/**
* reveal a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.reveal = function( items ) {
this._emitCompleteOnItems( 'reveal', items );
if ( !items || !items.length ) {
return;
}
var stagger = this.updateStagger();
items.forEach( function( item, i ) {
item.stagger( i * stagger );
item.reveal();
});
};
/**
* hide a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.hide = function( items ) {
this._emitCompleteOnItems( 'hide', items );
if ( !items || !items.length ) {
return;
}
var stagger = this.updateStagger();
items.forEach( function( item, i ) {
item.stagger( i * stagger );
item.hide();
});
};
/**
* reveal item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.revealItemElements = function( elems ) {
var items = this.getItems( elems );
this.reveal( items );
};
/**
* hide item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.hideItemElements = function( elems ) {
var items = this.getItems( elems );
this.hide( items );
};
/**
* get Outlayer.Item, given an Element
* @param {Element} elem
* @param {Function} callback
* @returns {Outlayer.Item} item
*/
proto.getItem = function( elem ) {
// loop through items to get the one that matches
for ( var i=0; i < this.items.length; i++ ) {
var item = this.items[i];
if ( item.element == elem ) {
// return item
return item;
}
}
};
/**
* get collection of Outlayer.Items, given Elements
* @param {Array} elems
* @returns {Array} items - Outlayer.Items
*/
proto.getItems = function( elems ) {
elems = utils.makeArray( elems );
var items = [];
elems.forEach( function( elem ) {
var item = this.getItem( elem );
if ( item ) {
items.push( item );
}
}, this );
return items;
};
/**
* remove element(s) from instance and DOM
* @param {Array or NodeList or Element} elems
*/
proto.remove = function( elems ) {
var removeItems = this.getItems( elems );
this._emitCompleteOnItems( 'remove', removeItems );
// bail if no items to remove
if ( !removeItems || !removeItems.length ) {
return;
}
removeItems.forEach( function( item ) {
item.remove();
// remove item from collection
utils.removeFrom( this.items, item );
}, this );
};
// ----- destroy ----- //
// remove and disable Outlayer instance
proto.destroy = function() {
// clean up dynamic styles
var style = this.element.style;
style.height = '';
style.position = '';
style.width = '';
// destroy items
this.items.forEach( function( item ) {
item.destroy();
});
this.unbindResize();
var id = this.element.outlayerGUID;
delete instances[ id ]; // remove reference to instance by id
delete this.element.outlayerGUID;
// remove data for jQuery
if ( jQuery ) {
jQuery.removeData( this.element, this.constructor.namespace );
}
};
// -------------------------- data -------------------------- //
/**
* get Outlayer instance from element
* @param {Element} elem
* @returns {Outlayer}
*/
Outlayer.data = function( elem ) {
elem = utils.getQueryElement( elem );
var id = elem && elem.outlayerGUID;
return id && instances[ id ];
};
// -------------------------- create Outlayer class -------------------------- //
/**
* create a layout class
* @param {String} namespace
*/
Outlayer.create = function( namespace, options ) {
// sub-class Outlayer
var Layout = subclass( Outlayer );
// apply new options and compatOptions
Layout.defaults = utils.extend( {}, Outlayer.defaults );
utils.extend( Layout.defaults, options );
Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions );
Layout.namespace = namespace;
Layout.data = Outlayer.data;
// sub-class Item
Layout.Item = subclass( Item );
// -------------------------- declarative -------------------------- //
utils.htmlInit( Layout, namespace );
// -------------------------- jQuery bridge -------------------------- //
// make into jQuery plugin
if ( jQuery && jQuery.bridget ) {
jQuery.bridget( namespace, Layout );
}
return Layout;
};
function subclass( Parent ) {
function SubClass() {
Parent.apply( this, arguments );
}
SubClass.prototype = Object.create( Parent.prototype );
SubClass.prototype.constructor = SubClass;
return SubClass;
}
// ----- helpers ----- //
// how many milliseconds are in each unit
var msUnits = {
ms: 1,
s: 1000
};
// munge time-like parameter into millisecond number
// '0.4s' -> 40
function getMilliseconds( time ) {
if ( typeof time == 'number' ) {
return time;
}
var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
var num = matches && matches[1];
var unit = matches && matches[2];
if ( !num.length ) {
return 0;
}
num = parseFloat( num );
var mult = msUnits[ unit ] || 1;
return num * mult;
}
// ----- fin ----- //
// back in global
Outlayer.Item = Item;
return Outlayer;
}));
/**
* Isotope Item
**/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'isotope-layout/js/item',[
'outlayer/outlayer'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer')
);
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.Item = factory(
window.Outlayer
);
}
}( window, function factory( Outlayer ) {
'use strict';
// -------------------------- Item -------------------------- //
// sub-class Outlayer Item
function Item() {
Outlayer.Item.apply( this, arguments );
}
var proto = Item.prototype = Object.create( Outlayer.Item.prototype );
var _create = proto._create;
proto._create = function() {
// assign id, used for original-order sorting
this.id = this.layout.itemGUID++;
_create.call( this );
this.sortData = {};
};
proto.updateSortData = function() {
if ( this.isIgnored ) {
return;
}
// default sorters
this.sortData.id = this.id;
// for backward compatibility
this.sortData['original-order'] = this.id;
this.sortData.random = Math.random();
// go thru getSortData obj and apply the sorters
var getSortData = this.layout.options.getSortData;
var sorters = this.layout._sorters;
for ( var key in getSortData ) {
var sorter = sorters[ key ];
this.sortData[ key ] = sorter( this.element, this );
}
};
var _destroy = proto.destroy;
proto.destroy = function() {
// call super
_destroy.apply( this, arguments );
// reset display, #741
this.css({
display: ''
});
};
return Item;
}));
/**
* Isotope LayoutMode
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'isotope-layout/js/layout-mode',[
'get-size/get-size',
'outlayer/outlayer'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('get-size'),
require('outlayer')
);
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.LayoutMode = factory(
window.getSize,
window.Outlayer
);
}
}( window, function factory( getSize, Outlayer ) {
'use strict';
// layout mode class
function LayoutMode( isotope ) {
this.isotope = isotope;
// link properties
if ( isotope ) {
this.options = isotope.options[ this.namespace ];
this.element = isotope.element;
this.items = isotope.filteredItems;
this.size = isotope.size;
}
}
var proto = LayoutMode.prototype;
/**
* some methods should just defer to default Outlayer method
* and reference the Isotope instance as `this`
**/
var facadeMethods = [
'_resetLayout',
'_getItemLayoutPosition',
'_manageStamp',
'_getContainerSize',
'_getElementOffset',
'needsResizeLayout',
'_getOption'
];
facadeMethods.forEach( function( methodName ) {
proto[ methodName ] = function() {
return Outlayer.prototype[ methodName ].apply( this.isotope, arguments );
};
});
// ----- ----- //
// for horizontal layout modes, check vertical size
proto.needsVerticalResizeLayout = function() {
// don't trigger if size did not change
var size = getSize( this.isotope.element );
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.isotope.size && size;
return hasSizes && size.innerHeight != this.isotope.size.innerHeight;
};
// ----- measurements ----- //
proto._getMeasurement = function() {
this.isotope._getMeasurement.apply( this, arguments );
};
proto.getColumnWidth = function() {
this.getSegmentSize( 'column', 'Width' );
};
proto.getRowHeight = function() {
this.getSegmentSize( 'row', 'Height' );
};
/**
* get columnWidth or rowHeight
* segment: 'column' or 'row'
* size 'Width' or 'Height'
**/
proto.getSegmentSize = function( segment, size ) {
var segmentName = segment + size;
var outerSize = 'outer' + size;
// columnWidth / outerWidth // rowHeight / outerHeight
this._getMeasurement( segmentName, outerSize );
// got rowHeight or columnWidth, we can chill
if ( this[ segmentName ] ) {
return;
}
// fall back to item of first element
var firstItemSize = this.getFirstItemSize();
this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] ||
// or size of container
this.isotope.size[ 'inner' + size ];
};
proto.getFirstItemSize = function() {
var firstItem = this.isotope.filteredItems[0];
return firstItem && firstItem.element && getSize( firstItem.element );
};
// ----- methods that should reference isotope ----- //
proto.layout = function() {
this.isotope.layout.apply( this.isotope, arguments );
};
proto.getSize = function() {
this.isotope.getSize();
this.size = this.isotope.size;
};
// -------------------------- create -------------------------- //
LayoutMode.modes = {};
LayoutMode.create = function( namespace, options ) {
function Mode() {
LayoutMode.apply( this, arguments );
}
Mode.prototype = Object.create( proto );
Mode.prototype.constructor = Mode;
// default options
if ( options ) {
Mode.options = options;
}
Mode.prototype.namespace = namespace;
// register in Isotope
LayoutMode.modes[ namespace ] = Mode;
return Mode;
};
return LayoutMode;
}));
/*!
* Masonry v4.2.1
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'masonry-layout/masonry',[
'outlayer/outlayer',
'get-size/get-size'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer'),
require('get-size')
);
} else {
// browser global
window.Masonry = factory(
window.Outlayer,
window.getSize
);
}
}( window, function factory( Outlayer, getSize ) {
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
// isFitWidth -> fitWidth
Masonry.compatOptions.fitWidth = 'isFitWidth';
var proto = Masonry.prototype;
proto._resetLayout = function() {
this.getSize();
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );
this.measureColumns();
// reset column Y
this.colYs = [];
for ( var i=0; i < this.cols; i++ ) {
this.colYs.push( 0 );
}
this.maxY = 0;
this.horizontalColIndex = 0;
};
proto.measureColumns = function() {
this.getContainerWidth();
// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
// columnWidth fall back to item of first element
this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
// if first elem has no width, default to size of container
this.containerWidth;
}
var columnWidth = this.columnWidth += this.gutter;
// calculate columns
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
// fix rounding errors, typically with gutters
var excess = columnWidth - containerWidth % columnWidth;
// if overshoot is less than a pixel, round up, otherwise floor it
var mathMethod = excess && excess < 1 ? 'round' : 'floor';
cols = Math[ mathMethod ]( cols );
this.cols = Math.max( cols, 1 );
};
proto.getContainerWidth = function() {
// container is parent if fit width
var isFitWidth = this._getOption('fitWidth');
var container = isFitWidth ? this.element.parentNode : this.element;
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var size = getSize( container );
this.containerWidth = size && size.innerWidth;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
colSpan = Math.min( colSpan, this.cols );
// use horizontal or top column position
var colPosMethod = this.options.horizontalOrder ?
'_getHorizontalColPosition' : '_getTopColPosition';
var colPosition = this[ colPosMethod ]( colSpan, item );
// position the brick
var position = {
x: this.columnWidth * colPosition.col,
y: colPosition.y
};
// apply setHeight to necessary columns
var setHeight = colPosition.y + item.size.outerHeight;
var setMax = colSpan + colPosition.col;
for ( var i = colPosition.col; i < setMax; i++ ) {
this.colYs[i] = setHeight;
}
return position;
};
proto._getTopColPosition = function( colSpan ) {
var colGroup = this._getTopColGroup( colSpan );
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, colGroup );
return {
col: colGroup.indexOf( minimumY ),
y: minimumY,
};
};
/**
* @param {Number} colSpan - number of columns the element spans
* @returns {Array} colGroup
*/
proto._getTopColGroup = function( colSpan ) {
if ( colSpan < 2 ) {
// if brick spans only one column, use all the column Ys
return this.colYs;
}
var colGroup = [];
// how many different places could this brick fit horizontally
var groupCount = this.cols + 1 - colSpan;
// for each group potential horizontal position
for ( var i = 0; i < groupCount; i++ ) {
colGroup[i] = this._getColGroupY( i, colSpan );
}
return colGroup;
};
proto._getColGroupY = function( col, colSpan ) {
if ( colSpan < 2 ) {
return this.colYs[ col ];
}
// make an array of colY values for that one group
var groupColYs = this.colYs.slice( col, col + colSpan );
// and get the max value of the array
return Math.max.apply( Math, groupColYs );
};
// get column position based on horizontal index. #873
proto._getHorizontalColPosition = function( colSpan, item ) {
var col = this.horizontalColIndex % this.cols;
var isOver = colSpan > 1 && col + colSpan > this.cols;
// shift to next row if item can't fit on current row
col = isOver ? 0 : col;
// don't let zero-size items take up space
var hasSize = item.size.outerWidth && item.size.outerHeight;
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
return {
col: col,
y: this._getColGroupY( col, colSpan ),
};
};
proto._manageStamp = function( stamp ) {
var stampSize = getSize( stamp );
var offset = this._getElementOffset( stamp );
// get the columns that this stamp affects
var isOriginLeft = this._getOption('originLeft');
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor( firstX / this.columnWidth );
firstCol = Math.max( 0, firstCol );
var lastCol = Math.floor( lastX / this.columnWidth );
// lastCol should not go over if multiple of columnWidth #425
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min( this.cols - 1, lastCol );
// set colYs to bottom of the stamp
var isOriginTop = this._getOption('originTop');
var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
stampSize.outerHeight;
for ( var i = firstCol; i <= lastCol; i++ ) {
this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
}
};
proto._getContainerSize = function() {
this.maxY = Math.max.apply( Math, this.colYs );
var size = {
height: this.maxY
};
if ( this._getOption('fitWidth') ) {
size.width = this._getContainerFitWidth();
}
return size;
};
proto._getContainerFitWidth = function() {
var unusedCols = 0;
// count unused columns
var i = this.cols;
while ( --i ) {
if ( this.colYs[i] !== 0 ) {
break;
}
unusedCols++;
}
// fit container to columns that have been used
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
};
proto.needsResizeLayout = function() {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth != this.containerWidth;
};
return Masonry;
}));
/*!
* Masonry layout mode
* sub-classes Masonry
* https://masonry.desandro.com
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'isotope-layout/js/layout-modes/masonry',[
'../layout-mode',
'masonry-layout/masonry'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('../layout-mode'),
require('masonry-layout')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode,
window.Masonry
);
}
}( window, function factory( LayoutMode, Masonry ) {
'use strict';
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var MasonryMode = LayoutMode.create('masonry');
var proto = MasonryMode.prototype;
var keepModeMethods = {
_getElementOffset: true,
layout: true,
_getMeasurement: true
};
// inherit Masonry prototype
for ( var method in Masonry.prototype ) {
// do not inherit mode methods
if ( !keepModeMethods[ method ] ) {
proto[ method ] = Masonry.prototype[ method ];
}
}
var measureColumns = proto.measureColumns;
proto.measureColumns = function() {
// set items, used if measuring first item
this.items = this.isotope.filteredItems;
measureColumns.call( this );
};
// point to mode options for fitWidth
var _getOption = proto._getOption;
proto._getOption = function( option ) {
if ( option == 'fitWidth' ) {
return this.options.isFitWidth !== undefined ?
this.options.isFitWidth : this.options.fitWidth;
}
return _getOption.apply( this.isotope, arguments );
};
return MasonryMode;
}));
/**
* fitRows layout mode
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'isotope-layout/js/layout-modes/fit-rows',[
'../layout-mode'
],
factory );
} else if ( typeof exports == 'object' ) {
// CommonJS
module.exports = factory(
require('../layout-mode')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode
);
}
}( window, function factory( LayoutMode ) {
'use strict';
var FitRows = LayoutMode.create('fitRows');
var proto = FitRows.prototype;
proto._resetLayout = function() {
this.x = 0;
this.y = 0;
this.maxY = 0;
this._getMeasurement( 'gutter', 'outerWidth' );
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
var itemWidth = item.size.outerWidth + this.gutter;
// if this element cannot fit in the current row
var containerWidth = this.isotope.size.innerWidth + this.gutter;
if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
this.x = 0;
this.y = this.maxY;
}
var position = {
x: this.x,
y: this.y
};
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
this.x += itemWidth;
return position;
};
proto._getContainerSize = function() {
return { height: this.maxY };
};
return FitRows;
}));
/**
* vertical layout mode
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'isotope-layout/js/layout-modes/vertical',[
'../layout-mode'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('../layout-mode')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode
);
}
}( window, function factory( LayoutMode ) {
'use strict';
var Vertical = LayoutMode.create( 'vertical', {
horizontalAlignment: 0
});
var proto = Vertical.prototype;
proto._resetLayout = function() {
this.y = 0;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) *
this.options.horizontalAlignment;
var y = this.y;
this.y += item.size.outerHeight;
return { x: x, y: y };
};
proto._getContainerSize = function() {
return { height: this.y };
};
return Vertical;
}));
/*!
* Isotope v3.0.6
*
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
*
* https://isotope.metafizzy.co
* Copyright 2010-2018 Metafizzy
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
'get-size/get-size',
'desandro-matches-selector/matches-selector',
'fizzy-ui-utils/utils',
'isotope-layout/js/item',
'isotope-layout/js/layout-mode',
// include default layout modes
'isotope-layout/js/layout-modes/masonry',
'isotope-layout/js/layout-modes/fit-rows',
'isotope-layout/js/layout-modes/vertical'
],
function( Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ) {
return factory( window, Outlayer, getSize, matchesSelector, utils, Item, LayoutMode );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('outlayer'),
require('get-size'),
require('desandro-matches-selector'),
require('fizzy-ui-utils'),
require('isotope-layout/js/item'),
require('isotope-layout/js/layout-mode'),
// include default layout modes
require('isotope-layout/js/layout-modes/masonry'),
require('isotope-layout/js/layout-modes/fit-rows'),
require('isotope-layout/js/layout-modes/vertical')
);
} else {
// browser global
window.Isotope = factory(
window,
window.Outlayer,
window.getSize,
window.matchesSelector,
window.fizzyUIUtils,
window.Isotope.Item,
window.Isotope.LayoutMode
);
}
}( window, function factory( window, Outlayer, getSize, matchesSelector, utils,
Item, LayoutMode ) {
// -------------------------- vars -------------------------- //
var jQuery = window.jQuery;
// -------------------------- helpers -------------------------- //
var trim = String.prototype.trim ?
function( str ) {
return str.trim();
} :
function( str ) {
return str.replace( /^\s+|\s+$/g, '' );
};
// -------------------------- isotopeDefinition -------------------------- //
// create an Outlayer layout class
var Isotope = Outlayer.create( 'isotope', {
layoutMode: 'masonry',
isJQueryFiltering: true,
sortAscending: true
});
Isotope.Item = Item;
Isotope.LayoutMode = LayoutMode;
var proto = Isotope.prototype;
proto._create = function() {
this.itemGUID = 0;
// functions that sort items
this._sorters = {};
this._getSorters();
// call super
Outlayer.prototype._create.call( this );
// create layout modes
this.modes = {};
// start filteredItems with all items
this.filteredItems = this.items;
// keep of track of sortBys
this.sortHistory = [ 'original-order' ];
// create from registered layout modes
for ( var name in LayoutMode.modes ) {
this._initLayoutMode( name );
}
};
proto.reloadItems = function() {
// reset item ID counter
this.itemGUID = 0;
// call super
Outlayer.prototype.reloadItems.call( this );
};
proto._itemize = function() {
var items = Outlayer.prototype._itemize.apply( this, arguments );
// assign ID for original-order
for ( var i=0; i < items.length; i++ ) {
var item = items[i];
item.id = this.itemGUID++;
}
this._updateItemsSortData( items );
return items;
};
// -------------------------- layout -------------------------- //
proto._initLayoutMode = function( name ) {
var Mode = LayoutMode.modes[ name ];
// set mode options
// HACK extend initial options, back-fill in default options
var initialOpts = this.options[ name ] || {};
this.options[ name ] = Mode.options ?
utils.extend( Mode.options, initialOpts ) : initialOpts;
// init layout mode instance
this.modes[ name ] = new Mode( this );
};
proto.layout = function() {
// if first time doing layout, do all magic
if ( !this._isLayoutInited && this._getOption('initLayout') ) {
this.arrange();
return;
}
this._layout();
};
// private method to be used in layout() & magic()
proto._layout = function() {
// don't animate first layout
var isInstant = this._getIsInstant();
// layout flow
this._resetLayout();
this._manageStamps();
this.layoutItems( this.filteredItems, isInstant );
// flag for initalized
this._isLayoutInited = true;
};
// filter + sort + layout
proto.arrange = function( opts ) {
// set any options pass
this.option( opts );
this._getIsInstant();
// filter, sort, and layout
// filter
var filtered = this._filter( this.items );
this.filteredItems = filtered.matches;
this._bindArrangeComplete();
if ( this._isInstant ) {
this._noTransition( this._hideReveal, [ filtered ] );
} else {
this._hideReveal( filtered );
}
this._sort();
this._layout();
};
// alias to _init for main plugin method
proto._init = proto.arrange;
proto._hideReveal = function( filtered ) {
this.reveal( filtered.needReveal );
this.hide( filtered.needHide );
};
// HACK
// Don't animate/transition first layout
// Or don't animate/transition other layouts
proto._getIsInstant = function() {
var isLayoutInstant = this._getOption('layoutInstant');
var isInstant = isLayoutInstant !== undefined ? isLayoutInstant :
!this._isLayoutInited;
this._isInstant = isInstant;
return isInstant;
};
// listen for layoutComplete, hideComplete and revealComplete
// to trigger arrangeComplete
proto._bindArrangeComplete = function() {
// listen for 3 events to trigger arrangeComplete
var isLayoutComplete, isHideComplete, isRevealComplete;
var _this = this;
function arrangeParallelCallback() {
if ( isLayoutComplete && isHideComplete && isRevealComplete ) {
_this.dispatchEvent( 'arrangeComplete', null, [ _this.filteredItems ] );
}
}
this.once( 'layoutComplete', function() {
isLayoutComplete = true;
arrangeParallelCallback();
});
this.once( 'hideComplete', function() {
isHideComplete = true;
arrangeParallelCallback();
});
this.once( 'revealComplete', function() {
isRevealComplete = true;
arrangeParallelCallback();
});
};
// -------------------------- filter -------------------------- //
proto._filter = function( items ) {
var filter = this.options.filter;
filter = filter || '*';
var matches = [];
var hiddenMatched = [];
var visibleUnmatched = [];
var test = this._getFilterTest( filter );
// test each item
for ( var i=0; i < items.length; i++ ) {
var item = items[i];
if ( item.isIgnored ) {
continue;
}
// add item to either matched or unmatched group
var isMatched = test( item );
// item.isFilterMatched = isMatched;
// add to matches if its a match
if ( isMatched ) {
matches.push( item );
}
// add to additional group if item needs to be hidden or revealed
if ( isMatched && item.isHidden ) {
hiddenMatched.push( item );
} else if ( !isMatched && !item.isHidden ) {
visibleUnmatched.push( item );
}
}
// return collections of items to be manipulated
return {
matches: matches,
needReveal: hiddenMatched,
needHide: visibleUnmatched
};
};
// get a jQuery, function, or a matchesSelector test given the filter
proto._getFilterTest = function( filter ) {
if ( jQuery && this.options.isJQueryFiltering ) {
// use jQuery
return function( item ) {
return jQuery( item.element ).is( filter );
};
}
if ( typeof filter == 'function' ) {
// use filter as function
return function( item ) {
return filter( item.element );
};
}
// default, use filter as selector string
return function( item ) {
return matchesSelector( item.element, filter );
};
};
// -------------------------- sorting -------------------------- //
/**
* @params {Array} elems
* @public
*/
proto.updateSortData = function( elems ) {
// get items
var items;
if ( elems ) {
elems = utils.makeArray( elems );
items = this.getItems( elems );
} else {
// update all items if no elems provided
items = this.items;
}
this._getSorters();
this._updateItemsSortData( items );
};
proto._getSorters = function() {
var getSortData = this.options.getSortData;
for ( var key in getSortData ) {
var sorter = getSortData[ key ];
this._sorters[ key ] = mungeSorter( sorter );
}
};
/**
* @params {Array} items - of Isotope.Items
* @private
*/
proto._updateItemsSortData = function( items ) {
// do not update if no items
var len = items && items.length;
for ( var i=0; len && i < len; i++ ) {
var item = items[i];
item.updateSortData();
}
};
// ----- munge sorter ----- //
// encapsulate this, as we just need mungeSorter
// other functions in here are just for munging
var mungeSorter = ( function() {
// add a magic layer to sorters for convienent shorthands
// `.foo-bar` will use the text of .foo-bar querySelector
// `[foo-bar]` will use attribute
// you can also add parser
// `.foo-bar parseInt` will parse that as a number
function mungeSorter( sorter ) {
// if not a string, return function or whatever it is
if ( typeof sorter != 'string' ) {
return sorter;
}
// parse the sorter string
var args = trim( sorter ).split(' ');
var query = args[0];
// check if query looks like [an-attribute]
var attrMatch = query.match( /^\[(.+)\]$/ );
var attr = attrMatch && attrMatch[1];
var getValue = getValueGetter( attr, query );
// use second argument as a parser
var parser = Isotope.sortDataParsers[ args[1] ];
// parse the value, if there was a parser
sorter = parser ? function( elem ) {
return elem && parser( getValue( elem ) );
} :
// otherwise just return value
function( elem ) {
return elem && getValue( elem );
};
return sorter;
}
// get an attribute getter, or get text of the querySelector
function getValueGetter( attr, query ) {
// if query looks like [foo-bar], get attribute
if ( attr ) {
return function getAttribute( elem ) {
return elem.getAttribute( attr );
};
}
// otherwise, assume its a querySelector, and get its text
return function getChildText( elem ) {
var child = elem.querySelector( query );
return child && child.textContent;
};
}
return mungeSorter;
})();
// parsers used in getSortData shortcut strings
Isotope.sortDataParsers = {
'parseInt': function( val ) {
return parseInt( val, 10 );
},
'parseFloat': function( val ) {
return parseFloat( val );
}
};
// ----- sort method ----- //
// sort filteredItem order
proto._sort = function() {
if ( !this.options.sortBy ) {
return;
}
// keep track of sortBy History
var sortBys = utils.makeArray( this.options.sortBy );
if ( !this._getIsSameSortBy( sortBys ) ) {
// concat all sortBy and sortHistory, add to front, oldest goes in last
this.sortHistory = sortBys.concat( this.sortHistory );
}
// sort magic
var itemSorter = getItemSorter( this.sortHistory, this.options.sortAscending );
this.filteredItems.sort( itemSorter );
};
// check if sortBys is same as start of sortHistory
proto._getIsSameSortBy = function( sortBys ) {
for ( var i=0; i < sortBys.length; i++ ) {
if ( sortBys[i] != this.sortHistory[i] ) {
return false;
}
}
return true;
};
// returns a function used for sorting
function getItemSorter( sortBys, sortAsc ) {
return function sorter( itemA, itemB ) {
// cycle through all sortKeys
for ( var i = 0; i < sortBys.length; i++ ) {
var sortBy = sortBys[i];
var a = itemA.sortData[ sortBy ];
var b = itemB.sortData[ sortBy ];
if ( a > b || a < b ) {
// if sortAsc is an object, use the value given the sortBy key
var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc;
var direction = isAscending ? 1 : -1;
return ( a > b ? 1 : -1 ) * direction;
}
}
return 0;
};
}
// -------------------------- methods -------------------------- //
// get layout mode
proto._mode = function() {
var layoutMode = this.options.layoutMode;
var mode = this.modes[ layoutMode ];
if ( !mode ) {
// TODO console.error
throw new Error( 'No layout mode: ' + layoutMode );
}
// HACK sync mode's options
// any options set after init for layout mode need to be synced
mode.options = this.options[ layoutMode ];
return mode;
};
proto._resetLayout = function() {
// trigger original reset layout
Outlayer.prototype._resetLayout.call( this );
this._mode()._resetLayout();
};
proto._getItemLayoutPosition = function( item ) {
return this._mode()._getItemLayoutPosition( item );
};
proto._manageStamp = function( stamp ) {
this._mode()._manageStamp( stamp );
};
proto._getContainerSize = function() {
return this._mode()._getContainerSize();
};
proto.needsResizeLayout = function() {
return this._mode().needsResizeLayout();
};
// -------------------------- adding & removing -------------------------- //
// HEADS UP overwrites default Outlayer appended
proto.appended = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded( items );
// add to filteredItems
this.filteredItems = this.filteredItems.concat( filteredItems );
};
// HEADS UP overwrites default Outlayer prepended
proto.prepended = function( elems ) {
var items = this._itemize( elems );
if ( !items.length ) {
return;
}
// start new layout
this._resetLayout();
this._manageStamps();
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded( items );
// layout previous items
this.layoutItems( this.filteredItems );
// add to items and filteredItems
this.filteredItems = filteredItems.concat( this.filteredItems );
this.items = items.concat( this.items );
};
proto._filterRevealAdded = function( items ) {
var filtered = this._filter( items );
this.hide( filtered.needHide );
// reveal all new items
this.reveal( filtered.matches );
// layout new items, no transition
this.layoutItems( filtered.matches, true );
return filtered.matches;
};
/**
* Filter, sort, and layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.insert = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// append item elements
var i, item;
var len = items.length;
for ( i=0; i < len; i++ ) {
item = items[i];
this.element.appendChild( item.element );
}
// filter new stuff
var filteredInsertItems = this._filter( items ).matches;
// set flag
for ( i=0; i < len; i++ ) {
items[i].isLayoutInstant = true;
}
this.arrange();
// reset flag
for ( i=0; i < len; i++ ) {
delete items[i].isLayoutInstant;
}
this.reveal( filteredInsertItems );
};
var _remove = proto.remove;
proto.remove = function( elems ) {
elems = utils.makeArray( elems );
var removeItems = this.getItems( elems );
// do regular thing
_remove.call( this, elems );
// bail if no items to remove
var len = removeItems && removeItems.length;
// remove elems from filteredItems
for ( var i=0; len && i < len; i++ ) {
var item = removeItems[i];
// remove item from collection
utils.removeFrom( this.filteredItems, item );
}
};
proto.shuffle = function() {
// update random sortData
for ( var i=0; i < this.items.length; i++ ) {
var item = this.items[i];
item.sortData.random = Math.random();
}
this.options.sortBy = 'random';
this._sort();
this._layout();
};
/**
* trigger fn without transition
* kind of hacky to have this in the first place
* @param {Function} fn
* @param {Array} args
* @returns ret
* @private
*/
proto._noTransition = function( fn, args ) {
// save transitionDuration before disabling
var transitionDuration = this.options.transitionDuration;
// disable transition
this.options.transitionDuration = 0;
// do it
var returnValue = fn.apply( this, args );
// re-enable transition for reveal
this.options.transitionDuration = transitionDuration;
return returnValue;
};
// ----- helper methods ----- //
/**
* getter method for getting filtered item elements
* @returns {Array} elems - collection of item elements
*/
proto.getFilteredItemElements = function() {
return this.filteredItems.map( function( item ) {
return item.element;
});
};
// ----- ----- //
return Isotope;
}));
================================================
FILE: js/isotope.js
================================================
/*!
* Isotope v3.0.6
*
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
*
* https://isotope.metafizzy.co
* Copyright 2010-2020 Metafizzy
*/
/* eslint-disable max-params */
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
'get-size/get-size',
'desandro-matches-selector/matches-selector',
'fizzy-ui-utils/utils',
'./item',
'./layout-mode',
// include default layout modes
'./layout-modes/masonry',
'./layout-modes/fit-rows',
'./layout-modes/vertical',
],
function( Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ) {
return factory( window, Outlayer, getSize, matchesSelector, utils,
Item, LayoutMode );
} );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('outlayer'),
require('get-size'),
require('desandro-matches-selector'),
require('fizzy-ui-utils'),
require('./item'),
require('./layout-mode'),
// include default layout modes
require('./layout-modes/masonry'),
require('./layout-modes/fit-rows'),
require('./layout-modes/vertical')
);
} else {
// browser global
window.Isotope = factory(
window,
window.Outlayer,
window.getSize,
window.matchesSelector,
window.fizzyUIUtils,
window.Isotope.Item,
window.Isotope.LayoutMode
);
}
}( window, function factory( window, Outlayer, getSize, matchesSelector, utils,
Item, LayoutMode ) {
'use strict';
// -------------------------- vars -------------------------- //
var jQuery = window.jQuery;
// -------------------------- helpers -------------------------- //
var trim = String.prototype.trim ?
function( str ) {
return str.trim();
} :
function( str ) {
return str.replace( /^\s+|\s+$/g, '' );
};
// -------------------------- isotopeDefinition -------------------------- //
// create an Outlayer layout class
var Isotope = Outlayer.create( 'isotope', {
layoutMode: 'masonry',
isJQueryFiltering: true,
sortAscending: true,
} );
Isotope.Item = Item;
Isotope.LayoutMode = LayoutMode;
var proto = Isotope.prototype;
proto._create = function() {
this.itemGUID = 0;
// functions that sort items
this._sorters = {};
this._getSorters();
// call super
Outlayer.prototype._create.call( this );
// create layout modes
this.modes = {};
// start filteredItems with all items
this.filteredItems = this.items;
// keep of track of sortBys
this.sortHistory = [ 'original-order' ];
// create from registered layout modes
for ( var name in LayoutMode.modes ) {
this._initLayoutMode( name );
}
};
proto.reloadItems = function() {
// reset item ID counter
this.itemGUID = 0;
// call super
Outlayer.prototype.reloadItems.call( this );
};
proto._itemize = function() {
var items = Outlayer.prototype._itemize.apply( this, arguments );
// assign ID for original-order
for ( var i = 0; i < items.length; i++ ) {
var item = items[i];
item.id = this.itemGUID++;
}
this._updateItemsSortData( items );
return items;
};
// -------------------------- layout -------------------------- //
proto._initLayoutMode = function( name ) {
var Mode = LayoutMode.modes[ name ];
// set mode options
// HACK extend initial options, back-fill in default options
var initialOpts = this.options[ name ] || {};
this.options[ name ] = Mode.options ?
utils.extend( Mode.options, initialOpts ) : initialOpts;
// init layout mode instance
this.modes[ name ] = new Mode( this );
};
proto.layout = function() {
// if first time doing layout, do all magic
if ( !this._isLayoutInited && this._getOption('initLayout') ) {
this.arrange();
return;
}
this._layout();
};
// private method to be used in layout() & magic()
proto._layout = function() {
// don't animate first layout
var isInstant = this._getIsInstant();
// layout flow
this._resetLayout();
this._manageStamps();
this.layoutItems( this.filteredItems, isInstant );
// flag for initalized
this._isLayoutInited = true;
};
// filter + sort + layout
proto.arrange = function( opts ) {
// set any options pass
this.option( opts );
this._getIsInstant();
// filter, sort, and layout
// filter
var filtered = this._filter( this.items );
this.filteredItems = filtered.matches;
this._bindArrangeComplete();
if ( this._isInstant ) {
this._noTransition( this._hideReveal, [ filtered ] );
} else {
this._hideReveal( filtered );
}
this._sort();
this._layout();
};
// alias to _init for main plugin method
proto._init = proto.arrange;
proto._hideReveal = function( filtered ) {
this.reveal( filtered.needReveal );
this.hide( filtered.needHide );
};
// HACK
// Don't animate/transition first layout
// Or don't animate/transition other layouts
proto._getIsInstant = function() {
var isLayoutInstant = this._getOption('layoutInstant');
var isInstant = isLayoutInstant !== undefined ? isLayoutInstant :
!this._isLayoutInited;
this._isInstant = isInstant;
return isInstant;
};
// listen for layoutComplete, hideComplete and revealComplete
// to trigger arrangeComplete
proto._bindArrangeComplete = function() {
// listen for 3 events to trigger arrangeComplete
var isLayoutComplete, isHideComplete, isRevealComplete;
var _this = this;
function arrangeParallelCallback() {
if ( isLayoutComplete && isHideComplete && isRevealComplete ) {
_this.dispatchEvent( 'arrangeComplete', null, [ _this.filteredItems ] );
}
}
this.once( 'layoutComplete', function() {
isLayoutComplete = true;
arrangeParallelCallback();
} );
this.once( 'hideComplete', function() {
isHideComplete = true;
arrangeParallelCallback();
} );
this.once( 'revealComplete', function() {
isRevealComplete = true;
arrangeParallelCallback();
} );
};
// -------------------------- filter -------------------------- //
proto._filter = function( items ) {
var filter = this.options.filter;
filter = filter || '*';
var matches = [];
var hiddenMatched = [];
var visibleUnmatched = [];
var test = this._getFilterTest( filter );
// test each item
for ( var i = 0; i < items.length; i++ ) {
var item = items[i];
if ( item.isIgnored ) {
continue;
}
// add item to either matched or unmatched group
var isMatched = test( item );
// item.isFilterMatched = isMatched;
// add to matches if its a match
if ( isMatched ) {
matches.push( item );
}
// add to additional group if item needs to be hidden or revealed
if ( isMatched && item.isHidden ) {
hiddenMatched.push( item );
} else if ( !isMatched && !item.isHidden ) {
visibleUnmatched.push( item );
}
}
// return collections of items to be manipulated
return {
matches: matches,
needReveal: hiddenMatched,
needHide: visibleUnmatched,
};
};
// get a jQuery, function, or a matchesSelector test given the filter
proto._getFilterTest = function( filter ) {
if ( jQuery && this.options.isJQueryFiltering ) {
// use jQuery
return function( item ) {
return jQuery( item.element ).is( filter );
};
}
if ( typeof filter == 'function' ) {
// use filter as function
return function( item ) {
return filter( item.element );
};
}
// default, use filter as selector string
return function( item ) {
return matchesSelector( item.element, filter );
};
};
// -------------------------- sorting -------------------------- //
/**
* @param {Array} elems
*/
proto.updateSortData = function( elems ) {
// get items
var items;
if ( elems ) {
elems = utils.makeArray( elems );
items = this.getItems( elems );
} else {
// update all items if no elems provided
items = this.items;
}
this._getSorters();
this._updateItemsSortData( items );
};
// ----- munge sorter ----- //
// encapsulate this, as we just need mungeSorter
// other functions in here are just for munging
var mungeSorter = ( function() {
// add a magic layer to sorters for convienent shorthands
// `.foo-bar` will use the text of .foo-bar querySelector
// `[foo-bar]` will use attribute
// you can also add parser
// `.foo-bar parseInt` will parse that as a number
function mngSorter( sorter ) {
// if not a string, return function or whatever it is
if ( typeof sorter != 'string' ) {
return sorter;
}
// parse the sorter string
var args = trim( sorter ).split(' ');
var query = args[0];
// check if query looks like [an-attribute]
var attrMatch = query.match( /^\[(.+)\]$/ );
var attr = attrMatch && attrMatch[1];
var getValue = getValueGetter( attr, query );
// use second argument as a parser
var parser = Isotope.sortDataParsers[ args[1] ];
// parse the value, if there was a parser
sorter = parser ? function( elem ) {
return elem && parser( getValue( elem ) );
} :
// otherwise just return value
function( elem ) {
return elem && getValue( elem );
};
return sorter;
}
// get an attribute getter, or get text of the querySelector
function getValueGetter( attr, query ) {
// if query looks like [foo-bar], get attribute
if ( attr ) {
return function getAttribute( elem ) {
return elem.getAttribute( attr );
};
}
// otherwise, assume its a querySelector, and get its text
return function getChildText( elem ) {
var child = elem.querySelector( query );
return child && child.textContent;
};
}
return mngSorter;
} )();
proto._getSorters = function() {
var getSortData = this.options.getSortData;
for ( var key in getSortData ) {
var sorter = getSortData[ key ];
this._sorters[ key ] = mungeSorter( sorter );
}
};
/**
* @param {Array} items - of Isotope.Items
*/
proto._updateItemsSortData = function( items ) {
// do not update if no items
var len = items && items.length;
if ( !len ) {
return;
}
for ( var i = 0; i < len; i++ ) {
var item = items[i];
item.updateSortData();
}
};
// parsers used in getSortData shortcut strings
Isotope.sortDataParsers = {
parseInt: function( val ) {
return parseInt( val, 10 );
},
parseFloat: function( val ) {
return parseFloat( val );
},
};
// ----- sort method ----- //
// sort filteredItem order
proto._sort = function() {
if ( !this.options.sortBy ) {
return;
}
// keep track of sortBy History
var sortBys = utils.makeArray( this.options.sortBy );
if ( !this._getIsSameSortBy( sortBys ) ) {
// concat all sortBy and sortHistory, add to front, oldest goes in last
this.sortHistory = sortBys.concat( this.sortHistory );
}
// sort magic
var itemSorter = getItemSorter( this.sortHistory, this.options.sortAscending );
this.filteredItems.sort( itemSorter );
};
// check if sortBys is same as start of sortHistory
proto._getIsSameSortBy = function( sortBys ) {
for ( var i = 0; i < sortBys.length; i++ ) {
if ( sortBys[i] != this.sortHistory[i] ) {
return false;
}
}
return true;
};
// returns a function used for sorting
function getItemSorter( sortBys, sortAsc ) {
return function sorter( itemA, itemB ) {
// cycle through all sortKeys
for ( var i = 0; i < sortBys.length; i++ ) {
var sortBy = sortBys[i];
var a = itemA.sortData[ sortBy ];
var b = itemB.sortData[ sortBy ];
if ( a > b || a < b ) {
// if sortAsc is an object, use the value given the sortBy key
var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc;
var direction = isAscending ? 1 : -1;
return ( a > b ? 1 : -1 ) * direction;
}
}
return 0;
};
}
// -------------------------- methods -------------------------- //
// get layout mode
proto._mode = function() {
var layoutMode = this.options.layoutMode;
var mode = this.modes[ layoutMode ];
if ( !mode ) {
// TODO console.error
throw new Error( 'No layout mode: ' + layoutMode );
}
// HACK sync mode's options
// any options set after init for layout mode need to be synced
mode.options = this.options[ layoutMode ];
return mode;
};
proto._resetLayout = function() {
// trigger original reset layout
Outlayer.prototype._resetLayout.call( this );
this._mode()._resetLayout();
};
proto._getItemLayoutPosition = function( item ) {
return this._mode()._getItemLayoutPosition( item );
};
proto._manageStamp = function( stamp ) {
this._mode()._manageStamp( stamp );
};
proto._getContainerSize = function() {
return this._mode()._getContainerSize();
};
proto.needsResizeLayout = function() {
return this._mode().needsResizeLayout();
};
// -------------------------- adding & removing -------------------------- //
// HEADS UP overwrites default Outlayer appended
proto.appended = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded( items );
// add to filteredItems
this.filteredItems = this.filteredItems.concat( filteredItems );
};
// HEADS UP overwrites default Outlayer prepended
proto.prepended = function( elems ) {
var items = this._itemize( elems );
if ( !items.length ) {
return;
}
// start new layout
this._resetLayout();
this._manageStamps();
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded( items );
// layout previous items
this.layoutItems( this.filteredItems );
// add to items and filteredItems
this.filteredItems = filteredItems.concat( this.filteredItems );
this.items = items.concat( this.items );
};
proto._filterRevealAdded = function( items ) {
var filtered = this._filter( items );
this.hide( filtered.needHide );
// reveal all new items
this.reveal( filtered.matches );
// layout new items, no transition
this.layoutItems( filtered.matches, true );
return filtered.matches;
};
/**
* Filter, sort, and layout newly-appended item elements
* @param {[Array, NodeList, Element]} elems
*/
proto.insert = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// append item elements
var i, item;
var len = items.length;
for ( i = 0; i < len; i++ ) {
item = items[i];
this.element.appendChild( item.element );
}
// filter new stuff
var filteredInsertItems = this._filter( items ).matches;
// set flag
for ( i = 0; i < len; i++ ) {
items[i].isLayoutInstant = true;
}
this.arrange();
// reset flag
for ( i = 0; i < len; i++ ) {
delete items[i].isLayoutInstant;
}
this.reveal( filteredInsertItems );
};
var _remove = proto.remove;
proto.remove = function( elems ) {
elems = utils.makeArray( elems );
var removeItems = this.getItems( elems );
// do regular thing
_remove.call( this, elems );
// bail if no items to remove
var len = removeItems && removeItems.length;
// remove elems from filteredItems
if ( !len ) {
return;
}
for ( var i = 0; i < len; i++ ) {
var item = removeItems[i];
// remove item from collection
utils.removeFrom( this.filteredItems, item );
}
};
proto.shuffle = function() {
// update random sortData
for ( var i = 0; i < this.items.length; i++ ) {
var item = this.items[i];
item.sortData.random = Math.random();
}
this.options.sortBy = 'random';
this._sort();
this._layout();
};
/**
* trigger fn without transition
* kind of hacky to have this in the first place
* @param {Function} fn
* @param {Array} args
* @returns {Object} returnValue
* @private
*/
proto._noTransition = function( fn, args ) {
// save transitionDuration before disabling
var transitionDuration = this.options.transitionDuration;
// disable transition
this.options.transitionDuration = 0;
// do it
var returnValue = fn.apply( this, args );
// re-enable transition for reveal
this.options.transitionDuration = transitionDuration;
return returnValue;
};
// ----- helper methods ----- //
/**
* getter method for getting filtered item elements
* @returns {Array} elems - collection of item elements
*/
proto.getFilteredItemElements = function() {
return this.filteredItems.map( function( item ) {
return item.element;
} );
};
// ----- ----- //
return Isotope;
} ) );
================================================
FILE: js/item.js
================================================
/**
* Isotope Item
**/
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer')
);
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.Item = factory(
window.Outlayer
);
}
}( window, function factory( Outlayer ) {
'use strict';
// -------------------------- Item -------------------------- //
// sub-class Outlayer Item
function Item() {
Outlayer.Item.apply( this, arguments );
}
var proto = Item.prototype = Object.create( Outlayer.Item.prototype );
var _create = proto._create;
proto._create = function() {
// assign id, used for original-order sorting
this.id = this.layout.itemGUID++;
_create.call( this );
this.sortData = {};
};
proto.updateSortData = function() {
if ( this.isIgnored ) {
return;
}
// default sorters
this.sortData.id = this.id;
// for backward compatibility
this.sortData['original-order'] = this.id;
this.sortData.random = Math.random();
// go thru getSortData obj and apply the sorters
var getSortData = this.layout.options.getSortData;
var sorters = this.layout._sorters;
for ( var key in getSortData ) {
var sorter = sorters[ key ];
this.sortData[ key ] = sorter( this.element, this );
}
};
var _destroy = proto.destroy;
proto.destroy = function() {
// call super
_destroy.apply( this, arguments );
// reset display, #741
this.css({
display: '',
});
};
return Item;
} ) );
================================================
FILE: js/layout-mode.js
================================================
/**
* Isotope LayoutMode
*/
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'get-size/get-size',
'outlayer/outlayer',
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('get-size'),
require('outlayer')
);
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.LayoutMode = factory(
window.getSize,
window.Outlayer
);
}
}( window, function factory( getSize, Outlayer ) {
'use strict';
// layout mode class
function LayoutMode( isotope ) {
this.isotope = isotope;
// link properties
if ( isotope ) {
this.options = isotope.options[ this.namespace ];
this.element = isotope.element;
this.items = isotope.filteredItems;
this.size = isotope.size;
}
}
var proto = LayoutMode.prototype;
/**
* some methods should just defer to default Outlayer method
* and reference the Isotope instance as `this`
**/
var facadeMethods = [
'_resetLayout',
'_getItemLayoutPosition',
'_manageStamp',
'_getContainerSize',
'_getElementOffset',
'needsResizeLayout',
'_getOption',
];
facadeMethods.forEach( function( methodName ) {
proto[ methodName ] = function() {
return Outlayer.prototype[ methodName ].apply( this.isotope, arguments );
};
} );
// ----- ----- //
// for horizontal layout modes, check vertical size
proto.needsVerticalResizeLayout = function() {
// don't trigger if size did not change
var size = getSize( this.isotope.element );
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.isotope.size && size;
return hasSizes && size.innerHeight != this.isotope.size.innerHeight;
};
// ----- measurements ----- //
proto._getMeasurement = function() {
this.isotope._getMeasurement.apply( this, arguments );
};
proto.getColumnWidth = function() {
this.getSegmentSize( 'column', 'Width' );
};
proto.getRowHeight = function() {
this.getSegmentSize( 'row', 'Height' );
};
/**
* get columnWidth or rowHeight
* @param {String} segment - 'column' or 'row'
* @param {String} size - 'Width' or 'Height'
*/
proto.getSegmentSize = function( segment, size ) {
var segmentName = segment + size;
var outerSize = 'outer' + size;
// columnWidth / outerWidth // rowHeight / outerHeight
this._getMeasurement( segmentName, outerSize );
// got rowHeight or columnWidth, we can chill
if ( this[ segmentName ] ) {
return;
}
// fall back to item of first element
var firstItemSize = this.getFirstItemSize();
this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] ||
// or size of container
this.isotope.size[ 'inner' + size ];
};
proto.getFirstItemSize = function() {
var firstItem = this.isotope.filteredItems[0];
return firstItem && firstItem.element && getSize( firstItem.element );
};
// ----- methods that should reference isotope ----- //
proto.layout = function() {
this.isotope.layout.apply( this.isotope, arguments );
};
proto.getSize = function() {
this.isotope.getSize();
this.size = this.isotope.size;
};
// -------------------------- create -------------------------- //
LayoutMode.modes = {};
LayoutMode.create = function( namespace, options ) {
function Mode() {
LayoutMode.apply( this, arguments );
}
Mode.prototype = Object.create( proto );
Mode.prototype.constructor = Mode;
// default options
if ( options ) {
Mode.options = options;
}
Mode.prototype.namespace = namespace;
// register in Isotope
LayoutMode.modes[ namespace ] = Mode;
return Mode;
};
return LayoutMode;
} ) );
================================================
FILE: js/layout-modes/fit-rows.js
================================================
/**
* fitRows layout mode
*/
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'../layout-mode',
],
factory );
} else if ( typeof exports == 'object' ) {
// CommonJS
module.exports = factory(
require('../layout-mode')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode
);
}
}( window, function factory( LayoutMode ) {
'use strict';
var FitRows = LayoutMode.create('fitRows');
var proto = FitRows.prototype;
proto._resetLayout = function() {
this.x = 0;
this.y = 0;
this.maxY = 0;
this._getMeasurement( 'gutter', 'outerWidth' );
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
var itemWidth = item.size.outerWidth + this.gutter;
// if this element cannot fit in the current row
var containerWidth = this.isotope.size.innerWidth + this.gutter;
if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
this.x = 0;
this.y = this.maxY;
}
var position = {
x: this.x,
y: this.y,
};
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
this.x += itemWidth;
return position;
};
proto._getContainerSize = function() {
return { height: this.maxY };
};
return FitRows;
} ) );
================================================
FILE: js/layout-modes/masonry.js
================================================
/*!
* Masonry layout mode
* sub-classes Masonry
* https://masonry.desandro.com
*/
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'../layout-mode',
'masonry-layout/masonry',
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('../layout-mode'),
require('masonry-layout')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode,
window.Masonry
);
}
}( window, function factory( LayoutMode, Masonry ) {
'use strict';
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var MasonryMode = LayoutMode.create('masonry');
var proto = MasonryMode.prototype;
var keepModeMethods = {
_getElementOffset: true,
layout: true,
_getMeasurement: true,
};
// inherit Masonry prototype
for ( var method in Masonry.prototype ) {
// do not inherit mode methods
if ( !keepModeMethods[ method ] ) {
proto[ method ] = Masonry.prototype[ method ];
}
}
var measureColumns = proto.measureColumns;
proto.measureColumns = function() {
// set items, used if measuring first item
this.items = this.isotope.filteredItems;
measureColumns.call( this );
};
// point to mode options for fitWidth
var _getOption = proto._getOption;
proto._getOption = function( option ) {
if ( option == 'fitWidth' ) {
return this.options.isFitWidth !== undefined ?
this.options.isFitWidth : this.options.fitWidth;
}
return _getOption.apply( this.isotope, arguments );
};
return MasonryMode;
} ) );
================================================
FILE: js/layout-modes/vertical.js
================================================
/**
* vertical layout mode
*/
( function( window, factory ) {
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'../layout-mode',
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('../layout-mode')
);
} else {
// browser global
factory(
window.Isotope.LayoutMode
);
}
}( window, function factory( LayoutMode ) {
'use strict';
var Vertical = LayoutMode.create( 'vertical', {
horizontalAlignment: 0,
} );
var proto = Vertical.prototype;
proto._resetLayout = function() {
this.y = 0;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) *
this.options.horizontalAlignment;
var y = this.y;
this.y += item.size.outerHeight;
return { x: x, y: y };
};
proto._getContainerSize = function() {
return { height: this.y };
};
return Vertical;
} ) );
================================================
FILE: package.json
================================================
{
"name": "isotope-layout",
"version": "3.0.6",
"description": "Filter and sort magical layouts",
"main": "js/isotope.js",
"files": [
"js",
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "node bin/lint-json.js && npx eslint .",
"lintFix": "npx eslint . --fix",
"dist": "npm run bundleJs && npm run uglify",
"bundleJs": "node bin/bundle-js.js",
"uglify": "npx uglifyjs dist/isotope.pkgd.js -o dist/isotope.pkgd.min.js --mangle --comments /^!/",
"version": "node bin/version.js && npm run dist && git add -A css js dist"
},
"dependencies": {
"desandro-matches-selector": "^2.0.0",
"fizzy-ui-utils": "^2.0.4",
"get-size": "^2.0.0",
"masonry-layout": "^4.1.0",
"outlayer": "^2.1.0"
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-plugin-metafizzy": "^1.0.0",
"jquery": "^3.3.1",
"jquery-bridget": "^2",
"jshint": "^2.11.0",
"qunitjs": "^1.15",
"requirejs": "^2.3.6",
"uglifyjs": "^2.4.11"
},
"repository": {
"type": "git",
"url": "git://github.com/metafizzy/isotope.git"
},
"bugs": {
"url": "https://github.com/metafizzy/isotope/issues"
},
"homepage": "https://isotope.metafizzy.co",
"directories": {
"test": "test"
},
"keywords": [
"DOM",
"browser",
"masonry",
"layout",
"filter",
"sort",
"jquery-plugin"
],
"author": "Metafizzy",
"license": "GPL-3.0"
}
================================================
FILE: sandbox/basic.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>basic</title>
<link rel="stylesheet" href="sandbox.css" />
</head>
<body>
<h1>basic</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/item.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
var container = document.querySelector('#basic');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitRows'
});
</script>
</body>
</html>
================================================
FILE: sandbox/bottom-up.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bottom up</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#stamped .stamp1 {
width: 30%;
height: 100px;
left: 30%;
bottom: 20px;
}
#stamped .stamp2 {
width: 200px;
height: 50px;
left: 20px;
bottom: 50px;
}
</style>
</head>
<body>
<h1>bottom up</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="stamped" class="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
( function() {
var container = document.querySelector('#basic');
var iso = new Isotope( container, {
isOriginTop: false,
masonry: {
columnWidth: 60
}
});
})();
( function() {
var container = document.querySelector('#stamped');
var iso = new Isotope( container, {
itemSelector: '.item',
isOriginTop: false,
masonry: {
columnWidth: 60,
gutter: 10,
},
stamp: '.stamp'
});
})();
</script>
</body>
</html>
================================================
FILE: sandbox/browserify/browserify.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Browserify</title>
<link rel="stylesheet" href="../sandbox.css" />
<style>
/* for horizontal layout modes */
#container {
/*height: 400px;*/
}
</style>
</head>
<body>
<h1>Browserify</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
<button data-isotope-value="number-greater-than-50">number > 50</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
================================================
FILE: sandbox/browserify/jq-main.js
================================================
/* eslint-disable id-length */
var Isotope = window.Isotope = require('../../js/isotope');
var $ = require('jquery');
require('jquery-bridget');
// enable $().isotope() plugin
$.bridget( 'isotope', Isotope );
var $container = $('#container').isotope({
layoutMode: 'fitRows',
transitionDuration: '0.8s',
cellsByRow: {
columnWidth: 130,
rowHeight: 140,
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
return parseFloat( $( itemElem ).find('.weight')
.text()
.replace( /[()]/g, '' ) );
},
},
});
$('#options').on( 'click', 'button', function( event ) {
var $target = $( event.target );
var key = $target.parent().attr('data-isotope-key');
var value = $target.attr('data-isotope-value');
if ( key === 'filter' && value === 'number-greater-than-50' ) {
value = function( elem ) {
var numberText = $( elem ).find('.number')
.text();
return parseInt( numberText, 10 ) > 40;
};
}
console.log( key, value );
var opts = {};
opts[ key ] = value;
$container.isotope( opts );
} );
================================================
FILE: sandbox/browserify/main.js
================================================
var Isotope = window.Isotope = require('../../js/isotope');
var eventie = require('eventie');
var matchesSelector = require('desandro-matches-selector');
// require('isotope-fit-columns');
// require('isotope-cells-by-column');
// require('isotope-horizontal');
// require('isotope-masonry-horizontal');
function getText( elem ) {
return elem.textContent || elem.innerText;
}
var iso = window.iso = new Isotope( '#container', {
layoutMode: 'fitRows',
transitionDuration: '0.8s',
cellsByRow: {
columnWidth: 130,
rowHeight: 140,
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
var weight = itemElem.querySelector('.weight').textContent;
return parseFloat( weight.replace( /[()]/g, '' ) );
},
},
} );
var options = document.querySelector('#options');
eventie.bind( options, 'click', function( event ) {
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
var key = event.target.parentNode.getAttribute('data-isotope-key');
var value = event.target.getAttribute('data-isotope-value');
if ( key === 'filter' && value === 'number-greater-than-50' ) {
value = function( elem ) {
var numberText = getText( elem.querySelector('.number') );
return parseInt( numberText, 10 ) > 40;
};
}
console.log( key, value );
iso.options[ key ] = value;
iso.arrange();
} );
================================================
FILE: sandbox/cells-by-row.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cellsByRow</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
.element.alkali { width: 170px; height: 120px; }
.element.alkaline-earth {}
.element.lanthanoid { height: 170px; }
.element.actinoid { width: 170px; }
.element.transition { height: 220px; }
/* .element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }*/
</style>
</head>
<body>
<h1>cellsByRow</h1>
<div id="options">
<h2>Sort</h2>
<ul class="option-set">
<li><a href="#original-order">original-order</a></li>
<li><a href="#number">number</a></li>
<li><a href="#name">name</a></li>
<li><a href="#symbol">symbol</a></li>
<li><a href="#weight">weight</a></li>
<li><a href="#category">category</a></li>
</ul>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/vertical.js"></script>
<script src="../bower_components/isotope-cells-by-row/cells-by-row.js"></script>
<script>
docReady( function() {
var container = document.querySelector('#container');
var iso = window.iso = new Isotope( container, {
// sortBy: 'symbol',
// filter: '.metal',
layoutMode: 'cellsByRow',
// isOriginLeft: false,
// isOriginTop: false,
cellsByRow: {
columnWidth: 200,
rowHeight: 150
},
vertical: {
horizontalAlignment: 0.5
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') );
}
}
});
var options = document.querySelector('#options');
eventie.bind( options, 'click', function( event ) {
if ( !matchesSelector( event.target, 'a' ) ) {
return;
}
// use link's href, remove leading hash
var sortBy = event.target.getAttribute('href').slice( 1 );
sortBy.slice( 0, 1 );
iso.arrange({ sortBy: sortBy });
event.preventDefault();
});
});
function getText( elem ) {
return elem.textContent || elem.innerText;
}
</script>
</body>
</html>
================================================
FILE: sandbox/combination-filters-inclusive.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>combination filters inclusive</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- button ---- */
.button {
display: inline-block;
padding: 0.5em 1.0em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.isotope {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.isotope:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 32px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* color-shape */
.color-shape {
width: 70px;
height: 70px;
margin: 5px;
float: left;
}
.color-shape.round {
border-radius: 35px;
}
.color-shape.big.round {
border-radius: 75px;
}
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }
</style>
</head>
<body>
<h1>combination filters</h1>
<div id="filters">
<div class="ui-group">
<h3>Color</h3>
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".red">red</button>
<button class="button" data-filter=".blue">blue</button>
<button class="button" data-filter=".yellow">yellow</button>
</div>
</div>
<div class="ui-group">
<h3>Size</h3>
<div class="button-group js-radio-button-group" data-filter-group="size">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".small">small</button>
<button class="button" data-filter=".wide">wide</button>
<button class="button" data-filter=".big">big</button>
<button class="button" data-filter=".tall">tall</button>
</div>
</div>
<div class="ui-group">
<h3>Shape</h3>
<div class="button-group js-radio-button-group" data-filter-group="shape">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".round">round</button>
<button class="button" data-filter=".square">square</button>
</div>
</div>
</div>
<div class="isotope">
<div class="color-shape small round red"></div>
<div class="color-shape small round blue"></div>
<div class="color-shape small round yellow"></div>
<div class="color-shape small square red"></div>
<div class="color-shape small square blue"></div>
<div class="color-shape small square yellow"></div>
<div class="color-shape wide round red"></div>
<div class="color-shape wide round blue"></div>
<div class="color-shape wide round yellow"></div>
<div class="color-shape wide square red"></div>
<div class="color-shape wide square blue"></div>
<div class="color-shape wide square yellow"></div>
<div class="color-shape big round red"></div>
<div class="color-shape big round blue"></div>
<div class="color-shape big round yellow"></div>
<div class="color-shape big square red"></div>
<div class="color-shape big square blue"></div>
<div class="color-shape big square yellow"></div>
<div class="color-shape tall round red"></div>
<div class="color-shape tall round blue"></div>
<div class="color-shape tall round yellow"></div>
<div class="color-shape tall square red"></div>
<div class="color-shape tall square blue"></div>
<div class="color-shape tall square yellow"></div>
</div>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.color-shape'
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
// $buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).toggleClass('is-checked');
});
});
});
</script>
</body>
</html>
================================================
FILE: sandbox/combination-filters.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>combination filters</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- button ---- */
.button {
display: inline-block;
padding: 0.5em 1.0em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.isotope {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.isotope:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 32px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* color-shape */
.color-shape {
width: 70px;
height: 70px;
margin: 5px;
float: left;
}
.color-shape.round {
border-radius: 35px;
}
.color-shape.big.round {
border-radius: 75px;
}
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }
</style>
</head>
<body>
<h1>combination filters</h1>
<div id="filters">
<div class="ui-group">
<h3>Color</h3>
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".red">red</button>
<button class="button" data-filter=".blue">blue</button>
<button class="button" data-filter=".yellow">yellow</button>
</div>
</div>
<div class="ui-group">
<h3>Size</h3>
<div class="button-group js-radio-button-group" data-filter-group="size">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".small">small</button>
<button class="button" data-filter=".wide">wide</button>
<button class="button" data-filter=".big">big</button>
<button class="button" data-filter=".tall">tall</button>
</div>
</div>
<div class="ui-group">
<h3>Shape</h3>
<div class="button-group js-radio-button-group" data-filter-group="shape">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".round">round</button>
<button class="button" data-filter=".square">square</button>
</div>
</div>
</div>
<div class="isotope">
<div class="color-shape small round red"></div>
<div class="color-shape small round blue"></div>
<div class="color-shape small round yellow"></div>
<div class="color-shape small square red"></div>
<div class="color-shape small square blue"></div>
<div class="color-shape small square yellow"></div>
<div class="color-shape wide round red"></div>
<div class="color-shape wide round blue"></div>
<div class="color-shape wide round yellow"></div>
<div class="color-shape wide square red"></div>
<div class="color-shape wide square blue"></div>
<div class="color-shape wide square yellow"></div>
<div class="color-shape big round red"></div>
<div class="color-shape big round blue"></div>
<div class="color-shape big round yellow"></div>
<div class="color-shape big square red"></div>
<div class="color-shape big square blue"></div>
<div class="color-shape big square yellow"></div>
<div class="color-shape tall round red"></div>
<div class="color-shape tall round blue"></div>
<div class="color-shape tall round yellow"></div>
<div class="color-shape tall square red"></div>
<div class="color-shape tall square blue"></div>
<div class="color-shape tall square yellow"></div>
</div>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.color-shape'
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( event.currentTarget ).addClass('is-checked');
});
});
});
</script>
</body>
</html>
================================================
FILE: sandbox/filter-sort.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>filter sort</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#container { width: 100%; }
</style>
</head>
<body>
<h1>filter sort</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
<button data-isotope-value="number-greater-than-50">number > 50</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/vertical.js"></script>
<script>
var container = document.querySelector('#container');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitRows',
transitionDuration: 400,
stagger: '0.1s',
cellsByRow: {
columnWidth: 130,
rowHeight: 140,
},
// filter: '.transition',
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
var weight = itemElem.querySelector('.weight').textContent;
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
var options = document.querySelector('#options');
options.addEventListener( 'click', function( event ) {
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
// var opt = {};
var key = event.target.parentNode.getAttribute('data-isotope-key');
var value = event.target.getAttribute('data-isotope-value');
if ( key === 'filter' && value === 'number-greater-than-50' ) {
value = function( elem ) {
var numberText = elem.querySelector('.number').textContent;
return parseInt( numberText, 10 ) > 40;
};
}
// console.log( key, value );
iso.options[ key ] = value;
iso.arrange();
});
// iso.on( 'hideComplete', function( items ) {
// console.log( 'hideComplete', items );
// })
// iso.on( 'revealComplete', function( items ) {
// console.log( 'revealComplete', items );
// })
// iso.on( 'arrangeComplete', function( items ) {
// console.log( 'arrangeComplete', items.length );
// });
</script>
</body>
</html>
================================================
FILE: sandbox/fitrows.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fitRows</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#gutter2 .gutter-sizer { width: 30px; }
</style>
</head>
<body>
<h1>fitRows</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="gutter1" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="gutter2" class="container">
<div class="gutter-sizer"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/item.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
var container = document.querySelector('#basic');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitRows'
});
// gutter with explicit value
new Isotope( '#gutter1', {
layoutMode: 'fitRows',
fitRows: {
gutter: 20
}
});
// gutter with element sizing
new Isotope( '#gutter2', {
itemSelector: '.item',
layoutMode: 'fitRows',
fitRows: {
gutter: '.gutter-sizer'
}
});
</script>
</body>
</html>
================================================
FILE: sandbox/fluid.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fluid</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
.container {
width: auto;
max-width: none;
}
.item, .grid-sizer { width: 50%; }
.item.w2 { width: 100%; }
.item.w3 { width: 105%; }
@media screen and (min-width: 768px) {
.item, .grid-sizer { width: 25%; }
.item.w2 { width: 50%; }
.item.w3 { width: 75%; }
}
</style>
</head>
<body>
<h1>fluid</h1>
<div class="container">
<div class="grid-sizer"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/item.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script>
var iso = new Isotope( '.container', {
itemSelector: '.item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
</script>
</body>
</html>
================================================
FILE: sandbox/horizontal-layout-modes.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>horizontal layout modes</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
body, html {
height: 100%;
}
#container {
position: relative;
height: 70%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>horizontal layout modes</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../bower_components/isotope-fit-columns/fit-columns.js"></script>
<script src="../bower_components/isotope-cells-by-column/cells-by-column.js"></script>
<script src="../bower_components/isotope-horizontal/horizontal.js"></script>
<script>
docReady( function() {
var container = document.querySelector('#container');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitColumns',
transitionDuration: '0.8s',
horizontal: {
verticalAlignment: 0.5
},
cellsByColumn: {
columnWidth: 130,
rowHeight: 140,
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') );
}
}
});
var options = document.querySelector('#options');
eventie.bind( options, 'click', function( event ) {
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
// var opt = {};
var key = event.target.parentNode.getAttribute('data-isotope-key');
var value = event.target.getAttribute('data-isotope-value');
console.log( key, value );
iso.options[ key ] = value;
iso.arrange();
});
});
function getText( elem ) {
return elem.textContent || elem.innerText;
}
</script>
</body>
</html>
================================================
FILE: sandbox/insert.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>insert</title>
<link rel="stylesheet" href="sandbox.css" />
</head>
<body>
<h1>insert</h1>
<p>
<button id="prepend">Prepend</button>
<button id="insert">Insert</button>
<button id="append">Append</button>
</p>
<div id="container">
<div class="item"><b>49</b></div>
<div class="item"><b>35</b></div>
<div class="item"><b>60</b></div>
<div class="item"><b>29</b></div>
<div class="item"><b>78</b></div>
<div class="item"><b>92</b></div>
<div class="item"><b>10</b></div>
<div class="item"><b>55</b></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry-layout/masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script>
var container = document.querySelector('#container');
var iso = new Isotope( container, {
layoutMode: 'masonry',
stagger: 50,
transitionDuration: '0.8s',
getSortData: {
b: 'b parseInt'
},
sortBy: 'b',
// filter b greater than 40
// filter: function( elem ) {
// return parseInt( elem.querySelector('b').textContent, 10 ) > 40
// }
});
document.querySelector('#prepend').addEventListener( 'click', function() {
// prepend 3 new items
iso.prepended( [ prependItem(), prependItem(), prependItem() ] );
});
document.querySelector('#insert').addEventListener( 'click', function() {
// insert 3 new items
iso.insert( [ getItem(), getItem(), getItem() ] );
});
document.querySelector('#append').addEventListener( 'click', function() {
// append 3 new items
iso.appended( [ appendItem(), appendItem(), appendItem() ] );
});
function getItem() {
var item = document.createElement('div');
item.className = 'item';
var num = Math.floor( Math.random() * 100 );
item.innerHTML = '<b>' + num + '</b>';
return item;
}
function prependItem() {
var item = getItem();
container.insertBefore( item, container.firstChild );
return item;
}
function appendItem() {
var item = getItem();
container.appendChild( item );
return item;
}
iso.on( 'layoutComplete', function() {
console.log('layout complete');
});
</script>
</body>
</html>
================================================
FILE: sandbox/jquery.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>jquery</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#container { width: 100%; }
</style>
</head>
<body>
<h1>jquery</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
<button data-isotope-value="number-greater-than-50">number > 50</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/vertical.js"></script>
<script>
$(document).ready( function() {
var container = document.querySelector('#container');
var $container = $('#container').isotope({
layoutMode: 'fitRows',
transitionDuration: '0.8s',
cellsByRow: {
columnWidth: 130,
rowHeight: 140,
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
return parseFloat( $(itemElem).find('.weight').text().replace( /[\(\)]/g, '') );
}
}
});
var options = document.querySelector('#options');
$('#options').on( 'click', 'button', function( event ) {
var isoOptions = {};
var key = $(this).parent().attr('data-isotope-key');
var value = $(this).attr('data-isotope-value');
if ( key == 'filter' && value == 'number-greater-than-50' ) {
// jquery, function used in .each()
value = function( i, elem ) {
return parseInt( $(elem).find('.number').text(), 10 ) > 50;
};
}
// console.log( key, value );
isoOptions[ key ] = value;
$container.isotope( isoOptions );
});
$container.on( 'arrangeComplete', function( event, items ) {
console.log( 'arrangeComplete', items.length );
});
// $container.on( 'hideComplete', function( event, items ) {
// console.log( 'hideComplete', items.length );
// });
});
</script>
</body>
</html>
================================================
FILE: sandbox/js/require-js.js
================================================
/* eslint-disable id-length */
/* globals requirejs */
// -------------------------- bower -------------------------- //
/*
// with bower components
requirejs.config({
baseUrl: '../bower_components'
});
requirejs( [ '../js/isotope' ], function( Isotope ) {
new Isotope( '#basic', {
masonry: {
columnWidth: 60
}
});
});
// */
// -------------------------- pkgd -------------------------- //
/*
requirejs( [ '../dist/isotope.pkgd.js' ], function( Isotope ) {
new Isotope( '#basic', {
layoutMode: 'masonry',
masonry: {
columnWidth: 60
}
});
});
// */
// -------------------------- bower & jQuery -------------------------- //
/*
requirejs.config({
baseUrl: '../bower_components',
paths: {
jquery: 'jquery/dist/jquery'
}
})
requirejs( [
'jquery',
'isotope/js/isotope',
'jquery-bridget/jquery-bridget'
],
function( $, Isotope ) {
$.bridget( 'isotope', Isotope );
$('#basic').isotope({
masonry: {
columnWidth: 60
}
});
});
// */
// -------------------------- pkgd & jQuery -------------------------- //
// /*
requirejs.config({
paths: {
jquery: '../../bower_components/jquery/dist/jquery',
},
});
requirejs( [ 'require', 'jquery', '../dist/isotope.pkgd.js' ],
function( require, $, Isotope ) {
require( [
'jquery-bridget/jquery-bridget',
],
function() {
$.bridget( 'isotope', Isotope );
$('#basic').isotope({
masonry: {
columnWidth: 60,
},
});
} );
} );
// */
================================================
FILE: sandbox/masonry-horizontal.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>horizontal layout modes</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
body, html {
height: 100%;
}
#container {
position: relative;
height: 70%;
margin-bottom: 20px;
}
.element.alkali { width: 170px; height: 190px; }
.element.alkaline-earth {}
.element.lanthanoid { height: 190px; }
.element.actinoid { width: 170px; }
.element.transition { width: 220px; }
.stamp {
background: #DDD;
border: 2px dotted;
position: absolute;
}
.stamp1 {
height: 30%;
width: 80px;
left: 30px;
top: 10%;
}
.stamp2 {
height: 200px;
width: 40px;
left: 15px;
top: 100px;
}
</style>
</head>
<body>
<h1>horizontal layout modes</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/
gitextract_aix0tdoj/
├── .eslintrc.js
├── .github/
│ ├── contributing.md
│ └── issue_template.md
├── .gitignore
├── .jshintrc
├── README.md
├── bin/
│ ├── .eslintrc.js
│ ├── bundle-js.js
│ ├── lint-json.js
│ └── version.js
├── bower.json
├── dist/
│ └── isotope.pkgd.js
├── js/
│ ├── isotope.js
│ ├── item.js
│ ├── layout-mode.js
│ └── layout-modes/
│ ├── fit-rows.js
│ ├── masonry.js
│ └── vertical.js
├── package.json
├── sandbox/
│ ├── basic.html
│ ├── bottom-up.html
│ ├── browserify/
│ │ ├── browserify.html
│ │ ├── jq-main.js
│ │ └── main.js
│ ├── cells-by-row.html
│ ├── combination-filters-inclusive.html
│ ├── combination-filters.html
│ ├── filter-sort.html
│ ├── fitrows.html
│ ├── fluid.html
│ ├── horizontal-layout-modes.html
│ ├── insert.html
│ ├── jquery.html
│ ├── js/
│ │ └── require-js.js
│ ├── masonry-horizontal.html
│ ├── masonry.html
│ ├── require-js.html
│ ├── right-to-left.html
│ ├── sandbox.css
│ ├── sorting.html
│ ├── stamps.html
│ ├── transition-bug.html
│ └── v3-release-gif2.html
└── test/
├── .jshintrc
├── index.html
├── tests.css
└── unit/
├── arrange-complete.js
├── filtering.js
├── fit-rows.js
├── get-segment-size.js
├── helpers.js
├── masonry-measure-columns.js
├── masonry-stamp.js
├── sort-data.js
└── sorting.js
SYMBOL INDEX (41 symbols across 11 files)
FILE: dist/isotope.pkgd.js
function jQueryBridget (line 58) | function jQueryBridget( namespace, PluginClass, $ ) {
function updateJQuery (line 140) | function updateJQuery( $ ) {
function EvEmitter (line 181) | function EvEmitter() {}
function getStyleSize (line 296) | function getStyleSize( value ) {
function noop (line 303) | function noop() {}
function getZeroSize (line 329) | function getZeroSize() {
function getStyle (line 351) | function getStyle( elem ) {
function setup (line 372) | function setup() {
function getSize (line 404) | function getSize( elem ) {
function isEmptyObj (line 807) | function isEmptyObj( obj ) {
function Item (line 841) | function Item( element, layout ) {
function toDashedAll (line 1092) | function toDashedAll( str ) {
function Outlayer (line 1391) | function Outlayer( element, options ) {
function onComplete (line 1768) | function onComplete() {
function tick (line 1779) | function tick() {
function subclass (line 2222) | function subclass( Parent ) {
function getMilliseconds (line 2243) | function getMilliseconds( time ) {
function Item (line 2299) | function Item() {
function LayoutMode (line 2378) | function LayoutMode( isotope ) {
function Mode (line 2480) | function Mode() {
function arrangeParallelCallback (line 3155) | function arrangeParallelCallback() {
function mungeSorter (line 3287) | function mungeSorter( sorter ) {
function getValueGetter (line 3314) | function getValueGetter( attr, query ) {
function getItemSorter (line 3371) | function getItemSorter( sortBys, sortAsc ) {
FILE: js/isotope.js
function arrangeParallelCallback (line 214) | function arrangeParallelCallback() {
function mngSorter (line 323) | function mngSorter( sorter ) {
function getValueGetter (line 350) | function getValueGetter( attr, query ) {
function getItemSorter (line 431) | function getItemSorter( sortBys, sortAsc ) {
FILE: js/item.js
function Item (line 32) | function Item() {
FILE: js/layout-mode.js
function LayoutMode (line 33) | function LayoutMode( isotope ) {
function Mode (line 135) | function Mode() {
FILE: sandbox/browserify/main.js
function getText (line 10) | function getText( elem ) {
FILE: test/unit/arrange-complete.js
function onArrangeComplete (line 44) | function onArrangeComplete() {
function onArrangeComplete (line 85) | function onArrangeComplete() {
function next (line 113) | function next() {
FILE: test/unit/filtering.js
function checkFilter (line 14) | function checkFilter( filter, expectedIDs, message ) {
function getFilteredItemIDs (line 65) | function getFilteredItemIDs( isotope ) {
FILE: test/unit/fit-rows.js
function checkPosition (line 10) | function checkPosition( item, x, y ) {
FILE: test/unit/masonry-stamp.js
function checkPosition (line 10) | function checkPosition( item, x, y ) {
FILE: test/unit/sort-data.js
function setText (line 32) | function setText( elem, value ) {
FILE: test/unit/sorting.js
function getItemsText (line 80) | function getItemsText( iso ) {
Condensed preview — 55 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (264K chars).
[
{
"path": ".eslintrc.js",
"chars": 444,
"preview": "/* eslint-env node */\n\nmodule.exports = {\n plugins: [ 'metafizzy' ],\n extends: 'plugin:metafizzy/browser',\n env: {\n "
},
{
"path": ".github/contributing.md",
"chars": 1657,
"preview": "## Submitting issues\n\n### Reduced test case required\n\nAll bug reports and problem issues require a [**reduced test case*"
},
{
"path": ".github/issue_template.md",
"chars": 259,
"preview": "<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by f"
},
{
"path": ".gitignore",
"chars": 88,
"preview": "_site\nisotope-site.zip\ncomponents/\nbower_components/\nnode_modules/\nsandbox/**/bundle.js\n"
},
{
"path": ".jshintrc",
"chars": 93,
"preview": "{\n \"browser\": true,\n \"devel\": false,\n \"strict\": true,\n \"undef\": true,\n \"unused\": true\n}\n"
},
{
"path": "README.md",
"chars": 2090,
"preview": "# Isotope\n\n_Filter & sort magical layouts_\n\nSee [isotope.metafizzy.co](https://isotope.metafizzy.co) for complete docs a"
},
{
"path": "bin/.eslintrc.js",
"chars": 86,
"preview": "module.exports = {\n plugins: [ 'metafizzy' ],\n extends: 'plugin:metafizzy/node',\n};\n"
},
{
"path": "bin/bundle-js.js",
"chars": 1209,
"preview": "const fs = require('fs');\nconst requirejs = require('requirejs');\n\n// get banner\nlet isotopeJsSrc = fs.readFileSync( 'js"
},
{
"path": "bin/lint-json.js",
"chars": 54,
"preview": "require('../package.json');\nrequire('../bower.json');\n"
},
{
"path": "bin/version.js",
"chars": 261,
"preview": "const fs = require('fs');\nconst version = require('../package.json').version;\n\nconst file = 'js/isotope.js';\nlet src = f"
},
{
"path": "bower.json",
"chars": 813,
"preview": "{\n \"name\": \"isotope-layout\",\n \"description\": \"Filter and sort magical layouts\",\n \"main\": \"js/isotope.js\",\n \"dependen"
},
{
"path": "dist/isotope.pkgd.js",
"chars": 91398,
"preview": "/*!\n * Isotope PACKAGED v3.0.6\n *\n * Licensed GPLv3 for open source use\n * or Isotope Commercial License for commercial "
},
{
"path": "js/isotope.js",
"chars": 17604,
"preview": "/*!\n * Isotope v3.0.6\n *\n * Licensed GPLv3 for open source use\n * or Isotope Commercial License for commercial use\n *\n *"
},
{
"path": "js/item.js",
"chars": 1703,
"preview": "/**\n * Isotope Item\n**/\n\n( function( window, factory ) {\n // universal module definition\n if ( typeof define == 'funct"
},
{
"path": "js/layout-mode.js",
"chars": 3994,
"preview": "/**\n * Isotope LayoutMode\n */\n\n( function( window, factory ) {\n // universal module definition\n if ( typeof define == "
},
{
"path": "js/layout-modes/fit-rows.js",
"chars": 1333,
"preview": "/**\n * fitRows layout mode\n */\n\n( function( window, factory ) {\n // universal module definition\n if ( typeof define =="
},
{
"path": "js/layout-modes/masonry.js",
"chars": 1776,
"preview": "/*!\n * Masonry layout mode\n * sub-classes Masonry\n * https://masonry.desandro.com\n */\n\n( function( window, factory ) {\n "
},
{
"path": "js/layout-modes/vertical.js",
"chars": 1040,
"preview": "/**\n * vertical layout mode\n */\n\n( function( window, factory ) {\n // universal module definition\n if ( typeof define ="
},
{
"path": "package.json",
"chars": 1472,
"preview": "{\n \"name\": \"isotope-layout\",\n \"version\": \"3.0.6\",\n \"description\": \"Filter and sort magical layouts\",\n \"main\": \"js/is"
},
{
"path": "sandbox/basic.html",
"chars": 1634,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>basic</title>\n\n <link rel=\"stylesheet\" href=\"sandbox.c"
},
{
"path": "sandbox/bottom-up.html",
"chars": 3098,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>bottom up</title>\n\n <link rel=\"stylesheet\" href=\"sandb"
},
{
"path": "sandbox/browserify/browserify.html",
"chars": 4592,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>Browserify</title>\n\n <link rel=\"stylesheet\" href=\"../s"
},
{
"path": "sandbox/browserify/jq-main.js",
"chars": 1205,
"preview": "/* eslint-disable id-length */\n\nvar Isotope = window.Isotope = require('../../js/isotope');\nvar $ = require('jquery');\nr"
},
{
"path": "sandbox/browserify/main.js",
"chars": 1488,
"preview": "var Isotope = window.Isotope = require('../../js/isotope');\nvar eventie = require('eventie');\nvar matchesSelector = requ"
},
{
"path": "sandbox/cells-by-row.html",
"chars": 6761,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>cellsByRow</title>\n\n <link rel=\"stylesheet\" href=\"sand"
},
{
"path": "sandbox/combination-filters-inclusive.html",
"chars": 6831,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>combination filters inclusive</title>\n\n <link rel=\"sty"
},
{
"path": "sandbox/combination-filters.html",
"chars": 6838,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>combination filters</title>\n\n <link rel=\"stylesheet\" h"
},
{
"path": "sandbox/filter-sort.html",
"chars": 6708,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>filter sort</title>\n\n <link rel=\"stylesheet\" href=\"san"
},
{
"path": "sandbox/fitrows.html",
"chars": 3443,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>fitRows</title>\n\n <link rel=\"stylesheet\" href=\"sandbox"
},
{
"path": "sandbox/fluid.html",
"chars": 2137,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>fluid</title>\n\n <link rel=\"stylesheet\" href=\"sandbox.c"
},
{
"path": "sandbox/horizontal-layout-modes.html",
"chars": 6574,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>horizontal layout modes</title>\n\n <link rel=\"styleshee"
},
{
"path": "sandbox/insert.html",
"chars": 2777,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\" />\n\n <title"
},
{
"path": "sandbox/jquery.html",
"chars": 6853,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\" />\n\n <title"
},
{
"path": "sandbox/js/require-js.js",
"chars": 1546,
"preview": "/* eslint-disable id-length */\n/* globals requirejs */\n\n// -------------------------- bower -------------------------- /"
},
{
"path": "sandbox/masonry-horizontal.html",
"chars": 7272,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>horizontal layout modes</title>\n\n <link rel=\"styleshee"
},
{
"path": "sandbox/masonry.html",
"chars": 6382,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>masonry</title>\n\n <link rel=\"stylesheet\" href=\"sandbox"
},
{
"path": "sandbox/require-js.html",
"chars": 1012,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>require js</title>\n\n <link rel=\"stylesheet\" href=\"sand"
},
{
"path": "sandbox/right-to-left.html",
"chars": 3068,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>right to left</title>\n\n <link rel=\"stylesheet\" href=\"s"
},
{
"path": "sandbox/sandbox.css",
"chars": 1952,
"preview": "* {\n box-sizing: border-box;\n}\n\n#container,\n.container {\n background: #EEE;\n width: 50%;\n margin-bottom: 20px;\n}\n\n.i"
},
{
"path": "sandbox/sorting.html",
"chars": 5968,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>sorting</title>\n\n <link rel=\"stylesheet\" href=\"sandbox"
},
{
"path": "sandbox/stamps.html",
"chars": 2531,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>stamps</title>\n\n\n <link rel=\"stylesheet\" href=\"sandbox"
},
{
"path": "sandbox/transition-bug.html",
"chars": 1977,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>transition bug</title>\n\n <link rel=\"stylesheet\" href=\""
},
{
"path": "sandbox/v3-release-gif2.html",
"chars": 7176,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n\n <tit"
},
{
"path": "test/.jshintrc",
"chars": 153,
"preview": "{\n \"browser\": true,\n \"devel\": false,\n \"strict\": true,\n \"undef\": true,\n \"unused\": true,\n \"predef\": {\n \"Isotope\":"
},
{
"path": "test/index.html",
"chars": 4640,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>Isotope tests</title>\n\n <link rel=\"stylesheet\" href=\"t"
},
{
"path": "test/tests.css",
"chars": 1171,
"preview": "* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n fo"
},
{
"path": "test/unit/arrange-complete.js",
"chars": 2807,
"preview": "QUnit.test( 'arrangeComplete', function( assert ) {\n 'use strict';\n\n var iso = new Isotope( '#arrange-complete', {\n "
},
{
"path": "test/unit/filtering.js",
"chars": 2042,
"preview": "/* globals jQuery */\n\nQUnit.test( 'filtering', function( assert ) {\n 'use strict';\n\n var iso = new Isotope( '#filterin"
},
{
"path": "test/unit/fit-rows.js",
"chars": 890,
"preview": "QUnit.test( 'fitRows', function( assert ) {\n 'use strict';\n\n var iso = new Isotope( '#fitrows-gutter', {\n layoutMod"
},
{
"path": "test/unit/get-segment-size.js",
"chars": 1289,
"preview": "QUnit.test( 'LayoutMode.getSegmentSize', function( assert ) {\n'use strict';\n\n var CellsByRow = Isotope.LayoutMode.creat"
},
{
"path": "test/unit/helpers.js",
"chars": 118,
"preview": "( function() {\n\n'use strict';\n\n// ----- default layout mode ----- //\nIsotope.defaults.layoutMode = 'fitRows';\n\n} )();\n"
},
{
"path": "test/unit/masonry-measure-columns.js",
"chars": 1121,
"preview": "QUnit.test( 'Masonry.measureColumns', function( assert ) {\n 'use strict';\n\n var iso = new Isotope( '#masonry-measure-c"
},
{
"path": "test/unit/masonry-stamp.js",
"chars": 614,
"preview": "QUnit.test( 'Masonry stamp', function( assert ) {\n 'use strict';\n\n var iso = new Isotope( '#masonry-stamp', {\n layo"
},
{
"path": "test/unit/sort-data.js",
"chars": 3591,
"preview": "/* globals jQuery */\n\nQUnit.test( 'sort data', function( assert ) {\n\n 'use strict';\n\n var iso = new Isotope( '#get-sor"
},
{
"path": "test/unit/sorting.js",
"chars": 1969,
"preview": "QUnit.test( 'sorting', function( assert ) {\n\n 'use strict';\n\n // sorting with history\n ( function() {\n var iso = n"
}
]
About this extraction
This page contains the full source code of the metafizzy/isotope GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 55 files (241.8 KB), approximately 69.4k tokens, and a symbol index with 41 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.