flip added

This commit is contained in:
Samuel Philipp 2016-11-22 23:53:50 +01:00
parent f02ae9432b
commit f0bbcfb654
19 changed files with 1365 additions and 0 deletions

25
bower_components/flip/.bower.json vendored Normal file
View 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
View file

@ -0,0 +1,3 @@
{
"directory": "bower_components"
}

4
bower_components/flip/.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
/node_modules/
/bower_components/
npm-debug.log
*.swp

25
bower_components/flip/.jshintrc vendored Normal file
View 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
View 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
View 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
View 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
View 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
View file

@ -0,0 +1,65 @@
[![Build Status](https://travis-ci.org/nnattawat/flip.svg?branch=master)](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
View 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": []
}

View 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>

View 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
View 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
View 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>

View 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 ));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

64
bower_components/flip/package.json vendored Normal file
View 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
View 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 ));