summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/tether/examples/dolls
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/tether/examples/dolls')
-rw-r--r--afb-client/bower_components/tether/examples/dolls/dolls.css18
-rw-r--r--afb-client/bower_components/tether/examples/dolls/dolls.js83
-rw-r--r--afb-client/bower_components/tether/examples/dolls/index.html7
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>