fixed masonry bug
This commit is contained in:
@@ -16,7 +16,8 @@
|
|||||||
"tests"
|
"tests"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"foundation": "~5.5.3"
|
"foundation": "~5.5.3",
|
||||||
|
"imagesloaded": "^4.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"masonry": "~3.3.2"
|
"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");}
|
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')){console.log('hello')
|
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 $diapo=$('<div id="diaporama"></div>');$("#categories-content").before($diapo).find('li.project').each(function(index,el){console.log(index)
|
var $grid=$('.grid').masonry({itemSelector:'.grid-block',transitionDuration:'0.4s'});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});});
|
||||||
$(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'});});
|
|
||||||
@@ -3,7 +3,7 @@ jQuery(document).ready(function($) {
|
|||||||
//window scrolls check
|
//window scrolls check
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
var topOfWindow = $(window).scrollTop();
|
var topOfWindow = $(window).scrollTop();
|
||||||
console.log('topOfWindow',topOfWindow);
|
// console.log('topOfWindow',topOfWindow);
|
||||||
if (topOfWindow > 100) {
|
if (topOfWindow > 100) {
|
||||||
$("#top-bar").addClass("reduced");
|
$("#top-bar").addClass("reduced");
|
||||||
}
|
}
|
||||||
@@ -14,12 +14,12 @@ jQuery(document).ready(function($) {
|
|||||||
|
|
||||||
// init categories content images behaviour
|
// init categories content images behaviour
|
||||||
if($('body').is('.categories')){
|
if($('body').is('.categories')){
|
||||||
console.log('hello')
|
// console.log('hello');
|
||||||
var $diapo = $('<div id="diaporama"></div>');
|
var $diapo = $('<div id="diaporama"></div>');
|
||||||
$("#categories-content")
|
$("#categories-content")
|
||||||
.before($diapo)
|
.before($diapo)
|
||||||
.find('li.project').each(function(index, el) {
|
.find('li.project').each(function(index, el) {
|
||||||
console.log(index)
|
// console.log(index);
|
||||||
$(this)
|
$(this)
|
||||||
.addClass('projet-'+index)
|
.addClass('projet-'+index)
|
||||||
.hover(function (e) {
|
.hover(function (e) {
|
||||||
@@ -37,14 +37,11 @@ jQuery(document).ready(function($) {
|
|||||||
|
|
||||||
// init Masonry
|
// init Masonry
|
||||||
var $grid = $('.grid').masonry({
|
var $grid = $('.grid').masonry({
|
||||||
itemSelector: '.grid-block'
|
itemSelector: '.grid-block',
|
||||||
// columnWidth: 200
|
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 %}
|
{% for child in page.collection %}
|
||||||
{% if child.header.home == true %}
|
{% if child.header.home == true %}
|
||||||
<section class="projet-block projet-block-img grid-block columns xlarge-3 large-4 medium-6 small-12">
|
<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>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@@ -58,6 +58,7 @@
|
|||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
{% do assets.add('theme://bower_components/jquery/dist/jquery.min.js', 101) %}
|
{% 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/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://bower_components/masonry/dist/masonry.pkgd.min.js') %}
|
||||||
{% do assets.add('theme://js/dist/script.min.js') %}
|
{% do assets.add('theme://js/dist/script.min.js') %}
|
||||||
{{ assets.js() }}
|
{{ assets.js() }}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
{% set bodyclass = "projet" %}
|
{% set bodyclass = "projet" %}
|
||||||
|
|
||||||
{% set images = page.media.images[1:] %}
|
{% set images = page.media.images[2:] %}
|
||||||
{% set images = images|merge(page.media.files) %}
|
{% set images = images|merge(page.media.files) %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
Reference in New Issue
Block a user