fixed masonry bug
This commit is contained in:
Bachir Soussi Chiadmi
@@ -16,7 +16,8 @@
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"foundation": "~5.5.3"
|
||||
"foundation": "~5.5.3",
|
||||
"imagesloaded": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"masonry": "~3.3.2"
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "ev-emitter",
|
||||
"main": "ev-emitter.js",
|
||||
"homepage": "https://github.com/metafizzy/ev-emitter",
|
||||
"authors": [
|
||||
"David DeSandro <desandrocodes@gmail.com>"
|
||||
],
|
||||
"description": "lil' event emitter",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"event",
|
||||
"emitter",
|
||||
"pubsub"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"sandbox"
|
||||
],
|
||||
"version": "1.0.2",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "0f5ad20bda45710afe9744ed779395e25a530a87"
|
||||
},
|
||||
"_source": "git://github.com/metafizzy/ev-emitter.git",
|
||||
"_target": "~1.0.0",
|
||||
"_originalSource": "ev-emitter"
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
# EvEmitter
|
||||
|
||||
_Lil' event emitter_ — add a little pub/sub
|
||||
|
||||
EvEmitter adds publish/subscribe pattern to a browser class. It's a smaller version of [Olical/EventEmitter](https://github.com/Olical/EventEmitter). That EventEmitter is full featured, widely used, and great. This EvEmitter has just the base event functionality to power the event API in libraries like [Isotope](http://isotope.metafizzy.co), [Flickity](http://flickity.metafizzy.co), [Masonry](http://masonry.desandro.com), and [imagesLoaded](http://imagesloaded.desandro.com).
|
||||
|
||||
## API
|
||||
|
||||
``` js
|
||||
// Inherit prototype, IE8+
|
||||
MyClass.prototype = new EvEmitter();
|
||||
|
||||
// Inherit prototype, IE9+
|
||||
MyClass.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
// Mixin prototype
|
||||
_.extend( MyClass.prototype, EvEmitter.prototype );
|
||||
|
||||
// single instance
|
||||
var emitter = new EventEmitter();
|
||||
```
|
||||
|
||||
### on
|
||||
|
||||
Add an event listener.
|
||||
|
||||
``` js
|
||||
emitter.on( eventName, listener )
|
||||
```
|
||||
|
||||
+ `eventName` - _String_ - name of the event
|
||||
+ `listener` - _Function_
|
||||
|
||||
### off
|
||||
|
||||
Remove an event listener.
|
||||
|
||||
``` js
|
||||
emitter.off( eventName, listener )
|
||||
```
|
||||
|
||||
### once
|
||||
|
||||
Add an event listener to be triggered only once.
|
||||
|
||||
``` js
|
||||
emitter.once( eventName, listener )
|
||||
```
|
||||
|
||||
### emitEvent
|
||||
|
||||
Trigger an event.
|
||||
|
||||
``` js
|
||||
emitter.emitEvent( eventName, args )
|
||||
```
|
||||
|
||||
+ `eventName` - _String_ - name of the event
|
||||
+ `args` - _Array_ - arguments passed to listeners
|
||||
|
||||
## Code example
|
||||
|
||||
``` js
|
||||
// create event emitter
|
||||
var emitter = new EventEmitter();
|
||||
|
||||
// listeners
|
||||
function hey( a, b, c ) {
|
||||
console.log( 'Hey', a, b, c )
|
||||
}
|
||||
|
||||
function ho( a, b, c ) {
|
||||
console.log( 'Ho', a, b, c )
|
||||
}
|
||||
|
||||
function letsGo( a, b, c ) {
|
||||
console.log( 'Lets go', a, b, c )
|
||||
}
|
||||
|
||||
// bind listeners
|
||||
emitter.on( 'rock', hey )
|
||||
emitter.once( 'rock', ho )
|
||||
// trigger letsGo once
|
||||
emitter.on( 'rock', letsGo )
|
||||
|
||||
// emit event
|
||||
emitter.emitEvent( 'rock', [ 1, 2, 3 ] )
|
||||
// => 'Hey', 1, 2, 3
|
||||
// => 'Ho', 1, 2, 3
|
||||
// => 'Lets go', 1, 2, 3
|
||||
|
||||
// unbind
|
||||
emitter.off( 'rock', ho )
|
||||
|
||||
emitter.emitEvent( 'rock', [ 4, 5, 6 ] )
|
||||
// => 'Hey' 4, 5, 6
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
EvEmitter is released under the [MIT License](http://desandro.mit-license.org/). Have at it.
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "ev-emitter",
|
||||
"main": "ev-emitter.js",
|
||||
"homepage": "https://github.com/metafizzy/ev-emitter",
|
||||
"authors": [
|
||||
"David DeSandro <desandrocodes@gmail.com>"
|
||||
],
|
||||
"description": "lil' event emitter",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"event",
|
||||
"emitter",
|
||||
"pubsub"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"sandbox"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* EvEmitter v1.0.2
|
||||
* Lil' event emitter
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
/* jshint unused: true, undef: true, strict: true */
|
||||
|
||||
( function( global, factory ) {
|
||||
// universal module definition
|
||||
/* jshint strict: false */ /* globals define, module */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD - RequireJS
|
||||
define( factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS - Browserify, Webpack
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Browser globals
|
||||
global.EvEmitter = factory();
|
||||
}
|
||||
|
||||
}( this, function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
function EvEmitter() {}
|
||||
|
||||
var proto = EvEmitter.prototype;
|
||||
|
||||
proto.on = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// set events hash
|
||||
var events = this._events = this._events || {};
|
||||
// set listeners array
|
||||
var listeners = events[ eventName ] = events[ eventName ] || [];
|
||||
// only add once
|
||||
if ( listeners.indexOf( listener ) == -1 ) {
|
||||
listeners.push( listener );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.once = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// add event
|
||||
this.on( eventName, listener );
|
||||
// set once flag
|
||||
// set onceEvents hash
|
||||
var onceEvents = this._onceEvents = this._onceEvents || {};
|
||||
// set onceListeners object
|
||||
var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
|
||||
// set flag
|
||||
onceListeners[ listener ] = true;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.off = function( eventName, listener ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var index = listeners.indexOf( listener );
|
||||
if ( index != -1 ) {
|
||||
listeners.splice( index, 1 );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.emitEvent = function( eventName, args ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var i = 0;
|
||||
var listener = listeners[i];
|
||||
args = args || [];
|
||||
// once stuff
|
||||
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
|
||||
|
||||
while ( listener ) {
|
||||
var isOnce = onceListeners && onceListeners[ listener ];
|
||||
if ( isOnce ) {
|
||||
// remove listener
|
||||
// remove before trigger to prevent recursion
|
||||
this.off( eventName, listener );
|
||||
// unset once flag
|
||||
delete onceListeners[ listener ];
|
||||
}
|
||||
// trigger listener
|
||||
listener.apply( this, args );
|
||||
// get next listener
|
||||
i += isOnce ? 0 : 1;
|
||||
listener = listeners[i];
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
return EvEmitter;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "ev-emitter",
|
||||
"version": "1.0.2",
|
||||
"description": "lil' event emitter",
|
||||
"main": "ev-emitter.js",
|
||||
"scripts": {
|
||||
"test": "mocha test/test"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/metafizzy/ev-emitter.git"
|
||||
},
|
||||
"keywords": [
|
||||
"event",
|
||||
"emitter",
|
||||
"pubsub"
|
||||
],
|
||||
"author": "David DeSandro",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/metafizzy/ev-emitter/issues"
|
||||
},
|
||||
"homepage": "https://github.com/metafizzy/ev-emitter#readme",
|
||||
"directories": {
|
||||
"test": "test"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "imagesloaded",
|
||||
"description": "JavaScript is all like _You images done yet or what?_",
|
||||
"main": "imagesloaded.js",
|
||||
"dependencies": {
|
||||
"ev-emitter": "~1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery": ">=1.9 <4.0",
|
||||
"qunit": "~1.20.0"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"test",
|
||||
"package.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"contributing.md"
|
||||
],
|
||||
"homepage": "http://imagesloaded.desandro.com",
|
||||
"authors": [
|
||||
"David DeSandro"
|
||||
],
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"images"
|
||||
],
|
||||
"license": "MIT",
|
||||
"version": "4.1.0",
|
||||
"_release": "4.1.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v4.1.0",
|
||||
"commit": "0938c71e226f81d33c2205e39694f4b988596f7f"
|
||||
},
|
||||
"_source": "git://github.com/desandro/imagesloaded.git",
|
||||
"_target": "^4.1.0",
|
||||
"_originalSource": "imagesloaded",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
# imagesLoaded
|
||||
|
||||
<p class="tagline">JavaScript is all like "You images done yet or what?"</p>
|
||||
|
||||
[imagesloaded.desandro.com](http://imagesloaded.desandro.com)
|
||||
|
||||
Detect when images have been loaded.
|
||||
|
||||
## Install
|
||||
|
||||
### Download
|
||||
|
||||
+ [imagesloaded.pkgd.min.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js) minified
|
||||
+ [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js) un-minified
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
|
||||
<!-- or -->
|
||||
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
|
||||
```
|
||||
|
||||
### Package managers
|
||||
|
||||
Install via [npm](https://www.npmjs.com/package/imagesloaded): `npm install imagesloaded`
|
||||
|
||||
Install via [Bower](http://bower.io): `bower install imagesloaded --save`
|
||||
|
||||
## jQuery
|
||||
|
||||
You can use imagesLoaded as a jQuery Plugin.
|
||||
|
||||
``` js
|
||||
$('#container').imagesLoaded( function() {
|
||||
// images have loaded
|
||||
});
|
||||
|
||||
// options
|
||||
$('#container').imagesLoaded( {
|
||||
// options...
|
||||
},
|
||||
function() {
|
||||
// images have loaded
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
`.imagesLoaded()` returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`.
|
||||
|
||||
``` js
|
||||
$('#container').imagesLoaded()
|
||||
.always( function( instance ) {
|
||||
console.log('all images loaded');
|
||||
})
|
||||
.done( function( instance ) {
|
||||
console.log('all images successfully loaded');
|
||||
})
|
||||
.fail( function() {
|
||||
console.log('all images loaded, at least one is broken');
|
||||
})
|
||||
.progress( function( instance, image ) {
|
||||
var result = image.isLoaded ? 'loaded' : 'broken';
|
||||
console.log( 'image is ' + result + ' for ' + image.img.src );
|
||||
});
|
||||
```
|
||||
|
||||
## Vanilla JavaScript
|
||||
|
||||
You can use imagesLoaded with vanilla JS.
|
||||
|
||||
``` js
|
||||
imagesLoaded( elem, callback )
|
||||
// options
|
||||
imagesLoaded( elem, options, callback )
|
||||
// you can use `new` if you like
|
||||
new imagesLoaded( elem, callback )
|
||||
```
|
||||
|
||||
+ `elem` _Element, NodeList, Array, or Selector String_
|
||||
+ `options` _Object_
|
||||
+ `callback` _Function_ - function triggered after all images have been loaded
|
||||
|
||||
Using a callback function is the same as binding it to the `always` event (see below).
|
||||
|
||||
``` js
|
||||
// element
|
||||
imagesLoaded( document.querySelector('#container'), function( instance ) {
|
||||
console.log('all images are loaded');
|
||||
});
|
||||
// selector string
|
||||
imagesLoaded( '#container', function() {...});
|
||||
// multiple elements
|
||||
var posts = document.querySelectorAll('.post');
|
||||
imagesLoaded( posts, function() {...});
|
||||
```
|
||||
|
||||
Bind events with vanilla JS with .on(), .off(), and .once() methods.
|
||||
|
||||
``` js
|
||||
var imgLoad = imagesLoaded( elem );
|
||||
function onAlways( instance ) {
|
||||
console.log('all images are loaded');
|
||||
}
|
||||
// bind with .on()
|
||||
imgLoad.on( 'always', onAlways );
|
||||
// unbind with .off()
|
||||
imgLoad.off( 'always', onAlways );
|
||||
```
|
||||
|
||||
## Background
|
||||
|
||||
Detect when background images have loaded, in addition to `<img>`s.
|
||||
|
||||
Set `{ background: true }` to detect when the element's background image has loaded.
|
||||
|
||||
``` js
|
||||
// jQuery
|
||||
$('#container').imagesLoaded( { background: true }, function() {
|
||||
console.log('#container background image loaded');
|
||||
});
|
||||
|
||||
// vanilla JS
|
||||
imagesLoaded( '#container', { background: true }, function() {
|
||||
console.log('#container background image loaded');
|
||||
});
|
||||
```
|
||||
|
||||
[See jQuery demo](http://codepen.io/desandro/pen/pjVMPB) or [vanilla JS demo](http://codepen.io/desandro/pen/avKooW) on CodePen.
|
||||
|
||||
Set to a selector string like `{ background: '.item' }` to detect when the background images of child elements have loaded.
|
||||
|
||||
``` js
|
||||
// jQuery
|
||||
$('#container').imagesLoaded( { background: '.item' }, function() {
|
||||
console.log('all .item background images loaded');
|
||||
});
|
||||
|
||||
// vanilla JS
|
||||
imagesLoaded( '#container', { background: '.item' }, function() {
|
||||
console.log('all .item background images loaded');
|
||||
});
|
||||
```
|
||||
|
||||
[See jQuery demo](http://codepen.io/desandro/pen/avKoZL) or [vanilla JS demo](http://codepen.io/desandro/pen/vNrBGz) on CodePen.
|
||||
|
||||
## Events
|
||||
|
||||
### always
|
||||
|
||||
``` js
|
||||
// jQuery
|
||||
$('#container').imagesLoaded().always( function( instance ) {
|
||||
console.log('ALWAYS - all images have been loaded');
|
||||
});
|
||||
|
||||
// vanilla JS
|
||||
imgLoad.on( 'always', function( instance ) {
|
||||
console.log('ALWAYS - all images have been loaded');
|
||||
});
|
||||
```
|
||||
|
||||
Triggered after all images have been either loaded or confirmed broken.
|
||||
|
||||
+ `instance` _imagesLoaded_ - the imagesLoaded instance
|
||||
|
||||
### done
|
||||
|
||||
``` js
|
||||
// jQuery
|
||||
$('#container').imagesLoaded().done( function( instance ) {
|
||||
console.log('DONE - all images have been successfully loaded');
|
||||
});
|
||||
|
||||
// vanilla JS
|
||||
imgLoad.on( 'done', function( instance ) {
|
||||
console.log('DONE - all images have been successfully loaded');
|
||||
});
|
||||
```
|
||||
|
||||
Triggered after all images have successfully loaded without any broken images.
|
||||
|
||||
### fail
|
||||
|
||||
``` js
|
||||
$('#container').imagesLoaded().fail( function( instance ) {
|
||||
console.log('FAIL - all images loaded, at least one is broken');
|
||||
});
|
||||
|
||||
// vanilla JS
|
||||
imgLoad.on( 'fail', function( instance ) {
|
||||
console.log('FAIL - all images loaded, at least one is broken');
|
||||
});
|
||||
```
|
||||
|
||||
Triggered after all images have been loaded with at least one broken image.
|
||||
|
||||
### progress
|
||||
|
||||
``` js
|
||||
imgLoad.on( 'progress', function( instance, image ) {
|
||||
var result = image.isLoaded ? 'loaded' : 'broken';
|
||||
console.log( 'image is ' + result + ' for ' + image.img.src );
|
||||
});
|
||||
```
|
||||
|
||||
Triggered after each image has been loaded.
|
||||
|
||||
+ `instance` _imagesLoaded_ - the imagesLoaded instance
|
||||
+ `image` _LoadingImage_ - the LoadingImage instance of the loaded image
|
||||
|
||||
<!-- sponsored -->
|
||||
|
||||
## Properties
|
||||
|
||||
### LoadingImage.img
|
||||
|
||||
_Image_ - The `img` element
|
||||
|
||||
### LoadingImage.isLoaded
|
||||
|
||||
_Boolean_ - `true` when the image has succesfully loaded
|
||||
|
||||
### imagesLoaded.images
|
||||
|
||||
Array of _LoadingImage_ instances for each image detected
|
||||
|
||||
``` js
|
||||
var imgLoad = imagesLoaded('#container');
|
||||
imgLoad.on( 'always', function() {
|
||||
console.log( imgLoad.images.length + ' images loaded' );
|
||||
// detect which image is broken
|
||||
for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
|
||||
var image = imgLoad.images[i];
|
||||
var result = image.isLoaded ? 'loaded' : 'broken';
|
||||
console.log( 'image is ' + result + ' for ' + image.img.src );
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Browserify
|
||||
|
||||
imagesLoaded works with [Browserify](http://browserify.org/).
|
||||
|
||||
``` bash
|
||||
npm install imagesloaded --save
|
||||
```
|
||||
|
||||
``` js
|
||||
var imagesLoaded = require('imagesloaded');
|
||||
|
||||
imagesLoaded( elem, function() {...} );
|
||||
```
|
||||
|
||||
Use `.makeJQueryPlugin` to make to use `.imagesLoaded()` jQuery plugin.
|
||||
|
||||
``` js
|
||||
var $ = require('jquery');
|
||||
var imagesLoaded = require('imagesloaded');
|
||||
|
||||
// provide jQuery argument
|
||||
imagesLoaded.makeJQueryPlugin( $ );
|
||||
// now use .imagesLoaded() jQuery plugin
|
||||
$('#container').imagesLoaded( function() {...});
|
||||
```
|
||||
|
||||
## Webpack
|
||||
|
||||
Install imagesLoaded and [imports-loader](https://github.com/webpack/imports-loader) with npm.
|
||||
|
||||
``` bash
|
||||
npm install imagesloaded imports-loader
|
||||
```
|
||||
|
||||
In your config file, `webpack.config.js`, use the imports loader to disable `define` and set window for `imagesloaded`.
|
||||
|
||||
``` js
|
||||
module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /imagesloaded|ev\-emitter/,
|
||||
loader: 'imports?define=>false&this=>window'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
(This hack is required because of an issue with how Webpack loads dependencies. [+1 this issue on GitHub](https://github.com/webpack/webpack/issues/883) to help get this issue addressed.)
|
||||
|
||||
You can then `require('imagesloaded')`.
|
||||
|
||||
``` js
|
||||
// main.js
|
||||
var imagesLoaded = require('imagesLoaded');
|
||||
|
||||
imagesLoaded( '#container', function() {
|
||||
// images have loaded
|
||||
});
|
||||
```
|
||||
|
||||
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
|
||||
|
||||
``` js
|
||||
// main.js
|
||||
var imagesLoaded = require('imagesLoaded');
|
||||
var jQuery = require('jquery');
|
||||
|
||||
// provide jQuery argument
|
||||
imagesLoaded.makeJQueryPlugin( $ );
|
||||
// now use .imagesLoaded() jQuery plugin
|
||||
$('#container').imagesLoaded( function() {...});
|
||||
```
|
||||
|
||||
Run webpack.
|
||||
|
||||
``` bash
|
||||
webpack main.js bundle.js
|
||||
```
|
||||
|
||||
## RequireJS
|
||||
|
||||
imagesLoaded works with [RequireJS](http://requirejs.org).
|
||||
|
||||
You can require [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js).
|
||||
|
||||
``` js
|
||||
requirejs( [
|
||||
'path/to/imagesloaded.pkgd.js',
|
||||
], function( imagesLoaded ) {
|
||||
imagesLoaded( '#container', function() { ... });
|
||||
});
|
||||
```
|
||||
|
||||
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
|
||||
|
||||
``` js
|
||||
requirejs( [
|
||||
'jquery',
|
||||
'path/to/imagesloaded.pkgd.js',
|
||||
], function( $, imagesLoaded ) {
|
||||
// provide jQuery argument
|
||||
imagesLoaded.makeJQueryPlugin( $ );
|
||||
// now use .imagesLoaded() jQuery plugin
|
||||
$('#container').imagesLoaded( function() {...});
|
||||
});
|
||||
```
|
||||
|
||||
You can manage dependencies with [Bower](http://bower.io). Set `baseUrl` to `bower_components` and set a path config for all your application code.
|
||||
|
||||
``` js
|
||||
requirejs.config({
|
||||
baseUrl: 'bower_components/',
|
||||
paths: { // path to your app
|
||||
app: '../'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs( [
|
||||
'imagesloaded/imagesloaded',
|
||||
'app/my-component.js'
|
||||
], function( imagesLoaded, myComp ) {
|
||||
imagesLoaded( '#container', function() { ... });
|
||||
});
|
||||
```
|
||||
|
||||
## Browser support
|
||||
|
||||
+ IE9+
|
||||
+ Android 2.3+
|
||||
+ iOS Safari 4+
|
||||
+ All other modern browsers
|
||||
|
||||
Use [imagesLoaded v3](http://imagesloaded.desandro.com/v3/) for IE8 support.
|
||||
|
||||
## MIT License
|
||||
|
||||
imagesLoaded is released under the [MIT License](http://desandro.mit-license.org/). Have at it.
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "imagesloaded",
|
||||
"description": "JavaScript is all like _You images done yet or what?_",
|
||||
"main": "imagesloaded.js",
|
||||
"dependencies": {
|
||||
"ev-emitter": "~1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery": ">=1.9 <4.0",
|
||||
"qunit": "~1.20.0"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"test",
|
||||
"package.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"contributing.md"
|
||||
],
|
||||
"homepage": "http://imagesloaded.desandro.com",
|
||||
"authors": [
|
||||
"David DeSandro"
|
||||
],
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"images"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
/*jshint node: true, strict: false */
|
||||
|
||||
var fs = require('fs');
|
||||
var gulp = require('gulp');
|
||||
var rename = require('gulp-rename');
|
||||
var replace = require('gulp-replace');
|
||||
|
||||
// ----- hint ----- //
|
||||
|
||||
var jshint = require('gulp-jshint');
|
||||
|
||||
gulp.task( 'hint-js', function() {
|
||||
return gulp.src('imagesloaded.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint-test', function() {
|
||||
return gulp.src('test/unit/*.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint-task', function() {
|
||||
return gulp.src('gulpfile.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
var jsonlint = require('gulp-json-lint');
|
||||
|
||||
gulp.task( 'jsonlint', function() {
|
||||
return gulp.src( '*.json' )
|
||||
.pipe( jsonlint() )
|
||||
.pipe( jsonlint.report('verbose') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint', [ 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ]);
|
||||
|
||||
// -------------------------- RequireJS makes pkgd -------------------------- //
|
||||
|
||||
// refactored from gulp-requirejs-optimize
|
||||
// https://www.npmjs.com/package/gulp-requirejs-optimize/
|
||||
|
||||
var gutil = require('gulp-util');
|
||||
var through = require('through2');
|
||||
var requirejs = require('requirejs');
|
||||
var chalk = require('chalk');
|
||||
|
||||
function rjsOptimize( options ) {
|
||||
options = options || {};
|
||||
|
||||
requirejs.define('node/print', [], function() {
|
||||
return function(msg) {
|
||||
if( msg.substring(0, 5) === 'Error' ) {
|
||||
gutil.log( chalk.red( msg ) );
|
||||
} else {
|
||||
gutil.log( msg );
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var stream = through.obj(function (file, enc, cb) {
|
||||
if ( file.isNull() ) {
|
||||
return cb( null, file );
|
||||
}
|
||||
|
||||
options.logLevel = 2;
|
||||
|
||||
options.out = function( text ) {
|
||||
var outFile = new gutil.File({
|
||||
path: file.relative,
|
||||
contents: new Buffer( text )
|
||||
});
|
||||
cb( null, outFile );
|
||||
};
|
||||
|
||||
gutil.log('RequireJS optimizing');
|
||||
requirejs.optimize( options, null, function( err ) {
|
||||
var gulpError = new gutil.PluginError( 'requirejsOptimize', err.message );
|
||||
stream.emit( 'error', gulpError );
|
||||
});
|
||||
});
|
||||
|
||||
return stream;
|
||||
}
|
||||
|
||||
// regex for banner comment
|
||||
var reBannerComment = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*');
|
||||
|
||||
function getBanner() {
|
||||
var src = fs.readFileSync( 'imagesloaded.js', 'utf8' );
|
||||
var matches = src.match( reBannerComment );
|
||||
var banner = matches[0].replace( 'imagesLoaded', 'imagesLoaded PACKAGED' );
|
||||
return banner;
|
||||
}
|
||||
|
||||
function addBanner( str ) {
|
||||
return replace( /^/, str );
|
||||
}
|
||||
|
||||
gulp.task( 'requirejs', function() {
|
||||
var banner = getBanner();
|
||||
// HACK src is not needed
|
||||
// should refactor rjsOptimize to produce src
|
||||
return gulp.src('imagesloaded.js')
|
||||
.pipe( rjsOptimize({
|
||||
baseUrl: 'bower_components',
|
||||
optimize: 'none',
|
||||
include: [
|
||||
'../imagesloaded'
|
||||
]
|
||||
}) )
|
||||
// remove named module
|
||||
.pipe( replace( "'../imagesloaded',", '' ) )
|
||||
// add banner
|
||||
.pipe( addBanner( banner ) )
|
||||
.pipe( rename('imagesloaded.pkgd.js') )
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
|
||||
// ----- uglify ----- //
|
||||
|
||||
var uglify = require('gulp-uglify');
|
||||
|
||||
gulp.task( 'uglify', [ 'requirejs' ], function() {
|
||||
var banner = getBanner();
|
||||
gulp.src('imagesloaded.pkgd.js')
|
||||
.pipe( uglify() )
|
||||
// add banner
|
||||
.pipe( addBanner( banner ) )
|
||||
.pipe( rename('imagesloaded.pkgd.min.js') )
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
// ----- version ----- //
|
||||
|
||||
// set version in source files
|
||||
|
||||
var minimist = require('minimist');
|
||||
|
||||
// use gulp version -t 1.2.3
|
||||
gulp.task( 'version', function() {
|
||||
var args = minimist( process.argv.slice(3) );
|
||||
var version = args.t;
|
||||
if ( !version || !/\d+\.\d+\.\d+/.test( version ) ) {
|
||||
gutil.log( 'invalid version: ' + chalk.red( version ) );
|
||||
return;
|
||||
}
|
||||
gutil.log( 'ticking version to ' + chalk.green( version ) );
|
||||
|
||||
gulp.src('imagesloaded.js')
|
||||
.pipe( replace( /imagesLoaded v\d+\.\d+\.\d+/, 'imagesLoaded v' + version ) )
|
||||
.pipe( gulp.dest('.') );
|
||||
|
||||
gulp.src( [ 'bower.json', 'package.json' ] )
|
||||
.pipe( replace( /"version": "\d+\.\d+\.\d+"/, '"version": "' + version + '"' ) )
|
||||
.pipe( gulp.dest('.') );
|
||||
// replace CDN links in README
|
||||
var minorVersion = version.match( /^\d+\.\d+/ )[0];
|
||||
gulp.src('README.md')
|
||||
.pipe( replace( /imagesloaded@\d+\.\d+/g, 'imagesloaded@' + minorVersion ))
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
// ----- default ----- //
|
||||
|
||||
gulp.task( 'default', [
|
||||
'hint',
|
||||
'uglify'
|
||||
]);
|
||||
@@ -0,0 +1,370 @@
|
||||
/*!
|
||||
* imagesLoaded v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
( function( window, factory ) { 'use strict';
|
||||
// universal module definition
|
||||
|
||||
/*global define: false, module: false, require: false */
|
||||
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'ev-emitter/ev-emitter'
|
||||
], function( EvEmitter ) {
|
||||
return factory( window, EvEmitter );
|
||||
});
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory(
|
||||
window,
|
||||
require('ev-emitter')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.imagesLoaded = factory(
|
||||
window,
|
||||
window.EvEmitter
|
||||
);
|
||||
}
|
||||
|
||||
})( window,
|
||||
|
||||
// -------------------------- factory -------------------------- //
|
||||
|
||||
function factory( window, EvEmitter ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var $ = window.jQuery;
|
||||
var console = window.console;
|
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// -------------------------- imagesLoaded -------------------------- //
|
||||
|
||||
/**
|
||||
* @param {Array, Element, NodeList, String} elem
|
||||
* @param {Object or Function} options - if function, use as callback
|
||||
* @param {Function} onAlways - callback function
|
||||
*/
|
||||
function ImagesLoaded( elem, options, onAlways ) {
|
||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
||||
if ( !( this instanceof ImagesLoaded ) ) {
|
||||
return new ImagesLoaded( elem, options, onAlways );
|
||||
}
|
||||
// use elem as selector string
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelectorAll( elem );
|
||||
}
|
||||
|
||||
this.elements = makeArray( elem );
|
||||
this.options = extend( {}, this.options );
|
||||
|
||||
if ( typeof options == 'function' ) {
|
||||
onAlways = options;
|
||||
} else {
|
||||
extend( this.options, options );
|
||||
}
|
||||
|
||||
if ( onAlways ) {
|
||||
this.on( 'always', onAlways );
|
||||
}
|
||||
|
||||
this.getImages();
|
||||
|
||||
if ( $ ) {
|
||||
// add jQuery Deferred object
|
||||
this.jqDeferred = new $.Deferred();
|
||||
}
|
||||
|
||||
// HACK check async to allow time to bind listeners
|
||||
setTimeout( function() {
|
||||
this.check();
|
||||
}.bind( this ));
|
||||
}
|
||||
|
||||
ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
ImagesLoaded.prototype.options = {};
|
||||
|
||||
ImagesLoaded.prototype.getImages = function() {
|
||||
this.images = [];
|
||||
|
||||
// filter & find items if we have an item selector
|
||||
this.elements.forEach( this.addElementImages, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Node} element
|
||||
*/
|
||||
ImagesLoaded.prototype.addElementImages = function( elem ) {
|
||||
// filter siblings
|
||||
if ( elem.nodeName == 'IMG' ) {
|
||||
this.addImage( elem );
|
||||
}
|
||||
// get background image on element
|
||||
if ( this.options.background === true ) {
|
||||
this.addElementBackgroundImages( elem );
|
||||
}
|
||||
|
||||
// find children
|
||||
// no non-element nodes, #143
|
||||
var nodeType = elem.nodeType;
|
||||
if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
|
||||
return;
|
||||
}
|
||||
var childImgs = elem.querySelectorAll('img');
|
||||
// concat childElems to filterFound array
|
||||
for ( var i=0; i < childImgs.length; i++ ) {
|
||||
var img = childImgs[i];
|
||||
this.addImage( img );
|
||||
}
|
||||
|
||||
// get child background images
|
||||
if ( typeof this.options.background == 'string' ) {
|
||||
var children = elem.querySelectorAll( this.options.background );
|
||||
for ( i=0; i < children.length; i++ ) {
|
||||
var child = children[i];
|
||||
this.addElementBackgroundImages( child );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var elementNodeTypes = {
|
||||
1: true,
|
||||
9: true,
|
||||
11: true
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
|
||||
var style = getComputedStyle( elem );
|
||||
if ( !style ) {
|
||||
// Firefox returns null if in a hidden iframe https://bugzil.la/548397
|
||||
return;
|
||||
}
|
||||
// get url inside url("...")
|
||||
var reURL = /url\((['"])?(.*?)\1\)/gi;
|
||||
var matches = reURL.exec( style.backgroundImage );
|
||||
while ( matches !== null ) {
|
||||
var url = matches && matches[2];
|
||||
if ( url ) {
|
||||
this.addBackground( url, elem );
|
||||
}
|
||||
matches = reURL.exec( style.backgroundImage );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Image} img
|
||||
*/
|
||||
ImagesLoaded.prototype.addImage = function( img ) {
|
||||
var loadingImage = new LoadingImage( img );
|
||||
this.images.push( loadingImage );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addBackground = function( url, elem ) {
|
||||
var background = new Background( url, elem );
|
||||
this.images.push( background );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.check = function() {
|
||||
var _this = this;
|
||||
this.progressedCount = 0;
|
||||
this.hasAnyBroken = false;
|
||||
// complete if no images
|
||||
if ( !this.images.length ) {
|
||||
this.complete();
|
||||
return;
|
||||
}
|
||||
|
||||
function onProgress( image, elem, message ) {
|
||||
// HACK - Chrome triggers event before object properties have changed. #83
|
||||
setTimeout( function() {
|
||||
_this.progress( image, elem, message );
|
||||
});
|
||||
}
|
||||
|
||||
this.images.forEach( function( loadingImage ) {
|
||||
loadingImage.once( 'progress', onProgress );
|
||||
loadingImage.check();
|
||||
});
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.progress = function( image, elem, message ) {
|
||||
this.progressedCount++;
|
||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
||||
// progress event
|
||||
this.emitEvent( 'progress', [ this, image, elem ] );
|
||||
if ( this.jqDeferred && this.jqDeferred.notify ) {
|
||||
this.jqDeferred.notify( this, image );
|
||||
}
|
||||
// check if completed
|
||||
if ( this.progressedCount == this.images.length ) {
|
||||
this.complete();
|
||||
}
|
||||
|
||||
if ( this.options.debug && console ) {
|
||||
console.log( 'progress: ' + message, image, elem );
|
||||
}
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.complete = function() {
|
||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
||||
this.isComplete = true;
|
||||
this.emitEvent( eventName, [ this ] );
|
||||
this.emitEvent( 'always', [ this ] );
|
||||
if ( this.jqDeferred ) {
|
||||
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
|
||||
this.jqDeferred[ jqMethod ]( this );
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
function LoadingImage( img ) {
|
||||
this.img = img;
|
||||
}
|
||||
|
||||
LoadingImage.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
LoadingImage.prototype.check = function() {
|
||||
// If complete is true and browser supports natural sizes,
|
||||
// try to check for image status manually.
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
// report based on naturalWidth
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
return;
|
||||
}
|
||||
|
||||
// If none of the checks above matched, simulate loading on detached element.
|
||||
this.proxyImage = new Image();
|
||||
this.proxyImage.addEventListener( 'load', this );
|
||||
this.proxyImage.addEventListener( 'error', this );
|
||||
// bind to image as well for Firefox. #191
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.proxyImage.src = this.img.src;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.getIsImageComplete = function() {
|
||||
return this.img.complete && this.img.naturalWidth !== undefined;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.img, message ] );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
// trigger specified handler for event type
|
||||
LoadingImage.prototype.handleEvent = function( event ) {
|
||||
var method = 'on' + event.type;
|
||||
if ( this[ method ] ) {
|
||||
this[ method ]( event );
|
||||
}
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onload = function() {
|
||||
this.confirm( true, 'onload' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onerror = function() {
|
||||
this.confirm( false, 'onerror' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.unbindEvents = function() {
|
||||
this.proxyImage.removeEventListener( 'load', this );
|
||||
this.proxyImage.removeEventListener( 'error', this );
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
// -------------------------- Background -------------------------- //
|
||||
|
||||
function Background( url, element ) {
|
||||
this.url = url;
|
||||
this.element = element;
|
||||
this.img = new Image();
|
||||
}
|
||||
|
||||
// inherit LoadingImage prototype
|
||||
Background.prototype = Object.create( LoadingImage.prototype );
|
||||
|
||||
Background.prototype.check = function() {
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.img.src = this.url;
|
||||
// check if image is already complete
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
this.unbindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
Background.prototype.unbindEvents = function() {
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
Background.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.element, message ] );
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
|
||||
jQuery = jQuery || window.jQuery;
|
||||
if ( !jQuery ) {
|
||||
return;
|
||||
}
|
||||
// set local variable
|
||||
$ = jQuery;
|
||||
// $().imagesLoaded()
|
||||
$.fn.imagesLoaded = function( options, callback ) {
|
||||
var instance = new ImagesLoaded( this, options, callback );
|
||||
return instance.jqDeferred.promise( $(this) );
|
||||
};
|
||||
};
|
||||
// try making plugin
|
||||
ImagesLoaded.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
return ImagesLoaded;
|
||||
|
||||
});
|
||||
+487
@@ -0,0 +1,487 @@
|
||||
/*!
|
||||
* imagesLoaded PACKAGED v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
/**
|
||||
* EvEmitter v1.0.1
|
||||
* Lil' event emitter
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
/* jshint unused: true, undef: true, strict: true */
|
||||
|
||||
( function( global, factory ) {
|
||||
// universal module definition
|
||||
/* jshint strict: false */ /* globals define, module */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD - RequireJS
|
||||
define( 'ev-emitter/ev-emitter',factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS - Browserify, Webpack
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Browser globals
|
||||
global.EvEmitter = factory();
|
||||
}
|
||||
|
||||
}( this, function() {
|
||||
|
||||
|
||||
|
||||
function EvEmitter() {}
|
||||
|
||||
var proto = EvEmitter.prototype;
|
||||
|
||||
proto.on = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// set events hash
|
||||
var events = this._events = this._events || {};
|
||||
// set listeners array
|
||||
var listeners = events[ eventName ] = events[ eventName ] || [];
|
||||
// only add once
|
||||
if ( listeners.indexOf( listener ) == -1 ) {
|
||||
listeners.push( listener );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.once = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// add event
|
||||
this.on( eventName, listener );
|
||||
// set once flag
|
||||
// set onceEvents hash
|
||||
var onceEvents = this._onceEvents = this._onceEvents || {};
|
||||
// set onceListeners array
|
||||
var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || [];
|
||||
// set flag
|
||||
onceListeners[ listener ] = true;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.off = function( eventName, listener ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var index = listeners.indexOf( listener );
|
||||
if ( index != -1 ) {
|
||||
listeners.splice( index, 1 );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.emitEvent = function( eventName, args ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var i = 0;
|
||||
var listener = listeners[i];
|
||||
args = args || [];
|
||||
// once stuff
|
||||
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
|
||||
|
||||
while ( listener ) {
|
||||
var isOnce = onceListeners && onceListeners[ listener ];
|
||||
if ( isOnce ) {
|
||||
// remove listener
|
||||
// remove before trigger to prevent recursion
|
||||
this.off( eventName, listener );
|
||||
// unset once flag
|
||||
delete onceListeners[ listener ];
|
||||
}
|
||||
// trigger listener
|
||||
listener.apply( this, args );
|
||||
// get next listener
|
||||
i += isOnce ? 0 : 1;
|
||||
listener = listeners[i];
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
return EvEmitter;
|
||||
|
||||
}));
|
||||
|
||||
/*!
|
||||
* imagesLoaded v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
( function( window, factory ) { 'use strict';
|
||||
// universal module definition
|
||||
|
||||
/*global define: false, module: false, require: false */
|
||||
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'ev-emitter/ev-emitter'
|
||||
], function( EvEmitter ) {
|
||||
return factory( window, EvEmitter );
|
||||
});
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory(
|
||||
window,
|
||||
require('ev-emitter')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.imagesLoaded = factory(
|
||||
window,
|
||||
window.EvEmitter
|
||||
);
|
||||
}
|
||||
|
||||
})( window,
|
||||
|
||||
// -------------------------- factory -------------------------- //
|
||||
|
||||
function factory( window, EvEmitter ) {
|
||||
|
||||
|
||||
|
||||
var $ = window.jQuery;
|
||||
var console = window.console;
|
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// -------------------------- imagesLoaded -------------------------- //
|
||||
|
||||
/**
|
||||
* @param {Array, Element, NodeList, String} elem
|
||||
* @param {Object or Function} options - if function, use as callback
|
||||
* @param {Function} onAlways - callback function
|
||||
*/
|
||||
function ImagesLoaded( elem, options, onAlways ) {
|
||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
||||
if ( !( this instanceof ImagesLoaded ) ) {
|
||||
return new ImagesLoaded( elem, options, onAlways );
|
||||
}
|
||||
// use elem as selector string
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelectorAll( elem );
|
||||
}
|
||||
|
||||
this.elements = makeArray( elem );
|
||||
this.options = extend( {}, this.options );
|
||||
|
||||
if ( typeof options == 'function' ) {
|
||||
onAlways = options;
|
||||
} else {
|
||||
extend( this.options, options );
|
||||
}
|
||||
|
||||
if ( onAlways ) {
|
||||
this.on( 'always', onAlways );
|
||||
}
|
||||
|
||||
this.getImages();
|
||||
|
||||
if ( $ ) {
|
||||
// add jQuery Deferred object
|
||||
this.jqDeferred = new $.Deferred();
|
||||
}
|
||||
|
||||
// HACK check async to allow time to bind listeners
|
||||
setTimeout( function() {
|
||||
this.check();
|
||||
}.bind( this ));
|
||||
}
|
||||
|
||||
ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
ImagesLoaded.prototype.options = {};
|
||||
|
||||
ImagesLoaded.prototype.getImages = function() {
|
||||
this.images = [];
|
||||
|
||||
// filter & find items if we have an item selector
|
||||
this.elements.forEach( this.addElementImages, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Node} element
|
||||
*/
|
||||
ImagesLoaded.prototype.addElementImages = function( elem ) {
|
||||
// filter siblings
|
||||
if ( elem.nodeName == 'IMG' ) {
|
||||
this.addImage( elem );
|
||||
}
|
||||
// get background image on element
|
||||
if ( this.options.background === true ) {
|
||||
this.addElementBackgroundImages( elem );
|
||||
}
|
||||
|
||||
// find children
|
||||
// no non-element nodes, #143
|
||||
var nodeType = elem.nodeType;
|
||||
if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
|
||||
return;
|
||||
}
|
||||
var childImgs = elem.querySelectorAll('img');
|
||||
// concat childElems to filterFound array
|
||||
for ( var i=0; i < childImgs.length; i++ ) {
|
||||
var img = childImgs[i];
|
||||
this.addImage( img );
|
||||
}
|
||||
|
||||
// get child background images
|
||||
if ( typeof this.options.background == 'string' ) {
|
||||
var children = elem.querySelectorAll( this.options.background );
|
||||
for ( i=0; i < children.length; i++ ) {
|
||||
var child = children[i];
|
||||
this.addElementBackgroundImages( child );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var elementNodeTypes = {
|
||||
1: true,
|
||||
9: true,
|
||||
11: true
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
|
||||
var style = getComputedStyle( elem );
|
||||
if ( !style ) {
|
||||
// Firefox returns null if in a hidden iframe https://bugzil.la/548397
|
||||
return;
|
||||
}
|
||||
// get url inside url("...")
|
||||
var reURL = /url\((['"])?(.*?)\1\)/gi;
|
||||
var matches = reURL.exec( style.backgroundImage );
|
||||
while ( matches !== null ) {
|
||||
var url = matches && matches[2];
|
||||
if ( url ) {
|
||||
this.addBackground( url, elem );
|
||||
}
|
||||
matches = reURL.exec( style.backgroundImage );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Image} img
|
||||
*/
|
||||
ImagesLoaded.prototype.addImage = function( img ) {
|
||||
var loadingImage = new LoadingImage( img );
|
||||
this.images.push( loadingImage );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addBackground = function( url, elem ) {
|
||||
var background = new Background( url, elem );
|
||||
this.images.push( background );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.check = function() {
|
||||
var _this = this;
|
||||
this.progressedCount = 0;
|
||||
this.hasAnyBroken = false;
|
||||
// complete if no images
|
||||
if ( !this.images.length ) {
|
||||
this.complete();
|
||||
return;
|
||||
}
|
||||
|
||||
function onProgress( image, elem, message ) {
|
||||
// HACK - Chrome triggers event before object properties have changed. #83
|
||||
setTimeout( function() {
|
||||
_this.progress( image, elem, message );
|
||||
});
|
||||
}
|
||||
|
||||
this.images.forEach( function( loadingImage ) {
|
||||
loadingImage.once( 'progress', onProgress );
|
||||
loadingImage.check();
|
||||
});
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.progress = function( image, elem, message ) {
|
||||
this.progressedCount++;
|
||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
||||
// progress event
|
||||
this.emitEvent( 'progress', [ this, image, elem ] );
|
||||
if ( this.jqDeferred && this.jqDeferred.notify ) {
|
||||
this.jqDeferred.notify( this, image );
|
||||
}
|
||||
// check if completed
|
||||
if ( this.progressedCount == this.images.length ) {
|
||||
this.complete();
|
||||
}
|
||||
|
||||
if ( this.options.debug && console ) {
|
||||
console.log( 'progress: ' + message, image, elem );
|
||||
}
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.complete = function() {
|
||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
||||
this.isComplete = true;
|
||||
this.emitEvent( eventName, [ this ] );
|
||||
this.emitEvent( 'always', [ this ] );
|
||||
if ( this.jqDeferred ) {
|
||||
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
|
||||
this.jqDeferred[ jqMethod ]( this );
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
function LoadingImage( img ) {
|
||||
this.img = img;
|
||||
}
|
||||
|
||||
LoadingImage.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
LoadingImage.prototype.check = function() {
|
||||
// If complete is true and browser supports natural sizes,
|
||||
// try to check for image status manually.
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
// report based on naturalWidth
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
return;
|
||||
}
|
||||
|
||||
// If none of the checks above matched, simulate loading on detached element.
|
||||
this.proxyImage = new Image();
|
||||
this.proxyImage.addEventListener( 'load', this );
|
||||
this.proxyImage.addEventListener( 'error', this );
|
||||
// bind to image as well for Firefox. #191
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.proxyImage.src = this.img.src;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.getIsImageComplete = function() {
|
||||
return this.img.complete && this.img.naturalWidth !== undefined;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.img, message ] );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
// trigger specified handler for event type
|
||||
LoadingImage.prototype.handleEvent = function( event ) {
|
||||
var method = 'on' + event.type;
|
||||
if ( this[ method ] ) {
|
||||
this[ method ]( event );
|
||||
}
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onload = function() {
|
||||
this.confirm( true, 'onload' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onerror = function() {
|
||||
this.confirm( false, 'onerror' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.unbindEvents = function() {
|
||||
this.proxyImage.removeEventListener( 'load', this );
|
||||
this.proxyImage.removeEventListener( 'error', this );
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
// -------------------------- Background -------------------------- //
|
||||
|
||||
function Background( url, element ) {
|
||||
this.url = url;
|
||||
this.element = element;
|
||||
this.img = new Image();
|
||||
}
|
||||
|
||||
// inherit LoadingImage prototype
|
||||
Background.prototype = Object.create( LoadingImage.prototype );
|
||||
|
||||
Background.prototype.check = function() {
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.img.src = this.url;
|
||||
// check if image is already complete
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
this.unbindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
Background.prototype.unbindEvents = function() {
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
Background.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.element, message ] );
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
|
||||
jQuery = jQuery || window.jQuery;
|
||||
if ( !jQuery ) {
|
||||
return;
|
||||
}
|
||||
// set local variable
|
||||
$ = jQuery;
|
||||
// $().imagesLoaded()
|
||||
$.fn.imagesLoaded = function( options, callback ) {
|
||||
var instance = new ImagesLoaded( this, options, callback );
|
||||
return instance.jqDeferred.promise( $(this) );
|
||||
};
|
||||
};
|
||||
// try making plugin
|
||||
ImagesLoaded.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
return ImagesLoaded;
|
||||
|
||||
});
|
||||
|
||||
+7
File diff suppressed because one or more lines are too long
+3
-5
@@ -1,6 +1,4 @@
|
||||
|
||||
jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();console.log('topOfWindow',topOfWindow);if(topOfWindow>100){$("#top-bar").addClass("reduced");}
|
||||
else{$("#top-bar").removeClass("reduced");}});if($('body').is('.categories')){console.log('hello')
|
||||
var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).find('li.project').each(function(index,el){console.log(index)
|
||||
$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
|
||||
var $grid=$('.grid').masonry({itemSelector:'.grid-block'});});
|
||||
jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();if(topOfWindow>100){$("#top-bar").addClass("reduced");}
|
||||
else{$("#top-bar").removeClass("reduced");}});if($('body').is('.categories')){var $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).find('li.project').each(function(index,el){$(this).addClass('projet-'+index).hover(function(e){$diapo.children().removeClass('visible');var c=$(this).attr('class').match('projet-[0-9]+');console.log("class",c[0]);$diapo.children('.'+c[0]).addClass('visible');}).find('.projet-img').addClass('projet-'+index).appendTo($diapo);});$diapo.children('.projet-img').first().addClass('visible');}
|
||||
var $grid=$('.grid').masonry({itemSelector:'.grid-block',transitionDuration:'0.4s'});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});});
|
||||
@@ -3,7 +3,7 @@ jQuery(document).ready(function($) {
|
||||
//window scrolls check
|
||||
$(window).scroll(function() {
|
||||
var topOfWindow = $(window).scrollTop();
|
||||
console.log('topOfWindow',topOfWindow);
|
||||
// console.log('topOfWindow',topOfWindow);
|
||||
if (topOfWindow > 100) {
|
||||
$("#top-bar").addClass("reduced");
|
||||
}
|
||||
@@ -14,12 +14,12 @@ jQuery(document).ready(function($) {
|
||||
|
||||
// init categories content images behaviour
|
||||
if($('body').is('.categories')){
|
||||
console.log('hello')
|
||||
// console.log('hello');
|
||||
var $diapo = $('<div id="diaporama"></div>');
|
||||
$("#categories-content")
|
||||
.before($diapo)
|
||||
.find('li.project').each(function(index, el) {
|
||||
console.log(index)
|
||||
// console.log(index);
|
||||
$(this)
|
||||
.addClass('projet-'+index)
|
||||
.hover(function (e) {
|
||||
@@ -37,14 +37,11 @@ jQuery(document).ready(function($) {
|
||||
|
||||
// init Masonry
|
||||
var $grid = $('.grid').masonry({
|
||||
itemSelector: '.grid-block'
|
||||
// columnWidth: 200
|
||||
itemSelector: '.grid-block',
|
||||
transitionDuration: '0.4s'
|
||||
});
|
||||
// layout Masonry after each image loads
|
||||
// $grid.imagesLoaded().progress( function() {
|
||||
// $grid.masonry('layout');
|
||||
// });
|
||||
|
||||
|
||||
|
||||
$grid.imagesLoaded().progress(function(){
|
||||
$grid.masonry('layout');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{% for child in page.collection %}
|
||||
{% if child.header.home == true %}
|
||||
<section class="projet-block projet-block-img grid-block columns xlarge-3 large-4 medium-6 small-12">
|
||||
{% include 'partials/projet-block.html.twig' with {'page':child,'display':'img', 'context':'home'} %}
|
||||
{% include 'partials/projet-block.html.twig' with {'page':child,'display':'img'} %}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
{% block javascripts %}
|
||||
{% do assets.add('theme://bower_components/jquery/dist/jquery.min.js', 101) %}
|
||||
{% do assets.add('theme://bower_components/foundation/js/foundation.min.js') %}
|
||||
{% do assets.add('theme://bower_components/imagesloaded/imagesloaded.pkgd.min.js') %}
|
||||
{% do assets.add('theme://bower_components/masonry/dist/masonry.pkgd.min.js') %}
|
||||
{% do assets.add('theme://js/dist/script.min.js') %}
|
||||
{{ assets.js() }}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
{% set bodyclass = "projet" %}
|
||||
|
||||
{% set images = page.media.images[1:] %}
|
||||
{% set images = page.media.images[2:] %}
|
||||
{% set images = images|merge(page.media.files) %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Reference in New Issue
Block a user