afb-client/bower_components/tether/examples/dolls/dolls.js

   1 var tethers = [];
   2
   3 document.addEventListener('DOMContentLoaded', function(){
   4   dragging = null;
   5
   6   document.body.addEventListener('mouseup', function(){
   7     dragging = null;
   8   });
   9
  10   document.body.addEventListener('mousemove', function(e){
  11     if (dragging){
  12       dragging.style.top = e.clientY + 'px';
  13       dragging.style.left = e.clientX + 'px';
  14
  15       Tether.position()
  16     }
  17   });
  18
  19   document.body.addEventListener('mousedown', function(e){
  20     if (e.target.getAttribute('data-index'))
  21       dragging = e.target;
  22   })
  23
  24   var count = 60;
  25   var parent = null;
  26   var dir = 'left';
  27   var first = null;
  28
  29   while (count--){
  30     var el = document.createElement('div');
  31     el.setAttribute('data-index', count);
  32     document.querySelector('.scroll').appendChild(el);
  33
  34     if (!first)
  35       first = el;
  36
  37     if (count % 10 === 0)
  38       dir = dir == 'right' ? 'left' : 'right';
  39
  40     if (parent){
  41       tethers.push(new Tether({
  42         element: el,
  43         target: parent,
  44         attachment: 'middle ' + dir,
  45         targetOffset: (dir == 'left' ? '10px 10px' : '10px -10px')
  46       }));
  47
  48     }
  49
  50     parent = el;
  51   }
  52
  53   initAnim(first);
  54 });
  55
  56 function initAnim(el){
  57   var start = performance.now()
  58   var last = 0;
  59   var lastTop = 0;
  60   var tick = function(){
  61     var diff = performance.now() - last;
  62
  63     if (!last || diff > 50){
  64       last = performance.now();
  65
  66       var nextTop = 50 * Math.sin((last - start) / 1000);
  67
  68       var curTop = parseFloat(el.style.top || 0);
  69       var topChange = nextTop - lastTop;
  70       lastTop = nextTop;
  71
  72       var top = curTop + topChange;
  73
  74       el.style.top = top + 'px';
  75
  76       Tether.position();
  77     }
  78
  79     requestAnimationFrame(tick);
  80   };
  81
  82   tick();
  83 }