Single module for including all angular-masonry dependences via AMD

angular-masonry-deps.js

/**
 * Single module for including angular-masonry via AMD (e.g. RequireJS)
 * includes: Bridget, matchesSelector, EvEmitter, Fizzy UI utils, getSize, imagesLoaded, Outlayer, Outlayer Item, Masonry
 * 
 * Created at: 6-05-2016
 * Created by: [email protected]
 */
define(['jquery'], function($) {

    /**
     * Bridget makes jQuery widgets
     * v1.0.1
     */

    var slice = Array.prototype.slice;

    function noop() {}

    // -------------------------- definition -------------------------- //

    function defineBridget($) {

        // bail if no jQuery
        if (!$) {
            return;
        }

        // -------------------------- addOptionMethod -------------------------- //

        /**
         * adds option method -> $().plugin('option', {...})
         * @param {Function} PluginClass - constructor class
         */
        function addOptionMethod(PluginClass) {
            // don't overwrite original option method
            if (PluginClass.prototype.option) {
                return;
            }

            // option setter
            PluginClass.prototype.option = function(opts) {
                // bail out if not an object
                if (!$.isPlainObject(opts)) {
                    return;
                }
                this.options = $.extend(true, this.options, opts);
            };
        }


        // -------------------------- plugin bridge -------------------------- //

        // helper function for logging errors
        // $.error breaks jQuery chaining
        var logError = typeof console === 'undefined' ? noop :
            function(message) {
                console.error(message);
            };

        /**
         * jQuery plugin bridge, access methods like $elem.plugin('method')
         * @param {String} namespace - plugin name
         * @param {Function} PluginClass - constructor class
         */
        function bridge(namespace, PluginClass) {
            // add to jQuery fn namespace
            $.fn[namespace] = function(options) {
                if (typeof options === 'string') {
                    // call plugin method when first argument is a string
                    // get arguments for method
                    var args = slice.call(arguments, 1);

                    for (var i = 0, len = this.length; i < len; i++) {
                        var elem = this[i];
                        var instance = $.data(elem, namespace);
                        if (!instance) {
                            logError("cannot call methods on " + namespace + " prior to initialization; " +
                                "attempted to call '" + options + "'");
                            continue;
                        }
                        if (!$.isFunction(instance[options]) || options.charAt(0) === '_') {
                            logError("no such method '" + options + "' for " + namespace + " instance");
                            continue;
                        }

                        // trigger method with arguments
                        var returnValue = instance[options].apply(instance, args);

                        // break look and return first value if provided
                        if (returnValue !== undefined) {
                            return returnValue;
                        }
                    }
                    // return this if no return value
                    return this;
                } else {
                    return this.each(function() {
                        var instance = $.data(this, namespace);
                        if (instance) {
                            // apply options & init
                            instance.option(options);
                            instance._init();
                        } else {
                            // initialize new instance
                            instance = new PluginClass(this, options);
                            $.data(this, namespace, instance);
                        }
                    });
                }
            };

        }

        // -------------------------- bridget -------------------------- //

        /**
         * converts a Prototypical class into a proper jQuery plugin
         *   the class must have a ._init method
         * @param {String} namespace - plugin name, used in $().pluginName
         * @param {Function} PluginClass - constructor class
         */
        $.bridget = function(namespace, PluginClass) {
            addOptionMethod(PluginClass);
            bridge(namespace, PluginClass);
        };

        return $.bridget;

    }

    defineBridget(window.jQuery);


    /**
     * matchesSelector v2.0.1
     * matchesSelector( element, '.selector' )
     * MIT license
     */
    var matchesSelector = (function factory() {
        'use strict';

        var matchesMethod = (function() {
            var ElemProto = 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);
        };

    })();

    /**
     * EvEmitter v1.0.2
     * Lil' event emitter
     * MIT License
     */
    var EvEmitter = (function() {

        "use strict";

        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;
            }
            var i = 0;
            var listener = listeners[i];
            args = args || [];
            // once stuff
            var onceListeners = this._onceEvents && this._onceEvents[eventName];

            while (listener) {
                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);
                // get next listener
                i += isOnce ? 0 : 1;
                listener = listeners[i];
            }

            return this;
        };

        return EvEmitter;

    })();

    /**
     * Fizzy UI utils v2.0.1
     * MIT license
     */
    var utils = (function factory(window, matchesSelector) {

        'use strict';

        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 ----- //

        // turn element or nodeList into an array
        utils.makeArray = function(obj) {
            var ary = [];
            if (Array.isArray(obj)) {
                // use object if already an array
                ary = obj;
            } else if (obj && typeof obj.length == 'number') {
                // convert nodeList to array
                for (var i = 0; i < obj.length; i++) {
                    ary.push(obj[i]);
                }
            } else {
                // array of single index
                ary.push(obj);
            }
            return ary;
        };

        // ----- 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 != 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) {
            // original method
            var method = _class.prototype[methodName];
            var timeoutName = methodName + 'Timeout';

            _class.prototype[methodName] = function() {
                var timeout = this[timeoutName];
                if (timeout) {
                    clearTimeout(timeout);
                }
                var args = arguments;

                var _this = this;
                this[timeoutName] = setTimeout(function() {
                    method.apply(_this, args);
                    delete _this[timeoutName];
                }, threshold || 100);
            };
        };

        // ----- docReady ----- //

        utils.docReady = function(callback) {
            if (document.readyState == 'complete') {
                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('layoutname')
                    if (jQuery) {
                        jQuery.data(elem, namespace, instance);
                    }
                });

            });
        };

        // -----  ----- //

        return utils;

    })(window, matchesSelector);

    /*!
     * getSize v2.0.2
     * measure size of elements
     * MIT license
     */
    var getSize = (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 http://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 -------------------------- //

            /**
             * WebKit measures the outer-width on style.width on border-box elems
             * IE & 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);

            getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize(style.width) == 200;
            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;

    })();

    /*!
     * imagesLoaded v4.1.0
     * JavaScript is all like "You images are done yet or what?"
     * MIT License
     */
    var imagesLoaded = (function factory(window, EvEmitter) {

        'use strict';

        var $ = window.jQuery;
        var console = window.console;

        // -------------------------- helpers -------------------------- //

        // extend objects
        function extend(a, b) {
            for (var prop in b) {
                a[prop] = b[prop];
            }
            return a;
        }

        // turn element or nodeList into an array
        function makeArray(obj) {
            var ary = [];
            if (Array.isArray(obj)) {
                // use object if already an array
                ary = obj;
            } else if (typeof obj.length == 'number') {
                // convert nodeList to array
                for (var i = 0; i < obj.length; i++) {
                    ary.push(obj[i]);
                }
            } else {
                // array of single index
                ary.push(obj);
            }
            return ary;
        }

        // -------------------------- imagesLoaded -------------------------- //

        /**
         * @param {Array, Element, NodeList, String} elem
         * @param {Object or Function} options - if function, use as callback
         * @param {Function} onAlways - callback function
         */
        function ImagesLoaded(elem, options, onAlways) {
            // coerce ImagesLoaded() without new, to be new ImagesLoaded()
            if (!(this instanceof ImagesLoaded)) {
                return new ImagesLoaded(elem, options, onAlways);
            }
            // use elem as selector string
            if (typeof elem == 'string') {
                elem = document.querySelectorAll(elem);
            }

            this.elements = makeArray(elem);
            this.options = extend({}, this.options);

            if (typeof options == 'function') {
                onAlways = options;
            } else {
                extend(this.options, options);
            }

            if (onAlways) {
                this.on('always', onAlways);
            }

            this.getImages();

            if ($) {
                // add jQuery Deferred object
                this.jqDeferred = new $.Deferred();
            }

            // HACK check async to allow time to bind listeners
            setTimeout(function() {
                this.check();
            }.bind(this));
        }

        ImagesLoaded.prototype = Object.create(EvEmitter.prototype);

        ImagesLoaded.prototype.options = {};

        ImagesLoaded.prototype.getImages = function() {
            this.images = [];

            // filter & find items if we have an item selector
            this.elements.forEach(this.addElementImages, this);
        };

        /**
         * @param {Node} element
         */
        ImagesLoaded.prototype.addElementImages = function(elem) {
            // filter siblings
            if (elem.nodeName == 'IMG') {
                this.addImage(elem);
            }
            // get background image on element
            if (this.options.background === true) {
                this.addElementBackgroundImages(elem);
            }

            // find children
            // no non-element nodes, #143
            var nodeType = elem.nodeType;
            if (!nodeType || !elementNodeTypes[nodeType]) {
                return;
            }
            var childImgs = elem.querySelectorAll('img');
            // concat childElems to filterFound array
            for (var i = 0; i < childImgs.length; i++) {
                var img = childImgs[i];
                this.addImage(img);
            }

            // get child background images
            if (typeof this.options.background == 'string') {
                var children = elem.querySelectorAll(this.options.background);
                for (i = 0; i < children.length; i++) {
                    var child = children[i];
                    this.addElementBackgroundImages(child);
                }
            }
        };

        var elementNodeTypes = {
            1: true,
            9: true,
            11: true
        };

        ImagesLoaded.prototype.addElementBackgroundImages = function(elem) {
            var style = getComputedStyle(elem);
            if (!style) {
                // Firefox returns null if in a hidden iframe https://bugzil.la/548397
                return;
            }
            // get url inside url("...")
            var reURL = /url\((['"])?(.*?)\1\)/gi;
            var matches = reURL.exec(style.backgroundImage);
            while (matches !== null) {
                var url = matches && matches[2];
                if (url) {
                    this.addBackground(url, elem);
                }
                matches = reURL.exec(style.backgroundImage);
            }
        };

        /**
         * @param {Image} img
         */
        ImagesLoaded.prototype.addImage = function(img) {
            var loadingImage = new LoadingImage(img);
            this.images.push(loadingImage);
        };

        ImagesLoaded.prototype.addBackground = function(url, elem) {
            var background = new Background(url, elem);
            this.images.push(background);
        };

        ImagesLoaded.prototype.check = function() {
            var _this = this;
            this.progressedCount = 0;
            this.hasAnyBroken = false;
            // complete if no images
            if (!this.images.length) {
                this.complete();
                return;
            }

            function onProgress(image, elem, message) {
                // HACK - Chrome triggers event before object properties have changed. #83
                setTimeout(function() {
                    _this.progress(image, elem, message);
                });
            }

            this.images.forEach(function(loadingImage) {
                loadingImage.once('progress', onProgress);
                loadingImage.check();
            });
        };

        ImagesLoaded.prototype.progress = function(image, elem, message) {
            this.progressedCount++;
            this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
            // progress event
            this.emitEvent('progress', [this, image, elem]);
            if (this.jqDeferred && this.jqDeferred.notify) {
                this.jqDeferred.notify(this, image);
            }
            // check if completed
            if (this.progressedCount == this.images.length) {
                this.complete();
            }

            if (this.options.debug && console) {
                console.log('progress: ' + message, image, elem);
            }
        };

        ImagesLoaded.prototype.complete = function() {
            var eventName = this.hasAnyBroken ? 'fail' : 'done';
            this.isComplete = true;
            this.emitEvent(eventName, [this]);
            this.emitEvent('always', [this]);
            if (this.jqDeferred) {
                var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
                this.jqDeferred[jqMethod](this);
            }
        };

        // --------------------------  -------------------------- //

        function LoadingImage(img) {
            this.img = img;
        }

        LoadingImage.prototype = Object.create(EvEmitter.prototype);

        LoadingImage.prototype.check = function() {
            // If complete is true and browser supports natural sizes,
            // try to check for image status manually.
            var isComplete = this.getIsImageComplete();
            if (isComplete) {
                // report based on naturalWidth
                this.confirm(this.img.naturalWidth !== 0, 'naturalWidth');
                return;
            }

            // If none of the checks above matched, simulate loading on detached element.
            this.proxyImage = new Image();
            this.proxyImage.addEventListener('load', this);
            this.proxyImage.addEventListener('error', this);
            // bind to image as well for Firefox. #191
            this.img.addEventListener('load', this);
            this.img.addEventListener('error', this);
            this.proxyImage.src = this.img.src;
        };

        LoadingImage.prototype.getIsImageComplete = function() {
            return this.img.complete && this.img.naturalWidth !== undefined;
        };

        LoadingImage.prototype.confirm = function(isLoaded, message) {
            this.isLoaded = isLoaded;
            this.emitEvent('progress', [this, this.img, message]);
        };

        // ----- events ----- //

        // trigger specified handler for event type
        LoadingImage.prototype.handleEvent = function(event) {
            var method = 'on' + event.type;
            if (this[method]) {
                this[method](event);
            }
        };

        LoadingImage.prototype.onload = function() {
            this.confirm(true, 'onload');
            this.unbindEvents();
        };

        LoadingImage.prototype.onerror = function() {
            this.confirm(false, 'onerror');
            this.unbindEvents();
        };

        LoadingImage.prototype.unbindEvents = function() {
            this.proxyImage.removeEventListener('load', this);
            this.proxyImage.removeEventListener('error', this);
            this.img.removeEventListener('load', this);
            this.img.removeEventListener('error', this);
        };

        // -------------------------- Background -------------------------- //

        function Background(url, element) {
            this.url = url;
            this.element = element;
            this.img = new Image();
        }

        // inherit LoadingImage prototype
        Background.prototype = Object.create(LoadingImage.prototype);

        Background.prototype.check = function() {
            this.img.addEventListener('load', this);
            this.img.addEventListener('error', this);
            this.img.src = this.url;
            // check if image is already complete
            var isComplete = this.getIsImageComplete();
            if (isComplete) {
                this.confirm(this.img.naturalWidth !== 0, 'naturalWidth');
                this.unbindEvents();
            }
        };

        Background.prototype.unbindEvents = function() {
            this.img.removeEventListener('load', this);
            this.img.removeEventListener('error', this);
        };

        Background.prototype.confirm = function(isLoaded, message) {
            this.isLoaded = isLoaded;
            this.emitEvent('progress', [this, this.element, message]);
        };

        // -------------------------- jQuery -------------------------- //

        ImagesLoaded.makeJQueryPlugin = function(jQuery) {
            jQuery = jQuery || window.jQuery;
            if (!jQuery) {
                return;
            }
            // set local variable
            $ = jQuery;
            // $().imagesLoaded()
            $.fn.imagesLoaded = function(options, callback) {
                var instance = new ImagesLoaded(this, options, callback);
                return instance.jqDeferred.promise($(this));
            };
        };
        // try making plugin
        ImagesLoaded.makeJQueryPlugin();

        // --------------------------  -------------------------- //

        return ImagesLoaded;

    })(window, EvEmitter);

    /**
     * Outlayer Item
     */
    var Item = (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'
        };

        // -------------------------- 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'];
            // convert percent to pixels
            var layoutSize = this.layout.size;
            var x = xValue.indexOf('%') != -1 ?
                (parseFloat(xValue) / 100) * layoutSize.width : parseInt(xValue, 10);
            var y = yValue.indexOf('%') != -1 ?
                (parseFloat(yValue) / 100) * layoutSize.height : parseInt(yValue, 10);

            // 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 compareX = parseInt(x, 10);
            var compareY = parseInt(y, 10);
            var didNotMove = compareX === this.position.x && compareY === 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 = parseInt(x, 10);
            this.position.y = parseInt(y, 10);
        };

        // ----- 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 ) );
            // }
            // enable transition styles
            this.css({
                transitionProperty: transitionProps,
                transitionDuration: this.layout.options.transitionDuration
            });
            // 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: ''
        };

        proto.removeTransitionStyles = function() {
            // remove transition
            this.css(cleanTransitionStyle);
        };

        // ----- 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;

    })(EvEmitter, getSize);

    /*!
     * Outlayer v2.0.1
     * the brains and guts of a layout library
     * MIT license
     */

    var Outlayer = (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) {
            queue.forEach(function(obj) {
                this._positionItem(obj.item, obj.x, obj.y, obj.isInstant);
            }, this);
        };

        /**
         * 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) {
            if (isInstant) {
                // if not transition, just set CSS
                item.goTo(x, y);
            } else {
                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;
            }
            items.forEach(function(item) {
                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;
            }
            items.forEach(function(item) {
                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;
        }

        // ----- fin ----- //

        // back in global
        Outlayer.Item = Item;

        return Outlayer;

    })(window, EvEmitter, getSize, utils, Item);

    /*!
     * Masonry v4.0.0
     * Cascading grid layout library
     * http://masonry.desandro.com
     * MIT License
     * by David DeSandro
     */
    var Masonry = (function factory(Outlayer, getSize) {

        'use strict';

        // -------------------------- masonryDefinition -------------------------- //

        // create an Outlayer layout class
        var Masonry = Outlayer.create('masonry');
        // isFitWidth -> fitWidth
        Masonry.compatOptions.fitWidth = 'isFitWidth';

        Masonry.prototype._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;
        };

        Masonry.prototype.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);
        };

        Masonry.prototype.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;
        };

        Masonry.prototype._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);

            var colGroup = this._getColGroup(colSpan);
            // get the minimum Y value from the columns
            var minimumY = Math.min.apply(Math, colGroup);
            var shortColIndex = colGroup.indexOf(minimumY);

            // position the brick
            var position = {
                x: this.columnWidth * shortColIndex,
                y: minimumY
            };

            // apply setHeight to necessary columns
            var setHeight = minimumY + item.size.outerHeight;
            var setSpan = this.cols + 1 - colGroup.length;
            for (var i = 0; i < setSpan; i++) {
                this.colYs[shortColIndex + i] = setHeight;
            }

            return position;
        };

        /**
         * @param {Number} colSpan - number of columns the element spans
         * @returns {Array} colGroup
         */
        Masonry.prototype._getColGroup = 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++) {
                // make an array of colY values for that one group
                var groupColYs = this.colYs.slice(i, i + colSpan);
                // and get the max value of the array
                colGroup[i] = Math.max.apply(Math, groupColYs);
            }
            return colGroup;
        };

        Masonry.prototype._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]);
            }
        };

        Masonry.prototype._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;
        };

        Masonry.prototype._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;
        };

        Masonry.prototype.needsResizeLayout = function() {
            var previousWidth = this.containerWidth;
            this.getContainerWidth();
            return previousWidth != this.containerWidth;
        };

        return Masonry;

    })(Outlayer, getSize);

});

this is awesome, but can you provide some instructions to use it with angular-masonry?

Amazing, thank you very much! I was trying to get angular-masonry to work with webpack and webpack-dev-server and tried so many configurations and ways of importing the dependencies until I finally stumbled onto this file. This is what finally did the trick. Thank you!