corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 1 <a href="http://interactjs.io"><img alt="interact.js" src="https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/ijs-anim.svg" height="131px" width="100%"></a>
2  
3 JavaScript drag and drop, resizing and multi-touch gestures with inertia and
4 snapping for modern browsers (and also IE8+).
5  
6 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/taye/interact.js)
7  
8 Features include:
9  
10 - **inertia** and **snapping**
11 - **multiple interactions**
12 - cross browser and device, supporting the **desktop and mobile** versions of
13 Chrome, Firefox and Opera as well as **Internet Explorer 8+**
14 - interaction with [**SVG**](http://interactjs.io/repo/demo/star.svg) elements
15 - being **lightweight and standalone** (not _yet another_ jQuery plugin)
16 - **not modifying the DOM** except to support IE8 and to change the cursor
17 (but you can disable that)
18  
19 Installation
20 ------------
21  
22 * [Bower](http://bower.io/): `bower install interactjs`
23 * [npm](https://www.npmjs.org/): `npm install interactjs`
24 * Direct download the latest version: http://interactjs.io/#download
25 * [jsDelivr CDN](http://www.jsdelivr.com/#!interact.js): `<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>`
26 * [cdnjs CDN](https://cdnjs.com/libraries/interact.js): `<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>`
27 (replace `VERSION` with the SemVer you want to use)
28  
29 Documentation
30 -------------
31  
32 Visit http://interactjs.io/docs for the API documentation.
33  
34 Example
35 -------
36  
37 ```javascript
38 var pixelSize = 16;
39  
40 interact('.rainbow-pixel-canvas')
41 .origin('self')
42 .draggable({
43 snap: {
44 targets: [ interact.createSnapGrid({
45 x: pixelSize, y: pixelSize
46 }) ]
47 },
48 // allow multiple drags on the same element
49 maxPerElement: Infinity
50 })
51 // draw colored squares on move
52 .on('dragmove', function (event) {
53 var context = event.target.getContext('2d'),
54 // calculate the angle of the drag direction
55 dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;
56  
57 // set color based on drag angle and speed
58 context.fillStyle = 'hsl(' + dragAngle + ', 86%, '
59 + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';
60  
61 // draw squares
62 context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
63 pixelSize, pixelSize);
64 })
65 // clear the canvas on doubletap
66 .on('doubletap', function (event) {
67 var context = event.target.getContext('2d');
68  
69 context.clearRect(0, 0, context.canvas.width, context.canvas.height);
70 });
71  
72 function resizeCanvases () {
73 [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {
74 canvas.width = document.body.clientWidth;
75 canvas.height = window.innerHeight * 0.7;
76 });
77 }
78  
79 // interact.js can also add DOM event listeners
80 interact(document).on('DOMContentLoaded', resizeCanvases);
81 interact(window).on('resize', resizeCanvases);
82 ```
83  
84 See the above code in action at http://codepen.io/taye/pen/YPyLxE
85  
86 License
87 -------
88  
89 interact.js is released under the [MIT License](http://taye.mit-license.org).
90  
91 [ijs-twitter]: https://twitter.com/interactjs
92 [upcoming-changes]: https://github.com/taye/interact.js/blob/master/CHANGELOG.md#upcoming-changes