PHP Classes

File: toastui/src/js/ui/tools/range.js

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   toastui/src/js/ui/tools/range.js   Download  
File: toastui/src/js/ui/tools/range.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Document Scanner using SANE or eSCL AirPrint
Web interface to scan printed documents
Author: By
Last change:
Date: 4 years ago
Size: 4,988 bytes
 

Contents

Class file image Download
import snippet from 'tui-code-snippet'; import {toInteger} from '../../util'; /** * Range control class * @class * @ignore */ class Range { constructor(rangeElement, options = {}) { this._value = options.value || 0; this.rangeElement = rangeElement; this._drawRangeElement(); this.rangeWidth = toInteger(window.getComputedStyle(rangeElement, null).width) - 12; this._min = options.min || 0; this._max = options.max || 100; this._absMax = (this._min * -1) + this._max; this.realTimeEvent = options.realTimeEvent || false; this._addClickEvent(); this._addDragEvent(); this.value = options.value; this.trigger('change'); } /** * Set range max value and re position cursor * @param {number} maxValue - max value */ set max(maxValue) { this._max = maxValue; this._absMax = (this._min * -1) + this._max; this.value = this._value; } get max() { return this._max; } /** * Get range value * @returns {Number} range value */ get value() { return this._value; } /** * Set range value * @param {Number} value range value * @param {Boolean} fire whether fire custom event or not */ set value(value) { const absValue = value - this._min; let leftPosition = (absValue * this.rangeWidth) / this._absMax; if (this.rangeWidth < leftPosition) { leftPosition = this.rangeWidth; } this.pointer.style.left = `${leftPosition}px`; this.subbar.style.right = `${this.rangeWidth - leftPosition}px`; this._value = value; } /** * event tirigger * @param {string} type - type */ trigger(type) { this.fire(type, this._value); } /** * Make range element * @private */ _drawRangeElement() { this.rangeElement.classList.add('tui-image-editor-range'); this.bar = document.createElement('div'); this.bar.className = 'tui-image-editor-virtual-range-bar'; this.subbar = document.createElement('div'); this.subbar.className = 'tui-image-editor-virtual-range-subbar'; this.pointer = document.createElement('div'); this.pointer.className = 'tui-image-editor-virtual-range-pointer'; this.bar.appendChild(this.subbar); this.bar.appendChild(this.pointer); this.rangeElement.appendChild(this.bar); } /** * Add Range click event * @private */ _addClickEvent() { this.rangeElement.addEventListener('click', event => { event.stopPropagation(); if (event.target.className !== 'tui-image-editor-range') { return; } const touchPx = event.offsetX; const ratio = touchPx / this.rangeWidth; const value = (this._absMax * ratio) + this._min; this.pointer.style.left = `${ratio * this.rangeWidth}px`; this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`; this._value = value; this.fire('change', value); }); } /** * Add Range drag event * @private */ _addDragEvent() { this.pointer.addEventListener('mousedown', event => { this.firstPosition = event.screenX; this.firstLeft = toInteger(this.pointer.style.left) || 0; this.dragEventHandler = { changeAngle: this._changeAngle.bind(this), stopChangingAngle: this._stopChangingAngle.bind(this) }; document.addEventListener('mousemove', this.dragEventHandler.changeAngle); document.addEventListener('mouseup', this.dragEventHandler.stopChangingAngle); }); } /** * change angle event * @param {object} event - change event * @private */ _changeAngle(event) { const changePosition = event.screenX; const diffPosition = changePosition - this.firstPosition; let touchPx = this.firstLeft + diffPosition; touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx; touchPx = touchPx < 0 ? 0 : touchPx; this.pointer.style.left = `${touchPx}px`; this.subbar.style.right = `${this.rangeWidth - touchPx}px`; const ratio = touchPx / this.rangeWidth; const value = (this._absMax * ratio) + this._min; this._value = value; if (this.realTimeEvent) { this.fire('change', value); } } /** * stop change angle event * @private */ _stopChangingAngle() { this.fire('change', this._value); document.removeEventListener('mousemove', this.dragEventHandler.changeAngle); document.removeEventListener('mouseup', this.dragEventHandler.stopChangingAngle); } } snippet.CustomEvents.mixin(Range); export default Range;