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));
|
||||
Reference in New Issue
Block a user