flip added
This commit is contained in:
parent
f02ae9432b
commit
f0bbcfb654
19 changed files with 1365 additions and 0 deletions
25
bower_components/flip/.bower.json
vendored
Normal file
25
bower_components/flip/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"name": "flip",
|
||||||
|
"version": "1.1.2",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "~2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"jquery": "~2.0"
|
||||||
|
},
|
||||||
|
"main": [
|
||||||
|
"dist/jquery.flip.js"
|
||||||
|
],
|
||||||
|
"ignore": [],
|
||||||
|
"homepage": "https://github.com/nnattawat/flip",
|
||||||
|
"_release": "1.1.2",
|
||||||
|
"_resolution": {
|
||||||
|
"type": "version",
|
||||||
|
"tag": "v1.1.2",
|
||||||
|
"commit": "e5155d6e29b349205216846822eac8fe9b6426d0"
|
||||||
|
},
|
||||||
|
"_source": "https://github.com/nnattawat/flip.git",
|
||||||
|
"_target": "*",
|
||||||
|
"_originalSource": "flip"
|
||||||
|
}
|
||||||
3
bower_components/flip/.bowerrc
vendored
Normal file
3
bower_components/flip/.bowerrc
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"directory": "bower_components"
|
||||||
|
}
|
||||||
4
bower_components/flip/.gitignore
vendored
Normal file
4
bower_components/flip/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/node_modules/
|
||||||
|
/bower_components/
|
||||||
|
npm-debug.log
|
||||||
|
*.swp
|
||||||
25
bower_components/flip/.jshintrc
vendored
Normal file
25
bower_components/flip/.jshintrc
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"boss": true,
|
||||||
|
"browser": true,
|
||||||
|
"curly": true,
|
||||||
|
"devel": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"eqnull": true,
|
||||||
|
"esversion": 5,
|
||||||
|
"expr": true,
|
||||||
|
"immed": true,
|
||||||
|
"newcap": false,
|
||||||
|
"noarg": true,
|
||||||
|
"onevar": true,
|
||||||
|
"quotmark": false,
|
||||||
|
"shadow": true,
|
||||||
|
"trailing": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"freeze": true,
|
||||||
|
"maxstatements": 30,
|
||||||
|
|
||||||
|
"globals": {
|
||||||
|
"jQuery": false
|
||||||
|
}
|
||||||
|
}
|
||||||
8
bower_components/flip/.travis.yml
vendored
Normal file
8
bower_components/flip/.travis.yml
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- '0.10'
|
||||||
|
before_install:
|
||||||
|
- npm install -g grunt-cli bower
|
||||||
|
install:
|
||||||
|
- npm install
|
||||||
|
- bower install
|
||||||
15
bower_components/flip/CONTRIBUTING.md
vendored
Normal file
15
bower_components/flip/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
# Issue and Pull Request Guidlines
|
||||||
|
|
||||||
|
##
|
||||||
|
|
||||||
|
##### Be clear
|
||||||
|
* Just because you have an understanding of what you would like to address, doesnt mean its obvious. Please be clear and consise.
|
||||||
|
|
||||||
|
##### Examples are your friend
|
||||||
|
* Probably the best way for us to get a handle on what's going on is you providing us with a short example using something like a [JSFiddle](http://jsfiddle.net/).
|
||||||
|
|
||||||
|
##### Stick around
|
||||||
|
* If you're interested in getting your changes in and/or issue resolved, it's extremely likely you're going to have to have some discussion about it before that happens. So don't just drop something on us and leave and expect that something will come of it.
|
||||||
|
|
||||||
|
##### Discussion before code
|
||||||
|
* If you don't want to waste your time writing code that might not be used, it's probably best to make an issue and discuss it with us first before you start writing.
|
||||||
61
bower_components/flip/Gruntfile.js
vendored
Normal file
61
bower_components/flip/Gruntfile.js
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = function (grunt) {
|
||||||
|
// Load all grunt tasks
|
||||||
|
require('load-grunt-tasks')(grunt);
|
||||||
|
// Show elapsed time at the end
|
||||||
|
require('time-grunt')(grunt);
|
||||||
|
|
||||||
|
// Project configuration.
|
||||||
|
grunt.initConfig({
|
||||||
|
// Metadata.
|
||||||
|
pkg: grunt.file.readJSON('package.json'),
|
||||||
|
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
|
||||||
|
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
|
||||||
|
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
|
||||||
|
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
|
||||||
|
' Licensed MIT */\n',
|
||||||
|
// Task configuration.
|
||||||
|
clean: {
|
||||||
|
files: ['dist']
|
||||||
|
},
|
||||||
|
jshint: {
|
||||||
|
options : {
|
||||||
|
jshintrc : '.jshintrc'
|
||||||
|
},
|
||||||
|
all: [ 'src/<%= pkg.name %>.js' ]
|
||||||
|
},
|
||||||
|
concat: {
|
||||||
|
options: {
|
||||||
|
banner: '<%= banner %>',
|
||||||
|
stripBanners: true
|
||||||
|
},
|
||||||
|
dist: {
|
||||||
|
src: ['src/<%= pkg.name %>.js'],
|
||||||
|
dest: 'dist/jquery.<%= pkg.name %>.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uglify: {
|
||||||
|
options: {
|
||||||
|
sourceMap: 'dist/jquery.<%= pkg.name %>.min.js.map',
|
||||||
|
sourceMappingURL : 'jquery.<%= pkg.name %>.min.js.map',
|
||||||
|
banner: '<%= banner %>'
|
||||||
|
},
|
||||||
|
dist: {
|
||||||
|
src: '<%= concat.dist.src %>',
|
||||||
|
dest: 'dist/jquery.<%= pkg.name %>.min.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
connect: {
|
||||||
|
server: {
|
||||||
|
options: {
|
||||||
|
hostname: '*',
|
||||||
|
port: 9000
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Default task.
|
||||||
|
grunt.registerTask('default', ['connect', 'clean', 'jshint', 'concat', 'uglify']);
|
||||||
|
};
|
||||||
21
bower_components/flip/LICENSE
vendored
Normal file
21
bower_components/flip/LICENSE
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2014 Nattawat Nonsung (author) and Carlos Fagiani Junior
|
||||||
|
2015 Jemar Jones, Nattawat Nonsung, Razvan Popa and Stijn de Witt
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||||
|
subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
65
bower_components/flip/README.md
vendored
Normal file
65
bower_components/flip/README.md
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
[](https://travis-ci.org/nnattawat/flip)
|
||||||
|
# jQuery Flip
|
||||||
|
|
||||||
|
**A lightweight jQuery plugin to create 3d flip animation.**
|
||||||
|
See the [project page](http://nnattawat.github.io/flip/)
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
### CDN
|
||||||
|
https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js
|
||||||
|
|
||||||
|
### Download
|
||||||
|
* [jquery.flip.js][max] (development version, commented ~9kB)
|
||||||
|
* [jquery.flip.min.js][min] (production version, minified ~4kB, gzipped ~2kB)
|
||||||
|
* [jquery.flip.min.js.map][map] (source map, ~5kB)
|
||||||
|
[max]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.js
|
||||||
|
[min]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js
|
||||||
|
[map]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js.map
|
||||||
|
|
||||||
|
### Bower
|
||||||
|
<pre>bower install flip</pre>
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
In your web page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div id="card">
|
||||||
|
<div class="front">
|
||||||
|
Front content
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back content
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<script src="jquery.flip.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function($) {
|
||||||
|
$("#card").flip();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Documentation and Example
|
||||||
|
|
||||||
|
Please refer to [the project website](http://nnattawat.github.io/flip/)
|
||||||
|
|
||||||
|
## Development
|
||||||
|
Ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
|
||||||
|
|
||||||
|
Test that Grunt's CLI and Bower are installed by running `grunt --version` and `bower --version`. If the commands aren't found, run `npm install -g grunt-cli bower`. For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started) or [bower.io](http://bower.io/) respectively.
|
||||||
|
|
||||||
|
To run the demo locally, do the following.
|
||||||
|
<pre>
|
||||||
|
npm install
|
||||||
|
bower install
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
And run grunt command to create files in /dist folder.
|
||||||
|
<pre>grunt</pre>
|
||||||
|
|
||||||
|
## What's new
|
||||||
|
Please refer to [the release page](https://github.com/nnattawat/flip/releases)
|
||||||
15
bower_components/flip/bower.json
vendored
Normal file
15
bower_components/flip/bower.json
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "flip",
|
||||||
|
"version": "1.1.2",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "~2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"jquery": "~2.0"
|
||||||
|
},
|
||||||
|
"main": [
|
||||||
|
"dist/jquery.flip.js"
|
||||||
|
],
|
||||||
|
"ignore": []
|
||||||
|
}
|
||||||
56
bower_components/flip/demo/flip-with-swipebox/index.html
vendored
Normal file
56
bower_components/flip/demo/flip-with-swipebox/index.html
vendored
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/css/swipebox.min.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
<h2>Flip with Swipebox</h2>
|
||||||
|
<section>
|
||||||
|
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-1.jpg" title="Fog">
|
||||||
|
<img src="http://swipebox.csag.co/images/image-1.jpg" alt="image">
|
||||||
|
</a>
|
||||||
|
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-2.jpg" title="City">
|
||||||
|
<img src="http://swipebox.csag.co/images/image-2.jpg" alt="image">
|
||||||
|
</a>
|
||||||
|
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-3.jpg" title="Street">
|
||||||
|
<img src="http://swipebox.csag.co/images/image-3.jpg" alt="image">
|
||||||
|
</a>
|
||||||
|
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-4.jpg" title="Mustache Guy">
|
||||||
|
<img src="http://swipebox.csag.co/images/image-4.jpg" alt="image">
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<p>When a <a href="http://brutaldesign.github.io/swipebox/">Swipebox</a> is used on
|
||||||
|
a card animated with Flip, the Swipebox fails, as can be seen in this demo when
|
||||||
|
we use version 1.0.1 of Flip. If we apply the patch the issue is fixed.</p>
|
||||||
|
<p>Click on the thumbnails. A Swipebox <i>should</i> open.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
<h2>Flip with Swipebox</h2>
|
||||||
|
<p>The problem is caused by Flip disabling the bubbling of click
|
||||||
|
events on any links that are contained inside the element to be flipped,
|
||||||
|
as can be seen in lines 80-82 of the
|
||||||
|
<a href="https://github.com/nnattawat/flip/blob/v1.0.1/src/flip.js">source code</a>.</p>
|
||||||
|
<p>This code was written to prevent the card from flipping when buttons and
|
||||||
|
links on the card are pressed. However, preventing event bubling is
|
||||||
|
<a href="https://css-tricks.com/dangers-stopping-event-propagation/">dangerous</a>.</p>
|
||||||
|
<p>The better solution is to ignore those events that you are not interested in.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/js/jquery.swipebox.min.js"></script>
|
||||||
|
<script src="../../dist/jquery.flip.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('.card a').swipebox();
|
||||||
|
$('.card').flip();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
bower_components/flip/demo/flip-with-swipebox/style.css
vendored
Normal file
36
bower_components/flip/demo/flip-with-swipebox/style.css
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
html, body, div, ul {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 320px;
|
||||||
|
height: 460px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a.thumb {
|
||||||
|
float: left;
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 5px 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a.thumb img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.front, .back {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 1px 6px rgba(0,0,0, 0.4);
|
||||||
|
}
|
||||||
68
bower_components/flip/demo/index.html
vendored
Normal file
68
bower_components/flip/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
<script src="../src/flip.js"></script>
|
||||||
|
<title>jQuery plugin</title>
|
||||||
|
<style type="text/css">
|
||||||
|
.card {
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
.front, .back, .other-front, .other-back {
|
||||||
|
border: 2px gray solid;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.front, .other-front {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
.back, .other-back {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="card-1" class="card">
|
||||||
|
<div class="other-front">
|
||||||
|
Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
|
||||||
|
</div>
|
||||||
|
<div class="other-back">
|
||||||
|
<a href="http://google.com">link</a>
|
||||||
|
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
|
||||||
|
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="card-2" class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
<a href="http://google.com">link</a>
|
||||||
|
Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
|
||||||
|
<button>button</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
$("#card-1").flip({
|
||||||
|
axis: "y", // y or x
|
||||||
|
reverse: false, // true and false
|
||||||
|
trigger: "hover", // click or hover
|
||||||
|
speed: '250',
|
||||||
|
front: $('.other-front'),
|
||||||
|
back: $('.other-back'),
|
||||||
|
autoSize: false
|
||||||
|
});
|
||||||
|
$("#card-2").flip({
|
||||||
|
axis: "x",
|
||||||
|
reverse: true,
|
||||||
|
trigger: "click"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
157
bower_components/flip/demo/index2.html
vendored
Normal file
157
bower_components/flip/demo/index2.html
vendored
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!--script src="../jquery-1.10.2.min.js"></script-->
|
||||||
|
<script src="../bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
<script src="../src/flip.js"></script>
|
||||||
|
<title>jQuery plugin</title>
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
margin: 0 100px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.front, .back {
|
||||||
|
border: 2px gray solid;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.front {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="card-1" class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="card-2" class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="front">
|
||||||
|
Front
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
Back
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
$(".card").flip({
|
||||||
|
trigger: "hover"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
369
bower_components/flip/dist/jquery.flip.js
vendored
Normal file
369
bower_components/flip/dist/jquery.flip.js
vendored
Normal file
|
|
@ -0,0 +1,369 @@
|
||||||
|
/*! flip - v1.1.2 - 2016-10-20
|
||||||
|
* https://github.com/nnattawat/flip
|
||||||
|
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
|
||||||
|
(function( $ ) {
|
||||||
|
/*
|
||||||
|
* Private attributes and method
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
|
||||||
|
var whichTransitionEvent = function() {
|
||||||
|
var t, el = document.createElement("fakeelement"),
|
||||||
|
transitions = {
|
||||||
|
"transition" : "transitionend",
|
||||||
|
"OTransition" : "oTransitionEnd",
|
||||||
|
"MozTransition" : "transitionend",
|
||||||
|
"WebkitTransition": "webkitTransitionEnd"
|
||||||
|
};
|
||||||
|
|
||||||
|
for (t in transitions) {
|
||||||
|
if (el.style[t] !== undefined) {
|
||||||
|
return transitions[t];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Model declaration
|
||||||
|
*/
|
||||||
|
var Flip = function($el, options, callback) {
|
||||||
|
// Define default setting
|
||||||
|
this.setting = {
|
||||||
|
axis: "y",
|
||||||
|
reverse: false,
|
||||||
|
trigger: "click",
|
||||||
|
speed: 500,
|
||||||
|
forceHeight: false,
|
||||||
|
forceWidth: false,
|
||||||
|
autoSize: true,
|
||||||
|
front: '.front',
|
||||||
|
back: '.back'
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setting = $.extend(this.setting, options);
|
||||||
|
|
||||||
|
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
|
||||||
|
this.setting.axis = options.axis.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.reverse === "boolean") {
|
||||||
|
this.setting.reverse = options.reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.trigger === 'string') {
|
||||||
|
this.setting.trigger = options.trigger.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
var speed = parseInt(options.speed);
|
||||||
|
if (!isNaN(speed)) {
|
||||||
|
this.setting.speed = speed;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.forceHeight === "boolean") {
|
||||||
|
this.setting.forceHeight = options.forceHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.forceWidth === "boolean") {
|
||||||
|
this.setting.forceWidth = options.forceWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.autoSize === "boolean") {
|
||||||
|
this.setting.autoSize = options.autoSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.front === 'string' || options.front instanceof $) {
|
||||||
|
this.setting.front = options.front;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.back === 'string' || options.back instanceof $) {
|
||||||
|
this.setting.back = options.back;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Other attributes
|
||||||
|
this.element = $el;
|
||||||
|
this.frontElement = this.getFrontElement();
|
||||||
|
this.backElement = this.getBackElement();
|
||||||
|
this.isFlipped = false;
|
||||||
|
|
||||||
|
this.init(callback);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Public methods
|
||||||
|
*/
|
||||||
|
$.extend(Flip.prototype, {
|
||||||
|
|
||||||
|
flipDone: function(callback) {
|
||||||
|
var self = this;
|
||||||
|
// Providing a nicely wrapped up callback because transform is essentially async
|
||||||
|
self.element.one(whichTransitionEvent(), function() {
|
||||||
|
self.element.trigger('flip:done');
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(self.element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
flip: function(callback) {
|
||||||
|
if (this.isFlipped) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isFlipped = true;
|
||||||
|
|
||||||
|
var rotateAxis = "rotate" + this.setting.axis;
|
||||||
|
this.frontElement.css({
|
||||||
|
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backElement.css({
|
||||||
|
transform: rotateAxis + "(0deg)",
|
||||||
|
"z-index": "1"
|
||||||
|
});
|
||||||
|
this.flipDone(callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
unflip: function(callback) {
|
||||||
|
if (!this.isFlipped) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isFlipped = false;
|
||||||
|
|
||||||
|
var rotateAxis = "rotate" + this.setting.axis;
|
||||||
|
this.frontElement.css({
|
||||||
|
transform: rotateAxis + "(0deg)",
|
||||||
|
"z-index": "1"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backElement.css({
|
||||||
|
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
this.flipDone(callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
getFrontElement: function() {
|
||||||
|
if (this.setting.front instanceof $) {
|
||||||
|
return this.setting.front;
|
||||||
|
} else {
|
||||||
|
return this.element.find(this.setting.front);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getBackElement: function() {
|
||||||
|
if (this.setting.back instanceof $) {
|
||||||
|
return this.setting.back;
|
||||||
|
} else {
|
||||||
|
return this.element.find(this.setting.back);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function(callback) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var faces = self.frontElement.add(self.backElement);
|
||||||
|
var rotateAxis = "rotate" + self.setting.axis;
|
||||||
|
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
|
||||||
|
var elementCss = {
|
||||||
|
'perspective': perspective,
|
||||||
|
'position': 'relative'
|
||||||
|
};
|
||||||
|
var backElementCss = {
|
||||||
|
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
|
||||||
|
"z-index": "0",
|
||||||
|
"position": "relative"
|
||||||
|
};
|
||||||
|
var faceElementCss = {
|
||||||
|
"backface-visibility": "hidden",
|
||||||
|
"transform-style": "preserve-3d",
|
||||||
|
"position": "absolute",
|
||||||
|
"z-index": "1"
|
||||||
|
};
|
||||||
|
|
||||||
|
if (self.setting.forceHeight) {
|
||||||
|
faces.outerHeight(self.element.height());
|
||||||
|
} else if (self.setting.autoSize) {
|
||||||
|
faceElementCss.height = '100%';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (self.setting.forceWidth) {
|
||||||
|
faces.outerWidth(self.element.width());
|
||||||
|
} else if (self.setting.autoSize) {
|
||||||
|
faceElementCss.width = '100%';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Back face always visible on Chrome #39
|
||||||
|
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
|
||||||
|
//Blink Engine, add preserve-3d to self.element
|
||||||
|
elementCss["-webkit-transform-style"] = "preserve-3d";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
faces.css(faceElementCss).find('*').css({
|
||||||
|
"backface-visibility": "hidden"
|
||||||
|
});
|
||||||
|
|
||||||
|
self.element.css(elementCss);
|
||||||
|
self.backElement.css(backElementCss);
|
||||||
|
|
||||||
|
// #39
|
||||||
|
// not forcing width/height may cause an initial flip to show up on
|
||||||
|
// page load when we apply the style to reverse the backface...
|
||||||
|
// To prevent self we first apply the basic styles and then give the
|
||||||
|
// browser a moment to apply them. Only afterwards do we add the transition.
|
||||||
|
setTimeout(function() {
|
||||||
|
// By now the browser should have applied the styles, so the transition
|
||||||
|
// will only affect subsequent flips.
|
||||||
|
var speedInSec = self.setting.speed / 1000 || 0.5;
|
||||||
|
faces.css({
|
||||||
|
"transition": "all " + speedInSec + "s ease-out"
|
||||||
|
});
|
||||||
|
|
||||||
|
// This allows flip to be called for setup with only a callback (default settings)
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(self.element);
|
||||||
|
}
|
||||||
|
|
||||||
|
// While this used to work with a setTimeout of zero, at some point that became
|
||||||
|
// unstable and the initial flip returned. The reason for this is unknown but we
|
||||||
|
// will temporarily use a short delay of 20 to mitigate this issue.
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
self.attachEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
clickHandler: function(event) {
|
||||||
|
if (!event) { event = window.event; }
|
||||||
|
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isFlipped) {
|
||||||
|
this.unflip();
|
||||||
|
} else {
|
||||||
|
this.flip();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverHandler: function() {
|
||||||
|
var self = this;
|
||||||
|
self.element.off('mouseleave.flip');
|
||||||
|
|
||||||
|
self.flip();
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
|
||||||
|
if (!self.element.is(":hover")) {
|
||||||
|
self.unflip();
|
||||||
|
}
|
||||||
|
}, (self.setting.speed + 150));
|
||||||
|
},
|
||||||
|
|
||||||
|
attachEvents: function() {
|
||||||
|
var self = this;
|
||||||
|
if (self.setting.trigger === "click") {
|
||||||
|
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
|
||||||
|
} else if (self.setting.trigger === "hover") {
|
||||||
|
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
|
||||||
|
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
flipChanged: function(callback) {
|
||||||
|
this.element.trigger('flip:change');
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(this.element);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
changeSettings: function(options, callback) {
|
||||||
|
var self = this;
|
||||||
|
var changeNeeded = false;
|
||||||
|
|
||||||
|
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
|
||||||
|
self.setting.axis = options.axis.toLowerCase();
|
||||||
|
changeNeeded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
|
||||||
|
self.setting.reverse = options.reverse;
|
||||||
|
changeNeeded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (changeNeeded) {
|
||||||
|
var faces = self.frontElement.add(self.backElement);
|
||||||
|
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
|
||||||
|
|
||||||
|
faces.css({
|
||||||
|
transition: "none"
|
||||||
|
});
|
||||||
|
|
||||||
|
// This sets up the first flip in the new direction automatically
|
||||||
|
var rotateAxis = "rotate" + self.setting.axis;
|
||||||
|
|
||||||
|
if (self.isFlipped) {
|
||||||
|
self.frontElement.css({
|
||||||
|
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
self.backElement.css({
|
||||||
|
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Providing a nicely wrapped up callback because transform is essentially async
|
||||||
|
setTimeout(function() {
|
||||||
|
faces.css(savedTrans);
|
||||||
|
self.flipChanged(callback);
|
||||||
|
}, 0);
|
||||||
|
} else {
|
||||||
|
// If we didnt have to set the axis we can just call back.
|
||||||
|
self.flipChanged(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* jQuery collection methods
|
||||||
|
*/
|
||||||
|
$.fn.flip = function (options, callback) {
|
||||||
|
if (typeof options === 'function') {
|
||||||
|
callback = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options === "string" || typeof options === "boolean") {
|
||||||
|
this.each(function() {
|
||||||
|
var flip = $(this).data('flip-model');
|
||||||
|
|
||||||
|
if (options === "toggle") {
|
||||||
|
options = !flip.isFlipped;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options) {
|
||||||
|
flip.flip(callback);
|
||||||
|
} else {
|
||||||
|
flip.unflip(callback);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.each(function() {
|
||||||
|
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
|
||||||
|
var flip = $(this).data('flip-model');
|
||||||
|
|
||||||
|
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
|
||||||
|
flip.changeSettings(options, callback);
|
||||||
|
}
|
||||||
|
} else { // Init
|
||||||
|
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
}( jQuery ));
|
||||||
6
bower_components/flip/dist/jquery.flip.min.js
vendored
Normal file
6
bower_components/flip/dist/jquery.flip.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
bower_components/flip/dist/jquery.flip.min.js.map
vendored
Normal file
1
bower_components/flip/dist/jquery.flip.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
64
bower_components/flip/package.json
vendored
Normal file
64
bower_components/flip/package.json
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
{
|
||||||
|
"name": "flip",
|
||||||
|
"version": "1.1.2",
|
||||||
|
"description": "jQuery Plugin - 3d Flip Content",
|
||||||
|
"keywords": [
|
||||||
|
"jquery-plugin"
|
||||||
|
],
|
||||||
|
"main": "dist/jquery.flip.js",
|
||||||
|
"homepage": "https://github.com/nnattawat/flip",
|
||||||
|
"bugs": "https://github.com/nnattawat/flip/issues",
|
||||||
|
"author": {
|
||||||
|
"name": "Nattawat Nonsung",
|
||||||
|
"email": "armmer1@gmail.com",
|
||||||
|
"url": "https://github.com/nnattawat"
|
||||||
|
},
|
||||||
|
"contributors": [
|
||||||
|
{
|
||||||
|
"name": "Carlos Fagiani Junior",
|
||||||
|
"email": "fagianijunior@gmail.com",
|
||||||
|
"url": "https://github.com/fagianijunior"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Zlatko Fedor",
|
||||||
|
"email": "zfedor@gmail.com",
|
||||||
|
"url": "https://github.com/seeden"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Jemar Jones",
|
||||||
|
"email": "jemarkjones@gmail.com",
|
||||||
|
"url": "http://JKJones.me/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Razvan Popa",
|
||||||
|
"url": "https://github.com/VholtWCP"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Stijn de Witt",
|
||||||
|
"email": "StijnDeWitt@hotmail.com",
|
||||||
|
"url": "http://StijnDeWitt.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/nnattawat/flip.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"grunt-contrib-concat": "~0.3.0",
|
||||||
|
"grunt-contrib-uglify": "~0.2.7",
|
||||||
|
"grunt-contrib-watch": "~0.5.3",
|
||||||
|
"grunt-contrib-clean": "~0.5.0",
|
||||||
|
"grunt-contrib-connect": "~0.5.0",
|
||||||
|
"time-grunt": "~0.2.3",
|
||||||
|
"load-grunt-tasks": "~0.2.0",
|
||||||
|
"grunt": "~0.4.2",
|
||||||
|
"grunt-contrib-jshint": "~1.0.0",
|
||||||
|
"grunt-cli": "~0.1.13",
|
||||||
|
"bower": "~1.7.6"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "grunt jshint",
|
||||||
|
"grunt": "grunt"
|
||||||
|
}
|
||||||
|
}
|
||||||
366
bower_components/flip/src/flip.js
vendored
Normal file
366
bower_components/flip/src/flip.js
vendored
Normal file
|
|
@ -0,0 +1,366 @@
|
||||||
|
(function( $ ) {
|
||||||
|
/*
|
||||||
|
* Private attributes and method
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
|
||||||
|
var whichTransitionEvent = function() {
|
||||||
|
var t, el = document.createElement("fakeelement"),
|
||||||
|
transitions = {
|
||||||
|
"transition" : "transitionend",
|
||||||
|
"OTransition" : "oTransitionEnd",
|
||||||
|
"MozTransition" : "transitionend",
|
||||||
|
"WebkitTransition": "webkitTransitionEnd"
|
||||||
|
};
|
||||||
|
|
||||||
|
for (t in transitions) {
|
||||||
|
if (el.style[t] !== undefined) {
|
||||||
|
return transitions[t];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Model declaration
|
||||||
|
*/
|
||||||
|
var Flip = function($el, options, callback) {
|
||||||
|
// Define default setting
|
||||||
|
this.setting = {
|
||||||
|
axis: "y",
|
||||||
|
reverse: false,
|
||||||
|
trigger: "click",
|
||||||
|
speed: 500,
|
||||||
|
forceHeight: false,
|
||||||
|
forceWidth: false,
|
||||||
|
autoSize: true,
|
||||||
|
front: '.front',
|
||||||
|
back: '.back'
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setting = $.extend(this.setting, options);
|
||||||
|
|
||||||
|
if (typeof options.axis === 'string' && (options.axis.toLowerCase() === 'x' || options.axis.toLowerCase() === 'y')) {
|
||||||
|
this.setting.axis = options.axis.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.reverse === "boolean") {
|
||||||
|
this.setting.reverse = options.reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.trigger === 'string') {
|
||||||
|
this.setting.trigger = options.trigger.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
var speed = parseInt(options.speed);
|
||||||
|
if (!isNaN(speed)) {
|
||||||
|
this.setting.speed = speed;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.forceHeight === "boolean") {
|
||||||
|
this.setting.forceHeight = options.forceHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.forceWidth === "boolean") {
|
||||||
|
this.setting.forceWidth = options.forceWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.autoSize === "boolean") {
|
||||||
|
this.setting.autoSize = options.autoSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.front === 'string' || options.front instanceof $) {
|
||||||
|
this.setting.front = options.front;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options.back === 'string' || options.back instanceof $) {
|
||||||
|
this.setting.back = options.back;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Other attributes
|
||||||
|
this.element = $el;
|
||||||
|
this.frontElement = this.getFrontElement();
|
||||||
|
this.backElement = this.getBackElement();
|
||||||
|
this.isFlipped = false;
|
||||||
|
|
||||||
|
this.init(callback);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Public methods
|
||||||
|
*/
|
||||||
|
$.extend(Flip.prototype, {
|
||||||
|
|
||||||
|
flipDone: function(callback) {
|
||||||
|
var self = this;
|
||||||
|
// Providing a nicely wrapped up callback because transform is essentially async
|
||||||
|
self.element.one(whichTransitionEvent(), function() {
|
||||||
|
self.element.trigger('flip:done');
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(self.element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
flip: function(callback) {
|
||||||
|
if (this.isFlipped) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isFlipped = true;
|
||||||
|
|
||||||
|
var rotateAxis = "rotate" + this.setting.axis;
|
||||||
|
this.frontElement.css({
|
||||||
|
transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backElement.css({
|
||||||
|
transform: rotateAxis + "(0deg)",
|
||||||
|
"z-index": "1"
|
||||||
|
});
|
||||||
|
this.flipDone(callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
unflip: function(callback) {
|
||||||
|
if (!this.isFlipped) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isFlipped = false;
|
||||||
|
|
||||||
|
var rotateAxis = "rotate" + this.setting.axis;
|
||||||
|
this.frontElement.css({
|
||||||
|
transform: rotateAxis + "(0deg)",
|
||||||
|
"z-index": "1"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backElement.css({
|
||||||
|
transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
this.flipDone(callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
getFrontElement: function() {
|
||||||
|
if (this.setting.front instanceof $) {
|
||||||
|
return this.setting.front;
|
||||||
|
} else {
|
||||||
|
return this.element.find(this.setting.front);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getBackElement: function() {
|
||||||
|
if (this.setting.back instanceof $) {
|
||||||
|
return this.setting.back;
|
||||||
|
} else {
|
||||||
|
return this.element.find(this.setting.back);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function(callback) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var faces = self.frontElement.add(self.backElement);
|
||||||
|
var rotateAxis = "rotate" + self.setting.axis;
|
||||||
|
var perspective = self.element["outer" + (rotateAxis === "rotatex" ? "Height" : "Width")]() * 2;
|
||||||
|
var elementCss = {
|
||||||
|
'perspective': perspective,
|
||||||
|
'position': 'relative'
|
||||||
|
};
|
||||||
|
var backElementCss = {
|
||||||
|
"transform": rotateAxis + "(" + (self.setting.reverse ? "180deg" : "-180deg") + ")",
|
||||||
|
"z-index": "0",
|
||||||
|
"position": "relative"
|
||||||
|
};
|
||||||
|
var faceElementCss = {
|
||||||
|
"backface-visibility": "hidden",
|
||||||
|
"transform-style": "preserve-3d",
|
||||||
|
"position": "absolute",
|
||||||
|
"z-index": "1"
|
||||||
|
};
|
||||||
|
|
||||||
|
if (self.setting.forceHeight) {
|
||||||
|
faces.outerHeight(self.element.height());
|
||||||
|
} else if (self.setting.autoSize) {
|
||||||
|
faceElementCss.height = '100%';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (self.setting.forceWidth) {
|
||||||
|
faces.outerWidth(self.element.width());
|
||||||
|
} else if (self.setting.autoSize) {
|
||||||
|
faceElementCss.width = '100%';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Back face always visible on Chrome #39
|
||||||
|
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window) {
|
||||||
|
//Blink Engine, add preserve-3d to self.element
|
||||||
|
elementCss["-webkit-transform-style"] = "preserve-3d";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
faces.css(faceElementCss).find('*').css({
|
||||||
|
"backface-visibility": "hidden"
|
||||||
|
});
|
||||||
|
|
||||||
|
self.element.css(elementCss);
|
||||||
|
self.backElement.css(backElementCss);
|
||||||
|
|
||||||
|
// #39
|
||||||
|
// not forcing width/height may cause an initial flip to show up on
|
||||||
|
// page load when we apply the style to reverse the backface...
|
||||||
|
// To prevent self we first apply the basic styles and then give the
|
||||||
|
// browser a moment to apply them. Only afterwards do we add the transition.
|
||||||
|
setTimeout(function() {
|
||||||
|
// By now the browser should have applied the styles, so the transition
|
||||||
|
// will only affect subsequent flips.
|
||||||
|
var speedInSec = self.setting.speed / 1000 || 0.5;
|
||||||
|
faces.css({
|
||||||
|
"transition": "all " + speedInSec + "s ease-out"
|
||||||
|
});
|
||||||
|
|
||||||
|
// This allows flip to be called for setup with only a callback (default settings)
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(self.element);
|
||||||
|
}
|
||||||
|
|
||||||
|
// While this used to work with a setTimeout of zero, at some point that became
|
||||||
|
// unstable and the initial flip returned. The reason for this is unknown but we
|
||||||
|
// will temporarily use a short delay of 20 to mitigate this issue.
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
self.attachEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
clickHandler: function(event) {
|
||||||
|
if (!event) { event = window.event; }
|
||||||
|
if (this.element.find($(event.target).closest('button, a, input[type="submit"]')).length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isFlipped) {
|
||||||
|
this.unflip();
|
||||||
|
} else {
|
||||||
|
this.flip();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverHandler: function() {
|
||||||
|
var self = this;
|
||||||
|
self.element.off('mouseleave.flip');
|
||||||
|
|
||||||
|
self.flip();
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
|
||||||
|
if (!self.element.is(":hover")) {
|
||||||
|
self.unflip();
|
||||||
|
}
|
||||||
|
}, (self.setting.speed + 150));
|
||||||
|
},
|
||||||
|
|
||||||
|
attachEvents: function() {
|
||||||
|
var self = this;
|
||||||
|
if (self.setting.trigger === "click") {
|
||||||
|
self.element.on($.fn.tap ? "tap.flip" : "click.flip", $.proxy(self.clickHandler, self));
|
||||||
|
} else if (self.setting.trigger === "hover") {
|
||||||
|
self.element.on('mouseenter.flip', $.proxy(self.hoverHandler, self));
|
||||||
|
self.element.on('mouseleave.flip', $.proxy(self.unflip, self));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
flipChanged: function(callback) {
|
||||||
|
this.element.trigger('flip:change');
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback.call(this.element);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
changeSettings: function(options, callback) {
|
||||||
|
var self = this;
|
||||||
|
var changeNeeded = false;
|
||||||
|
|
||||||
|
if (options.axis !== undefined && self.setting.axis !== options.axis.toLowerCase()) {
|
||||||
|
self.setting.axis = options.axis.toLowerCase();
|
||||||
|
changeNeeded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.reverse !== undefined && self.setting.reverse !== options.reverse) {
|
||||||
|
self.setting.reverse = options.reverse;
|
||||||
|
changeNeeded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (changeNeeded) {
|
||||||
|
var faces = self.frontElement.add(self.backElement);
|
||||||
|
var savedTrans = faces.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
|
||||||
|
|
||||||
|
faces.css({
|
||||||
|
transition: "none"
|
||||||
|
});
|
||||||
|
|
||||||
|
// This sets up the first flip in the new direction automatically
|
||||||
|
var rotateAxis = "rotate" + self.setting.axis;
|
||||||
|
|
||||||
|
if (self.isFlipped) {
|
||||||
|
self.frontElement.css({
|
||||||
|
transform: rotateAxis + (self.setting.reverse ? "(-180deg)" : "(180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
self.backElement.css({
|
||||||
|
transform: rotateAxis + (self.setting.reverse ? "(180deg)" : "(-180deg)"),
|
||||||
|
"z-index": "0"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Providing a nicely wrapped up callback because transform is essentially async
|
||||||
|
setTimeout(function() {
|
||||||
|
faces.css(savedTrans);
|
||||||
|
self.flipChanged(callback);
|
||||||
|
}, 0);
|
||||||
|
} else {
|
||||||
|
// If we didnt have to set the axis we can just call back.
|
||||||
|
self.flipChanged(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* jQuery collection methods
|
||||||
|
*/
|
||||||
|
$.fn.flip = function (options, callback) {
|
||||||
|
if (typeof options === 'function') {
|
||||||
|
callback = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof options === "string" || typeof options === "boolean") {
|
||||||
|
this.each(function() {
|
||||||
|
var flip = $(this).data('flip-model');
|
||||||
|
|
||||||
|
if (options === "toggle") {
|
||||||
|
options = !flip.isFlipped;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options) {
|
||||||
|
flip.flip(callback);
|
||||||
|
} else {
|
||||||
|
flip.unflip(callback);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.each(function() {
|
||||||
|
if ($(this).data('flip-model')) { // The element has been initiated, all we have to do is change applicable settings
|
||||||
|
var flip = $(this).data('flip-model');
|
||||||
|
|
||||||
|
if (options && (options.axis !== undefined || options.reverse !== undefined)) {
|
||||||
|
flip.changeSettings(options, callback);
|
||||||
|
}
|
||||||
|
} else { // Init
|
||||||
|
$(this).data('flip-model', new Flip($(this), (options || {}), callback));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
}( jQuery ));
|
||||||
Loading…
Reference in a new issue