BIG BIG BIG update
V0 of first interface going to refactor JS
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "jquery.pep",
|
||||
"homepage": "https://github.com/briangonzalez/jquery.pep.js",
|
||||
"version": "0.6.3",
|
||||
"_release": "0.6.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.6.3",
|
||||
"commit": "040ff8b765c4676e06190a631ef6bcdec9ac63a9"
|
||||
},
|
||||
"_source": "git://github.com/briangonzalez/jquery.pep.js.git",
|
||||
"_target": "~0.6.3",
|
||||
"_originalSource": "jquery.pep",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
dist/jquery.pep.min.js.gz
|
||||
node_modules
|
||||
@@ -0,0 +1 @@
|
||||
0.10.13
|
||||
@@ -0,0 +1,38 @@
|
||||
## Contributing.
|
||||
|
||||
First and foremost, if you've made it this far: __you are awesome__. Thanks for even considering contributing to open source.
|
||||
|
||||
Here's how you can contribute to this repo:
|
||||
|
||||
```bash
|
||||
# 1. Make your edits.
|
||||
|
||||
# 2. Views the demos in your browser, and test your changes thoroughly.
|
||||
# Create new demos as needed.
|
||||
grunt serve --port=8000
|
||||
|
||||
# 3. Hint, test, and compile.
|
||||
grunt
|
||||
|
||||
# 4. Commit your changes, closing issues as appropriate.
|
||||
git commit -am "fixes #30 - my awesome fix"
|
||||
|
||||
# 5. If you're changing Pep's source code (not readmes/demos/etc), tag the commit so Bower can get the latest and greatest.
|
||||
# Be sure to increment the version appropriately.
|
||||
# Also change the version in package.json
|
||||
vi package.json
|
||||
git tag -a v0.5.12 -m 'my awesome version v0.5.12'
|
||||
|
||||
# 6. Create pull request with changes.
|
||||
# or....
|
||||
# 6. If you have privileges, push changes and tags:
|
||||
git push origin master
|
||||
git push origin --tags
|
||||
````
|
||||
|
||||
## Need help?
|
||||
As always, find me on Twitter for help.
|
||||
|
||||
|  |
|
||||
|---|
|
||||
| [Brian Gonzalez](http://briangonzalez.org) |
|
||||
@@ -0,0 +1,53 @@
|
||||
/*global module:false*/
|
||||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
meta: {
|
||||
},
|
||||
qunit: {
|
||||
files: ['test/**/*.html']
|
||||
},
|
||||
watch: {
|
||||
files: '<config:lint.files>',
|
||||
tasks: 'lint qunit'
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
curly: false,
|
||||
eqeqeq: true,
|
||||
immed: true,
|
||||
latedef: true,
|
||||
newcap: true,
|
||||
noarg: true,
|
||||
sub: true,
|
||||
undef: false,
|
||||
boss: true,
|
||||
eqnull: true,
|
||||
browser: true
|
||||
},
|
||||
globals: {
|
||||
jQuery: true
|
||||
},
|
||||
src: ['src/**/*.js'],
|
||||
all: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js']
|
||||
},
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['jshint:src', 'qunit']);
|
||||
|
||||
// Server Task
|
||||
grunt.registerTask('serve', 'Serves any directory on given port', function (env) {
|
||||
var shell = require('shelljs');
|
||||
var port = grunt.option('port') || 8000;
|
||||
var dir = grunt.option('dir') || '.';
|
||||
console.log(['Serving', dir,'on port:', port].join(' '))
|
||||
shell.exec('cd '+ dir +' && python -m SimpleHTTPServer ' + port);
|
||||
});
|
||||
|
||||
};
|
||||
@@ -0,0 +1,137 @@
|
||||
<img src="http://s.cdpn.io/4629/pep-with-circles.svg" width=600 alt='jquery.pep.js'>
|
||||
----
|
||||
*kinetic drag for mobile & desktop; more at [http://pep.briangonzalez.org](http://pep.briangonzalez.org)*
|
||||
|
||||
|
||||
## Getting Started
|
||||
Getting started is simple: include jQuery, include pep, then:
|
||||
```javascript
|
||||
$('.pep').pep(); // yup, that simple.
|
||||
```
|
||||
|
||||
## Usage
|
||||
Pep has many options. Here they are in their entirety, with their defaults. Need a little help? [Just ask](http://twitter.com/brianmgonzalez).
|
||||
|
||||
| Name | Default | Description |
|
||||
|---------------------------------|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| initiate | `function(){}` | [≘ touchstart/mousedown] called when first touch / click event is triggered on the object |
|
||||
| start | `function(){}` | called when dragging starts; when `dx` or `dy` are greater than `startThreshold[0]` or `startThreshold[1]` |
|
||||
| drag | `function(){}` | [≘ touchmove/mousemove] called continuously while the object is dragging |
|
||||
| stop | `function(){}` | [≘ touchend/mouseup] called when dragging stops |
|
||||
| easing | `function(){}` | called while object is easing |
|
||||
| rest | `function(){}` | called after dragging stops, and object has come to rest |
|
||||
| moveTo | `false` | custom method to override the default moveTo functionality. |
|
||||
| callIfNotStarted | `['stop', 'rest']` | if object has *not* moved outside of the `startThreshold`, call either the user-provided `stop` or `rest` fxn's anyway, or call both |
|
||||
| startThreshold | `[0,0]` | how far past should the object move in the [x,y] direction before user 'start' function is called |
|
||||
| grid | `[0,0]` | define an [x,y] grid for the object to move along |
|
||||
| revert | `false` | revert back to initial position |
|
||||
| revertAfter | `stop` | revert after given event - `'stop'` or `'ease'` |
|
||||
| revertIf | `function(){ return true; }` | return `false` / `true` from this function to conditionally revert an object |
|
||||
| droppable | `false` | CSS selector that this element can be dropped on, false to disable |
|
||||
| droppableActiveClass | `'pep-dpa'` | class to add to active droppable parents, default to pep-dpa (droppable parent active); inspect `this.activeDropRegions` within each function for valuable info |
|
||||
| overlapFunction | `false` | override pep's default overlap function; takes two args: a & b and returns true if they overlap |
|
||||
| cssEaseString | *cubic-bezier(0.190, 1.000, 0.220, 1.000)* | get more css ease params from [ http://matthewlein.com/ceaser/ ] |
|
||||
| cssEaseDuration | `750` | how long should it take (in ms) for the object to get from stop to rest? |
|
||||
| constrainTo | `false` | constrain object to `'window'` or `'parent'` or `[top, right, bottom, left]`; works best w/ useCSSTranslation set to false |
|
||||
| axis | `null` | constrain object to either 'x' or 'y' axis |
|
||||
| debug | `false ` | show debug values and events in the lower-righthand corner of page |
|
||||
| activeClass | `'pep-active'` | class to add to the pep element while dragging |
|
||||
| multiplier | `1` | +/- this number to modify to 1:1 ratio of finger/mouse movement to el movement |
|
||||
| velocityMultiplier | `1.9` | +/- this number to modify the springiness of the object as your release it |
|
||||
| shouldPreventDefault | `true` | in some cases, we don't want to prevent the default mousedown/touchstart on our Pep object, your call |
|
||||
| allowDragEventPropagation | `true` | set to false to stop drag events from bubbling up through the DOM tree |
|
||||
| stopEvents | `''` | space delimited set of events which programmatically cause the object to stop |
|
||||
| hardwareAccelerate | `true` | apply the CSS3 silver bullet method to accelerate the pep object: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ |
|
||||
| useCSSTranslation | `true` | use CSS transform translations as opposed to top/left |
|
||||
| disableSelect | `true` | apply `user-select: none` (CSS) to the object |
|
||||
| removeMargins | `true` | remove margins for better object placement |
|
||||
| shouldEase | `true` | disable/enable easing |
|
||||
| place | `true` | bypass pep's object placement logic |
|
||||
| deferPlacement | `false` | defer object placement until start event occurs |
|
||||
| forceNonCSS3Movement | `false` | DO NOT USE: this is subject to come/go. Use at your own risk |
|
||||
| elementsWithInteraction | `'input'` | valid CSS/jQuery selector for elements within the Pep object that should allow user interaction, and thus propagate to allow movement |
|
||||
| ignoreRightClick | `true` | start event will be ignored if triggered by a right click |
|
||||
| startPos | `{ left: null, top: null }` | set the default left/top coordinate to position the object with on load |
|
||||
|
||||
|
||||
|
||||
## API
|
||||
```javascript
|
||||
// Toggle functionality of all Pep objects on the page
|
||||
$.pep.toggleAll()
|
||||
|
||||
// Explicitly disable all Pep objects on the page
|
||||
$.pep.toggleAll(false)
|
||||
|
||||
// Explicitly enable all Pep objects on the page
|
||||
$.pep.toggleAll(true)
|
||||
|
||||
// Unbind Pep completely from the object
|
||||
var $pep = $('.pep');
|
||||
$pep.pep(); // bind
|
||||
$.pep.unbind( $pep ); // unbind
|
||||
$pep.pep(); // bind
|
||||
````
|
||||
|
||||
## Class Applications
|
||||
The following classes are applied corresponding to events that are happening on the pep object:
|
||||
|
||||
- `pep-active` -- applied when initiate event is triggered; removed when ease has finished
|
||||
- `pep-start` -- applied when start event is triggered; removed when stop event occurs
|
||||
- `pep-ease` -- applied when stop event is triggered; removed when ease has finished
|
||||
|
||||
## Installation
|
||||
__Via Bower__
|
||||
|
||||
```shell
|
||||
bower install jquery.pep
|
||||
````
|
||||
|
||||
__From CDN__
|
||||
|
||||
Bleeding edge, development version:
|
||||
|
||||
````
|
||||
http://rawgithub.com/briangonzalez/jquery.pep.js/master/src/jquery.pep.js
|
||||
````
|
||||
|
||||
## A note on `droppable` option
|
||||
There is a convenience object within the context of each function pep makes available (drag, rest, ease, etc.) called `activeDropRegions`, which is an array of jQuery objects that the pep object is currently "over".
|
||||
|
||||
__Example:__
|
||||
```javascript
|
||||
$('.pep').pep({
|
||||
droppable: '.drop-target',
|
||||
drag: function(ev, obj){
|
||||
console.log('There are ' + this.activeDropRegions.length + 'active drop regions.')
|
||||
},
|
||||
revert: true,
|
||||
revertIf: function(ev, obj){
|
||||
return !this.activeDropRegions.length;
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Having an issue?
|
||||
|
||||
Before filing an issue, be sure to read the docs and search previous issues. If you're still not having any luck, be sure to fork the following CodePen, demonstrating the issue that you're having.
|
||||
|
||||
#### [→ Fork me and modify before filing issue](http://codepen.io/briangonzalez/pen/wqmIJ)
|
||||
|
||||
|
||||
## Examples
|
||||
Checkout the examples in the `demos` folder, which cover a wide array of test cases and options. Or you can check out other examples at http://pep.briangonzalez.org/ (which can also be found in more detail on Codepen: http://codepen.io/briangonzalez/tag/pep-demo)
|
||||
|
||||
## Author
|
||||
|  |
|
||||
|---|
|
||||
| [Brian Gonzalez](http://briangonzalez.org) |
|
||||
|
||||
|
||||
## Support
|
||||
|
||||
Pep includes at least partial support for most browsers, dating back to IE6.
|
||||
|
||||
## License
|
||||
|
||||
Pep is licensed under the [MIT License](http://www.tldrlegal.com/license/mit-license)
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - constrained to axis</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep.x').pep({ axis: 'x', debug: true, useCSSTranslation: false });
|
||||
$('.pep.y').pep({ axis: 'y', debug: true, useCSSTranslation: false });
|
||||
$('.pep.x.trans').pep({ axis: 'x', debug: true, useCSSTranslation: true });
|
||||
$('.pep.y.trans').pep({ axis: 'y', debug: true, useCSSTranslation: true });
|
||||
$('.pep.noease').pep({ axis: 'y', shouldEase: false, debug: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body{ padding: 0; margin: 0; }
|
||||
.pep { width: 100px; height: 100px; background: rgb(243, 200, 200); color: white; opacity: 0.8;}
|
||||
.x { position: absolute; top: 40px; left: 10px; background: rgb(120, 200, 200); opacity: 0.8;}
|
||||
.y { position: absolute; top: 60px; left: 30px; background: rgb(243, 120, 200); opacity: 0.8;}
|
||||
.noease { position: absolute; top: 80px; left: 50px; background: rgb(243, 80, 100); opacity: 0.8;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep x">X</div>
|
||||
<div class="pep y">Y</div>
|
||||
<div class="pep x trans">X translation</div>
|
||||
<div class="pep y trans">Y translation</div>
|
||||
<div class="pep noease">Y </br> ease disabled</div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo - debug enabled </title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({ debug: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo - using minified version</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../dist/jquery.pep.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Vendored
+39
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - constrained objects</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({ constrainTo: '.parent-2' });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body { padding: 0; margin: 0; }
|
||||
.parent-1 { width: 300px; height: 300px; margin: 0; background: blue; }
|
||||
.parent-2 { width: 800px; height: 500px; background: yellow; }
|
||||
.pep { width: 100px; height: 100px; background: red; color: white; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="parent-2">
|
||||
<div class="parent-1">
|
||||
<div class="pep">constrained to parent</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - constrained objects</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.peppable').pep({ constrainTo: 'parent' });
|
||||
$('.peppable2').pep({ constrainTo: 'window' });
|
||||
$('.peppable3').pep({ constrainTo: 'window' });
|
||||
$('.peppable4').pep({ constrainTo: 'parent' });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body{ padding: 0; margin: 0; }
|
||||
#parent { border: 5px solid #666; width: 800px; height: 500px; margin: 30px; }
|
||||
.pep { width: 200px; height: 200px; background: rgb(243, 200, 200); color: white; }
|
||||
.peppable { margin: 10px; }
|
||||
.peppable2 { position: absolute; top: 40px; left: 300px; background: rgb(120, 200, 200); }
|
||||
.peppable3 { position: absolute; top: 40px; left: 600px; background: rgb(243, 120, 200); }
|
||||
.peppable4 { position: absolute; top: 40px; left: 600px; background: rgb(143, 120, 200); }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div id="parent">
|
||||
<div class="pep peppable">constrained to parent</div>
|
||||
<div class="pep peppable4">constrained to parent, translation movement </div>
|
||||
</div>
|
||||
|
||||
<div class="pep peppable2">constrained to window</div>
|
||||
<div class="pep peppable3">constrained to window, translation movement </div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Vendored
+40
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo - using minified version</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep {
|
||||
background: #bbb;
|
||||
width: 200px;
|
||||
}
|
||||
.pep form {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep">
|
||||
<form>
|
||||
<input type="text" placeholder="this is an input"></input>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep - active, start, and ease classes</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep.ease').pep();
|
||||
$('.pep.no-ease').pep({
|
||||
shouldEase: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep { width: 200px; height: 200px; background: blue; border-radius: 200px; text-align: center;}
|
||||
.pep-active { border: 10px solid green; }
|
||||
.pep-start { background: red }
|
||||
.pep-ease { background: yellow }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
green border = 'pep-active' class applied </br>
|
||||
red background = 'pep-start' class applied </br>
|
||||
yellow background = 'pep-ease' class applied
|
||||
<div class="pep ease"></div>
|
||||
<div class="pep no-ease">no-ease</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom constraint demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.pep').pep({
|
||||
axis: 'y',
|
||||
constrainTo: [100, false, $(window).innerHeight() - 100, false]
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body{ overflow: hidden; }
|
||||
.pep{ height: 1000px; width: 100%; position: absolute; top: 100px; left: 0; background: blue }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div class='pep'></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom constraint demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.pep-horizontal').pep({
|
||||
axis: 'x',
|
||||
constrainTo: [0, 0, 0, ($('.pep-horizontal').width() - $('.pep-container-horizontal').width()) * -1]
|
||||
});
|
||||
|
||||
$('.pep-vertical').pep({
|
||||
axis: 'y',
|
||||
constrainTo: [($('.pep-vertical').height() - $('.pep-container-vertical').height()) * -1, 0, 0, 0]
|
||||
});
|
||||
|
||||
$('.pep').pep({
|
||||
constrainTo: [300, 600, 600, 300]
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep-container-horizontal { width: 600px; height: 200px; border: 1px solid blue; overflow: hidden; position: relative; margin-bottom: 20px }
|
||||
.pep-horizontal { list-style: none; margin: 0; width: 2510px; padding: 0 }
|
||||
.pep-horizontal li { float: left; margin-right: 10px; background: blue; text-align: center; width: 200px; height: 200px; color: #fff }
|
||||
.pep-horizontal li:last-child { margin-right: 0; }
|
||||
|
||||
.pep-container-vertical { width: 200px; height: 600px; border: 1px solid red; overflow: hidden; position: relative }
|
||||
.pep-vertical { list-style: none; margin: 0; width: 2510px; padding: 0 }
|
||||
.pep-vertical li { margin-bottom: 10px; background: red; text-align: center; width: 200px; height: 200px; color: #fff }
|
||||
.pep-vertical li:last-child { margin-bottom: 0; }
|
||||
|
||||
.pep{ height: 100px; width: 100px; position: absolute; top: 300px; left: 300px; background: blue }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep-container-horizontal">
|
||||
<ul class="pep-horizontal">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pep-container-vertical">
|
||||
<ul class="pep-vertical">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
<li>11</li>
|
||||
<li>12</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class='pep'></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo - custom easing functions</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
cssEaseString: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
|
||||
debug: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: #ccc; border: 5px solid red; padding: 30px; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep">
|
||||
<a href="http://matthewlein.com/ceaser/">Get more easing functions</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom move demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var dragger = $('<div class="dragging"></div>');
|
||||
var peper = $('.pep').find('.dragger').pep({
|
||||
place: false,
|
||||
deferPlacement: true,
|
||||
velocityMultiplier: 0,
|
||||
moveTo:function(x, y) {
|
||||
dragger.css({
|
||||
left: x,
|
||||
top: y
|
||||
});
|
||||
},
|
||||
initiate: function(e, pep) {
|
||||
dragger.css({
|
||||
top: peper.offset().top,
|
||||
left: peper.offset().left,
|
||||
width: peper.width(),
|
||||
height: peper.height()
|
||||
}).hide().appendTo(window.document.body).fadeIn(250);
|
||||
},
|
||||
stop: function(e, pep) {
|
||||
peper.fadeOut({
|
||||
queue: false,
|
||||
duration: 250,
|
||||
complete: function() {
|
||||
peper.stop(1, 1).show();
|
||||
dragger.fadeOut(150, function(){
|
||||
dragger.remove();
|
||||
});
|
||||
}
|
||||
}).animate({
|
||||
top: dragger.offset().top,
|
||||
left: dragger.offset().left
|
||||
}, 500);
|
||||
}
|
||||
}).end();
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.pep{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
position:absolute;
|
||||
margin:0;
|
||||
top:0; left:0;
|
||||
}
|
||||
|
||||
.pep > .dragger {
|
||||
width:20px; height:20px;
|
||||
background: red;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.dragging {
|
||||
background:#333;
|
||||
border-radius:5px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pep">
|
||||
<div class='dragger'>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - disabling api</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#toggle').click(function(){
|
||||
$.pep.toggleAll();
|
||||
$('.pep').toggleClass('disabled');
|
||||
});
|
||||
|
||||
$('.pep').pep();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; opacity: 0.6; }
|
||||
.pep.disabled{ background: #eee; }
|
||||
|
||||
.pep-1 { position: absolute; top: 50px; left: 10px; }
|
||||
.pep-2 { position: absolute; top: 100px; left: 50px; }
|
||||
.pep-3 { position: absolute; top: 150px; left: 90px; }
|
||||
.pep-4 { position: absolute; top: 200px; left: 130px; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<button id="toggle">Toggle All</button>
|
||||
|
||||
<div class="pep pep-1"></div>
|
||||
<div class="pep pep-2"></div>
|
||||
<div class="pep pep-3"></div>
|
||||
<div class="pep pep-4"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - disabling</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.toggle').bind("click touchstart", function(ev){
|
||||
$(this).parent()
|
||||
.toggleClass('disabled')
|
||||
.data('plugin_pep')
|
||||
.toggle();
|
||||
});
|
||||
|
||||
$('.pep').pep({
|
||||
debug: true,
|
||||
elementsWithInteraction: 'button'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; opacity: 0.6; }
|
||||
.pep.disabled{ background: #eee; }
|
||||
|
||||
.pep-1 { position: absolute; top: 10px; left: 10px; }
|
||||
.pep-2 { position: absolute; top: 60px; left: 50px; }
|
||||
.pep-3 { position: absolute; top: 110px; left: 90px; }
|
||||
.pep-4 { position: absolute; top: 160px; left: 130px; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep pep-1">
|
||||
<button class="toggle">Toggle</button>
|
||||
</div>
|
||||
|
||||
<div class="pep pep-2">
|
||||
<button class="toggle">Toggle</button>
|
||||
</div>
|
||||
|
||||
<div class="pep pep-3">
|
||||
<button class="toggle">Toggle</button>
|
||||
</div>
|
||||
|
||||
<div class="pep pep-4">
|
||||
<button class="toggle">Toggle</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep dropppable advanced</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
droppable: ".droppable",
|
||||
overlapFunction: false,
|
||||
useCSSTranslation: false,
|
||||
start: function(ev, obj){
|
||||
obj.noCenter = false;
|
||||
},
|
||||
drag: function(ev, obj){
|
||||
var vel = obj.velocity();
|
||||
var rot = (vel.x)/5;
|
||||
rotate(obj.$el, rot)
|
||||
},
|
||||
stop: function(ev, obj){
|
||||
handleCentering(ev, obj);
|
||||
rotate(obj.$el, 0)
|
||||
},
|
||||
rest: handleCentering
|
||||
});
|
||||
|
||||
function handleCentering(ev, obj){
|
||||
if ( obj.activeDropRegions.length > 0 ) {
|
||||
centerWithin(obj);
|
||||
}
|
||||
}
|
||||
|
||||
function centerWithin(obj){
|
||||
var $parent = obj.activeDropRegions[0];
|
||||
var pTop = $parent.offset().top;
|
||||
var pLeft = $parent.offset().left;
|
||||
var pHeight = $parent.outerHeight();
|
||||
var pWidth = $parent.outerWidth();
|
||||
|
||||
var oTop = obj.$el.offset().top;
|
||||
var oLeft = obj.$el.offset().left;
|
||||
var oHeight = obj.$el.outerHeight();
|
||||
var oWidth = obj.$el.outerWidth();
|
||||
|
||||
var cTop = pTop + (pHeight/2);
|
||||
var cLeft = pLeft + (pWidth/2);
|
||||
|
||||
if ( !obj.noCenter ) {
|
||||
if ( !obj.shouldUseCSSTranslation() ) {
|
||||
var moveTop = cTop - (oHeight/2);
|
||||
var moveLeft = cLeft - (oWidth/2);
|
||||
obj.$el.animate({ top: moveTop, left: moveLeft }, 50);
|
||||
} else{
|
||||
var moveTop = (cTop - oTop) - oHeight/2;
|
||||
var moveLeft = (cLeft - oLeft) - oWidth/2;
|
||||
|
||||
console.log(oTop, oLeft)
|
||||
obj.moveToUsingTransforms( moveTop, moveLeft );
|
||||
}
|
||||
|
||||
obj.noCenter = true;
|
||||
return;
|
||||
}
|
||||
|
||||
obj.noCenter = false;
|
||||
}
|
||||
|
||||
function rotate($obj, deg){
|
||||
$obj.css({
|
||||
"-webkit-transform": "rotate("+ deg +"deg)",
|
||||
"-moz-transform": "rotate("+ deg +"deg)",
|
||||
"-ms-transform": "rotate("+ deg +"deg)",
|
||||
"-o-transform": "rotate("+ deg +"deg)",
|
||||
"transform": "rotate("+ deg +"deg)"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 90px; height: 90px; background: blue; z-index: 10; }
|
||||
.droppable{ width: 100px; height: 100px;
|
||||
position: absolute;
|
||||
border: 5px solid #ccc;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.droppable.m { top: 50%; left:50%; margin-left: -50px; margin-top: -50px; }
|
||||
.droppable.tr { right: 30px; bottom: 30px; }
|
||||
.droppable.br { top: 30px; right: 30px;}
|
||||
.droppable.bl { top: 30px; left: 30px;}
|
||||
.droppable.tl { bottom: 30px; left: 30px;}
|
||||
.pep-dpa{ border-color: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="droppable m"></div>
|
||||
<div class="droppable tr"></div>
|
||||
<div class="droppable br"></div>
|
||||
<div class="droppable bl"></div>
|
||||
<div class="droppable tl"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep droppable w/ consuming parent</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.pep').pep({
|
||||
droppable: '.droppable',
|
||||
overlapFunction: false,
|
||||
useCSSTranslation: false,
|
||||
start: function(ev, obj){
|
||||
obj.noCenter = false;
|
||||
},
|
||||
drag: function(ev, obj){
|
||||
var vel = obj.velocity();
|
||||
var rot = (vel.x)/5;
|
||||
rotate(obj.$el, rot);
|
||||
},
|
||||
stop: function(ev, obj){
|
||||
rotate(obj.$el, 0);
|
||||
},
|
||||
rest: handleCentering
|
||||
});
|
||||
|
||||
function handleCentering(ev, obj){
|
||||
console.log(obj.activeDropRegions.length);
|
||||
if ( obj.activeDropRegions.length > 0 ) {
|
||||
centerWithin(obj);
|
||||
}
|
||||
}
|
||||
|
||||
function centerWithin(obj){
|
||||
var $parent = obj.activeDropRegions[0];
|
||||
var pTop = $parent.position().top;
|
||||
var pLeft = $parent.position().left;
|
||||
var pHeight = $parent.outerHeight();
|
||||
var pWidth = $parent.outerWidth();
|
||||
|
||||
var oTop = obj.$el.position().top;
|
||||
var oLeft = obj.$el.position().left;
|
||||
var oHeight = obj.$el.outerHeight();
|
||||
var oWidth = obj.$el.outerWidth();
|
||||
|
||||
var cTop = pTop + (pHeight/2);
|
||||
var cLeft = pLeft + (pWidth/2);
|
||||
|
||||
if ( !obj.noCenter ) {
|
||||
if ( !obj.shouldUseCSSTranslation() ) {
|
||||
var moveTop = cTop - (oHeight/2);
|
||||
var moveLeft = cLeft - (oWidth/2);
|
||||
obj.$el.animate({ top: moveTop, left: moveLeft }, 50);
|
||||
} else{
|
||||
var moveTop = (cTop - oTop) - oHeight/2;
|
||||
var moveLeft = (cLeft - oLeft) - oWidth/2;
|
||||
obj.moveToUsingTransforms( moveTop, moveLeft );
|
||||
}
|
||||
|
||||
obj.noCenter = true;
|
||||
return;
|
||||
}
|
||||
|
||||
obj.noCenter = false;
|
||||
}
|
||||
|
||||
function rotate($obj, deg){
|
||||
$obj.css({
|
||||
"-webkit-transform": "rotate("+ deg +"deg)",
|
||||
"-moz-transform": "rotate("+ deg +"deg)",
|
||||
"-ms-transform": "rotate("+ deg +"deg)",
|
||||
"-o-transform": "rotate("+ deg +"deg)",
|
||||
"transform": "rotate("+ deg +"deg)"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 80px; height: 80px; background: blue; z-index: 10; }
|
||||
.droppable{ width: 100px; height: 100px;
|
||||
position: absolute;
|
||||
border: 5px solid #ccc; }
|
||||
|
||||
.droppable.tr { right: 100px; bottom: 100px; }
|
||||
.droppable.br { top: 100px; right: 100px;}
|
||||
.droppable.bl { top: 100px; left: 100px;}
|
||||
.droppable.tl { bottom: 100px; left: 100px;}
|
||||
.pep-dpa { border-color: blue; background: yellow }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="droppable tr"></div>
|
||||
<div class="droppable br"></div>
|
||||
<div class="droppable bl"></div>
|
||||
<div class="droppable tl"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep droppable w/ custom overlap</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
droppable: ".droppable",
|
||||
overlapFunction: function($a, $b){
|
||||
var rect1 = $a[0].getBoundingClientRect();
|
||||
var rect2 = $b[0].getBoundingClientRect();
|
||||
|
||||
return ( rect2.left > rect1.left &&
|
||||
rect2.right < rect1.right &&
|
||||
rect2.top > rect1.top &&
|
||||
rect2.bottom < rect1.bottom );
|
||||
},
|
||||
useCSSTranslation: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 40px; height: 40px; background: blue; z-index: 10; }
|
||||
.droppable{ width: 100px; height: 100px;
|
||||
position: absolute;
|
||||
border: 5px solid #ccc; }
|
||||
|
||||
.droppable.m { top: 50%; left:50%; margin-left: -50px; margin-top: -50px; }
|
||||
.droppable.tr { right: 30px; bottom: 30px; }
|
||||
.droppable.br { top: 30px; right: 30px;}
|
||||
.droppable.bl { top: 30px; left: 30px;}
|
||||
.droppable.tl { bottom: 30px; left: 30px;}
|
||||
.pep-dpa { border-color: blue; background: yellow }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="droppable m"></div>
|
||||
<div class="droppable tr"></div>
|
||||
<div class="droppable br"></div>
|
||||
<div class="droppable bl"></div>
|
||||
<div class="droppable tl"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep droppable revertIf</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
droppable: ".droppable",
|
||||
revert: true,
|
||||
revertIf: function(){
|
||||
return !this.activeDropRegions.length;
|
||||
},
|
||||
drag: function(ev, obj){
|
||||
console.log( obj.activeDropRegions);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 90px; height: 90px; background: blue; z-index: 10; }
|
||||
.droppable{ width: 100px; height: 100px;
|
||||
position: absolute;
|
||||
border: 5px solid #ccc;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.droppable.m { top: 50%; left:50%; margin-left: -50px; margin-top: -50px; }
|
||||
.droppable.tr { right: 30px; bottom: 30px; }
|
||||
.droppable.br { top: 30px; right: 30px;}
|
||||
.droppable.bl { top: 30px; left: 30px;}
|
||||
.droppable.tl { bottom: 30px; left: 30px;}
|
||||
.pep-dpa{ border-color: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="droppable m"></div>
|
||||
<div class="droppable tr"></div>
|
||||
<div class="droppable br"></div>
|
||||
<div class="droppable bl"></div>
|
||||
<div class="droppable tl"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep droppable</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
droppable: ".droppable",
|
||||
overlapFunction: false,
|
||||
useCSSTranslation: false,
|
||||
drag: function(ev, obj){
|
||||
console.log( obj.activeDropRegions);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 90px; height: 90px; background: blue; z-index: 10; }
|
||||
.droppable{ width: 100px; height: 100px;
|
||||
position: absolute;
|
||||
border: 5px solid #ccc;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.droppable.m { top: 50%; left:50%; margin-left: -50px; margin-top: -50px; }
|
||||
.droppable.tr { right: 30px; bottom: 30px; }
|
||||
.droppable.br { top: 30px; right: 30px;}
|
||||
.droppable.bl { top: 30px; left: 30px;}
|
||||
.droppable.tl { bottom: 30px; left: 30px;}
|
||||
.pep-dpa{ border-color: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="droppable m"></div>
|
||||
<div class="droppable tr"></div>
|
||||
<div class="droppable br"></div>
|
||||
<div class="droppable bl"></div>
|
||||
<div class="droppable tl"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep - easing</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
axis: 'x',
|
||||
initiate: pdrag,
|
||||
start: pdrag,
|
||||
drag: pdrag,
|
||||
stop: pdrag,
|
||||
easing: pdrag,
|
||||
rest: pdrag,
|
||||
});
|
||||
|
||||
function pdrag(e, obj){
|
||||
var drag = $(obj.el);
|
||||
var left = String( drag.position().left)+"px";
|
||||
$(".status").text(left);
|
||||
$('.other').width(left);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.other{
|
||||
width:0%;
|
||||
height: 40px;
|
||||
background-color:green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="other"></div>
|
||||
<div class="status">status</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - force JS animate everywhere </title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
forceNonCSS3Movement: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - constrained to axis</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep.fwd').pep({
|
||||
debug: true,
|
||||
shouldEase: false,
|
||||
hardwareAccelerate: true,
|
||||
drag: function(ev, obj){
|
||||
if (obj.dx < 0 || obj.dy < 0)
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body{ padding: 0; margin: 0; }
|
||||
.pep { width: 100px; height: 100px; background: rgb(243, 200, 200); color: white; opacity: 0.8;}
|
||||
.fwd { position: absolute; top: 40px; left: 10px; background: rgb(120, 200, 200); opacity: 0.8;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep fwd">forward</div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - grid</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.pep.one').pep({
|
||||
grid: [80,80],
|
||||
shouldEase: false
|
||||
});
|
||||
|
||||
$('.pep.two').pep({
|
||||
grid: [120,120],
|
||||
shouldEase: false
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{
|
||||
width: 80px; height: 80px; background: blue; position: absolute;
|
||||
top: 20px; left: 20px;
|
||||
}
|
||||
|
||||
.pep.two{
|
||||
background: red; width: 160px; height: 160px; top: 140px;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: #eee;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
0deg, transparent 24%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.6) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.6) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.6) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.6) 76%, transparent 77%, transparent);
|
||||
height:100%;
|
||||
background-size:80px 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='container'>
|
||||
<div class="pep one"></div>
|
||||
<div class="pep two"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep image slider demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
var $inner = $('.slider .inner');
|
||||
|
||||
$inner.pep({
|
||||
place: false,
|
||||
axis: 'x',
|
||||
stop: function(ev){
|
||||
if ( !this.started ) {
|
||||
$(ev.target).toggleClass('gray')
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.slider {
|
||||
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2), -2px 5px 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
-o-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.slider .inner {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.slider .inner img {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.slider .inner img.gray {
|
||||
-webkit-filter: grayscale(100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class='slider'>
|
||||
<div class='inner'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51f92f36596808417100001f/800x600/vsco_073113_20.jpg'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51ec0016596808105700006b/800x600/vsco_072113_18.jpg'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51f92f36596808417100001f/800x600/vsco_073113_20.jpg'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51ec0016596808105700006b/800x600/vsco_072113_18.jpg'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51f92f36596808417100001f/800x600/vsco_073113_20.jpg'>
|
||||
<img draggable='false' src='http://vscosites.s3.amazonaws.com/1/51dc13aa0eba421541/51ec0016596808105700006b/800x600/vsco_072113_18.jpg'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - multiplier</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var $pep1 = $('.pep.one');
|
||||
$pep1.pep({ debug: true });
|
||||
|
||||
var $pep2 = $('.pep.two');
|
||||
$pep2.pep({ debug: true, useCSSTranslation: true });
|
||||
|
||||
|
||||
// Set the multiplier of our Pep object change.
|
||||
$('.multiplier-select').change(function(ev, obj){
|
||||
var mult = $(this).val();
|
||||
$pep1.data('plugin_pep').setMultiplier(mult);
|
||||
$pep2.data('plugin_pep').setMultiplier(mult);
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
.pep.two{ background: #ccc; opacity: 0.9; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
Multiplier:
|
||||
<select class="multiplier-select">
|
||||
<option value=1.00>1.00</option>
|
||||
<option value=0.75>0.75</option>
|
||||
<option value=0.50>0.50</option>
|
||||
<option value=0.25>0.25</option>
|
||||
</select>
|
||||
|
||||
<body>
|
||||
<div class="pep one"></div>
|
||||
|
||||
<div class="pep two">useCSSTranslation: true</div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - ease disabled</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({ shouldEase: false, debug: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - non CSS3 Translation method</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
useCSSTranslation: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: red; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep - pep inside pep demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep-outer').pep();
|
||||
$('.pep-inner').pep({
|
||||
allowDragEventPropagation: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep-inner{ width: 200px; height: 200px; background: blue; }
|
||||
.pep-outer{ width: 500px; height: 500px; background: red; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep-outer">
|
||||
<div class="pep-inner"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - </title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.pep').pep({
|
||||
initiate: function(){
|
||||
if ( this.$el.hasClass('no-drag') ){
|
||||
this.toggle(false);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; opacity: 0.6; color: white; }
|
||||
|
||||
.pep-1 { position: absolute; top: 50px; left: 10px; }
|
||||
.pep-2 { position: absolute; top: 100px; left: 50px; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep pep-1"></div>
|
||||
<div class="pep pep-2 no-drag">no drag</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep - return false </title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep').pep({
|
||||
debug: true,
|
||||
drag: function(){
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.pep.base').pep({
|
||||
useCSSTranslation: false,
|
||||
revert: true,
|
||||
initiate: function(){ this.$el.removeClass('transition') },
|
||||
stop: function(){ this.$el.addClass('transition') }
|
||||
});
|
||||
|
||||
$('.pep.revert-after-ease').pep({
|
||||
revert: true,
|
||||
revertAfter: 'ease'
|
||||
});
|
||||
|
||||
$('.pep.revert-after-ease-no-translation').pep({
|
||||
useCSSTranslation: false,
|
||||
revert: true,
|
||||
revertAfter: 'ease'
|
||||
});
|
||||
|
||||
var a = 0;
|
||||
$('.pep.revert-if').pep({
|
||||
useCSSTranslation: false,
|
||||
revert: true,
|
||||
revertAfter: 'stop',
|
||||
revertIf: function(){
|
||||
a ++;
|
||||
return (a % 2) == 0;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 100px; height: 100px; background: yellow; position: absolute; top: 10px; left: 10px; padding: 10px; border: 1px solid black;}
|
||||
.pep.revert-after-ease{ background: red; top: 140px; }
|
||||
.pep.revert-after-ease-no-translation{ background: #ddd; top: 270px; }
|
||||
.pep.revert-if{ background: green; top: 400px; }
|
||||
.transition{ transition: all 200ms ease; -webkit-transition: all 200ms ease; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pep base">base</div>
|
||||
<div class="pep revert-after-ease">revert after ease, css-translation</div>
|
||||
<div class="pep revert-after-ease-no-translation">revert after ease, no css-translation</div>
|
||||
<div class="pep revert-if">conditionally revert object every other time</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - multiplier</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var $pep = $('.pep');
|
||||
$pep.pep({ debug: true, useCSSTranslation: false });
|
||||
|
||||
// Set the scale of our Pep object change.
|
||||
$('.scale-select').change(function(ev, obj){
|
||||
var scale = $(this).val();
|
||||
|
||||
$('.pep').css({
|
||||
'-webkit-transform' : 'scale(' + scale + ')',
|
||||
'-moz-transform' : 'scale(' + scale + ')',
|
||||
'-ms-transform' : 'scale(' + scale + ')',
|
||||
'-o-transform' : 'scale(' + scale + ')',
|
||||
'transform' : 'scale(' + scale + ')'
|
||||
})
|
||||
|
||||
$pep.data('plugin_pep').setScale(scale);
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div><< BUGGY!!! >></div>
|
||||
|
||||
Scale:
|
||||
<select class="scale-select">
|
||||
<option value=1.00>1.00</option>
|
||||
<option value=0.75>0.75</option>
|
||||
<option value=0.50>0.50</option>
|
||||
<option value=0.25>0.25</option>
|
||||
</select>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - slider</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var $obj = $("#object");
|
||||
var $parent = $("#parent");
|
||||
var height = $parent.height();
|
||||
|
||||
var $pep = $(".pep");
|
||||
var objHeight = $pep.height();
|
||||
|
||||
$('.peppable').pep({
|
||||
constrainTo: 'parent',
|
||||
shouldEase: false,
|
||||
drag: function(ev, obj){
|
||||
var vals = obj.getMovementValues();
|
||||
var percent = vals.pos.y / (height-objHeight);
|
||||
|
||||
$obj.css({
|
||||
"-webkit-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
|
||||
"-moz-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
|
||||
"-ms-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
|
||||
"-o-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
|
||||
"transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)"
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body{ padding: 0; margin: 0; }
|
||||
#parent { border: 1px solid #666; width: 100px; height: 300px; margin: 30px; }
|
||||
.pep { width: 100%; height: 60px; background: rgb(243, 200, 200); color: white; }
|
||||
#object { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; background: rgb(120, 200, 200); }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div id="parent">
|
||||
<div class="pep peppable"></div>
|
||||
</div>
|
||||
|
||||
<div id="object"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+201
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - sortable w/ touchhold</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
<script src="../libs/jquery.touchhold.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
// Grab our elements
|
||||
var $ul = $('ul');
|
||||
var $li = $ul.children('li');
|
||||
|
||||
// Pep 'em
|
||||
$li.pep({
|
||||
deferPlacement: true,
|
||||
axis: 'y',
|
||||
shouldEase: false,
|
||||
stopEvents: 'pep-stop',
|
||||
stop: function(ev, obj){
|
||||
|
||||
// Grab the list items and sort them based on
|
||||
// distance from the top
|
||||
$li.sort(function(a,b) { return ( $(a).position().top - $(b).position().top ) });
|
||||
$ul.append($li);
|
||||
|
||||
// Remove CSS transformations so the list item
|
||||
// fits nicely into place.
|
||||
var matrix = obj.matrixToArray( obj.matrixString() );
|
||||
var x = -1*matrix[4]
|
||||
var y = -1*matrix[5]
|
||||
obj.moveToUsingTransforms( x,y );
|
||||
obj.$el.css({ position: 'static' })
|
||||
.removeClass('activated');
|
||||
|
||||
obj.toggle(false);
|
||||
allowPageScroll = true;
|
||||
}
|
||||
});
|
||||
|
||||
// ..... then turn all peps off
|
||||
$.pep.toggleAll();
|
||||
|
||||
// We need to record the original start event's coords,
|
||||
// since they pep needs 'em
|
||||
var pos = {};
|
||||
var startEvent = Modernizr.touch ? 'touchstart' : 'mousedown';
|
||||
$li.on( startEvent, function(e){
|
||||
|
||||
if ( e.originalEvent.targetTouches ) {
|
||||
startEvent = e;
|
||||
pos.x = e.originalEvent.targetTouches[0].pageX
|
||||
pos.y = e.originalEvent.targetTouches[0].pageY
|
||||
}
|
||||
})
|
||||
|
||||
// When we touchhold a list item
|
||||
// enable the pep object then fire it's
|
||||
// start event
|
||||
$li.touchhold(function(e){
|
||||
$(this).trigger( 'pep-stop' )
|
||||
}, function(e){
|
||||
console.log("Touch hold fired!");
|
||||
e.preventDefault();
|
||||
|
||||
allowPageScroll = false;
|
||||
|
||||
var $this = $(this);
|
||||
var obj = $this.data('plugin_pep');
|
||||
$this.addClass('activated')
|
||||
obj.toggle(true);
|
||||
|
||||
var newE = jQuery.Event( startEvent );
|
||||
e.touches = [{pageX:pos.x, pageY: pos.y}]
|
||||
newE.originalEvent = e;
|
||||
obj.$el.trigger( newE, e )
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
var allowPageScroll = true;
|
||||
$(document).on('touchmove', function(e){
|
||||
// debugger;
|
||||
if ( !allowPageScroll ) e.preventDefault();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body h1{
|
||||
color: white;
|
||||
background: black;
|
||||
margin: 0; padding: 30px 0;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body ul li {
|
||||
background: #eee;
|
||||
list-style-type: none;
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid #bbb;
|
||||
cursor: move;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body ul li.pep-start{
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,0.2), 0 -5px 5px rgba(0,0,0,0.2);
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
body ul li.activated{
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Touchhold to sort</h1>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
0. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
11. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
13. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
14. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
15. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep demo - sortable w/ double click/tap </title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="../libs/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
// Grab our elements
|
||||
var $ul = $('ul');
|
||||
var $li = $ul.children('li');
|
||||
|
||||
// Pep 'em
|
||||
$('li').pep({
|
||||
place: false,
|
||||
axis: 'y',
|
||||
shouldEase: false,
|
||||
stop: function(ev, obj){
|
||||
|
||||
// Grab the list items and sort them based on
|
||||
// distance from the top
|
||||
$li.sort(function(a,b) { return ( $(a).position().top - $(b).position().top ) });
|
||||
$ul.append($li);
|
||||
|
||||
// Remove CSS transformations so the list item
|
||||
// fits nicely into place.
|
||||
var matrix = obj.matrixToArray( obj.matrixString() );
|
||||
var x = -1*matrix[4]
|
||||
var y = -1*matrix[5]
|
||||
obj.moveToUsingTransforms( x,y );
|
||||
obj.$el.css({ position: 'relative' })
|
||||
.removeClass('activated');
|
||||
|
||||
obj.toggle(false)
|
||||
}
|
||||
});
|
||||
|
||||
// ..... then turn all peps off
|
||||
$.pep.toggleAll();
|
||||
|
||||
// Double Tap Logic
|
||||
var startEvent = Modernizr.touch ? 'touchstart' : 'mousedown';
|
||||
var stopEvent = Modernizr.touch ? 'touchend' : 'mouseup';
|
||||
var time = false;
|
||||
var doubleTapDelay = 300;
|
||||
|
||||
$li.on( startEvent , function(e){
|
||||
var $this = $(this);
|
||||
|
||||
if ( time && (new Date().getTime() - time) < doubleTapDelay ) {
|
||||
$this.addClass('activated')
|
||||
.data('plugin_pep')
|
||||
.toggle(true);
|
||||
}
|
||||
time = new Date().getTime();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body h1{
|
||||
color: white;
|
||||
background: black;
|
||||
margin: 0; padding: 10px 0;
|
||||
}
|
||||
|
||||
body ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body ul li {
|
||||
background: #eee;
|
||||
list-style-type: none;
|
||||
padding: 40px 0;
|
||||
border-bottom: 1px solid #bbb;
|
||||
cursor: move;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body ul li.pep-start{
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,0.2), 0 -5px 5px rgba(0,0,0,0.2);
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
body ul li.activated{
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Double tap/click to sort</h1>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
0. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
11. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
13. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
14. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li>
|
||||
15. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom functions</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var threshold = 30;
|
||||
|
||||
$('.pep-1').pep({
|
||||
initiate: function(ev, obj) { obj.$el.text('initiate'); },
|
||||
start: function(ev, obj) { obj.$el.text('start event fired after ' + threshold + "px movement from initial position"); },
|
||||
drag: function(ev, obj) { obj.$el.text( obj.$el.text() + '. ') },
|
||||
stop: function(ev, obj) { obj.$el.text('stop'); },
|
||||
rest: function(ev, obj) { obj.$el.text('rest'); },
|
||||
startThreshold: [threshold, threshold]
|
||||
});
|
||||
|
||||
$('.pep-2').pep({
|
||||
initiate: function(ev, obj) { obj.$el.text('initiate'); },
|
||||
start: function(ev, obj) { obj.$el.text('start event fired after ' + (threshold+70) + "px movement from initial position"); },
|
||||
drag: function(ev, obj) { obj.$el.text( obj.$el.text() + '. ') },
|
||||
stop: function(ev, obj) { obj.$el.text('stop'); },
|
||||
rest: function(ev, obj) { obj.$el.text('rest'); },
|
||||
startThreshold: [threshold + 70, threshold + 70],
|
||||
callIfNotStarted: []
|
||||
});
|
||||
|
||||
$('.pep-3').pep({
|
||||
initiate: function(ev, obj) { obj.$el.text('initiate'); },
|
||||
start: function(ev, obj) { obj.$el.text('start event fired after ' + (threshold+70) + "px movement from initial position"); },
|
||||
drag: function(ev, obj) { obj.$el.text( obj.$el.text() + '. ') },
|
||||
stop: function(ev, obj) { obj.$el.text('stop'); },
|
||||
rest: function(ev, obj) { obj.$el.text('rest'); },
|
||||
startThreshold: [threshold + 70, threshold + 70],
|
||||
callIfNotStarted: ['rest']
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.pep-1 { background: blue }
|
||||
.pep-2 { background: red; }
|
||||
.pep-3 { background: green; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep pep-1"> </div>
|
||||
<div class="pep pep-2"> ** I don't fire the user-provided stop & rest functions unless I move past the startThreshold ** </div>
|
||||
<div class="pep pep-3"> ** I don't fire the user-provided stop functions unless I move past the startThreshold, I call rest regardless ** </div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep base demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var active;
|
||||
|
||||
$('.pep').pep({
|
||||
stop: function(){
|
||||
moving = [];
|
||||
},
|
||||
start: function(ev, obj){
|
||||
if ( active && obj !== active )
|
||||
active.$el.css( active.getCSSEaseHash(true) )
|
||||
.removeClass('pep-active')
|
||||
|
||||
active = obj;
|
||||
},
|
||||
cssEaseDuration: 3000,
|
||||
useCSSTranslation: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; margin: 50px; background: blue; z-index: 10; }
|
||||
.pep-active{ border: 5px solid red; z-index: 11; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="pep"></div>
|
||||
<div class="pep"></div>
|
||||
<div class="pep"></div>
|
||||
<div class="pep"></div>
|
||||
<div class="pep"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep unbind demo</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var $pep = $('.pep');
|
||||
$pep.pep();
|
||||
|
||||
$('.toggle-bind').click(function(){
|
||||
var $this = $(this);
|
||||
var newtext = '';
|
||||
var val = 0;
|
||||
|
||||
if ( $this.data('bound') == 1 ){
|
||||
newtext = 'Bind';
|
||||
val = 0;
|
||||
$.pep.unbind( $pep );
|
||||
}
|
||||
else {
|
||||
newtext = 'Unbind';
|
||||
val = 1;
|
||||
$pep.pep({ hardwareAccelerate: false });
|
||||
}
|
||||
|
||||
$this.text(newtext)
|
||||
.data('bound', val);
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; background: blue; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button class='toggle-bind' data-bound=1>Unbind</button>
|
||||
<div class="pep"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom functions</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var threshold = 30;
|
||||
|
||||
$('.pep').pep({
|
||||
initiate: function(ev, obj) { obj.$el.text('initiate'); },
|
||||
start: function(ev, obj) { obj.$el.text('start'); },
|
||||
drag: function(ev, obj) { obj.$el.text( obj.$el.text() + '. ') },
|
||||
stop: function(ev, obj) { obj.$el.text('stop'); },
|
||||
rest: function(ev, obj) { obj.$el.text('rest'); },
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
background: blue;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep custom functions</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
function randomColor(){
|
||||
return '#'+Math.floor(Math.random()*16777215).toString(16);
|
||||
}
|
||||
|
||||
// I scale during movement based on my velocity
|
||||
$('.pep1').pep({
|
||||
drag: function(ev, obj){
|
||||
obj.$el.css({ background: randomColor() });
|
||||
var vel = obj.velocity();
|
||||
var scale = Math.abs(vel.x + vel.y)/100 ;
|
||||
scale = (scale < 0.1) ? 0.1 : scale;
|
||||
obj.$el.css({
|
||||
"-webkit-transform": "scale("+ scale +")",
|
||||
"-moz-transform": "scale("+ scale +")",
|
||||
"-ms-transform": "scale("+ scale +")",
|
||||
"-o-transform": "scale("+ scale +")",
|
||||
"transform": "scale("+ scale +")"
|
||||
})
|
||||
},
|
||||
rest: function(ev, obj){
|
||||
obj.$el.css({
|
||||
"-webkit-transform": "scale(1)",
|
||||
"-moz-transform": "scale(1)",
|
||||
"-ms-transform": "scale(1)",
|
||||
"-o-transform": "scale(1)",
|
||||
"transform": "scale(1)"
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
//I tip based on my velocity in the x direction
|
||||
$('.pep2').pep({
|
||||
useCSSTranslation: false,
|
||||
drag: function(ev, obj){
|
||||
var vel = obj.velocity();
|
||||
var rot = (vel.x)/5;
|
||||
obj.$el.css({
|
||||
"-webkit-transform": "rotate("+ rot +"deg)",
|
||||
"-moz-transform": "rotate("+ rot +"deg)",
|
||||
"-ms-transform": "rotate("+ rot +"deg)",
|
||||
"-o-transform": "rotate("+ rot +"deg)",
|
||||
"transform": "rotate("+ rot +"deg)"
|
||||
});
|
||||
},
|
||||
rest: function(ev, obj){
|
||||
}
|
||||
});
|
||||
|
||||
// I perk up when I move, I become angry when I am left alone.
|
||||
var active = false;
|
||||
|
||||
// blink down
|
||||
setInterval(function(){ if (!active) return; $('.pep3').html("_ _ </br>() </br> \\_____/").delay(100); }, 300);
|
||||
|
||||
// blink up
|
||||
setInterval(function(){ if (!active) return; $('.pep3').html("[] [] </br>() </br> \\_____/"); }, 500);
|
||||
|
||||
$('.pep3').pep({
|
||||
start: function(ev, obj){
|
||||
active = true;
|
||||
obj.$el.html("[] [] </br>() </br> \\_____/").css({ fontSize: 50, textAlign: "center" });
|
||||
},
|
||||
rest: function(ev, obj){
|
||||
console.log('rest')
|
||||
active = false;
|
||||
obj.$el.html("- - </br>[] </br> ._____. </br>");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// I change color on start, rotate on end.
|
||||
var rotate = 0
|
||||
$('.pep4').pep({
|
||||
start: function(ev, obj){
|
||||
$('body').css({background: '#333'});
|
||||
obj.$el.css({
|
||||
"-webkit-filter": "blur(100px)",
|
||||
"-moz-filter": "blur(100px)",
|
||||
"-ms-filter": "blur(100px)",
|
||||
"-o-filter": "blur(100px)",
|
||||
"filter": "blur(100px)"
|
||||
})
|
||||
},
|
||||
stop: function(ev, obj){
|
||||
$('body').css({background: 'white'});
|
||||
rotate += 1080;
|
||||
obj.$el.css({
|
||||
"-webkit-filter": "blur(0px)",
|
||||
"-moz-filter": "blur(0px)",
|
||||
"-ms-filter": "blur(0px)",
|
||||
"-o-filter": "blur(0px)",
|
||||
"filter": "blur(0px)"
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}); <!-- doc ready -->
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.pep{ width: 200px; height: 200px; color: white; opacity: 0.8 }
|
||||
|
||||
.pep1{ background: blue; position: absolute; top: 0; left: 0px;}
|
||||
.pep2{ background: red; position: absolute; top: 20px; left: 150px;}
|
||||
.pep3{ background: green; position: absolute; top: 40px; left: 300px;}
|
||||
.pep4{ background: yellow; position: absolute; top: 60px; left: 450px; color: black; z-index: 9999999;}
|
||||
|
||||
.bigspace{ display: inline-block; width: 100px; }
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="pep pep1">I scale during movement based on my velocity. I use the custom drag & rest functions.</div>
|
||||
<div class="pep pep2">I tip based on my velocity in the x direction. I use the custom drag function.</div>
|
||||
<div class="pep pep3">I perk up when I move, I become angry when I am left alone. I use custom start & rest functions.</div>
|
||||
<div class="pep pep4">I become a flashlight. I use custom start & stop functions.</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
(function($) {
|
||||
var DELAY = 750;
|
||||
|
||||
$.extend($.fn, {
|
||||
touchhold: function(end, start) {
|
||||
var timeout, shouldTrigger = false;
|
||||
|
||||
function _touchStart(e) {
|
||||
var that = this;
|
||||
timeout = setTimeout(function() {
|
||||
$(that).trigger('touchhold.start');
|
||||
shouldTrigger = true;
|
||||
}, DELAY);
|
||||
};
|
||||
|
||||
function _touchMove() {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
|
||||
function _touchEnd() {
|
||||
clearTimeout(timeout);
|
||||
if (shouldTrigger) {
|
||||
$(this).trigger('touchhold.end');
|
||||
shouldTrigger = false;
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Only bind the helper events if they haven't been bound yet
|
||||
if (!($(this).data('events')) || ($(this).data('events') && !($(this).data('events')['touchhold']))) {
|
||||
$(this).bind('touchstart', _touchStart)
|
||||
.bind('touchmove', _touchMove)
|
||||
.bind('touchend', _touchEnd);
|
||||
}
|
||||
|
||||
if ($.isFunction(start)) { $(this).bind('touchhold.start', start); };
|
||||
if ($.isFunction(end)) { $(this).bind('touchhold.end', end); };
|
||||
return this;
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* QUnit v1.4.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://docs.jquery.com/QUnit
|
||||
*
|
||||
* Copyright (c) 2012 John Resig, Jörn Zaefferer
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 15px 15px 0 0;
|
||||
-moz-border-radius: 15px 15px 0 0;
|
||||
-webkit-border-top-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-header label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
|
||||
box-shadow: inset 0px 2px 13px #999;
|
||||
-moz-box-shadow: inset 0px 2px 13px #999;
|
||||
-webkit-box-shadow: inset 0px 2px 13px #999;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
margin: 0.5em;
|
||||
padding: 0.4em 0.5em 0.4em 0.5em;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #5E740B;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "pep",
|
||||
"title": "jquery.pep.js",
|
||||
"description": "Kinetic drag for mobile & desktop",
|
||||
"version": "0.6.2",
|
||||
"homepage": "http://pep.briangonzalez.org",
|
||||
"author": {
|
||||
"name": "Brian Gonzalez",
|
||||
"email": "me@briangonzalez.org",
|
||||
"url": "briangonzalez.org",
|
||||
"twitter": "@brianmgonzalez"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:briangonzalez/jquery.pep.js.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/briangonzalez/jquery.pep.js/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "pep.briangonzalez.org/blob/master/LICENSE-MIT"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"keywords": [
|
||||
"drag",
|
||||
"touch",
|
||||
"mobile",
|
||||
"kinetic",
|
||||
"inertia"
|
||||
],
|
||||
"devDependencies": {
|
||||
"grunt-shell": "~0.3.0",
|
||||
"shelljs": "~0.1.4",
|
||||
"jquery": "~1.8.3",
|
||||
"grunt-contrib-jshint": "~0.6.0",
|
||||
"grunt-contrib-qunit": "~0.4.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jquery.pep Test Suite</title>
|
||||
|
||||
<!-- Load local jQuery. -->
|
||||
<script src="../libs/jquery/jquery.js"></script>
|
||||
|
||||
<!-- Load local QUnit (grunt requires v1.0.0 or newer). -->
|
||||
<link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
|
||||
<script src="../libs/qunit/qunit.js"></script>
|
||||
|
||||
<!-- Load local lib and tests. -->
|
||||
<script src="../src/jquery.pep.js"></script>
|
||||
<script src="jquery.pep_test.js"></script>
|
||||
|
||||
<!-- Removing access to jQuery and $. But it'll still be available as _$, if
|
||||
you REALLY want to mess around with jQuery in the console. REMEMBER WE
|
||||
ARE TESTING YOUR PLUGIN HERE -->
|
||||
<script>window._$ = jQuery.noConflict(true);</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jquery.pep Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
|
||||
<div id="qunit-fixture">
|
||||
<span>obj #1</span>
|
||||
<span>obj #2</span>
|
||||
<span>obj #3</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
|
||||
/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
|
||||
/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
|
||||
(function($) {
|
||||
|
||||
/*
|
||||
======== A Handy Little QUnit Reference ========
|
||||
http://docs.jquery.com/QUnit
|
||||
|
||||
Test methods:
|
||||
expect(numAssertions)
|
||||
stop(increment)
|
||||
start(decrement)
|
||||
Test assertions:
|
||||
ok(value, [message])
|
||||
equal(actual, expected, [message])
|
||||
notEqual(actual, expected, [message])
|
||||
deepEqual(actual, expected, [message])
|
||||
notDeepEqual(actual, expected, [message])
|
||||
strictEqual(actual, expected, [message])
|
||||
notStrictEqual(actual, expected, [message])
|
||||
raises(block, [expected], [message])
|
||||
*/
|
||||
|
||||
module('jQuery#pep', {
|
||||
setup: function() {
|
||||
this.elems = $('#qunit-fixture').children();
|
||||
}
|
||||
});
|
||||
|
||||
test('is chainable', 1, function() {
|
||||
// Not a bad test to run on collection methods.
|
||||
strictEqual(this.elems.pep(), this.elems, 'should be chainable');
|
||||
});
|
||||
|
||||
test('plugin name', 1, function() {
|
||||
var $el = $( '#qunit-fixture span' ).first();
|
||||
$el.pep();
|
||||
strictEqual($el.data('plugin_pep').name, 'pep', 'plugin name should be Pep');
|
||||
});
|
||||
|
||||
test('toggle pep object', 1, function() {
|
||||
var $el = $( '#qunit-fixture span' ).first();
|
||||
$el.pep();
|
||||
$el.data('plugin_pep').toggle()
|
||||
strictEqual($el.first().data('plugin_pep').disabled, true, 'this.disable variable should be true when toggled once');
|
||||
});
|
||||
|
||||
test('explicit toggle pep object', 1, function() {
|
||||
var $el = $( '#qunit-fixture span' ).first();
|
||||
$el.pep();
|
||||
$el.data('plugin_pep').toggle(false) // false === disable
|
||||
strictEqual($el.first().data('plugin_pep').disabled, true, 'this.disable variable should be true when toggled off explicitly');
|
||||
});
|
||||
|
||||
test('toggle via api - once', 1, function() {
|
||||
var $el = $( '#qunit-fixture span' );
|
||||
$el.pep();
|
||||
|
||||
$.pep.toggleAll()
|
||||
strictEqual($el.first().data('plugin_pep').disabled, true, 'this.disable variable should be true when toggled once');
|
||||
});
|
||||
|
||||
test('toggle via api - twice', 1, function() {
|
||||
var $el = $( '#qunit-fixture span' );
|
||||
$el.pep();
|
||||
|
||||
$.pep.toggleAll()
|
||||
$.pep.toggleAll()
|
||||
strictEqual($el.first().data('plugin_pep').disabled, false, 'this.disable variable should be false when toggled twice');
|
||||
});
|
||||
|
||||
test('activeDropRegions initially declared', 2, function() {
|
||||
var $el = $( '#qunit-fixture span' );
|
||||
$el.pep();
|
||||
|
||||
ok($el.data('plugin_pep').activeDropRegions, '`activeDropRegions` property is defined');
|
||||
equal($el.data('plugin_pep').activeDropRegions.length, 0, '`activeDropRegions` property is initialized with length 0');
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"main": "jquery.transit.js",
|
||||
"homepage": "https://github.com/rstacruz/jquery.transit",
|
||||
"_release": "0.9.12",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.9.12",
|
||||
"commit": "209c4831155479a3446e08e2c39d6eb275893b34"
|
||||
},
|
||||
"_source": "git://github.com/rstacruz/jquery.transit.git",
|
||||
"_target": "~0.9.12",
|
||||
"_originalSource": "jquery.transit",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
site
|
||||
@@ -0,0 +1,128 @@
|
||||
# Contributing to Transit
|
||||
|
||||
Want to get involved? Thanks! There are plenty of ways to help!
|
||||
|
||||
## Reporting issues
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the
|
||||
repository.
|
||||
|
||||
Please read the following guidelines before you [report an issue][issues]:
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported. If it has been, please comment on the existing issue.
|
||||
|
||||
2. **Check if the issue has been fixed** — the latest `master` or
|
||||
development branch may already contain a fix.
|
||||
|
||||
3. **Isolate the demonstrable problem** — make sure that the code in the
|
||||
project's repository is _definitely_ responsible for the issue. Create a
|
||||
[reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an
|
||||
extremely simple and immediately viewable example of the issue.
|
||||
|
||||
4. **Include a live example** — provide a link to your reduced test case
|
||||
when appropriate (e.g. if the issue is related to (front-end technologies).
|
||||
Please use [jsFiddle](http://jsfiddle.net) to host examples.
|
||||
|
||||
Please try to be as detailed as possible in your report too. What is your
|
||||
environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? What would you expect to be the outcome? All these
|
||||
details will help people to assess and fix any potential bugs.
|
||||
|
||||
### Example of a good bug report:
|
||||
|
||||
> Short and descriptive title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` (a link to the reduced test case)
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
A good bug report shouldn't leave people needing to chase you up to get further
|
||||
information that is required to assess or fix the bug.
|
||||
|
||||
**[File a bug report][issues]**
|
||||
|
||||
## Responding to issues
|
||||
|
||||
Feel free to respond to other people's issues! Some people may be reporting
|
||||
issues that can easily be solved even without modification to the project's
|
||||
code.
|
||||
|
||||
You can also help by verifying issues reported.
|
||||
|
||||
**[View issues][issues]**
|
||||
|
||||
## The 'help wanted' tag
|
||||
|
||||
Some [issues] are tagged with the 'help wanted' tag. These issues often:
|
||||
|
||||
- are missing an actual implementation, or
|
||||
- need people's help in verifying and replicating the issue, or
|
||||
- need test cases.
|
||||
|
||||
If you would like to contribute code and don't have any specific issue you want
|
||||
to fix, this would be a good place to start looking at!
|
||||
|
||||
**[View issues][issues]**
|
||||
|
||||
## Pull requests
|
||||
|
||||
Good pull requests — patches, improvements, new features — are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
If your contribution involves a significant amount of work or substantial
|
||||
changes to any part of the project, please open an issue to discuss it first.
|
||||
|
||||
Please follow this process; it's the best way to get your work included in the
|
||||
project:
|
||||
|
||||
1. [Fork](http://help.github.com/fork-a-repo/) the project.
|
||||
|
||||
2. Clone your fork (`git clone
|
||||
https://github.com/<your-username>/html5-boilerplate.git`).
|
||||
|
||||
3. Add an `upstream` remote (`git remote add upstream
|
||||
https://github.com/rstacruz/jquery.transit.git`).
|
||||
|
||||
4. Get the latest changes from upstream (e.g. `git pull upstream
|
||||
<dev-branch>`).
|
||||
|
||||
5. Create a new topic branch to contain your feature, change, or fix (`git
|
||||
checkout -b <topic-branch-name>`).
|
||||
|
||||
6. Make sure that your changes adhere to the current coding conventions used
|
||||
throughout the project - indentation, accurate comments, etc. Please update
|
||||
any documentation that is relevant to the change you are making.
|
||||
|
||||
7. Commit your changes in logical chunks; use git's [interactive
|
||||
rebase](https://help.github.com/articles/interactive-rebase) feature to tidy
|
||||
up your commits before making them public. Please adhere to these [git commit
|
||||
message
|
||||
guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your pull request is unlikely be merged into the main project.
|
||||
|
||||
8. Locally merge (or rebase) the upstream branch into your topic branch.
|
||||
|
||||
9. Push your topic branch up to your fork (`git push origin
|
||||
<topic-branch-name>`).
|
||||
|
||||
10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a
|
||||
clear title and description. Please mention which browsers you tested in.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
This contributing guide has been adapted from [HTML5 boilerplate's guide][g].
|
||||
|
||||
[g]: https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md
|
||||
[issues]: https://github.com/rstacruz/jquery.transit/issues/
|
||||
@@ -0,0 +1,89 @@
|
||||
## v0.9.12 - July 17, 2014
|
||||
|
||||
* Fix browserify builds by using the correct jQuery. (@dminkovsky, #201)
|
||||
* Fix properties resetting after a transition. (#204, #205)
|
||||
|
||||
## v0.9.11 - June 23, 2014
|
||||
|
||||
* Add support for `scaleX` and `scaleY`. (@YousefED, #192)
|
||||
* Add support for npm.
|
||||
* Add support for RequireJS and CommonJS.
|
||||
* Fix transitionend support for IE10, Chrome, and many others. (@wambotron, #103)
|
||||
|
||||
Also:
|
||||
|
||||
* Fix `.transition({...}, {queue: false})` not being honored. (@YousefED, #192)
|
||||
* Remove some redundant code. (@Bongo, #165)
|
||||
* Docs: Update to support the new docco. (@francismakes, #175)
|
||||
* Add `easeInCubic` easing. (@emagnier, @willblackmore, #161, #142)
|
||||
* Add test cases for jQuery 2.0+. (@hankhero, #155)
|
||||
|
||||
The version `0.9.10` was not officially released as it was published prematurely
|
||||
to npm.
|
||||
|
||||
## v0.9.9 - Dec 14, 2012
|
||||
|
||||
Many, many thanks to the many [contributors] who made this release happen! This
|
||||
is a pre-release of 1.0.
|
||||
|
||||
### Fixes and additions:
|
||||
|
||||
* Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
|
||||
(#48, #62, #63, #69, #70, #71, #72, #76, #77, #80, #81, #82, #85, #86, #90, #92, #93)
|
||||
* Compatibility with Twitter Bootstrap has been fixed. (#67)
|
||||
* Unprefixed CSS properties are now used if your browser supports them.
|
||||
* Account for prefix-free transition end for Mozilla. (#97)
|
||||
* Callbacks should now be called even if duration is `0`. (#37)
|
||||
* Doing `.css('transition', 'transform 1s')` should now properly vendor-prefix 'transform'. (#84)
|
||||
* Added Penner easing splines. (#44)
|
||||
|
||||
### Internal fixes:
|
||||
|
||||
* New test suite.
|
||||
* In building the website, use `fl-rocco` instead of `docco`. This removes the dependency. (#50)
|
||||
|
||||
## v0.1.3 - Feb 14, 2012
|
||||
|
||||
### Fixed:
|
||||
* Fix JS error with undefined `next` function. (#21)
|
||||
* Using `delay: 0` now works. Closes (#20)
|
||||
* More robust checking of 3D transition support. (#19)
|
||||
* Stop rotateX/rotateY/etc from stopping other transitions when it's not
|
||||
supported. (#15)
|
||||
|
||||
### Added:
|
||||
* Support Firefox 10 3D transitions. (#19)
|
||||
|
||||
### Changed:
|
||||
* Allow disabling using the transitionEnd property.
|
||||
(`$.transit.useTransitionEnd = true`)
|
||||
* Use the more reliable timers by default. (`useTransitionEnd` now defaults to
|
||||
`false`)
|
||||
|
||||
## v0.1.2 - Jan 24, 2012
|
||||
|
||||
Thanks to code contributors @ppcano, @jeduan, @steckel, @weotch, and everyone
|
||||
who reported issues.
|
||||
|
||||
### Fixed:
|
||||
* IE8 error about .indexOf. (#12, #8)
|
||||
* Fix z-layer scaling in Safari. (#9, #10)
|
||||
* Fix scale elements being unclickable in WebKits. (#9, #10)
|
||||
* Fix support for `queue: false`. (#13)
|
||||
* Clean up transitions when done. (#14)
|
||||
* Fix disappearing scaled elements in Chrome. (#11)
|
||||
* Fix a bug where the default duration and easing can sometimes not be used.
|
||||
|
||||
### Changed:
|
||||
* Make code compatible with jsHint. (#6)
|
||||
|
||||
## v0.1.1 - Nov 18, 2011
|
||||
|
||||
### Fixed:
|
||||
* Only animate what is needed (ie, don't use 'transition-property: all').
|
||||
|
||||
## v0.1.0 - Nov 14, 2011
|
||||
|
||||
Initial official release.
|
||||
|
||||
[contributors]: https://github.com/rstacruz/jquery.transit/contributors
|
||||
@@ -0,0 +1,36 @@
|
||||
Developer notes
|
||||
===============
|
||||
|
||||
Testing:
|
||||
|
||||
open test/index.html
|
||||
|
||||
Making a new release:
|
||||
|
||||
vim HISTORY.md # update changelog
|
||||
bump *.json *.js # update version number
|
||||
npm publish # release to npm
|
||||
git release v1.0.0 # release to github/bower
|
||||
cd site && make # update the site
|
||||
|
||||
Managing the site
|
||||
-----------------
|
||||
|
||||
Make `site/`:
|
||||
|
||||
git clone git@github.com:rstacruz/jquery.transit.git -b gh-pages ./site
|
||||
|
||||
Update:
|
||||
|
||||
cd site
|
||||
make update # update from files
|
||||
make # update the site
|
||||
make dist # make dist/ files (uh, should be deprecated)
|
||||
|
||||
v1.0.0 to do
|
||||
------------
|
||||
|
||||
* .transitionStop()
|
||||
* use transitionend by default (#184)
|
||||
* Update bootstrap compatibility (#143, #67)
|
||||
* Redesign the site
|
||||
@@ -0,0 +1,169 @@
|
||||
# [jQuery Transit](http://ricostacruz.com/jquery.transit)
|
||||
#### Super-smooth CSS3 transformations and transitions for jQuery
|
||||
|
||||
jQuery Transit is a plugin for to help you do CSS transformations and
|
||||
transitions in jQuery.
|
||||
|
||||
Refer to the [jQuery Transit website](http://ricostacruz.com/jquery.transit) for
|
||||
examples.
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
Just include [jquery.transit.js] after jQuery. Requires jQuery 1.4+.
|
||||
|
||||
``` html
|
||||
<script src='jquery.js'></script>
|
||||
<script src='jquery.transit.js'></script>
|
||||
```
|
||||
|
||||
It is also available via [bower] and [npm].
|
||||
|
||||
$ bower install --save jquery.transit
|
||||
$ npm install --save jquery.transit
|
||||
|
||||
[bower]: http://bower.io/search/?q=jquery.transit
|
||||
[npm]: http://npmjs.org/package/jquery.transit
|
||||
[jquery.transit.js]: https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js
|
||||
|
||||
Transformations
|
||||
---------------
|
||||
|
||||
You can set transformations as you would any CSS property in jQuery.
|
||||
(Note that you cannot `$.fn.animate()` them, only set them.)
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ x: '30px' }); // Move right
|
||||
$("#box").css({ y: '60px' }); // Move down
|
||||
$("#box").css({ translate: [60,30] }); // Move right and down
|
||||
$("#box").css({ rotate: '30deg' }); // Rotate clockwise
|
||||
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
|
||||
$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical
|
||||
$("#box").css({ skewX: '30deg' }); // Skew horizontally
|
||||
$("#box").css({ skewY: '30deg' }); // Skew vertical
|
||||
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
|
||||
$("#box").css({ rotateY: 30 });
|
||||
$("#box").css({ rotate3d: [1, 1, 0, 45] });
|
||||
```
|
||||
|
||||
Relative values are supported.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ rotate: '+=30' }); // 30 degrees more
|
||||
$("#box").css({ rotate: '-=30' }); // 30 degrees less
|
||||
```
|
||||
|
||||
All units are optional.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ x: '30px' });
|
||||
$("#box").css({ x: 30 });
|
||||
```
|
||||
|
||||
Multiple arguments can be commas or an array.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ translate: [60,30] });
|
||||
$("#box").css({ translate: ['60px','30px'] });
|
||||
$("#box").css({ translate: '60px,30px' });
|
||||
```
|
||||
|
||||
Getters are supported. (Getting properties with multiple arguments returns
|
||||
arrays.)
|
||||
|
||||
``` javascript
|
||||
$("#box").css('rotate'); //=> "30deg"
|
||||
$("#box").css('translate'); //=> ['60px', '30px']
|
||||
```
|
||||
|
||||
Animating - `$.fn.transition`
|
||||
-----------------------------
|
||||
|
||||
$('...').transition(options, [duration], [easing], [complete])
|
||||
|
||||
You can animate with CSS3 transitions using `$.fn.transition()`. It works
|
||||
exactly like `$.fn.animate()`, except it uses CSS3 transitions.
|
||||
|
||||
``` javascript
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 });
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything
|
||||
```
|
||||
|
||||
You can also pass *duration* and *easing* and *complete* as values in `options`, just like in `$.fn.animate()`.
|
||||
|
||||
``` javascript
|
||||
$("#box").transition({
|
||||
opacity: 0.1, scale: 0.3,
|
||||
duration: 500,
|
||||
easing: 'in',
|
||||
complete: function() { /* ... */ }
|
||||
});
|
||||
```
|
||||
|
||||
Tests
|
||||
-----
|
||||
|
||||
Transit has a unique test suite. Open `test/index.html` to see it. When
|
||||
contibuting fixes, be sure to test this out with different jQuery versions and
|
||||
different browsers.
|
||||
|
||||
Alternatives
|
||||
------------
|
||||
|
||||
__[Velocity.js](https://velocityjs.org)__ (recommended!)
|
||||
|
||||
* Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.
|
||||
|
||||
__[Move.js](https://github.com/visionmedia/move.js)__
|
||||
|
||||
* Pros: no jQuery dependency, great syntax.
|
||||
* Cons (at time of writing): no iOS support (doesn't use `translate3d`), some
|
||||
IE bugs, no 3D transforms, no animation queue.
|
||||
|
||||
__[jQuery animate
|
||||
enhanced](https://github.com/benbarnett/jQuery-Animate-Enhanced)__
|
||||
|
||||
* Pros: transparently overrides `$.fn.animate()` to provide CSS transitions
|
||||
support.
|
||||
* Cons: transparently overrides `$.fn.animate()`. No transformations support.
|
||||
|
||||
__[jQuery 2D transformations](https://github.com/heygrady/transform/)__
|
||||
|
||||
* Pros: Tons of transformations.
|
||||
* Cons: No CSS transition support; animates via `fx.step`.
|
||||
|
||||
__[jQuery CSS3 rotate](http://plugins.jquery.com/project/Rotate)__
|
||||
|
||||
* Pros: simply provides rotation.
|
||||
* Cons: simply provides rotation. No transitions support.
|
||||
|
||||
Support
|
||||
-------
|
||||
|
||||
__Bugs and requests__: submit them through the project's issues tracker.<br>
|
||||
[]( https://github.com/rstacruz/jquery.transit/issues )
|
||||
|
||||
__Questions__: ask them at StackOverflow with the tag *jquery-transit*.<br>
|
||||
[]( http://stackoverflow.com/questions/tagged/jquery-transit )
|
||||
|
||||
__Chat__: join us at gitter.im.<br>
|
||||
[]( https://gitter.im/rstacruz/jquery.transit )
|
||||
|
||||
Thanks
|
||||
------
|
||||
|
||||
**jQuery Transit** © 2011-2014+, Rico Sta. Cruz. Released under the [MIT License].<br>
|
||||
Authored and maintained by Rico Sta. Cruz with help from [contributors].
|
||||
|
||||
> [ricostacruz.com](http://ricostacruz.com) ·
|
||||
> GitHub [@rstacruz](https://github.com/rstacruz) ·
|
||||
> Twitter [@rstacruz](https://twitter.com/rstacruz)
|
||||
|
||||
[MIT License]: http://mit-license.org/
|
||||
[contributors]: http://github.com/rstacruz/jquery.transit/contributors
|
||||
|
||||
[](https://npmjs.org/package/jquery.transit "View this project on npm")
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"main": "jquery.transit.js"
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"component/jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"scripts": [
|
||||
"jquery.transit.js"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,745 @@
|
||||
/*!
|
||||
* jQuery Transit - CSS3 transitions and transformations
|
||||
* (c) 2011-2014 Rico Sta. Cruz
|
||||
* MIT Licensed.
|
||||
*
|
||||
* http://ricostacruz.com/jquery.transit
|
||||
* http://github.com/rstacruz/jquery.transit
|
||||
*/
|
||||
|
||||
/* jshint expr: true */
|
||||
|
||||
;(function (root, factory) {
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
factory(root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function($) {
|
||||
|
||||
$.transit = {
|
||||
version: "0.9.12",
|
||||
|
||||
// Map of $.css() keys to values for 'transitionProperty'.
|
||||
// See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
|
||||
propertyMap: {
|
||||
marginLeft : 'margin',
|
||||
marginRight : 'margin',
|
||||
marginBottom : 'margin',
|
||||
marginTop : 'margin',
|
||||
paddingLeft : 'padding',
|
||||
paddingRight : 'padding',
|
||||
paddingBottom : 'padding',
|
||||
paddingTop : 'padding'
|
||||
},
|
||||
|
||||
// Will simply transition "instantly" if false
|
||||
enabled: true,
|
||||
|
||||
// Set this to false if you don't want to use the transition end property.
|
||||
useTransitionEnd: false
|
||||
};
|
||||
|
||||
var div = document.createElement('div');
|
||||
var support = {};
|
||||
|
||||
// Helper function to get the proper vendor property name.
|
||||
// (`transition` => `WebkitTransition`)
|
||||
function getVendorPropertyName(prop) {
|
||||
// Handle unprefixed versions (FF16+, for example)
|
||||
if (prop in div.style) return prop;
|
||||
|
||||
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
|
||||
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
|
||||
|
||||
for (var i=0; i<prefixes.length; ++i) {
|
||||
var vendorProp = prefixes[i] + prop_;
|
||||
if (vendorProp in div.style) { return vendorProp; }
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to check if transform3D is supported.
|
||||
// Should return true for Webkits and Firefox 10+.
|
||||
function checkTransform3dSupport() {
|
||||
div.style[support.transform] = '';
|
||||
div.style[support.transform] = 'rotateY(90deg)';
|
||||
return div.style[support.transform] !== '';
|
||||
}
|
||||
|
||||
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
|
||||
|
||||
// Check for the browser's transitions support.
|
||||
support.transition = getVendorPropertyName('transition');
|
||||
support.transitionDelay = getVendorPropertyName('transitionDelay');
|
||||
support.transform = getVendorPropertyName('transform');
|
||||
support.transformOrigin = getVendorPropertyName('transformOrigin');
|
||||
support.filter = getVendorPropertyName('Filter');
|
||||
support.transform3d = checkTransform3dSupport();
|
||||
|
||||
var eventNames = {
|
||||
'transition': 'transitionend',
|
||||
'MozTransition': 'transitionend',
|
||||
'OTransition': 'oTransitionEnd',
|
||||
'WebkitTransition': 'webkitTransitionEnd',
|
||||
'msTransition': 'MSTransitionEnd'
|
||||
};
|
||||
|
||||
// Detect the 'transitionend' event needed.
|
||||
var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
|
||||
|
||||
// Populate jQuery's `$.support` with the vendor prefixes we know.
|
||||
// As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
|
||||
// we set $.support.transition to a string of the actual property name used.
|
||||
for (var key in support) {
|
||||
if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
|
||||
$.support[key] = support[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid memory leak in IE.
|
||||
div = null;
|
||||
|
||||
// ## $.cssEase
|
||||
// List of easing aliases that you can use with `$.fn.transition`.
|
||||
$.cssEase = {
|
||||
'_default': 'ease',
|
||||
'in': 'ease-in',
|
||||
'out': 'ease-out',
|
||||
'in-out': 'ease-in-out',
|
||||
'snap': 'cubic-bezier(0,1,.5,1)',
|
||||
// Penner equations
|
||||
'easeInCubic': 'cubic-bezier(.550,.055,.675,.190)',
|
||||
'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
|
||||
'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
|
||||
'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
|
||||
'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
|
||||
'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
|
||||
'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
|
||||
'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
|
||||
'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
|
||||
'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
|
||||
'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
|
||||
'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
|
||||
'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
|
||||
'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
|
||||
'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
|
||||
'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
|
||||
'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
|
||||
'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
|
||||
'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
|
||||
'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
|
||||
'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
|
||||
'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
|
||||
'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
|
||||
'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
|
||||
};
|
||||
|
||||
// ## 'transform' CSS hook
|
||||
// Allows you to use the `transform` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ transform: "rotate(90deg)" });
|
||||
//
|
||||
// $("#hello").css('transform');
|
||||
// //=> { rotate: '90deg' }
|
||||
//
|
||||
$.cssHooks['transit:transform'] = {
|
||||
// The getter returns a `Transform` object.
|
||||
get: function(elem) {
|
||||
return $(elem).data('transform') || new Transform();
|
||||
},
|
||||
|
||||
// The setter accepts a `Transform` object or a string.
|
||||
set: function(elem, v) {
|
||||
var value = v;
|
||||
|
||||
if (!(value instanceof Transform)) {
|
||||
value = new Transform(value);
|
||||
}
|
||||
|
||||
// We've seen the 3D version of Scale() not work in Chrome when the
|
||||
// element being scaled extends outside of the viewport. Thus, we're
|
||||
// forcing Chrome to not use the 3d transforms as well. Not sure if
|
||||
// translate is affectede, but not risking it. Detection code from
|
||||
// http://davidwalsh.name/detecting-google-chrome-javascript
|
||||
if (support.transform === 'WebkitTransform' && !isChrome) {
|
||||
elem.style[support.transform] = value.toString(true);
|
||||
} else {
|
||||
elem.style[support.transform] = value.toString();
|
||||
}
|
||||
|
||||
$(elem).data('transform', value);
|
||||
}
|
||||
};
|
||||
|
||||
// Add a CSS hook for `.css({ transform: '...' })`.
|
||||
// In jQuery 1.8+, this will intentionally override the default `transform`
|
||||
// CSS hook so it'll play well with Transit. (see issue #62)
|
||||
$.cssHooks.transform = {
|
||||
set: $.cssHooks['transit:transform'].set
|
||||
};
|
||||
|
||||
// ## 'filter' CSS hook
|
||||
// Allows you to use the `filter` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ filter: 'blur(10px)' });
|
||||
//
|
||||
$.cssHooks.filter = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.filter];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.filter] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
|
||||
// be necessary.
|
||||
if ($.fn.jquery < "1.8") {
|
||||
// ## 'transformOrigin' CSS hook
|
||||
// Allows the use for `transformOrigin` to define where scaling and rotation
|
||||
// is pivoted.
|
||||
//
|
||||
// $("#hello").css({ transformOrigin: '0 0' });
|
||||
//
|
||||
$.cssHooks.transformOrigin = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.transformOrigin];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.transformOrigin] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// ## 'transition' CSS hook
|
||||
// Allows you to use the `transition` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ transition: 'all 0 ease 0' });
|
||||
//
|
||||
$.cssHooks.transition = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.transition];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.transition] = value;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ## Other CSS hooks
|
||||
// Allows you to rotate, scale and translate.
|
||||
registerCssHook('scale');
|
||||
registerCssHook('scaleX');
|
||||
registerCssHook('scaleY');
|
||||
registerCssHook('translate');
|
||||
registerCssHook('rotate');
|
||||
registerCssHook('rotateX');
|
||||
registerCssHook('rotateY');
|
||||
registerCssHook('rotate3d');
|
||||
registerCssHook('perspective');
|
||||
registerCssHook('skewX');
|
||||
registerCssHook('skewY');
|
||||
registerCssHook('x', true);
|
||||
registerCssHook('y', true);
|
||||
|
||||
// ## Transform class
|
||||
// This is the main class of a transformation property that powers
|
||||
// `$.fn.css({ transform: '...' })`.
|
||||
//
|
||||
// This is, in essence, a dictionary object with key/values as `-transform`
|
||||
// properties.
|
||||
//
|
||||
// var t = new Transform("rotate(90) scale(4)");
|
||||
//
|
||||
// t.rotate //=> "90deg"
|
||||
// t.scale //=> "4,4"
|
||||
//
|
||||
// Setters are accounted for.
|
||||
//
|
||||
// t.set('rotate', 4)
|
||||
// t.rotate //=> "4deg"
|
||||
//
|
||||
// Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit)
|
||||
// functions.
|
||||
//
|
||||
// t.toString() //=> "rotate(90deg) scale(4,4)"
|
||||
// t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version)
|
||||
//
|
||||
function Transform(str) {
|
||||
if (typeof str === 'string') { this.parse(str); }
|
||||
return this;
|
||||
}
|
||||
|
||||
Transform.prototype = {
|
||||
// ### setFromString()
|
||||
// Sets a property from a string.
|
||||
//
|
||||
// t.setFromString('scale', '2,4');
|
||||
// // Same as set('scale', '2', '4');
|
||||
//
|
||||
setFromString: function(prop, val) {
|
||||
var args =
|
||||
(typeof val === 'string') ? val.split(',') :
|
||||
(val.constructor === Array) ? val :
|
||||
[ val ];
|
||||
|
||||
args.unshift(prop);
|
||||
|
||||
Transform.prototype.set.apply(this, args);
|
||||
},
|
||||
|
||||
// ### set()
|
||||
// Sets a property.
|
||||
//
|
||||
// t.set('scale', 2, 4);
|
||||
//
|
||||
set: function(prop) {
|
||||
var args = Array.prototype.slice.apply(arguments, [1]);
|
||||
if (this.setter[prop]) {
|
||||
this.setter[prop].apply(this, args);
|
||||
} else {
|
||||
this[prop] = args.join(',');
|
||||
}
|
||||
},
|
||||
|
||||
get: function(prop) {
|
||||
if (this.getter[prop]) {
|
||||
return this.getter[prop].apply(this);
|
||||
} else {
|
||||
return this[prop] || 0;
|
||||
}
|
||||
},
|
||||
|
||||
setter: {
|
||||
// ### rotate
|
||||
//
|
||||
// .css({ rotate: 30 })
|
||||
// .css({ rotate: "30" })
|
||||
// .css({ rotate: "30deg" })
|
||||
// .css({ rotate: "30deg" })
|
||||
//
|
||||
rotate: function(theta) {
|
||||
this.rotate = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
rotateX: function(theta) {
|
||||
this.rotateX = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
rotateY: function(theta) {
|
||||
this.rotateY = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
// ### scale
|
||||
//
|
||||
// .css({ scale: 9 }) //=> "scale(9,9)"
|
||||
// .css({ scale: '3,2' }) //=> "scale(3,2)"
|
||||
//
|
||||
scale: function(x, y) {
|
||||
if (y === undefined) { y = x; }
|
||||
this.scale = x + "," + y;
|
||||
},
|
||||
|
||||
// ### skewX + skewY
|
||||
skewX: function(x) {
|
||||
this.skewX = unit(x, 'deg');
|
||||
},
|
||||
|
||||
skewY: function(y) {
|
||||
this.skewY = unit(y, 'deg');
|
||||
},
|
||||
|
||||
// ### perspectvie
|
||||
perspective: function(dist) {
|
||||
this.perspective = unit(dist, 'px');
|
||||
},
|
||||
|
||||
// ### x / y
|
||||
// Translations. Notice how this keeps the other value.
|
||||
//
|
||||
// .css({ x: 4 }) //=> "translate(4px, 0)"
|
||||
// .css({ y: 10 }) //=> "translate(4px, 10px)"
|
||||
//
|
||||
x: function(x) {
|
||||
this.set('translate', x, null);
|
||||
},
|
||||
|
||||
y: function(y) {
|
||||
this.set('translate', null, y);
|
||||
},
|
||||
|
||||
// ### translate
|
||||
// Notice how this keeps the other value.
|
||||
//
|
||||
// .css({ translate: '2, 5' }) //=> "translate(2px, 5px)"
|
||||
//
|
||||
translate: function(x, y) {
|
||||
if (this._translateX === undefined) { this._translateX = 0; }
|
||||
if (this._translateY === undefined) { this._translateY = 0; }
|
||||
|
||||
if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
|
||||
if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }
|
||||
|
||||
this.translate = this._translateX + "," + this._translateY;
|
||||
}
|
||||
},
|
||||
|
||||
getter: {
|
||||
x: function() {
|
||||
return this._translateX || 0;
|
||||
},
|
||||
|
||||
y: function() {
|
||||
return this._translateY || 0;
|
||||
},
|
||||
|
||||
scale: function() {
|
||||
var s = (this.scale || "1,1").split(',');
|
||||
if (s[0]) { s[0] = parseFloat(s[0]); }
|
||||
if (s[1]) { s[1] = parseFloat(s[1]); }
|
||||
|
||||
// "2.5,2.5" => 2.5
|
||||
// "2.5,1" => [2.5,1]
|
||||
return (s[0] === s[1]) ? s[0] : s;
|
||||
},
|
||||
|
||||
rotate3d: function() {
|
||||
var s = (this.rotate3d || "0,0,0,0deg").split(',');
|
||||
for (var i=0; i<=3; ++i) {
|
||||
if (s[i]) { s[i] = parseFloat(s[i]); }
|
||||
}
|
||||
if (s[3]) { s[3] = unit(s[3], 'deg'); }
|
||||
|
||||
return s;
|
||||
}
|
||||
},
|
||||
|
||||
// ### parse()
|
||||
// Parses from a string. Called on constructor.
|
||||
parse: function(str) {
|
||||
var self = this;
|
||||
str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) {
|
||||
self.setFromString(prop, val);
|
||||
});
|
||||
},
|
||||
|
||||
// ### toString()
|
||||
// Converts to a `transition` CSS property string. If `use3d` is given,
|
||||
// it converts to a `-webkit-transition` CSS property string instead.
|
||||
toString: function(use3d) {
|
||||
var re = [];
|
||||
|
||||
for (var i in this) {
|
||||
if (this.hasOwnProperty(i)) {
|
||||
// Don't use 3D transformations if the browser can't support it.
|
||||
if ((!support.transform3d) && (
|
||||
(i === 'rotateX') ||
|
||||
(i === 'rotateY') ||
|
||||
(i === 'perspective') ||
|
||||
(i === 'transformOrigin'))) { continue; }
|
||||
|
||||
if (i[0] !== '_') {
|
||||
if (use3d && (i === 'scale')) {
|
||||
re.push(i + "3d(" + this[i] + ",1)");
|
||||
} else if (use3d && (i === 'translate')) {
|
||||
re.push(i + "3d(" + this[i] + ",0)");
|
||||
} else {
|
||||
re.push(i + "(" + this[i] + ")");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return re.join(" ");
|
||||
}
|
||||
};
|
||||
|
||||
function callOrQueue(self, queue, fn) {
|
||||
if (queue === true) {
|
||||
self.queue(fn);
|
||||
} else if (queue) {
|
||||
self.queue(queue, fn);
|
||||
} else {
|
||||
self.each(function () {
|
||||
fn.call(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ### getProperties(dict)
|
||||
// Returns properties (for `transition-property`) for dictionary `props`. The
|
||||
// value of `props` is what you would expect in `$.css(...)`.
|
||||
function getProperties(props) {
|
||||
var re = [];
|
||||
|
||||
$.each(props, function(key) {
|
||||
key = $.camelCase(key); // Convert "text-align" => "textAlign"
|
||||
key = $.transit.propertyMap[key] || $.cssProps[key] || key;
|
||||
key = uncamel(key); // Convert back to dasherized
|
||||
|
||||
// Get vendor specify propertie
|
||||
if (support[key])
|
||||
key = uncamel(support[key]);
|
||||
|
||||
if ($.inArray(key, re) === -1) { re.push(key); }
|
||||
});
|
||||
|
||||
return re;
|
||||
}
|
||||
|
||||
// ### getTransition()
|
||||
// Returns the transition string to be used for the `transition` CSS property.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// getTransition({ opacity: 1, rotate: 30 }, 500, 'ease');
|
||||
// //=> 'opacity 500ms ease, -webkit-transform 500ms ease'
|
||||
//
|
||||
function getTransition(properties, duration, easing, delay) {
|
||||
// Get the CSS properties needed.
|
||||
var props = getProperties(properties);
|
||||
|
||||
// Account for aliases (`in` => `ease-in`).
|
||||
if ($.cssEase[easing]) { easing = $.cssEase[easing]; }
|
||||
|
||||
// Build the duration/easing/delay attributes for it.
|
||||
var attribs = '' + toMS(duration) + ' ' + easing;
|
||||
if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); }
|
||||
|
||||
// For more properties, add them this way:
|
||||
// "margin 200ms ease, padding 200ms ease, ..."
|
||||
var transitions = [];
|
||||
$.each(props, function(i, name) {
|
||||
transitions.push(name + ' ' + attribs);
|
||||
});
|
||||
|
||||
return transitions.join(', ');
|
||||
}
|
||||
|
||||
// ## $.fn.transition
|
||||
// Works like $.fn.animate(), but uses CSS transitions.
|
||||
//
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 });
|
||||
//
|
||||
// // Specific duration
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500);
|
||||
//
|
||||
// // With duration and easing
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');
|
||||
//
|
||||
// // With callback
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... });
|
||||
//
|
||||
// // With everything
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... });
|
||||
//
|
||||
// // Alternate syntax
|
||||
// $("...").transition({
|
||||
// opacity: 0.1,
|
||||
// duration: 200,
|
||||
// delay: 40,
|
||||
// easing: 'in',
|
||||
// complete: function() { /* ... */ }
|
||||
// });
|
||||
//
|
||||
$.fn.transition = $.fn.transit = function(properties, duration, easing, callback) {
|
||||
var self = this;
|
||||
var delay = 0;
|
||||
var queue = true;
|
||||
|
||||
var theseProperties = $.extend(true, {}, properties);
|
||||
|
||||
// Account for `.transition(properties, callback)`.
|
||||
if (typeof duration === 'function') {
|
||||
callback = duration;
|
||||
duration = undefined;
|
||||
}
|
||||
|
||||
// Account for `.transition(properties, options)`.
|
||||
if (typeof duration === 'object') {
|
||||
easing = duration.easing;
|
||||
delay = duration.delay || 0;
|
||||
queue = typeof duration.queue === "undefined" ? true : duration.queue;
|
||||
callback = duration.complete;
|
||||
duration = duration.duration;
|
||||
}
|
||||
|
||||
// Account for `.transition(properties, duration, callback)`.
|
||||
if (typeof easing === 'function') {
|
||||
callback = easing;
|
||||
easing = undefined;
|
||||
}
|
||||
|
||||
// Alternate syntax.
|
||||
if (typeof theseProperties.easing !== 'undefined') {
|
||||
easing = theseProperties.easing;
|
||||
delete theseProperties.easing;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.duration !== 'undefined') {
|
||||
duration = theseProperties.duration;
|
||||
delete theseProperties.duration;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.complete !== 'undefined') {
|
||||
callback = theseProperties.complete;
|
||||
delete theseProperties.complete;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.queue !== 'undefined') {
|
||||
queue = theseProperties.queue;
|
||||
delete theseProperties.queue;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.delay !== 'undefined') {
|
||||
delay = theseProperties.delay;
|
||||
delete theseProperties.delay;
|
||||
}
|
||||
|
||||
// Set defaults. (`400` duration, `ease` easing)
|
||||
if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
|
||||
if (typeof easing === 'undefined') { easing = $.cssEase._default; }
|
||||
|
||||
duration = toMS(duration);
|
||||
|
||||
// Build the `transition` property.
|
||||
var transitionValue = getTransition(theseProperties, duration, easing, delay);
|
||||
|
||||
// Compute delay until callback.
|
||||
// If this becomes 0, don't bother setting the transition property.
|
||||
var work = $.transit.enabled && support.transition;
|
||||
var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0;
|
||||
|
||||
// If there's nothing to do...
|
||||
if (i === 0) {
|
||||
var fn = function(next) {
|
||||
self.css(theseProperties);
|
||||
if (callback) { callback.apply(self); }
|
||||
if (next) { next(); }
|
||||
};
|
||||
|
||||
callOrQueue(self, queue, fn);
|
||||
return self;
|
||||
}
|
||||
|
||||
// Save the old transitions of each element so we can restore it later.
|
||||
var oldTransitions = {};
|
||||
|
||||
var run = function(nextCall) {
|
||||
var bound = false;
|
||||
|
||||
// Prepare the callback.
|
||||
var cb = function() {
|
||||
if (bound) { self.unbind(transitionEnd, cb); }
|
||||
|
||||
if (i > 0) {
|
||||
self.each(function() {
|
||||
this.style[support.transition] = (oldTransitions[this] || null);
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof callback === 'function') { callback.apply(self); }
|
||||
if (typeof nextCall === 'function') { nextCall(); }
|
||||
};
|
||||
|
||||
if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) {
|
||||
// Use the 'transitionend' event if it's available.
|
||||
bound = true;
|
||||
self.bind(transitionEnd, cb);
|
||||
} else {
|
||||
// Fallback to timers if the 'transitionend' event isn't supported.
|
||||
window.setTimeout(cb, i);
|
||||
}
|
||||
|
||||
// Apply transitions.
|
||||
self.each(function() {
|
||||
if (i > 0) {
|
||||
this.style[support.transition] = transitionValue;
|
||||
}
|
||||
$(this).css(theseProperties);
|
||||
});
|
||||
};
|
||||
|
||||
// Defer running. This allows the browser to paint any pending CSS it hasn't
|
||||
// painted yet before doing the transitions.
|
||||
var deferredRun = function(next) {
|
||||
this.offsetWidth; // force a repaint
|
||||
run(next);
|
||||
};
|
||||
|
||||
// Use jQuery's fx queue.
|
||||
callOrQueue(self, queue, deferredRun);
|
||||
|
||||
// Chainability.
|
||||
return this;
|
||||
};
|
||||
|
||||
function registerCssHook(prop, isPixels) {
|
||||
// For certain properties, the 'px' should not be implied.
|
||||
if (!isPixels) { $.cssNumber[prop] = true; }
|
||||
|
||||
$.transit.propertyMap[prop] = support.transform;
|
||||
|
||||
$.cssHooks[prop] = {
|
||||
get: function(elem) {
|
||||
var t = $(elem).css('transit:transform');
|
||||
return t.get(prop);
|
||||
},
|
||||
|
||||
set: function(elem, value) {
|
||||
var t = $(elem).css('transit:transform');
|
||||
t.setFromString(prop, value);
|
||||
|
||||
$(elem).css({ 'transit:transform': t });
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// ### uncamel(str)
|
||||
// Converts a camelcase string to a dasherized string.
|
||||
// (`marginLeft` => `margin-left`)
|
||||
function uncamel(str) {
|
||||
return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
|
||||
}
|
||||
|
||||
// ### unit(number, unit)
|
||||
// Ensures that number `number` has a unit. If no unit is found, assume the
|
||||
// default is `unit`.
|
||||
//
|
||||
// unit(2, 'px') //=> "2px"
|
||||
// unit("30deg", 'rad') //=> "30deg"
|
||||
//
|
||||
function unit(i, units) {
|
||||
if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) {
|
||||
return i;
|
||||
} else {
|
||||
return "" + i + units;
|
||||
}
|
||||
}
|
||||
|
||||
// ### toMS(duration)
|
||||
// Converts given `duration` to a millisecond string.
|
||||
//
|
||||
// toMS('fast') => $.fx.speeds[i] => "200ms"
|
||||
// toMS('normal') //=> $.fx.speeds._default => "400ms"
|
||||
// toMS(10) //=> '10ms'
|
||||
// toMS('100ms') //=> '100ms'
|
||||
//
|
||||
function toMS(duration) {
|
||||
var i = duration;
|
||||
|
||||
// Allow string durations like 'fast' and 'slow', without overriding numeric values.
|
||||
if (typeof i === 'string' && (!i.match(/^[\-0-9\.]+/))) { i = $.fx.speeds[i] || $.fx.speeds._default; }
|
||||
|
||||
return unit(i, 'ms');
|
||||
}
|
||||
|
||||
// Export some functions for testable-ness.
|
||||
$.transit.getTransitionValue = getTransition;
|
||||
|
||||
return $;
|
||||
}));
|
||||
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"version": "0.9.12",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"main": "jquery.transit.js",
|
||||
"directories": {
|
||||
"test": "test"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/rstacruz/jquery.transit.git"
|
||||
},
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"author": "Rico Sta. Cruz <hi@ricostacruz.com>",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "1.9.1",
|
||||
"sinon": "1.10.2",
|
||||
"jsdom": "0.11.0",
|
||||
"coffee-script": "1.7.1"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/rstacruz/jquery.transit/issues"
|
||||
},
|
||||
"homepage": "http://ricostacruz.com/jquery.transit"
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>jQuery Transit tests</title>
|
||||
<script>
|
||||
/*
|
||||
* Dynamic script loading
|
||||
*/
|
||||
|
||||
(function() {
|
||||
var m = location.search.match(/jquery=([^&$]*)/);
|
||||
var jQueryVersion = m ? m[1] : "1.8.1";
|
||||
|
||||
function addScript(src) {
|
||||
document.write("<scr"+"ipt src='"+src+"'></scr"+"ipt>");
|
||||
}
|
||||
|
||||
// Dynamically load jQuery depending on what's passed on get params.
|
||||
if (jQueryVersion === "1.9.0b1") {
|
||||
addScript("http://code.jquery.com/jquery-1.9.0b1.js");
|
||||
addScript("http://code.jquery.com/jquery-migrate-1.0.0b1.js");
|
||||
} else {
|
||||
addScript("http://ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.min.js");
|
||||
}
|
||||
addScript("../jquery.transit.js");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="test.js"></script>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='use'>
|
||||
Use:
|
||||
<a href='index.html?jquery=2.0.3'>jQ 2.0.3</a>
|
||||
<a href='index.html?jquery=1.9.0b1'>jQ 1.9.0b1</a>
|
||||
<a href='index.html?jquery=1.8.1'>jQ 1.8</a>
|
||||
<a href='index.html?jquery=1.7.0'>jQ 1.7</a>
|
||||
<a href='index.html?jquery=1.6.0'>jQ 1.6</a>
|
||||
<a href='index.html?jquery=1.5.0'>jQ 1.5</a>
|
||||
<button class='play-all'>Play all</button>
|
||||
</div>
|
||||
|
||||
<div class='description'>
|
||||
<h1>jQuery transit tests</h1>
|
||||
<p class='version' id='jquery-version'></p>
|
||||
<p>Since there's no reliable programmatic way to test for transitions, this
|
||||
is a simple page set up so you can visually inspect effects
|
||||
conveniently.</p>
|
||||
</div>
|
||||
|
||||
<div class='tests'></div>
|
||||
<script>
|
||||
group('Transformations');
|
||||
|
||||
test('Translation', function($box) { $box.transition({ x: 20, y: 20 }); });
|
||||
test('Rotate', function($box) { $box.transition({ rotate: 45 }); });
|
||||
test('Rotate via string', function($box) { $box.transition({ rotate: '45deg' }); });
|
||||
test('Skew X', function($box) { $box.transition({ skewX: 30 }); });
|
||||
test('Skew Y', function($box) { $box.transition({ skewY: 30 }); });
|
||||
test('Skew XY', function($box) { $box.transition({ skewY: 30, skewX: 30 }); });
|
||||
test('Scale up', function($box) { $box.transition({ scale: 2 }); });
|
||||
test('Scale down', function($box) { $box.transition({ scale: 0.5 }); });
|
||||
|
||||
group('3D transformations');
|
||||
|
||||
test('Rotate X', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateX: 180
|
||||
});
|
||||
});
|
||||
|
||||
test('Rotate Y', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateY: 180
|
||||
});
|
||||
});
|
||||
|
||||
test('Rotate X/Y', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateX: 180,
|
||||
rotateY: 180
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
group('Params');
|
||||
|
||||
test('Delay', function($box) {
|
||||
$box.transition({ rotate: 45, delay: 150 });
|
||||
});
|
||||
|
||||
test('Delay zero', function($box) {
|
||||
$box
|
||||
.transition({ x: 50, delay: 0 })
|
||||
.transition({ x: 0 });
|
||||
});
|
||||
|
||||
test('Ease (should be snappy)', function($box) {
|
||||
$box.transition(
|
||||
{ x: 100 }, 500,
|
||||
'cubic-bezier(0,0.9,0.3,1)');
|
||||
});
|
||||
|
||||
group('Chaining');
|
||||
|
||||
test('Queueing', function($box) {
|
||||
$box
|
||||
.transition({ x: 50 })
|
||||
.transition({ x: 0 })
|
||||
.transition({ y: 50 })
|
||||
.transition({ y: 0 });
|
||||
});
|
||||
|
||||
test('Duration 0 (should not flicker)', function($box) {
|
||||
$box
|
||||
.transition({ x: 50 }, 0)
|
||||
.transition({ x: 0 }, 0)
|
||||
.transition({ y: 50 }, 0);
|
||||
});
|
||||
|
||||
group('Callbacks');
|
||||
|
||||
test('2nd param', function($box) {
|
||||
$box.transition(
|
||||
{ rotate: 45 },
|
||||
function() { $box.html('OK'); });
|
||||
});
|
||||
|
||||
test('3rd param', function($box) {
|
||||
$box.transition(
|
||||
{ rotate: 45 },
|
||||
500,
|
||||
function() { $box.html('OK'); });
|
||||
});
|
||||
|
||||
test('as "complete"', function($box) {
|
||||
$box.transition({
|
||||
rotate: 45,
|
||||
complete: function() { $box.html('OK'); }
|
||||
});
|
||||
});
|
||||
|
||||
group('Misc');
|
||||
|
||||
test('CSS with Transition', function($box) {
|
||||
$box
|
||||
.css({ x: -50 })
|
||||
.transition({ x: 50 });
|
||||
});
|
||||
|
||||
test('Opacity', function($box) {
|
||||
$box
|
||||
.transition({ opacity: 0 });
|
||||
});
|
||||
|
||||
test('Transition of transform (no jump first time)', function($box) {
|
||||
$box
|
||||
.transition({ transform: "translateX(80px)" });
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
* { margin: 0; padding: 0; font-size: 1em; }
|
||||
html { padding: 40px; background: #e3e3e7; }
|
||||
body, td, input, textarea { font-family: helvetica neue, sans-serif; font-size: 9pt; color: #444; line-height: 1.4; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
|
||||
body { padding-top: 50px; }
|
||||
.use { position: fixed; top: 0; left: 0; right: 0; padding: 20px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); background: rgba(250, 250, 250, 0.9); z-index: 10; }
|
||||
.test { width: 220px; padding: 20px; float: left; margin: 0 20px 20px 0; background: white; border-radius: 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05); }
|
||||
.test .area { width: auto; height: 100px; margin: 10px 0; position: relative; }
|
||||
.test:hover { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.15); }
|
||||
.test h3 { font-size: 1.2em; margin-bottom: 2px; overflow: hidden; line-height: 24px; }
|
||||
.test h3 em { font-style: normal; font-weight: 200; float: right; color: #37a; font-size: 0.8em; }
|
||||
.test .box { position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; width: 32px; height: 32px; line-height: 32px; text-align: center; background: #505070; border-radius: 2px; z-index: 2; color: #ddd; }
|
||||
.test .ghost { background: #ddd; z-index: 1; box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.03); }
|
||||
.test pre { font-family: menlo, monospace; font-size: 7pt; padding: 10px; background: #eee; margin: 20px -20px -20px -20px; border-top: solid 1px #ddd; white-space: pre-wrap; line-height: 1.5; }
|
||||
.group-heading { margin: 20px 0 20px 0; padding-bottom: 10px; border-bottom: dotted 1px #ccc; font-size: 1.6em; clear: both; color: #70a0c0; font-weight: 200; }
|
||||
|
||||
.use button { padding: 0 10px; }
|
||||
.use a, .use button { margin: 0 5px; }
|
||||
|
||||
.description { padding-bottom: 20px; border-bottom: dotted 1px #ccc; }
|
||||
.description h1 { font-size: 2.5em; font-weight: 200; color: #707090; }
|
||||
.description p { font-size: 1.2em; color: #707090; width: 500px; }
|
||||
.description .version { margin-bottom: 20px; font-size: 1.2em; font-weight: bold; }
|
||||
@@ -0,0 +1,65 @@
|
||||
(function($) {
|
||||
/* Simple test framework of sorts */
|
||||
|
||||
|
||||
function addTestEvents ($test) {
|
||||
$test.bind('mouseenter play', function() {
|
||||
var $test = $(this).closest('.test');
|
||||
$test.trigger('reset');
|
||||
var $box = $test.find('.box:not(.ghost)');
|
||||
var $ghost = $box.clone().addClass('ghost').appendTo($test.find('.area'));
|
||||
|
||||
$test.data('code').fn($box, $test);
|
||||
});
|
||||
|
||||
$test.bind('mouseleave reset', function() {
|
||||
var $test = $(this).closest('.test');
|
||||
var $ghost = $test.find('.ghost');
|
||||
if ($ghost.length) {
|
||||
$test.find('.box:not(.ghost)').remove();
|
||||
$test.find('.ghost').removeClass('ghost');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.play-all').bind('click', function() {
|
||||
$('.test').trigger('play');
|
||||
});
|
||||
});
|
||||
|
||||
function test(name, fn) {
|
||||
var i = $('.tests .test').length;
|
||||
var $test = $('<div class="test"><h3></h3><div class="area"><div class="box"></div></div><pre class="code"></pre></div>');
|
||||
|
||||
var m = fn.toString().match(/\{([\s\S]*)\}$/);
|
||||
var code = m[1];
|
||||
code = code.replace(/^\s*|\s*$/g, '');
|
||||
code = code.replace(/\n {4}/g, "\n");
|
||||
name = name.replace(/\(.*\)/, function(n) { return "<em>"+n.substr(1,n.length-2)+"</em>"; });
|
||||
|
||||
$test.attr('id', 'test-'+i);
|
||||
$test.find('h3').html(name);
|
||||
$test.find('pre').text(code);
|
||||
$test.data('code', {fn: fn});
|
||||
addTestEvents($test);
|
||||
|
||||
$('.tests').append($test);
|
||||
}
|
||||
|
||||
function group(name) {
|
||||
$('.tests').append($('<h4 class="group-heading">').text(name));
|
||||
}
|
||||
|
||||
// Show versions
|
||||
$(function() {
|
||||
$('#jquery-version').html(
|
||||
'jQuery: v' + $.fn.jquery + '<br>' +
|
||||
'Transit: v' + $.transit.version
|
||||
);
|
||||
});
|
||||
|
||||
window.group = group;
|
||||
window.test = test;
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user