diff options
| author |   Stephane Desneux <stephane.desneux@iot.bzh> | 2016-05-31 18:16:48 +0200 |
|---|---|---|
| committer | Stephane Desneux <stephane.desneux@iot.bzh> | 2016-05-31 18:16:48 +0200 |
| commit | 5b1e6cc132f44262a873fa8296a2a3e1017b0278 (patch) | |
| tree | 43b2cd54e2e300b399ff3f2af4458a2c4ed8a144 /afb-client/bower_components/tether/examples/dolls | |
| parent | f7d2f9ac4168ee5064580c666d508667a73cefc0 (diff) | |
| parent | 85ace9c1ce9a98e9b8a22f045c7dd752b38d9129 (diff) | |
Merge afb-client
Diffstat (limited to 'afb-client/bower_components/tether/examples/dolls')
3 files changed, 108 insertions, 0 deletions
diff --git a/afb-client/bower_components/tether/examples/dolls/dolls.css b/afb-client/bower_components/tether/examples/dolls/dolls.css new file mode 100644 index 0000000..931c0de --- /dev/null +++ b/afb-client/bower_components/tether/examples/dolls/dolls.css @@ -0,0 +1,18 @@ +.tether-element, .tether-target { + width: 200px; + height: 50px; + background-color: #4cc; + position: absolute; +} +body { + width: 100%; + height: 100%; + overflow: scroll; +} +.scroll { + width: 400%; + height: 400%; +} +.tether-target:not(.tether-element) { + cursor: move; +} diff --git a/afb-client/bower_components/tether/examples/dolls/dolls.js b/afb-client/bower_components/tether/examples/dolls/dolls.js new file mode 100644 index 0000000..5d0b06b --- /dev/null +++ b/afb-client/bower_components/tether/examples/dolls/dolls.js @@ -0,0 +1,83 @@ +var tethers = []; + +document.addEventListener('DOMContentLoaded', function(){ + dragging = null; + + document.body.addEventListener('mouseup', function(){ + dragging = null; + }); + + document.body.addEventListener('mousemove', function(e){ + if (dragging){ + dragging.style.top = e.clientY + 'px'; + dragging.style.left = e.clientX + 'px'; + + Tether.position() + } + }); + + document.body.addEventListener('mousedown', function(e){ + if (e.target.getAttribute('data-index')) + dragging = e.target; + }) + + var count = 60; + var parent = null; + var dir = 'left'; + var first = null; + + while (count--){ + var el = document.createElement('div'); + el.setAttribute('data-index', count); + document.querySelector('.scroll').appendChild(el); + + if (!first) + first = el; + + if (count % 10 === 0) + dir = dir == 'right' ? 'left' : 'right'; + + if (parent){ + tethers.push(new Tether({ + element: el, + target: parent, + attachment: 'middle ' + dir, + targetOffset: (dir == 'left' ? '10px 10px' : '10px -10px') + })); + + } + + parent = el; + } + + initAnim(first); +}); + +function initAnim(el){ + var start = performance.now() + var last = 0; + var lastTop = 0; + var tick = function(){ + var diff = performance.now() - last; + + if (!last || diff > 50){ + last = performance.now(); + + var nextTop = 50 * Math.sin((last - start) / 1000); + + var curTop = parseFloat(el.style.top || 0); + var topChange = nextTop - lastTop; + lastTop = nextTop; + + var top = curTop + topChange; + + el.style.top = top + 'px'; + + Tether.position(); + } + + requestAnimationFrame(tick); + }; + + tick(); +} diff --git a/afb-client/bower_components/tether/examples/dolls/index.html b/afb-client/bower_components/tether/examples/dolls/index.html new file mode 100644 index 0000000..610fb34 --- /dev/null +++ b/afb-client/bower_components/tether/examples/dolls/index.html @@ -0,0 +1,7 @@ +<link rel="stylesheet" href="./dolls.css" /> +<script src="../../tether.js"></script> +<script src="./dolls.js"></script> +<body> + <div class="scroll"> + </div> +</body> |