photo-sphere-viewer
Version:
A JavaScript library to display Photo Sphere panoramas
188 lines (166 loc) • 4.16 kB
JavaScript
import { EventEmitter } from 'uevent';
/**
* @summary Helper to make sliders elements
* @memberOf PSV.utils
*/
export class Slider extends EventEmitter {
static VERTICAL = 1;
static HORIZONTAL = 2;
/**
* @type {boolean}
* @readonly
*/
get vertical() {
return this.prop.direction === Slider.VERTICAL;
}
constructor({ psv, container, direction, onUpdate }) {
super();
/**
* @summary Reference to main controller
* @type {PSV.Viewer}
* @readonly
*/
this.psv = psv;
/**
* @member {HTMLElement}
* @readonly
*/
this.container = container;
/**
* @summary Internal properties
* @member {Object}
* @protected
* @property {boolean} mousedown
* @property {number} mediaMinWidth
*/
this.prop = {
onUpdate : onUpdate,
direction: direction,
mousedown: false,
mouseover: false,
};
this.container.addEventListener('click', this);
this.container.addEventListener('mousedown', this);
this.container.addEventListener('mouseenter', this);
this.container.addEventListener('mouseleave', this);
this.container.addEventListener('touchstart', this);
this.container.addEventListener('mousemove', this, true);
this.container.addEventListener('touchmove', this, true);
window.addEventListener('mouseup', this);
window.addEventListener('touchend', this);
}
/**
* @protected
*/
destroy() {
window.removeEventListener('mouseup', this);
window.removeEventListener('touchend', this);
}
/**
* @summary Handles events
* @param {Event} e
* @private
*/
handleEvent(e) {
/* eslint-disable */
switch (e.type) {
// @formatter:off
case 'click': e.stopPropagation(); break;
case 'mousedown': this.__onMouseDown(e); break;
case 'mouseenter': this.__onMouseEnter(e); break;
case 'mouseleave': this.__onMouseLeave(e); break;
case 'touchstart': this.__onTouchStart(e); break;
case 'mousemove': this.__onMouseMove(e); break;
case 'touchmove': this.__onTouchMove(e); break;
case 'mouseup': this.__onMouseUp(e); break;
case 'touchend': this.__onTouchEnd(e); break;
// @formatter:on
}
/* eslint-enable */
}
/**
* @private
*/
__onMouseDown(evt) {
this.prop.mousedown = true;
this.__update(evt, true);
}
/**
* @private
*/
__onMouseEnter(evt) {
this.prop.mouseover = true;
this.__update(evt, true);
}
/**
* @private
*/
__onTouchStart(evt) {
this.prop.mouseover = true;
this.prop.mousedown = true;
this.__update(evt.changedTouches[0], true);
}
/**
* @private
*/
__onMouseMove(evt) {
if (this.prop.mousedown || this.prop.mouseover) {
evt.stopPropagation();
this.__update(evt, true);
}
}
/**
* @private
*/
__onTouchMove(evt) {
if (this.prop.mousedown || this.prop.mouseover) {
evt.stopPropagation();
this.__update(evt.changedTouches[0], true);
}
}
/**
* @private
*/
__onMouseUp(evt) {
if (this.prop.mousedown) {
this.prop.mousedown = false;
this.__update(evt, false);
}
}
/**
* @private
*/
__onMouseLeave(evt) {
if (this.prop.mouseover) {
this.prop.mouseover = false;
this.__update(evt, true);
}
}
/**
* @private
*/
__onTouchEnd(evt) {
if (this.prop.mousedown) {
this.prop.mouseover = false;
this.prop.mousedown = false;
this.__update(evt.changedTouches[0], false);
}
}
/**
* @private
*/
__update(evt, moving) {
const boundingClientRect = this.container.getBoundingClientRect();
const cursor = evt[this.vertical ? 'clientY' : 'clientX'];
const pos = boundingClientRect[this.vertical ? 'bottom' : 'left'];
const size = boundingClientRect[this.vertical ? 'height' : 'width'];
const val = Math.abs((pos - cursor) / size);
this.prop.onUpdate({
value : val,
click : !moving,
mousedown: this.prop.mousedown,
mouseover: this.prop.mouseover,
cursor : evt,
});
}
}