').eq(0).parent();"isotope"===a&&l.isotope({itemSelector:".elements-filter"});var r=i.find("a");r.on("click",function(i){i.preventDefault();var s=e(this),o=s.data("filter");o&&(o="elements-filter-"+o),r.removeClass("active"),s.addClass("active"),"isotope"===a?n(l,o):t(l,o)})}e(document).ready(function(){e("[data-elements-filter]").each(i)})}(jQuery); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const rename = require('gulp-rename'); 5 | const uglify = require('gulp-uglify'); 6 | 7 | // Configuration 8 | const scripts = [ 9 | 'assets/handler/handler.js' 10 | ]; 11 | 12 | // Compress the scripts 13 | gulp.task('compress', function () { 14 | return gulp.src(scripts, {base: './'}) 15 | .pipe(uglify()) 16 | .pipe(rename(function (path) { 17 | path.extname = '.min' + path.extname; 18 | })) 19 | .pipe(gulp.dest('./')); 20 | }); 21 | 22 | // Copy the Isotope 23 | gulp.task('isotope', function () { 24 | return gulp.src(['node_modules/isotope-layout/dist/*'], {base: 'node_modules/isotope-layout/dist'}) 25 | .pipe(gulp.dest('assets/isotope')); 26 | }); 27 | 28 | // Build by default 29 | gulp.task('default', ['compress', 'isotope']); 30 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codefog/contao-elements-filter", 3 | "description": "elements-filter extension for Contao Open Source CMS", 4 | "keywords": ["contao", "content", "elements", "filter"], 5 | "type": "contao-module", 6 | "license": "LGPL-3.0+", 7 | "authors": [ 8 | { 9 | "name": "Codefog", 10 | "homepage": "https://codefog.pl" 11 | }, 12 | { 13 | "name": "heartcodiert", 14 | "homepage": "https://www.heartcodiert.de/" 15 | } 16 | ], 17 | "require": { 18 | "php": ">=5.4.0", 19 | "contao/core-bundle": "~3.5 || ~4.1", 20 | "contao-community-alliance/composer-plugin": "~2.4 || ~3.0", 21 | "menatwork/contao-multicolumnwizard": "~3.3" 22 | }, 23 | "autoload":{ 24 | "psr-4": { 25 | "Codefog\\ElementsFilter\\": "src/" 26 | } 27 | }, 28 | "extra": { 29 | "contao": { 30 | "sources": { 31 | "": "system/modules/elements-filter" 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /languages/en/tl_article.php: -------------------------------------------------------------------------------- 1 | 'Default', 27 | 'isotope' => 'Isotope (by Metafizzy.co)', 28 | ]; 29 | -------------------------------------------------------------------------------- /languages/de/tl_article.php: -------------------------------------------------------------------------------- 1 | 'Standard', 27 | 'isotope' => 'Isotope (by Metafizzy.co)', 28 | ]; 29 | -------------------------------------------------------------------------------- /docs/02-basics.md: -------------------------------------------------------------------------------- 1 | # Basic configuration – Elements Fitler 2 | 3 | 1. [Installation](01-installation.md) 4 | 2. [**Basic configuration**](02-basics.md) 5 | 6 | 7 | ## Enabling the filters 8 | 9 | To enable the filters simply go to the article settings and check the appropriate box. Once the fields 10 | appear you can choose the Javascript handler you would like to use for filtering and define the 11 | available filters. 12 | 13 | ![](images/preview.png) 14 | 15 | ### Filters in details 16 | 17 | The filter value is an internal ID for the filter. The allowed characters are only alphanumeric characters 18 | and the dashes (this value will be used as CSS class). **Hint:** to create the "Show all" button do not 19 | enter any value. 20 | 21 | The label is a text value displayed on the filter button. 22 | 23 | As an extra you can also enter the CSS class per each filter button and give it a special styling. 24 | 25 | 26 | ## Content element settings 27 | 28 | Once you got the filters ready, you can start assign the content elements to appropriate filters. 29 | A content element can belong to one or multiple filters. If the filters are not assigned at all 30 | then the content element will not be filtered. 31 | 32 | ![](images/element.png) 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Elements Filter extension for Contao Open Source CMS 2 | 3 | ![](https://img.shields.io/packagist/v/codefog/contao-elements-filter.svg) 4 | ![](https://img.shields.io/packagist/l/codefog/contao-elements-filter.svg) 5 | ![](https://img.shields.io/packagist/dt/codefog/contao-elements-filter.svg) 6 | 7 | Elements Filter is an extension for the [Contao Open Source CMS](https://contao.org). 8 | 9 | Contao extension that allows to setup content element filtering using Javascript. The predefined 10 | filters can be set up in the article settings and then the content elements inside that article 11 | can be marked to be filtered by specific values. 12 | 13 | The filtering is done using Javascript and there are two handles provided out of the box: 14 | 15 | 1. Default handler (simple fade in/out effect) 16 | 2. [Isotope](http://isotope.metafizzy.co/) by Metafizzy.co (may require a license) 17 | 18 | ![](docs/images/preview.png) 19 | 20 | ## Documentation 21 | 22 | 1. [Installation](docs/01-installation.md) 23 | 2. [Basic configuration](docs/02-basics.md) 24 | 25 | ## Copyright 26 | 27 | This project has been created and is maintained by [Codefog](https://codefog.pl). 28 | 29 | Thanks to Kim Wormer from [heartcodiert](https://www.heartcodiert.de/) for sponsoring this extension! 30 | -------------------------------------------------------------------------------- /src/EventListener/ContentDataContainer.php: -------------------------------------------------------------------------------- 1 | $v) { 19 | if (is_array($v)) { 20 | continue; 21 | } 22 | 23 | $GLOBALS['TL_DCA']['tl_content']['palettes'][$k] = str_replace( 24 | 'protected;', 25 | 'protected;{elementsFilter_legend},elementsFilter_filters;', 26 | $v 27 | ); 28 | } 29 | } 30 | 31 | /** 32 | * Get the filters 33 | * 34 | * @return array 35 | */ 36 | public function getFilters() 37 | { 38 | $filters = []; 39 | 40 | foreach (FilterHelper::getArticleFilters(CURRENT_ID) as $filter) { 41 | if ($filter['value']) { 42 | $filters[$filter['value']] = $filter['label']; 43 | } 44 | } 45 | 46 | return $filters; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /assets/handler/handler.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | function filterDefault(container, value) { 3 | container.fadeOut(function () { 4 | container.children().each(function () { 5 | var el = $(this); 6 | 7 | if (!value || el.hasClass(value)) { 8 | el.show(); 9 | } else { 10 | el.hide(); 11 | } 12 | }); 13 | 14 | container.fadeIn(); 15 | }); 16 | } 17 | 18 | function filterIsotope(wrapper, value) { 19 | wrapper.isotope({ 20 | filter: function () { 21 | return value ? $(this).hasClass(value) : true; 22 | } 23 | }); 24 | } 25 | 26 | function init() { 27 | var filterContainer = $(this); 28 | var handler = filterContainer.data('handler'); 29 | var elementsWrapper = $(filterContainer.data('elements')); 30 | 31 | if (elementsWrapper.length < 1) { 32 | console.error('The element containing elements does not exist: ' + filterContainer.data('elements')); 33 | return; 34 | } 35 | 36 | var elementsParent = elementsWrapper.find('.elements-filter').wrapAll('

').eq(0).parent(); 37 | 38 | if (handler === 'isotope') { 39 | elementsParent.isotope({ itemSelector: '.elements-filter' }); 40 | } 41 | 42 | var filters = filterContainer.find('a'); 43 | 44 | filters.on('click', function (e) { 45 | e.preventDefault(); 46 | 47 | var filter = $(this); 48 | var value = filter.data('filter'); 49 | 50 | if (value) { 51 | value = 'elements-filter-' + value; 52 | } 53 | 54 | filters.removeClass('active'); 55 | filter.addClass('active'); 56 | 57 | if (handler === 'isotope') { 58 | filterIsotope(elementsParent, value); 59 | } else { 60 | filterDefault(elementsParent, value); 61 | } 62 | }); 63 | } 64 | 65 | $(document).ready(function () { 66 | $('[data-elements-filter]').each(init); 67 | }); 68 | })(jQuery); 69 | -------------------------------------------------------------------------------- /src/EventListener/TemplateListener.php: -------------------------------------------------------------------------------- 1 | handleArticleTemplate($template); 18 | $this->handleElementTemplate($template); 19 | } 20 | 21 | /** 22 | * Handle the article template 23 | * 24 | * @param Template $template 25 | */ 26 | private function handleArticleTemplate(Template $template) 27 | { 28 | if (TL_MODE !== 'FE' 29 | || stripos($template->getName(), 'mod_article') !== 0 30 | || $template->customTpl 31 | || !FilterHelper::isArticleEnabled($template->id) 32 | ) { 33 | return; 34 | } 35 | 36 | $template->setName('mod_article_elements_filter'); 37 | $template->elementsFilters = FilterHelper::getArticleFilters($template->id); 38 | $template->elementsFiltersHandler = $template->elementsFilter_handler; 39 | 40 | // Add the handler assets 41 | if (($assets = FilterHelper::getHandlerAssets($template->id)) !== null) { 42 | foreach ($assets as $asset) { 43 | $GLOBALS['TL_JAVASCRIPT'][] = $asset; 44 | } 45 | } 46 | } 47 | 48 | /** 49 | * Handle the content element template 50 | * 51 | * @param Template $template 52 | */ 53 | private function handleElementTemplate(Template $template) 54 | { 55 | if (TL_MODE !== 'FE' 56 | || (stripos($template->getName(), 'ce_') !== 0 && stripos($template->getName(), 'rsce_') !== 0) 57 | || !FilterHelper::isArticleEnabled($template->pid) 58 | || count(($filters = deserialize($template->elementsFilter_filters, true))) < 1 59 | ) { 60 | return; 61 | } 62 | 63 | $classes = []; 64 | 65 | foreach ($filters as $filter) { 66 | $classes[] = 'elements-filter-'.$filter; 67 | } 68 | 69 | $template->class = trim($template->class.' elements-filter '.implode(' ', $classes)); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/FilterHelper.php: -------------------------------------------------------------------------------- 1 | prepare("SELECT elementsFilter_enable FROM tl_article WHERE id=?") 19 | ->execute($articleId); 20 | 21 | return $article->elementsFilter_enable ? true : false; 22 | } 23 | 24 | /** 25 | * Get the javascript handler assets 26 | * 27 | * @param int $articleId 28 | * 29 | * @return array|null 30 | */ 31 | public static function getHandlerAssets($articleId) 32 | { 33 | if (!static::isArticleEnabled($articleId)) { 34 | return null; 35 | } 36 | 37 | $assets = ['system/modules/elements-filter/assets/handler/handler.min.js']; 38 | 39 | $article = Database::getInstance()->prepare("SELECT elementsFilter_handler FROM tl_article WHERE id=?") 40 | ->execute($articleId); 41 | 42 | if ($article->elementsFilter_handler === 'isotope') { 43 | $assets[] = 'system/modules/elements-filter/assets/isotope/isotope.pkgd.min.js'; 44 | } 45 | 46 | return $assets; 47 | } 48 | 49 | /** 50 | * Get the article filters 51 | * 52 | * @param int $articleId 53 | * 54 | * @return array 55 | */ 56 | public static function getArticleFilters($articleId) 57 | { 58 | if (!static::isArticleEnabled($articleId)) { 59 | return []; 60 | } 61 | 62 | $filters = []; 63 | $article = Database::getInstance()->prepare("SELECT elementsFilter_filters FROM tl_article WHERE id=?") 64 | ->execute($articleId); 65 | 66 | foreach (deserialize($article->elementsFilter_filters, true) as $filter) { 67 | $filters[] = [ 68 | 'value' => $filter['elementsFilter_filters_value'], 69 | 'label' => $filter['elementsFilter_filters_label'], 70 | 'cssClass' => $filter['elementsFilter_filters_cssClass'], 71 | ]; 72 | } 73 | 74 | return $filters; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /dca/tl_article.php: -------------------------------------------------------------------------------- 1 | &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_enable'], 20 | 'exclude' => true, 21 | 'inputType' => 'checkbox', 22 | 'eval' => ['submitOnChange' => true, 'tl_class' => 'clr'], 23 | 'sql' => "char(1) NOT NULL default ''", 24 | ]; 25 | 26 | $GLOBALS['TL_DCA']['tl_article']['fields']['elementsFilter_handler'] = [ 27 | 'label' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_handler'], 28 | 'exclude' => true, 29 | 'inputType' => 'select', 30 | 'options' => ['default', 'isotope'], 31 | 'reference' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_handlerRef'], 32 | 'eval' => ['tl_class' => 'clr'], 33 | 'sql' => "varchar(8) NOT NULL default ''", 34 | ]; 35 | 36 | $GLOBALS['TL_DCA']['tl_article']['fields']['elementsFilter_filters'] = [ 37 | 'label' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_filters'], 38 | 'exclude' => true, 39 | 'inputType' => 'multiColumnWizard', 40 | 'eval' => [ 41 | 'mandatory' => true, 42 | 'tl_class' => 'clr', 43 | 'columnFields' => [ 44 | 'elementsFilter_filters_value' => [ 45 | 'label' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_filters_value'], 46 | 'exclude' => true, 47 | 'inputType' => 'text', 48 | 'eval' => ['rgxp' => 'alias', 'style' => 'width:200px;'], 49 | ], 50 | 'elementsFilter_filters_label' => [ 51 | 'label' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_filters_label'], 52 | 'exclude' => true, 53 | 'inputType' => 'text', 54 | 'eval' => ['style' => 'width:200px;'], 55 | ], 56 | 'elementsFilter_filters_cssClass' => [ 57 | 'label' => &$GLOBALS['TL_LANG']['tl_article']['elementsFilter_filters_cssClass'], 58 | 'exclude' => true, 59 | 'inputType' => 'text', 60 | 'eval' => ['style' => 'width:150px;'], 61 | ], 62 | ], 63 | ], 64 | 'sql' => "blob NULL", 65 | ]; 66 | -------------------------------------------------------------------------------- /templates/modules/mod_article_elements_filter.html5: -------------------------------------------------------------------------------- 1 | 2 |

cssID ?>style): ?> style="style ?>"> 3 | 4 | printable): ?> 5 | 6 |

7 | 8 | printButton): ?> 9 | 10 | 11 | 12 | pdfButton): ?> 13 | 14 | 15 | 16 | facebookButton): ?> 17 | 18 | 19 | 20 | twitterButton): ?> 21 | 22 | 23 | 24 | gplusButton): ?> 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | elementsFilters): ?> 33 |

34 |

class=""> 37 | 38 | 39 | 40 |

41 |

42 | 43 | 44 |

45 | elements) ?> 46 |

47 | 48 | backlink): ?> 49 | 50 |

back ?>

51 | 52 | 53 | 54 |

55 | -------------------------------------------------------------------------------- /assets/isotope/isotope.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Isotope PACKAGED v3.0.3 3 | * 4 | * Licensed GPLv3 for open source use 5 | * or Isotope Commercial License for commercial use 6 | * 7 | * http://isotope.metafizzy.co 8 | * Copyright 2017 Metafizzy 9 | */ 10 | 11 | !function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,s,a){function u(t,e,n){var o,s="$()."+i+'("'+e+'")';return t.each(function(t,u){var h=a.data(u,i);if(!h)return void r(i+" not initialized. Cannot call methods, i.e. "+s);var d=h[e];if(!d||"_"==e.charAt(0))return void r(s+" is not a valid method");var l=d.apply(h,n);o=void 0===o?l:o}),void 0!==o?o:t}function h(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new s(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(s.prototype.option||(s.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return u(this,t,e)}return h(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,s=t.console,r="undefined"==typeof s?function(){}:function(t){s.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return n.indexOf(e)==-1&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return n!=-1&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var s=this._onceEvents&&this._onceEvents[t];o;){var r=s&&s[o];r&&(this.off(t,o),delete s[o]),o.apply(this,e),n+=r?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=t.indexOf("%")==-1&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;ei&&(this.x=0,this.y=this.maxY);var n={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=e,n},i._getContainerSize=function(){return{height:this.maxY}},e}),function(t,e){"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):"object"==typeof module&&module.exports?module.exports=e(require("../layout-mode")):e(t.Isotope.LayoutMode)}(window,function(t){"use strict";var e=t.create("vertical",{horizontalAlignment:0}),i=e.prototype;return i._resetLayout=function(){this.y=0},i._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},i._getContainerSize=function(){return{height:this.y}},e}),function(t,e){"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","desandro-matches-selector/matches-selector","fizzy-ui-utils/utils","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],function(i,n,o,s,r,a){return e(t,i,n,o,s,r,a)}):"object"==typeof module&&module.exports?module.exports=e(t,require("outlayer"),require("get-size"),require("desandro-matches-selector"),require("fizzy-ui-utils"),require("isotope/js/item"),require("isotope/js/layout-mode"),require("isotope/js/layout-modes/masonry"),require("isotope/js/layout-modes/fit-rows"),require("isotope/js/layout-modes/vertical")):t.Isotope=e(t,t.Outlayer,t.getSize,t.matchesSelector,t.fizzyUIUtils,t.Isotope.Item,t.Isotope.LayoutMode)}(window,function(t,e,i,n,o,s,r){function a(t,e){return function(i,n){for(var o=0;oa||ra?1:-1)*h}}return 0}}var u=t.jQuery,h=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},d=e.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});d.Item=s,d.LayoutMode=r;var l=d.prototype;l._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),e.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var t in r.modes)this._initLayoutMode(t)},l.reloadItems=function(){this.itemGUID=0,e.prototype.reloadItems.call(this)},l._itemize=function(){for(var t=e.prototype._itemize.apply(this,arguments),i=0;i $().plugin('option', {...}) 65 | if ( !PluginClass.prototype.option ) { 66 | // option setter 67 | PluginClass.prototype.option = function( opts ) { 68 | // bail out if not an object 69 | if ( !$.isPlainObject( opts ) ){ 70 | return; 71 | } 72 | this.options = $.extend( true, this.options, opts ); 73 | }; 74 | } 75 | 76 | // make jQuery plugin 77 | $.fn[ namespace ] = function( arg0 /*, arg1 */ ) { 78 | if ( typeof arg0 == 'string' ) { 79 | // method call $().plugin( 'methodName', { options } ) 80 | // shift arguments by 1 81 | var args = arraySlice.call( arguments, 1 ); 82 | return methodCall( this, arg0, args ); 83 | } 84 | // just $().plugin({ options }) 85 | plainCall( this, arg0 ); 86 | return this; 87 | }; 88 | 89 | // $().plugin('methodName') 90 | function methodCall( $elems, methodName, args ) { 91 | var returnValue; 92 | var pluginMethodStr = '$().' + namespace + '("' + methodName + '")'; 93 | 94 | $elems.each( function( i, elem ) { 95 | // get instance 96 | var instance = $.data( elem, namespace ); 97 | if ( !instance ) { 98 | logError( namespace + ' not initialized. Cannot call methods, i.e. ' + 99 | pluginMethodStr ); 100 | return; 101 | } 102 | 103 | var method = instance[ methodName ]; 104 | if ( !method || methodName.charAt(0) == '_' ) { 105 | logError( pluginMethodStr + ' is not a valid method' ); 106 | return; 107 | } 108 | 109 | // apply method, get return value 110 | var value = method.apply( instance, args ); 111 | // set return value if value is returned, use only first value 112 | returnValue = returnValue === undefined ? value : returnValue; 113 | }); 114 | 115 | return returnValue !== undefined ? returnValue : $elems; 116 | } 117 | 118 | function plainCall( $elems, options ) { 119 | $elems.each( function( i, elem ) { 120 | var instance = $.data( elem, namespace ); 121 | if ( instance ) { 122 | // set options & init 123 | instance.option( options ); 124 | instance._init(); 125 | } else { 126 | // initialize new instance 127 | instance = new PluginClass( elem, options ); 128 | $.data( elem, namespace, instance ); 129 | } 130 | }); 131 | } 132 | 133 | updateJQuery( $ ); 134 | 135 | } 136 | 137 | // ----- updateJQuery ----- // 138 | 139 | // set $.bridget for v1 backwards compatibility 140 | function updateJQuery( $ ) { 141 | if ( !$ || ( $ && $.bridget ) ) { 142 | return; 143 | } 144 | $.bridget = jQueryBridget; 145 | } 146 | 147 | updateJQuery( jQuery || window.jQuery ); 148 | 149 | // ----- ----- // 150 | 151 | return jQueryBridget; 152 | 153 | })); 154 | 155 | /** 156 | * EvEmitter v1.0.3 157 | * Lil' event emitter 158 | * MIT License 159 | */ 160 | 161 | /* jshint unused: true, undef: true, strict: true */ 162 | 163 | ( function( global, factory ) { 164 | // universal module definition 165 | /* jshint strict: false */ /* globals define, module, window */ 166 | if ( typeof define == 'function' && define.amd ) { 167 | // AMD - RequireJS 168 | define( 'ev-emitter/ev-emitter',factory ); 169 | } else if ( typeof module == 'object' && module.exports ) { 170 | // CommonJS - Browserify, Webpack 171 | module.exports = factory(); 172 | } else { 173 | // Browser globals 174 | global.EvEmitter = factory(); 175 | } 176 | 177 | }( typeof window != 'undefined' ? window : this, function() { 178 | 179 | 180 | 181 | function EvEmitter() {} 182 | 183 | var proto = EvEmitter.prototype; 184 | 185 | proto.on = function( eventName, listener ) { 186 | if ( !eventName || !listener ) { 187 | return; 188 | } 189 | // set events hash 190 | var events = this._events = this._events || {}; 191 | // set listeners array 192 | var listeners = events[ eventName ] = events[ eventName ] || []; 193 | // only add once 194 | if ( listeners.indexOf( listener ) == -1 ) { 195 | listeners.push( listener ); 196 | } 197 | 198 | return this; 199 | }; 200 | 201 | proto.once = function( eventName, listener ) { 202 | if ( !eventName || !listener ) { 203 | return; 204 | } 205 | // add event 206 | this.on( eventName, listener ); 207 | // set once flag 208 | // set onceEvents hash 209 | var onceEvents = this._onceEvents = this._onceEvents || {}; 210 | // set onceListeners object 211 | var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {}; 212 | // set flag 213 | onceListeners[ listener ] = true; 214 | 215 | return this; 216 | }; 217 | 218 | proto.off = function( eventName, listener ) { 219 | var listeners = this._events && this._events[ eventName ]; 220 | if ( !listeners || !listeners.length ) { 221 | return; 222 | } 223 | var index = listeners.indexOf( listener ); 224 | if ( index != -1 ) { 225 | listeners.splice( index, 1 ); 226 | } 227 | 228 | return this; 229 | }; 230 | 231 | proto.emitEvent = function( eventName, args ) { 232 | var listeners = this._events && this._events[ eventName ]; 233 | if ( !listeners || !listeners.length ) { 234 | return; 235 | } 236 | var i = 0; 237 | var listener = listeners[i]; 238 | args = args || []; 239 | // once stuff 240 | var onceListeners = this._onceEvents && this._onceEvents[ eventName ]; 241 | 242 | while ( listener ) { 243 | var isOnce = onceListeners && onceListeners[ listener ]; 244 | if ( isOnce ) { 245 | // remove listener 246 | // remove before trigger to prevent recursion 247 | this.off( eventName, listener ); 248 | // unset once flag 249 | delete onceListeners[ listener ]; 250 | } 251 | // trigger listener 252 | listener.apply( this, args ); 253 | // get next listener 254 | i += isOnce ? 0 : 1; 255 | listener = listeners[i]; 256 | } 257 | 258 | return this; 259 | }; 260 | 261 | return EvEmitter; 262 | 263 | })); 264 | 265 | /*! 266 | * getSize v2.0.2 267 | * measure size of elements 268 | * MIT license 269 | */ 270 | 271 | /*jshint browser: true, strict: true, undef: true, unused: true */ 272 | /*global define: false, module: false, console: false */ 273 | 274 | ( function( window, factory ) { 275 | 'use strict'; 276 | 277 | if ( typeof define == 'function' && define.amd ) { 278 | // AMD 279 | define( 'get-size/get-size',[],function() { 280 | return factory(); 281 | }); 282 | } else if ( typeof module == 'object' && module.exports ) { 283 | // CommonJS 284 | module.exports = factory(); 285 | } else { 286 | // browser global 287 | window.getSize = factory(); 288 | } 289 | 290 | })( window, function factory() { 291 | 'use strict'; 292 | 293 | // -------------------------- helpers -------------------------- // 294 | 295 | // get a number from a string, not a percentage 296 | function getStyleSize( value ) { 297 | var num = parseFloat( value ); 298 | // not a percent like '100%', and a number 299 | var isValid = value.indexOf('%') == -1 && !isNaN( num ); 300 | return isValid && num; 301 | } 302 | 303 | function noop() {} 304 | 305 | var logError = typeof console == 'undefined' ? noop : 306 | function( message ) { 307 | console.error( message ); 308 | }; 309 | 310 | // -------------------------- measurements -------------------------- // 311 | 312 | var measurements = [ 313 | 'paddingLeft', 314 | 'paddingRight', 315 | 'paddingTop', 316 | 'paddingBottom', 317 | 'marginLeft', 318 | 'marginRight', 319 | 'marginTop', 320 | 'marginBottom', 321 | 'borderLeftWidth', 322 | 'borderRightWidth', 323 | 'borderTopWidth', 324 | 'borderBottomWidth' 325 | ]; 326 | 327 | var measurementsLength = measurements.length; 328 | 329 | function getZeroSize() { 330 | var size = { 331 | width: 0, 332 | height: 0, 333 | innerWidth: 0, 334 | innerHeight: 0, 335 | outerWidth: 0, 336 | outerHeight: 0 337 | }; 338 | for ( var i=0; i < measurementsLength; i++ ) { 339 | var measurement = measurements[i]; 340 | size[ measurement ] = 0; 341 | } 342 | return size; 343 | } 344 | 345 | // -------------------------- getStyle -------------------------- // 346 | 347 | /** 348 | * getStyle, get style of element, check for Firefox bug 349 | * https://bugzilla.mozilla.org/show_bug.cgi?id=548397 350 | */ 351 | function getStyle( elem ) { 352 | var style = getComputedStyle( elem ); 353 | if ( !style ) { 354 | logError( 'Style returned ' + style + 355 | '. Are you running this code in a hidden iframe on Firefox? ' + 356 | 'See http://bit.ly/getsizebug1' ); 357 | } 358 | return style; 359 | } 360 | 361 | // -------------------------- setup -------------------------- // 362 | 363 | var isSetup = false; 364 | 365 | var isBoxSizeOuter; 366 | 367 | /** 368 | * setup 369 | * check isBoxSizerOuter 370 | * do on first getSize() rather than on page load for Firefox bug 371 | */ 372 | function setup() { 373 | // setup once 374 | if ( isSetup ) { 375 | return; 376 | } 377 | isSetup = true; 378 | 379 | // -------------------------- box sizing -------------------------- // 380 | 381 | /** 382 | * WebKit measures the outer-width on style.width on border-box elems 383 | * IE & Firefox<29 measures the inner-width 384 | */ 385 | var div = document.createElement('div'); 386 | div.style.width = '200px'; 387 | div.style.padding = '1px 2px 3px 4px'; 388 | div.style.borderStyle = 'solid'; 389 | div.style.borderWidth = '1px 2px 3px 4px'; 390 | div.style.boxSizing = 'border-box'; 391 | 392 | var body = document.body || document.documentElement; 393 | body.appendChild( div ); 394 | var style = getStyle( div ); 395 | 396 | getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200; 397 | body.removeChild( div ); 398 | 399 | } 400 | 401 | // -------------------------- getSize -------------------------- // 402 | 403 | function getSize( elem ) { 404 | setup(); 405 | 406 | // use querySeletor if elem is string 407 | if ( typeof elem == 'string' ) { 408 | elem = document.querySelector( elem ); 409 | } 410 | 411 | // do not proceed on non-objects 412 | if ( !elem || typeof elem != 'object' || !elem.nodeType ) { 413 | return; 414 | } 415 | 416 | var style = getStyle( elem ); 417 | 418 | // if hidden, everything is 0 419 | if ( style.display == 'none' ) { 420 | return getZeroSize(); 421 | } 422 | 423 | var size = {}; 424 | size.width = elem.offsetWidth; 425 | size.height = elem.offsetHeight; 426 | 427 | var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box'; 428 | 429 | // get all measurements 430 | for ( var i=0; i < measurementsLength; i++ ) { 431 | var measurement = measurements[i]; 432 | var value = style[ measurement ]; 433 | var num = parseFloat( value ); 434 | // any 'auto', 'medium' value will be 0 435 | size[ measurement ] = !isNaN( num ) ? num : 0; 436 | } 437 | 438 | var paddingWidth = size.paddingLeft + size.paddingRight; 439 | var paddingHeight = size.paddingTop + size.paddingBottom; 440 | var marginWidth = size.marginLeft + size.marginRight; 441 | var marginHeight = size.marginTop + size.marginBottom; 442 | var borderWidth = size.borderLeftWidth + size.borderRightWidth; 443 | var borderHeight = size.borderTopWidth + size.borderBottomWidth; 444 | 445 | var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; 446 | 447 | // overwrite width and height if we can get it from style 448 | var styleWidth = getStyleSize( style.width ); 449 | if ( styleWidth !== false ) { 450 | size.width = styleWidth + 451 | // add padding and border unless it's already including it 452 | ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); 453 | } 454 | 455 | var styleHeight = getStyleSize( style.height ); 456 | if ( styleHeight !== false ) { 457 | size.height = styleHeight + 458 | // add padding and border unless it's already including it 459 | ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); 460 | } 461 | 462 | size.innerWidth = size.width - ( paddingWidth + borderWidth ); 463 | size.innerHeight = size.height - ( paddingHeight + borderHeight ); 464 | 465 | size.outerWidth = size.width + marginWidth; 466 | size.outerHeight = size.height + marginHeight; 467 | 468 | return size; 469 | } 470 | 471 | return getSize; 472 | 473 | }); 474 | 475 | /** 476 | * matchesSelector v2.0.2 477 | * matchesSelector( element, '.selector' ) 478 | * MIT license 479 | */ 480 | 481 | /*jshint browser: true, strict: true, undef: true, unused: true */ 482 | 483 | ( function( window, factory ) { 484 | /*global define: false, module: false */ 485 | 'use strict'; 486 | // universal module definition 487 | if ( typeof define == 'function' && define.amd ) { 488 | // AMD 489 | define( 'desandro-matches-selector/matches-selector',factory ); 490 | } else if ( typeof module == 'object' && module.exports ) { 491 | // CommonJS 492 | module.exports = factory(); 493 | } else { 494 | // browser global 495 | window.matchesSelector = factory(); 496 | } 497 | 498 | }( window, function factory() { 499 | 'use strict'; 500 | 501 | var matchesMethod = ( function() { 502 | var ElemProto = window.Element.prototype; 503 | // check for the standard method name first 504 | if ( ElemProto.matches ) { 505 | return 'matches'; 506 | } 507 | // check un-prefixed 508 | if ( ElemProto.matchesSelector ) { 509 | return 'matchesSelector'; 510 | } 511 | // check vendor prefixes 512 | var prefixes = [ 'webkit', 'moz', 'ms', 'o' ]; 513 | 514 | for ( var i=0; i < prefixes.length; i++ ) { 515 | var prefix = prefixes[i]; 516 | var method = prefix + 'MatchesSelector'; 517 | if ( ElemProto[ method ] ) { 518 | return method; 519 | } 520 | } 521 | })(); 522 | 523 | return function matchesSelector( elem, selector ) { 524 | return elem[ matchesMethod ]( selector ); 525 | }; 526 | 527 | })); 528 | 529 | /** 530 | * Fizzy UI utils v2.0.4 531 | * MIT license 532 | */ 533 | 534 | /*jshint browser: true, undef: true, unused: true, strict: true */ 535 | 536 | ( function( window, factory ) { 537 | // universal module definition 538 | /*jshint strict: false */ /*globals define, module, require */ 539 | 540 | if ( typeof define == 'function' && define.amd ) { 541 | // AMD 542 | define( 'fizzy-ui-utils/utils',[ 543 | 'desandro-matches-selector/matches-selector' 544 | ], function( matchesSelector ) { 545 | return factory( window, matchesSelector ); 546 | }); 547 | } else if ( typeof module == 'object' && module.exports ) { 548 | // CommonJS 549 | module.exports = factory( 550 | window, 551 | require('desandro-matches-selector') 552 | ); 553 | } else { 554 | // browser global 555 | window.fizzyUIUtils = factory( 556 | window, 557 | window.matchesSelector 558 | ); 559 | } 560 | 561 | }( window, function factory( window, matchesSelector ) { 562 | 563 | 564 | 565 | var utils = {}; 566 | 567 | // ----- extend ----- // 568 | 569 | // extends objects 570 | utils.extend = function( a, b ) { 571 | for ( var prop in b ) { 572 | a[ prop ] = b[ prop ]; 573 | } 574 | return a; 575 | }; 576 | 577 | // ----- modulo ----- // 578 | 579 | utils.modulo = function( num, div ) { 580 | return ( ( num % div ) + div ) % div; 581 | }; 582 | 583 | // ----- makeArray ----- // 584 | 585 | // turn element or nodeList into an array 586 | utils.makeArray = function( obj ) { 587 | var ary = []; 588 | if ( Array.isArray( obj ) ) { 589 | // use object if already an array 590 | ary = obj; 591 | } else if ( obj && typeof obj == 'object' && 592 | typeof obj.length == 'number' ) { 593 | // convert nodeList to array 594 | for ( var i=0; i < obj.length; i++ ) { 595 | ary.push( obj[i] ); 596 | } 597 | } else { 598 | // array of single index 599 | ary.push( obj ); 600 | } 601 | return ary; 602 | }; 603 | 604 | // ----- removeFrom ----- // 605 | 606 | utils.removeFrom = function( ary, obj ) { 607 | var index = ary.indexOf( obj ); 608 | if ( index != -1 ) { 609 | ary.splice( index, 1 ); 610 | } 611 | }; 612 | 613 | // ----- getParent ----- // 614 | 615 | utils.getParent = function( elem, selector ) { 616 | while ( elem != document.body ) { 617 | elem = elem.parentNode; 618 | if ( matchesSelector( elem, selector ) ) { 619 | return elem; 620 | } 621 | } 622 | }; 623 | 624 | // ----- getQueryElement ----- // 625 | 626 | // use element as selector string 627 | utils.getQueryElement = function( elem ) { 628 | if ( typeof elem == 'string' ) { 629 | return document.querySelector( elem ); 630 | } 631 | return elem; 632 | }; 633 | 634 | // ----- handleEvent ----- // 635 | 636 | // enable .ontype to trigger from .addEventListener( elem, 'type' ) 637 | utils.handleEvent = function( event ) { 638 | var method = 'on' + event.type; 639 | if ( this[ method ] ) { 640 | this[ method ]( event ); 641 | } 642 | }; 643 | 644 | // ----- filterFindElements ----- // 645 | 646 | utils.filterFindElements = function( elems, selector ) { 647 | // make array of elems 648 | elems = utils.makeArray( elems ); 649 | var ffElems = []; 650 | 651 | elems.forEach( function( elem ) { 652 | // check that elem is an actual element 653 | if ( !( elem instanceof HTMLElement ) ) { 654 | return; 655 | } 656 | // add elem if no selector 657 | if ( !selector ) { 658 | ffElems.push( elem ); 659 | return; 660 | } 661 | // filter & find items if we have a selector 662 | // filter 663 | if ( matchesSelector( elem, selector ) ) { 664 | ffElems.push( elem ); 665 | } 666 | // find children 667 | var childElems = elem.querySelectorAll( selector ); 668 | // concat childElems to filterFound array 669 | for ( var i=0; i < childElems.length; i++ ) { 670 | ffElems.push( childElems[i] ); 671 | } 672 | }); 673 | 674 | return ffElems; 675 | }; 676 | 677 | // ----- debounceMethod ----- // 678 | 679 | utils.debounceMethod = function( _class, methodName, threshold ) { 680 | // original method 681 | var method = _class.prototype[ methodName ]; 682 | var timeoutName = methodName + 'Timeout'; 683 | 684 | _class.prototype[ methodName ] = function() { 685 | var timeout = this[ timeoutName ]; 686 | if ( timeout ) { 687 | clearTimeout( timeout ); 688 | } 689 | var args = arguments; 690 | 691 | var _this = this; 692 | this[ timeoutName ] = setTimeout( function() { 693 | method.apply( _this, args ); 694 | delete _this[ timeoutName ]; 695 | }, threshold || 100 ); 696 | }; 697 | }; 698 | 699 | // ----- docReady ----- // 700 | 701 | utils.docReady = function( callback ) { 702 | var readyState = document.readyState; 703 | if ( readyState == 'complete' || readyState == 'interactive' ) { 704 | // do async to allow for other scripts to run. metafizzy/flickity#441 705 | setTimeout( callback ); 706 | } else { 707 | document.addEventListener( 'DOMContentLoaded', callback ); 708 | } 709 | }; 710 | 711 | // ----- htmlInit ----- // 712 | 713 | // http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ 714 | utils.toDashed = function( str ) { 715 | return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) { 716 | return $1 + '-' + $2; 717 | }).toLowerCase(); 718 | }; 719 | 720 | var console = window.console; 721 | /** 722 | * allow user to initialize classes via [data-namespace] or .js-namespace class 723 | * htmlInit( Widget, 'widgetName' ) 724 | * options are parsed from data-namespace-options 725 | */ 726 | utils.htmlInit = function( WidgetClass, namespace ) { 727 | utils.docReady( function() { 728 | var dashedNamespace = utils.toDashed( namespace ); 729 | var dataAttr = 'data-' + dashedNamespace; 730 | var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' ); 731 | var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace ); 732 | var elems = utils.makeArray( dataAttrElems ) 733 | .concat( utils.makeArray( jsDashElems ) ); 734 | var dataOptionsAttr = dataAttr + '-options'; 735 | var jQuery = window.jQuery; 736 | 737 | elems.forEach( function( elem ) { 738 | var attr = elem.getAttribute( dataAttr ) || 739 | elem.getAttribute( dataOptionsAttr ); 740 | var options; 741 | try { 742 | options = attr && JSON.parse( attr ); 743 | } catch ( error ) { 744 | // log error, do not initialize 745 | if ( console ) { 746 | console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className + 747 | ': ' + error ); 748 | } 749 | return; 750 | } 751 | // initialize 752 | var instance = new WidgetClass( elem, options ); 753 | // make available via $().data('namespace') 754 | if ( jQuery ) { 755 | jQuery.data( elem, namespace, instance ); 756 | } 757 | }); 758 | 759 | }); 760 | }; 761 | 762 | // ----- ----- // 763 | 764 | return utils; 765 | 766 | })); 767 | 768 | /** 769 | * Outlayer Item 770 | */ 771 | 772 | ( function( window, factory ) { 773 | // universal module definition 774 | /* jshint strict: false */ /* globals define, module, require */ 775 | if ( typeof define == 'function' && define.amd ) { 776 | // AMD - RequireJS 777 | define( 'outlayer/item',[ 778 | 'ev-emitter/ev-emitter', 779 | 'get-size/get-size' 780 | ], 781 | factory 782 | ); 783 | } else if ( typeof module == 'object' && module.exports ) { 784 | // CommonJS - Browserify, Webpack 785 | module.exports = factory( 786 | require('ev-emitter'), 787 | require('get-size') 788 | ); 789 | } else { 790 | // browser global 791 | window.Outlayer = {}; 792 | window.Outlayer.Item = factory( 793 | window.EvEmitter, 794 | window.getSize 795 | ); 796 | } 797 | 798 | }( window, function factory( EvEmitter, getSize ) { 799 | 'use strict'; 800 | 801 | // ----- helpers ----- // 802 | 803 | function isEmptyObj( obj ) { 804 | for ( var prop in obj ) { 805 | return false; 806 | } 807 | prop = null; 808 | return true; 809 | } 810 | 811 | // -------------------------- CSS3 support -------------------------- // 812 | 813 | 814 | var docElemStyle = document.documentElement.style; 815 | 816 | var transitionProperty = typeof docElemStyle.transition == 'string' ? 817 | 'transition' : 'WebkitTransition'; 818 | var transformProperty = typeof docElemStyle.transform == 'string' ? 819 | 'transform' : 'WebkitTransform'; 820 | 821 | var transitionEndEvent = { 822 | WebkitTransition: 'webkitTransitionEnd', 823 | transition: 'transitionend' 824 | }[ transitionProperty ]; 825 | 826 | // cache all vendor properties that could have vendor prefix 827 | var vendorProperties = { 828 | transform: transformProperty, 829 | transition: transitionProperty, 830 | transitionDuration: transitionProperty + 'Duration', 831 | transitionProperty: transitionProperty + 'Property', 832 | transitionDelay: transitionProperty + 'Delay' 833 | }; 834 | 835 | // -------------------------- Item -------------------------- // 836 | 837 | function Item( element, layout ) { 838 | if ( !element ) { 839 | return; 840 | } 841 | 842 | this.element = element; 843 | // parent layout class, i.e. Masonry, Isotope, or Packery 844 | this.layout = layout; 845 | this.position = { 846 | x: 0, 847 | y: 0 848 | }; 849 | 850 | this._create(); 851 | } 852 | 853 | // inherit EvEmitter 854 | var proto = Item.prototype = Object.create( EvEmitter.prototype ); 855 | proto.constructor = Item; 856 | 857 | proto._create = function() { 858 | // transition objects 859 | this._transn = { 860 | ingProperties: {}, 861 | clean: {}, 862 | onEnd: {} 863 | }; 864 | 865 | this.css({ 866 | position: 'absolute' 867 | }); 868 | }; 869 | 870 | // trigger specified handler for event type 871 | proto.handleEvent = function( event ) { 872 | var method = 'on' + event.type; 873 | if ( this[ method ] ) { 874 | this[ method ]( event ); 875 | } 876 | }; 877 | 878 | proto.getSize = function() { 879 | this.size = getSize( this.element ); 880 | }; 881 | 882 | /** 883 | * apply CSS styles to element 884 | * @param {Object} style 885 | */ 886 | proto.css = function( style ) { 887 | var elemStyle = this.element.style; 888 | 889 | for ( var prop in style ) { 890 | // use vendor property if available 891 | var supportedProp = vendorProperties[ prop ] || prop; 892 | elemStyle[ supportedProp ] = style[ prop ]; 893 | } 894 | }; 895 | 896 | // measure position, and sets it 897 | proto.getPosition = function() { 898 | var style = getComputedStyle( this.element ); 899 | var isOriginLeft = this.layout._getOption('originLeft'); 900 | var isOriginTop = this.layout._getOption('originTop'); 901 | var xValue = style[ isOriginLeft ? 'left' : 'right' ]; 902 | var yValue = style[ isOriginTop ? 'top' : 'bottom' ]; 903 | // convert percent to pixels 904 | var layoutSize = this.layout.size; 905 | var x = xValue.indexOf('%') != -1 ? 906 | ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 ); 907 | var y = yValue.indexOf('%') != -1 ? 908 | ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 ); 909 | 910 | // clean up 'auto' or other non-integer values 911 | x = isNaN( x ) ? 0 : x; 912 | y = isNaN( y ) ? 0 : y; 913 | // remove padding from measurement 914 | x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight; 915 | y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom; 916 | 917 | this.position.x = x; 918 | this.position.y = y; 919 | }; 920 | 921 | // set settled position, apply padding 922 | proto.layoutPosition = function() { 923 | var layoutSize = this.layout.size; 924 | var style = {}; 925 | var isOriginLeft = this.layout._getOption('originLeft'); 926 | var isOriginTop = this.layout._getOption('originTop'); 927 | 928 | // x 929 | var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight'; 930 | var xProperty = isOriginLeft ? 'left' : 'right'; 931 | var xResetProperty = isOriginLeft ? 'right' : 'left'; 932 | 933 | var x = this.position.x + layoutSize[ xPadding ]; 934 | // set in percentage or pixels 935 | style[ xProperty ] = this.getXValue( x ); 936 | // reset other property 937 | style[ xResetProperty ] = ''; 938 | 939 | // y 940 | var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom'; 941 | var yProperty = isOriginTop ? 'top' : 'bottom'; 942 | var yResetProperty = isOriginTop ? 'bottom' : 'top'; 943 | 944 | var y = this.position.y + layoutSize[ yPadding ]; 945 | // set in percentage or pixels 946 | style[ yProperty ] = this.getYValue( y ); 947 | // reset other property 948 | style[ yResetProperty ] = ''; 949 | 950 | this.css( style ); 951 | this.emitEvent( 'layout', [ this ] ); 952 | }; 953 | 954 | proto.getXValue = function( x ) { 955 | var isHorizontal = this.layout._getOption('horizontal'); 956 | return this.layout.options.percentPosition && !isHorizontal ? 957 | ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px'; 958 | }; 959 | 960 | proto.getYValue = function( y ) { 961 | var isHorizontal = this.layout._getOption('horizontal'); 962 | return this.layout.options.percentPosition && isHorizontal ? 963 | ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px'; 964 | }; 965 | 966 | proto._transitionTo = function( x, y ) { 967 | this.getPosition(); 968 | // get current x & y from top/left 969 | var curX = this.position.x; 970 | var curY = this.position.y; 971 | 972 | var compareX = parseInt( x, 10 ); 973 | var compareY = parseInt( y, 10 ); 974 | var didNotMove = compareX === this.position.x && compareY === this.position.y; 975 | 976 | // save end position 977 | this.setPosition( x, y ); 978 | 979 | // if did not move and not transitioning, just go to layout 980 | if ( didNotMove && !this.isTransitioning ) { 981 | this.layoutPosition(); 982 | return; 983 | } 984 | 985 | var transX = x - curX; 986 | var transY = y - curY; 987 | var transitionStyle = {}; 988 | transitionStyle.transform = this.getTranslate( transX, transY ); 989 | 990 | this.transition({ 991 | to: transitionStyle, 992 | onTransitionEnd: { 993 | transform: this.layoutPosition 994 | }, 995 | isCleaning: true 996 | }); 997 | }; 998 | 999 | proto.getTranslate = function( x, y ) { 1000 | // flip cooridinates if origin on right or bottom 1001 | var isOriginLeft = this.layout._getOption('originLeft'); 1002 | var isOriginTop = this.layout._getOption('originTop'); 1003 | x = isOriginLeft ? x : -x; 1004 | y = isOriginTop ? y : -y; 1005 | return 'translate3d(' + x + 'px, ' + y + 'px, 0)'; 1006 | }; 1007 | 1008 | // non transition + transform support 1009 | proto.goTo = function( x, y ) { 1010 | this.setPosition( x, y ); 1011 | this.layoutPosition(); 1012 | }; 1013 | 1014 | proto.moveTo = proto._transitionTo; 1015 | 1016 | proto.setPosition = function( x, y ) { 1017 | this.position.x = parseInt( x, 10 ); 1018 | this.position.y = parseInt( y, 10 ); 1019 | }; 1020 | 1021 | // ----- transition ----- // 1022 | 1023 | /** 1024 | * @param {Object} style - CSS 1025 | * @param {Function} onTransitionEnd 1026 | */ 1027 | 1028 | // non transition, just trigger callback 1029 | proto._nonTransition = function( args ) { 1030 | this.css( args.to ); 1031 | if ( args.isCleaning ) { 1032 | this._removeStyles( args.to ); 1033 | } 1034 | for ( var prop in args.onTransitionEnd ) { 1035 | args.onTransitionEnd[ prop ].call( this ); 1036 | } 1037 | }; 1038 | 1039 | /** 1040 | * proper transition 1041 | * @param {Object} args - arguments 1042 | * @param {Object} to - style to transition to 1043 | * @param {Object} from - style to start transition from 1044 | * @param {Boolean} isCleaning - removes transition styles after transition 1045 | * @param {Function} onTransitionEnd - callback 1046 | */ 1047 | proto.transition = function( args ) { 1048 | // redirect to nonTransition if no transition duration 1049 | if ( !parseFloat( this.layout.options.transitionDuration ) ) { 1050 | this._nonTransition( args ); 1051 | return; 1052 | } 1053 | 1054 | var _transition = this._transn; 1055 | // keep track of onTransitionEnd callback by css property 1056 | for ( var prop in args.onTransitionEnd ) { 1057 | _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ]; 1058 | } 1059 | // keep track of properties that are transitioning 1060 | for ( prop in args.to ) { 1061 | _transition.ingProperties[ prop ] = true; 1062 | // keep track of properties to clean up when transition is done 1063 | if ( args.isCleaning ) { 1064 | _transition.clean[ prop ] = true; 1065 | } 1066 | } 1067 | 1068 | // set from styles 1069 | if ( args.from ) { 1070 | this.css( args.from ); 1071 | // force redraw. http://blog.alexmaccaw.com/css-transitions 1072 | var h = this.element.offsetHeight; 1073 | // hack for JSHint to hush about unused var 1074 | h = null; 1075 | } 1076 | // enable transition 1077 | this.enableTransition( args.to ); 1078 | // set styles that are transitioning 1079 | this.css( args.to ); 1080 | 1081 | this.isTransitioning = true; 1082 | 1083 | }; 1084 | 1085 | // dash before all cap letters, including first for 1086 | // WebkitTransform => -webkit-transform 1087 | function toDashedAll( str ) { 1088 | return str.replace( /([A-Z])/g, function( $1 ) { 1089 | return '-' + $1.toLowerCase(); 1090 | }); 1091 | } 1092 | 1093 | var transitionProps = 'opacity,' + toDashedAll( transformProperty ); 1094 | 1095 | proto.enableTransition = function(/* style */) { 1096 | // HACK changing transitionProperty during a transition 1097 | // will cause transition to jump 1098 | if ( this.isTransitioning ) { 1099 | return; 1100 | } 1101 | 1102 | // make `transition: foo, bar, baz` from style object 1103 | // HACK un-comment this when enableTransition can work 1104 | // while a transition is happening 1105 | // var transitionValues = []; 1106 | // for ( var prop in style ) { 1107 | // // dash-ify camelCased properties like WebkitTransition 1108 | // prop = vendorProperties[ prop ] || prop; 1109 | // transitionValues.push( toDashedAll( prop ) ); 1110 | // } 1111 | // munge number to millisecond, to match stagger 1112 | var duration = this.layout.options.transitionDuration; 1113 | duration = typeof duration == 'number' ? duration + 'ms' : duration; 1114 | // enable transition styles 1115 | this.css({ 1116 | transitionProperty: transitionProps, 1117 | transitionDuration: duration, 1118 | transitionDelay: this.staggerDelay || 0 1119 | }); 1120 | // listen for transition end event 1121 | this.element.addEventListener( transitionEndEvent, this, false ); 1122 | }; 1123 | 1124 | // ----- events ----- // 1125 | 1126 | proto.onwebkitTransitionEnd = function( event ) { 1127 | this.ontransitionend( event ); 1128 | }; 1129 | 1130 | proto.onotransitionend = function( event ) { 1131 | this.ontransitionend( event ); 1132 | }; 1133 | 1134 | // properties that I munge to make my life easier 1135 | var dashedVendorProperties = { 1136 | '-webkit-transform': 'transform' 1137 | }; 1138 | 1139 | proto.ontransitionend = function( event ) { 1140 | // disregard bubbled events from children 1141 | if ( event.target !== this.element ) { 1142 | return; 1143 | } 1144 | var _transition = this._transn; 1145 | // get property name of transitioned property, convert to prefix-free 1146 | var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName; 1147 | 1148 | // remove property that has completed transitioning 1149 | delete _transition.ingProperties[ propertyName ]; 1150 | // check if any properties are still transitioning 1151 | if ( isEmptyObj( _transition.ingProperties ) ) { 1152 | // all properties have completed transitioning 1153 | this.disableTransition(); 1154 | } 1155 | // clean style 1156 | if ( propertyName in _transition.clean ) { 1157 | // clean up style 1158 | this.element.style[ event.propertyName ] = ''; 1159 | delete _transition.clean[ propertyName ]; 1160 | } 1161 | // trigger onTransitionEnd callback 1162 | if ( propertyName in _transition.onEnd ) { 1163 | var onTransitionEnd = _transition.onEnd[ propertyName ]; 1164 | onTransitionEnd.call( this ); 1165 | delete _transition.onEnd[ propertyName ]; 1166 | } 1167 | 1168 | this.emitEvent( 'transitionEnd', [ this ] ); 1169 | }; 1170 | 1171 | proto.disableTransition = function() { 1172 | this.removeTransitionStyles(); 1173 | this.element.removeEventListener( transitionEndEvent, this, false ); 1174 | this.isTransitioning = false; 1175 | }; 1176 | 1177 | /** 1178 | * removes style property from element 1179 | * @param {Object} style 1180 | **/ 1181 | proto._removeStyles = function( style ) { 1182 | // clean up transition styles 1183 | var cleanStyle = {}; 1184 | for ( var prop in style ) { 1185 | cleanStyle[ prop ] = ''; 1186 | } 1187 | this.css( cleanStyle ); 1188 | }; 1189 | 1190 | var cleanTransitionStyle = { 1191 | transitionProperty: '', 1192 | transitionDuration: '', 1193 | transitionDelay: '' 1194 | }; 1195 | 1196 | proto.removeTransitionStyles = function() { 1197 | // remove transition 1198 | this.css( cleanTransitionStyle ); 1199 | }; 1200 | 1201 | // ----- stagger ----- // 1202 | 1203 | proto.stagger = function( delay ) { 1204 | delay = isNaN( delay ) ? 0 : delay; 1205 | this.staggerDelay = delay + 'ms'; 1206 | }; 1207 | 1208 | // ----- show/hide/remove ----- // 1209 | 1210 | // remove element from DOM 1211 | proto.removeElem = function() { 1212 | this.element.parentNode.removeChild( this.element ); 1213 | // remove display: none 1214 | this.css({ display: '' }); 1215 | this.emitEvent( 'remove', [ this ] ); 1216 | }; 1217 | 1218 | proto.remove = function() { 1219 | // just remove element if no transition support or no transition 1220 | if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) { 1221 | this.removeElem(); 1222 | return; 1223 | } 1224 | 1225 | // start transition 1226 | this.once( 'transitionEnd', function() { 1227 | this.removeElem(); 1228 | }); 1229 | this.hide(); 1230 | }; 1231 | 1232 | proto.reveal = function() { 1233 | delete this.isHidden; 1234 | // remove display: none 1235 | this.css({ display: '' }); 1236 | 1237 | var options = this.layout.options; 1238 | 1239 | var onTransitionEnd = {}; 1240 | var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle'); 1241 | onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd; 1242 | 1243 | this.transition({ 1244 | from: options.hiddenStyle, 1245 | to: options.visibleStyle, 1246 | isCleaning: true, 1247 | onTransitionEnd: onTransitionEnd 1248 | }); 1249 | }; 1250 | 1251 | proto.onRevealTransitionEnd = function() { 1252 | // check if still visible 1253 | // during transition, item may have been hidden 1254 | if ( !this.isHidden ) { 1255 | this.emitEvent('reveal'); 1256 | } 1257 | }; 1258 | 1259 | /** 1260 | * get style property use for hide/reveal transition end 1261 | * @param {String} styleProperty - hiddenStyle/visibleStyle 1262 | * @returns {String} 1263 | */ 1264 | proto.getHideRevealTransitionEndProperty = function( styleProperty ) { 1265 | var optionStyle = this.layout.options[ styleProperty ]; 1266 | // use opacity 1267 | if ( optionStyle.opacity ) { 1268 | return 'opacity'; 1269 | } 1270 | // get first property 1271 | for ( var prop in optionStyle ) { 1272 | return prop; 1273 | } 1274 | }; 1275 | 1276 | proto.hide = function() { 1277 | // set flag 1278 | this.isHidden = true; 1279 | // remove display: none 1280 | this.css({ display: '' }); 1281 | 1282 | var options = this.layout.options; 1283 | 1284 | var onTransitionEnd = {}; 1285 | var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle'); 1286 | onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd; 1287 | 1288 | this.transition({ 1289 | from: options.visibleStyle, 1290 | to: options.hiddenStyle, 1291 | // keep hidden stuff hidden 1292 | isCleaning: true, 1293 | onTransitionEnd: onTransitionEnd 1294 | }); 1295 | }; 1296 | 1297 | proto.onHideTransitionEnd = function() { 1298 | // check if still hidden 1299 | // during transition, item may have been un-hidden 1300 | if ( this.isHidden ) { 1301 | this.css({ display: 'none' }); 1302 | this.emitEvent('hide'); 1303 | } 1304 | }; 1305 | 1306 | proto.destroy = function() { 1307 | this.css({ 1308 | position: '', 1309 | left: '', 1310 | right: '', 1311 | top: '', 1312 | bottom: '', 1313 | transition: '', 1314 | transform: '' 1315 | }); 1316 | }; 1317 | 1318 | return Item; 1319 | 1320 | })); 1321 | 1322 | /*! 1323 | * Outlayer v2.1.0 1324 | * the brains and guts of a layout library 1325 | * MIT license 1326 | */ 1327 | 1328 | ( function( window, factory ) { 1329 | 'use strict'; 1330 | // universal module definition 1331 | /* jshint strict: false */ /* globals define, module, require */ 1332 | if ( typeof define == 'function' && define.amd ) { 1333 | // AMD - RequireJS 1334 | define( 'outlayer/outlayer',[ 1335 | 'ev-emitter/ev-emitter', 1336 | 'get-size/get-size', 1337 | 'fizzy-ui-utils/utils', 1338 | './item' 1339 | ], 1340 | function( EvEmitter, getSize, utils, Item ) { 1341 | return factory( window, EvEmitter, getSize, utils, Item); 1342 | } 1343 | ); 1344 | } else if ( typeof module == 'object' && module.exports ) { 1345 | // CommonJS - Browserify, Webpack 1346 | module.exports = factory( 1347 | window, 1348 | require('ev-emitter'), 1349 | require('get-size'), 1350 | require('fizzy-ui-utils'), 1351 | require('./item') 1352 | ); 1353 | } else { 1354 | // browser global 1355 | window.Outlayer = factory( 1356 | window, 1357 | window.EvEmitter, 1358 | window.getSize, 1359 | window.fizzyUIUtils, 1360 | window.Outlayer.Item 1361 | ); 1362 | } 1363 | 1364 | }( window, function factory( window, EvEmitter, getSize, utils, Item ) { 1365 | 'use strict'; 1366 | 1367 | // ----- vars ----- // 1368 | 1369 | var console = window.console; 1370 | var jQuery = window.jQuery; 1371 | var noop = function() {}; 1372 | 1373 | // -------------------------- Outlayer -------------------------- // 1374 | 1375 | // globally unique identifiers 1376 | var GUID = 0; 1377 | // internal store of all Outlayer intances 1378 | var instances = {}; 1379 | 1380 | 1381 | /** 1382 | * @param {Element, String} element 1383 | * @param {Object} options 1384 | * @constructor 1385 | */ 1386 | function Outlayer( element, options ) { 1387 | var queryElement = utils.getQueryElement( element ); 1388 | if ( !queryElement ) { 1389 | if ( console ) { 1390 | console.error( 'Bad element for ' + this.constructor.namespace + 1391 | ': ' + ( queryElement || element ) ); 1392 | } 1393 | return; 1394 | } 1395 | this.element = queryElement; 1396 | // add jQuery 1397 | if ( jQuery ) { 1398 | this.$element = jQuery( this.element ); 1399 | } 1400 | 1401 | // options 1402 | this.options = utils.extend( {}, this.constructor.defaults ); 1403 | this.option( options ); 1404 | 1405 | // add id for Outlayer.getFromElement 1406 | var id = ++GUID; 1407 | this.element.outlayerGUID = id; // expando 1408 | instances[ id ] = this; // associate via id 1409 | 1410 | // kick it off 1411 | this._create(); 1412 | 1413 | var isInitLayout = this._getOption('initLayout'); 1414 | if ( isInitLayout ) { 1415 | this.layout(); 1416 | } 1417 | } 1418 | 1419 | // settings are for internal use only 1420 | Outlayer.namespace = 'outlayer'; 1421 | Outlayer.Item = Item; 1422 | 1423 | // default options 1424 | Outlayer.defaults = { 1425 | containerStyle: { 1426 | position: 'relative' 1427 | }, 1428 | initLayout: true, 1429 | originLeft: true, 1430 | originTop: true, 1431 | resize: true, 1432 | resizeContainer: true, 1433 | // item options 1434 | transitionDuration: '0.4s', 1435 | hiddenStyle: { 1436 | opacity: 0, 1437 | transform: 'scale(0.001)' 1438 | }, 1439 | visibleStyle: { 1440 | opacity: 1, 1441 | transform: 'scale(1)' 1442 | } 1443 | }; 1444 | 1445 | var proto = Outlayer.prototype; 1446 | // inherit EvEmitter 1447 | utils.extend( proto, EvEmitter.prototype ); 1448 | 1449 | /** 1450 | * set options 1451 | * @param {Object} opts 1452 | */ 1453 | proto.option = function( opts ) { 1454 | utils.extend( this.options, opts ); 1455 | }; 1456 | 1457 | /** 1458 | * get backwards compatible option value, check old name 1459 | */ 1460 | proto._getOption = function( option ) { 1461 | var oldOption = this.constructor.compatOptions[ option ]; 1462 | return oldOption && this.options[ oldOption ] !== undefined ? 1463 | this.options[ oldOption ] : this.options[ option ]; 1464 | }; 1465 | 1466 | Outlayer.compatOptions = { 1467 | // currentName: oldName 1468 | initLayout: 'isInitLayout', 1469 | horizontal: 'isHorizontal', 1470 | layoutInstant: 'isLayoutInstant', 1471 | originLeft: 'isOriginLeft', 1472 | originTop: 'isOriginTop', 1473 | resize: 'isResizeBound', 1474 | resizeContainer: 'isResizingContainer' 1475 | }; 1476 | 1477 | proto._create = function() { 1478 | // get items from children 1479 | this.reloadItems(); 1480 | // elements that affect layout, but are not laid out 1481 | this.stamps = []; 1482 | this.stamp( this.options.stamp ); 1483 | // set container style 1484 | utils.extend( this.element.style, this.options.containerStyle ); 1485 | 1486 | // bind resize method 1487 | var canBindResize = this._getOption('resize'); 1488 | if ( canBindResize ) { 1489 | this.bindResize(); 1490 | } 1491 | }; 1492 | 1493 | // goes through all children again and gets bricks in proper order 1494 | proto.reloadItems = function() { 1495 | // collection of item elements 1496 | this.items = this._itemize( this.element.children ); 1497 | }; 1498 | 1499 | 1500 | /** 1501 | * turn elements into Outlayer.Items to be used in layout 1502 | * @param {Array or NodeList or HTMLElement} elems 1503 | * @returns {Array} items - collection of new Outlayer Items 1504 | */ 1505 | proto._itemize = function( elems ) { 1506 | 1507 | var itemElems = this._filterFindItemElements( elems ); 1508 | var Item = this.constructor.Item; 1509 | 1510 | // create new Outlayer Items for collection 1511 | var items = []; 1512 | for ( var i=0; i < itemElems.length; i++ ) { 1513 | var elem = itemElems[i]; 1514 | var item = new Item( elem, this ); 1515 | items.push( item ); 1516 | } 1517 | 1518 | return items; 1519 | }; 1520 | 1521 | /** 1522 | * get item elements to be used in layout 1523 | * @param {Array or NodeList or HTMLElement} elems 1524 | * @returns {Array} items - item elements 1525 | */ 1526 | proto._filterFindItemElements = function( elems ) { 1527 | return utils.filterFindElements( elems, this.options.itemSelector ); 1528 | }; 1529 | 1530 | /** 1531 | * getter method for getting item elements 1532 | * @returns {Array} elems - collection of item elements 1533 | */ 1534 | proto.getItemElements = function() { 1535 | return this.items.map( function( item ) { 1536 | return item.element; 1537 | }); 1538 | }; 1539 | 1540 | // ----- init & layout ----- // 1541 | 1542 | /** 1543 | * lays out all items 1544 | */ 1545 | proto.layout = function() { 1546 | this._resetLayout(); 1547 | this._manageStamps(); 1548 | 1549 | // don't animate first layout 1550 | var layoutInstant = this._getOption('layoutInstant'); 1551 | var isInstant = layoutInstant !== undefined ? 1552 | layoutInstant : !this._isLayoutInited; 1553 | this.layoutItems( this.items, isInstant ); 1554 | 1555 | // flag for initalized 1556 | this._isLayoutInited = true; 1557 | }; 1558 | 1559 | // _init is alias for layout 1560 | proto._init = proto.layout; 1561 | 1562 | /** 1563 | * logic before any new layout 1564 | */ 1565 | proto._resetLayout = function() { 1566 | this.getSize(); 1567 | }; 1568 | 1569 | 1570 | proto.getSize = function() { 1571 | this.size = getSize( this.element ); 1572 | }; 1573 | 1574 | /** 1575 | * get measurement from option, for columnWidth, rowHeight, gutter 1576 | * if option is String -> get element from selector string, & get size of element 1577 | * if option is Element -> get size of element 1578 | * else use option as a number 1579 | * 1580 | * @param {String} measurement 1581 | * @param {String} size - width or height 1582 | * @private 1583 | */ 1584 | proto._getMeasurement = function( measurement, size ) { 1585 | var option = this.options[ measurement ]; 1586 | var elem; 1587 | if ( !option ) { 1588 | // default to 0 1589 | this[ measurement ] = 0; 1590 | } else { 1591 | // use option as an element 1592 | if ( typeof option == 'string' ) { 1593 | elem = this.element.querySelector( option ); 1594 | } else if ( option instanceof HTMLElement ) { 1595 | elem = option; 1596 | } 1597 | // use size of element, if element 1598 | this[ measurement ] = elem ? getSize( elem )[ size ] : option; 1599 | } 1600 | }; 1601 | 1602 | /** 1603 | * layout a collection of item elements 1604 | * @api public 1605 | */ 1606 | proto.layoutItems = function( items, isInstant ) { 1607 | items = this._getItemsForLayout( items ); 1608 | 1609 | this._layoutItems( items, isInstant ); 1610 | 1611 | this._postLayout(); 1612 | }; 1613 | 1614 | /** 1615 | * get the items to be laid out 1616 | * you may want to skip over some items 1617 | * @param {Array} items 1618 | * @returns {Array} items 1619 | */ 1620 | proto._getItemsForLayout = function( items ) { 1621 | return items.filter( function( item ) { 1622 | return !item.isIgnored; 1623 | }); 1624 | }; 1625 | 1626 | /** 1627 | * layout items 1628 | * @param {Array} items 1629 | * @param {Boolean} isInstant 1630 | */ 1631 | proto._layoutItems = function( items, isInstant ) { 1632 | this._emitCompleteOnItems( 'layout', items ); 1633 | 1634 | if ( !items || !items.length ) { 1635 | // no items, emit event with empty array 1636 | return; 1637 | } 1638 | 1639 | var queue = []; 1640 | 1641 | items.forEach( function( item ) { 1642 | // get x/y object from method 1643 | var position = this._getItemLayoutPosition( item ); 1644 | // enqueue 1645 | position.item = item; 1646 | position.isInstant = isInstant || item.isLayoutInstant; 1647 | queue.push( position ); 1648 | }, this ); 1649 | 1650 | this._processLayoutQueue( queue ); 1651 | }; 1652 | 1653 | /** 1654 | * get item layout position 1655 | * @param {Outlayer.Item} item 1656 | * @returns {Object} x and y position 1657 | */ 1658 | proto._getItemLayoutPosition = function( /* item */ ) { 1659 | return { 1660 | x: 0, 1661 | y: 0 1662 | }; 1663 | }; 1664 | 1665 | /** 1666 | * iterate over array and position each item 1667 | * Reason being - separating this logic prevents 'layout invalidation' 1668 | * thx @paul_irish 1669 | * @param {Array} queue 1670 | */ 1671 | proto._processLayoutQueue = function( queue ) { 1672 | this.updateStagger(); 1673 | queue.forEach( function( obj, i ) { 1674 | this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i ); 1675 | }, this ); 1676 | }; 1677 | 1678 | // set stagger from option in milliseconds number 1679 | proto.updateStagger = function() { 1680 | var stagger = this.options.stagger; 1681 | if ( stagger === null || stagger === undefined ) { 1682 | this.stagger = 0; 1683 | return; 1684 | } 1685 | this.stagger = getMilliseconds( stagger ); 1686 | return this.stagger; 1687 | }; 1688 | 1689 | /** 1690 | * Sets position of item in DOM 1691 | * @param {Outlayer.Item} item 1692 | * @param {Number} x - horizontal position 1693 | * @param {Number} y - vertical position 1694 | * @param {Boolean} isInstant - disables transitions 1695 | */ 1696 | proto._positionItem = function( item, x, y, isInstant, i ) { 1697 | if ( isInstant ) { 1698 | // if not transition, just set CSS 1699 | item.goTo( x, y ); 1700 | } else { 1701 | item.stagger( i * this.stagger ); 1702 | item.moveTo( x, y ); 1703 | } 1704 | }; 1705 | 1706 | /** 1707 | * Any logic you want to do after each layout, 1708 | * i.e. size the container 1709 | */ 1710 | proto._postLayout = function() { 1711 | this.resizeContainer(); 1712 | }; 1713 | 1714 | proto.resizeContainer = function() { 1715 | var isResizingContainer = this._getOption('resizeContainer'); 1716 | if ( !isResizingContainer ) { 1717 | return; 1718 | } 1719 | var size = this._getContainerSize(); 1720 | if ( size ) { 1721 | this._setContainerMeasure( size.width, true ); 1722 | this._setContainerMeasure( size.height, false ); 1723 | } 1724 | }; 1725 | 1726 | /** 1727 | * Sets width or height of container if returned 1728 | * @returns {Object} size 1729 | * @param {Number} width 1730 | * @param {Number} height 1731 | */ 1732 | proto._getContainerSize = noop; 1733 | 1734 | /** 1735 | * @param {Number} measure - size of width or height 1736 | * @param {Boolean} isWidth 1737 | */ 1738 | proto._setContainerMeasure = function( measure, isWidth ) { 1739 | if ( measure === undefined ) { 1740 | return; 1741 | } 1742 | 1743 | var elemSize = this.size; 1744 | // add padding and border width if border box 1745 | if ( elemSize.isBorderBox ) { 1746 | measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight + 1747 | elemSize.borderLeftWidth + elemSize.borderRightWidth : 1748 | elemSize.paddingBottom + elemSize.paddingTop + 1749 | elemSize.borderTopWidth + elemSize.borderBottomWidth; 1750 | } 1751 | 1752 | measure = Math.max( measure, 0 ); 1753 | this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px'; 1754 | }; 1755 | 1756 | /** 1757 | * emit eventComplete on a collection of items events 1758 | * @param {String} eventName 1759 | * @param {Array} items - Outlayer.Items 1760 | */ 1761 | proto._emitCompleteOnItems = function( eventName, items ) { 1762 | var _this = this; 1763 | function onComplete() { 1764 | _this.dispatchEvent( eventName + 'Complete', null, [ items ] ); 1765 | } 1766 | 1767 | var count = items.length; 1768 | if ( !items || !count ) { 1769 | onComplete(); 1770 | return; 1771 | } 1772 | 1773 | var doneCount = 0; 1774 | function tick() { 1775 | doneCount++; 1776 | if ( doneCount == count ) { 1777 | onComplete(); 1778 | } 1779 | } 1780 | 1781 | // bind callback 1782 | items.forEach( function( item ) { 1783 | item.once( eventName, tick ); 1784 | }); 1785 | }; 1786 | 1787 | /** 1788 | * emits events via EvEmitter and jQuery events 1789 | * @param {String} type - name of event 1790 | * @param {Event} event - original event 1791 | * @param {Array} args - extra arguments 1792 | */ 1793 | proto.dispatchEvent = function( type, event, args ) { 1794 | // add original event to arguments 1795 | var emitArgs = event ? [ event ].concat( args ) : args; 1796 | this.emitEvent( type, emitArgs ); 1797 | 1798 | if ( jQuery ) { 1799 | // set this.$element 1800 | this.$element = this.$element || jQuery( this.element ); 1801 | if ( event ) { 1802 | // create jQuery event 1803 | var $event = jQuery.Event( event ); 1804 | $event.type = type; 1805 | this.$element.trigger( $event, args ); 1806 | } else { 1807 | // just trigger with type if no event available 1808 | this.$element.trigger( type, args ); 1809 | } 1810 | } 1811 | }; 1812 | 1813 | // -------------------------- ignore & stamps -------------------------- // 1814 | 1815 | 1816 | /** 1817 | * keep item in collection, but do not lay it out 1818 | * ignored items do not get skipped in layout 1819 | * @param {Element} elem 1820 | */ 1821 | proto.ignore = function( elem ) { 1822 | var item = this.getItem( elem ); 1823 | if ( item ) { 1824 | item.isIgnored = true; 1825 | } 1826 | }; 1827 | 1828 | /** 1829 | * return item to layout collection 1830 | * @param {Element} elem 1831 | */ 1832 | proto.unignore = function( elem ) { 1833 | var item = this.getItem( elem ); 1834 | if ( item ) { 1835 | delete item.isIgnored; 1836 | } 1837 | }; 1838 | 1839 | /** 1840 | * adds elements to stamps 1841 | * @param {NodeList, Array, Element, or String} elems 1842 | */ 1843 | proto.stamp = function( elems ) { 1844 | elems = this._find( elems ); 1845 | if ( !elems ) { 1846 | return; 1847 | } 1848 | 1849 | this.stamps = this.stamps.concat( elems ); 1850 | // ignore 1851 | elems.forEach( this.ignore, this ); 1852 | }; 1853 | 1854 | /** 1855 | * removes elements to stamps 1856 | * @param {NodeList, Array, or Element} elems 1857 | */ 1858 | proto.unstamp = function( elems ) { 1859 | elems = this._find( elems ); 1860 | if ( !elems ){ 1861 | return; 1862 | } 1863 | 1864 | elems.forEach( function( elem ) { 1865 | // filter out removed stamp elements 1866 | utils.removeFrom( this.stamps, elem ); 1867 | this.unignore( elem ); 1868 | }, this ); 1869 | }; 1870 | 1871 | /** 1872 | * finds child elements 1873 | * @param {NodeList, Array, Element, or String} elems 1874 | * @returns {Array} elems 1875 | */ 1876 | proto._find = function( elems ) { 1877 | if ( !elems ) { 1878 | return; 1879 | } 1880 | // if string, use argument as selector string 1881 | if ( typeof elems == 'string' ) { 1882 | elems = this.element.querySelectorAll( elems ); 1883 | } 1884 | elems = utils.makeArray( elems ); 1885 | return elems; 1886 | }; 1887 | 1888 | proto._manageStamps = function() { 1889 | if ( !this.stamps || !this.stamps.length ) { 1890 | return; 1891 | } 1892 | 1893 | this._getBoundingRect(); 1894 | 1895 | this.stamps.forEach( this._manageStamp, this ); 1896 | }; 1897 | 1898 | // update boundingLeft / Top 1899 | proto._getBoundingRect = function() { 1900 | // get bounding rect for container element 1901 | var boundingRect = this.element.getBoundingClientRect(); 1902 | var size = this.size; 1903 | this._boundingRect = { 1904 | left: boundingRect.left + size.paddingLeft + size.borderLeftWidth, 1905 | top: boundingRect.top + size.paddingTop + size.borderTopWidth, 1906 | right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ), 1907 | bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth ) 1908 | }; 1909 | }; 1910 | 1911 | /** 1912 | * @param {Element} stamp 1913 | **/ 1914 | proto._manageStamp = noop; 1915 | 1916 | /** 1917 | * get x/y position of element relative to container element 1918 | * @param {Element} elem 1919 | * @returns {Object} offset - has left, top, right, bottom 1920 | */ 1921 | proto._getElementOffset = function( elem ) { 1922 | var boundingRect = elem.getBoundingClientRect(); 1923 | var thisRect = this._boundingRect; 1924 | var size = getSize( elem ); 1925 | var offset = { 1926 | left: boundingRect.left - thisRect.left - size.marginLeft, 1927 | top: boundingRect.top - thisRect.top - size.marginTop, 1928 | right: thisRect.right - boundingRect.right - size.marginRight, 1929 | bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom 1930 | }; 1931 | return offset; 1932 | }; 1933 | 1934 | // -------------------------- resize -------------------------- // 1935 | 1936 | // enable event handlers for listeners 1937 | // i.e. resize -> onresize 1938 | proto.handleEvent = utils.handleEvent; 1939 | 1940 | /** 1941 | * Bind layout to window resizing 1942 | */ 1943 | proto.bindResize = function() { 1944 | window.addEventListener( 'resize', this ); 1945 | this.isResizeBound = true; 1946 | }; 1947 | 1948 | /** 1949 | * Unbind layout to window resizing 1950 | */ 1951 | proto.unbindResize = function() { 1952 | window.removeEventListener( 'resize', this ); 1953 | this.isResizeBound = false; 1954 | }; 1955 | 1956 | proto.onresize = function() { 1957 | this.resize(); 1958 | }; 1959 | 1960 | utils.debounceMethod( Outlayer, 'onresize', 100 ); 1961 | 1962 | proto.resize = function() { 1963 | // don't trigger if size did not change 1964 | // or if resize was unbound. See #9 1965 | if ( !this.isResizeBound || !this.needsResizeLayout() ) { 1966 | return; 1967 | } 1968 | 1969 | this.layout(); 1970 | }; 1971 | 1972 | /** 1973 | * check if layout is needed post layout 1974 | * @returns Boolean 1975 | */ 1976 | proto.needsResizeLayout = function() { 1977 | var size = getSize( this.element ); 1978 | // check that this.size and size are there 1979 | // IE8 triggers resize on body size change, so they might not be 1980 | var hasSizes = this.size && size; 1981 | return hasSizes && size.innerWidth !== this.size.innerWidth; 1982 | }; 1983 | 1984 | // -------------------------- methods -------------------------- // 1985 | 1986 | /** 1987 | * add items to Outlayer instance 1988 | * @param {Array or NodeList or Element} elems 1989 | * @returns {Array} items - Outlayer.Items 1990 | **/ 1991 | proto.addItems = function( elems ) { 1992 | var items = this._itemize( elems ); 1993 | // add items to collection 1994 | if ( items.length ) { 1995 | this.items = this.items.concat( items ); 1996 | } 1997 | return items; 1998 | }; 1999 | 2000 | /** 2001 | * Layout newly-appended item elements 2002 | * @param {Array or NodeList or Element} elems 2003 | */ 2004 | proto.appended = function( elems ) { 2005 | var items = this.addItems( elems ); 2006 | if ( !items.length ) { 2007 | return; 2008 | } 2009 | // layout and reveal just the new items 2010 | this.layoutItems( items, true ); 2011 | this.reveal( items ); 2012 | }; 2013 | 2014 | /** 2015 | * Layout prepended elements 2016 | * @param {Array or NodeList or Element} elems 2017 | */ 2018 | proto.prepended = function( elems ) { 2019 | var items = this._itemize( elems ); 2020 | if ( !items.length ) { 2021 | return; 2022 | } 2023 | // add items to beginning of collection 2024 | var previousItems = this.items.slice(0); 2025 | this.items = items.concat( previousItems ); 2026 | // start new layout 2027 | this._resetLayout(); 2028 | this._manageStamps(); 2029 | // layout new stuff without transition 2030 | this.layoutItems( items, true ); 2031 | this.reveal( items ); 2032 | // layout previous items 2033 | this.layoutItems( previousItems ); 2034 | }; 2035 | 2036 | /** 2037 | * reveal a collection of items 2038 | * @param {Array of Outlayer.Items} items 2039 | */ 2040 | proto.reveal = function( items ) { 2041 | this._emitCompleteOnItems( 'reveal', items ); 2042 | if ( !items || !items.length ) { 2043 | return; 2044 | } 2045 | var stagger = this.updateStagger(); 2046 | items.forEach( function( item, i ) { 2047 | item.stagger( i * stagger ); 2048 | item.reveal(); 2049 | }); 2050 | }; 2051 | 2052 | /** 2053 | * hide a collection of items 2054 | * @param {Array of Outlayer.Items} items 2055 | */ 2056 | proto.hide = function( items ) { 2057 | this._emitCompleteOnItems( 'hide', items ); 2058 | if ( !items || !items.length ) { 2059 | return; 2060 | } 2061 | var stagger = this.updateStagger(); 2062 | items.forEach( function( item, i ) { 2063 | item.stagger( i * stagger ); 2064 | item.hide(); 2065 | }); 2066 | }; 2067 | 2068 | /** 2069 | * reveal item elements 2070 | * @param {Array}, {Element}, {NodeList} items 2071 | */ 2072 | proto.revealItemElements = function( elems ) { 2073 | var items = this.getItems( elems ); 2074 | this.reveal( items ); 2075 | }; 2076 | 2077 | /** 2078 | * hide item elements 2079 | * @param {Array}, {Element}, {NodeList} items 2080 | */ 2081 | proto.hideItemElements = function( elems ) { 2082 | var items = this.getItems( elems ); 2083 | this.hide( items ); 2084 | }; 2085 | 2086 | /** 2087 | * get Outlayer.Item, given an Element 2088 | * @param {Element} elem 2089 | * @param {Function} callback 2090 | * @returns {Outlayer.Item} item 2091 | */ 2092 | proto.getItem = function( elem ) { 2093 | // loop through items to get the one that matches 2094 | for ( var i=0; i < this.items.length; i++ ) { 2095 | var item = this.items[i]; 2096 | if ( item.element == elem ) { 2097 | // return item 2098 | return item; 2099 | } 2100 | } 2101 | }; 2102 | 2103 | /** 2104 | * get collection of Outlayer.Items, given Elements 2105 | * @param {Array} elems 2106 | * @returns {Array} items - Outlayer.Items 2107 | */ 2108 | proto.getItems = function( elems ) { 2109 | elems = utils.makeArray( elems ); 2110 | var items = []; 2111 | elems.forEach( function( elem ) { 2112 | var item = this.getItem( elem ); 2113 | if ( item ) { 2114 | items.push( item ); 2115 | } 2116 | }, this ); 2117 | 2118 | return items; 2119 | }; 2120 | 2121 | /** 2122 | * remove element(s) from instance and DOM 2123 | * @param {Array or NodeList or Element} elems 2124 | */ 2125 | proto.remove = function( elems ) { 2126 | var removeItems = this.getItems( elems ); 2127 | 2128 | this._emitCompleteOnItems( 'remove', removeItems ); 2129 | 2130 | // bail if no items to remove 2131 | if ( !removeItems || !removeItems.length ) { 2132 | return; 2133 | } 2134 | 2135 | removeItems.forEach( function( item ) { 2136 | item.remove(); 2137 | // remove item from collection 2138 | utils.removeFrom( this.items, item ); 2139 | }, this ); 2140 | }; 2141 | 2142 | // ----- destroy ----- // 2143 | 2144 | // remove and disable Outlayer instance 2145 | proto.destroy = function() { 2146 | // clean up dynamic styles 2147 | var style = this.element.style; 2148 | style.height = ''; 2149 | style.position = ''; 2150 | style.width = ''; 2151 | // destroy items 2152 | this.items.forEach( function( item ) { 2153 | item.destroy(); 2154 | }); 2155 | 2156 | this.unbindResize(); 2157 | 2158 | var id = this.element.outlayerGUID; 2159 | delete instances[ id ]; // remove reference to instance by id 2160 | delete this.element.outlayerGUID; 2161 | // remove data for jQuery 2162 | if ( jQuery ) { 2163 | jQuery.removeData( this.element, this.constructor.namespace ); 2164 | } 2165 | 2166 | }; 2167 | 2168 | // -------------------------- data -------------------------- // 2169 | 2170 | /** 2171 | * get Outlayer instance from element 2172 | * @param {Element} elem 2173 | * @returns {Outlayer} 2174 | */ 2175 | Outlayer.data = function( elem ) { 2176 | elem = utils.getQueryElement( elem ); 2177 | var id = elem && elem.outlayerGUID; 2178 | return id && instances[ id ]; 2179 | }; 2180 | 2181 | 2182 | // -------------------------- create Outlayer class -------------------------- // 2183 | 2184 | /** 2185 | * create a layout class 2186 | * @param {String} namespace 2187 | */ 2188 | Outlayer.create = function( namespace, options ) { 2189 | // sub-class Outlayer 2190 | var Layout = subclass( Outlayer ); 2191 | // apply new options and compatOptions 2192 | Layout.defaults = utils.extend( {}, Outlayer.defaults ); 2193 | utils.extend( Layout.defaults, options ); 2194 | Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions ); 2195 | 2196 | Layout.namespace = namespace; 2197 | 2198 | Layout.data = Outlayer.data; 2199 | 2200 | // sub-class Item 2201 | Layout.Item = subclass( Item ); 2202 | 2203 | // -------------------------- declarative -------------------------- // 2204 | 2205 | utils.htmlInit( Layout, namespace ); 2206 | 2207 | // -------------------------- jQuery bridge -------------------------- // 2208 | 2209 | // make into jQuery plugin 2210 | if ( jQuery && jQuery.bridget ) { 2211 | jQuery.bridget( namespace, Layout ); 2212 | } 2213 | 2214 | return Layout; 2215 | }; 2216 | 2217 | function subclass( Parent ) { 2218 | function SubClass() { 2219 | Parent.apply( this, arguments ); 2220 | } 2221 | 2222 | SubClass.prototype = Object.create( Parent.prototype ); 2223 | SubClass.prototype.constructor = SubClass; 2224 | 2225 | return SubClass; 2226 | } 2227 | 2228 | // ----- helpers ----- // 2229 | 2230 | // how many milliseconds are in each unit 2231 | var msUnits = { 2232 | ms: 1, 2233 | s: 1000 2234 | }; 2235 | 2236 | // munge time-like parameter into millisecond number 2237 | // '0.4s' -> 40 2238 | function getMilliseconds( time ) { 2239 | if ( typeof time == 'number' ) { 2240 | return time; 2241 | } 2242 | var matches = time.match( /(^\d*\.?\d*)(\w*)/ ); 2243 | var num = matches && matches[1]; 2244 | var unit = matches && matches[2]; 2245 | if ( !num.length ) { 2246 | return 0; 2247 | } 2248 | num = parseFloat( num ); 2249 | var mult = msUnits[ unit ] || 1; 2250 | return num * mult; 2251 | } 2252 | 2253 | // ----- fin ----- // 2254 | 2255 | // back in global 2256 | Outlayer.Item = Item; 2257 | 2258 | return Outlayer; 2259 | 2260 | })); 2261 | 2262 | /** 2263 | * Isotope Item 2264 | **/ 2265 | 2266 | ( function( window, factory ) { 2267 | // universal module definition 2268 | /* jshint strict: false */ /*globals define, module, require */ 2269 | if ( typeof define == 'function' && define.amd ) { 2270 | // AMD 2271 | define( 'isotope/js/item',[ 2272 | 'outlayer/outlayer' 2273 | ], 2274 | factory ); 2275 | } else if ( typeof module == 'object' && module.exports ) { 2276 | // CommonJS 2277 | module.exports = factory( 2278 | require('outlayer') 2279 | ); 2280 | } else { 2281 | // browser global 2282 | window.Isotope = window.Isotope || {}; 2283 | window.Isotope.Item = factory( 2284 | window.Outlayer 2285 | ); 2286 | } 2287 | 2288 | }( window, function factory( Outlayer ) { 2289 | 'use strict'; 2290 | 2291 | // -------------------------- Item -------------------------- // 2292 | 2293 | // sub-class Outlayer Item 2294 | function Item() { 2295 | Outlayer.Item.apply( this, arguments ); 2296 | } 2297 | 2298 | var proto = Item.prototype = Object.create( Outlayer.Item.prototype ); 2299 | 2300 | var _create = proto._create; 2301 | proto._create = function() { 2302 | // assign id, used for original-order sorting 2303 | this.id = this.layout.itemGUID++; 2304 | _create.call( this ); 2305 | this.sortData = {}; 2306 | }; 2307 | 2308 | proto.updateSortData = function() { 2309 | if ( this.isIgnored ) { 2310 | return; 2311 | } 2312 | // default sorters 2313 | this.sortData.id = this.id; 2314 | // for backward compatibility 2315 | this.sortData['original-order'] = this.id; 2316 | this.sortData.random = Math.random(); 2317 | // go thru getSortData obj and apply the sorters 2318 | var getSortData = this.layout.options.getSortData; 2319 | var sorters = this.layout._sorters; 2320 | for ( var key in getSortData ) { 2321 | var sorter = sorters[ key ]; 2322 | this.sortData[ key ] = sorter( this.element, this ); 2323 | } 2324 | }; 2325 | 2326 | var _destroy = proto.destroy; 2327 | proto.destroy = function() { 2328 | // call super 2329 | _destroy.apply( this, arguments ); 2330 | // reset display, #741 2331 | this.css({ 2332 | display: '' 2333 | }); 2334 | }; 2335 | 2336 | return Item; 2337 | 2338 | })); 2339 | 2340 | /** 2341 | * Isotope LayoutMode 2342 | */ 2343 | 2344 | ( function( window, factory ) { 2345 | // universal module definition 2346 | /* jshint strict: false */ /*globals define, module, require */ 2347 | if ( typeof define == 'function' && define.amd ) { 2348 | // AMD 2349 | define( 'isotope/js/layout-mode',[ 2350 | 'get-size/get-size', 2351 | 'outlayer/outlayer' 2352 | ], 2353 | factory ); 2354 | } else if ( typeof module == 'object' && module.exports ) { 2355 | // CommonJS 2356 | module.exports = factory( 2357 | require('get-size'), 2358 | require('outlayer') 2359 | ); 2360 | } else { 2361 | // browser global 2362 | window.Isotope = window.Isotope || {}; 2363 | window.Isotope.LayoutMode = factory( 2364 | window.getSize, 2365 | window.Outlayer 2366 | ); 2367 | } 2368 | 2369 | }( window, function factory( getSize, Outlayer ) { 2370 | 'use strict'; 2371 | 2372 | // layout mode class 2373 | function LayoutMode( isotope ) { 2374 | this.isotope = isotope; 2375 | // link properties 2376 | if ( isotope ) { 2377 | this.options = isotope.options[ this.namespace ]; 2378 | this.element = isotope.element; 2379 | this.items = isotope.filteredItems; 2380 | this.size = isotope.size; 2381 | } 2382 | } 2383 | 2384 | var proto = LayoutMode.prototype; 2385 | 2386 | /** 2387 | * some methods should just defer to default Outlayer method 2388 | * and reference the Isotope instance as `this` 2389 | **/ 2390 | var facadeMethods = [ 2391 | '_resetLayout', 2392 | '_getItemLayoutPosition', 2393 | '_manageStamp', 2394 | '_getContainerSize', 2395 | '_getElementOffset', 2396 | 'needsResizeLayout', 2397 | '_getOption' 2398 | ]; 2399 | 2400 | facadeMethods.forEach( function( methodName ) { 2401 | proto[ methodName ] = function() { 2402 | return Outlayer.prototype[ methodName ].apply( this.isotope, arguments ); 2403 | }; 2404 | }); 2405 | 2406 | // ----- ----- // 2407 | 2408 | // for horizontal layout modes, check vertical size 2409 | proto.needsVerticalResizeLayout = function() { 2410 | // don't trigger if size did not change 2411 | var size = getSize( this.isotope.element ); 2412 | // check that this.size and size are there 2413 | // IE8 triggers resize on body size change, so they might not be 2414 | var hasSizes = this.isotope.size && size; 2415 | return hasSizes && size.innerHeight != this.isotope.size.innerHeight; 2416 | }; 2417 | 2418 | // ----- measurements ----- // 2419 | 2420 | proto._getMeasurement = function() { 2421 | this.isotope._getMeasurement.apply( this, arguments ); 2422 | }; 2423 | 2424 | proto.getColumnWidth = function() { 2425 | this.getSegmentSize( 'column', 'Width' ); 2426 | }; 2427 | 2428 | proto.getRowHeight = function() { 2429 | this.getSegmentSize( 'row', 'Height' ); 2430 | }; 2431 | 2432 | /** 2433 | * get columnWidth or rowHeight 2434 | * segment: 'column' or 'row' 2435 | * size 'Width' or 'Height' 2436 | **/ 2437 | proto.getSegmentSize = function( segment, size ) { 2438 | var segmentName = segment + size; 2439 | var outerSize = 'outer' + size; 2440 | // columnWidth / outerWidth // rowHeight / outerHeight 2441 | this._getMeasurement( segmentName, outerSize ); 2442 | // got rowHeight or columnWidth, we can chill 2443 | if ( this[ segmentName ] ) { 2444 | return; 2445 | } 2446 | // fall back to item of first element 2447 | var firstItemSize = this.getFirstItemSize(); 2448 | this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] || 2449 | // or size of container 2450 | this.isotope.size[ 'inner' + size ]; 2451 | }; 2452 | 2453 | proto.getFirstItemSize = function() { 2454 | var firstItem = this.isotope.filteredItems[0]; 2455 | return firstItem && firstItem.element && getSize( firstItem.element ); 2456 | }; 2457 | 2458 | // ----- methods that should reference isotope ----- // 2459 | 2460 | proto.layout = function() { 2461 | this.isotope.layout.apply( this.isotope, arguments ); 2462 | }; 2463 | 2464 | proto.getSize = function() { 2465 | this.isotope.getSize(); 2466 | this.size = this.isotope.size; 2467 | }; 2468 | 2469 | // -------------------------- create -------------------------- // 2470 | 2471 | LayoutMode.modes = {}; 2472 | 2473 | LayoutMode.create = function( namespace, options ) { 2474 | 2475 | function Mode() { 2476 | LayoutMode.apply( this, arguments ); 2477 | } 2478 | 2479 | Mode.prototype = Object.create( proto ); 2480 | Mode.prototype.constructor = Mode; 2481 | 2482 | // default options 2483 | if ( options ) { 2484 | Mode.options = options; 2485 | } 2486 | 2487 | Mode.prototype.namespace = namespace; 2488 | // register in Isotope 2489 | LayoutMode.modes[ namespace ] = Mode; 2490 | 2491 | return Mode; 2492 | }; 2493 | 2494 | return LayoutMode; 2495 | 2496 | })); 2497 | 2498 | /*! 2499 | * Masonry v4.1.1 2500 | * Cascading grid layout library 2501 | * http://masonry.desandro.com 2502 | * MIT License 2503 | * by David DeSandro 2504 | */ 2505 | 2506 | ( function( window, factory ) { 2507 | // universal module definition 2508 | /* jshint strict: false */ /*globals define, module, require */ 2509 | if ( typeof define == 'function' && define.amd ) { 2510 | // AMD 2511 | define( 'masonry/masonry',[ 2512 | 'outlayer/outlayer', 2513 | 'get-size/get-size' 2514 | ], 2515 | factory ); 2516 | } else if ( typeof module == 'object' && module.exports ) { 2517 | // CommonJS 2518 | module.exports = factory( 2519 | require('outlayer'), 2520 | require('get-size') 2521 | ); 2522 | } else { 2523 | // browser global 2524 | window.Masonry = factory( 2525 | window.Outlayer, 2526 | window.getSize 2527 | ); 2528 | } 2529 | 2530 | }( window, function factory( Outlayer, getSize ) { 2531 | 2532 | 2533 | 2534 | // -------------------------- masonryDefinition -------------------------- // 2535 | 2536 | // create an Outlayer layout class 2537 | var Masonry = Outlayer.create('masonry'); 2538 | // isFitWidth -> fitWidth 2539 | Masonry.compatOptions.fitWidth = 'isFitWidth'; 2540 | 2541 | Masonry.prototype._resetLayout = function() { 2542 | this.getSize(); 2543 | this._getMeasurement( 'columnWidth', 'outerWidth' ); 2544 | this._getMeasurement( 'gutter', 'outerWidth' ); 2545 | this.measureColumns(); 2546 | 2547 | // reset column Y 2548 | this.colYs = []; 2549 | for ( var i=0; i < this.cols; i++ ) { 2550 | this.colYs.push( 0 ); 2551 | } 2552 | 2553 | this.maxY = 0; 2554 | }; 2555 | 2556 | Masonry.prototype.measureColumns = function() { 2557 | this.getContainerWidth(); 2558 | // if columnWidth is 0, default to outerWidth of first item 2559 | if ( !this.columnWidth ) { 2560 | var firstItem = this.items[0]; 2561 | var firstItemElem = firstItem && firstItem.element; 2562 | // columnWidth fall back to item of first element 2563 | this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth || 2564 | // if first elem has no width, default to size of container 2565 | this.containerWidth; 2566 | } 2567 | 2568 | var columnWidth = this.columnWidth += this.gutter; 2569 | 2570 | // calculate columns 2571 | var containerWidth = this.containerWidth + this.gutter; 2572 | var cols = containerWidth / columnWidth; 2573 | // fix rounding errors, typically with gutters 2574 | var excess = columnWidth - containerWidth % columnWidth; 2575 | // if overshoot is less than a pixel, round up, otherwise floor it 2576 | var mathMethod = excess && excess < 1 ? 'round' : 'floor'; 2577 | cols = Math[ mathMethod ]( cols ); 2578 | this.cols = Math.max( cols, 1 ); 2579 | }; 2580 | 2581 | Masonry.prototype.getContainerWidth = function() { 2582 | // container is parent if fit width 2583 | var isFitWidth = this._getOption('fitWidth'); 2584 | var container = isFitWidth ? this.element.parentNode : this.element; 2585 | // check that this.size and size are there 2586 | // IE8 triggers resize on body size change, so they might not be 2587 | var size = getSize( container ); 2588 | this.containerWidth = size && size.innerWidth; 2589 | }; 2590 | 2591 | Masonry.prototype._getItemLayoutPosition = function( item ) { 2592 | item.getSize(); 2593 | // how many columns does this brick span 2594 | var remainder = item.size.outerWidth % this.columnWidth; 2595 | var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; 2596 | // round if off by 1 pixel, otherwise use ceil 2597 | var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth ); 2598 | colSpan = Math.min( colSpan, this.cols ); 2599 | 2600 | var colGroup = this._getColGroup( colSpan ); 2601 | // get the minimum Y value from the columns 2602 | var minimumY = Math.min.apply( Math, colGroup ); 2603 | var shortColIndex = colGroup.indexOf( minimumY ); 2604 | 2605 | // position the brick 2606 | var position = { 2607 | x: this.columnWidth * shortColIndex, 2608 | y: minimumY 2609 | }; 2610 | 2611 | // apply setHeight to necessary columns 2612 | var setHeight = minimumY + item.size.outerHeight; 2613 | var setSpan = this.cols + 1 - colGroup.length; 2614 | for ( var i = 0; i < setSpan; i++ ) { 2615 | this.colYs[ shortColIndex + i ] = setHeight; 2616 | } 2617 | 2618 | return position; 2619 | }; 2620 | 2621 | /** 2622 | * @param {Number} colSpan - number of columns the element spans 2623 | * @returns {Array} colGroup 2624 | */ 2625 | Masonry.prototype._getColGroup = function( colSpan ) { 2626 | if ( colSpan < 2 ) { 2627 | // if brick spans only one column, use all the column Ys 2628 | return this.colYs; 2629 | } 2630 | 2631 | var colGroup = []; 2632 | // how many different places could this brick fit horizontally 2633 | var groupCount = this.cols + 1 - colSpan; 2634 | // for each group potential horizontal position 2635 | for ( var i = 0; i < groupCount; i++ ) { 2636 | // make an array of colY values for that one group 2637 | var groupColYs = this.colYs.slice( i, i + colSpan ); 2638 | // and get the max value of the array 2639 | colGroup[i] = Math.max.apply( Math, groupColYs ); 2640 | } 2641 | return colGroup; 2642 | }; 2643 | 2644 | Masonry.prototype._manageStamp = function( stamp ) { 2645 | var stampSize = getSize( stamp ); 2646 | var offset = this._getElementOffset( stamp ); 2647 | // get the columns that this stamp affects 2648 | var isOriginLeft = this._getOption('originLeft'); 2649 | var firstX = isOriginLeft ? offset.left : offset.right; 2650 | var lastX = firstX + stampSize.outerWidth; 2651 | var firstCol = Math.floor( firstX / this.columnWidth ); 2652 | firstCol = Math.max( 0, firstCol ); 2653 | var lastCol = Math.floor( lastX / this.columnWidth ); 2654 | // lastCol should not go over if multiple of columnWidth #425 2655 | lastCol -= lastX % this.columnWidth ? 0 : 1; 2656 | lastCol = Math.min( this.cols - 1, lastCol ); 2657 | // set colYs to bottom of the stamp 2658 | 2659 | var isOriginTop = this._getOption('originTop'); 2660 | var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) + 2661 | stampSize.outerHeight; 2662 | for ( var i = firstCol; i <= lastCol; i++ ) { 2663 | this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); 2664 | } 2665 | }; 2666 | 2667 | Masonry.prototype._getContainerSize = function() { 2668 | this.maxY = Math.max.apply( Math, this.colYs ); 2669 | var size = { 2670 | height: this.maxY 2671 | }; 2672 | 2673 | if ( this._getOption('fitWidth') ) { 2674 | size.width = this._getContainerFitWidth(); 2675 | } 2676 | 2677 | return size; 2678 | }; 2679 | 2680 | Masonry.prototype._getContainerFitWidth = function() { 2681 | var unusedCols = 0; 2682 | // count unused columns 2683 | var i = this.cols; 2684 | while ( --i ) { 2685 | if ( this.colYs[i] !== 0 ) { 2686 | break; 2687 | } 2688 | unusedCols++; 2689 | } 2690 | // fit container to columns that have been used 2691 | return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; 2692 | }; 2693 | 2694 | Masonry.prototype.needsResizeLayout = function() { 2695 | var previousWidth = this.containerWidth; 2696 | this.getContainerWidth(); 2697 | return previousWidth != this.containerWidth; 2698 | }; 2699 | 2700 | return Masonry; 2701 | 2702 | })); 2703 | 2704 | /*! 2705 | * Masonry layout mode 2706 | * sub-classes Masonry 2707 | * http://masonry.desandro.com 2708 | */ 2709 | 2710 | ( function( window, factory ) { 2711 | // universal module definition 2712 | /* jshint strict: false */ /*globals define, module, require */ 2713 | if ( typeof define == 'function' && define.amd ) { 2714 | // AMD 2715 | define( 'isotope/js/layout-modes/masonry',[ 2716 | '../layout-mode', 2717 | 'masonry/masonry' 2718 | ], 2719 | factory ); 2720 | } else if ( typeof module == 'object' && module.exports ) { 2721 | // CommonJS 2722 | module.exports = factory( 2723 | require('../layout-mode'), 2724 | require('masonry-layout') 2725 | ); 2726 | } else { 2727 | // browser global 2728 | factory( 2729 | window.Isotope.LayoutMode, 2730 | window.Masonry 2731 | ); 2732 | } 2733 | 2734 | }( window, function factory( LayoutMode, Masonry ) { 2735 | 'use strict'; 2736 | 2737 | // -------------------------- masonryDefinition -------------------------- // 2738 | 2739 | // create an Outlayer layout class 2740 | var MasonryMode = LayoutMode.create('masonry'); 2741 | 2742 | var proto = MasonryMode.prototype; 2743 | 2744 | var keepModeMethods = { 2745 | _getElementOffset: true, 2746 | layout: true, 2747 | _getMeasurement: true 2748 | }; 2749 | 2750 | // inherit Masonry prototype 2751 | for ( var method in Masonry.prototype ) { 2752 | // do not inherit mode methods 2753 | if ( !keepModeMethods[ method ] ) { 2754 | proto[ method ] = Masonry.prototype[ method ]; 2755 | } 2756 | } 2757 | 2758 | var measureColumns = proto.measureColumns; 2759 | proto.measureColumns = function() { 2760 | // set items, used if measuring first item 2761 | this.items = this.isotope.filteredItems; 2762 | measureColumns.call( this ); 2763 | }; 2764 | 2765 | // point to mode options for fitWidth 2766 | var _getOption = proto._getOption; 2767 | proto._getOption = function( option ) { 2768 | if ( option == 'fitWidth' ) { 2769 | return this.options.isFitWidth !== undefined ? 2770 | this.options.isFitWidth : this.options.fitWidth; 2771 | } 2772 | return _getOption.apply( this.isotope, arguments ); 2773 | }; 2774 | 2775 | return MasonryMode; 2776 | 2777 | })); 2778 | 2779 | /** 2780 | * fitRows layout mode 2781 | */ 2782 | 2783 | ( function( window, factory ) { 2784 | // universal module definition 2785 | /* jshint strict: false */ /*globals define, module, require */ 2786 | if ( typeof define == 'function' && define.amd ) { 2787 | // AMD 2788 | define( 'isotope/js/layout-modes/fit-rows',[ 2789 | '../layout-mode' 2790 | ], 2791 | factory ); 2792 | } else if ( typeof exports == 'object' ) { 2793 | // CommonJS 2794 | module.exports = factory( 2795 | require('../layout-mode') 2796 | ); 2797 | } else { 2798 | // browser global 2799 | factory( 2800 | window.Isotope.LayoutMode 2801 | ); 2802 | } 2803 | 2804 | }( window, function factory( LayoutMode ) { 2805 | 'use strict'; 2806 | 2807 | var FitRows = LayoutMode.create('fitRows'); 2808 | 2809 | var proto = FitRows.prototype; 2810 | 2811 | proto._resetLayout = function() { 2812 | this.x = 0; 2813 | this.y = 0; 2814 | this.maxY = 0; 2815 | this._getMeasurement( 'gutter', 'outerWidth' ); 2816 | }; 2817 | 2818 | proto._getItemLayoutPosition = function( item ) { 2819 | item.getSize(); 2820 | 2821 | var itemWidth = item.size.outerWidth + this.gutter; 2822 | // if this element cannot fit in the current row 2823 | var containerWidth = this.isotope.size.innerWidth + this.gutter; 2824 | if ( this.x !== 0 && itemWidth + this.x > containerWidth ) { 2825 | this.x = 0; 2826 | this.y = this.maxY; 2827 | } 2828 | 2829 | var position = { 2830 | x: this.x, 2831 | y: this.y 2832 | }; 2833 | 2834 | this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); 2835 | this.x += itemWidth; 2836 | 2837 | return position; 2838 | }; 2839 | 2840 | proto._getContainerSize = function() { 2841 | return { height: this.maxY }; 2842 | }; 2843 | 2844 | return FitRows; 2845 | 2846 | })); 2847 | 2848 | /** 2849 | * vertical layout mode 2850 | */ 2851 | 2852 | ( function( window, factory ) { 2853 | // universal module definition 2854 | /* jshint strict: false */ /*globals define, module, require */ 2855 | if ( typeof define == 'function' && define.amd ) { 2856 | // AMD 2857 | define( 'isotope/js/layout-modes/vertical',[ 2858 | '../layout-mode' 2859 | ], 2860 | factory ); 2861 | } else if ( typeof module == 'object' && module.exports ) { 2862 | // CommonJS 2863 | module.exports = factory( 2864 | require('../layout-mode') 2865 | ); 2866 | } else { 2867 | // browser global 2868 | factory( 2869 | window.Isotope.LayoutMode 2870 | ); 2871 | } 2872 | 2873 | }( window, function factory( LayoutMode ) { 2874 | 'use strict'; 2875 | 2876 | var Vertical = LayoutMode.create( 'vertical', { 2877 | horizontalAlignment: 0 2878 | }); 2879 | 2880 | var proto = Vertical.prototype; 2881 | 2882 | proto._resetLayout = function() { 2883 | this.y = 0; 2884 | }; 2885 | 2886 | proto._getItemLayoutPosition = function( item ) { 2887 | item.getSize(); 2888 | var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) * 2889 | this.options.horizontalAlignment; 2890 | var y = this.y; 2891 | this.y += item.size.outerHeight; 2892 | return { x: x, y: y }; 2893 | }; 2894 | 2895 | proto._getContainerSize = function() { 2896 | return { height: this.y }; 2897 | }; 2898 | 2899 | return Vertical; 2900 | 2901 | })); 2902 | 2903 | /*! 2904 | * Isotope v3.0.3 2905 | * 2906 | * Licensed GPLv3 for open source use 2907 | * or Isotope Commercial License for commercial use 2908 | * 2909 | * http://isotope.metafizzy.co 2910 | * Copyright 2017 Metafizzy 2911 | */ 2912 | 2913 | ( function( window, factory ) { 2914 | // universal module definition 2915 | /* jshint strict: false */ /*globals define, module, require */ 2916 | if ( typeof define == 'function' && define.amd ) { 2917 | // AMD 2918 | define( [ 2919 | 'outlayer/outlayer', 2920 | 'get-size/get-size', 2921 | 'desandro-matches-selector/matches-selector', 2922 | 'fizzy-ui-utils/utils', 2923 | 'isotope/js/item', 2924 | 'isotope/js/layout-mode', 2925 | // include default layout modes 2926 | 'isotope/js/layout-modes/masonry', 2927 | 'isotope/js/layout-modes/fit-rows', 2928 | 'isotope/js/layout-modes/vertical' 2929 | ], 2930 | function( Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ) { 2931 | return factory( window, Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ); 2932 | }); 2933 | } else if ( typeof module == 'object' && module.exports ) { 2934 | // CommonJS 2935 | module.exports = factory( 2936 | window, 2937 | require('outlayer'), 2938 | require('get-size'), 2939 | require('desandro-matches-selector'), 2940 | require('fizzy-ui-utils'), 2941 | require('isotope/js/item'), 2942 | require('isotope/js/layout-mode'), 2943 | // include default layout modes 2944 | require('isotope/js/layout-modes/masonry'), 2945 | require('isotope/js/layout-modes/fit-rows'), 2946 | require('isotope/js/layout-modes/vertical') 2947 | ); 2948 | } else { 2949 | // browser global 2950 | window.Isotope = factory( 2951 | window, 2952 | window.Outlayer, 2953 | window.getSize, 2954 | window.matchesSelector, 2955 | window.fizzyUIUtils, 2956 | window.Isotope.Item, 2957 | window.Isotope.LayoutMode 2958 | ); 2959 | } 2960 | 2961 | }( window, function factory( window, Outlayer, getSize, matchesSelector, utils, 2962 | Item, LayoutMode ) { 2963 | 2964 | 2965 | 2966 | // -------------------------- vars -------------------------- // 2967 | 2968 | var jQuery = window.jQuery; 2969 | 2970 | // -------------------------- helpers -------------------------- // 2971 | 2972 | var trim = String.prototype.trim ? 2973 | function( str ) { 2974 | return str.trim(); 2975 | } : 2976 | function( str ) { 2977 | return str.replace( /^\s+|\s+$/g, '' ); 2978 | }; 2979 | 2980 | // -------------------------- isotopeDefinition -------------------------- // 2981 | 2982 | // create an Outlayer layout class 2983 | var Isotope = Outlayer.create( 'isotope', { 2984 | layoutMode: 'masonry', 2985 | isJQueryFiltering: true, 2986 | sortAscending: true 2987 | }); 2988 | 2989 | Isotope.Item = Item; 2990 | Isotope.LayoutMode = LayoutMode; 2991 | 2992 | var proto = Isotope.prototype; 2993 | 2994 | proto._create = function() { 2995 | this.itemGUID = 0; 2996 | // functions that sort items 2997 | this._sorters = {}; 2998 | this._getSorters(); 2999 | // call super 3000 | Outlayer.prototype._create.call( this ); 3001 | 3002 | // create layout modes 3003 | this.modes = {}; 3004 | // start filteredItems with all items 3005 | this.filteredItems = this.items; 3006 | // keep of track of sortBys 3007 | this.sortHistory = [ 'original-order' ]; 3008 | // create from registered layout modes 3009 | for ( var name in LayoutMode.modes ) { 3010 | this._initLayoutMode( name ); 3011 | } 3012 | }; 3013 | 3014 | proto.reloadItems = function() { 3015 | // reset item ID counter 3016 | this.itemGUID = 0; 3017 | // call super 3018 | Outlayer.prototype.reloadItems.call( this ); 3019 | }; 3020 | 3021 | proto._itemize = function() { 3022 | var items = Outlayer.prototype._itemize.apply( this, arguments ); 3023 | // assign ID for original-order 3024 | for ( var i=0; i < items.length; i++ ) { 3025 | var item = items[i]; 3026 | item.id = this.itemGUID++; 3027 | } 3028 | this._updateItemsSortData( items ); 3029 | return items; 3030 | }; 3031 | 3032 | 3033 | // -------------------------- layout -------------------------- // 3034 | 3035 | proto._initLayoutMode = function( name ) { 3036 | var Mode = LayoutMode.modes[ name ]; 3037 | // set mode options 3038 | // HACK extend initial options, back-fill in default options 3039 | var initialOpts = this.options[ name ] || {}; 3040 | this.options[ name ] = Mode.options ? 3041 | utils.extend( Mode.options, initialOpts ) : initialOpts; 3042 | // init layout mode instance 3043 | this.modes[ name ] = new Mode( this ); 3044 | }; 3045 | 3046 | 3047 | proto.layout = function() { 3048 | // if first time doing layout, do all magic 3049 | if ( !this._isLayoutInited && this._getOption('initLayout') ) { 3050 | this.arrange(); 3051 | return; 3052 | } 3053 | this._layout(); 3054 | }; 3055 | 3056 | // private method to be used in layout() & magic() 3057 | proto._layout = function() { 3058 | // don't animate first layout 3059 | var isInstant = this._getIsInstant(); 3060 | // layout flow 3061 | this._resetLayout(); 3062 | this._manageStamps(); 3063 | this.layoutItems( this.filteredItems, isInstant ); 3064 | 3065 | // flag for initalized 3066 | this._isLayoutInited = true; 3067 | }; 3068 | 3069 | // filter + sort + layout 3070 | proto.arrange = function( opts ) { 3071 | // set any options pass 3072 | this.option( opts ); 3073 | this._getIsInstant(); 3074 | // filter, sort, and layout 3075 | 3076 | // filter 3077 | var filtered = this._filter( this.items ); 3078 | this.filteredItems = filtered.matches; 3079 | 3080 | this._bindArrangeComplete(); 3081 | 3082 | if ( this._isInstant ) { 3083 | this._noTransition( this._hideReveal, [ filtered ] ); 3084 | } else { 3085 | this._hideReveal( filtered ); 3086 | } 3087 | 3088 | this._sort(); 3089 | this._layout(); 3090 | }; 3091 | // alias to _init for main plugin method 3092 | proto._init = proto.arrange; 3093 | 3094 | proto._hideReveal = function( filtered ) { 3095 | this.reveal( filtered.needReveal ); 3096 | this.hide( filtered.needHide ); 3097 | }; 3098 | 3099 | // HACK 3100 | // Don't animate/transition first layout 3101 | // Or don't animate/transition other layouts 3102 | proto._getIsInstant = function() { 3103 | var isLayoutInstant = this._getOption('layoutInstant'); 3104 | var isInstant = isLayoutInstant !== undefined ? isLayoutInstant : 3105 | !this._isLayoutInited; 3106 | this._isInstant = isInstant; 3107 | return isInstant; 3108 | }; 3109 | 3110 | // listen for layoutComplete, hideComplete and revealComplete 3111 | // to trigger arrangeComplete 3112 | proto._bindArrangeComplete = function() { 3113 | // listen for 3 events to trigger arrangeComplete 3114 | var isLayoutComplete, isHideComplete, isRevealComplete; 3115 | var _this = this; 3116 | function arrangeParallelCallback() { 3117 | if ( isLayoutComplete && isHideComplete && isRevealComplete ) { 3118 | _this.dispatchEvent( 'arrangeComplete', null, [ _this.filteredItems ] ); 3119 | } 3120 | } 3121 | this.once( 'layoutComplete', function() { 3122 | isLayoutComplete = true; 3123 | arrangeParallelCallback(); 3124 | }); 3125 | this.once( 'hideComplete', function() { 3126 | isHideComplete = true; 3127 | arrangeParallelCallback(); 3128 | }); 3129 | this.once( 'revealComplete', function() { 3130 | isRevealComplete = true; 3131 | arrangeParallelCallback(); 3132 | }); 3133 | }; 3134 | 3135 | // -------------------------- filter -------------------------- // 3136 | 3137 | proto._filter = function( items ) { 3138 | var filter = this.options.filter; 3139 | filter = filter || '*'; 3140 | var matches = []; 3141 | var hiddenMatched = []; 3142 | var visibleUnmatched = []; 3143 | 3144 | var test = this._getFilterTest( filter ); 3145 | 3146 | // test each item 3147 | for ( var i=0; i < items.length; i++ ) { 3148 | var item = items[i]; 3149 | if ( item.isIgnored ) { 3150 | continue; 3151 | } 3152 | // add item to either matched or unmatched group 3153 | var isMatched = test( item ); 3154 | // item.isFilterMatched = isMatched; 3155 | // add to matches if its a match 3156 | if ( isMatched ) { 3157 | matches.push( item ); 3158 | } 3159 | // add to additional group if item needs to be hidden or revealed 3160 | if ( isMatched && item.isHidden ) { 3161 | hiddenMatched.push( item ); 3162 | } else if ( !isMatched && !item.isHidden ) { 3163 | visibleUnmatched.push( item ); 3164 | } 3165 | } 3166 | 3167 | // return collections of items to be manipulated 3168 | return { 3169 | matches: matches, 3170 | needReveal: hiddenMatched, 3171 | needHide: visibleUnmatched 3172 | }; 3173 | }; 3174 | 3175 | // get a jQuery, function, or a matchesSelector test given the filter 3176 | proto._getFilterTest = function( filter ) { 3177 | if ( jQuery && this.options.isJQueryFiltering ) { 3178 | // use jQuery 3179 | return function( item ) { 3180 | return jQuery( item.element ).is( filter ); 3181 | }; 3182 | } 3183 | if ( typeof filter == 'function' ) { 3184 | // use filter as function 3185 | return function( item ) { 3186 | return filter( item.element ); 3187 | }; 3188 | } 3189 | // default, use filter as selector string 3190 | return function( item ) { 3191 | return matchesSelector( item.element, filter ); 3192 | }; 3193 | }; 3194 | 3195 | // -------------------------- sorting -------------------------- // 3196 | 3197 | /** 3198 | * @params {Array} elems 3199 | * @public 3200 | */ 3201 | proto.updateSortData = function( elems ) { 3202 | // get items 3203 | var items; 3204 | if ( elems ) { 3205 | elems = utils.makeArray( elems ); 3206 | items = this.getItems( elems ); 3207 | } else { 3208 | // update all items if no elems provided 3209 | items = this.items; 3210 | } 3211 | 3212 | this._getSorters(); 3213 | this._updateItemsSortData( items ); 3214 | }; 3215 | 3216 | proto._getSorters = function() { 3217 | var getSortData = this.options.getSortData; 3218 | for ( var key in getSortData ) { 3219 | var sorter = getSortData[ key ]; 3220 | this._sorters[ key ] = mungeSorter( sorter ); 3221 | } 3222 | }; 3223 | 3224 | /** 3225 | * @params {Array} items - of Isotope.Items 3226 | * @private 3227 | */ 3228 | proto._updateItemsSortData = function( items ) { 3229 | // do not update if no items 3230 | var len = items && items.length; 3231 | 3232 | for ( var i=0; len && i < len; i++ ) { 3233 | var item = items[i]; 3234 | item.updateSortData(); 3235 | } 3236 | }; 3237 | 3238 | // ----- munge sorter ----- // 3239 | 3240 | // encapsulate this, as we just need mungeSorter 3241 | // other functions in here are just for munging 3242 | var mungeSorter = ( function() { 3243 | // add a magic layer to sorters for convienent shorthands 3244 | // `.foo-bar` will use the text of .foo-bar querySelector 3245 | // `[foo-bar]` will use attribute 3246 | // you can also add parser 3247 | // `.foo-bar parseInt` will parse that as a number 3248 | function mungeSorter( sorter ) { 3249 | // if not a string, return function or whatever it is 3250 | if ( typeof sorter != 'string' ) { 3251 | return sorter; 3252 | } 3253 | // parse the sorter string 3254 | var args = trim( sorter ).split(' '); 3255 | var query = args[0]; 3256 | // check if query looks like [an-attribute] 3257 | var attrMatch = query.match( /^\[(.+)\]$/ ); 3258 | var attr = attrMatch && attrMatch[1]; 3259 | var getValue = getValueGetter( attr, query ); 3260 | // use second argument as a parser 3261 | var parser = Isotope.sortDataParsers[ args[1] ]; 3262 | // parse the value, if there was a parser 3263 | sorter = parser ? function( elem ) { 3264 | return elem && parser( getValue( elem ) ); 3265 | } : 3266 | // otherwise just return value 3267 | function( elem ) { 3268 | return elem && getValue( elem ); 3269 | }; 3270 | 3271 | return sorter; 3272 | } 3273 | 3274 | // get an attribute getter, or get text of the querySelector 3275 | function getValueGetter( attr, query ) { 3276 | // if query looks like [foo-bar], get attribute 3277 | if ( attr ) { 3278 | return function getAttribute( elem ) { 3279 | return elem.getAttribute( attr ); 3280 | }; 3281 | } 3282 | 3283 | // otherwise, assume its a querySelector, and get its text 3284 | return function getChildText( elem ) { 3285 | var child = elem.querySelector( query ); 3286 | return child && child.textContent; 3287 | }; 3288 | } 3289 | 3290 | return mungeSorter; 3291 | })(); 3292 | 3293 | // parsers used in getSortData shortcut strings 3294 | Isotope.sortDataParsers = { 3295 | 'parseInt': function( val ) { 3296 | return parseInt( val, 10 ); 3297 | }, 3298 | 'parseFloat': function( val ) { 3299 | return parseFloat( val ); 3300 | } 3301 | }; 3302 | 3303 | // ----- sort method ----- // 3304 | 3305 | // sort filteredItem order 3306 | proto._sort = function() { 3307 | if ( !this.options.sortBy ) { 3308 | return; 3309 | } 3310 | // keep track of sortBy History 3311 | var sortBys = utils.makeArray( this.options.sortBy ); 3312 | if ( !this._getIsSameSortBy( sortBys ) ) { 3313 | // concat all sortBy and sortHistory, add to front, oldest goes in last 3314 | this.sortHistory = sortBys.concat( this.sortHistory ); 3315 | } 3316 | // sort magic 3317 | var itemSorter = getItemSorter( this.sortHistory, this.options.sortAscending ); 3318 | this.filteredItems.sort( itemSorter ); 3319 | }; 3320 | 3321 | // check if sortBys is same as start of sortHistory 3322 | proto._getIsSameSortBy = function( sortBys ) { 3323 | for ( var i=0; i < sortBys.length; i++ ) { 3324 | if ( sortBys[i] != this.sortHistory[i] ) { 3325 | return false; 3326 | } 3327 | } 3328 | return true; 3329 | }; 3330 | 3331 | // returns a function used for sorting 3332 | function getItemSorter( sortBys, sortAsc ) { 3333 | return function sorter( itemA, itemB ) { 3334 | // cycle through all sortKeys 3335 | for ( var i = 0; i < sortBys.length; i++ ) { 3336 | var sortBy = sortBys[i]; 3337 | var a = itemA.sortData[ sortBy ]; 3338 | var b = itemB.sortData[ sortBy ]; 3339 | if ( a > b || a < b ) { 3340 | // if sortAsc is an object, use the value given the sortBy key 3341 | var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc; 3342 | var direction = isAscending ? 1 : -1; 3343 | return ( a > b ? 1 : -1 ) * direction; 3344 | } 3345 | } 3346 | return 0; 3347 | }; 3348 | } 3349 | 3350 | // -------------------------- methods -------------------------- // 3351 | 3352 | // get layout mode 3353 | proto._mode = function() { 3354 | var layoutMode = this.options.layoutMode; 3355 | var mode = this.modes[ layoutMode ]; 3356 | if ( !mode ) { 3357 | // TODO console.error 3358 | throw new Error( 'No layout mode: ' + layoutMode ); 3359 | } 3360 | // HACK sync mode's options 3361 | // any options set after init for layout mode need to be synced 3362 | mode.options = this.options[ layoutMode ]; 3363 | return mode; 3364 | }; 3365 | 3366 | proto._resetLayout = function() { 3367 | // trigger original reset layout 3368 | Outlayer.prototype._resetLayout.call( this ); 3369 | this._mode()._resetLayout(); 3370 | }; 3371 | 3372 | proto._getItemLayoutPosition = function( item ) { 3373 | return this._mode()._getItemLayoutPosition( item ); 3374 | }; 3375 | 3376 | proto._manageStamp = function( stamp ) { 3377 | this._mode()._manageStamp( stamp ); 3378 | }; 3379 | 3380 | proto._getContainerSize = function() { 3381 | return this._mode()._getContainerSize(); 3382 | }; 3383 | 3384 | proto.needsResizeLayout = function() { 3385 | return this._mode().needsResizeLayout(); 3386 | }; 3387 | 3388 | // -------------------------- adding & removing -------------------------- // 3389 | 3390 | // HEADS UP overwrites default Outlayer appended 3391 | proto.appended = function( elems ) { 3392 | var items = this.addItems( elems ); 3393 | if ( !items.length ) { 3394 | return; 3395 | } 3396 | // filter, layout, reveal new items 3397 | var filteredItems = this._filterRevealAdded( items ); 3398 | // add to filteredItems 3399 | this.filteredItems = this.filteredItems.concat( filteredItems ); 3400 | }; 3401 | 3402 | // HEADS UP overwrites default Outlayer prepended 3403 | proto.prepended = function( elems ) { 3404 | var items = this._itemize( elems ); 3405 | if ( !items.length ) { 3406 | return; 3407 | } 3408 | // start new layout 3409 | this._resetLayout(); 3410 | this._manageStamps(); 3411 | // filter, layout, reveal new items 3412 | var filteredItems = this._filterRevealAdded( items ); 3413 | // layout previous items 3414 | this.layoutItems( this.filteredItems ); 3415 | // add to items and filteredItems 3416 | this.filteredItems = filteredItems.concat( this.filteredItems ); 3417 | this.items = items.concat( this.items ); 3418 | }; 3419 | 3420 | proto._filterRevealAdded = function( items ) { 3421 | var filtered = this._filter( items ); 3422 | this.hide( filtered.needHide ); 3423 | // reveal all new items 3424 | this.reveal( filtered.matches ); 3425 | // layout new items, no transition 3426 | this.layoutItems( filtered.matches, true ); 3427 | return filtered.matches; 3428 | }; 3429 | 3430 | /** 3431 | * Filter, sort, and layout newly-appended item elements 3432 | * @param {Array or NodeList or Element} elems 3433 | */ 3434 | proto.insert = function( elems ) { 3435 | var items = this.addItems( elems ); 3436 | if ( !items.length ) { 3437 | return; 3438 | } 3439 | // append item elements 3440 | var i, item; 3441 | var len = items.length; 3442 | for ( i=0; i < len; i++ ) { 3443 | item = items[i]; 3444 | this.element.appendChild( item.element ); 3445 | } 3446 | // filter new stuff 3447 | var filteredInsertItems = this._filter( items ).matches; 3448 | // set flag 3449 | for ( i=0; i < len; i++ ) { 3450 | items[i].isLayoutInstant = true; 3451 | } 3452 | this.arrange(); 3453 | // reset flag 3454 | for ( i=0; i < len; i++ ) { 3455 | delete items[i].isLayoutInstant; 3456 | } 3457 | this.reveal( filteredInsertItems ); 3458 | }; 3459 | 3460 | var _remove = proto.remove; 3461 | proto.remove = function( elems ) { 3462 | elems = utils.makeArray( elems ); 3463 | var removeItems = this.getItems( elems ); 3464 | // do regular thing 3465 | _remove.call( this, elems ); 3466 | // bail if no items to remove 3467 | var len = removeItems && removeItems.length; 3468 | // remove elems from filteredItems 3469 | for ( var i=0; len && i < len; i++ ) { 3470 | var item = removeItems[i]; 3471 | // remove item from collection 3472 | utils.removeFrom( this.filteredItems, item ); 3473 | } 3474 | }; 3475 | 3476 | proto.shuffle = function() { 3477 | // update random sortData 3478 | for ( var i=0; i < this.items.length; i++ ) { 3479 | var item = this.items[i]; 3480 | item.sortData.random = Math.random(); 3481 | } 3482 | this.options.sortBy = 'random'; 3483 | this._sort(); 3484 | this._layout(); 3485 | }; 3486 | 3487 | /** 3488 | * trigger fn without transition 3489 | * kind of hacky to have this in the first place 3490 | * @param {Function} fn 3491 | * @param {Array} args 3492 | * @returns ret 3493 | * @private 3494 | */ 3495 | proto._noTransition = function( fn, args ) { 3496 | // save transitionDuration before disabling 3497 | var transitionDuration = this.options.transitionDuration; 3498 | // disable transition 3499 | this.options.transitionDuration = 0; 3500 | // do it 3501 | var returnValue = fn.apply( this, args ); 3502 | // re-enable transition for reveal 3503 | this.options.transitionDuration = transitionDuration; 3504 | return returnValue; 3505 | }; 3506 | 3507 | // ----- helper methods ----- // 3508 | 3509 | /** 3510 | * getter method for getting filtered item elements 3511 | * @returns {Array} elems - collection of item elements 3512 | */ 3513 | proto.getFilteredItemElements = function() { 3514 | return this.filteredItems.map( function( item ) { 3515 | return item.element; 3516 | }); 3517 | }; 3518 | 3519 | // ----- ----- // 3520 | 3521 | return Isotope; 3522 | 3523 | })); 3524 | 3525 | --------------------------------------------------------------------------------