correction && add form && add slide && add masonry && css
This commit is contained in:
commit
4e25309391
@ -41,7 +41,9 @@
|
|||||||
"wpackagist-plugin/advanced-custom-fields": "^5.8",
|
"wpackagist-plugin/advanced-custom-fields": "^5.8",
|
||||||
"wpackagist-plugin/classic-editor": "^1.5",
|
"wpackagist-plugin/classic-editor": "^1.5",
|
||||||
"wpackagist-plugin/timber-library": "^1.15",
|
"wpackagist-plugin/timber-library": "^1.15",
|
||||||
"twbs/bootstrap": "4.5.0"
|
"twbs/bootstrap": "4.5.0",
|
||||||
|
"twig/extensions": "^1.5",
|
||||||
|
"wpackagist-plugin/advanced-forms": "^1.6"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"squizlabs/php_codesniffer": "^3.5.4",
|
"squizlabs/php_codesniffer": "^3.5.4",
|
||||||
|
|||||||
213
composer.lock
generated
213
composer.lock
generated
@ -4,7 +4,7 @@
|
|||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "4a15807426c47b94682de874f8364d4b",
|
"content-hash": "903fb4c0bdca7a4f896104b330762f2a",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "composer/installers",
|
"name": "composer/installers",
|
||||||
@ -495,6 +495,79 @@
|
|||||||
],
|
],
|
||||||
"time": "2020-05-12T16:14:59+00:00"
|
"time": "2020-05-12T16:14:59+00:00"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "symfony/polyfill-mbstring",
|
||||||
|
"version": "v1.17.0",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/symfony/polyfill-mbstring.git",
|
||||||
|
"reference": "fa79b11539418b02fc5e1897267673ba2c19419c"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/fa79b11539418b02fc5e1897267673ba2c19419c",
|
||||||
|
"reference": "fa79b11539418b02fc5e1897267673ba2c19419c",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"php": ">=5.3.3"
|
||||||
|
},
|
||||||
|
"suggest": {
|
||||||
|
"ext-mbstring": "For best performance"
|
||||||
|
},
|
||||||
|
"type": "library",
|
||||||
|
"extra": {
|
||||||
|
"branch-alias": {
|
||||||
|
"dev-master": "1.17-dev"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"autoload": {
|
||||||
|
"psr-4": {
|
||||||
|
"Symfony\\Polyfill\\Mbstring\\": ""
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"bootstrap.php"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"MIT"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Nicolas Grekas",
|
||||||
|
"email": "p@tchwork.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Symfony Community",
|
||||||
|
"homepage": "https://symfony.com/contributors"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Symfony polyfill for the Mbstring extension",
|
||||||
|
"homepage": "https://symfony.com",
|
||||||
|
"keywords": [
|
||||||
|
"compatibility",
|
||||||
|
"mbstring",
|
||||||
|
"polyfill",
|
||||||
|
"portable",
|
||||||
|
"shim"
|
||||||
|
],
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"url": "https://symfony.com/sponsor",
|
||||||
|
"type": "custom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://github.com/fabpot",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||||
|
"type": "tidelift"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"time": "2020-05-12T16:47:27+00:00"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "twbs/bootstrap",
|
"name": "twbs/bootstrap",
|
||||||
"version": "v4.5.0",
|
"version": "v4.5.0",
|
||||||
@ -552,6 +625,126 @@
|
|||||||
],
|
],
|
||||||
"time": "2020-05-12T17:44:42+00:00"
|
"time": "2020-05-12T17:44:42+00:00"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "twig/extensions",
|
||||||
|
"version": "v1.5.4",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/twigphp/Twig-extensions.git",
|
||||||
|
"reference": "57873c8b0c1be51caa47df2cdb824490beb16202"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/twigphp/Twig-extensions/zipball/57873c8b0c1be51caa47df2cdb824490beb16202",
|
||||||
|
"reference": "57873c8b0c1be51caa47df2cdb824490beb16202",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"twig/twig": "^1.27|^2.0"
|
||||||
|
},
|
||||||
|
"require-dev": {
|
||||||
|
"symfony/phpunit-bridge": "^3.4",
|
||||||
|
"symfony/translation": "^2.7|^3.4"
|
||||||
|
},
|
||||||
|
"suggest": {
|
||||||
|
"symfony/translation": "Allow the time_diff output to be translated"
|
||||||
|
},
|
||||||
|
"type": "library",
|
||||||
|
"extra": {
|
||||||
|
"branch-alias": {
|
||||||
|
"dev-master": "1.5-dev"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"autoload": {
|
||||||
|
"psr-0": {
|
||||||
|
"Twig_Extensions_": "lib/"
|
||||||
|
},
|
||||||
|
"psr-4": {
|
||||||
|
"Twig\\Extensions\\": "src/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"MIT"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Fabien Potencier",
|
||||||
|
"email": "fabien@symfony.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Common additional features for Twig that do not directly belong in core",
|
||||||
|
"keywords": [
|
||||||
|
"i18n",
|
||||||
|
"text"
|
||||||
|
],
|
||||||
|
"time": "2018-12-05T18:34:18+00:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "twig/twig",
|
||||||
|
"version": "v2.12.5",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/twigphp/Twig.git",
|
||||||
|
"reference": "18772e0190734944277ee97a02a9a6c6555fcd94"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/twigphp/Twig/zipball/18772e0190734944277ee97a02a9a6c6555fcd94",
|
||||||
|
"reference": "18772e0190734944277ee97a02a9a6c6555fcd94",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"php": "^7.0",
|
||||||
|
"symfony/polyfill-ctype": "^1.8",
|
||||||
|
"symfony/polyfill-mbstring": "^1.3"
|
||||||
|
},
|
||||||
|
"require-dev": {
|
||||||
|
"psr/container": "^1.0",
|
||||||
|
"symfony/phpunit-bridge": "^4.4|^5.0"
|
||||||
|
},
|
||||||
|
"type": "library",
|
||||||
|
"extra": {
|
||||||
|
"branch-alias": {
|
||||||
|
"dev-master": "2.12-dev"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"autoload": {
|
||||||
|
"psr-0": {
|
||||||
|
"Twig_": "lib/"
|
||||||
|
},
|
||||||
|
"psr-4": {
|
||||||
|
"Twig\\": "src/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"BSD-3-Clause"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Fabien Potencier",
|
||||||
|
"email": "fabien@symfony.com",
|
||||||
|
"homepage": "http://fabien.potencier.org",
|
||||||
|
"role": "Lead Developer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Twig Team",
|
||||||
|
"role": "Contributors"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Armin Ronacher",
|
||||||
|
"email": "armin.ronacher@active-4.com",
|
||||||
|
"role": "Project Founder"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Twig, the flexible, fast, and secure template language for PHP",
|
||||||
|
"homepage": "https://twig.symfony.com",
|
||||||
|
"keywords": [
|
||||||
|
"templating"
|
||||||
|
],
|
||||||
|
"time": "2020-02-11T15:31:23+00:00"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "vlucas/phpdotenv",
|
"name": "vlucas/phpdotenv",
|
||||||
"version": "v4.1.6",
|
"version": "v4.1.6",
|
||||||
@ -644,6 +837,24 @@
|
|||||||
"type": "wordpress-plugin",
|
"type": "wordpress-plugin",
|
||||||
"homepage": "https://wordpress.org/plugins/advanced-custom-fields/"
|
"homepage": "https://wordpress.org/plugins/advanced-custom-fields/"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "wpackagist-plugin/advanced-forms",
|
||||||
|
"version": "1.6.7",
|
||||||
|
"source": {
|
||||||
|
"type": "svn",
|
||||||
|
"url": "https://plugins.svn.wordpress.org/advanced-forms/",
|
||||||
|
"reference": "tags/1.6.7"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://downloads.wordpress.org/plugin/advanced-forms.1.6.7.zip"
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"composer/installers": "~1.0"
|
||||||
|
},
|
||||||
|
"type": "wordpress-plugin",
|
||||||
|
"homepage": "https://wordpress.org/plugins/advanced-forms/"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "wpackagist-plugin/classic-editor",
|
"name": "wpackagist-plugin/classic-editor",
|
||||||
"version": "1.5",
|
"version": "1.5",
|
||||||
|
|||||||
2
node_modules/desandro-matches-selector/.npmignore
generated
vendored
Normal file
2
node_modules/desandro-matches-selector/.npmignore
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
components/
|
||||||
|
bower_components/
|
||||||
27
node_modules/desandro-matches-selector/README.md
generated
vendored
Normal file
27
node_modules/desandro-matches-selector/README.md
generated
vendored
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# matchesSelector helper
|
||||||
|
|
||||||
|
[`matches`/`matchesSelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) is pretty hot :fire:, but has [vendor-prefix baggage](http://caniuse.com/#feat=matchesselector) :handbag: :pouch:. This helper function takes care of that, without polyfilling or augmenting `Element.prototype`.
|
||||||
|
|
||||||
|
``` js
|
||||||
|
matchesSelector( elem, selector );
|
||||||
|
// for example
|
||||||
|
matchesSelector( myElem, 'div.my-hawt-selector' );
|
||||||
|
```
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Download [matches-selector.js](https://github.com/desandro/matches-selector/raw/master/matches-selector.js)
|
||||||
|
|
||||||
|
Install with [Bower](http://bower.io): `bower install matches-selector`
|
||||||
|
|
||||||
|
[Install with npm](https://www.npmjs.org/package/desandro-matches-selector): `npm install desandro-matches-selector`
|
||||||
|
|
||||||
|
## Browser support
|
||||||
|
|
||||||
|
IE10+, all modern browsers
|
||||||
|
|
||||||
|
Use [matchesSelector v1](https://github.com/desandro/matches-selector/releases/tag/v1.0.3) for IE8 and IE9 support.
|
||||||
|
|
||||||
|
## MIT license
|
||||||
|
|
||||||
|
matchesSelector is released under the [MIT license](http://desandro.mit-license.org)
|
||||||
32
node_modules/desandro-matches-selector/bower.json
generated
vendored
Normal file
32
node_modules/desandro-matches-selector/bower.json
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "matches-selector",
|
||||||
|
"description": "matches/matchesSelector helper",
|
||||||
|
"main": "matches-selector.js",
|
||||||
|
"devDependencies": {
|
||||||
|
"qunit": "1.x"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/desandro/matches-selector",
|
||||||
|
"authors": [
|
||||||
|
"David DeSandro"
|
||||||
|
],
|
||||||
|
"moduleType": [
|
||||||
|
"amd",
|
||||||
|
"globals",
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"DOM",
|
||||||
|
"matchesSelector",
|
||||||
|
"matches"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests",
|
||||||
|
"tests.*",
|
||||||
|
"package.json"
|
||||||
|
]
|
||||||
|
}
|
||||||
53
node_modules/desandro-matches-selector/matches-selector.js
generated
vendored
Normal file
53
node_modules/desandro-matches-selector/matches-selector.js
generated
vendored
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* matchesSelector v2.0.2
|
||||||
|
* matchesSelector( element, '.selector' )
|
||||||
|
* MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*jshint browser: true, strict: true, undef: true, unused: true */
|
||||||
|
|
||||||
|
( function( window, factory ) {
|
||||||
|
/*global define: false, module: false */
|
||||||
|
'use strict';
|
||||||
|
// universal module definition
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( factory );
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory();
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.matchesSelector = factory();
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var matchesMethod = ( function() {
|
||||||
|
var ElemProto = window.Element.prototype;
|
||||||
|
// check for the standard method name first
|
||||||
|
if ( ElemProto.matches ) {
|
||||||
|
return 'matches';
|
||||||
|
}
|
||||||
|
// check un-prefixed
|
||||||
|
if ( ElemProto.matchesSelector ) {
|
||||||
|
return 'matchesSelector';
|
||||||
|
}
|
||||||
|
// check vendor prefixes
|
||||||
|
var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
|
||||||
|
|
||||||
|
for ( var i=0; i < prefixes.length; i++ ) {
|
||||||
|
var prefix = prefixes[i];
|
||||||
|
var method = prefix + 'MatchesSelector';
|
||||||
|
if ( ElemProto[ method ] ) {
|
||||||
|
return method;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
return function matchesSelector( elem, selector ) {
|
||||||
|
return elem[ matchesMethod ]( selector );
|
||||||
|
};
|
||||||
|
|
||||||
|
}));
|
||||||
52
node_modules/desandro-matches-selector/package.json
generated
vendored
Normal file
52
node_modules/desandro-matches-selector/package.json
generated
vendored
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"_from": "desandro-matches-selector@^2.0.0",
|
||||||
|
"_id": "desandro-matches-selector@2.0.2",
|
||||||
|
"_inBundle": false,
|
||||||
|
"_integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE=",
|
||||||
|
"_location": "/desandro-matches-selector",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"type": "range",
|
||||||
|
"registry": true,
|
||||||
|
"raw": "desandro-matches-selector@^2.0.0",
|
||||||
|
"name": "desandro-matches-selector",
|
||||||
|
"escapedName": "desandro-matches-selector",
|
||||||
|
"rawSpec": "^2.0.0",
|
||||||
|
"saveSpec": null,
|
||||||
|
"fetchSpec": "^2.0.0"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"/fizzy-ui-utils",
|
||||||
|
"/flickity"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
|
||||||
|
"_shasum": "717beed4dc13e7d8f3762f707a6d58a6774218e1",
|
||||||
|
"_spec": "desandro-matches-selector@^2.0.0",
|
||||||
|
"_where": "/var/www/html/node_modules/flickity",
|
||||||
|
"author": {
|
||||||
|
"name": "David DeSandro"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/desandro/matches-selector/issues"
|
||||||
|
},
|
||||||
|
"bundleDependencies": false,
|
||||||
|
"deprecated": false,
|
||||||
|
"description": "matches/matchesSelector helper",
|
||||||
|
"homepage": "https://github.com/desandro/matches-selector",
|
||||||
|
"keywords": [
|
||||||
|
"DOM",
|
||||||
|
"matchesSelector",
|
||||||
|
"matches"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "matches-selector.js",
|
||||||
|
"name": "desandro-matches-selector",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/desandro/matches-selector.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"version": "2.0.2"
|
||||||
|
}
|
||||||
25
node_modules/desandro-matches-selector/tests.html
generated
vendored
Normal file
25
node_modules/desandro-matches-selector/tests.html
generated
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>matchesSelector tests</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="bower_components/qunit/qunit/qunit.css" />
|
||||||
|
|
||||||
|
<script src="bower_components/qunit/qunit/qunit.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="alpha" class="item red"></div>
|
||||||
|
<div id="beta" class="item blue"></div>
|
||||||
|
<div id="gamma" class="item green"></div>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
|
||||||
|
<script src="matches-selector.js"></script>
|
||||||
|
<script src="tests.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
node_modules/desandro-matches-selector/tests.js
generated
vendored
Normal file
30
node_modules/desandro-matches-selector/tests.js
generated
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
test( 'matchesSelector', function() {
|
||||||
|
|
||||||
|
equal( typeof matchesSelector, 'function', 'typeof is function' );
|
||||||
|
|
||||||
|
var alpha = document.getElementById('alpha');
|
||||||
|
|
||||||
|
equal( matchesSelector( alpha, '#alpha' ), true, '[#alpha] matches #alpha' );
|
||||||
|
equal( matchesSelector( alpha, '.item' ), true, '[#alpha] matches .item' );
|
||||||
|
equal( matchesSelector( alpha, 'div' ), true, '[#alpha] matches div' );
|
||||||
|
equal( matchesSelector( alpha, 'p' ), false, '[#alpha] does not match p' );
|
||||||
|
equal( matchesSelector( alpha, '.baz' ), false, '[#alpha] does not match .baz' );
|
||||||
|
equal( matchesSelector( alpha, '#alpha.item' ), true, '[#alpha] matches #alpha.item' );
|
||||||
|
equal( matchesSelector( alpha, '#alpha, foo'), true, '[#alpha] matches #alpha, foo' );
|
||||||
|
equal( matchesSelector( alpha, 'foo, .item'), true, '[#alpha] matches foo, .item' );
|
||||||
|
|
||||||
|
// orphaned elem
|
||||||
|
var beta = document.createElement('div');
|
||||||
|
beta.id = 'beta';
|
||||||
|
beta.className = 'foo bar';
|
||||||
|
|
||||||
|
equal( matchesSelector( beta, 'div' ), true, '[#beta] matches div' );
|
||||||
|
equal( matchesSelector( beta, '#beta' ), true, '[#beta] matches #beta' );
|
||||||
|
equal( matchesSelector( beta, '.bar' ), true, '[#beta] matches .bar' );
|
||||||
|
equal( matchesSelector( beta, 'p' ), false, '[#beta] does not match p' );
|
||||||
|
equal( matchesSelector( beta, '.baz' ), false, '[#beta] does not match .baz' );
|
||||||
|
equal( matchesSelector( beta, '#beta.bar' ), true, '[#alpha] matches #alpha.item' );
|
||||||
|
equal( matchesSelector( beta, '#beta, qux' ), true, '[#beta] matches #beta, qux' );
|
||||||
|
equal( matchesSelector( beta, '.qux, .bar'), true, '[#alpha] matches .qux, .bar' );
|
||||||
|
|
||||||
|
});
|
||||||
109
node_modules/ev-emitter/README.md
generated
vendored
Normal file
109
node_modules/ev-emitter/README.md
generated
vendored
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
# 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 EvEmitter();
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
### allOff
|
||||||
|
|
||||||
|
Removes all event listeners.
|
||||||
|
|
||||||
|
``` js
|
||||||
|
emitter.allOff()
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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.
|
||||||
29
node_modules/ev-emitter/bower.json
generated
vendored
Normal file
29
node_modules/ev-emitter/bower.json
generated
vendored
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"package.json"
|
||||||
|
]
|
||||||
|
}
|
||||||
112
node_modules/ev-emitter/ev-emitter.js
generated
vendored
Normal file
112
node_modules/ev-emitter/ev-emitter.js
generated
vendored
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
/**
|
||||||
|
* EvEmitter v1.1.0
|
||||||
|
* Lil' event emitter
|
||||||
|
* MIT License
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* jshint unused: true, undef: true, strict: true */
|
||||||
|
|
||||||
|
( function( global, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */ /* globals define, module, window */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD - RequireJS
|
||||||
|
define( factory );
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS - Browserify, Webpack
|
||||||
|
module.exports = factory();
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
global.EvEmitter = factory();
|
||||||
|
}
|
||||||
|
|
||||||
|
}( typeof window != 'undefined' ? window : this, function() {
|
||||||
|
|
||||||
|
"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;
|
||||||
|
}
|
||||||
|
// copy over to avoid interference if .off() in listener
|
||||||
|
listeners = listeners.slice(0);
|
||||||
|
args = args || [];
|
||||||
|
// once stuff
|
||||||
|
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
|
||||||
|
|
||||||
|
for ( var i=0; i < listeners.length; i++ ) {
|
||||||
|
var listener = listeners[i]
|
||||||
|
var isOnce = onceListeners && onceListeners[ listener ];
|
||||||
|
if ( isOnce ) {
|
||||||
|
// remove listener
|
||||||
|
// remove before trigger to prevent recursion
|
||||||
|
this.off( eventName, listener );
|
||||||
|
// unset once flag
|
||||||
|
delete onceListeners[ listener ];
|
||||||
|
}
|
||||||
|
// trigger listener
|
||||||
|
listener.apply( this, args );
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.allOff = function() {
|
||||||
|
delete this._events;
|
||||||
|
delete this._onceEvents;
|
||||||
|
};
|
||||||
|
|
||||||
|
return EvEmitter;
|
||||||
|
|
||||||
|
}));
|
||||||
55
node_modules/ev-emitter/package.json
generated
vendored
Normal file
55
node_modules/ev-emitter/package.json
generated
vendored
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"_from": "ev-emitter@^1.1.1",
|
||||||
|
"_id": "ev-emitter@1.1.1",
|
||||||
|
"_inBundle": false,
|
||||||
|
"_integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
|
||||||
|
"_location": "/ev-emitter",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"type": "range",
|
||||||
|
"registry": true,
|
||||||
|
"raw": "ev-emitter@^1.1.1",
|
||||||
|
"name": "ev-emitter",
|
||||||
|
"escapedName": "ev-emitter",
|
||||||
|
"rawSpec": "^1.1.1",
|
||||||
|
"saveSpec": null,
|
||||||
|
"fetchSpec": "^1.1.1"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"/flickity",
|
||||||
|
"/unipointer"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
|
||||||
|
"_shasum": "8f18b0ce5c76a5d18017f71c0a795c65b9138f2a",
|
||||||
|
"_spec": "ev-emitter@^1.1.1",
|
||||||
|
"_where": "/var/www/html/node_modules/flickity",
|
||||||
|
"author": {
|
||||||
|
"name": "David DeSandro"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/metafizzy/ev-emitter/issues"
|
||||||
|
},
|
||||||
|
"bundleDependencies": false,
|
||||||
|
"deprecated": false,
|
||||||
|
"description": "lil' event emitter",
|
||||||
|
"directories": {
|
||||||
|
"test": "test"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/metafizzy/ev-emitter#readme",
|
||||||
|
"keywords": [
|
||||||
|
"event",
|
||||||
|
"emitter",
|
||||||
|
"pubsub"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "ev-emitter.js",
|
||||||
|
"name": "ev-emitter",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/metafizzy/ev-emitter.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "mocha test/test"
|
||||||
|
},
|
||||||
|
"version": "1.1.1"
|
||||||
|
}
|
||||||
37
node_modules/ev-emitter/sandbox/1.html
generated
vendored
Normal file
37
node_modules/ev-emitter/sandbox/1.html
generated
vendored
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>1</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>1</h1>
|
||||||
|
|
||||||
|
<script src="../ev-emitter.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var ee = new EvEmitter;
|
||||||
|
|
||||||
|
var hey = function( a, b, c ) { console.log('hey', a, b, c ) };
|
||||||
|
var ho = function( a, b, c ) { console.log('ho', a, b, c ) };
|
||||||
|
var letsGo = function( a, b, c ) { console.log('lets go', a, b, c ) };
|
||||||
|
|
||||||
|
ee.on( 'foo', hey );
|
||||||
|
ee.once( 'foo', ho );
|
||||||
|
ee.on( 'foo', letsGo );
|
||||||
|
|
||||||
|
ee.emitEvent( 'foo', [ 1, 2, 3 ] );
|
||||||
|
|
||||||
|
ee.off('foo', hey );
|
||||||
|
|
||||||
|
ee.emitEvent( 'foo', [ 4, 5, 6 ] );
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
175
node_modules/ev-emitter/test/test.js
generated
vendored
Normal file
175
node_modules/ev-emitter/test/test.js
generated
vendored
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
/* jshint node: true, unused: true, undef: true */
|
||||||
|
/* globals it */
|
||||||
|
|
||||||
|
var assert = require('assert');
|
||||||
|
var EvEmitter = require('../ev-emitter');
|
||||||
|
|
||||||
|
it( 'should emitEvent', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var didPop;
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
didPop = true;
|
||||||
|
});
|
||||||
|
emitter.emitEvent( 'pop' );
|
||||||
|
assert.ok( didPop, 'event emitted' );
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'emitEvent should pass argument to listener', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var result;
|
||||||
|
function onPop( arg ) {
|
||||||
|
result = arg;
|
||||||
|
}
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
emitter.emitEvent( 'pop', [ 1 ] );
|
||||||
|
assert.equal( result, 1, 'event emitted, arg passed' );
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'does not allow same listener to be added', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var ticks = 0;
|
||||||
|
function onPop() {
|
||||||
|
ticks++;
|
||||||
|
}
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
var _onPop = onPop;
|
||||||
|
emitter.on( 'pop', _onPop );
|
||||||
|
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
assert.equal( ticks, 1, '1 tick for same listener' );
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'should remove listener with .off()', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var ticks = 0;
|
||||||
|
function onPop() {
|
||||||
|
ticks++;
|
||||||
|
}
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
emitter.off( 'pop', onPop );
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
assert.equal( ticks, 1, '.off() removed listener' );
|
||||||
|
|
||||||
|
// reset
|
||||||
|
var ary = [];
|
||||||
|
ticks = 0;
|
||||||
|
emitter.allOff();
|
||||||
|
|
||||||
|
function onPopA() {
|
||||||
|
ticks++;
|
||||||
|
ary.push('a');
|
||||||
|
if ( ticks == 2 ) {
|
||||||
|
emitter.off( 'pop', onPopA );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function onPopB() {
|
||||||
|
ary.push('b');
|
||||||
|
}
|
||||||
|
|
||||||
|
emitter.on( 'pop', onPopA );
|
||||||
|
emitter.on( 'pop', onPopB );
|
||||||
|
emitter.emitEvent('pop'); // a,b
|
||||||
|
emitter.emitEvent('pop'); // a,b - remove onPopA
|
||||||
|
emitter.emitEvent('pop'); // b
|
||||||
|
|
||||||
|
assert.equal( ary.join(','), 'a,b,a,b,b', '.off in listener does not interfer' );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'should handle once()', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var ary = [];
|
||||||
|
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
ary.push('a');
|
||||||
|
});
|
||||||
|
emitter.once( 'pop', function() {
|
||||||
|
ary.push('b');
|
||||||
|
});
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
ary.push('c');
|
||||||
|
});
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
|
||||||
|
assert.equal( ary.join(','), 'a,b,c,a,c', 'once listener triggered once' );
|
||||||
|
|
||||||
|
// reset
|
||||||
|
emitter.allOff();
|
||||||
|
ary = [];
|
||||||
|
|
||||||
|
// add two identical but not === listeners, only do one once
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
ary.push('a');
|
||||||
|
});
|
||||||
|
emitter.once( 'pop', function() {
|
||||||
|
ary.push('a');
|
||||||
|
});
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
|
||||||
|
assert.equal( ary.join(','), 'a,a,a', 'identical listeners do not interfere with once' );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'does not infinite loop in once()', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var ticks = 0;
|
||||||
|
function onPop() {
|
||||||
|
ticks++;
|
||||||
|
if ( ticks < 4 ) {
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
emitter.once( 'pop', onPop );
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
assert.equal( ticks, 1, '1 tick with emitEvent in once' );
|
||||||
|
});
|
||||||
|
|
||||||
|
it( 'handles emitEvent with no listeners', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
assert.doesNotThrow( function() {
|
||||||
|
emitter.emitEvent( 'pop', [ 1, 2, 3 ] );
|
||||||
|
});
|
||||||
|
|
||||||
|
function onPop() {}
|
||||||
|
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
emitter.off( 'pop', onPop );
|
||||||
|
|
||||||
|
assert.doesNotThrow( function() {
|
||||||
|
emitter.emitEvent( 'pop', [ 1, 2, 3 ] );
|
||||||
|
});
|
||||||
|
|
||||||
|
emitter.on( 'pop', onPop );
|
||||||
|
emitter.emitEvent( 'pop', [ 1, 2, 3 ] );
|
||||||
|
emitter.off( 'pop', onPop );
|
||||||
|
|
||||||
|
assert.doesNotThrow( function() {
|
||||||
|
emitter.emitEvent( 'pop', [ 1, 2, 3 ] );
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it( 'removes all listeners after allOff', function() {
|
||||||
|
var emitter = new EvEmitter();
|
||||||
|
var ary = [];
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
ary.push('a');
|
||||||
|
});
|
||||||
|
emitter.on( 'pop', function() {
|
||||||
|
ary.push('b');
|
||||||
|
});
|
||||||
|
emitter.once( 'pop', function() {
|
||||||
|
ary.push('c');
|
||||||
|
});
|
||||||
|
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
emitter.allOff();
|
||||||
|
emitter.emitEvent('pop');
|
||||||
|
|
||||||
|
assert.equal( ary.join(','), 'a,b,c', 'allOff removed listeners' );
|
||||||
|
});
|
||||||
64
node_modules/fizzy-ui-utils/README.md
generated
vendored
Normal file
64
node_modules/fizzy-ui-utils/README.md
generated
vendored
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
# Fizzy UI utils
|
||||||
|
|
||||||
|
UI utility & helper functions
|
||||||
|
|
||||||
|
Used in [Flickity](http://flickity.metafizzy.co), [Isotope](http://isotope.metafizzy.co), [Masonry](http://masonry.desandro.com), [Draggabilly](http://draggabilly.desandro.com)
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Bower: `bower install fizzy-ui-utils --save`
|
||||||
|
|
||||||
|
npm: `npm install fizzy-ui-utils --save`
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
``` js
|
||||||
|
// fizzyUIUtils is the browser global
|
||||||
|
var utils = fizzyUIUtils;
|
||||||
|
|
||||||
|
// ---- ---- //
|
||||||
|
|
||||||
|
utils.extend( a, b )
|
||||||
|
// extend object
|
||||||
|
|
||||||
|
utils.modulo( num, div )
|
||||||
|
// num [modulo] div
|
||||||
|
|
||||||
|
utils.makeArray( obj )
|
||||||
|
// make array from object
|
||||||
|
|
||||||
|
utils.removeFrom( ary, obj )
|
||||||
|
// remove object from array
|
||||||
|
|
||||||
|
utils.getParent( elem, selector )
|
||||||
|
// get parent element of an element, given a selector string
|
||||||
|
|
||||||
|
utils.getQueryElement( elem )
|
||||||
|
// if elem is a string, use it as a selector and return element
|
||||||
|
|
||||||
|
Class.prototype.handleEvent = utils.handleEvent;
|
||||||
|
// enable Class.onclick when element.addEventListener( 'click', this, false )
|
||||||
|
|
||||||
|
utils.filterFindElements( elems, selector )
|
||||||
|
// iterate through elems, filter and find all elements that match selector
|
||||||
|
|
||||||
|
utils.debounceMethod( Class, methodName, threhold )
|
||||||
|
// debounce a class method
|
||||||
|
|
||||||
|
utils.docReady( callback )
|
||||||
|
// trigger callback on document ready
|
||||||
|
|
||||||
|
utils.toDashed( str )
|
||||||
|
// 'camelCaseString' -> 'camel-case-string'
|
||||||
|
|
||||||
|
utils.htmlInit( Class, namespace )
|
||||||
|
// on document ready, initialize Class on every element
|
||||||
|
// that matches js-namespace
|
||||||
|
// pass in JSON options from element's data-options-namespace attribute
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[MIT license](http://desandro.mit-license.org/). Have at it.
|
||||||
|
|
||||||
|
By [Metafizzy](http://metafizzy.co)
|
||||||
32
node_modules/fizzy-ui-utils/bower.json
generated
vendored
Normal file
32
node_modules/fizzy-ui-utils/bower.json
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "fizzy-ui-utils",
|
||||||
|
"authors": [
|
||||||
|
"David DeSandro"
|
||||||
|
],
|
||||||
|
"description": "UI utilities",
|
||||||
|
"main": "utils.js",
|
||||||
|
"dependencies": {
|
||||||
|
"desandro-matches-selector": "^2.0.0"
|
||||||
|
},
|
||||||
|
"moduleType": [
|
||||||
|
"amd",
|
||||||
|
"globals",
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"utility",
|
||||||
|
"ui"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests",
|
||||||
|
"package.json"
|
||||||
|
],
|
||||||
|
"devDependencies": {
|
||||||
|
"qunit": "~1.20.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
56
node_modules/fizzy-ui-utils/package.json
generated
vendored
Normal file
56
node_modules/fizzy-ui-utils/package.json
generated
vendored
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"_from": "fizzy-ui-utils@^2.0.7",
|
||||||
|
"_id": "fizzy-ui-utils@2.0.7",
|
||||||
|
"_inBundle": false,
|
||||||
|
"_integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
|
||||||
|
"_location": "/fizzy-ui-utils",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"type": "range",
|
||||||
|
"registry": true,
|
||||||
|
"raw": "fizzy-ui-utils@^2.0.7",
|
||||||
|
"name": "fizzy-ui-utils",
|
||||||
|
"escapedName": "fizzy-ui-utils",
|
||||||
|
"rawSpec": "^2.0.7",
|
||||||
|
"saveSpec": null,
|
||||||
|
"fetchSpec": "^2.0.7"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"/flickity"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
|
||||||
|
"_shasum": "7df45dcc4eb374a08b65d39bb9a4beedf7330505",
|
||||||
|
"_spec": "fizzy-ui-utils@^2.0.7",
|
||||||
|
"_where": "/var/www/html/node_modules/flickity",
|
||||||
|
"author": {
|
||||||
|
"name": "David DeSandro"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/metafizzy/fizzy-ui-utils/issues"
|
||||||
|
},
|
||||||
|
"bundleDependencies": false,
|
||||||
|
"dependencies": {
|
||||||
|
"desandro-matches-selector": "^2.0.0"
|
||||||
|
},
|
||||||
|
"deprecated": false,
|
||||||
|
"description": "UI utilities",
|
||||||
|
"devDependencies": {},
|
||||||
|
"homepage": "https://github.com/metafizzy/fizzy-ui-utils",
|
||||||
|
"keywords": [
|
||||||
|
"ui",
|
||||||
|
"utility",
|
||||||
|
"browser",
|
||||||
|
"DOM"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "utils.js",
|
||||||
|
"name": "fizzy-ui-utils",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/metafizzy/fizzy-ui-utils.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"version": "2.0.7"
|
||||||
|
}
|
||||||
66
node_modules/fizzy-ui-utils/test/index.html
generated
vendored
Normal file
66
node_modules/fizzy-ui-utils/test/index.html
generated
vendored
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>fizzy-ui-utils test</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
|
||||||
|
<div class="grid grid-a">
|
||||||
|
<div class="item item-a0"></div>
|
||||||
|
<div class="item item-a1"></div>
|
||||||
|
<div class="item item-a2"></div>
|
||||||
|
<div class="item item-a3">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>
|
||||||
|
<span class="span-a3"></span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-b">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
<div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="item"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p data-nice-greeter data-greeter-expected="hello world"></p>
|
||||||
|
<p data-nice-greeter='{ "greeting": "bonjour", "recipient": "mon ami" }'
|
||||||
|
data-greeter-expected="bonjour mon ami"></p>
|
||||||
|
|
||||||
|
<p class="js-nice-greeter" data-greeter-expected="hello world"></p>
|
||||||
|
<p class="js-nice-greeter"
|
||||||
|
data-nice-greeter='{ "greeting": "bonjour", "recipient": "mon ami" }'
|
||||||
|
data-greeter-expected="bonjour mon ami"></p>
|
||||||
|
|
||||||
|
<script src="../bower_components/qunit/qunit/qunit.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../utils.js"></script>
|
||||||
|
|
||||||
|
<script src="unit/make-array.js"></script>
|
||||||
|
<script src="unit/remove-from.js"></script>
|
||||||
|
<script src="unit/get-parent.js"></script>
|
||||||
|
<script src="unit/filter-find-elements.js"></script>
|
||||||
|
<script src="unit/html-init.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
node_modules/fizzy-ui-utils/test/unit/.jshintrc
generated
vendored
Normal file
9
node_modules/fizzy-ui-utils/test/unit/.jshintrc
generated
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"browser": true,
|
||||||
|
"unused": true,
|
||||||
|
"undef": true,
|
||||||
|
"globals": {
|
||||||
|
"fizzyUIUtils": false,
|
||||||
|
"QUnit": false
|
||||||
|
}
|
||||||
|
}
|
||||||
8
node_modules/fizzy-ui-utils/test/unit/filter-find-elements.js
generated
vendored
Normal file
8
node_modules/fizzy-ui-utils/test/unit/filter-find-elements.js
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
QUnit.test( 'filterFindElements', function( assert ) {
|
||||||
|
|
||||||
|
var gridB = document.querySelector('.grid-b');
|
||||||
|
|
||||||
|
var itemElems = fizzyUIUtils.filterFindElements( gridB.children, '.item' );
|
||||||
|
assert.equal( itemElems.length, 4, '4 items filter/found' );
|
||||||
|
|
||||||
|
});
|
||||||
30
node_modules/fizzy-ui-utils/test/unit/get-parent.js
generated
vendored
Normal file
30
node_modules/fizzy-ui-utils/test/unit/get-parent.js
generated
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
QUnit.test( 'getParent', function( assert ) {
|
||||||
|
|
||||||
|
var getParent = fizzyUIUtils.getParent;
|
||||||
|
|
||||||
|
var gridA = document.querySelector('.grid-a');
|
||||||
|
var itemA1 = document.querySelector('.item-a1');
|
||||||
|
|
||||||
|
var parent = getParent( itemA1, '.grid' );
|
||||||
|
assert.equal( parent, gridA, 'got grid parent from item' );
|
||||||
|
|
||||||
|
parent = getParent( document.querySelector('.span-a3'), '.grid' );
|
||||||
|
assert.equal( parent, gridA, 'got grid parent from span' );
|
||||||
|
|
||||||
|
parent = getParent( itemA1, '#qunit' );
|
||||||
|
assert.ok( parent === undefined, 'parent not tree is undefined' );
|
||||||
|
|
||||||
|
var treeNotInDocument = document.createElement('div');
|
||||||
|
treeNotInDocument.innerHTML =
|
||||||
|
'<div class="a">' +
|
||||||
|
'<div class="a1">' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
parent = getParent( treeNotInDocument.querySelector('.a1'), '.not-found' );
|
||||||
|
|
||||||
|
assert.ok(
|
||||||
|
parent === undefined,
|
||||||
|
'Parent should be `undefined` even when the given tree is not in the document'
|
||||||
|
);
|
||||||
|
|
||||||
|
});
|
||||||
23
node_modules/fizzy-ui-utils/test/unit/html-init.js
generated
vendored
Normal file
23
node_modules/fizzy-ui-utils/test/unit/html-init.js
generated
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
QUnit.test( 'htmlInit', function( assert ) {
|
||||||
|
|
||||||
|
fizzyUIUtils.htmlInit( NiceGreeter, 'niceGreeter' );
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
fizzyUIUtils.docReady( function() {
|
||||||
|
var greeterElems = document.querySelectorAll('[data-greeter-expected]');
|
||||||
|
for ( var i=0; i < greeterElems.length; i++ ) {
|
||||||
|
var greeterElem = greeterElems[i];
|
||||||
|
var attr = greeterElem.getAttribute('data-greeter-expected');
|
||||||
|
assert.equal( greeterElem.textContent, attr, 'textContent matches options' );
|
||||||
|
}
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function NiceGreeter( elem, options ) {
|
||||||
|
this.element = elem;
|
||||||
|
var greeting = options && options.greeting || 'hello';
|
||||||
|
var recipient = options && options.recipient || 'world';
|
||||||
|
this.element.textContent = greeting + ' ' + recipient;
|
||||||
|
}
|
||||||
34
node_modules/fizzy-ui-utils/test/unit/make-array.js
generated
vendored
Normal file
34
node_modules/fizzy-ui-utils/test/unit/make-array.js
generated
vendored
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
QUnit.test( 'makeArray', function( assert ) {
|
||||||
|
|
||||||
|
var makeArray = fizzyUIUtils.makeArray;
|
||||||
|
|
||||||
|
var aryA = [ 0, 1, 2 ];
|
||||||
|
var aryB = makeArray( aryA );
|
||||||
|
assert.deepEqual( aryA, aryB, 'makeArray on array returns same array' );
|
||||||
|
|
||||||
|
var itemElems = document.querySelectorAll('.grid-a .item');
|
||||||
|
var items = makeArray( itemElems );
|
||||||
|
assert.ok( Array.isArray( items ), 'makeArray on querySelectorAll NodeList' );
|
||||||
|
assert.equal( items.length, itemElems.length, 'length matches' );
|
||||||
|
|
||||||
|
var grids = makeArray( document.querySelector('.grid-a') );
|
||||||
|
assert.ok( Array.isArray( grids ), 'makeArray on single element is array' );
|
||||||
|
assert.equal( grids.length, 1, 'length = 1' );
|
||||||
|
|
||||||
|
var empty = makeArray();
|
||||||
|
assert.deepEqual( empty, [], 'makeArray on undefined is empty array' );
|
||||||
|
assert.equal( empty.length, 0, 'length = 0' );
|
||||||
|
assert.ok( empty[0] === undefined, '[0] is undefined' );
|
||||||
|
|
||||||
|
// isotope#1235
|
||||||
|
var aryC = makeArray('foo');
|
||||||
|
assert.deepEqual( aryC, [ 'foo' ], 'string turns to single array item' );
|
||||||
|
|
||||||
|
var nullAry = makeArray( null );
|
||||||
|
assert.deepEqual( nullAry, [], 'makeArray(null) returns empty array' );
|
||||||
|
|
||||||
|
var falseAry = makeArray( false );
|
||||||
|
assert.deepEqual( falseAry, [ false ], 'makeArray(false) returns array with false' );
|
||||||
|
assert.equal( falseAry.length, 1, 'falseyAry has 1 item' );
|
||||||
|
|
||||||
|
});
|
||||||
14
node_modules/fizzy-ui-utils/test/unit/remove-from.js
generated
vendored
Normal file
14
node_modules/fizzy-ui-utils/test/unit/remove-from.js
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
QUnit.test( 'removeFrom', function( assert ) {
|
||||||
|
|
||||||
|
var removeFrom = fizzyUIUtils.removeFrom;
|
||||||
|
|
||||||
|
var ary = [ 0, 1, 2, 3, 4, 5, 6 ];
|
||||||
|
var len = ary.length;
|
||||||
|
|
||||||
|
removeFrom( ary, 2 );
|
||||||
|
var ary2 = [ 0, 1, 3, 4, 5, 6 ];
|
||||||
|
assert.deepEqual( ary, ary2, '2 removed' );
|
||||||
|
removeFrom( ary, 8 );
|
||||||
|
assert.deepEqual( ary, ary2, '8 not removed' );
|
||||||
|
|
||||||
|
});
|
||||||
241
node_modules/fizzy-ui-utils/utils.js
generated
vendored
Normal file
241
node_modules/fizzy-ui-utils/utils.js
generated
vendored
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
/**
|
||||||
|
* Fizzy UI utils v2.0.7
|
||||||
|
* MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*jshint browser: true, undef: true, unused: true, strict: true */
|
||||||
|
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/*jshint strict: false */ /*globals define, module, require */
|
||||||
|
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'desandro-matches-selector/matches-selector'
|
||||||
|
], function( matchesSelector ) {
|
||||||
|
return factory( window, matchesSelector );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('desandro-matches-selector')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.fizzyUIUtils = factory(
|
||||||
|
window,
|
||||||
|
window.matchesSelector
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, matchesSelector ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var utils = {};
|
||||||
|
|
||||||
|
// ----- extend ----- //
|
||||||
|
|
||||||
|
// extends objects
|
||||||
|
utils.extend = function( a, b ) {
|
||||||
|
for ( var prop in b ) {
|
||||||
|
a[ prop ] = b[ prop ];
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- modulo ----- //
|
||||||
|
|
||||||
|
utils.modulo = function( num, div ) {
|
||||||
|
return ( ( num % div ) + div ) % div;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- makeArray ----- //
|
||||||
|
|
||||||
|
var arraySlice = Array.prototype.slice;
|
||||||
|
|
||||||
|
// turn element or nodeList into an array
|
||||||
|
utils.makeArray = function( obj ) {
|
||||||
|
if ( Array.isArray( obj ) ) {
|
||||||
|
// use object if already an array
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
// return empty array if undefined or null. #6
|
||||||
|
if ( obj === null || obj === undefined ) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
|
||||||
|
if ( isArrayLike ) {
|
||||||
|
// convert nodeList to array
|
||||||
|
return arraySlice.call( obj );
|
||||||
|
}
|
||||||
|
|
||||||
|
// array of single index
|
||||||
|
return [ obj ];
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- removeFrom ----- //
|
||||||
|
|
||||||
|
utils.removeFrom = function( ary, obj ) {
|
||||||
|
var index = ary.indexOf( obj );
|
||||||
|
if ( index != -1 ) {
|
||||||
|
ary.splice( index, 1 );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- getParent ----- //
|
||||||
|
|
||||||
|
utils.getParent = function( elem, selector ) {
|
||||||
|
while ( elem.parentNode && elem != document.body ) {
|
||||||
|
elem = elem.parentNode;
|
||||||
|
if ( matchesSelector( elem, selector ) ) {
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- getQueryElement ----- //
|
||||||
|
|
||||||
|
// use element as selector string
|
||||||
|
utils.getQueryElement = function( elem ) {
|
||||||
|
if ( typeof elem == 'string' ) {
|
||||||
|
return document.querySelector( elem );
|
||||||
|
}
|
||||||
|
return elem;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- handleEvent ----- //
|
||||||
|
|
||||||
|
// enable .ontype to trigger from .addEventListener( elem, 'type' )
|
||||||
|
utils.handleEvent = function( event ) {
|
||||||
|
var method = 'on' + event.type;
|
||||||
|
if ( this[ method ] ) {
|
||||||
|
this[ method ]( event );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- filterFindElements ----- //
|
||||||
|
|
||||||
|
utils.filterFindElements = function( elems, selector ) {
|
||||||
|
// make array of elems
|
||||||
|
elems = utils.makeArray( elems );
|
||||||
|
var ffElems = [];
|
||||||
|
|
||||||
|
elems.forEach( function( elem ) {
|
||||||
|
// check that elem is an actual element
|
||||||
|
if ( !( elem instanceof HTMLElement ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// add elem if no selector
|
||||||
|
if ( !selector ) {
|
||||||
|
ffElems.push( elem );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// filter & find items if we have a selector
|
||||||
|
// filter
|
||||||
|
if ( matchesSelector( elem, selector ) ) {
|
||||||
|
ffElems.push( elem );
|
||||||
|
}
|
||||||
|
// find children
|
||||||
|
var childElems = elem.querySelectorAll( selector );
|
||||||
|
// concat childElems to filterFound array
|
||||||
|
for ( var i=0; i < childElems.length; i++ ) {
|
||||||
|
ffElems.push( childElems[i] );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return ffElems;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- debounceMethod ----- //
|
||||||
|
|
||||||
|
utils.debounceMethod = function( _class, methodName, threshold ) {
|
||||||
|
threshold = threshold || 100;
|
||||||
|
// original method
|
||||||
|
var method = _class.prototype[ methodName ];
|
||||||
|
var timeoutName = methodName + 'Timeout';
|
||||||
|
|
||||||
|
_class.prototype[ methodName ] = function() {
|
||||||
|
var timeout = this[ timeoutName ];
|
||||||
|
clearTimeout( timeout );
|
||||||
|
|
||||||
|
var args = arguments;
|
||||||
|
var _this = this;
|
||||||
|
this[ timeoutName ] = setTimeout( function() {
|
||||||
|
method.apply( _this, args );
|
||||||
|
delete _this[ timeoutName ];
|
||||||
|
}, threshold );
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- docReady ----- //
|
||||||
|
|
||||||
|
utils.docReady = function( callback ) {
|
||||||
|
var readyState = document.readyState;
|
||||||
|
if ( readyState == 'complete' || readyState == 'interactive' ) {
|
||||||
|
// do async to allow for other scripts to run. metafizzy/flickity#441
|
||||||
|
setTimeout( callback );
|
||||||
|
} else {
|
||||||
|
document.addEventListener( 'DOMContentLoaded', callback );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- htmlInit ----- //
|
||||||
|
|
||||||
|
// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
|
||||||
|
utils.toDashed = function( str ) {
|
||||||
|
return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
|
||||||
|
return $1 + '-' + $2;
|
||||||
|
}).toLowerCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
var console = window.console;
|
||||||
|
/**
|
||||||
|
* allow user to initialize classes via [data-namespace] or .js-namespace class
|
||||||
|
* htmlInit( Widget, 'widgetName' )
|
||||||
|
* options are parsed from data-namespace-options
|
||||||
|
*/
|
||||||
|
utils.htmlInit = function( WidgetClass, namespace ) {
|
||||||
|
utils.docReady( function() {
|
||||||
|
var dashedNamespace = utils.toDashed( namespace );
|
||||||
|
var dataAttr = 'data-' + dashedNamespace;
|
||||||
|
var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
|
||||||
|
var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
|
||||||
|
var elems = utils.makeArray( dataAttrElems )
|
||||||
|
.concat( utils.makeArray( jsDashElems ) );
|
||||||
|
var dataOptionsAttr = dataAttr + '-options';
|
||||||
|
var jQuery = window.jQuery;
|
||||||
|
|
||||||
|
elems.forEach( function( elem ) {
|
||||||
|
var attr = elem.getAttribute( dataAttr ) ||
|
||||||
|
elem.getAttribute( dataOptionsAttr );
|
||||||
|
var options;
|
||||||
|
try {
|
||||||
|
options = attr && JSON.parse( attr );
|
||||||
|
} catch ( error ) {
|
||||||
|
// log error, do not initialize
|
||||||
|
if ( console ) {
|
||||||
|
console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
|
||||||
|
': ' + error );
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// initialize
|
||||||
|
var instance = new WidgetClass( elem, options );
|
||||||
|
// make available via $().data('namespace')
|
||||||
|
if ( jQuery ) {
|
||||||
|
jQuery.data( elem, namespace, instance );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
return utils;
|
||||||
|
|
||||||
|
}));
|
||||||
BIN
node_modules/flickity/.DS_Store
generated
vendored
Normal file
BIN
node_modules/flickity/.DS_Store
generated
vendored
Normal file
Binary file not shown.
32
node_modules/flickity/.github/contributing.md
generated
vendored
Normal file
32
node_modules/flickity/.github/contributing.md
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
## Submitting issues
|
||||||
|
|
||||||
|
### Reduced test case required
|
||||||
|
|
||||||
|
All bug reports and problem issues require a [**reduced test case**](https://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen demos](https://codepen.io/desandro/pens/tags/?grid_type=list&selected_tag=flickity-docs&sort_order=asc) from [the docs](https://flickity.metafizzy.co).
|
||||||
|
|
||||||
|
**CodePens**
|
||||||
|
|
||||||
|
+ [Basic](https://codepen.io/desandro/pen/azqbop)
|
||||||
|
+ [imagesLoaded](https://codepen.io/desandro/pen/MYQWEe)
|
||||||
|
+ [lazyLoad](https://codepen.io/desandro/pen/vOeGzL)
|
||||||
|
+ [autoPlay](https://codepen.io/desandro/pen/RNQwaB)
|
||||||
|
|
||||||
|
**Test cases**
|
||||||
|
|
||||||
|
+ A reduced test case clearly demonstrates the bug or issue.
|
||||||
|
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
|
||||||
|
+ A link to your production site is **not** a reduced test case.
|
||||||
|
|
||||||
|
Providing a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help me verify and debug the problem. They help others understand the problem. Without a reduced test case, your issue may be closed.
|
||||||
|
|
||||||
|
## Pull requests
|
||||||
|
|
||||||
|
Contributions are welcome!
|
||||||
|
|
||||||
|
+ **For typos and one-line fixes,** send those right in.
|
||||||
|
+ **For larger features,** open an issue before starting any significant work. Let's discuss to see how your feature fits within Flickity's vision.
|
||||||
|
+ **Follow the code style.** Spaces in brackets, semicolons, trailing commas.
|
||||||
|
+ **Do not edit `dist/` files.** Make your edits to source files in `js/` and `css/`.
|
||||||
|
+ **Do not run `gulp` to update `dist/` files.** I'll take care of this when I create a new release.
|
||||||
|
|
||||||
|
Your code will be used as part of a commercial product if merged. By submitting a Pull Request, you are giving your consent for your code to be integrated into Flickity as part of a commercial product.
|
||||||
3
node_modules/flickity/.github/issue_template.md
generated
vendored
Normal file
3
node_modules/flickity/.github/issue_template.md
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by forking any one of the CodePen examples from the docs. See guidelines link above. -->
|
||||||
|
|
||||||
|
**Test case:** https://codepen.io/desandro/pen/azqbop
|
||||||
12
node_modules/flickity/.jshintrc
generated
vendored
Normal file
12
node_modules/flickity/.jshintrc
generated
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"browser": true,
|
||||||
|
"devel": false,
|
||||||
|
"strict": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"predef": {
|
||||||
|
"define": false,
|
||||||
|
"module": false,
|
||||||
|
"require": false
|
||||||
|
}
|
||||||
|
}
|
||||||
150
node_modules/flickity/README.md
generated
vendored
Normal file
150
node_modules/flickity/README.md
generated
vendored
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
# Flickity
|
||||||
|
|
||||||
|
_Touch, responsive, flickable carousels_
|
||||||
|
|
||||||
|
See [flickity.metafizzy.co](https://flickity.metafizzy.co) for complete docs and demos.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
### Download
|
||||||
|
|
||||||
|
+ CSS:
|
||||||
|
- [flickity.min.css](https://unpkg.com/flickity@2/dist/flickity.min.css) minified, or
|
||||||
|
- [flickity.css](https://unpkg.com/flickity@2/dist/flickity.css) un-minified
|
||||||
|
+ JavaScript:
|
||||||
|
- [flickity.pkgd.min.js](https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js) minified, or
|
||||||
|
- [flickity.pkgd.js](https://unpkg.com/flickity@2/dist/flickity.pkgd.js) un-minified
|
||||||
|
|
||||||
|
### CDN
|
||||||
|
|
||||||
|
Link directly to Flickity files on [unpkg](https://unpkg.com).
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Package managers
|
||||||
|
|
||||||
|
Bower: `bower install flickity --save`
|
||||||
|
|
||||||
|
npm: `npm install flickity --save`
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
### Commercial license
|
||||||
|
|
||||||
|
If you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Flickity Commercial License at [flickity.metafizzy.co](https://flickity.metafizzy.co/#commercial-license)
|
||||||
|
|
||||||
|
### Open source license
|
||||||
|
|
||||||
|
If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Flickity under the terms of the GPLv3.
|
||||||
|
|
||||||
|
[Read more about Flickity's license](https://flickity.metafizzy.co/license.html).
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Flickity works with a container element and a set of child cell elements
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<div class="carousel">
|
||||||
|
<div class="carousel-cell">...</div>
|
||||||
|
<div class="carousel-cell">...</div>
|
||||||
|
<div class="carousel-cell">...</div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
``` js
|
||||||
|
var flky = new Flickity( '.gallery', {
|
||||||
|
// options, defaults listed
|
||||||
|
|
||||||
|
accessibility: true,
|
||||||
|
// enable keyboard navigation, pressing left & right keys
|
||||||
|
|
||||||
|
adaptiveHeight: false,
|
||||||
|
// set carousel height to the selected slide
|
||||||
|
|
||||||
|
autoPlay: false,
|
||||||
|
// advances to the next cell
|
||||||
|
// if true, default is 3 seconds
|
||||||
|
// or set time between advances in milliseconds
|
||||||
|
// i.e. `autoPlay: 1000` will advance every 1 second
|
||||||
|
|
||||||
|
cellAlign: 'center',
|
||||||
|
// alignment of cells, 'center', 'left', or 'right'
|
||||||
|
// or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
|
||||||
|
|
||||||
|
cellSelector: undefined,
|
||||||
|
// specify selector for cell elements
|
||||||
|
|
||||||
|
contain: false,
|
||||||
|
// will contain cells to container
|
||||||
|
// so no excess scroll at beginning or end
|
||||||
|
// has no effect if wrapAround is enabled
|
||||||
|
|
||||||
|
draggable: '>1',
|
||||||
|
// enables dragging & flicking
|
||||||
|
// if at least 2 cells
|
||||||
|
|
||||||
|
dragThreshold: 3,
|
||||||
|
// number of pixels a user must scroll horizontally to start dragging
|
||||||
|
// increase to allow more room for vertical scroll for touch devices
|
||||||
|
|
||||||
|
freeScroll: false,
|
||||||
|
// enables content to be freely scrolled and flicked
|
||||||
|
// without aligning cells
|
||||||
|
|
||||||
|
friction: 0.2,
|
||||||
|
// smaller number = easier to flick farther
|
||||||
|
|
||||||
|
groupCells: false,
|
||||||
|
// group cells together in slides
|
||||||
|
|
||||||
|
initialIndex: 0,
|
||||||
|
// zero-based index of the initial selected cell
|
||||||
|
|
||||||
|
lazyLoad: true,
|
||||||
|
// enable lazy-loading images
|
||||||
|
// set img data-flickity-lazyload="src.jpg"
|
||||||
|
// set to number to load images adjacent cells
|
||||||
|
|
||||||
|
percentPosition: true,
|
||||||
|
// sets positioning in percent values, rather than pixels
|
||||||
|
// Enable if items have percent widths
|
||||||
|
// Disable if items have pixel widths, like images
|
||||||
|
|
||||||
|
prevNextButtons: true,
|
||||||
|
// creates and enables buttons to click to previous & next cells
|
||||||
|
|
||||||
|
pageDots: true,
|
||||||
|
// create and enable page dots
|
||||||
|
|
||||||
|
resize: true,
|
||||||
|
// listens to window resize events to adjust size & positions
|
||||||
|
|
||||||
|
rightToLeft: false,
|
||||||
|
// enables right-to-left layout
|
||||||
|
|
||||||
|
setGallerySize: true,
|
||||||
|
// sets the height of gallery
|
||||||
|
// disable if gallery already has height set with CSS
|
||||||
|
|
||||||
|
watchCSS: false,
|
||||||
|
// watches the content of :after of the element
|
||||||
|
// activates if #element:after { content: 'flickity' }
|
||||||
|
|
||||||
|
wrapAround: false
|
||||||
|
// at end of cells, wraps-around to first for infinite scrolling
|
||||||
|
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
By [Metafizzy 🌈🐻](https://metafizzy.co)
|
||||||
43
node_modules/flickity/bower.json
generated
vendored
Normal file
43
node_modules/flickity/bower.json
generated
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "flickity",
|
||||||
|
"description": "Touch, responsive, flickable carousels",
|
||||||
|
"main": [
|
||||||
|
"js/index.js",
|
||||||
|
"css/flickity.css"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"desandro-matches-selector": "^2.0.0",
|
||||||
|
"ev-emitter": "^1.0.2",
|
||||||
|
"fizzy-ui-utils": "^2.0.0",
|
||||||
|
"get-size": "^2.0.0",
|
||||||
|
"unidragger": "^2.3.0",
|
||||||
|
"unipointer": "^2.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"flickity-imagesloaded": "^2.0.0",
|
||||||
|
"flickity-as-nav-for": "^2.0.0",
|
||||||
|
"jquery-bridget": "^2.0.0",
|
||||||
|
"qunit": "^2.0.0"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"gallery",
|
||||||
|
"carousel",
|
||||||
|
"touch"
|
||||||
|
],
|
||||||
|
"homepage": "https://flickity.metafizzy.co",
|
||||||
|
"authors": [
|
||||||
|
"Metafizzy"
|
||||||
|
],
|
||||||
|
"license": "GPL-3.0",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests",
|
||||||
|
"sandbox",
|
||||||
|
"package.json",
|
||||||
|
"gulpfile.js",
|
||||||
|
"notes.md"
|
||||||
|
]
|
||||||
|
}
|
||||||
137
node_modules/flickity/css/flickity.css
generated
vendored
Normal file
137
node_modules/flickity/css/flickity.css
generated
vendored
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
/*! Flickity v2.2.1
|
||||||
|
https://flickity.metafizzy.co
|
||||||
|
---------------------------------------------- */
|
||||||
|
|
||||||
|
.flickity-enabled {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled:focus { outline: none; }
|
||||||
|
|
||||||
|
.flickity-viewport {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-slider {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* draggable */
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable .flickity-viewport {
|
||||||
|
cursor: move;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- flickity-button ---- */
|
||||||
|
|
||||||
|
.flickity-button {
|
||||||
|
position: absolute;
|
||||||
|
background: hsla(0, 0%, 100%, 0.75);
|
||||||
|
border: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:hover {
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 5px #19F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: auto;
|
||||||
|
/* prevent disabled button from capturing pointer up event. #716 */
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button-icon {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- previous/next buttons ---- */
|
||||||
|
|
||||||
|
.flickity-prev-next-button {
|
||||||
|
top: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* vertically center */
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-prev-next-button.previous { left: 10px; }
|
||||||
|
.flickity-prev-next-button.next { right: 10px; }
|
||||||
|
/* right to left */
|
||||||
|
.flickity-rtl .flickity-prev-next-button.previous {
|
||||||
|
left: auto;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.flickity-rtl .flickity-prev-next-button.next {
|
||||||
|
right: auto;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-prev-next-button .flickity-button-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 20%;
|
||||||
|
top: 20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- page dots ---- */
|
||||||
|
|
||||||
|
.flickity-page-dots {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: -25px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-rtl .flickity-page-dots { direction: rtl; }
|
||||||
|
|
||||||
|
.flickity-page-dots .dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 8px;
|
||||||
|
background: #333;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.25;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-page-dots .dot.is-selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
137
node_modules/flickity/dist/flickity.css
generated
vendored
Normal file
137
node_modules/flickity/dist/flickity.css
generated
vendored
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
/*! Flickity v2.2.1
|
||||||
|
https://flickity.metafizzy.co
|
||||||
|
---------------------------------------------- */
|
||||||
|
|
||||||
|
.flickity-enabled {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled:focus { outline: none; }
|
||||||
|
|
||||||
|
.flickity-viewport {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-slider {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* draggable */
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable .flickity-viewport {
|
||||||
|
cursor: move;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- flickity-button ---- */
|
||||||
|
|
||||||
|
.flickity-button {
|
||||||
|
position: absolute;
|
||||||
|
background: hsla(0, 0%, 100%, 0.75);
|
||||||
|
border: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:hover {
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 5px #19F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: auto;
|
||||||
|
/* prevent disabled button from capturing pointer up event. #716 */
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-button-icon {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- previous/next buttons ---- */
|
||||||
|
|
||||||
|
.flickity-prev-next-button {
|
||||||
|
top: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* vertically center */
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-prev-next-button.previous { left: 10px; }
|
||||||
|
.flickity-prev-next-button.next { right: 10px; }
|
||||||
|
/* right to left */
|
||||||
|
.flickity-rtl .flickity-prev-next-button.previous {
|
||||||
|
left: auto;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.flickity-rtl .flickity-prev-next-button.next {
|
||||||
|
right: auto;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-prev-next-button .flickity-button-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 20%;
|
||||||
|
top: 20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- page dots ---- */
|
||||||
|
|
||||||
|
.flickity-page-dots {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: -25px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-rtl .flickity-page-dots { direction: rtl; }
|
||||||
|
|
||||||
|
.flickity-page-dots .dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 8px;
|
||||||
|
background: #333;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.25;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-page-dots .dot.is-selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
4
node_modules/flickity/dist/flickity.min.css
generated
vendored
Normal file
4
node_modules/flickity/dist/flickity.min.css
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/*! Flickity v2.2.1
|
||||||
|
https://flickity.metafizzy.co
|
||||||
|
---------------------------------------------- */
|
||||||
|
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
|
||||||
4586
node_modules/flickity/dist/flickity.pkgd.js
generated
vendored
Normal file
4586
node_modules/flickity/dist/flickity.pkgd.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
12
node_modules/flickity/dist/flickity.pkgd.min.js
generated
vendored
Normal file
12
node_modules/flickity/dist/flickity.pkgd.min.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
161
node_modules/flickity/gulpfile.js
generated
vendored
Normal file
161
node_modules/flickity/gulpfile.js
generated
vendored
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
/*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('js/**/*.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',
|
||||||
|
gulp.parallel('hint-js', 'hint-test', 'hint-task', 'jsonlint' ) );
|
||||||
|
|
||||||
|
// -------------------------- RequireJS makes pkgd -------------------------- //
|
||||||
|
|
||||||
|
var gutil = require('gulp-util');
|
||||||
|
var chalk = require('chalk');
|
||||||
|
var rjsOptimize = require('gulp-requirejs-optimize');
|
||||||
|
|
||||||
|
// regex for banner comment
|
||||||
|
var reBannerComment = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*');
|
||||||
|
|
||||||
|
function getBanner() {
|
||||||
|
var src = fs.readFileSync( 'js/index.js', 'utf8' );
|
||||||
|
var matches = src.match( reBannerComment );
|
||||||
|
var banner = matches[0].replace( 'Flickity', 'Flickity 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('js/index.js')
|
||||||
|
.pipe( rjsOptimize({
|
||||||
|
baseUrl: 'bower_components',
|
||||||
|
optimize: 'none',
|
||||||
|
include: [
|
||||||
|
'jquery-bridget/jquery-bridget',
|
||||||
|
'flickity/js/index',
|
||||||
|
'flickity-as-nav-for/as-nav-for',
|
||||||
|
'flickity-imagesloaded/flickity-imagesloaded'
|
||||||
|
],
|
||||||
|
paths: {
|
||||||
|
flickity: '../',
|
||||||
|
jquery: 'empty:'
|
||||||
|
}
|
||||||
|
}) )
|
||||||
|
// remove named module
|
||||||
|
.pipe( replace( "'flickity-imagesloaded/flickity-imagesloaded',", '' ) )
|
||||||
|
// add banner
|
||||||
|
.pipe( addBanner( banner ) )
|
||||||
|
.pipe( rename('flickity.pkgd.js') )
|
||||||
|
.pipe( gulp.dest('dist') );
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ----- uglify ----- //
|
||||||
|
|
||||||
|
var uglify = require('gulp-uglify');
|
||||||
|
|
||||||
|
gulp.task( 'uglify', function() {
|
||||||
|
var banner = getBanner();
|
||||||
|
return gulp.src('dist/flickity.pkgd.js')
|
||||||
|
.pipe( uglify() )
|
||||||
|
// add banner
|
||||||
|
.pipe( addBanner( banner ) )
|
||||||
|
.pipe( rename('flickity.pkgd.min.js') )
|
||||||
|
.pipe( gulp.dest('dist') );
|
||||||
|
});
|
||||||
|
|
||||||
|
// ----- css ----- //
|
||||||
|
|
||||||
|
var cleanCSS = require('gulp-clean-css');
|
||||||
|
|
||||||
|
gulp.task( 'css', function() {
|
||||||
|
return gulp.src('css/flickity.css')
|
||||||
|
// copy to dist
|
||||||
|
.pipe( gulp.dest('dist') )
|
||||||
|
// minify
|
||||||
|
.pipe( cleanCSS({ advanced: false }) )
|
||||||
|
.pipe( rename('flickity.min.css') )
|
||||||
|
.pipe( replace( '*/', '*/\n' ) )
|
||||||
|
.pipe( gulp.dest('dist') );
|
||||||
|
});
|
||||||
|
|
||||||
|
// ----- version ----- //
|
||||||
|
|
||||||
|
// set version in source files
|
||||||
|
|
||||||
|
var minimist = require('minimist');
|
||||||
|
var merge2 = require('merge2');
|
||||||
|
|
||||||
|
// 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 ) );
|
||||||
|
|
||||||
|
function sourceReplace() {
|
||||||
|
return replace( /Flickity v\d\.\d+\.\d+/, 'Flickity v' + version );
|
||||||
|
}
|
||||||
|
|
||||||
|
var indexJs = gulp.src('js/index.js')
|
||||||
|
.pipe( sourceReplace() )
|
||||||
|
.pipe( gulp.dest('js') );
|
||||||
|
|
||||||
|
var css = gulp.src('css/flickity.css')
|
||||||
|
.pipe( sourceReplace() )
|
||||||
|
.pipe( gulp.dest('css') );
|
||||||
|
|
||||||
|
var json = gulp.src('package.json')
|
||||||
|
.pipe( replace( /"version": "\d\.\d+\.\d+"/, '"version": "' + version + '"' ) )
|
||||||
|
.pipe( gulp.dest('.') );
|
||||||
|
|
||||||
|
// create a merged stream for array of streams
|
||||||
|
return merge2([ indexJs, css, json ]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ----- default ----- //
|
||||||
|
|
||||||
|
gulp.task( 'default', gulp.parallel(
|
||||||
|
'hint',
|
||||||
|
'css',
|
||||||
|
gulp.series( 'requirejs', 'uglify' )
|
||||||
|
));
|
||||||
BIN
node_modules/flickity/js/.DS_Store
generated
vendored
Normal file
BIN
node_modules/flickity/js/.DS_Store
generated
vendored
Normal file
Binary file not shown.
161
node_modules/flickity/js/add-remove-cell.js
generated
vendored
Normal file
161
node_modules/flickity/js/add-remove-cell.js
generated
vendored
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
// add, remove cell
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( Flickity, utils ) {
|
||||||
|
return factory( window, Flickity, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('./flickity'),
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
factory(
|
||||||
|
window,
|
||||||
|
window.Flickity,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, Flickity, utils ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// append cells to a document fragment
|
||||||
|
function getCellsFragment( cells ) {
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
cells.forEach( function( cell ) {
|
||||||
|
fragment.appendChild( cell.element );
|
||||||
|
});
|
||||||
|
return fragment;
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------- add/remove cell prototype -------------------------- //
|
||||||
|
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Insert, prepend, or append cells
|
||||||
|
* @param {Element, Array, NodeList} elems
|
||||||
|
* @param {Integer} index
|
||||||
|
*/
|
||||||
|
proto.insert = function( elems, index ) {
|
||||||
|
var cells = this._makeCells( elems );
|
||||||
|
if ( !cells || !cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var len = this.cells.length;
|
||||||
|
// default to append
|
||||||
|
index = index === undefined ? len : index;
|
||||||
|
// add cells with document fragment
|
||||||
|
var fragment = getCellsFragment( cells );
|
||||||
|
// append to slider
|
||||||
|
var isAppend = index == len;
|
||||||
|
if ( isAppend ) {
|
||||||
|
this.slider.appendChild( fragment );
|
||||||
|
} else {
|
||||||
|
var insertCellElement = this.cells[ index ].element;
|
||||||
|
this.slider.insertBefore( fragment, insertCellElement );
|
||||||
|
}
|
||||||
|
// add to this.cells
|
||||||
|
if ( index === 0 ) {
|
||||||
|
// prepend, add to start
|
||||||
|
this.cells = cells.concat( this.cells );
|
||||||
|
} else if ( isAppend ) {
|
||||||
|
// append, add to end
|
||||||
|
this.cells = this.cells.concat( cells );
|
||||||
|
} else {
|
||||||
|
// insert in this.cells
|
||||||
|
var endCells = this.cells.splice( index, len - index );
|
||||||
|
this.cells = this.cells.concat( cells ).concat( endCells );
|
||||||
|
}
|
||||||
|
|
||||||
|
this._sizeCells( cells );
|
||||||
|
this.cellChange( index, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.append = function( elems ) {
|
||||||
|
this.insert( elems, this.cells.length );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.prepend = function( elems ) {
|
||||||
|
this.insert( elems, 0 );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove cells
|
||||||
|
* @param {Element, Array, NodeList} elems
|
||||||
|
*/
|
||||||
|
proto.remove = function( elems ) {
|
||||||
|
var cells = this.getCells( elems );
|
||||||
|
if ( !cells || !cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var minCellIndex = this.cells.length - 1;
|
||||||
|
// remove cells from collection & DOM
|
||||||
|
cells.forEach( function( cell ) {
|
||||||
|
cell.remove();
|
||||||
|
var index = this.cells.indexOf( cell );
|
||||||
|
minCellIndex = Math.min( index, minCellIndex );
|
||||||
|
utils.removeFrom( this.cells, cell );
|
||||||
|
}, this );
|
||||||
|
|
||||||
|
this.cellChange( minCellIndex, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* logic to be run after a cell's size changes
|
||||||
|
* @param {Element} elem - cell's element
|
||||||
|
*/
|
||||||
|
proto.cellSizeChange = function( elem ) {
|
||||||
|
var cell = this.getCell( elem );
|
||||||
|
if ( !cell ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
cell.getSize();
|
||||||
|
|
||||||
|
var index = this.cells.indexOf( cell );
|
||||||
|
this.cellChange( index );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* logic any time a cell is changed: added, removed, or size changed
|
||||||
|
* @param {Integer} changedCellIndex - index of the changed cell, optional
|
||||||
|
*/
|
||||||
|
proto.cellChange = function( changedCellIndex, isPositioningSlider ) {
|
||||||
|
var prevSelectedElem = this.selectedElement;
|
||||||
|
this._positionCells( changedCellIndex );
|
||||||
|
this._getWrapShiftCells();
|
||||||
|
this.setGallerySize();
|
||||||
|
// update selectedIndex
|
||||||
|
// try to maintain position & select previous selected element
|
||||||
|
var cell = this.getCell( prevSelectedElem );
|
||||||
|
if ( cell ) {
|
||||||
|
this.selectedIndex = this.getCellSlideIndex( cell );
|
||||||
|
}
|
||||||
|
this.selectedIndex = Math.min( this.slides.length - 1, this.selectedIndex );
|
||||||
|
|
||||||
|
this.emitEvent( 'cellChange', [ changedCellIndex ] );
|
||||||
|
// position slider
|
||||||
|
this.select( this.selectedIndex );
|
||||||
|
// do not position slider after lazy load
|
||||||
|
if ( isPositioningSlider ) {
|
||||||
|
this.positionSliderAtSelected();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
201
node_modules/flickity/js/animate.js
generated
vendored
Normal file
201
node_modules/flickity/js/animate.js
generated
vendored
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
// animate
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( utils ) {
|
||||||
|
return factory( window, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.Flickity = window.Flickity || {};
|
||||||
|
window.Flickity.animatePrototype = factory(
|
||||||
|
window,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, utils ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// -------------------------- animate -------------------------- //
|
||||||
|
|
||||||
|
var proto = {};
|
||||||
|
|
||||||
|
proto.startAnimation = function() {
|
||||||
|
if ( this.isAnimating ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isAnimating = true;
|
||||||
|
this.restingFrames = 0;
|
||||||
|
this.animate();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.animate = function() {
|
||||||
|
this.applyDragForce();
|
||||||
|
this.applySelectedAttraction();
|
||||||
|
|
||||||
|
var previousX = this.x;
|
||||||
|
|
||||||
|
this.integratePhysics();
|
||||||
|
this.positionSlider();
|
||||||
|
this.settle( previousX );
|
||||||
|
// animate next frame
|
||||||
|
if ( this.isAnimating ) {
|
||||||
|
var _this = this;
|
||||||
|
requestAnimationFrame( function animateFrame() {
|
||||||
|
_this.animate();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.positionSlider = function() {
|
||||||
|
var x = this.x;
|
||||||
|
// wrap position around
|
||||||
|
if ( this.options.wrapAround && this.cells.length > 1 ) {
|
||||||
|
x = utils.modulo( x, this.slideableWidth );
|
||||||
|
x = x - this.slideableWidth;
|
||||||
|
this.shiftWrapCells( x );
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setTranslateX( x, this.isAnimating );
|
||||||
|
this.dispatchScrollEvent();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.setTranslateX = function( x, is3d ) {
|
||||||
|
x += this.cursorPosition;
|
||||||
|
// reverse if right-to-left and using transform
|
||||||
|
x = this.options.rightToLeft ? -x : x;
|
||||||
|
var translateX = this.getPositionValue( x );
|
||||||
|
// use 3D tranforms for hardware acceleration on iOS
|
||||||
|
// but use 2D when settled, for better font-rendering
|
||||||
|
this.slider.style.transform = is3d ?
|
||||||
|
'translate3d(' + translateX + ',0,0)' : 'translateX(' + translateX + ')';
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.dispatchScrollEvent = function() {
|
||||||
|
var firstSlide = this.slides[0];
|
||||||
|
if ( !firstSlide ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var positionX = -this.x - firstSlide.target;
|
||||||
|
var progress = positionX / this.slidesWidth;
|
||||||
|
this.dispatchEvent( 'scroll', null, [ progress, positionX ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.positionSliderAtSelected = function() {
|
||||||
|
if ( !this.cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.x = -this.selectedSlide.target;
|
||||||
|
this.velocity = 0; // stop wobble
|
||||||
|
this.positionSlider();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getPositionValue = function( position ) {
|
||||||
|
if ( this.options.percentPosition ) {
|
||||||
|
// percent position, round to 2 digits, like 12.34%
|
||||||
|
return ( Math.round( ( position / this.size.innerWidth ) * 10000 ) * 0.01 )+ '%';
|
||||||
|
} else {
|
||||||
|
// pixel positioning
|
||||||
|
return Math.round( position ) + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.settle = function( previousX ) {
|
||||||
|
// keep track of frames where x hasn't moved
|
||||||
|
if ( !this.isPointerDown && Math.round( this.x * 100 ) == Math.round( previousX * 100 ) ) {
|
||||||
|
this.restingFrames++;
|
||||||
|
}
|
||||||
|
// stop animating if resting for 3 or more frames
|
||||||
|
if ( this.restingFrames > 2 ) {
|
||||||
|
this.isAnimating = false;
|
||||||
|
delete this.isFreeScrolling;
|
||||||
|
// render position with translateX when settled
|
||||||
|
this.positionSlider();
|
||||||
|
this.dispatchEvent( 'settle', null, [ this.selectedIndex ] );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.shiftWrapCells = function( x ) {
|
||||||
|
// shift before cells
|
||||||
|
var beforeGap = this.cursorPosition + x;
|
||||||
|
this._shiftCells( this.beforeShiftCells, beforeGap, -1 );
|
||||||
|
// shift after cells
|
||||||
|
var afterGap = this.size.innerWidth - ( x + this.slideableWidth + this.cursorPosition );
|
||||||
|
this._shiftCells( this.afterShiftCells, afterGap, 1 );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._shiftCells = function( cells, gap, shift ) {
|
||||||
|
for ( var i=0; i < cells.length; i++ ) {
|
||||||
|
var cell = cells[i];
|
||||||
|
var cellShift = gap > 0 ? shift : 0;
|
||||||
|
cell.wrapShift( cellShift );
|
||||||
|
gap -= cell.size.outerWidth;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._unshiftCells = function( cells ) {
|
||||||
|
if ( !cells || !cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for ( var i=0; i < cells.length; i++ ) {
|
||||||
|
cells[i].wrapShift( 0 );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- physics -------------------------- //
|
||||||
|
|
||||||
|
proto.integratePhysics = function() {
|
||||||
|
this.x += this.velocity;
|
||||||
|
this.velocity *= this.getFrictionFactor();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.applyForce = function( force ) {
|
||||||
|
this.velocity += force;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getFrictionFactor = function() {
|
||||||
|
return 1 - this.options[ this.isFreeScrolling ? 'freeScrollFriction' : 'friction' ];
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getRestingPosition = function() {
|
||||||
|
// my thanks to Steven Wittens, who simplified this math greatly
|
||||||
|
return this.x + this.velocity / ( 1 - this.getFrictionFactor() );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.applyDragForce = function() {
|
||||||
|
if ( !this.isDraggable || !this.isPointerDown ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// change the position to drag position by applying force
|
||||||
|
var dragVelocity = this.dragX - this.x;
|
||||||
|
var dragForce = dragVelocity - this.velocity;
|
||||||
|
this.applyForce( dragForce );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.applySelectedAttraction = function() {
|
||||||
|
// do not attract if pointer down or no slides
|
||||||
|
var dragDown = this.isDraggable && this.isPointerDown;
|
||||||
|
if ( dragDown || this.isFreeScrolling || !this.slides.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var distance = this.selectedSlide.target * -1 - this.x;
|
||||||
|
var force = distance * this.options.selectedAttraction;
|
||||||
|
this.applyForce( force );
|
||||||
|
};
|
||||||
|
|
||||||
|
return proto;
|
||||||
|
|
||||||
|
}));
|
||||||
102
node_modules/flickity/js/cell.js
generated
vendored
Normal file
102
node_modules/flickity/js/cell.js
generated
vendored
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
// Flickity.Cell
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'get-size/get-size'
|
||||||
|
], function( getSize ) {
|
||||||
|
return factory( window, getSize );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('get-size')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.Flickity = window.Flickity || {};
|
||||||
|
window.Flickity.Cell = factory(
|
||||||
|
window,
|
||||||
|
window.getSize
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, getSize ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function Cell( elem, parent ) {
|
||||||
|
this.element = elem;
|
||||||
|
this.parent = parent;
|
||||||
|
|
||||||
|
this.create();
|
||||||
|
}
|
||||||
|
|
||||||
|
var proto = Cell.prototype;
|
||||||
|
|
||||||
|
proto.create = function() {
|
||||||
|
this.element.style.position = 'absolute';
|
||||||
|
this.element.setAttribute( 'aria-hidden', 'true' );
|
||||||
|
this.x = 0;
|
||||||
|
this.shift = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.destroy = function() {
|
||||||
|
// reset style
|
||||||
|
this.unselect();
|
||||||
|
this.element.style.position = '';
|
||||||
|
var side = this.parent.originSide;
|
||||||
|
this.element.style[ side ] = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getSize = function() {
|
||||||
|
this.size = getSize( this.element );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.setPosition = function( x ) {
|
||||||
|
this.x = x;
|
||||||
|
this.updateTarget();
|
||||||
|
this.renderPosition( x );
|
||||||
|
};
|
||||||
|
|
||||||
|
// setDefaultTarget v1 method, backwards compatibility, remove in v3
|
||||||
|
proto.updateTarget = proto.setDefaultTarget = function() {
|
||||||
|
var marginProperty = this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
|
||||||
|
this.target = this.x + this.size[ marginProperty ] +
|
||||||
|
this.size.width * this.parent.cellAlign;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.renderPosition = function( x ) {
|
||||||
|
// render position of cell with in slider
|
||||||
|
var side = this.parent.originSide;
|
||||||
|
this.element.style[ side ] = this.parent.getPositionValue( x );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.select = function() {
|
||||||
|
this.element.classList.add('is-selected');
|
||||||
|
this.element.removeAttribute('aria-hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.unselect = function() {
|
||||||
|
this.element.classList.remove('is-selected');
|
||||||
|
this.element.setAttribute( 'aria-hidden', 'true' );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Integer} factor - 0, 1, or -1
|
||||||
|
**/
|
||||||
|
proto.wrapShift = function( shift ) {
|
||||||
|
this.shift = shift;
|
||||||
|
this.renderPosition( this.x + this.parent.slideableWidth * shift );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.remove = function() {
|
||||||
|
this.element.parentNode.removeChild( this.element );
|
||||||
|
};
|
||||||
|
|
||||||
|
return Cell;
|
||||||
|
|
||||||
|
}));
|
||||||
393
node_modules/flickity/js/drag.js
generated
vendored
Normal file
393
node_modules/flickity/js/drag.js
generated
vendored
Normal file
@ -0,0 +1,393 @@
|
|||||||
|
// drag
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'unidragger/unidragger',
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( Flickity, Unidragger, utils ) {
|
||||||
|
return factory( window, Flickity, Unidragger, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('./flickity'),
|
||||||
|
require('unidragger'),
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.Flickity = factory(
|
||||||
|
window,
|
||||||
|
window.Flickity,
|
||||||
|
window.Unidragger,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, Flickity, Unidragger, utils ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ----- defaults ----- //
|
||||||
|
|
||||||
|
utils.extend( Flickity.defaults, {
|
||||||
|
draggable: '>1',
|
||||||
|
dragThreshold: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ----- create ----- //
|
||||||
|
|
||||||
|
Flickity.createMethods.push('_createDrag');
|
||||||
|
|
||||||
|
// -------------------------- drag prototype -------------------------- //
|
||||||
|
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
utils.extend( proto, Unidragger.prototype );
|
||||||
|
proto._touchActionValue = 'pan-y';
|
||||||
|
|
||||||
|
// -------------------------- -------------------------- //
|
||||||
|
|
||||||
|
var isTouch = 'createTouch' in document;
|
||||||
|
var isTouchmoveScrollCanceled = false;
|
||||||
|
|
||||||
|
proto._createDrag = function() {
|
||||||
|
this.on( 'activate', this.onActivateDrag );
|
||||||
|
this.on( 'uiChange', this._uiChangeDrag );
|
||||||
|
this.on( 'deactivate', this.onDeactivateDrag );
|
||||||
|
this.on( 'cellChange', this.updateDraggable );
|
||||||
|
// TODO updateDraggable on resize? if groupCells & slides change
|
||||||
|
// HACK - add seemingly innocuous handler to fix iOS 10 scroll behavior
|
||||||
|
// #457, RubaXa/Sortable#973
|
||||||
|
if ( isTouch && !isTouchmoveScrollCanceled ) {
|
||||||
|
window.addEventListener( 'touchmove', function() {});
|
||||||
|
isTouchmoveScrollCanceled = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.onActivateDrag = function() {
|
||||||
|
this.handles = [ this.viewport ];
|
||||||
|
this.bindHandles();
|
||||||
|
this.updateDraggable();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.onDeactivateDrag = function() {
|
||||||
|
this.unbindHandles();
|
||||||
|
this.element.classList.remove('is-draggable');
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.updateDraggable = function() {
|
||||||
|
// disable dragging if less than 2 slides. #278
|
||||||
|
if ( this.options.draggable == '>1' ) {
|
||||||
|
this.isDraggable = this.slides.length > 1;
|
||||||
|
} else {
|
||||||
|
this.isDraggable = this.options.draggable;
|
||||||
|
}
|
||||||
|
if ( this.isDraggable ) {
|
||||||
|
this.element.classList.add('is-draggable');
|
||||||
|
} else {
|
||||||
|
this.element.classList.remove('is-draggable');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// backwards compatibility
|
||||||
|
proto.bindDrag = function() {
|
||||||
|
this.options.draggable = true;
|
||||||
|
this.updateDraggable();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.unbindDrag = function() {
|
||||||
|
this.options.draggable = false;
|
||||||
|
this.updateDraggable();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._uiChangeDrag = function() {
|
||||||
|
delete this.isFreeScrolling;
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- pointer events -------------------------- //
|
||||||
|
|
||||||
|
proto.pointerDown = function( event, pointer ) {
|
||||||
|
if ( !this.isDraggable ) {
|
||||||
|
this._pointerDownDefault( event, pointer );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var isOkay = this.okayPointerDown( event );
|
||||||
|
if ( !isOkay ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._pointerDownPreventDefault( event );
|
||||||
|
this.pointerDownFocus( event );
|
||||||
|
// blur
|
||||||
|
if ( document.activeElement != this.element ) {
|
||||||
|
// do not blur if already focused
|
||||||
|
this.pointerDownBlur();
|
||||||
|
}
|
||||||
|
|
||||||
|
// stop if it was moving
|
||||||
|
this.dragX = this.x;
|
||||||
|
this.viewport.classList.add('is-pointer-down');
|
||||||
|
// track scrolling
|
||||||
|
this.pointerDownScroll = getScrollPosition();
|
||||||
|
window.addEventListener( 'scroll', this );
|
||||||
|
|
||||||
|
this._pointerDownDefault( event, pointer );
|
||||||
|
};
|
||||||
|
|
||||||
|
// default pointerDown logic, used for staticClick
|
||||||
|
proto._pointerDownDefault = function( event, pointer ) {
|
||||||
|
// track start event position
|
||||||
|
// Safari 9 overrides pageX and pageY. These values needs to be copied. #779
|
||||||
|
this.pointerDownPointer = {
|
||||||
|
pageX: pointer.pageX,
|
||||||
|
pageY: pointer.pageY,
|
||||||
|
};
|
||||||
|
// bind move and end events
|
||||||
|
this._bindPostStartEvents( event );
|
||||||
|
this.dispatchEvent( 'pointerDown', event, [ pointer ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
var focusNodes = {
|
||||||
|
INPUT: true,
|
||||||
|
TEXTAREA: true,
|
||||||
|
SELECT: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.pointerDownFocus = function( event ) {
|
||||||
|
var isFocusNode = focusNodes[ event.target.nodeName ];
|
||||||
|
if ( !isFocusNode ) {
|
||||||
|
this.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._pointerDownPreventDefault = function( event ) {
|
||||||
|
var isTouchStart = event.type == 'touchstart';
|
||||||
|
var isTouchPointer = event.pointerType == 'touch';
|
||||||
|
var isFocusNode = focusNodes[ event.target.nodeName ];
|
||||||
|
if ( !isTouchStart && !isTouchPointer && !isFocusNode ) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- move ----- //
|
||||||
|
|
||||||
|
proto.hasDragStarted = function( moveVector ) {
|
||||||
|
return Math.abs( moveVector.x ) > this.options.dragThreshold;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- up ----- //
|
||||||
|
|
||||||
|
proto.pointerUp = function( event, pointer ) {
|
||||||
|
delete this.isTouchScrolling;
|
||||||
|
this.viewport.classList.remove('is-pointer-down');
|
||||||
|
this.dispatchEvent( 'pointerUp', event, [ pointer ] );
|
||||||
|
this._dragPointerUp( event, pointer );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.pointerDone = function() {
|
||||||
|
window.removeEventListener( 'scroll', this );
|
||||||
|
delete this.pointerDownScroll;
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- dragging -------------------------- //
|
||||||
|
|
||||||
|
proto.dragStart = function( event, pointer ) {
|
||||||
|
if ( !this.isDraggable ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.dragStartPosition = this.x;
|
||||||
|
this.startAnimation();
|
||||||
|
window.removeEventListener( 'scroll', this );
|
||||||
|
this.dispatchEvent( 'dragStart', event, [ pointer ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.pointerMove = function( event, pointer ) {
|
||||||
|
var moveVector = this._dragPointerMove( event, pointer );
|
||||||
|
this.dispatchEvent( 'pointerMove', event, [ pointer, moveVector ] );
|
||||||
|
this._dragMove( event, pointer, moveVector );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.dragMove = function( event, pointer, moveVector ) {
|
||||||
|
if ( !this.isDraggable ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
this.previousDragX = this.dragX;
|
||||||
|
// reverse if right-to-left
|
||||||
|
var direction = this.options.rightToLeft ? -1 : 1;
|
||||||
|
if ( this.options.wrapAround ) {
|
||||||
|
// wrap around move. #589
|
||||||
|
moveVector.x = moveVector.x % this.slideableWidth;
|
||||||
|
}
|
||||||
|
var dragX = this.dragStartPosition + moveVector.x * direction;
|
||||||
|
|
||||||
|
if ( !this.options.wrapAround && this.slides.length ) {
|
||||||
|
// slow drag
|
||||||
|
var originBound = Math.max( -this.slides[0].target, this.dragStartPosition );
|
||||||
|
dragX = dragX > originBound ? ( dragX + originBound ) * 0.5 : dragX;
|
||||||
|
var endBound = Math.min( -this.getLastSlide().target, this.dragStartPosition );
|
||||||
|
dragX = dragX < endBound ? ( dragX + endBound ) * 0.5 : dragX;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dragX = dragX;
|
||||||
|
|
||||||
|
this.dragMoveTime = new Date();
|
||||||
|
this.dispatchEvent( 'dragMove', event, [ pointer, moveVector ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.dragEnd = function( event, pointer ) {
|
||||||
|
if ( !this.isDraggable ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ( this.options.freeScroll ) {
|
||||||
|
this.isFreeScrolling = true;
|
||||||
|
}
|
||||||
|
// set selectedIndex based on where flick will end up
|
||||||
|
var index = this.dragEndRestingSelect();
|
||||||
|
|
||||||
|
if ( this.options.freeScroll && !this.options.wrapAround ) {
|
||||||
|
// if free-scroll & not wrap around
|
||||||
|
// do not free-scroll if going outside of bounding slides
|
||||||
|
// so bounding slides can attract slider, and keep it in bounds
|
||||||
|
var restingX = this.getRestingPosition();
|
||||||
|
this.isFreeScrolling = -restingX > this.slides[0].target &&
|
||||||
|
-restingX < this.getLastSlide().target;
|
||||||
|
} else if ( !this.options.freeScroll && index == this.selectedIndex ) {
|
||||||
|
// boost selection if selected index has not changed
|
||||||
|
index += this.dragEndBoostSelect();
|
||||||
|
}
|
||||||
|
delete this.previousDragX;
|
||||||
|
// apply selection
|
||||||
|
// TODO refactor this, selecting here feels weird
|
||||||
|
// HACK, set flag so dragging stays in correct direction
|
||||||
|
this.isDragSelect = this.options.wrapAround;
|
||||||
|
this.select( index );
|
||||||
|
delete this.isDragSelect;
|
||||||
|
this.dispatchEvent( 'dragEnd', event, [ pointer ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.dragEndRestingSelect = function() {
|
||||||
|
var restingX = this.getRestingPosition();
|
||||||
|
// how far away from selected slide
|
||||||
|
var distance = Math.abs( this.getSlideDistance( -restingX, this.selectedIndex ) );
|
||||||
|
// get closet resting going up and going down
|
||||||
|
var positiveResting = this._getClosestResting( restingX, distance, 1 );
|
||||||
|
var negativeResting = this._getClosestResting( restingX, distance, -1 );
|
||||||
|
// use closer resting for wrap-around
|
||||||
|
var index = positiveResting.distance < negativeResting.distance ?
|
||||||
|
positiveResting.index : negativeResting.index;
|
||||||
|
return index;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* given resting X and distance to selected cell
|
||||||
|
* get the distance and index of the closest cell
|
||||||
|
* @param {Number} restingX - estimated post-flick resting position
|
||||||
|
* @param {Number} distance - distance to selected cell
|
||||||
|
* @param {Integer} increment - +1 or -1, going up or down
|
||||||
|
* @returns {Object} - { distance: {Number}, index: {Integer} }
|
||||||
|
*/
|
||||||
|
proto._getClosestResting = function( restingX, distance, increment ) {
|
||||||
|
var index = this.selectedIndex;
|
||||||
|
var minDistance = Infinity;
|
||||||
|
var condition = this.options.contain && !this.options.wrapAround ?
|
||||||
|
// if contain, keep going if distance is equal to minDistance
|
||||||
|
function( d, md ) { return d <= md; } : function( d, md ) { return d < md; };
|
||||||
|
while ( condition( distance, minDistance ) ) {
|
||||||
|
// measure distance to next cell
|
||||||
|
index += increment;
|
||||||
|
minDistance = distance;
|
||||||
|
distance = this.getSlideDistance( -restingX, index );
|
||||||
|
if ( distance === null ) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
distance = Math.abs( distance );
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
distance: minDistance,
|
||||||
|
// selected was previous index
|
||||||
|
index: index - increment
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* measure distance between x and a slide target
|
||||||
|
* @param {Number} x
|
||||||
|
* @param {Integer} index - slide index
|
||||||
|
*/
|
||||||
|
proto.getSlideDistance = function( x, index ) {
|
||||||
|
var len = this.slides.length;
|
||||||
|
// wrap around if at least 2 slides
|
||||||
|
var isWrapAround = this.options.wrapAround && len > 1;
|
||||||
|
var slideIndex = isWrapAround ? utils.modulo( index, len ) : index;
|
||||||
|
var slide = this.slides[ slideIndex ];
|
||||||
|
if ( !slide ) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// add distance for wrap-around slides
|
||||||
|
var wrap = isWrapAround ? this.slideableWidth * Math.floor( index / len ) : 0;
|
||||||
|
return x - ( slide.target + wrap );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.dragEndBoostSelect = function() {
|
||||||
|
// do not boost if no previousDragX or dragMoveTime
|
||||||
|
if ( this.previousDragX === undefined || !this.dragMoveTime ||
|
||||||
|
// or if drag was held for 100 ms
|
||||||
|
new Date() - this.dragMoveTime > 100 ) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var distance = this.getSlideDistance( -this.dragX, this.selectedIndex );
|
||||||
|
var delta = this.previousDragX - this.dragX;
|
||||||
|
if ( distance > 0 && delta > 0 ) {
|
||||||
|
// boost to next if moving towards the right, and positive velocity
|
||||||
|
return 1;
|
||||||
|
} else if ( distance < 0 && delta < 0 ) {
|
||||||
|
// boost to previous if moving towards the left, and negative velocity
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- staticClick ----- //
|
||||||
|
|
||||||
|
proto.staticClick = function( event, pointer ) {
|
||||||
|
// get clickedCell, if cell was clicked
|
||||||
|
var clickedCell = this.getParentCell( event.target );
|
||||||
|
var cellElem = clickedCell && clickedCell.element;
|
||||||
|
var cellIndex = clickedCell && this.cells.indexOf( clickedCell );
|
||||||
|
this.dispatchEvent( 'staticClick', event, [ pointer, cellElem, cellIndex ] );
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- scroll ----- //
|
||||||
|
|
||||||
|
proto.onscroll = function() {
|
||||||
|
var scroll = getScrollPosition();
|
||||||
|
var scrollMoveX = this.pointerDownScroll.x - scroll.x;
|
||||||
|
var scrollMoveY = this.pointerDownScroll.y - scroll.y;
|
||||||
|
// cancel click/tap if scroll is too much
|
||||||
|
if ( Math.abs( scrollMoveX ) > 3 || Math.abs( scrollMoveY ) > 3 ) {
|
||||||
|
this._pointerDone();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- utils ----- //
|
||||||
|
|
||||||
|
function getScrollPosition() {
|
||||||
|
return {
|
||||||
|
x: window.pageXOffset,
|
||||||
|
y: window.pageYOffset
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
929
node_modules/flickity/js/flickity.js
generated
vendored
Normal file
929
node_modules/flickity/js/flickity.js
generated
vendored
Normal file
@ -0,0 +1,929 @@
|
|||||||
|
// Flickity main
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'ev-emitter/ev-emitter',
|
||||||
|
'get-size/get-size',
|
||||||
|
'fizzy-ui-utils/utils',
|
||||||
|
'./cell',
|
||||||
|
'./slide',
|
||||||
|
'./animate'
|
||||||
|
], function( EvEmitter, getSize, utils, Cell, Slide, animatePrototype ) {
|
||||||
|
return factory( window, EvEmitter, getSize, utils, Cell, Slide, animatePrototype );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('ev-emitter'),
|
||||||
|
require('get-size'),
|
||||||
|
require('fizzy-ui-utils'),
|
||||||
|
require('./cell'),
|
||||||
|
require('./slide'),
|
||||||
|
require('./animate')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
var _Flickity = window.Flickity;
|
||||||
|
|
||||||
|
window.Flickity = factory(
|
||||||
|
window,
|
||||||
|
window.EvEmitter,
|
||||||
|
window.getSize,
|
||||||
|
window.fizzyUIUtils,
|
||||||
|
_Flickity.Cell,
|
||||||
|
_Flickity.Slide,
|
||||||
|
_Flickity.animatePrototype
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, EvEmitter, getSize,
|
||||||
|
utils, Cell, Slide, animatePrototype ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// vars
|
||||||
|
var jQuery = window.jQuery;
|
||||||
|
var getComputedStyle = window.getComputedStyle;
|
||||||
|
var console = window.console;
|
||||||
|
|
||||||
|
function moveElements( elems, toElem ) {
|
||||||
|
elems = utils.makeArray( elems );
|
||||||
|
while ( elems.length ) {
|
||||||
|
toElem.appendChild( elems.shift() );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------- Flickity -------------------------- //
|
||||||
|
|
||||||
|
// globally unique identifiers
|
||||||
|
var GUID = 0;
|
||||||
|
// internal store of all Flickity intances
|
||||||
|
var instances = {};
|
||||||
|
|
||||||
|
function Flickity( element, options ) {
|
||||||
|
var queryElement = utils.getQueryElement( element );
|
||||||
|
if ( !queryElement ) {
|
||||||
|
if ( console ) {
|
||||||
|
console.error( 'Bad element for Flickity: ' + ( queryElement || element ) );
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.element = queryElement;
|
||||||
|
// do not initialize twice on same element
|
||||||
|
if ( this.element.flickityGUID ) {
|
||||||
|
var instance = instances[ this.element.flickityGUID ];
|
||||||
|
instance.option( options );
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add jQuery
|
||||||
|
if ( jQuery ) {
|
||||||
|
this.$element = jQuery( this.element );
|
||||||
|
}
|
||||||
|
// options
|
||||||
|
this.options = utils.extend( {}, this.constructor.defaults );
|
||||||
|
this.option( options );
|
||||||
|
|
||||||
|
// kick things off
|
||||||
|
this._create();
|
||||||
|
}
|
||||||
|
|
||||||
|
Flickity.defaults = {
|
||||||
|
accessibility: true,
|
||||||
|
// adaptiveHeight: false,
|
||||||
|
cellAlign: 'center',
|
||||||
|
// cellSelector: undefined,
|
||||||
|
// contain: false,
|
||||||
|
freeScrollFriction: 0.075, // friction when free-scrolling
|
||||||
|
friction: 0.28, // friction when selecting
|
||||||
|
namespaceJQueryEvents: true,
|
||||||
|
// initialIndex: 0,
|
||||||
|
percentPosition: true,
|
||||||
|
resize: true,
|
||||||
|
selectedAttraction: 0.025,
|
||||||
|
setGallerySize: true
|
||||||
|
// watchCSS: false,
|
||||||
|
// wrapAround: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// hash of methods triggered on _create()
|
||||||
|
Flickity.createMethods = [];
|
||||||
|
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
// inherit EventEmitter
|
||||||
|
utils.extend( proto, EvEmitter.prototype );
|
||||||
|
|
||||||
|
proto._create = function() {
|
||||||
|
// add id for Flickity.data
|
||||||
|
var id = this.guid = ++GUID;
|
||||||
|
this.element.flickityGUID = id; // expando
|
||||||
|
instances[ id ] = this; // associate via id
|
||||||
|
// initial properties
|
||||||
|
this.selectedIndex = 0;
|
||||||
|
// how many frames slider has been in same position
|
||||||
|
this.restingFrames = 0;
|
||||||
|
// initial physics properties
|
||||||
|
this.x = 0;
|
||||||
|
this.velocity = 0;
|
||||||
|
this.originSide = this.options.rightToLeft ? 'right' : 'left';
|
||||||
|
// create viewport & slider
|
||||||
|
this.viewport = document.createElement('div');
|
||||||
|
this.viewport.className = 'flickity-viewport';
|
||||||
|
this._createSlider();
|
||||||
|
|
||||||
|
if ( this.options.resize || this.options.watchCSS ) {
|
||||||
|
window.addEventListener( 'resize', this );
|
||||||
|
}
|
||||||
|
|
||||||
|
// add listeners from on option
|
||||||
|
for ( var eventName in this.options.on ) {
|
||||||
|
var listener = this.options.on[ eventName ];
|
||||||
|
this.on( eventName, listener );
|
||||||
|
}
|
||||||
|
|
||||||
|
Flickity.createMethods.forEach( function( method ) {
|
||||||
|
this[ method ]();
|
||||||
|
}, this );
|
||||||
|
|
||||||
|
if ( this.options.watchCSS ) {
|
||||||
|
this.watchCSS();
|
||||||
|
} else {
|
||||||
|
this.activate();
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* set options
|
||||||
|
* @param {Object} opts
|
||||||
|
*/
|
||||||
|
proto.option = function( opts ) {
|
||||||
|
utils.extend( this.options, opts );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.activate = function() {
|
||||||
|
if ( this.isActive ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.isActive = true;
|
||||||
|
this.element.classList.add('flickity-enabled');
|
||||||
|
if ( this.options.rightToLeft ) {
|
||||||
|
this.element.classList.add('flickity-rtl');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getSize();
|
||||||
|
// move initial cell elements so they can be loaded as cells
|
||||||
|
var cellElems = this._filterFindCellElements( this.element.children );
|
||||||
|
moveElements( cellElems, this.slider );
|
||||||
|
this.viewport.appendChild( this.slider );
|
||||||
|
this.element.appendChild( this.viewport );
|
||||||
|
// get cells from children
|
||||||
|
this.reloadCells();
|
||||||
|
|
||||||
|
if ( this.options.accessibility ) {
|
||||||
|
// allow element to focusable
|
||||||
|
this.element.tabIndex = 0;
|
||||||
|
// listen for key presses
|
||||||
|
this.element.addEventListener( 'keydown', this );
|
||||||
|
}
|
||||||
|
|
||||||
|
this.emitEvent('activate');
|
||||||
|
this.selectInitialIndex();
|
||||||
|
// flag for initial activation, for using initialIndex
|
||||||
|
this.isInitActivated = true;
|
||||||
|
// ready event. #493
|
||||||
|
this.dispatchEvent('ready');
|
||||||
|
};
|
||||||
|
|
||||||
|
// slider positions the cells
|
||||||
|
proto._createSlider = function() {
|
||||||
|
// slider element does all the positioning
|
||||||
|
var slider = document.createElement('div');
|
||||||
|
slider.className = 'flickity-slider';
|
||||||
|
slider.style[ this.originSide ] = 0;
|
||||||
|
this.slider = slider;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._filterFindCellElements = function( elems ) {
|
||||||
|
return utils.filterFindElements( elems, this.options.cellSelector );
|
||||||
|
};
|
||||||
|
|
||||||
|
// goes through all children
|
||||||
|
proto.reloadCells = function() {
|
||||||
|
// collection of item elements
|
||||||
|
this.cells = this._makeCells( this.slider.children );
|
||||||
|
this.positionCells();
|
||||||
|
this._getWrapShiftCells();
|
||||||
|
this.setGallerySize();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* turn elements into Flickity.Cells
|
||||||
|
* @param {Array or NodeList or HTMLElement} elems
|
||||||
|
* @returns {Array} items - collection of new Flickity Cells
|
||||||
|
*/
|
||||||
|
proto._makeCells = function( elems ) {
|
||||||
|
var cellElems = this._filterFindCellElements( elems );
|
||||||
|
|
||||||
|
// create new Flickity for collection
|
||||||
|
var cells = cellElems.map( function( cellElem ) {
|
||||||
|
return new Cell( cellElem, this );
|
||||||
|
}, this );
|
||||||
|
|
||||||
|
return cells;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getLastCell = function() {
|
||||||
|
return this.cells[ this.cells.length - 1 ];
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getLastSlide = function() {
|
||||||
|
return this.slides[ this.slides.length - 1 ];
|
||||||
|
};
|
||||||
|
|
||||||
|
// positions all cells
|
||||||
|
proto.positionCells = function() {
|
||||||
|
// size all cells
|
||||||
|
this._sizeCells( this.cells );
|
||||||
|
// position all cells
|
||||||
|
this._positionCells( 0 );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* position certain cells
|
||||||
|
* @param {Integer} index - which cell to start with
|
||||||
|
*/
|
||||||
|
proto._positionCells = function( index ) {
|
||||||
|
index = index || 0;
|
||||||
|
// also measure maxCellHeight
|
||||||
|
// start 0 if positioning all cells
|
||||||
|
this.maxCellHeight = index ? this.maxCellHeight || 0 : 0;
|
||||||
|
var cellX = 0;
|
||||||
|
// get cellX
|
||||||
|
if ( index > 0 ) {
|
||||||
|
var startCell = this.cells[ index - 1 ];
|
||||||
|
cellX = startCell.x + startCell.size.outerWidth;
|
||||||
|
}
|
||||||
|
var len = this.cells.length;
|
||||||
|
for ( var i=index; i < len; i++ ) {
|
||||||
|
var cell = this.cells[i];
|
||||||
|
cell.setPosition( cellX );
|
||||||
|
cellX += cell.size.outerWidth;
|
||||||
|
this.maxCellHeight = Math.max( cell.size.outerHeight, this.maxCellHeight );
|
||||||
|
}
|
||||||
|
// keep track of cellX for wrap-around
|
||||||
|
this.slideableWidth = cellX;
|
||||||
|
// slides
|
||||||
|
this.updateSlides();
|
||||||
|
// contain slides target
|
||||||
|
this._containSlides();
|
||||||
|
// update slidesWidth
|
||||||
|
this.slidesWidth = len ? this.getLastSlide().target - this.slides[0].target : 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* cell.getSize() on multiple cells
|
||||||
|
* @param {Array} cells
|
||||||
|
*/
|
||||||
|
proto._sizeCells = function( cells ) {
|
||||||
|
cells.forEach( function( cell ) {
|
||||||
|
cell.getSize();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- -------------------------- //
|
||||||
|
|
||||||
|
proto.updateSlides = function() {
|
||||||
|
this.slides = [];
|
||||||
|
if ( !this.cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var slide = new Slide( this );
|
||||||
|
this.slides.push( slide );
|
||||||
|
var isOriginLeft = this.originSide == 'left';
|
||||||
|
var nextMargin = isOriginLeft ? 'marginRight' : 'marginLeft';
|
||||||
|
|
||||||
|
var canCellFit = this._getCanCellFit();
|
||||||
|
|
||||||
|
this.cells.forEach( function( cell, i ) {
|
||||||
|
// just add cell if first cell in slide
|
||||||
|
if ( !slide.cells.length ) {
|
||||||
|
slide.addCell( cell );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var slideWidth = ( slide.outerWidth - slide.firstMargin ) +
|
||||||
|
( cell.size.outerWidth - cell.size[ nextMargin ] );
|
||||||
|
|
||||||
|
if ( canCellFit.call( this, i, slideWidth ) ) {
|
||||||
|
slide.addCell( cell );
|
||||||
|
} else {
|
||||||
|
// doesn't fit, new slide
|
||||||
|
slide.updateTarget();
|
||||||
|
|
||||||
|
slide = new Slide( this );
|
||||||
|
this.slides.push( slide );
|
||||||
|
slide.addCell( cell );
|
||||||
|
}
|
||||||
|
}, this );
|
||||||
|
// last slide
|
||||||
|
slide.updateTarget();
|
||||||
|
// update .selectedSlide
|
||||||
|
this.updateSelectedSlide();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._getCanCellFit = function() {
|
||||||
|
var groupCells = this.options.groupCells;
|
||||||
|
if ( !groupCells ) {
|
||||||
|
return function() {
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
} else if ( typeof groupCells == 'number' ) {
|
||||||
|
// group by number. 3 -> [0,1,2], [3,4,5], ...
|
||||||
|
var number = parseInt( groupCells, 10 );
|
||||||
|
return function( i ) {
|
||||||
|
return ( i % number ) !== 0;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// default, group by width of slide
|
||||||
|
// parse '75%
|
||||||
|
var percentMatch = typeof groupCells == 'string' &&
|
||||||
|
groupCells.match(/^(\d+)%$/);
|
||||||
|
var percent = percentMatch ? parseInt( percentMatch[1], 10 ) / 100 : 1;
|
||||||
|
return function( i, slideWidth ) {
|
||||||
|
return slideWidth <= ( this.size.innerWidth + 1 ) * percent;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// alias _init for jQuery plugin .flickity()
|
||||||
|
proto._init =
|
||||||
|
proto.reposition = function() {
|
||||||
|
this.positionCells();
|
||||||
|
this.positionSliderAtSelected();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getSize = function() {
|
||||||
|
this.size = getSize( this.element );
|
||||||
|
this.setCellAlign();
|
||||||
|
this.cursorPosition = this.size.innerWidth * this.cellAlign;
|
||||||
|
};
|
||||||
|
|
||||||
|
var cellAlignShorthands = {
|
||||||
|
// cell align, then based on origin side
|
||||||
|
center: {
|
||||||
|
left: 0.5,
|
||||||
|
right: 0.5
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
left: 0,
|
||||||
|
right: 1
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
right: 0,
|
||||||
|
left: 1
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.setCellAlign = function() {
|
||||||
|
var shorthand = cellAlignShorthands[ this.options.cellAlign ];
|
||||||
|
this.cellAlign = shorthand ? shorthand[ this.originSide ] : this.options.cellAlign;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.setGallerySize = function() {
|
||||||
|
if ( this.options.setGallerySize ) {
|
||||||
|
var height = this.options.adaptiveHeight && this.selectedSlide ?
|
||||||
|
this.selectedSlide.height : this.maxCellHeight;
|
||||||
|
this.viewport.style.height = height + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._getWrapShiftCells = function() {
|
||||||
|
// only for wrap-around
|
||||||
|
if ( !this.options.wrapAround ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// unshift previous cells
|
||||||
|
this._unshiftCells( this.beforeShiftCells );
|
||||||
|
this._unshiftCells( this.afterShiftCells );
|
||||||
|
// get before cells
|
||||||
|
// initial gap
|
||||||
|
var gapX = this.cursorPosition;
|
||||||
|
var cellIndex = this.cells.length - 1;
|
||||||
|
this.beforeShiftCells = this._getGapCells( gapX, cellIndex, -1 );
|
||||||
|
// get after cells
|
||||||
|
// ending gap between last cell and end of gallery viewport
|
||||||
|
gapX = this.size.innerWidth - this.cursorPosition;
|
||||||
|
// start cloning at first cell, working forwards
|
||||||
|
this.afterShiftCells = this._getGapCells( gapX, 0, 1 );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto._getGapCells = function( gapX, cellIndex, increment ) {
|
||||||
|
// keep adding cells until the cover the initial gap
|
||||||
|
var cells = [];
|
||||||
|
while ( gapX > 0 ) {
|
||||||
|
var cell = this.cells[ cellIndex ];
|
||||||
|
if ( !cell ) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
cells.push( cell );
|
||||||
|
cellIndex += increment;
|
||||||
|
gapX -= cell.size.outerWidth;
|
||||||
|
}
|
||||||
|
return cells;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- contain ----- //
|
||||||
|
|
||||||
|
// contain cell targets so no excess sliding
|
||||||
|
proto._containSlides = function() {
|
||||||
|
if ( !this.options.contain || this.options.wrapAround || !this.cells.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var isRightToLeft = this.options.rightToLeft;
|
||||||
|
var beginMargin = isRightToLeft ? 'marginRight' : 'marginLeft';
|
||||||
|
var endMargin = isRightToLeft ? 'marginLeft' : 'marginRight';
|
||||||
|
var contentWidth = this.slideableWidth - this.getLastCell().size[ endMargin ];
|
||||||
|
// content is less than gallery size
|
||||||
|
var isContentSmaller = contentWidth < this.size.innerWidth;
|
||||||
|
// bounds
|
||||||
|
var beginBound = this.cursorPosition + this.cells[0].size[ beginMargin ];
|
||||||
|
var endBound = contentWidth - this.size.innerWidth * ( 1 - this.cellAlign );
|
||||||
|
// contain each cell target
|
||||||
|
this.slides.forEach( function( slide ) {
|
||||||
|
if ( isContentSmaller ) {
|
||||||
|
// all cells fit inside gallery
|
||||||
|
slide.target = contentWidth * this.cellAlign;
|
||||||
|
} else {
|
||||||
|
// contain to bounds
|
||||||
|
slide.target = Math.max( slide.target, beginBound );
|
||||||
|
slide.target = Math.min( slide.target, endBound );
|
||||||
|
}
|
||||||
|
}, this );
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
/**
|
||||||
|
* emits events via eventEmitter and jQuery events
|
||||||
|
* @param {String} type - name of event
|
||||||
|
* @param {Event} event - original event
|
||||||
|
* @param {Array} args - extra arguments
|
||||||
|
*/
|
||||||
|
proto.dispatchEvent = function( type, event, args ) {
|
||||||
|
var emitArgs = event ? [ event ].concat( args ) : args;
|
||||||
|
this.emitEvent( type, emitArgs );
|
||||||
|
|
||||||
|
if ( jQuery && this.$element ) {
|
||||||
|
// default trigger with type if no event
|
||||||
|
type += this.options.namespaceJQueryEvents ? '.flickity' : '';
|
||||||
|
var $event = type;
|
||||||
|
if ( event ) {
|
||||||
|
// create jQuery event
|
||||||
|
var jQEvent = jQuery.Event( event );
|
||||||
|
jQEvent.type = type;
|
||||||
|
$event = jQEvent;
|
||||||
|
}
|
||||||
|
this.$element.trigger( $event, args );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- select -------------------------- //
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Integer} index - index of the slide
|
||||||
|
* @param {Boolean} isWrap - will wrap-around to last/first if at the end
|
||||||
|
* @param {Boolean} isInstant - will immediately set position at selected cell
|
||||||
|
*/
|
||||||
|
proto.select = function( index, isWrap, isInstant ) {
|
||||||
|
if ( !this.isActive ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
index = parseInt( index, 10 );
|
||||||
|
this._wrapSelect( index );
|
||||||
|
|
||||||
|
if ( this.options.wrapAround || isWrap ) {
|
||||||
|
index = utils.modulo( index, this.slides.length );
|
||||||
|
}
|
||||||
|
// bail if invalid index
|
||||||
|
if ( !this.slides[ index ] ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var prevIndex = this.selectedIndex;
|
||||||
|
this.selectedIndex = index;
|
||||||
|
this.updateSelectedSlide();
|
||||||
|
if ( isInstant ) {
|
||||||
|
this.positionSliderAtSelected();
|
||||||
|
} else {
|
||||||
|
this.startAnimation();
|
||||||
|
}
|
||||||
|
if ( this.options.adaptiveHeight ) {
|
||||||
|
this.setGallerySize();
|
||||||
|
}
|
||||||
|
// events
|
||||||
|
this.dispatchEvent( 'select', null, [ index ] );
|
||||||
|
// change event if new index
|
||||||
|
if ( index != prevIndex ) {
|
||||||
|
this.dispatchEvent( 'change', null, [ index ] );
|
||||||
|
}
|
||||||
|
// old v1 event name, remove in v3
|
||||||
|
this.dispatchEvent('cellSelect');
|
||||||
|
};
|
||||||
|
|
||||||
|
// wraps position for wrapAround, to move to closest slide. #113
|
||||||
|
proto._wrapSelect = function( index ) {
|
||||||
|
var len = this.slides.length;
|
||||||
|
var isWrapping = this.options.wrapAround && len > 1;
|
||||||
|
if ( !isWrapping ) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
var wrapIndex = utils.modulo( index, len );
|
||||||
|
// go to shortest
|
||||||
|
var delta = Math.abs( wrapIndex - this.selectedIndex );
|
||||||
|
var backWrapDelta = Math.abs( ( wrapIndex + len ) - this.selectedIndex );
|
||||||
|
var forewardWrapDelta = Math.abs( ( wrapIndex - len ) - this.selectedIndex );
|
||||||
|
if ( !this.isDragSelect && backWrapDelta < delta ) {
|
||||||
|
index += len;
|
||||||
|
} else if ( !this.isDragSelect && forewardWrapDelta < delta ) {
|
||||||
|
index -= len;
|
||||||
|
}
|
||||||
|
// wrap position so slider is within normal area
|
||||||
|
if ( index < 0 ) {
|
||||||
|
this.x -= this.slideableWidth;
|
||||||
|
} else if ( index >= len ) {
|
||||||
|
this.x += this.slideableWidth;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.previous = function( isWrap, isInstant ) {
|
||||||
|
this.select( this.selectedIndex - 1, isWrap, isInstant );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.next = function( isWrap, isInstant ) {
|
||||||
|
this.select( this.selectedIndex + 1, isWrap, isInstant );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.updateSelectedSlide = function() {
|
||||||
|
var slide = this.slides[ this.selectedIndex ];
|
||||||
|
// selectedIndex could be outside of slides, if triggered before resize()
|
||||||
|
if ( !slide ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// unselect previous selected slide
|
||||||
|
this.unselectSelectedSlide();
|
||||||
|
// update new selected slide
|
||||||
|
this.selectedSlide = slide;
|
||||||
|
slide.select();
|
||||||
|
this.selectedCells = slide.cells;
|
||||||
|
this.selectedElements = slide.getCellElements();
|
||||||
|
// HACK: selectedCell & selectedElement is first cell in slide, backwards compatibility
|
||||||
|
// Remove in v3?
|
||||||
|
this.selectedCell = slide.cells[0];
|
||||||
|
this.selectedElement = this.selectedElements[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.unselectSelectedSlide = function() {
|
||||||
|
if ( this.selectedSlide ) {
|
||||||
|
this.selectedSlide.unselect();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.selectInitialIndex = function() {
|
||||||
|
var initialIndex = this.options.initialIndex;
|
||||||
|
// already activated, select previous selectedIndex
|
||||||
|
if ( this.isInitActivated ) {
|
||||||
|
this.select( this.selectedIndex, false, true );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// select with selector string
|
||||||
|
if ( initialIndex && typeof initialIndex == 'string' ) {
|
||||||
|
var cell = this.queryCell( initialIndex );
|
||||||
|
if ( cell ) {
|
||||||
|
this.selectCell( initialIndex, false, true );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var index = 0;
|
||||||
|
// select with number
|
||||||
|
if ( initialIndex && this.slides[ initialIndex ] ) {
|
||||||
|
index = initialIndex;
|
||||||
|
}
|
||||||
|
// select instantly
|
||||||
|
this.select( index, false, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* select slide from number or cell element
|
||||||
|
* @param {Element or Number} elem
|
||||||
|
*/
|
||||||
|
proto.selectCell = function( value, isWrap, isInstant ) {
|
||||||
|
// get cell
|
||||||
|
var cell = this.queryCell( value );
|
||||||
|
if ( !cell ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var index = this.getCellSlideIndex( cell );
|
||||||
|
this.select( index, isWrap, isInstant );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getCellSlideIndex = function( cell ) {
|
||||||
|
// get index of slides that has cell
|
||||||
|
for ( var i=0; i < this.slides.length; i++ ) {
|
||||||
|
var slide = this.slides[i];
|
||||||
|
var index = slide.cells.indexOf( cell );
|
||||||
|
if ( index != -1 ) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- get cells -------------------------- //
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get Flickity.Cell, given an Element
|
||||||
|
* @param {Element} elem
|
||||||
|
* @returns {Flickity.Cell} item
|
||||||
|
*/
|
||||||
|
proto.getCell = function( elem ) {
|
||||||
|
// loop through cells to get the one that matches
|
||||||
|
for ( var i=0; i < this.cells.length; i++ ) {
|
||||||
|
var cell = this.cells[i];
|
||||||
|
if ( cell.element == elem ) {
|
||||||
|
return cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get collection of Flickity.Cells, given Elements
|
||||||
|
* @param {Element, Array, NodeList} elems
|
||||||
|
* @returns {Array} cells - Flickity.Cells
|
||||||
|
*/
|
||||||
|
proto.getCells = function( elems ) {
|
||||||
|
elems = utils.makeArray( elems );
|
||||||
|
var cells = [];
|
||||||
|
elems.forEach( function( elem ) {
|
||||||
|
var cell = this.getCell( elem );
|
||||||
|
if ( cell ) {
|
||||||
|
cells.push( cell );
|
||||||
|
}
|
||||||
|
}, this );
|
||||||
|
return cells;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get cell elements
|
||||||
|
* @returns {Array} cellElems
|
||||||
|
*/
|
||||||
|
proto.getCellElements = function() {
|
||||||
|
return this.cells.map( function( cell ) {
|
||||||
|
return cell.element;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get parent cell from an element
|
||||||
|
* @param {Element} elem
|
||||||
|
* @returns {Flickit.Cell} cell
|
||||||
|
*/
|
||||||
|
proto.getParentCell = function( elem ) {
|
||||||
|
// first check if elem is cell
|
||||||
|
var cell = this.getCell( elem );
|
||||||
|
if ( cell ) {
|
||||||
|
return cell;
|
||||||
|
}
|
||||||
|
// try to get parent cell elem
|
||||||
|
elem = utils.getParent( elem, '.flickity-slider > *' );
|
||||||
|
return this.getCell( elem );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get cells adjacent to a slide
|
||||||
|
* @param {Integer} adjCount - number of adjacent slides
|
||||||
|
* @param {Integer} index - index of slide to start
|
||||||
|
* @returns {Array} cells - array of Flickity.Cells
|
||||||
|
*/
|
||||||
|
proto.getAdjacentCellElements = function( adjCount, index ) {
|
||||||
|
if ( !adjCount ) {
|
||||||
|
return this.selectedSlide.getCellElements();
|
||||||
|
}
|
||||||
|
index = index === undefined ? this.selectedIndex : index;
|
||||||
|
|
||||||
|
var len = this.slides.length;
|
||||||
|
if ( 1 + ( adjCount * 2 ) >= len ) {
|
||||||
|
return this.getCellElements();
|
||||||
|
}
|
||||||
|
|
||||||
|
var cellElems = [];
|
||||||
|
for ( var i = index - adjCount; i <= index + adjCount ; i++ ) {
|
||||||
|
var slideIndex = this.options.wrapAround ? utils.modulo( i, len ) : i;
|
||||||
|
var slide = this.slides[ slideIndex ];
|
||||||
|
if ( slide ) {
|
||||||
|
cellElems = cellElems.concat( slide.getCellElements() );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return cellElems;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* select slide from number or cell element
|
||||||
|
* @param {Element, Selector String, or Number} selector
|
||||||
|
*/
|
||||||
|
proto.queryCell = function( selector ) {
|
||||||
|
if ( typeof selector == 'number' ) {
|
||||||
|
// use number as index
|
||||||
|
return this.cells[ selector ];
|
||||||
|
}
|
||||||
|
if ( typeof selector == 'string' ) {
|
||||||
|
// do not select invalid selectors from hash: #123, #/. #791
|
||||||
|
if ( selector.match(/^[#\.]?[\d\/]/) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// use string as selector, get element
|
||||||
|
selector = this.element.querySelector( selector );
|
||||||
|
}
|
||||||
|
// get cell from element
|
||||||
|
return this.getCell( selector );
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- events -------------------------- //
|
||||||
|
|
||||||
|
proto.uiChange = function() {
|
||||||
|
this.emitEvent('uiChange');
|
||||||
|
};
|
||||||
|
|
||||||
|
// keep focus on element when child UI elements are clicked
|
||||||
|
proto.childUIPointerDown = function( event ) {
|
||||||
|
// HACK iOS does not allow touch events to bubble up?!
|
||||||
|
if ( event.type != 'touchstart' ) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
this.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- resize ----- //
|
||||||
|
|
||||||
|
proto.onresize = function() {
|
||||||
|
this.watchCSS();
|
||||||
|
this.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
utils.debounceMethod( Flickity, 'onresize', 150 );
|
||||||
|
|
||||||
|
proto.resize = function() {
|
||||||
|
if ( !this.isActive ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.getSize();
|
||||||
|
// wrap values
|
||||||
|
if ( this.options.wrapAround ) {
|
||||||
|
this.x = utils.modulo( this.x, this.slideableWidth );
|
||||||
|
}
|
||||||
|
this.positionCells();
|
||||||
|
this._getWrapShiftCells();
|
||||||
|
this.setGallerySize();
|
||||||
|
this.emitEvent('resize');
|
||||||
|
// update selected index for group slides, instant
|
||||||
|
// TODO: position can be lost between groups of various numbers
|
||||||
|
var selectedElement = this.selectedElements && this.selectedElements[0];
|
||||||
|
this.selectCell( selectedElement, false, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
// watches the :after property, activates/deactivates
|
||||||
|
proto.watchCSS = function() {
|
||||||
|
var watchOption = this.options.watchCSS;
|
||||||
|
if ( !watchOption ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var afterContent = getComputedStyle( this.element, ':after' ).content;
|
||||||
|
// activate if :after { content: 'flickity' }
|
||||||
|
if ( afterContent.indexOf('flickity') != -1 ) {
|
||||||
|
this.activate();
|
||||||
|
} else {
|
||||||
|
this.deactivate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- keydown ----- //
|
||||||
|
|
||||||
|
// go previous/next if left/right keys pressed
|
||||||
|
proto.onkeydown = function( event ) {
|
||||||
|
// only work if element is in focus
|
||||||
|
var isNotFocused = document.activeElement && document.activeElement != this.element;
|
||||||
|
if ( !this.options.accessibility ||isNotFocused ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var handler = Flickity.keyboardHandlers[ event.keyCode ];
|
||||||
|
if ( handler ) {
|
||||||
|
handler.call( this );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Flickity.keyboardHandlers = {
|
||||||
|
// left arrow
|
||||||
|
37: function() {
|
||||||
|
var leftMethod = this.options.rightToLeft ? 'next' : 'previous';
|
||||||
|
this.uiChange();
|
||||||
|
this[ leftMethod ]();
|
||||||
|
},
|
||||||
|
// right arrow
|
||||||
|
39: function() {
|
||||||
|
var rightMethod = this.options.rightToLeft ? 'previous' : 'next';
|
||||||
|
this.uiChange();
|
||||||
|
this[ rightMethod ]();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- focus ----- //
|
||||||
|
|
||||||
|
proto.focus = function() {
|
||||||
|
// TODO remove scrollTo once focus options gets more support
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Browser_compatibility
|
||||||
|
var prevScrollY = window.pageYOffset;
|
||||||
|
this.element.focus({ preventScroll: true });
|
||||||
|
// hack to fix scroll jump after focus, #76
|
||||||
|
if ( window.pageYOffset != prevScrollY ) {
|
||||||
|
window.scrollTo( window.pageXOffset, prevScrollY );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- destroy -------------------------- //
|
||||||
|
|
||||||
|
// deactivate all Flickity functionality, but keep stuff available
|
||||||
|
proto.deactivate = function() {
|
||||||
|
if ( !this.isActive ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.element.classList.remove('flickity-enabled');
|
||||||
|
this.element.classList.remove('flickity-rtl');
|
||||||
|
this.unselectSelectedSlide();
|
||||||
|
// destroy cells
|
||||||
|
this.cells.forEach( function( cell ) {
|
||||||
|
cell.destroy();
|
||||||
|
});
|
||||||
|
this.element.removeChild( this.viewport );
|
||||||
|
// move child elements back into element
|
||||||
|
moveElements( this.slider.children, this.element );
|
||||||
|
if ( this.options.accessibility ) {
|
||||||
|
this.element.removeAttribute('tabIndex');
|
||||||
|
this.element.removeEventListener( 'keydown', this );
|
||||||
|
}
|
||||||
|
// set flags
|
||||||
|
this.isActive = false;
|
||||||
|
this.emitEvent('deactivate');
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.destroy = function() {
|
||||||
|
this.deactivate();
|
||||||
|
window.removeEventListener( 'resize', this );
|
||||||
|
this.allOff();
|
||||||
|
this.emitEvent('destroy');
|
||||||
|
if ( jQuery && this.$element ) {
|
||||||
|
jQuery.removeData( this.element, 'flickity' );
|
||||||
|
}
|
||||||
|
delete this.element.flickityGUID;
|
||||||
|
delete instances[ this.guid ];
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- prototype -------------------------- //
|
||||||
|
|
||||||
|
utils.extend( proto, animatePrototype );
|
||||||
|
|
||||||
|
// -------------------------- extras -------------------------- //
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get Flickity instance from element
|
||||||
|
* @param {Element} elem
|
||||||
|
* @returns {Flickity}
|
||||||
|
*/
|
||||||
|
Flickity.data = function( elem ) {
|
||||||
|
elem = utils.getQueryElement( elem );
|
||||||
|
var id = elem && elem.flickityGUID;
|
||||||
|
return id && instances[ id ];
|
||||||
|
};
|
||||||
|
|
||||||
|
utils.htmlInit( Flickity, 'flickity' );
|
||||||
|
|
||||||
|
if ( jQuery && jQuery.bridget ) {
|
||||||
|
jQuery.bridget( 'flickity', Flickity );
|
||||||
|
}
|
||||||
|
|
||||||
|
// set internal jQuery, for Webpack + jQuery v3, #478
|
||||||
|
Flickity.setJQuery = function( jq ) {
|
||||||
|
jQuery = jq;
|
||||||
|
};
|
||||||
|
|
||||||
|
Flickity.Cell = Cell;
|
||||||
|
Flickity.Slide = Slide;
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
42
node_modules/flickity/js/index.js
generated
vendored
Normal file
42
node_modules/flickity/js/index.js
generated
vendored
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/*!
|
||||||
|
* Flickity v2.2.1
|
||||||
|
* Touch, responsive, flickable carousels
|
||||||
|
*
|
||||||
|
* Licensed GPLv3 for open source use
|
||||||
|
* or Flickity Commercial License for commercial use
|
||||||
|
*
|
||||||
|
* https://flickity.metafizzy.co
|
||||||
|
* Copyright 2015-2019 Metafizzy
|
||||||
|
*/
|
||||||
|
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'./drag',
|
||||||
|
'./prev-next-button',
|
||||||
|
'./page-dots',
|
||||||
|
'./player',
|
||||||
|
'./add-remove-cell',
|
||||||
|
'./lazyload'
|
||||||
|
], factory );
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
require('./flickity'),
|
||||||
|
require('./drag'),
|
||||||
|
require('./prev-next-button'),
|
||||||
|
require('./page-dots'),
|
||||||
|
require('./player'),
|
||||||
|
require('./add-remove-cell'),
|
||||||
|
require('./lazyload')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
})( window, function factory( Flickity ) {
|
||||||
|
/*jshint strict: false*/
|
||||||
|
return Flickity;
|
||||||
|
});
|
||||||
134
node_modules/flickity/js/lazyload.js
generated
vendored
Normal file
134
node_modules/flickity/js/lazyload.js
generated
vendored
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
// lazyload
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( Flickity, utils ) {
|
||||||
|
return factory( window, Flickity, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('./flickity'),
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
factory(
|
||||||
|
window,
|
||||||
|
window.Flickity,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, Flickity, utils ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Flickity.createMethods.push('_createLazyload');
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
|
||||||
|
proto._createLazyload = function() {
|
||||||
|
this.on( 'select', this.lazyLoad );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.lazyLoad = function() {
|
||||||
|
var lazyLoad = this.options.lazyLoad;
|
||||||
|
if ( !lazyLoad ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// get adjacent cells, use lazyLoad option for adjacent count
|
||||||
|
var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
|
||||||
|
var cellElems = this.getAdjacentCellElements( adjCount );
|
||||||
|
// get lazy images in those cells
|
||||||
|
var lazyImages = [];
|
||||||
|
cellElems.forEach( function( cellElem ) {
|
||||||
|
var lazyCellImages = getCellLazyImages( cellElem );
|
||||||
|
lazyImages = lazyImages.concat( lazyCellImages );
|
||||||
|
});
|
||||||
|
// load lazy images
|
||||||
|
lazyImages.forEach( function( img ) {
|
||||||
|
new LazyLoader( img, this );
|
||||||
|
}, this );
|
||||||
|
};
|
||||||
|
|
||||||
|
function getCellLazyImages( cellElem ) {
|
||||||
|
// check if cell element is lazy image
|
||||||
|
if ( cellElem.nodeName == 'IMG' ) {
|
||||||
|
var lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');
|
||||||
|
var srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');
|
||||||
|
var srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');
|
||||||
|
if ( lazyloadAttr || srcAttr || srcsetAttr ) {
|
||||||
|
return [ cellElem ];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// select lazy images in cell
|
||||||
|
var lazySelector = 'img[data-flickity-lazyload], ' +
|
||||||
|
'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';
|
||||||
|
var imgs = cellElem.querySelectorAll( lazySelector );
|
||||||
|
return utils.makeArray( imgs );
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------- LazyLoader -------------------------- //
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class to handle loading images
|
||||||
|
*/
|
||||||
|
function LazyLoader( img, flickity ) {
|
||||||
|
this.img = img;
|
||||||
|
this.flickity = flickity;
|
||||||
|
this.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
LazyLoader.prototype.handleEvent = utils.handleEvent;
|
||||||
|
|
||||||
|
LazyLoader.prototype.load = function() {
|
||||||
|
this.img.addEventListener( 'load', this );
|
||||||
|
this.img.addEventListener( 'error', this );
|
||||||
|
// get src & srcset
|
||||||
|
var src = this.img.getAttribute('data-flickity-lazyload') ||
|
||||||
|
this.img.getAttribute('data-flickity-lazyload-src');
|
||||||
|
var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
|
||||||
|
// set src & serset
|
||||||
|
this.img.src = src;
|
||||||
|
if ( srcset ) {
|
||||||
|
this.img.setAttribute( 'srcset', srcset );
|
||||||
|
}
|
||||||
|
// remove attr
|
||||||
|
this.img.removeAttribute('data-flickity-lazyload');
|
||||||
|
this.img.removeAttribute('data-flickity-lazyload-src');
|
||||||
|
this.img.removeAttribute('data-flickity-lazyload-srcset');
|
||||||
|
};
|
||||||
|
|
||||||
|
LazyLoader.prototype.onload = function( event ) {
|
||||||
|
this.complete( event, 'flickity-lazyloaded' );
|
||||||
|
};
|
||||||
|
|
||||||
|
LazyLoader.prototype.onerror = function( event ) {
|
||||||
|
this.complete( event, 'flickity-lazyerror' );
|
||||||
|
};
|
||||||
|
|
||||||
|
LazyLoader.prototype.complete = function( event, className ) {
|
||||||
|
// unbind events
|
||||||
|
this.img.removeEventListener( 'load', this );
|
||||||
|
this.img.removeEventListener( 'error', this );
|
||||||
|
|
||||||
|
var cell = this.flickity.getParentCell( this.img );
|
||||||
|
var cellElem = cell && cell.element;
|
||||||
|
this.flickity.cellSizeChange( cellElem );
|
||||||
|
|
||||||
|
this.img.classList.add( className );
|
||||||
|
this.flickity.dispatchEvent( 'lazyLoad', event, cellElem );
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
Flickity.LazyLoader = LazyLoader;
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
188
node_modules/flickity/js/page-dots.js
generated
vendored
Normal file
188
node_modules/flickity/js/page-dots.js
generated
vendored
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
// page dots
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'unipointer/unipointer',
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( Flickity, Unipointer, utils ) {
|
||||||
|
return factory( window, Flickity, Unipointer, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('./flickity'),
|
||||||
|
require('unipointer'),
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
factory(
|
||||||
|
window,
|
||||||
|
window.Flickity,
|
||||||
|
window.Unipointer,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, Flickity, Unipointer, utils ) {
|
||||||
|
|
||||||
|
// -------------------------- PageDots -------------------------- //
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function PageDots( parent ) {
|
||||||
|
this.parent = parent;
|
||||||
|
this._create();
|
||||||
|
}
|
||||||
|
|
||||||
|
PageDots.prototype = Object.create( Unipointer.prototype );
|
||||||
|
|
||||||
|
PageDots.prototype._create = function() {
|
||||||
|
// create holder element
|
||||||
|
this.holder = document.createElement('ol');
|
||||||
|
this.holder.className = 'flickity-page-dots';
|
||||||
|
// create dots, array of elements
|
||||||
|
this.dots = [];
|
||||||
|
// events
|
||||||
|
this.handleClick = this.onClick.bind( this );
|
||||||
|
this.on( 'pointerDown', this.parent.childUIPointerDown.bind( this.parent ) );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.activate = function() {
|
||||||
|
this.setDots();
|
||||||
|
this.holder.addEventListener( 'click', this.handleClick );
|
||||||
|
this.bindStartEvent( this.holder );
|
||||||
|
// add to DOM
|
||||||
|
this.parent.element.appendChild( this.holder );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.deactivate = function() {
|
||||||
|
this.holder.removeEventListener( 'click', this.handleClick );
|
||||||
|
this.unbindStartEvent( this.holder );
|
||||||
|
// remove from DOM
|
||||||
|
this.parent.element.removeChild( this.holder );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.setDots = function() {
|
||||||
|
// get difference between number of slides and number of dots
|
||||||
|
var delta = this.parent.slides.length - this.dots.length;
|
||||||
|
if ( delta > 0 ) {
|
||||||
|
this.addDots( delta );
|
||||||
|
} else if ( delta < 0 ) {
|
||||||
|
this.removeDots( -delta );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.addDots = function( count ) {
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
var newDots = [];
|
||||||
|
var length = this.dots.length;
|
||||||
|
var max = length + count;
|
||||||
|
|
||||||
|
for ( var i = length; i < max; i++ ) {
|
||||||
|
var dot = document.createElement('li');
|
||||||
|
dot.className = 'dot';
|
||||||
|
dot.setAttribute( 'aria-label', 'Page dot ' + ( i + 1 ) );
|
||||||
|
fragment.appendChild( dot );
|
||||||
|
newDots.push( dot );
|
||||||
|
}
|
||||||
|
|
||||||
|
this.holder.appendChild( fragment );
|
||||||
|
this.dots = this.dots.concat( newDots );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.removeDots = function( count ) {
|
||||||
|
// remove from this.dots collection
|
||||||
|
var removeDots = this.dots.splice( this.dots.length - count, count );
|
||||||
|
// remove from DOM
|
||||||
|
removeDots.forEach( function( dot ) {
|
||||||
|
this.holder.removeChild( dot );
|
||||||
|
}, this );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.updateSelected = function() {
|
||||||
|
// remove selected class on previous
|
||||||
|
if ( this.selectedDot ) {
|
||||||
|
this.selectedDot.className = 'dot';
|
||||||
|
this.selectedDot.removeAttribute('aria-current');
|
||||||
|
}
|
||||||
|
// don't proceed if no dots
|
||||||
|
if ( !this.dots.length ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.selectedDot = this.dots[ this.parent.selectedIndex ];
|
||||||
|
this.selectedDot.className = 'dot is-selected';
|
||||||
|
this.selectedDot.setAttribute( 'aria-current', 'step' );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.onTap = // old method name, backwards-compatible
|
||||||
|
PageDots.prototype.onClick = function( event ) {
|
||||||
|
var target = event.target;
|
||||||
|
// only care about dot clicks
|
||||||
|
if ( target.nodeName != 'LI' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parent.uiChange();
|
||||||
|
var index = this.dots.indexOf( target );
|
||||||
|
this.parent.select( index );
|
||||||
|
};
|
||||||
|
|
||||||
|
PageDots.prototype.destroy = function() {
|
||||||
|
this.deactivate();
|
||||||
|
this.allOff();
|
||||||
|
};
|
||||||
|
|
||||||
|
Flickity.PageDots = PageDots;
|
||||||
|
|
||||||
|
// -------------------------- Flickity -------------------------- //
|
||||||
|
|
||||||
|
utils.extend( Flickity.defaults, {
|
||||||
|
pageDots: true
|
||||||
|
});
|
||||||
|
|
||||||
|
Flickity.createMethods.push('_createPageDots');
|
||||||
|
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
|
||||||
|
proto._createPageDots = function() {
|
||||||
|
if ( !this.options.pageDots ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.pageDots = new PageDots( this );
|
||||||
|
// events
|
||||||
|
this.on( 'activate', this.activatePageDots );
|
||||||
|
this.on( 'select', this.updateSelectedPageDots );
|
||||||
|
this.on( 'cellChange', this.updatePageDots );
|
||||||
|
this.on( 'resize', this.updatePageDots );
|
||||||
|
this.on( 'deactivate', this.deactivatePageDots );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.activatePageDots = function() {
|
||||||
|
this.pageDots.activate();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.updateSelectedPageDots = function() {
|
||||||
|
this.pageDots.updateSelected();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.updatePageDots = function() {
|
||||||
|
this.pageDots.setDots();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.deactivatePageDots = function() {
|
||||||
|
this.pageDots.deactivate();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
Flickity.PageDots = PageDots;
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
191
node_modules/flickity/js/player.js
generated
vendored
Normal file
191
node_modules/flickity/js/player.js
generated
vendored
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
// player & autoPlay
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'ev-emitter/ev-emitter',
|
||||||
|
'fizzy-ui-utils/utils',
|
||||||
|
'./flickity'
|
||||||
|
], function( EvEmitter, utils, Flickity ) {
|
||||||
|
return factory( EvEmitter, utils, Flickity );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
require('ev-emitter'),
|
||||||
|
require('fizzy-ui-utils'),
|
||||||
|
require('./flickity')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
factory(
|
||||||
|
window.EvEmitter,
|
||||||
|
window.fizzyUIUtils,
|
||||||
|
window.Flickity
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( EvEmitter, utils, Flickity ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// -------------------------- Player -------------------------- //
|
||||||
|
|
||||||
|
function Player( parent ) {
|
||||||
|
this.parent = parent;
|
||||||
|
this.state = 'stopped';
|
||||||
|
// visibility change event handler
|
||||||
|
this.onVisibilityChange = this.visibilityChange.bind( this );
|
||||||
|
this.onVisibilityPlay = this.visibilityPlay.bind( this );
|
||||||
|
}
|
||||||
|
|
||||||
|
Player.prototype = Object.create( EvEmitter.prototype );
|
||||||
|
|
||||||
|
// start play
|
||||||
|
Player.prototype.play = function() {
|
||||||
|
if ( this.state == 'playing' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// do not play if page is hidden, start playing when page is visible
|
||||||
|
var isPageHidden = document.hidden;
|
||||||
|
if ( isPageHidden ) {
|
||||||
|
document.addEventListener( 'visibilitychange', this.onVisibilityPlay );
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state = 'playing';
|
||||||
|
// listen to visibility change
|
||||||
|
document.addEventListener( 'visibilitychange', this.onVisibilityChange );
|
||||||
|
// start ticking
|
||||||
|
this.tick();
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.tick = function() {
|
||||||
|
// do not tick if not playing
|
||||||
|
if ( this.state != 'playing' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var time = this.parent.options.autoPlay;
|
||||||
|
// default to 3 seconds
|
||||||
|
time = typeof time == 'number' ? time : 3000;
|
||||||
|
var _this = this;
|
||||||
|
// HACK: reset ticks if stopped and started within interval
|
||||||
|
this.clear();
|
||||||
|
this.timeout = setTimeout( function() {
|
||||||
|
_this.parent.next( true );
|
||||||
|
_this.tick();
|
||||||
|
}, time );
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.stop = function() {
|
||||||
|
this.state = 'stopped';
|
||||||
|
this.clear();
|
||||||
|
// remove visibility change event
|
||||||
|
document.removeEventListener( 'visibilitychange', this.onVisibilityChange );
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.clear = function() {
|
||||||
|
clearTimeout( this.timeout );
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.pause = function() {
|
||||||
|
if ( this.state == 'playing' ) {
|
||||||
|
this.state = 'paused';
|
||||||
|
this.clear();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.unpause = function() {
|
||||||
|
// re-start play if paused
|
||||||
|
if ( this.state == 'paused' ) {
|
||||||
|
this.play();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// pause if page visibility is hidden, unpause if visible
|
||||||
|
Player.prototype.visibilityChange = function() {
|
||||||
|
var isPageHidden = document.hidden;
|
||||||
|
this[ isPageHidden ? 'pause' : 'unpause' ]();
|
||||||
|
};
|
||||||
|
|
||||||
|
Player.prototype.visibilityPlay = function() {
|
||||||
|
this.play();
|
||||||
|
document.removeEventListener( 'visibilitychange', this.onVisibilityPlay );
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- Flickity -------------------------- //
|
||||||
|
|
||||||
|
utils.extend( Flickity.defaults, {
|
||||||
|
pauseAutoPlayOnHover: true
|
||||||
|
});
|
||||||
|
|
||||||
|
Flickity.createMethods.push('_createPlayer');
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
|
||||||
|
proto._createPlayer = function() {
|
||||||
|
this.player = new Player( this );
|
||||||
|
|
||||||
|
this.on( 'activate', this.activatePlayer );
|
||||||
|
this.on( 'uiChange', this.stopPlayer );
|
||||||
|
this.on( 'pointerDown', this.stopPlayer );
|
||||||
|
this.on( 'deactivate', this.deactivatePlayer );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.activatePlayer = function() {
|
||||||
|
if ( !this.options.autoPlay ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.player.play();
|
||||||
|
this.element.addEventListener( 'mouseenter', this );
|
||||||
|
};
|
||||||
|
|
||||||
|
// Player API, don't hate the ... thanks I know where the door is
|
||||||
|
|
||||||
|
proto.playPlayer = function() {
|
||||||
|
this.player.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.stopPlayer = function() {
|
||||||
|
this.player.stop();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.pausePlayer = function() {
|
||||||
|
this.player.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.unpausePlayer = function() {
|
||||||
|
this.player.unpause();
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.deactivatePlayer = function() {
|
||||||
|
this.player.stop();
|
||||||
|
this.element.removeEventListener( 'mouseenter', this );
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- mouseenter/leave ----- //
|
||||||
|
|
||||||
|
// pause auto-play on hover
|
||||||
|
proto.onmouseenter = function() {
|
||||||
|
if ( !this.options.pauseAutoPlayOnHover ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.player.pause();
|
||||||
|
this.element.addEventListener( 'mouseleave', this );
|
||||||
|
};
|
||||||
|
|
||||||
|
// resume auto-play on hover off
|
||||||
|
proto.onmouseleave = function() {
|
||||||
|
this.player.unpause();
|
||||||
|
this.element.removeEventListener( 'mouseleave', this );
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
Flickity.Player = Player;
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
211
node_modules/flickity/js/prev-next-button.js
generated
vendored
Normal file
211
node_modules/flickity/js/prev-next-button.js
generated
vendored
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
// prev/next buttons
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( [
|
||||||
|
'./flickity',
|
||||||
|
'unipointer/unipointer',
|
||||||
|
'fizzy-ui-utils/utils'
|
||||||
|
], function( Flickity, Unipointer, utils ) {
|
||||||
|
return factory( window, Flickity, Unipointer, utils );
|
||||||
|
});
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory(
|
||||||
|
window,
|
||||||
|
require('./flickity'),
|
||||||
|
require('unipointer'),
|
||||||
|
require('fizzy-ui-utils')
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
factory(
|
||||||
|
window,
|
||||||
|
window.Flickity,
|
||||||
|
window.Unipointer,
|
||||||
|
window.fizzyUIUtils
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory( window, Flickity, Unipointer, utils ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var svgURI = 'http://www.w3.org/2000/svg';
|
||||||
|
|
||||||
|
// -------------------------- PrevNextButton -------------------------- //
|
||||||
|
|
||||||
|
function PrevNextButton( direction, parent ) {
|
||||||
|
this.direction = direction;
|
||||||
|
this.parent = parent;
|
||||||
|
this._create();
|
||||||
|
}
|
||||||
|
|
||||||
|
PrevNextButton.prototype = Object.create( Unipointer.prototype );
|
||||||
|
|
||||||
|
PrevNextButton.prototype._create = function() {
|
||||||
|
// properties
|
||||||
|
this.isEnabled = true;
|
||||||
|
this.isPrevious = this.direction == -1;
|
||||||
|
var leftDirection = this.parent.options.rightToLeft ? 1 : -1;
|
||||||
|
this.isLeft = this.direction == leftDirection;
|
||||||
|
|
||||||
|
var element = this.element = document.createElement('button');
|
||||||
|
element.className = 'flickity-button flickity-prev-next-button';
|
||||||
|
element.className += this.isPrevious ? ' previous' : ' next';
|
||||||
|
// prevent button from submitting form http://stackoverflow.com/a/10836076/182183
|
||||||
|
element.setAttribute( 'type', 'button' );
|
||||||
|
// init as disabled
|
||||||
|
this.disable();
|
||||||
|
|
||||||
|
element.setAttribute( 'aria-label', this.isPrevious ? 'Previous' : 'Next' );
|
||||||
|
|
||||||
|
// create arrow
|
||||||
|
var svg = this.createSVG();
|
||||||
|
element.appendChild( svg );
|
||||||
|
// events
|
||||||
|
this.parent.on( 'select', this.update.bind( this ) );
|
||||||
|
this.on( 'pointerDown', this.parent.childUIPointerDown.bind( this.parent ) );
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.activate = function() {
|
||||||
|
this.bindStartEvent( this.element );
|
||||||
|
this.element.addEventListener( 'click', this );
|
||||||
|
// add to DOM
|
||||||
|
this.parent.element.appendChild( this.element );
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.deactivate = function() {
|
||||||
|
// remove from DOM
|
||||||
|
this.parent.element.removeChild( this.element );
|
||||||
|
// click events
|
||||||
|
this.unbindStartEvent( this.element );
|
||||||
|
this.element.removeEventListener( 'click', this );
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.createSVG = function() {
|
||||||
|
var svg = document.createElementNS( svgURI, 'svg');
|
||||||
|
svg.setAttribute( 'class', 'flickity-button-icon' );
|
||||||
|
svg.setAttribute( 'viewBox', '0 0 100 100' );
|
||||||
|
var path = document.createElementNS( svgURI, 'path');
|
||||||
|
var pathMovements = getArrowMovements( this.parent.options.arrowShape );
|
||||||
|
path.setAttribute( 'd', pathMovements );
|
||||||
|
path.setAttribute( 'class', 'arrow' );
|
||||||
|
// rotate arrow
|
||||||
|
if ( !this.isLeft ) {
|
||||||
|
path.setAttribute( 'transform', 'translate(100, 100) rotate(180) ' );
|
||||||
|
}
|
||||||
|
svg.appendChild( path );
|
||||||
|
return svg;
|
||||||
|
};
|
||||||
|
|
||||||
|
// get SVG path movmement
|
||||||
|
function getArrowMovements( shape ) {
|
||||||
|
// use shape as movement if string
|
||||||
|
if ( typeof shape == 'string' ) {
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
// create movement string
|
||||||
|
return 'M ' + shape.x0 + ',50' +
|
||||||
|
' L ' + shape.x1 + ',' + ( shape.y1 + 50 ) +
|
||||||
|
' L ' + shape.x2 + ',' + ( shape.y2 + 50 ) +
|
||||||
|
' L ' + shape.x3 + ',50 ' +
|
||||||
|
' L ' + shape.x2 + ',' + ( 50 - shape.y2 ) +
|
||||||
|
' L ' + shape.x1 + ',' + ( 50 - shape.y1 ) +
|
||||||
|
' Z';
|
||||||
|
}
|
||||||
|
|
||||||
|
PrevNextButton.prototype.handleEvent = utils.handleEvent;
|
||||||
|
|
||||||
|
PrevNextButton.prototype.onclick = function() {
|
||||||
|
if ( !this.isEnabled ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.parent.uiChange();
|
||||||
|
var method = this.isPrevious ? 'previous' : 'next';
|
||||||
|
this.parent[ method ]();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
PrevNextButton.prototype.enable = function() {
|
||||||
|
if ( this.isEnabled ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.element.disabled = false;
|
||||||
|
this.isEnabled = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.disable = function() {
|
||||||
|
if ( !this.isEnabled ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.element.disabled = true;
|
||||||
|
this.isEnabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.update = function() {
|
||||||
|
// index of first or last slide, if previous or next
|
||||||
|
var slides = this.parent.slides;
|
||||||
|
// enable is wrapAround and at least 2 slides
|
||||||
|
if ( this.parent.options.wrapAround && slides.length > 1 ) {
|
||||||
|
this.enable();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var lastIndex = slides.length ? slides.length - 1 : 0;
|
||||||
|
var boundIndex = this.isPrevious ? 0 : lastIndex;
|
||||||
|
var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
|
||||||
|
this[ method ]();
|
||||||
|
};
|
||||||
|
|
||||||
|
PrevNextButton.prototype.destroy = function() {
|
||||||
|
this.deactivate();
|
||||||
|
this.allOff();
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- Flickity prototype -------------------------- //
|
||||||
|
|
||||||
|
utils.extend( Flickity.defaults, {
|
||||||
|
prevNextButtons: true,
|
||||||
|
arrowShape: {
|
||||||
|
x0: 10,
|
||||||
|
x1: 60, y1: 50,
|
||||||
|
x2: 70, y2: 40,
|
||||||
|
x3: 30
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Flickity.createMethods.push('_createPrevNextButtons');
|
||||||
|
var proto = Flickity.prototype;
|
||||||
|
|
||||||
|
proto._createPrevNextButtons = function() {
|
||||||
|
if ( !this.options.prevNextButtons ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prevButton = new PrevNextButton( -1, this );
|
||||||
|
this.nextButton = new PrevNextButton( 1, this );
|
||||||
|
|
||||||
|
this.on( 'activate', this.activatePrevNextButtons );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.activatePrevNextButtons = function() {
|
||||||
|
this.prevButton.activate();
|
||||||
|
this.nextButton.activate();
|
||||||
|
this.on( 'deactivate', this.deactivatePrevNextButtons );
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.deactivatePrevNextButtons = function() {
|
||||||
|
this.prevButton.deactivate();
|
||||||
|
this.nextButton.deactivate();
|
||||||
|
this.off( 'deactivate', this.deactivatePrevNextButtons );
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- -------------------------- //
|
||||||
|
|
||||||
|
Flickity.PrevNextButton = PrevNextButton;
|
||||||
|
|
||||||
|
return Flickity;
|
||||||
|
|
||||||
|
}));
|
||||||
74
node_modules/flickity/js/slide.js
generated
vendored
Normal file
74
node_modules/flickity/js/slide.js
generated
vendored
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
// slide
|
||||||
|
( function( window, factory ) {
|
||||||
|
// universal module definition
|
||||||
|
/* jshint strict: false */
|
||||||
|
if ( typeof define == 'function' && define.amd ) {
|
||||||
|
// AMD
|
||||||
|
define( factory );
|
||||||
|
} else if ( typeof module == 'object' && module.exports ) {
|
||||||
|
// CommonJS
|
||||||
|
module.exports = factory();
|
||||||
|
} else {
|
||||||
|
// browser global
|
||||||
|
window.Flickity = window.Flickity || {};
|
||||||
|
window.Flickity.Slide = factory();
|
||||||
|
}
|
||||||
|
|
||||||
|
}( window, function factory() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function Slide( parent ) {
|
||||||
|
this.parent = parent;
|
||||||
|
this.isOriginLeft = parent.originSide == 'left';
|
||||||
|
this.cells = [];
|
||||||
|
this.outerWidth = 0;
|
||||||
|
this.height = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var proto = Slide.prototype;
|
||||||
|
|
||||||
|
proto.addCell = function( cell ) {
|
||||||
|
this.cells.push( cell );
|
||||||
|
this.outerWidth += cell.size.outerWidth;
|
||||||
|
this.height = Math.max( cell.size.outerHeight, this.height );
|
||||||
|
// first cell stuff
|
||||||
|
if ( this.cells.length == 1 ) {
|
||||||
|
this.x = cell.x; // x comes from first cell
|
||||||
|
var beginMargin = this.isOriginLeft ? 'marginLeft' : 'marginRight';
|
||||||
|
this.firstMargin = cell.size[ beginMargin ];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.updateTarget = function() {
|
||||||
|
var endMargin = this.isOriginLeft ? 'marginRight' : 'marginLeft';
|
||||||
|
var lastCell = this.getLastCell();
|
||||||
|
var lastMargin = lastCell ? lastCell.size[ endMargin ] : 0;
|
||||||
|
var slideWidth = this.outerWidth - ( this.firstMargin + lastMargin );
|
||||||
|
this.target = this.x + this.firstMargin + slideWidth * this.parent.cellAlign;
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getLastCell = function() {
|
||||||
|
return this.cells[ this.cells.length - 1 ];
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.select = function() {
|
||||||
|
this.cells.forEach( function( cell ) {
|
||||||
|
cell.select();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.unselect = function() {
|
||||||
|
this.cells.forEach( function( cell ) {
|
||||||
|
cell.unselect();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
proto.getCellElements = function() {
|
||||||
|
return this.cells.map( function( cell ) {
|
||||||
|
return cell.element;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return Slide;
|
||||||
|
|
||||||
|
}));
|
||||||
87
node_modules/flickity/package.json
generated
vendored
Normal file
87
node_modules/flickity/package.json
generated
vendored
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"_from": "flickity",
|
||||||
|
"_id": "flickity@2.2.1",
|
||||||
|
"_inBundle": false,
|
||||||
|
"_integrity": "sha512-fCZJGNqabgDrIhaUBqt2ydE8c5V6iiB3KQAf6dH3Z45MoDUm7g6+uZmteN0aLV9pzVItNqCbfOJQjsJM/rHuSA==",
|
||||||
|
"_location": "/flickity",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"type": "tag",
|
||||||
|
"registry": true,
|
||||||
|
"raw": "flickity",
|
||||||
|
"name": "flickity",
|
||||||
|
"escapedName": "flickity",
|
||||||
|
"rawSpec": "",
|
||||||
|
"saveSpec": null,
|
||||||
|
"fetchSpec": "latest"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"#USER",
|
||||||
|
"/"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/flickity/-/flickity-2.2.1.tgz",
|
||||||
|
"_shasum": "81126e3d656cb54577358a5f959ffdbda088e670",
|
||||||
|
"_spec": "flickity",
|
||||||
|
"_where": "/var/www/html",
|
||||||
|
"author": {
|
||||||
|
"name": "Metafizzy"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/metafizzy/flickity/issues"
|
||||||
|
},
|
||||||
|
"bundleDependencies": false,
|
||||||
|
"dependencies": {
|
||||||
|
"desandro-matches-selector": "^2.0.0",
|
||||||
|
"ev-emitter": "^1.1.1",
|
||||||
|
"fizzy-ui-utils": "^2.0.7",
|
||||||
|
"get-size": "^2.0.3",
|
||||||
|
"unidragger": "^2.3.0",
|
||||||
|
"unipointer": "^2.3.0"
|
||||||
|
},
|
||||||
|
"deprecated": false,
|
||||||
|
"description": "Touch, responsive, flickable carousels",
|
||||||
|
"devDependencies": {
|
||||||
|
"chalk": "^2.4.2",
|
||||||
|
"flickity-as-nav-for": "^2.0.0",
|
||||||
|
"flickity-imagesloaded": "^2.0.0",
|
||||||
|
"gulp": "^4.0.2",
|
||||||
|
"gulp-clean-css": "^4.2.0",
|
||||||
|
"gulp-jshint": "^2.1.0",
|
||||||
|
"gulp-json-lint": "^0.1.0",
|
||||||
|
"gulp-rename": "^1.4.0",
|
||||||
|
"gulp-replace": "^1.0.0",
|
||||||
|
"gulp-requirejs-optimize": "github:metafizzy/gulp-requirejs-optimize",
|
||||||
|
"gulp-uglify": "^3.0.2",
|
||||||
|
"gulp-util": "^3.0.8",
|
||||||
|
"jquery-bridget": "^2.0.0",
|
||||||
|
"jshint": "^2.10.2",
|
||||||
|
"merge2": "^1.2.3",
|
||||||
|
"minimist": "^1.2.0"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"test": "test"
|
||||||
|
},
|
||||||
|
"homepage": "https://flickity.metafizzy.co",
|
||||||
|
"keywords": [
|
||||||
|
"touch",
|
||||||
|
"responsive",
|
||||||
|
"flick",
|
||||||
|
"slider",
|
||||||
|
"carousel",
|
||||||
|
"gallery",
|
||||||
|
"DOM",
|
||||||
|
"browser"
|
||||||
|
],
|
||||||
|
"license": "GPL-3.0",
|
||||||
|
"main": "js/index.js",
|
||||||
|
"name": "flickity",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/metafizzy/flickity.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"View test/ in browser\" && exit 1"
|
||||||
|
},
|
||||||
|
"style": "css/flickity.css",
|
||||||
|
"version": "2.2.1"
|
||||||
|
}
|
||||||
118
node_modules/flickity/sandbox/adaptive-height.html
generated
vendored
Normal file
118
node_modules/flickity/sandbox/adaptive-height.html
generated
vendored
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>slides</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
border: 1px solid;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-viewport {
|
||||||
|
overflow: visible;
|
||||||
|
transition: height 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell {
|
||||||
|
width: 32%;
|
||||||
|
height: 100px;
|
||||||
|
background: #BDF;
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell.is-selected {
|
||||||
|
background: #68F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell--height2 { height: 200px; }
|
||||||
|
.carousel__cell--height3 { height: 300px; }
|
||||||
|
.carousel__cell--height4 { height: 400px; }
|
||||||
|
|
||||||
|
/* ---- ---- */
|
||||||
|
|
||||||
|
.image-carousel img {
|
||||||
|
display: block;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>slides</h1>
|
||||||
|
|
||||||
|
<div class="carousel carousel1">
|
||||||
|
<div class="carousel__cell carousel__cell--height2">0</div>
|
||||||
|
<div class="carousel__cell">1</div>
|
||||||
|
<div class="carousel__cell">2</div>
|
||||||
|
<div class="carousel__cell carousel__cell--height2">3</div>
|
||||||
|
<div class="carousel__cell carousel__cell--height3">4</div>
|
||||||
|
<div class="carousel__cell">5</div>
|
||||||
|
<div class="carousel__cell carousel__cell--height4">6</div>
|
||||||
|
<div class="carousel__cell">7</div>
|
||||||
|
<div class="carousel__cell carousel__cell--height3">8</div>
|
||||||
|
<div class="carousel__cell">9</div>
|
||||||
|
<div class="carousel__cell">10</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel image-carousel">
|
||||||
|
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||||
|
<img src="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<img src="http://i.imgur.com/bwy74ok.jpg" />
|
||||||
|
<img src="http://i.imgur.com/bAZWoqx.jpg" />
|
||||||
|
<img src="http://i.imgur.com/PgmEBSB.jpg" />
|
||||||
|
<img src="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<img src="http://i.imgur.com/LkmcILl.jpg" />
|
||||||
|
<img src="http://i.imgur.com/hODreXI.jpg" />
|
||||||
|
<img src="http://i.imgur.com/UORFJ3w.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var flkty = new Flickity( '.carousel1', {
|
||||||
|
adaptiveHeight: true,
|
||||||
|
// groupCells: true,
|
||||||
|
// wrapAround: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
var imgFlkty = new Flickity( '.image-carousel', {
|
||||||
|
adaptiveHeight: true
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
imgFlkty.reposition();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
274
node_modules/flickity/sandbox/add-remove.html
generated
vendored
Normal file
274
node_modules/flickity/sandbox/add-remove.html
generated
vendored
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>add/remove cells</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.cell {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-button {
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>add/remove cells</h1>
|
||||||
|
|
||||||
|
<div id="demo1" class="demo">
|
||||||
|
<div class="container variable-width js-flickity">
|
||||||
|
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
<button class="insert-button">Insert</button>
|
||||||
|
<button class="append-button">Append</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>freeScroll</h2>
|
||||||
|
|
||||||
|
<div id="demo2" class="demo">
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "freeScroll": true }'>
|
||||||
|
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
<button class="insert-button">Insert</button>
|
||||||
|
<button class="append-button">Append</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>wrapAround</h2>
|
||||||
|
|
||||||
|
<div id="demo3" class="demo">
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true }'>
|
||||||
|
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
<button class="insert-button">Insert</button>
|
||||||
|
<button class="append-button">Append</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>wrapAround, freeScroll</h2>
|
||||||
|
|
||||||
|
<div id="demo4" class="demo">
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
|
||||||
|
<div class="cell n6"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n5 w2"><b>2</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n4"><b>3</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n3 w3"><b>4</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n2"><b>5</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
<button class="insert-button">Insert</button>
|
||||||
|
<button class="append-button">Append</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>contain</h2>
|
||||||
|
|
||||||
|
<div id="demo5" class="demo">
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true }'>
|
||||||
|
<div class="cell n1 w3"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n2"><b>2</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n3 w3"><b>3</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n4"><b>4</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n5 w2"><b>5</b><button class="remove-button">×</button></div>
|
||||||
|
<div class="cell n6 w2"><b>6</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
<button class="insert-button">Insert</button>
|
||||||
|
<button class="append-button">Append</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>reposition</h2>
|
||||||
|
|
||||||
|
<div id="reposition">
|
||||||
|
<div class="container variable-width">
|
||||||
|
<div class="cell w2"><b>1</b></div>
|
||||||
|
<div class="cell"><b>2</b></div>
|
||||||
|
<div class="cell w3"><b>3</b></div>
|
||||||
|
<div class="cell"><b>4</b></div>
|
||||||
|
<div class="cell"><b>5</b></div>
|
||||||
|
<div class="cell w2"><b>6</b></div>
|
||||||
|
<div class="cell"><b>7</b></div>
|
||||||
|
<div class="cell w2"><b>8</b></div>
|
||||||
|
<div class="cell"><b>9</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>prepend with single #492</h2>
|
||||||
|
<div id="prepend-single">
|
||||||
|
<div class="container variable-width">
|
||||||
|
<div class="cell n1"><b>1</b><button class="remove-button">×</button></div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="prepend-button">Prepend</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var cellCount = 6;
|
||||||
|
|
||||||
|
function randInt( num ) {
|
||||||
|
return Math.floor( Math.random() * num );
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandom( ary ) {
|
||||||
|
var index = Math.floor( Math.random() * ary.length );
|
||||||
|
return ary[ index ];
|
||||||
|
}
|
||||||
|
|
||||||
|
var widthClasses = [ '', 'w2', 'w3' ];
|
||||||
|
var nClasses = 'n1 n2 n3 n4 n5 n6'.split(' ');
|
||||||
|
|
||||||
|
function makeCell() {
|
||||||
|
var cell = document.createElement('div');
|
||||||
|
cell.className = 'cell ' + getRandom( widthClasses ) + ' ' + getRandom( nClasses );
|
||||||
|
var b = document.createElement('b');
|
||||||
|
b.textContent = ++cellCount;
|
||||||
|
cell.appendChild( b );
|
||||||
|
var removeButton = document.createElement('button');
|
||||||
|
removeButton.className = 'remove-button';
|
||||||
|
removeButton.textContent = '×';
|
||||||
|
cell.appendChild( removeButton );
|
||||||
|
return cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getParent( elem, selector ) {
|
||||||
|
while ( elem != document.body ) {
|
||||||
|
elem = elem.parentNode;
|
||||||
|
if ( matchesSelector( elem, selector ) ) {
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onContainerClick( event ) {
|
||||||
|
if ( event.target.className != 'remove-button' ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
var cellElement = getParent( event.target, '.cell' );
|
||||||
|
var container = getParent( event.target, '.container' );
|
||||||
|
var flkty = Flickity.data( container );
|
||||||
|
flkty.remove( cellElement );
|
||||||
|
}
|
||||||
|
|
||||||
|
function getParentFlickity( elem ) {
|
||||||
|
var demo = getParent( elem, '.demo' );
|
||||||
|
return Flickity.data( demo.querySelector('.container') );
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPrependClick( event ) {
|
||||||
|
var flkty = getParentFlickity( event.target );
|
||||||
|
flkty.prepend([ makeCell(), makeCell(), makeCell() ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInsertClick( event ) {
|
||||||
|
var flkty = getParentFlickity( event.target );
|
||||||
|
flkty.insert([ makeCell(), makeCell(), makeCell() ], 3 );
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAppendClick( event ) {
|
||||||
|
var flkty = getParentFlickity( event.target );
|
||||||
|
flkty.append([ makeCell(), makeCell(), makeCell() ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// init
|
||||||
|
var demos = document.querySelectorAll('.demo');
|
||||||
|
for ( var i=0; i < demos.length; i++ ) {
|
||||||
|
var demo = demos[i];
|
||||||
|
demo.querySelector('.container').addEventListener( 'click', onContainerClick );
|
||||||
|
demo.querySelector('.prepend-button').addEventListener( 'click', onPrependClick );
|
||||||
|
demo.querySelector('.insert-button').addEventListener( 'click', onInsertClick );
|
||||||
|
demo.querySelector('.append-button').addEventListener( 'click', onAppendClick );
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----- reposition ----- //
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var flkty = new Flickity('#reposition .container');
|
||||||
|
flkty.on( 'staticClick', function( event, pointer, cellElem ) {
|
||||||
|
cellElem.classList.toggle('w3');
|
||||||
|
flkty.reposition();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.mapTargets = function() {
|
||||||
|
return flkty.slides.map( function( slide ) {
|
||||||
|
return ~~slide.target;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ----- prepend single, #492 ----- //
|
||||||
|
|
||||||
|
( function() {
|
||||||
|
var demo = document.querySelector('#prepend-single');
|
||||||
|
var flkty = new Flickity( demo.querySelector('.container') );
|
||||||
|
demo.querySelector('.prepend-button').onclick = function() {
|
||||||
|
flkty.prepend( makeCell() );
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
77
node_modules/flickity/sandbox/ajax.html
generated
vendored
Normal file
77
node_modules/flickity/sandbox/ajax.html
generated
vendored
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>ajax</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<style>
|
||||||
|
.gallery-cell {
|
||||||
|
width: auto;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
.gallery-cell img {
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>ajax</h1>
|
||||||
|
|
||||||
|
<div class="gallery"></div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
<script src="../bower_components/imagesloaded/imagesloaded.js"></script>
|
||||||
|
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../bower_components/flickity-imagesloaded/flickity-imagesloaded.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function ($) {
|
||||||
|
var url = "http://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=?&extras=url_n&per_page=10";
|
||||||
|
|
||||||
|
$.getJSON(
|
||||||
|
url).done(function (data) {
|
||||||
|
var items = data.items;
|
||||||
|
items.forEach(function (item) {
|
||||||
|
var html = "<div class=\"gallery-cell\"><img src=\"" + item.media.m + "\" /></div>";
|
||||||
|
$('.gallery').append(html);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.gallery').flickity({
|
||||||
|
contain: true,
|
||||||
|
freeScroll: true,
|
||||||
|
friction: 0.2,
|
||||||
|
imagesLoaded: true,
|
||||||
|
prevNextButtons: false,
|
||||||
|
pageDots: false,
|
||||||
|
wrapAround: true
|
||||||
|
});
|
||||||
|
$(window).on('staticClick.flickity', function (event, pointer, clickedCellIndex, clickedCellElem) {
|
||||||
|
console.log(clickedCellIndex, clickedCellElem);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
214
node_modules/flickity/sandbox/basic.html
generated
vendored
Normal file
214
node_modules/flickity/sandbox/basic.html
generated
vendored
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>basic1</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#gallery3,
|
||||||
|
#gallery3 .cell,
|
||||||
|
#gallery3 input,
|
||||||
|
#gallery3 button {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery3 .cell {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery3 p { margin: 0 0 10px; }
|
||||||
|
|
||||||
|
/*#gallery6 .cell { margin: 0 40px; }*/
|
||||||
|
|
||||||
|
@media screen and ( min-width: 900px ) {
|
||||||
|
#gallery5 {
|
||||||
|
background: #DDF;
|
||||||
|
}
|
||||||
|
#gallery5:after {
|
||||||
|
content: 'flickity';
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>basic1</h1>
|
||||||
|
|
||||||
|
<div id="full-width" class="container">
|
||||||
|
<div class="cell" n1></div>
|
||||||
|
<div class="cell" n2></div>
|
||||||
|
<div class="cell" n3></div>
|
||||||
|
<div class="cell" n4></div>
|
||||||
|
<div class="cell" n5></div>
|
||||||
|
<div class="cell" n6></div>
|
||||||
|
<div class="cell" n7></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="half-width" class="container">
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery3" class="container">
|
||||||
|
<div class="cell">
|
||||||
|
<select>
|
||||||
|
<option>Michaelangelo</option>
|
||||||
|
<option>Donatello</option>
|
||||||
|
<option>Leonardo</option>
|
||||||
|
<option>Raphael</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<p><button>Button</button> <a href="http://example.com">go to example.com</a></p>
|
||||||
|
<p><input /></p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" />
|
||||||
|
<input type="radio" name="foo" />
|
||||||
|
<input type="radio" name="foo" />
|
||||||
|
<input type="range" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery4" class="container js-flickity">
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>contain</h2>
|
||||||
|
|
||||||
|
<div id="gallery6" class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>contain, freeScroll</h2>
|
||||||
|
|
||||||
|
<div id="gallery6" class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true, "freeScroll": true }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
<div class="cell n1">7</div>
|
||||||
|
<div class="cell n2 w2">8</div>
|
||||||
|
<div class="cell n3 w3">9</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>contain, few</h2>
|
||||||
|
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true, "cellAlign": "center" }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2">2</div>
|
||||||
|
<!-- <div class="cell n3">3</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>watch, activate >900px</h2>
|
||||||
|
|
||||||
|
<div id="gallery5" class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true, "watchCSS": true }'>
|
||||||
|
<div class="cell n1 w3"></div>
|
||||||
|
<div class="cell n2 w2"></div>
|
||||||
|
<div class="cell n3"></div>
|
||||||
|
<div class="cell n4 w3"></div>
|
||||||
|
<div class="cell n5"></div>
|
||||||
|
<div class="cell n6 w2"></div>
|
||||||
|
<div class="cell n4"></div>
|
||||||
|
<div class="cell n2"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
var flky = window.flky = new Flickity( '#full-width' );
|
||||||
|
|
||||||
|
// flky.on( 'dragMove', function( event, pointer ) {
|
||||||
|
// console.log( event.type, pointer.pageX, pointer.pageY );
|
||||||
|
// });
|
||||||
|
flky.on( 'select', function() {
|
||||||
|
console.log('selected', flky.selectedIndex );
|
||||||
|
});
|
||||||
|
|
||||||
|
flky.on( 'settle', function() {
|
||||||
|
console.log('settled', flky.x );
|
||||||
|
});
|
||||||
|
|
||||||
|
var halfWidthflky = new Flickity( '#half-width', {
|
||||||
|
cellAlign: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
halfWidthflky.on( 'staticClick', function( event, pointer, clickedCellIndex, clickedCellElement ) {
|
||||||
|
console.log( clickedCellIndex, clickedCellElement );
|
||||||
|
})
|
||||||
|
|
||||||
|
new Flickity( '#gallery3', {
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#gallery3 button').onclick = function() {
|
||||||
|
console.log('button click');
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
node_modules/flickity/sandbox/browserify/index.html
generated
vendored
Normal file
30
node_modules/flickity/sandbox/browserify/index.html
generated
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>Browserify</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="../sandbox.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Browserify</h1>
|
||||||
|
|
||||||
|
<div id="gallery" class="container">
|
||||||
|
<div class="cell" n1></div>
|
||||||
|
<div class="cell" n2></div>
|
||||||
|
<div class="cell" n3></div>
|
||||||
|
<div class="cell" n4></div>
|
||||||
|
<div class="cell" n5></div>
|
||||||
|
<div class="cell" n6></div>
|
||||||
|
<div class="cell" n7></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="bundle.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
node_modules/flickity/sandbox/browserify/main.js
generated
vendored
Normal file
3
node_modules/flickity/sandbox/browserify/main.js
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
var Flickity = require('../../js/index');
|
||||||
|
|
||||||
|
new Flickity('#gallery');
|
||||||
16
node_modules/flickity/sandbox/button.html
generated
vendored
Normal file
16
node_modules/flickity/sandbox/button.html
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>button</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>button</h1>
|
||||||
|
|
||||||
|
<button type="button">Button</button>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
96
node_modules/flickity/sandbox/freescroll.html
generated
vendored
Normal file
96
node_modules/flickity/sandbox/freescroll.html
generated
vendored
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>freescroll</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<style>
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body { font-family: sans-serif; }
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
background: #FAFAFA;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-cell {
|
||||||
|
width: 180px;
|
||||||
|
height: 200px;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: #8C8;
|
||||||
|
counter-increment: gallery-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-cell.is-selected {
|
||||||
|
background: #F90;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* cell number */
|
||||||
|
.gallery-cell:before {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
content: counter(gallery-cell);
|
||||||
|
line-height: 200px;
|
||||||
|
font-size: 80px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>freescroll</h1>
|
||||||
|
|
||||||
|
<div class="gallery js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true, "freeScroll": true }'>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gallery js-flickity"
|
||||||
|
data-flickity-options='{ "contain": true }'>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
<div class="gallery-cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
102
node_modules/flickity/sandbox/group-cells.html
generated
vendored
Normal file
102
node_modules/flickity/sandbox/group-cells.html
generated
vendored
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>group cells</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
border: 1px solid;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
/* width: 1000px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell {
|
||||||
|
/* width: 25%;*/
|
||||||
|
width: 32%;
|
||||||
|
height: 200px;
|
||||||
|
background: #BDF;
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.carousel__cell--width2 { width: 40%; }
|
||||||
|
.carousel__cell--width3 { width: 80%; }*/
|
||||||
|
|
||||||
|
.carousel__cell--width2 { width: 66%; }
|
||||||
|
.carousel__cell--width3 { width: 100%; }
|
||||||
|
|
||||||
|
.carousel__cell.is-selected {
|
||||||
|
background: #68F;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
/* fit four */
|
||||||
|
.carousel__cell { width: 23.5%; }
|
||||||
|
.carousel__cell--width2 { width: 49%; }
|
||||||
|
.carousel__cell--width3 { width: 74.5%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>group cells</h1>
|
||||||
|
|
||||||
|
<div class="carousel carousel1">
|
||||||
|
<div class="carousel__cell carousel__cell--width2">0</div>
|
||||||
|
<div class="carousel__cell">1</div>
|
||||||
|
<div class="carousel__cell">2</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width2">3</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width2">4</div>
|
||||||
|
<div class="carousel__cell">5</div>
|
||||||
|
<div class="carousel__cell">6</div>
|
||||||
|
<div class="carousel__cell">7</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width3">8</div>
|
||||||
|
<div class="carousel__cell">9</div>
|
||||||
|
<div class="carousel__cell">10</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var flkty = new Flickity( '.carousel1', {
|
||||||
|
groupCells: true,
|
||||||
|
wrapAround: true,
|
||||||
|
// cellAlign: 'right'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
84
node_modules/flickity/sandbox/jquery.html
generated
vendored
Normal file
84
node_modules/flickity/sandbox/jquery.html
generated
vendored
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>jquery</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>jquery</h1>
|
||||||
|
|
||||||
|
<div id="gallery1" class="container">
|
||||||
|
<div class="cell" n1></div>
|
||||||
|
<div class="cell" n2></div>
|
||||||
|
<div class="cell" n3></div>
|
||||||
|
<div class="cell" n4></div>
|
||||||
|
<div class="cell" n5></div>
|
||||||
|
<div class="cell" n6></div>
|
||||||
|
<div class="cell" n7></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery2" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$( function() {
|
||||||
|
|
||||||
|
var $gallery1 = $('#gallery1').flickity();
|
||||||
|
var flkty = $gallery1.data('flickity');
|
||||||
|
|
||||||
|
// $gallery1.on( 'dragMove', function( event, pointer ) {
|
||||||
|
// console.log( event.type, pointer.pageX, pointer.pageY );
|
||||||
|
// });
|
||||||
|
|
||||||
|
$gallery1.on( 'cellSelect.flickity', function( event ) {
|
||||||
|
console.log('selected', event.type, 'ns:' + event.namespace, flkty.selectedIndex );
|
||||||
|
});
|
||||||
|
|
||||||
|
$gallery1.on( 'settle.flickity', function( event ) {
|
||||||
|
console.log('settled', flkty.x, event.type );
|
||||||
|
});
|
||||||
|
|
||||||
|
$gallery1.on( 'staticClick.flickity', function( event ) {
|
||||||
|
console.log('staticClick', event.type );
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#gallery2').flickity({
|
||||||
|
wrapAround: true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
239
node_modules/flickity/sandbox/lazyload.html
generated
vendored
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>lazyload</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
border: 1px solid;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__image {
|
||||||
|
display: block;
|
||||||
|
margin-right: 20px;
|
||||||
|
height: 400px;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 200px;
|
||||||
|
background: #DDD;
|
||||||
|
transition: opacity 0.8s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__image.flickity-lazyloaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell {
|
||||||
|
width: 80%;
|
||||||
|
height: 400px;
|
||||||
|
margin-right: 20px;
|
||||||
|
background: #DDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell__image {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>lazyload</h1>
|
||||||
|
|
||||||
|
<div class="carousel js-flickity" data-flickity-options='{ "lazyLoad": true }'>
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel js-flickity"
|
||||||
|
data-flickity-options='{ "lazyLoad": 1, "wrapAround": true }'>
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel js-flickity"
|
||||||
|
data-flickity-options='{ "lazyLoad": true }'>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel carousel--jq">
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>srcset</h2>
|
||||||
|
|
||||||
|
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=718 720w,
|
||||||
|
https://picsum.photos/360/270/?image=718 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=517"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=517 720w,
|
||||||
|
https://picsum.photos/360/270/?image=517 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=696"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=696 720w,
|
||||||
|
https://picsum.photos/360/270/?image=696 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=56"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=56 720w,
|
||||||
|
https://picsum.photos/360/270/?image=56 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1084"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=1084 720w,
|
||||||
|
https://picsum.photos/360/270/?image=1084 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<img class="carousel__image"
|
||||||
|
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1080"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=1080 720w,
|
||||||
|
https://picsum.photos/360/270/?image=1080 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=718 720w,
|
||||||
|
https://picsum.photos/360/270/?image=718 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=517 720w,
|
||||||
|
https://picsum.photos/360/270/?image=517 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=696 720w,
|
||||||
|
https://picsum.photos/360/270/?image=696 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=56 720w,
|
||||||
|
https://picsum.photos/360/270/?image=56 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=1084 720w,
|
||||||
|
https://picsum.photos/360/270/?image=1084 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<div class="carousel__cell">
|
||||||
|
<img class="carousel__cell__image"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=1080 720w,
|
||||||
|
https://picsum.photos/360/270/?image=1080 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
|
||||||
|
<!-- dependencies -->
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
<!-- Flickity -->
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var $jQCarousel = $('.carousel--jq').flickity({
|
||||||
|
lazyLoad: true
|
||||||
|
});
|
||||||
|
|
||||||
|
$jQCarousel.on( 'lazyLoad', function( event, cellElem ) {
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
160
node_modules/flickity/sandbox/media.html
generated
vendored
Normal file
160
node_modules/flickity/sandbox/media.html
generated
vendored
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>media</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image-gallery img {
|
||||||
|
display: block;
|
||||||
|
margin-right: 20px;
|
||||||
|
max-height: 400px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#video-gallery1 .cell {
|
||||||
|
height: 300px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery-contained .image-cell {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
background: black;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery-contained .image-cell a {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery-contained .image-cell img {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>media</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="image-gallery1" class="container image-gallery js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": false, "imagesLoaded": true, "percentPosition": false }'>
|
||||||
|
<!-- images from unsplash.com -->
|
||||||
|
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
|
||||||
|
<img src="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<img src="http://i.imgur.com/bwy74ok.jpg" />
|
||||||
|
<img src="http://i.imgur.com/hODreXI.jpg" />
|
||||||
|
<img src="http://i.imgur.com/UORFJ3w.jpg" />
|
||||||
|
<img src="http://i.imgur.com/bAZWoqx.jpg" />
|
||||||
|
<img src="http://i.imgur.com/PgmEBSB.jpg" />
|
||||||
|
<img src="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<img src="http://i.imgur.com/LkmcILl.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="image-gallery2" class="container image-gallery-contained js-flickity"
|
||||||
|
data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
|
||||||
|
<!-- images from unsplash.com -->
|
||||||
|
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/q9zO6tw.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/bwy74ok.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/hODreXI.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/UORFJ3w.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/bAZWoqx.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/PgmEBSB.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/aboaFoB.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="image-cell">
|
||||||
|
<a href="http://example.com"><img src="http://i.imgur.com/LkmcILl.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div id="video-gallery1" class="container video-gallery js-flickity">
|
||||||
|
<div class="cell">
|
||||||
|
<iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/87701971">Yosemite HD II</a> from <a href="http://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<iframe width="400" height="300" src="//www.youtube.com/embed/MvUE4WUtChk" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115014610">The Coast</a> from <a href="http://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<iframe width="400" height="300" src="//www.youtube.com/embed/TmQd6S9wXYQ" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell">
|
||||||
|
<iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115680769">Quids In</a> from <a href="http://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- <div id="demo2" class="demo">
|
||||||
|
<div class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true, "freeScroll": true }'>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script src="../bower_components/imagesloaded/imagesloaded.js"></script>
|
||||||
|
<script src="../bower_components/flickity-imagesloaded/flickity-imagesloaded.js"></script>
|
||||||
|
|
||||||
|
<!-- <script src="../dist/flickity.pkgd.js"></script> -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
fizzyUIUtils.docReady( function() {
|
||||||
|
|
||||||
|
// var imgLoad = imagesLoaded('#image-gallery1');
|
||||||
|
var flkty1 = Flickity.data('#image-gallery1');
|
||||||
|
// imgLoad.on( 'progress', function( instance, image ) {
|
||||||
|
// flkty1.cellSizeChange( image.img );
|
||||||
|
// });
|
||||||
|
|
||||||
|
flkty1.on( 'staticClick', function( event, pointer ) {
|
||||||
|
console.log( event.target );
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
node_modules/flickity/sandbox/requirejs/index.html
generated
vendored
Normal file
30
node_modules/flickity/sandbox/requirejs/index.html
generated
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>RequireJS</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="../sandbox.css" />
|
||||||
|
|
||||||
|
<script data-main="main" src="https://unpkg.com/requirejs@2/require.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>single</h1>
|
||||||
|
|
||||||
|
<div id="gallery" class="container">
|
||||||
|
<div class="cell" n1></div>
|
||||||
|
<div class="cell" n2></div>
|
||||||
|
<div class="cell" n3></div>
|
||||||
|
<div class="cell" n4></div>
|
||||||
|
<div class="cell" n5></div>
|
||||||
|
<div class="cell" n6></div>
|
||||||
|
<div class="cell" n7></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
node_modules/flickity/sandbox/requirejs/main.js
generated
vendored
Normal file
22
node_modules/flickity/sandbox/requirejs/main.js
generated
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
/*jshint strict: false */
|
||||||
|
/*global requirejs: false*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
// bower components
|
||||||
|
requirejs.config({
|
||||||
|
baseUrl: '../../bower_components'
|
||||||
|
});
|
||||||
|
|
||||||
|
requirejs( [ '../js/index' ], function( Flickity ) {
|
||||||
|
new Flickity('#gallery');
|
||||||
|
});
|
||||||
|
// */
|
||||||
|
|
||||||
|
// /*
|
||||||
|
// pkgd
|
||||||
|
requirejs( [
|
||||||
|
'../../dist/flickity.pkgd.js'
|
||||||
|
], function( Flickity ) {
|
||||||
|
new Flickity('#gallery');
|
||||||
|
});
|
||||||
|
// */
|
||||||
71
node_modules/flickity/sandbox/right-to-left.html
generated
vendored
Normal file
71
node_modules/flickity/sandbox/right-to-left.html
generated
vendored
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>right to left</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.variable-width .cell { margin: 0 0 0 4%; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>right to left</h1>
|
||||||
|
|
||||||
|
<div id="gallery1" class="container variable-width">
|
||||||
|
<div class="cell n1"><b>1</b></div>
|
||||||
|
<div class="cell n2 w2"><b>2</b></div>
|
||||||
|
<div class="cell n3 w3"><b>3</b></div>
|
||||||
|
<div class="cell n4"><b>4</b></div>
|
||||||
|
<div class="cell n5 w2"><b>5</b></div>
|
||||||
|
<div class="cell n6"><b>6</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery2" class="container variable-width">
|
||||||
|
<div class="cell n1"><b>1</b></div>
|
||||||
|
<div class="cell n2 w2"><b>2</b></div>
|
||||||
|
<div class="cell n3 w3"><b>3</b></div>
|
||||||
|
<div class="cell n4"><b>4</b></div>
|
||||||
|
<div class="cell n5 w2"><b>5</b></div>
|
||||||
|
<div class="cell n6"><b>6</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
var flky = window.flky = new Flickity( '#gallery1', {
|
||||||
|
wrapAround: true,
|
||||||
|
rightToLeft: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var flky2 = new Flickity( '#gallery2', {
|
||||||
|
rightToLeft: true
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
91
node_modules/flickity/sandbox/sandbox.css
generated
vendored
Normal file
91
node_modules/flickity/sandbox/sandbox.css
generated
vendored
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
border: 1px solid;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:focus { border: 1px blue dotted; }
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
border: 0px solid white;
|
||||||
|
background: #CCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.is-selected {
|
||||||
|
outline: 4px solid hsla(0, 0%, 0%, 0.25);
|
||||||
|
outline-offset: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell:nth-child(6n) { background: hsl(0, 80%, 70%); }
|
||||||
|
.cell:nth-child(6n+1) { background: hsl(60, 80%, 70%); }
|
||||||
|
.cell:nth-child(6n+2) { background: hsl(120, 80%, 70%); }
|
||||||
|
.cell:nth-child(6n+3) { background: hsl(180, 80%, 70%); }
|
||||||
|
.cell:nth-child(6n+4) { background: hsl(240, 80%, 70%); }
|
||||||
|
.cell:nth-child(6n+5) { background: hsl(300, 80%, 70%); }
|
||||||
|
|
||||||
|
.cell.n1 { background: #D22; background: hsl(0, 80%, 70%); }
|
||||||
|
.cell.n2 { background: #DD2; background: hsl(60, 80%, 70%); }
|
||||||
|
.cell.n3 { background: #2D2; background: hsl(120, 80%, 70%); }
|
||||||
|
.cell.n4 { background: #2DD; background: hsl(180, 80%, 70%); }
|
||||||
|
.cell.n5 { background: #22D; background: hsl(240, 80%, 70%); }
|
||||||
|
.cell.n6 { background: #D2D; background: hsl(300, 80%, 70%); }
|
||||||
|
|
||||||
|
#half-width .cell {
|
||||||
|
width: 48%;
|
||||||
|
margin-right: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variable-width .cell {
|
||||||
|
width: 20%;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variable-width .cell.w2 { width: 30%; }
|
||||||
|
.variable-width .cell.w3 { width: 40%; }
|
||||||
|
|
||||||
|
.fixed-width .cell {
|
||||||
|
width: 200px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* big number */
|
||||||
|
.cell b {
|
||||||
|
display: block;
|
||||||
|
font-size: 100px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- couning ---- */
|
||||||
|
.counting {
|
||||||
|
counter-reset: cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counting .cell:before {
|
||||||
|
counter-increment: cell;
|
||||||
|
content: counter(cell);
|
||||||
|
display: block;
|
||||||
|
font-size: 100px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
267
node_modules/flickity/sandbox/scroll-event.html
generated
vendored
Normal file
267
node_modules/flickity/sandbox/scroll-event.html
generated
vendored
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>scroll event</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
border: 1px solid;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
/* width: 1000px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__cell {
|
||||||
|
/* width: 25%;*/
|
||||||
|
width: 32%;
|
||||||
|
height: 200px;
|
||||||
|
background: #BDF;
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.carousel__cell--width2 { width: 40%; }
|
||||||
|
.carousel__cell--width3 { width: 80%; }*/
|
||||||
|
|
||||||
|
.carousel__cell--width2 { width: 66%; }
|
||||||
|
.carousel__cell--width3 { width: 100%; }
|
||||||
|
|
||||||
|
.carousel__cell.is-selected {
|
||||||
|
background: #68F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 10px;
|
||||||
|
width: 0;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
/* fit four */
|
||||||
|
.carousel__cell { width: 23.5%; }
|
||||||
|
.carousel__cell--width2 { width: 49%; }
|
||||||
|
.carousel__cell--width3 { width: 74.5%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ---- parallax ---- */
|
||||||
|
|
||||||
|
.parallax {
|
||||||
|
margin-top: 100px;
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__carousel__cell {
|
||||||
|
background: hsla(0, 100%, 50%, 0.4);
|
||||||
|
height: 220px;
|
||||||
|
width: 50%;
|
||||||
|
margin: 40px 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer--bg {
|
||||||
|
top: 70px;
|
||||||
|
width: 80%;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer--fg {
|
||||||
|
pointer-events: none;
|
||||||
|
width: 125%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer__cell {
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 5%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer__cell:nth-child(1) { left: 0%; }
|
||||||
|
.parallax__layer__cell:nth-child(2) { left: 60%; }
|
||||||
|
.parallax__layer__cell:nth-child(3) { left: 120%; }
|
||||||
|
.parallax__layer__cell:nth-child(4) { left: 180%; }
|
||||||
|
.parallax__layer__cell:nth-child(5) { left: 240%; }
|
||||||
|
|
||||||
|
.parallax__layer__cell--bg {
|
||||||
|
background: hsla(210, 100%, 50%, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layer__cell--fg {
|
||||||
|
background: hsla(60, 100%, 50%, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---- ---- */
|
||||||
|
|
||||||
|
.image-carousel__cell {
|
||||||
|
margin-right: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-carousel__cell img {
|
||||||
|
display: block;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>scroll event</h1>
|
||||||
|
|
||||||
|
<div class="carousel carousel1">
|
||||||
|
<div class="carousel__cell carousel__cell--width2">0</div>
|
||||||
|
<div class="carousel__cell">1</div>
|
||||||
|
<div class="carousel__cell">2</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width2">3</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width2">4</div>
|
||||||
|
<div class="carousel__cell">5</div>
|
||||||
|
<div class="carousel__cell">6</div>
|
||||||
|
<div class="carousel__cell">7</div>
|
||||||
|
<div class="carousel__cell carousel__cell--width3">8</div>
|
||||||
|
<div class="carousel__cell">9</div>
|
||||||
|
<div class="carousel__cell">10</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress-bar"></div>
|
||||||
|
|
||||||
|
<div class="parallax">
|
||||||
|
|
||||||
|
<div class="parallax__layer parallax__layer--bg">
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--bg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="parallax__carousel">
|
||||||
|
<div class="parallax__carousel__cell"></div>
|
||||||
|
<div class="parallax__carousel__cell"></div>
|
||||||
|
<div class="parallax__carousel__cell"></div>
|
||||||
|
<div class="parallax__carousel__cell"></div>
|
||||||
|
<div class="parallax__carousel__cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="parallax__layer parallax__layer--fg">
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||||
|
<div class="parallax__layer__cell parallax__layer__cell--fg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-carousel">
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||||
|
<div class="image-carousel__cell"><img src="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var flkty = new Flickity( '.carousel1', {
|
||||||
|
initialIndex: 2,
|
||||||
|
// groupCells: true,
|
||||||
|
// wrapAround: true,
|
||||||
|
// cellAlign: 'right'
|
||||||
|
});
|
||||||
|
|
||||||
|
var progressBar = document.querySelector('.progress-bar');
|
||||||
|
|
||||||
|
flkty.on( 'scroll', function( progress ) {
|
||||||
|
console.log( progress );
|
||||||
|
var width = Math.max( 0, Math.min( 1, progress ) );
|
||||||
|
progressBar.style.width = width * 100 + '%';
|
||||||
|
});
|
||||||
|
|
||||||
|
flkty.reposition();
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
var paraBG = document.querySelector('.parallax__layer--bg');
|
||||||
|
var paraFG = document.querySelector('.parallax__layer--fg');
|
||||||
|
|
||||||
|
var paraFlkty = new Flickity( '.parallax__carousel', {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var cellRatio = 0.6;
|
||||||
|
var bgRatio = 0.8;
|
||||||
|
var fgRatio = 1.25;
|
||||||
|
|
||||||
|
paraFlkty.on( 'scroll', function( progress ) {
|
||||||
|
// console.log( progress );
|
||||||
|
paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%';
|
||||||
|
paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%';
|
||||||
|
});
|
||||||
|
|
||||||
|
paraFlkty.reposition();
|
||||||
|
|
||||||
|
// ----- ----- //
|
||||||
|
|
||||||
|
|
||||||
|
var imgFlkty = new Flickity( '.image-carousel', {
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
imgFlkty.reposition();
|
||||||
|
}
|
||||||
|
|
||||||
|
var imgs = document.querySelectorAll('.image-carousel img');
|
||||||
|
|
||||||
|
imgFlkty.on( 'scroll', function( progress ) {
|
||||||
|
imgFlkty.slides.forEach( function( slide, i ) {
|
||||||
|
var img = imgs[i];
|
||||||
|
var x = ( slide.target + imgFlkty.x ) * -0.333;
|
||||||
|
img.style.transform = 'translateX( ' + x + 'px)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
node_modules/flickity/sandbox/single.html
generated
vendored
Normal file
54
node_modules/flickity/sandbox/single.html
generated
vendored
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>single</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>single</h1>
|
||||||
|
|
||||||
|
<div id="gallery" class="container">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2">2</div>
|
||||||
|
<div class="cell n3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
<div class="cell n1">7</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
var flkty = window.flkty = new Flickity('#gallery', {
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
node_modules/flickity/sandbox/styles.html
generated
vendored
Normal file
80
node_modules/flickity/sandbox/styles.html
generated
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>styles</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>styles</h1>
|
||||||
|
|
||||||
|
<div class="container carousel1">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container carousel2">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container carousel3">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
docReady( function() {
|
||||||
|
|
||||||
|
new Flickity( '.carousel1', {
|
||||||
|
arrowShape: {
|
||||||
|
x0: 10,
|
||||||
|
x1: 50, y1: 30,
|
||||||
|
x2: 70, y2: 30,
|
||||||
|
x3: 50
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Flickity( '.carousel2', {
|
||||||
|
arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
120
node_modules/flickity/sandbox/tricky-drag.html
generated
vendored
Normal file
120
node_modules/flickity/sandbox/tricky-drag.html
generated
vendored
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>tricky drag</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.carousel {
|
||||||
|
background: #EEE;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-cell {
|
||||||
|
height: 200px;
|
||||||
|
width: 25%;
|
||||||
|
margin: 0 10px;
|
||||||
|
background: #6C6;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-cell b {
|
||||||
|
display: block;
|
||||||
|
font-size: 80px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>tricky drag</h1>
|
||||||
|
|
||||||
|
<div class="carousel carousel--non-drag">
|
||||||
|
<div class="carousel-cell"><b>1</b></div>
|
||||||
|
<div class="carousel-cell"><b>2</b></div>
|
||||||
|
<div class="carousel-cell"><b>3</b></div>
|
||||||
|
<div class="carousel-cell"><b>4</b></div>
|
||||||
|
<div class="carousel-cell"><b>5</b></div>
|
||||||
|
<div class="carousel-cell"><b>6</b></div>
|
||||||
|
<div class="carousel-cell"><b>7</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel carousel--single-cell">
|
||||||
|
<div class="carousel-cell"><b>1</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel carousel--group">
|
||||||
|
<div class="carousel-cell"><b>1</b></div>
|
||||||
|
<div class="carousel-cell"><b>2</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><button class="add-group-cell-button">Add cell</button></p>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var nonDragFlkty = new Flickity( '.carousel--non-drag', {
|
||||||
|
draggable: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
function onStaticClick( event, pointer, cellElem, cellIndex ) {
|
||||||
|
console.log('staticClick', this.element.className, cellIndex );
|
||||||
|
}
|
||||||
|
|
||||||
|
nonDragFlkty.on( 'staticClick', onStaticClick );
|
||||||
|
|
||||||
|
var singleCellFlkty = new Flickity('.carousel--single-cell');
|
||||||
|
singleCellFlkty.on( 'staticClick', onStaticClick );
|
||||||
|
|
||||||
|
var groupCarousel = document.querySelector('.carousel--group');
|
||||||
|
|
||||||
|
var groupFlkty = new Flickity( groupCarousel, {
|
||||||
|
groupCells: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
groupFlkty.on( 'staticClick', function( event, pointer, cellElem, cellIndex ) {
|
||||||
|
if ( cellElem ) {
|
||||||
|
groupFlkty.remove( cellElem );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function makeGroupCell() {
|
||||||
|
var cell = document.createElement('div');
|
||||||
|
cell.className = 'carousel-cell';
|
||||||
|
var b = document.createElement('b');
|
||||||
|
b.textContent = groupFlkty.cells.length + 1;
|
||||||
|
cell.appendChild( b );
|
||||||
|
return cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('.add-group-cell-button').onclick = function() {
|
||||||
|
groupFlkty.append( makeGroupCell() );
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
211
node_modules/flickity/sandbox/v2-sizzle.html
generated
vendored
Normal file
211
node_modules/flickity/sandbox/v2-sizzle.html
generated
vendored
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>v2 sizzle</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" media="screen" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body { font-family: Texta; }
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
.parallax-container {
|
||||||
|
position: relative;
|
||||||
|
width: 360px;
|
||||||
|
height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 40px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flickity-viewport {
|
||||||
|
transition: height 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 360px;
|
||||||
|
height: 200px;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: #8C8;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell--half-width {
|
||||||
|
width: 175px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell--third-width {
|
||||||
|
width: calc((360px - 20px) / 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell--height1 {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell--height2 {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell__word {
|
||||||
|
color: white;
|
||||||
|
font-size: 54px;
|
||||||
|
line-height: 1.0;
|
||||||
|
display: block;
|
||||||
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.cell--half-width .cell__word {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell__word--group { text-align: right; }
|
||||||
|
.cell__word--cells { text-align: left; }
|
||||||
|
|
||||||
|
.cell--parallax { opacity: 0.6; }
|
||||||
|
|
||||||
|
.flickity-prev-next-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-layer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-layer--bg {
|
||||||
|
width: calc((100% + 10px)* 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bg-cell {
|
||||||
|
width: 252px;
|
||||||
|
height: 140px;
|
||||||
|
background: #19F;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
border-radius: 6px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .parallax-bg-cell:nth-child(1) { left: 0px; }
|
||||||
|
.parallax-bg-cell:nth-child(2) { left: 296px; }
|
||||||
|
.parallax-bg-cell:nth-child(3) { left: 592px; }
|
||||||
|
.parallax-bg-cell:nth-child(4) { left: 888px; }*/
|
||||||
|
.parallax-bg-cell:nth-child(1) { left: 1036px; }
|
||||||
|
.parallax-bg-cell:nth-child(2) { left: 1295px; }
|
||||||
|
|
||||||
|
.parallax-layer--fg {
|
||||||
|
width: calc((100% + 10px)* 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-fg-cell {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
font-size: 54px;
|
||||||
|
line-height: 200px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-fg-cell:nth-child(1) { left: 400%; }
|
||||||
|
.parallax-fg-cell:nth-child(2) { left: 500%; }
|
||||||
|
.parallax-fg-cell:nth-child(3) { left: 600%; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="parallax-container">
|
||||||
|
<div class="parallax-layer parallax-layer--bg">
|
||||||
|
<!-- <div class="parallax-bg-cell"></div>
|
||||||
|
<div class="parallax-bg-cell"></div>
|
||||||
|
<div class="parallax-bg-cell"></div>
|
||||||
|
<div class="parallax-bg-cell"></div> -->
|
||||||
|
<div class="parallax-bg-cell"></div>
|
||||||
|
<div class="parallax-bg-cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel">
|
||||||
|
<div class="cell cell--half-width">
|
||||||
|
<span class="cell__word cell__word--group">Group</span>
|
||||||
|
</div>
|
||||||
|
<div class="cell cell--half-width">
|
||||||
|
<span class="cell__word cell__word--cells">cells</span>
|
||||||
|
</div>
|
||||||
|
<div class="cell cell--third-width"></div>
|
||||||
|
<div class="cell cell--third-width"></div>
|
||||||
|
<div class="cell cell--third-width"></div>
|
||||||
|
<div class="cell cell--height1">
|
||||||
|
<span class="cell__word">Adaptive height</span>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
</div>
|
||||||
|
<div class="cell cell--parallax"></div>
|
||||||
|
<div class="cell cell--parallax"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="parallax-layer parallax-layer--fg">
|
||||||
|
<div class="parallax-fg-cell">Parallax</div>
|
||||||
|
<div class="parallax-fg-cell">whoa</div>
|
||||||
|
<div class="parallax-fg-cell">Flickity v2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var flkty = new Flickity( '.carousel', {
|
||||||
|
groupCells: true,
|
||||||
|
adaptiveHeight: true,
|
||||||
|
wrapAround: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
var paraBg = document.querySelector('.parallax-layer--bg');
|
||||||
|
var paraFg = document.querySelector('.parallax-layer--fg');
|
||||||
|
var count = flkty.slides.length - 1;
|
||||||
|
|
||||||
|
flkty.on( 'scroll', function( progress ) {
|
||||||
|
paraBg.style.left = ( 0.5 - ( 0.5 + progress * count ) * 0.7 ) * (37/36) * 100 + '%';
|
||||||
|
paraFg.style.left = ( 0.5 - ( 0.5 + progress * count ) *1.5 ) * (37/36) * 100 + '%';
|
||||||
|
});
|
||||||
|
|
||||||
|
flkty.reposition();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
174
node_modules/flickity/sandbox/wrap-around.html
generated
vendored
Normal file
174
node_modules/flickity/sandbox/wrap-around.html
generated
vendored
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>wrap around</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" />
|
||||||
|
<link rel="stylesheet" href="sandbox.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#no-margin .cell {
|
||||||
|
width: 25%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tight-wrap {
|
||||||
|
width: 200px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tight-wrap .cell {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>wrap around</h1>
|
||||||
|
|
||||||
|
<div id="gallery1" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery2" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6 w3">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Left aligned</h2>
|
||||||
|
|
||||||
|
<div id="gallery6" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Fixed-width cells, pixel-positioning HTML init</h2>
|
||||||
|
|
||||||
|
<div id="gallery7" class="container fixed-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true, "percentPosition": false }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2">2</div>
|
||||||
|
<div class="cell n3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
<div class="cell n1">7</div>
|
||||||
|
<div class="cell n2">8</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>HTML init</h2>
|
||||||
|
|
||||||
|
<div id="gallery3" class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>freeScroll</h2>
|
||||||
|
|
||||||
|
<div id="gallery4" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gallery5" class="container variable-width">
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2 w2">2</div>
|
||||||
|
<div class="cell n3 w3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5 w2">5</div>
|
||||||
|
<div class="cell n6 w3">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>no margin for error</h2>
|
||||||
|
<div id="no-margin" class="container variable-width js-flickity"
|
||||||
|
data-flickity-options='{ "wrapAround": true, "cellAlign": "right" }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2">2</div>
|
||||||
|
<div class="cell n3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
<div class="cell n5">5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>tight wrap #589</h2>
|
||||||
|
<div id="tight-wrap" class="container" data-flickity='{ "wrapAround": true }'>
|
||||||
|
<div class="cell n1">1</div>
|
||||||
|
<div class="cell n2">2</div>
|
||||||
|
<div class="cell n3">3</div>
|
||||||
|
<div class="cell n4">4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
var flky = window.flky = new Flickity( '#gallery1', {
|
||||||
|
wrapAround: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var flky2 = window.flky2 = new Flickity( '#gallery2', {
|
||||||
|
});
|
||||||
|
|
||||||
|
var flky6 = window.flky6 = new Flickity( '#gallery6', {
|
||||||
|
wrapAround: true,
|
||||||
|
cellAlign: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
var flky4 = window.flky4 = new Flickity( '#gallery4', {
|
||||||
|
wrapAround: true,
|
||||||
|
freeScroll: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var flky5 = window.flky5 = new Flickity( '#gallery5', {
|
||||||
|
freeScroll: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
node_modules/flickity/test/.jshintrc
generated
vendored
Normal file
12
node_modules/flickity/test/.jshintrc
generated
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"browser": true,
|
||||||
|
"devel": true,
|
||||||
|
"strict": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"predef": {
|
||||||
|
"Flickity": false,
|
||||||
|
"matchesSelector": false,
|
||||||
|
"QUnit": false
|
||||||
|
}
|
||||||
|
}
|
||||||
85
node_modules/flickity/test/drag.html
generated
vendored
Normal file
85
node_modules/flickity/test/drag.html
generated
vendored
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>Drag tests</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen" />
|
||||||
|
<link rel="stylesheet" href="test.css" media="screen" />
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" media="screen" />
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
padding-right: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#demos {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 420px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../bower_components/qunit/qunit/qunit.js"></script>
|
||||||
|
|
||||||
|
<!-- dependencies -->
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
<!-- <script src="../bower_components/imagesloaded/imagesloaded.js"></script> -->
|
||||||
|
<!-- Flickity source -->
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
<!-- turn off accessibility for these tests
|
||||||
|
was causing bugs with dragging tests -->
|
||||||
|
<script>
|
||||||
|
Flickity.defaults.accessibility = false;
|
||||||
|
</script>
|
||||||
|
<!-- unit tests -->
|
||||||
|
<script src="unit/drag.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
|
||||||
|
<div id="demos">
|
||||||
|
<p><b>drag</b> and <b>drag with wrapAround</b> tests can be buggy. Try running them again.</p>
|
||||||
|
|
||||||
|
<h2>drag</h2>
|
||||||
|
<div id="drag" class="gallery variable-width drag">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>drag wrapAround</h2>
|
||||||
|
<div id="drag-wrap-around" class="gallery variable-width drag">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
316
node_modules/flickity/test/index.html
generated
vendored
Normal file
316
node_modules/flickity/test/index.html
generated
vendored
Normal file
@ -0,0 +1,316 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<title>Flickity tests</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen" />
|
||||||
|
<link rel="stylesheet" href="test.css" media="screen" />
|
||||||
|
<link rel="stylesheet" href="../css/flickity.css" media="screen" />
|
||||||
|
|
||||||
|
<script src="../bower_components/qunit/qunit/qunit.js"></script>
|
||||||
|
|
||||||
|
<!-- dependencies -->
|
||||||
|
<script src="../bower_components/get-size/get-size.js"></script>
|
||||||
|
<!-- <script src="../bower_components/imagesloaded/imagesloaded.js"></script> -->
|
||||||
|
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
|
||||||
|
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||||
|
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||||
|
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||||
|
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||||
|
<!-- Flickity source -->
|
||||||
|
<script src="../js/cell.js"></script>
|
||||||
|
<script src="../js/slide.js"></script>
|
||||||
|
<script src="../js/animate.js"></script>
|
||||||
|
<script src="../js/flickity.js"></script>
|
||||||
|
<script src="../js/drag.js"></script>
|
||||||
|
<script src="../js/prev-next-button.js"></script>
|
||||||
|
<script src="../js/page-dots.js"></script>
|
||||||
|
<script src="../js/player.js"></script>
|
||||||
|
<script src="../js/add-remove-cell.js"></script>
|
||||||
|
<script src="../js/lazyload.js"></script>
|
||||||
|
<!-- turn off accessibility for these tests
|
||||||
|
was causing bugs with dragging tests -->
|
||||||
|
<script>
|
||||||
|
Flickity.defaults.accessibility = false;
|
||||||
|
</script>
|
||||||
|
<!-- unit tests -->
|
||||||
|
<script src="unit/init.js"></script>
|
||||||
|
<script src="unit/cell-selector.js"></script>
|
||||||
|
<script src="unit/empty.js"></script>
|
||||||
|
<script src="unit/get-parent-cell.js"></script>
|
||||||
|
<script src="unit/position-cells.js"></script>
|
||||||
|
<script src="unit/contain.js"></script>
|
||||||
|
<!-- drag tests are buggy. moved to drag.html -->
|
||||||
|
<!-- <script src="unit/drag.js"></script> -->
|
||||||
|
<script src="unit/auto-play.js"></script>
|
||||||
|
<script src="unit/prev-next-buttons.js"></script>
|
||||||
|
<script src="unit/page-dots.js"></script>
|
||||||
|
<script src="unit/get-wrap-cells.js"></script>
|
||||||
|
<script src="unit/watch.js"></script>
|
||||||
|
<script src="unit/resize.js"></script>
|
||||||
|
<script src="unit/add-remove-cells.js"></script>
|
||||||
|
<script src="unit/destroy.js"></script>
|
||||||
|
<script src="unit/lazyload.js"></script>
|
||||||
|
<script src="unit/lazyload-srcset.js"></script>
|
||||||
|
<script src="unit/group-cells.js"></script>
|
||||||
|
<script src="unit/adaptive-height.js"></script>
|
||||||
|
<script src="unit/select-cell.js"></script>
|
||||||
|
<script src="unit/change.js"></script>
|
||||||
|
<script src="unit/initial-index.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
|
||||||
|
<h2>Init</h2>
|
||||||
|
|
||||||
|
<div id="init" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>cellSelector</h2>
|
||||||
|
|
||||||
|
<div id="cell-selector" class="gallery">
|
||||||
|
<p class="not-cell not-cell1">not cell 1</p>
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<p class="not-cell not-cell2">not cell 2</p>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>empty</h2>
|
||||||
|
|
||||||
|
<div id="empty" class="gallery"></div>
|
||||||
|
|
||||||
|
<h2>getParentCell</h2>
|
||||||
|
|
||||||
|
<div id="get-parent-cell" class="gallery">
|
||||||
|
<div class="cell cell1"><span class="child1">1</span></div>
|
||||||
|
<div class="cell"><div><span class="child2">2</span></div></div>
|
||||||
|
<div class="cell cell3">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="outside"></div>
|
||||||
|
|
||||||
|
<h2>position cells</h2>
|
||||||
|
|
||||||
|
<div id="position-cells" class="gallery variable-width">
|
||||||
|
<div class="cell width2">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell width3">3</div>
|
||||||
|
<div class="cell width2">4</div>
|
||||||
|
<div class="cell width3">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>contain</h2>
|
||||||
|
|
||||||
|
<div id="contain" class="gallery variable-width">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell width3">3</div>
|
||||||
|
<div class="cell width2">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>auto-play</h2>
|
||||||
|
<div id="auto-play" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>prev/next buttons</h2>
|
||||||
|
<div id="prev-next-buttons" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>page dots</h2>
|
||||||
|
<div id="page-dots" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>getWrapCells</h2>
|
||||||
|
<div id="get-wrap-cells" class="gallery variable-width">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>watch</h2>
|
||||||
|
<div id="watch" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>resize</h2>
|
||||||
|
<div id="resize" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>add/remove-cells</h2>
|
||||||
|
<div id="add-remove-cells" class="gallery variable-width">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>destroy</h2>
|
||||||
|
<div id="destroy" class="gallery">
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>lazyload</h2>
|
||||||
|
<div id="lazyload" class="gallery">
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||||
|
<img class="img-cell" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||||
|
<img class="img-cell" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
|
||||||
|
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>lazyload srcset</h2>
|
||||||
|
<div id="lazyload-srcset" class="gallery">
|
||||||
|
<div class="cell">
|
||||||
|
<img data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=718 720w,
|
||||||
|
https://picsum.photos/360/270/?image=718 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px" />
|
||||||
|
</div>
|
||||||
|
<img class="img-cell"
|
||||||
|
data-flickity-lazyload-srcset="
|
||||||
|
https://picsum.photos/720/540/?image=517 720w,
|
||||||
|
https://picsum.photos/360/270/?image=517 360w"
|
||||||
|
sizes="(min-width: 1024px) 720px, 360px"
|
||||||
|
/>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>groupCells</h2>
|
||||||
|
<div id="group-cells" class="gallery">
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell cell--width2"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
|
||||||
|
<div class="cell cell--width3"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
|
||||||
|
<div class="cell cell--width2"></div>
|
||||||
|
<div class="cell cell--width2"></div>
|
||||||
|
|
||||||
|
<div class="cell cell--width2"></div>
|
||||||
|
|
||||||
|
<div class="cell cell--width4"></div>
|
||||||
|
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell cell--width2"></div>
|
||||||
|
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>adaptiveHeight</h2>
|
||||||
|
<div id="adaptive-height" class="gallery">
|
||||||
|
<div class="cell cell--height2"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell cell--height3"></div>
|
||||||
|
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell cell--height4"></div>
|
||||||
|
<div class="cell cell--height2"></div>
|
||||||
|
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell cell--height2"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>selectCell</h2>
|
||||||
|
<div id="select-cell" class="gallery">
|
||||||
|
<div class="cell select-cell__0">0</div>
|
||||||
|
<div class="cell select-cell__1">1</div>
|
||||||
|
<div class="cell select-cell__2">2</div>
|
||||||
|
<div class="cell select-cell__3">3</div>
|
||||||
|
<div class="cell select-cell__4">4</div>
|
||||||
|
<div class="cell select-cell__5">5</div>
|
||||||
|
<div class="cell select-cell__6">6</div>
|
||||||
|
<div class="cell select-cell__7">7</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>change</h2>
|
||||||
|
<div id="change" class="gallery">
|
||||||
|
<div class="cell">0</div>
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell">4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>initialIndex</h2>
|
||||||
|
<div id="initial-index" class="gallery variable-width">
|
||||||
|
<div class="cell">0</div>
|
||||||
|
<div class="cell">1</div>
|
||||||
|
<div class="cell">2</div>
|
||||||
|
<div class="cell">3</div>
|
||||||
|
<div class="cell cell--initial">4</div>
|
||||||
|
<div class="cell">5</div>
|
||||||
|
<div class="cell">6</div>
|
||||||
|
<div class="cell">7</div>
|
||||||
|
<div class="cell">8</div>
|
||||||
|
<div class="cell">9</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
70
node_modules/flickity/test/test.css
generated
vendored
Normal file
70
node_modules/flickity/test/test.css
generated
vendored
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
/** { box-sizing: border-box; }*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
border: 1px solid;
|
||||||
|
width: 400px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .cell {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: #F09;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variable-width .cell { width: 25%; } /* 100px */
|
||||||
|
.variable-width .cell.width2 { width: 40%; background: #F90; } /* 160px */
|
||||||
|
.variable-width .cell.width3 { width: 60%; background: #09F; } /* 240px */
|
||||||
|
|
||||||
|
#position-cells.percent-margin .cell { margin: 0 2%; }
|
||||||
|
#position-cells.pixel-margin .cell { margin: 0 10px; }
|
||||||
|
|
||||||
|
/*#drag-wrap-around { position: fixed; top: 0;}*/
|
||||||
|
|
||||||
|
.drag .cell { margin-right: 5%; }
|
||||||
|
|
||||||
|
#watch.has-after:after {
|
||||||
|
content: 'flickity';
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lazyload img {
|
||||||
|
display: block;
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- group-cells ---- */
|
||||||
|
|
||||||
|
#group-cells .cell {
|
||||||
|
width: 100px;
|
||||||
|
/* border: 1px solid;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#group-cells .cell--width2 { width: 200px; }
|
||||||
|
#group-cells .cell--width3 { width: 300px; }
|
||||||
|
#group-cells .cell--width4 { width: 400px; }
|
||||||
|
|
||||||
|
#group-cells.is-expanded { width: 600px; }
|
||||||
|
|
||||||
|
#group-cells .cell:nth-child(2n) { background: #09F; }
|
||||||
|
|
||||||
|
/* ---- adaptive-height ---- */
|
||||||
|
|
||||||
|
#adaptive-height .cell { width: 33.33%; }
|
||||||
|
|
||||||
|
#adaptive-height .cell--height2 { height: 200px; }
|
||||||
|
#adaptive-height .cell--height3 { height: 300px; }
|
||||||
|
#adaptive-height .cell--height4 { height: 400px; }
|
||||||
|
|
||||||
|
#adaptive-height .cell:nth-child(2n) { background: #09F; }
|
||||||
|
|
||||||
|
/* ---- select-cell ---- */
|
||||||
|
|
||||||
|
#select-cell .cell { width: 33.33%; }
|
||||||
29
node_modules/flickity/test/unit/adaptive-height.js
generated
vendored
Normal file
29
node_modules/flickity/test/unit/adaptive-height.js
generated
vendored
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
QUnit.test( 'adaptiveHeight', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var flkty = new Flickity( '#adaptive-height', {
|
||||||
|
adaptiveHeight: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2,1,3, 1,4,2, 1,2,1
|
||||||
|
|
||||||
|
function checkSelectHeight( index, height ) {
|
||||||
|
flkty.select( index, false, true );
|
||||||
|
assert.equal( flkty.viewport.style.height, height + 'px', 'slide ' + index );
|
||||||
|
}
|
||||||
|
|
||||||
|
checkSelectHeight( 0, 200 );
|
||||||
|
checkSelectHeight( 1, 100 );
|
||||||
|
checkSelectHeight( 2, 300 );
|
||||||
|
checkSelectHeight( 3, 100 );
|
||||||
|
checkSelectHeight( 4, 400 );
|
||||||
|
checkSelectHeight( 5, 200 );
|
||||||
|
|
||||||
|
flkty.options.groupCells = true;
|
||||||
|
flkty.resize();
|
||||||
|
|
||||||
|
checkSelectHeight( 0, 300 );
|
||||||
|
checkSelectHeight( 1, 400 );
|
||||||
|
checkSelectHeight( 2, 200 );
|
||||||
|
|
||||||
|
});
|
||||||
88
node_modules/flickity/test/unit/add-remove-cells.js
generated
vendored
Normal file
88
node_modules/flickity/test/unit/add-remove-cells.js
generated
vendored
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
QUnit.test( 'add/remove cells', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function makeCellElem() {
|
||||||
|
var cellElem = document.createElement('div');
|
||||||
|
cellElem.className = 'cell';
|
||||||
|
return cellElem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// position values can be off by 0.1% or 1px
|
||||||
|
function isPositionApprox( value, expected ) {
|
||||||
|
var isPercent = value.indexOf('%') != -1;
|
||||||
|
value = parseFloat( value );
|
||||||
|
var diff = Math.abs( expected - value );
|
||||||
|
return isPercent ? diff < 0.1 : diff <= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var elem = document.querySelector('#add-remove-cells');
|
||||||
|
var flkty = new Flickity( elem );
|
||||||
|
var sliderElem = elem.querySelector('.flickity-slider');
|
||||||
|
|
||||||
|
function checkCellElem( cellElem, index, message ) {
|
||||||
|
assert.equal( sliderElem.children[ index ], cellElem, message + ' cell element in DOM correct' );
|
||||||
|
assert.equal( flkty.cells[ index ].element, cellElem, message + ' element added as cell' );
|
||||||
|
assert.ok( isPositionApprox( cellElem.style.left, index * 25 ), ' element positioned' );
|
||||||
|
}
|
||||||
|
|
||||||
|
// prepend cell element
|
||||||
|
var cellElem = makeCellElem();
|
||||||
|
flkty.prepend( cellElem );
|
||||||
|
checkCellElem( cellElem, 0, 'prepended' );
|
||||||
|
assert.equal( flkty.selectedIndex, 1, 'selectedIndex +1 after prepend' );
|
||||||
|
// append cell element
|
||||||
|
cellElem = makeCellElem();
|
||||||
|
flkty.append( cellElem );
|
||||||
|
var lastIndex = flkty.cells.length - 1;
|
||||||
|
checkCellElem( cellElem, lastIndex, 'appended' );
|
||||||
|
assert.equal( flkty.selectedIndex, 1, 'selectedIndex same after prepend' );
|
||||||
|
// insert single cell element
|
||||||
|
cellElem = makeCellElem(); // this one gets removed first
|
||||||
|
flkty.select( 2 );
|
||||||
|
flkty.insert( cellElem, 2 );
|
||||||
|
checkCellElem( cellElem, 2, 'single inserted' );
|
||||||
|
assert.equal( flkty.selectedIndex, 3, 'selectedIndex +1 after insert before' );
|
||||||
|
flkty.insert( makeCellElem(), 4 );
|
||||||
|
assert.equal( flkty.selectedIndex, 3, 'selectedIndex same after insert before' );
|
||||||
|
// insert multiple cell elements
|
||||||
|
var cellElems = [ makeCellElem(), makeCellElem(), makeCellElem() ];
|
||||||
|
flkty.insert( cellElems, 3 );
|
||||||
|
checkCellElem( cellElems[0], 3, 'first multiple inserted' );
|
||||||
|
checkCellElem( cellElems[1], 4, 'second multiple inserted' );
|
||||||
|
checkCellElem( cellElems[2], 5, 'third multiple inserted' );
|
||||||
|
assert.equal( flkty.selectedIndex, 6, 'selectedIndex +6 after 3 insert before' );
|
||||||
|
|
||||||
|
function checkCellPositions() {
|
||||||
|
var isGap = false;
|
||||||
|
for ( var i=0, len = flkty.cells.length; i < len; i++ ) {
|
||||||
|
var cell = flkty.cells[i];
|
||||||
|
if ( !isPositionApprox( cell.element.style.left, i * 25 ) ) {
|
||||||
|
assert.ok( false, 'gap in cell position ' + i + ' after removal' );
|
||||||
|
isGap = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
assert.ok( !isGap, 'no gaps in cell positions' );
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove single cell element that was inserted
|
||||||
|
var len = flkty.cells.length;
|
||||||
|
flkty.remove( cellElem );
|
||||||
|
assert.equal( len - sliderElem.children.length, 1, 'element removed from DOM' );
|
||||||
|
assert.equal( len - flkty.cells.length, 1, 'cell removed' );
|
||||||
|
assert.equal( flkty.selectedIndex, 5, 'selectedIndex -1 after remove before' );
|
||||||
|
checkCellPositions();
|
||||||
|
// remove multiple
|
||||||
|
len = flkty.cells.length;
|
||||||
|
flkty.select( 4 );
|
||||||
|
flkty.remove([ cellElems[2], cellElems[0], cellElems[1] ]);
|
||||||
|
assert.equal( len - sliderElem.children.length, 3, 'elements removed from DOM' );
|
||||||
|
assert.equal( len - flkty.cells.length, 3, 'cells removed' );
|
||||||
|
checkCellPositions();
|
||||||
|
|
||||||
|
// remove all cells
|
||||||
|
flkty.remove( flkty.getCellElements() );
|
||||||
|
assert.equal( flkty.cells.length, 0, 'all cells removed' );
|
||||||
|
flkty.resize();
|
||||||
|
assert.ok( true, 'resize with zero items didnt freak out' );
|
||||||
|
|
||||||
|
});
|
||||||
91
node_modules/flickity/test/unit/auto-play.js
generated
vendored
Normal file
91
node_modules/flickity/test/unit/auto-play.js
generated
vendored
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
QUnit.test( 'auto play', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
var flkty = new Flickity( '#auto-play', {
|
||||||
|
autoPlay: 200
|
||||||
|
});
|
||||||
|
|
||||||
|
var selectCount = 0;
|
||||||
|
var testDelay = flkty.options.autoPlay + 100;
|
||||||
|
|
||||||
|
var tests;
|
||||||
|
|
||||||
|
function nextTest() {
|
||||||
|
if ( tests.length ) {
|
||||||
|
var next = tests.shift();
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
flkty.stopPlayer();
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tests = [
|
||||||
|
// check that player runs
|
||||||
|
function() {
|
||||||
|
var onSelect = function() {
|
||||||
|
selectCount++;
|
||||||
|
if ( selectCount < 5 ) {
|
||||||
|
assert.equal( flkty.selectedIndex, selectCount % flkty.cells.length,
|
||||||
|
'auto-played to ' + flkty.selectedIndex );
|
||||||
|
} else if ( selectCount == 5 ) {
|
||||||
|
// HACK do async, should be able to stop after a tick
|
||||||
|
flkty.off( 'select', onSelect );
|
||||||
|
nextTest();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
flkty.on( 'select', onSelect );
|
||||||
|
},
|
||||||
|
// pause & unpause
|
||||||
|
function() {
|
||||||
|
function onPauseSelect() {
|
||||||
|
assert.ok( false, 'player ticked during pause' );
|
||||||
|
}
|
||||||
|
flkty.on( 'select', onPauseSelect );
|
||||||
|
flkty.pausePlayer();
|
||||||
|
setTimeout( function() {
|
||||||
|
assert.ok( true, 'player did not tick during pause' );
|
||||||
|
flkty.off( 'select', onPauseSelect );
|
||||||
|
flkty.once( 'select', function() {
|
||||||
|
assert.ok( true, 'player resumed after unpausing' );
|
||||||
|
nextTest();
|
||||||
|
});
|
||||||
|
flkty.unpausePlayer();
|
||||||
|
}, testDelay );
|
||||||
|
},
|
||||||
|
// stopPlayer
|
||||||
|
function() {
|
||||||
|
var ticks = 0;
|
||||||
|
function onSelect() {
|
||||||
|
ticks++;
|
||||||
|
}
|
||||||
|
flkty.stopPlayer();
|
||||||
|
setTimeout( function() {
|
||||||
|
flkty.off( 'select', onSelect );
|
||||||
|
assert.equal( ticks, 0, 'no ticks after stopped' );
|
||||||
|
nextTest();
|
||||||
|
}, testDelay * 2 );
|
||||||
|
},
|
||||||
|
// double playPlayer()
|
||||||
|
function() {
|
||||||
|
var ticks = 0;
|
||||||
|
function onSelect() {
|
||||||
|
ticks++;
|
||||||
|
}
|
||||||
|
flkty.stopPlayer();
|
||||||
|
flkty.on( 'select', onSelect );
|
||||||
|
flkty.playPlayer();
|
||||||
|
flkty.playPlayer();
|
||||||
|
setTimeout( function() {
|
||||||
|
flkty.off( 'select', onSelect );
|
||||||
|
assert.equal( ticks, 1, 'only one tick after double playPlayer' );
|
||||||
|
nextTest();
|
||||||
|
}, testDelay );
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
nextTest();
|
||||||
|
|
||||||
|
});
|
||||||
32
node_modules/flickity/test/unit/cell-selector.js
generated
vendored
Normal file
32
node_modules/flickity/test/unit/cell-selector.js
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
QUnit.test( 'cellSelector', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#cell-selector');
|
||||||
|
var notCell1 = elem.querySelector('.not-cell1');
|
||||||
|
var notCell2 = elem.querySelector('.not-cell2');
|
||||||
|
|
||||||
|
var flkty = new Flickity( elem, {
|
||||||
|
cellSelector: '.cell'
|
||||||
|
});
|
||||||
|
|
||||||
|
var cellsMatchSelector = true;
|
||||||
|
for ( var i=0, len = flkty.cells.length; i < len; i++ ) {
|
||||||
|
var cell = flkty.cells[i];
|
||||||
|
var isMatch = matchesSelector( cell.element, flkty.options.cellSelector );
|
||||||
|
cellsMatchSelector = cellsMatchSelector && isMatch;
|
||||||
|
}
|
||||||
|
|
||||||
|
// getCellElements()
|
||||||
|
var cellElems = flkty.getCellElements();
|
||||||
|
var queriedCellElems = elem.querySelectorAll( flkty.options.cellSelector );
|
||||||
|
assert.equal( cellElems.length, flkty.cells.length, 'getCellElements returns corrent number of elements' );
|
||||||
|
for( i=0, len = cellElems.length; i < len; i++ ) {
|
||||||
|
assert.equal( cellElems[i], queriedCellElems[i], 'cell element same as queried cell element' );
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.ok( cellsMatchSelector, 'all cell elements match cellSelector' );
|
||||||
|
|
||||||
|
assert.equal( notCell1.parentNode, elem, 'notCell1 parent node is still gallery' );
|
||||||
|
assert.equal( notCell2.parentNode, elem, 'notCell2 parent node is still gallery' );
|
||||||
|
|
||||||
|
});
|
||||||
47
node_modules/flickity/test/unit/change.js
generated
vendored
Normal file
47
node_modules/flickity/test/unit/change.js
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
QUnit.test( 'change', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
function onInitChange() {
|
||||||
|
assert.ok( false, 'change should not trigger on init' );
|
||||||
|
}
|
||||||
|
|
||||||
|
new Flickity( '#change', {
|
||||||
|
on: {
|
||||||
|
change: onInitChange,
|
||||||
|
ready: function() {
|
||||||
|
// define events last to first for strict
|
||||||
|
var onChangeC = function( index ) {
|
||||||
|
assert.equal( index, 0, 'change triggered on select back to 0' );
|
||||||
|
done();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onChangeB = function() {
|
||||||
|
assert.ok( false, 'change should not trigger on same select' );
|
||||||
|
};
|
||||||
|
|
||||||
|
var onSelectB = function( index ) {
|
||||||
|
assert.equal( index, 1, 'select triggered on same select 1' );
|
||||||
|
this.off( 'change', onChangeB );
|
||||||
|
this.once( 'change', onChangeC );
|
||||||
|
this.select( 0, false, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
var onChangeA = function( index ) {
|
||||||
|
assert.equal( index, 1, 'change triggered, selected 1');
|
||||||
|
this.once( 'change', onChangeB );
|
||||||
|
this.once( 'select', onSelectB );
|
||||||
|
// select 1 again
|
||||||
|
this.select( 1, false, true );
|
||||||
|
};
|
||||||
|
|
||||||
|
// kick off
|
||||||
|
this.off( 'change', onInitChange );
|
||||||
|
this.once( 'change', onChangeA );
|
||||||
|
this.select( 1, false, true );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
21
node_modules/flickity/test/unit/contain.js
generated
vendored
Normal file
21
node_modules/flickity/test/unit/contain.js
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
QUnit.test( 'contain', function( assert ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var flkty = new Flickity( '#contain', {
|
||||||
|
contain: true
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 0, position left edge' );
|
||||||
|
flkty.select( 1 );
|
||||||
|
flkty.positionSliderAtSelected();
|
||||||
|
assert.equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 1, position left edge' );
|
||||||
|
flkty.select( 4 );
|
||||||
|
flkty.positionSliderAtSelected();
|
||||||
|
var endLimit = flkty.slideableWidth - flkty.size.innerWidth * ( 1 - flkty.cellAlign );
|
||||||
|
assert.equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 4, position right edge' );
|
||||||
|
flkty.select( 5 );
|
||||||
|
flkty.positionSliderAtSelected();
|
||||||
|
assert.equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 5, position right edge' );
|
||||||
|
|
||||||
|
});
|
||||||
25
node_modules/flickity/test/unit/destroy.js
generated
vendored
Normal file
25
node_modules/flickity/test/unit/destroy.js
generated
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
QUnit.test( 'destroy', function( assert ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#destroy');
|
||||||
|
var flkty = new Flickity( elem );
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
// do it async
|
||||||
|
setTimeout( function() {
|
||||||
|
flkty.destroy();
|
||||||
|
assert.strictEqual( elem.flickityGUID, undefined, 'flickityGUID removed' );
|
||||||
|
assert.ok( !flkty.isActive, 'not active' );
|
||||||
|
assert.ok( !Flickity.data( elem ), '.data() returns falsey' );
|
||||||
|
assert.ok( elem.children[0], '.cell', 'cell is back as first child' );
|
||||||
|
assert.ok( !matchesSelector( elem, '.flickity-enabled'), 'flickity-enabled class removed' );
|
||||||
|
assert.ok( !elem.querySelector('.flickity-prev-next-button'), 'no buttons' );
|
||||||
|
assert.ok( !elem.querySelector('.flickity-page-dots'), 'no page dots' );
|
||||||
|
assert.ok( !elem.style.height, 'no height set' );
|
||||||
|
assert.ok( !elem.children[0].style.left, 'first cell has no left position' );
|
||||||
|
|
||||||
|
done();
|
||||||
|
}, 20 );
|
||||||
|
|
||||||
|
});
|
||||||
188
node_modules/flickity/test/unit/drag.js
generated
vendored
Normal file
188
node_modules/flickity/test/unit/drag.js
generated
vendored
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
( function() {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var utils = window.fizzyUIUtils;
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
var fakeDrag = window.fakeDrag = function( flkty, positions ) {
|
||||||
|
|
||||||
|
function fakeEvent( type, pageX ) {
|
||||||
|
return {
|
||||||
|
type: type,
|
||||||
|
pageX: pageX,
|
||||||
|
pageY: 0,
|
||||||
|
preventDefault: noop,
|
||||||
|
target: flkty.viewport
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
var hasBeenDown = false;
|
||||||
|
|
||||||
|
function triggerEvent() {
|
||||||
|
var position = positions.shift();
|
||||||
|
// down or move event
|
||||||
|
if ( !hasBeenDown ) {
|
||||||
|
var downEvent = fakeEvent( 'mousedown', position );
|
||||||
|
flkty._pointerDown( downEvent, downEvent );
|
||||||
|
hasBeenDown = true;
|
||||||
|
} else {
|
||||||
|
var moveEvent = fakeEvent( 'mousemove', position );
|
||||||
|
flkty._pointerMove( moveEvent, moveEvent );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( positions.length ) {
|
||||||
|
// loop next
|
||||||
|
setTimeout( triggerEvent, 40 );
|
||||||
|
} else {
|
||||||
|
// up event
|
||||||
|
var upEvent = fakeEvent( 'mouseup', position );
|
||||||
|
flkty._pointerUp( upEvent, upEvent );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerEvent();
|
||||||
|
};
|
||||||
|
|
||||||
|
var dragTests;
|
||||||
|
// do each drag test one after another
|
||||||
|
function getDoNextDragTest( done ) {
|
||||||
|
return function doNextDragTest() {
|
||||||
|
if ( dragTests.length ) {
|
||||||
|
var dragTest = dragTests.shift();
|
||||||
|
dragTest();
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// flickity, dragPositions, index, callback, message
|
||||||
|
function getFakeDragTest( args ) {
|
||||||
|
var assert = args.assert;
|
||||||
|
var flkty = args.flickity;
|
||||||
|
var msgCell = 'slide[' + args.index + ']';
|
||||||
|
|
||||||
|
return function fakeDragTest() {
|
||||||
|
var selectMsg = ( args.message ? args.message + '. ' : '' ) + 'selected ' + msgCell;
|
||||||
|
flkty.once( 'select', function() {
|
||||||
|
assert.equal( flkty.selectedIndex, args.index, selectMsg );
|
||||||
|
});
|
||||||
|
|
||||||
|
var settleMsg = ( args.message ? args.message + '. ' : '' ) + 'settled ' + msgCell;
|
||||||
|
var target = flkty.slides[ args.index ].target;
|
||||||
|
flkty.once( 'settle', function() {
|
||||||
|
assert.equal( Math.round( -flkty.x ), Math.round( target ), settleMsg );
|
||||||
|
setTimeout( args.callback );
|
||||||
|
});
|
||||||
|
|
||||||
|
fakeDrag( args.flickity, args.dragPositions );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
QUnit.test( 'drag', function( assert ) {
|
||||||
|
// async test
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
var flkty = new Flickity('#drag');
|
||||||
|
|
||||||
|
var doNextDragTest = getDoNextDragTest( done );
|
||||||
|
|
||||||
|
function getDragTest( args ) {
|
||||||
|
args = utils.extend( args, {
|
||||||
|
assert: assert,
|
||||||
|
flickity: flkty,
|
||||||
|
callback: doNextDragTest
|
||||||
|
});
|
||||||
|
return getFakeDragTest( args );
|
||||||
|
}
|
||||||
|
|
||||||
|
dragTests = [
|
||||||
|
getDragTest({
|
||||||
|
message: 'drag to 2nd cell',
|
||||||
|
index: 1,
|
||||||
|
dragPositions: [ 0, -10, -20 ]
|
||||||
|
}),
|
||||||
|
getDragTest({
|
||||||
|
message: 'drag back to 1st cell',
|
||||||
|
index: 0,
|
||||||
|
dragPositions: [ 0, 10, 20 ]
|
||||||
|
}),
|
||||||
|
getDragTest({
|
||||||
|
message: 'big flick to 3rd cell',
|
||||||
|
index: 2,
|
||||||
|
dragPositions: [ 0, -10, -80 ]
|
||||||
|
}),
|
||||||
|
// minimal movement to trigger static click
|
||||||
|
function() {
|
||||||
|
flkty.once( 'staticClick', function() {
|
||||||
|
assert.ok( true, 'staticClick fired on non-drag');
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'selected index still at 2 after click' );
|
||||||
|
setTimeout( doNextDragTest );
|
||||||
|
});
|
||||||
|
fakeDrag( flkty, [ 0, 1, 0, -2, -1 ] );
|
||||||
|
},
|
||||||
|
// move out then back to where it started
|
||||||
|
function() {
|
||||||
|
flkty.once( 'settle', function() {
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'move out then back. same cell' );
|
||||||
|
setTimeout( doNextDragTest );
|
||||||
|
});
|
||||||
|
fakeDrag( flkty, [ 0, 10, 20, 30, 20 ] );
|
||||||
|
},
|
||||||
|
getDragTest({
|
||||||
|
message: 'drag and try to flick past 6th cell',
|
||||||
|
index: 5,
|
||||||
|
dragPositions: [ 0, -10, -50, -77, -100, -125, -150, -175, -250, -350 ]
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|
||||||
|
doNextDragTest();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
QUnit.test( 'drag with wrapAround', function( assert ) {
|
||||||
|
// async test
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
var flkty = new Flickity('#drag-wrap-around', {
|
||||||
|
wrapAround: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var doNextDragTest = getDoNextDragTest( done );
|
||||||
|
|
||||||
|
function getDragTest( args ) {
|
||||||
|
args = utils.extend( args, {
|
||||||
|
assert: assert,
|
||||||
|
flickity: flkty,
|
||||||
|
callback: doNextDragTest
|
||||||
|
});
|
||||||
|
return getFakeDragTest( args );
|
||||||
|
}
|
||||||
|
|
||||||
|
dragTests = [
|
||||||
|
getDragTest({
|
||||||
|
message: 'drag to last cell via wrap-around',
|
||||||
|
index: 5,
|
||||||
|
dragPositions: [ 0, 10, 20 ]
|
||||||
|
}),
|
||||||
|
getDragTest({
|
||||||
|
message: 'drag to first cell via wrap-around',
|
||||||
|
index: 0,
|
||||||
|
dragPositions: [ 0, -10, -20 ]
|
||||||
|
}),
|
||||||
|
getDragTest({
|
||||||
|
message: 'big flick to 5th cell via wrap-around',
|
||||||
|
index: 4,
|
||||||
|
dragPositions: [ 0, 10, 80 ]
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|
||||||
|
doNextDragTest();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
39
node_modules/flickity/test/unit/empty.js
generated
vendored
Normal file
39
node_modules/flickity/test/unit/empty.js
generated
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
QUnit.test( 'empty', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var gallery = document.querySelector('#empty');
|
||||||
|
|
||||||
|
var flkty = new Flickity( gallery );
|
||||||
|
|
||||||
|
assert.ok( true, 'empty gallery ok' );
|
||||||
|
assert.ok( flkty.prevButton.element.disabled, 'previous button disabled' );
|
||||||
|
assert.ok( flkty.nextButton.element.disabled, 'next button disabled' );
|
||||||
|
assert.equal( flkty.pageDots.dots.length, 0, '0 page dots');
|
||||||
|
|
||||||
|
flkty.resize();
|
||||||
|
assert.ok( true, 'resize with empty gallery ok');
|
||||||
|
|
||||||
|
function makeCellElem() {
|
||||||
|
var cellElem = document.createElement('div');
|
||||||
|
cellElem.className = 'cell';
|
||||||
|
return cellElem;
|
||||||
|
}
|
||||||
|
|
||||||
|
flkty.append( makeCellElem() );
|
||||||
|
assert.equal( flkty.cells.length, 1, 'added cell to empty gallery' );
|
||||||
|
|
||||||
|
|
||||||
|
assert.ok( flkty.prevButton.element.disabled, 'previous button disabled' );
|
||||||
|
assert.ok( flkty.nextButton.element.disabled, 'next button disabled' );
|
||||||
|
assert.equal( flkty.pageDots.dots.length, 1, '1 page dots');
|
||||||
|
|
||||||
|
// destroy and re-init with higher initialIndex
|
||||||
|
flkty.destroy();
|
||||||
|
flkty = new Flickity( gallery, {
|
||||||
|
initialIndex: 2
|
||||||
|
});
|
||||||
|
|
||||||
|
// #291
|
||||||
|
assert.ok( true, 'initializing with initialIndex > cells doesnt throw error' );
|
||||||
|
|
||||||
|
});
|
||||||
37
node_modules/flickity/test/unit/get-parent-cell.js
generated
vendored
Normal file
37
node_modules/flickity/test/unit/get-parent-cell.js
generated
vendored
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
QUnit.test( 'getParentCell', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var gallery = document.querySelector('#get-parent-cell');
|
||||||
|
var flkty = new Flickity( gallery );
|
||||||
|
|
||||||
|
// cell1
|
||||||
|
var cell = flkty.getParentCell( gallery.querySelector('.cell1') );
|
||||||
|
assert.ok( cell, 'getParentCell( cell ) ok' );
|
||||||
|
assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
|
||||||
|
var index = flkty.cells.indexOf( cell );
|
||||||
|
assert.equal( index, 0, 'cell is index 0' );
|
||||||
|
// cell3
|
||||||
|
cell = flkty.getParentCell( gallery.querySelector('.cell3') );
|
||||||
|
assert.ok( cell, 'getParentCell( cell ) ok' );
|
||||||
|
assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
|
||||||
|
index = flkty.cells.indexOf( cell );
|
||||||
|
assert.equal( index, 2, 'cell is index 2' );
|
||||||
|
// child1
|
||||||
|
cell = flkty.getParentCell( gallery.querySelector('.child1') );
|
||||||
|
assert.ok( cell, 'getParentCell( cell ) ok' );
|
||||||
|
assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
|
||||||
|
index = flkty.cells.indexOf( cell );
|
||||||
|
assert.equal( index, 0, 'cell is index 0' );
|
||||||
|
// child2
|
||||||
|
cell = flkty.getParentCell( gallery.querySelector('.child2') );
|
||||||
|
assert.ok( cell, 'getParentCell( cell ) ok' );
|
||||||
|
assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
|
||||||
|
index = flkty.cells.indexOf( cell );
|
||||||
|
assert.equal( index, 1, 'cell is index 1' );
|
||||||
|
// outside
|
||||||
|
cell = flkty.getParentCell( document.querySelector('.outside') );
|
||||||
|
assert.ok( !cell, 'getParentCell( notCell ) not ok' );
|
||||||
|
index = flkty.cells.indexOf( cell );
|
||||||
|
assert.equal( index, -1, 'not cell is index -1' );
|
||||||
|
|
||||||
|
});
|
||||||
24
node_modules/flickity/test/unit/get-wrap-cells.js
generated
vendored
Normal file
24
node_modules/flickity/test/unit/get-wrap-cells.js
generated
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
QUnit.test( 'getWrapCells', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var flkty = new Flickity( '#get-wrap-cells', {
|
||||||
|
wrapAround: true
|
||||||
|
});
|
||||||
|
// cells are 25% width
|
||||||
|
// center align, 2 cells on each side
|
||||||
|
assert.equal( flkty.beforeShiftCells.length, 2, 'center align, 2 before shift cells' );
|
||||||
|
assert.equal( flkty.afterShiftCells.length, 2, 'center align, 2 after shift cells' );
|
||||||
|
|
||||||
|
flkty.options.cellAlign = 'left';
|
||||||
|
flkty.resize();
|
||||||
|
// left align, 0, 4
|
||||||
|
assert.equal( flkty.beforeShiftCells.length, 0, 'left align, 1 before shift cells' );
|
||||||
|
assert.equal( flkty.afterShiftCells.length, 4, 'left align, 4 after shift cells' );
|
||||||
|
|
||||||
|
flkty.options.cellAlign = 'right';
|
||||||
|
flkty.resize();
|
||||||
|
// right align, 4, 0
|
||||||
|
assert.equal( flkty.beforeShiftCells.length, 4, 'right align, 4 before shift cells' );
|
||||||
|
assert.equal( flkty.afterShiftCells.length, 0, 'right align, 0 after shift cells' );
|
||||||
|
|
||||||
|
});
|
||||||
39
node_modules/flickity/test/unit/group-cells.js
generated
vendored
Normal file
39
node_modules/flickity/test/unit/group-cells.js
generated
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
QUnit.test( 'groupCells', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var flkty = new Flickity( '#group-cells', {
|
||||||
|
groupCells: true
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSlideCellsCount() {
|
||||||
|
var counts = flkty.slides.map( function( slide ) {
|
||||||
|
return slide.cells.length;
|
||||||
|
});
|
||||||
|
return counts.join(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.equal( getSlideCellsCount(), '3,2,2,1,1,3,2', 'groupCells: true' );
|
||||||
|
var targets = flkty.slides.map( function( slide ) {
|
||||||
|
return slide.target;
|
||||||
|
});
|
||||||
|
assert.deepEqual( targets, [200, 600, 1000, 1300, 1600, 2000, 2300], 'targets' );
|
||||||
|
|
||||||
|
flkty.selectCell( 6 );
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'selectCell(6) selects 3rd slide' );
|
||||||
|
flkty.selectCell( flkty.cells[2].element );
|
||||||
|
assert.equal( flkty.selectedIndex, 0, 'selectCell(3rd elem) selects 1st slide' );
|
||||||
|
|
||||||
|
flkty.options.groupCells = 2;
|
||||||
|
flkty.reposition();
|
||||||
|
assert.equal( getSlideCellsCount(), '2,2,2,2,2,2,2', 'groupCells: 2' );
|
||||||
|
|
||||||
|
flkty.options.groupCells = '75%';
|
||||||
|
flkty.reposition();
|
||||||
|
assert.equal( getSlideCellsCount(), '2,1,1,2,1,1,1,2,2,1', 'groupCells: 75%' );
|
||||||
|
|
||||||
|
flkty.element.classList.add('is-expanded'); // 600px wide
|
||||||
|
flkty.options.groupCells = true;
|
||||||
|
flkty.resize();
|
||||||
|
assert.equal( getSlideCellsCount(), '3,3,2,3,3', 'groupCells: true, container @ 600px' );
|
||||||
|
|
||||||
|
});
|
||||||
37
node_modules/flickity/test/unit/init.js
generated
vendored
Normal file
37
node_modules/flickity/test/unit/init.js
generated
vendored
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
( function() {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
QUnit.module('Flickity');
|
||||||
|
|
||||||
|
var utils = window.fizzyUIUtils;
|
||||||
|
|
||||||
|
QUnit.test( 'init', function( assert ) {
|
||||||
|
|
||||||
|
var elem = document.querySelector('#init');
|
||||||
|
var flkty = new Flickity( elem );
|
||||||
|
|
||||||
|
for ( var prop in Flickity.defaults ) {
|
||||||
|
assert.equal( flkty.options[ prop ], Flickity.defaults[ prop ], prop + ' option matches default' );
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.equal( flkty.element, elem, '.element is proper element' );
|
||||||
|
var children = utils.makeArray( flkty.element.children );
|
||||||
|
assert.notEqual( children.indexOf( flkty.viewport ), -1, 'viewport element is a child element' );
|
||||||
|
assert.equal( flkty.viewport.children[0], flkty.slider, 'slider is in viewport' );
|
||||||
|
assert.equal( flkty.viewport.style.height, '100px', 'viewport height set' );
|
||||||
|
|
||||||
|
assert.ok( flkty.isActive, 'isActive' );
|
||||||
|
assert.ok( matchesSelector( elem, '.flickity-enabled' ), 'flickity-enabled class added' );
|
||||||
|
|
||||||
|
assert.equal( flkty.cells.length, 6, 'has 6 cells' );
|
||||||
|
assert.equal( flkty.cells[0].element.style.left, '0%', 'first cell left: 0%' );
|
||||||
|
assert.equal( flkty.cells[5].element.style.left, '500%', '6th cell left: 500%' );
|
||||||
|
|
||||||
|
assert.equal( flkty.selectedIndex, 0, 'selectedIndex = 0' );
|
||||||
|
assert.equal( flkty.cursorPosition, 200, 'cursorPosition = 200' );
|
||||||
|
assert.equal( flkty.x + flkty.cursorPosition, 0, 'x + cursorPosition = 0' );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
26
node_modules/flickity/test/unit/initial-index.js
generated
vendored
Normal file
26
node_modules/flickity/test/unit/initial-index.js
generated
vendored
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
QUnit.test( 'initialIndex', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
// initialIndex number
|
||||||
|
var flkty = new Flickity( '#initial-index', {
|
||||||
|
initialIndex: 3,
|
||||||
|
});
|
||||||
|
assert.equal( flkty.selectedIndex, 3, 'initialIndex number' );
|
||||||
|
// selectedIndex remains same after reactivation
|
||||||
|
flkty.deactivate();
|
||||||
|
flkty.activate();
|
||||||
|
assert.equal( flkty.selectedIndex, 3, 'reactivated selectedIndex stays the same' );
|
||||||
|
flkty.destroy();
|
||||||
|
// initialIndex selector string
|
||||||
|
flkty = new Flickity( '#initial-index', {
|
||||||
|
initialIndex: '.cell--initial',
|
||||||
|
});
|
||||||
|
assert.equal( flkty.selectedIndex, 4, 'initialIndex selector string' );
|
||||||
|
flkty.destroy();
|
||||||
|
// initialIndex selector string with groupCells #881
|
||||||
|
flkty = new Flickity( '#initial-index', {
|
||||||
|
groupCells: 3,
|
||||||
|
initialIndex: '.cell--initial',
|
||||||
|
});
|
||||||
|
assert.equal( flkty.selectedIndex, 1, 'initialIndex selector string with groupCells' );
|
||||||
|
|
||||||
|
});
|
||||||
29
node_modules/flickity/test/unit/lazyload-srcset.js
generated
vendored
Normal file
29
node_modules/flickity/test/unit/lazyload-srcset.js
generated
vendored
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
QUnit.test( 'lazyload srcset', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
var gallery = document.querySelector('#lazyload-srcset');
|
||||||
|
var flkty = new Flickity( gallery, {
|
||||||
|
lazyLoad: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
var loadCount = 0;
|
||||||
|
flkty.on( 'lazyLoad', function( event, cellElem ) {
|
||||||
|
loadCount++;
|
||||||
|
|
||||||
|
assert.equal( event.type, 'load', 'event.type == load' );
|
||||||
|
assert.ok( event.target.complete, 'img ' + loadCount + ' is complete' );
|
||||||
|
assert.ok( cellElem, 'cellElement argument there' );
|
||||||
|
var srcset = event.target.getAttribute('srcset');
|
||||||
|
assert.ok( srcset, 'srcset attribute set');
|
||||||
|
var lazyAttr = event.target.getAttribute('data-flickity-lazyload-srcset');
|
||||||
|
assert.ok( !lazyAttr, 'data-flickity-lazyload attribute removed' );
|
||||||
|
|
||||||
|
// after first 2 have loaded, select 7th cell
|
||||||
|
if ( loadCount == 2 ) {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
32
node_modules/flickity/test/unit/lazyload.js
generated
vendored
Normal file
32
node_modules/flickity/test/unit/lazyload.js
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
QUnit.test( 'lazyload', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var done = assert.async();
|
||||||
|
|
||||||
|
var gallery = document.querySelector('#lazyload');
|
||||||
|
var flkty = new Flickity( gallery, {
|
||||||
|
lazyLoad: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
var loadCount = 0;
|
||||||
|
flkty.on( 'lazyLoad', function( event, cellElem ) {
|
||||||
|
loadCount++;
|
||||||
|
|
||||||
|
assert.equal( event.type, 'load', 'event.type == load' );
|
||||||
|
assert.ok( event.target.complete, 'img ' + loadCount + ' is complete' );
|
||||||
|
assert.ok( cellElem, 'cellElement argument there' );
|
||||||
|
var lazyAttr = event.target.getAttribute('data-flickity-lazyload');
|
||||||
|
assert.ok( !lazyAttr, 'data-flickity-lazyload attribute removed' );
|
||||||
|
|
||||||
|
// after first 2 have loaded, select 7th cell
|
||||||
|
if ( loadCount == 2 ) {
|
||||||
|
flkty.select( 6 );
|
||||||
|
}
|
||||||
|
if ( loadCount == 5 ) {
|
||||||
|
var loadedImgs = gallery.querySelectorAll('.flickity-lazyloaded');
|
||||||
|
assert.equal( loadedImgs.length, '5', 'only 5 images loaded' );
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
33
node_modules/flickity/test/unit/page-dots.js
generated
vendored
Normal file
33
node_modules/flickity/test/unit/page-dots.js
generated
vendored
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
QUnit.test( 'pageDots', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#page-dots');
|
||||||
|
var flkty = new Flickity( elem );
|
||||||
|
|
||||||
|
var dotsHolder = elem.querySelector('.flickity-page-dots');
|
||||||
|
var dotsElems = dotsHolder.querySelectorAll('.dot');
|
||||||
|
|
||||||
|
assert.ok( dotsHolder, 'dots holder in DOM' );
|
||||||
|
assert.equal( flkty.pageDots.holder, dotsHolder, 'dots holder element matches flkty.pageDots.holder' );
|
||||||
|
assert.equal( dotsElems.length, flkty.cells.length, 'number of dots matches number of cells' );
|
||||||
|
|
||||||
|
function getSelectedDotIndex() {
|
||||||
|
var selectedDot = dotsHolder.querySelector('.is-selected');
|
||||||
|
for ( var i=0, len = dotsElems.length; i < len; i++ ) {
|
||||||
|
var dotElem = dotsElems[i];
|
||||||
|
if ( dotElem == selectedDot ) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.equal( getSelectedDotIndex(), 0, 'first dot is selected' );
|
||||||
|
flkty.select( 2 );
|
||||||
|
assert.equal( getSelectedDotIndex(), 2, '3rd dot is selected' );
|
||||||
|
|
||||||
|
// fake tap
|
||||||
|
flkty.pageDots.onTap( { target: dotsElems[4] } );
|
||||||
|
assert.equal( flkty.selectedIndex, 4, 'tap dot selects cell' );
|
||||||
|
|
||||||
|
});
|
||||||
51
node_modules/flickity/test/unit/position-cells.js
generated
vendored
Normal file
51
node_modules/flickity/test/unit/position-cells.js
generated
vendored
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
( function() {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// position values can be off by 0.1% or 1px
|
||||||
|
function isPositionApprox( value, expected ) {
|
||||||
|
var isPercent = value.indexOf('%') != -1;
|
||||||
|
value = parseFloat( value );
|
||||||
|
var diff = Math.abs( expected - value );
|
||||||
|
return isPercent ? diff < 0.1 : diff <= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// loop through cells and check position values against expecteds
|
||||||
|
function checkCellPositions( flkty, expecteds ) {
|
||||||
|
var isOK;
|
||||||
|
for ( var i=0, len = expecteds.length; i < len; i++ ) {
|
||||||
|
var expected = expecteds[i];
|
||||||
|
var cell = flkty.cells[i];
|
||||||
|
var position = cell.element.style.left;
|
||||||
|
isOK = isPositionApprox( position, expected );
|
||||||
|
if ( !isOK ) {
|
||||||
|
console.error( 'wrong cell position, index: ' + i + '. ' +
|
||||||
|
'expected: ' + expected + '. position: ' + position );
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return isOK;
|
||||||
|
}
|
||||||
|
|
||||||
|
QUnit.test( 'position cells', function( assert ) {
|
||||||
|
|
||||||
|
var flkty = new Flickity('#position-cells');
|
||||||
|
|
||||||
|
assert.ok( checkCellPositions( flkty, [ 0, 40, 65, 125, 165, 225 ] ), 'percent cell position' );
|
||||||
|
// .cell { margin: 0 2%; }
|
||||||
|
flkty.element.classList.add('percent-margin');
|
||||||
|
flkty.positionCells();
|
||||||
|
assert.ok( checkCellPositions( flkty, [ 0, 44, 73, 137, 181, 245 ] ), 'percent cell position with margin' );
|
||||||
|
flkty.element.classList.remove('percent-margin');
|
||||||
|
// pixel-based position
|
||||||
|
flkty.options.percentPosition = false;
|
||||||
|
flkty.positionCells();
|
||||||
|
assert.ok( checkCellPositions( flkty, [ 0, 160, 260, 500, 660, 900 ] ), 'pixel cell position' );
|
||||||
|
// pixel margin, { margin: 0 10px; }
|
||||||
|
flkty.element.classList.add('pixel-margin');
|
||||||
|
flkty.positionCells();
|
||||||
|
assert.ok( checkCellPositions( flkty, [ 0, 180, 300, 560, 740, 1000 ] ), 'pixel cell position with margin' );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
27
node_modules/flickity/test/unit/prev-next-buttons.js
generated
vendored
Normal file
27
node_modules/flickity/test/unit/prev-next-buttons.js
generated
vendored
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
QUnit.test( 'prev-next-buttons', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#prev-next-buttons');
|
||||||
|
var flkty = new Flickity( elem );
|
||||||
|
|
||||||
|
var prevElem = elem.querySelector('.flickity-prev-next-button.previous');
|
||||||
|
var nextElem = elem.querySelector('.flickity-prev-next-button.next');
|
||||||
|
assert.ok( prevElem, 'previous button in DOM' );
|
||||||
|
assert.ok( nextElem, 'next button in DOM' );
|
||||||
|
assert.equal( flkty.prevButton.element, prevElem, 'previous button element matches prevButton.element' );
|
||||||
|
assert.equal( flkty.nextButton.element, nextElem, 'next button element matches nextButton.element' );
|
||||||
|
assert.ok( prevElem.disabled, 'previous button is disabled at first index' );
|
||||||
|
|
||||||
|
prevElem.focus();
|
||||||
|
prevElem.click();
|
||||||
|
assert.equal( flkty.selectedIndex, 0, 'selectedIndex still at 0' );
|
||||||
|
nextElem.focus();
|
||||||
|
nextElem.click();
|
||||||
|
assert.equal( flkty.selectedIndex, 1, 'next button clicked, selectedIndex at 1' );
|
||||||
|
prevElem.focus();
|
||||||
|
prevElem.click();
|
||||||
|
assert.equal( flkty.selectedIndex, 0, 'previous button clicked, selectedIndex back at 0' );
|
||||||
|
flkty.select( 5 );
|
||||||
|
assert.ok( nextElem.disabled, 'next button disabled when at last cell' );
|
||||||
|
|
||||||
|
});
|
||||||
16
node_modules/flickity/test/unit/resize.js
generated
vendored
Normal file
16
node_modules/flickity/test/unit/resize.js
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
QUnit.test( 'resize', function( assert ) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#resize');
|
||||||
|
var flkty = new Flickity( elem, {
|
||||||
|
initialIndex: 2
|
||||||
|
});
|
||||||
|
elem.style.width = '500px';
|
||||||
|
flkty.resize();
|
||||||
|
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'selectedIndex = 2' );
|
||||||
|
assert.equal( flkty.cursorPosition, 250, 'cursorPosition = 250' );
|
||||||
|
assert.equal( flkty.x + flkty.cursorPosition, -1000, 'x + cursorPosition = -1000' );
|
||||||
|
|
||||||
|
});
|
||||||
18
node_modules/flickity/test/unit/select-cell.js
generated
vendored
Normal file
18
node_modules/flickity/test/unit/select-cell.js
generated
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
QUnit.test( 'selectCell', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var gallery = document.querySelector('#select-cell');
|
||||||
|
var cellElems = gallery.querySelectorAll('.cell');
|
||||||
|
var flkty = new Flickity( gallery, {
|
||||||
|
groupCells: true, // groups of 3
|
||||||
|
});
|
||||||
|
|
||||||
|
flkty.selectCell( 3 );
|
||||||
|
assert.equal( flkty.selectedIndex, 1, 'selectCell number' );
|
||||||
|
flkty.selectCell( cellElems[1] );
|
||||||
|
assert.equal( flkty.selectedIndex, 0, 'selectCell element' );
|
||||||
|
flkty.selectCell('.select-cell__6');
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'selectCell selector string' );
|
||||||
|
flkty.selectCell('none');
|
||||||
|
assert.equal( flkty.selectedIndex, 2, 'selectCell bad string is okay' );
|
||||||
|
});
|
||||||
10
node_modules/flickity/test/unit/watch.js
generated
vendored
Normal file
10
node_modules/flickity/test/unit/watch.js
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
QUnit.test( 'watch fallback', function( assert ) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var elem = document.querySelector('#watch');
|
||||||
|
var flkty = new Flickity( elem, {
|
||||||
|
watchCSS: true
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.ok( !flkty.isActive, 'fallback not active, watchCSS: true' );
|
||||||
|
});
|
||||||
45
node_modules/get-size/README.md
generated
vendored
Normal file
45
node_modules/get-size/README.md
generated
vendored
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
# getSize
|
||||||
|
|
||||||
|
Get the size of elements. Used in [Masonry](https://masonry.desandro.com), [Isotope](https://isotope.metafizzy.co), & [Flickity](https://flickity.metafizzy.co).
|
||||||
|
|
||||||
|
``` js
|
||||||
|
var size = getSize( elem );
|
||||||
|
// elem can be an element
|
||||||
|
var size = getSize( document.querySelector('.selector') )
|
||||||
|
// elem can be a selector string
|
||||||
|
var size = getSize('.selector')
|
||||||
|
```
|
||||||
|
|
||||||
|
Returns an object with:
|
||||||
|
|
||||||
|
+ width, height
|
||||||
|
+ innerWidth, innerHeight
|
||||||
|
+ outerWidth, outerHeight
|
||||||
|
+ paddingLeft, paddingTop, paddingRight, paddingBottom
|
||||||
|
+ marginLeft, marginTop, marginRight, marginBottom
|
||||||
|
+ borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth
|
||||||
|
+ isBorderBox
|
||||||
|
|
||||||
|
Browser support: IE10+, Android 4.0+, iOS 5+, and modern browsers
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Install with npm: `npm install get-size`
|
||||||
|
|
||||||
|
Install with [Bower](https://bower.io): `bower install get-size`
|
||||||
|
|
||||||
|
## Firefox hidden iframe bug
|
||||||
|
|
||||||
|
[Firefox has an old bug](https://bugzilla.mozilla.org/show_bug.cgi?id=548397) that occurs within iframes that are hidden with `display: none`. To resolve this, you can use alternate CSS to hide the iframe off-screen, with out `display: none`.
|
||||||
|
|
||||||
|
``` css
|
||||||
|
.hide-iframe {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
left: -999em;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## MIT License
|
||||||
|
|
||||||
|
getSize is released under the [MIT License](https://desandro.mit-license.org/).
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user