fdds/js/components/slider.js

   1 export class Slider extends HTMLElement {
   2     constructor(sliderWidth, nFrames) {
   3         super();
   4         this.innerHTML = `
   5             <div id='slider' class='slider'>
   6                 <div id='slider-bar' class='slider-bar'></div>
   7                 <div id='slider-head' class='slider-head'></div>
   8             </div>
   9         `;
  10         this.sliderWidth = sliderWidth;
  11         this.nFrames = nFrames;
  12         this.frame = 0;
  13     }
  14
  15     connectedCallback() {
  16         const sliderHead = this.querySelector('#slider-head');
  17         sliderHead.onpointerdown = (e) => {
  18             this.dragSliderHead(e);
  19         }
  20
  21         const sliderBar = this.querySelector('#slider-bar');
  22         sliderBar.onclick = (e) => {
  23             this.clickBar(e);
  24         }
  25
  26         this.querySelector('#slider').style.width = this.sliderWidth + 'px';
  27     }
  28
  29     dragSliderHead(e, originalFrame = this.frame, updateCallback = null, finishedCallback = null) {
  30         const sliderHead = this.querySelector('#slider-head');
  31         const sliderBar = this.querySelector('#slider-bar');
  32
  33         document.body.classList.add('grabbing');
  34         sliderHead.style.cursor = 'grabbing';
  35         sliderBar.style.cursor = 'grabbing';
  36
  37         e = e || window.event;
  38         e.stopPropagation();
  39         e.preventDefault();
  40         // get the mouse cursor position at startup
  41         let pos3 = e.clientX;
  42
  43         this.setSliderHeadDragUpdates(pos3, originalFrame, updateCallback);
  44         this.setEndOfSliderHeadDrag(finishedCallback);
  45     }
  46
  47     setEndOfSliderHeadDrag(finishedCallback = null) {
  48         const sliderHead = this.querySelector('#slider-head');
  49         const sliderBar = this.querySelector('#slider-bar');
  50
  51         document.onpointerup = () => {
  52             if (finishedCallback) {
  53                 finishedCallback();
  54             }
  55             document.body.classList.remove('grabbing');
  56             sliderHead.style.cursor = 'grab';
  57             sliderBar.style.cursor = 'pointer';
  58
  59             document.onpointerup = null;
  60             document.onpointermove = null;
  61         };
  62     }
  63
  64     setSliderHeadDragUpdates(pos3, originalFrame, updateCallback = null) {
  65         document.onpointermove = (e2) => {
  66             e2 = e2 || window.event;
  67             e2.preventDefault();
  68             e2.stopPropagation();
  69             // calculate the new cursor position:
  70             let diff = Math.floor((e2.clientX - pos3) / this.sliderWidth * this.nFrames);
  71
  72             let newFrame = originalFrame + diff;
  73             newFrame = Math.min(newFrame, this.nFrames);
  74             newFrame = Math.max(newFrame, 0);
  75
  76             if (updateCallback == null) {
  77                 this.updateHeadPosition(newFrame);
  78             } else {
  79                 updateCallback(newFrame);
  80             }
  81         }
  82     }
  83
  84     updateHeadPosition(newFrame) {
  85         this.frame = newFrame;
  86
  87         const sliderHead = this.querySelector('#slider-head');
  88         let percentage = newFrame / this.nFrames;
  89         let left = Math.floor(percentage * this.sliderWidth *.95);
  90         sliderHead.style.left = left + 'px';
  91     }
  92
  93     clickBar(e, updateCallback = null) {
  94         const head = this.querySelector('#slider-head').getBoundingClientRect();
  95         let diff = Math.floor((e.clientX - head.left) / this.sliderWidth * this.nFrames);
  96
  97         let newFrame = this.frame + diff;
  98
  99         if (updateCallback == null) {
 100             this.updateHeadPosition(newFrame);
 101         } else {
 102             updateCallback(newFrame);
 103         }
 104     }
 105 }
 106
 107 window.customElements.define('slider-bar', Slider);