--- /dev/null
+
+/*
+ *
+ * Copyright 2016 RIFT.IO Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+/**
+ * https://github.com/larsmaultsby/react-rangeslider
+ *
+ *
+ * Forked from: https://github.com/whoisandie/react-rangeslider
+ *
+ *
+ The MIT License (MIT)
+
+ Copyright (c) 2015 Bhargav Anand
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ *
+ */
+
+import React, { PropTypes, Component, findDOMNode } from 'react';
+import joinClasses from 'react/lib/joinClasses';
+
+function capitalize(str) {
+ return str.charAt(0).toUpperCase() + str.substr(1);
+}
+
+function maxmin(pos, min, max) {
+ if (pos < min) { return min; }
+ if (pos > max) { return max; }
+ return pos;
+}
+
+const constants = {
+ orientation: {
+ horizontal: {
+ dimension: 'width',
+ direction: 'left',
+ coordinate: 'x',
+ },
+ vertical: {
+ dimension: 'height',
+ direction: 'top',
+ coordinate: 'y',
+ }
+ }
+};
+
+class Slider extends Component {
+ static propTypes = {
+ min: PropTypes.number,
+ max: PropTypes.number,
+ step: PropTypes.number,
+ value: PropTypes.number,
+ orientation: PropTypes.string,
+ onChange: PropTypes.func,
+ className: PropTypes.string,
+ }
+
+ static defaultProps = {
+ min: 0,
+ max: 100,
+ step: 1,
+ value: 0,
+ orientation: 'horizontal',
+ }
+
+ state = {
+ limit: 0,
+ grab: 0
+ }
+
+ // Add window resize event listener here
+ componentDidMount() {
+ this.calculateDimensions();
+ window.addEventListener('resize', this.calculateDimensions);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.calculateDimensions);
+ }
+
+ handleSliderMouseDown = (e) => {
+ let value, { onChange } = this.props;
+ if (!onChange) return;
+ value = this.position(e);
+ onChange && onChange(value);
+ }
+
+ handleKnobMouseDown = () => {
+ document.addEventListener('mousemove', this.handleDrag);
+ document.addEventListener('mouseup', this.handleDragEnd);
+ }
+
+ handleDrag = (e) => {
+ let value, { onChange } = this.props;
+ if (!onChange) return;
+ value = this.position(e);
+ onChange && onChange(value);
+ }
+
+ handleDragEnd = () => {
+ document.removeEventListener('mousemove', this.handleDrag);
+ document.removeEventListener('mouseup', this.handleDragEnd);
+ }
+
+ handleNoop = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ calculateDimensions = () => {
+ let { orientation } = this.props;
+ let dimension = capitalize(constants.orientation[orientation].dimension);
+ const sliderPos = findDOMNode(this.refs.slider)['offset' + dimension];
+ const handlePos = findDOMNode(this.refs.handle)['offset' + dimension]
+ this.setState({
+ limit: sliderPos - handlePos,
+ grab: handlePos / 2,
+ });
+ }
+ getPositionFromValue = (value) => {
+ let percentage, pos;
+ let { limit } = this.state;
+ let { min, max } = this.props;
+ percentage = (value - min) / (max - min);
+ pos = Math.round(percentage * limit);
+
+ return pos;
+ }
+
+ getValueFromPosition = (pos) => {
+ let percentage, value;
+ let { limit } = this.state;
+ let { orientation, min, max, step } = this.props;
+ percentage = (maxmin(pos, 0, limit) / (limit || 1));
+
+ if (orientation === 'horizontal') {
+ value = step * Math.round(percentage * (max - min) / step) + min;
+ } else {
+ value = max - (step * Math.round(percentage * (max - min) / step) + min);
+ }
+
+ return value;
+ }
+
+ position = (e) => {
+ let pos, value, { grab } = this.state;
+ let { orientation } = this.props;
+ const node = findDOMNode(this.refs.slider);
+ const coordinateStyle = constants.orientation[orientation].coordinate;
+ const directionStyle = constants.orientation[orientation].direction;
+ const coordinate = e['client' + capitalize(coordinateStyle)];
+ const direction = node.getBoundingClientRect()[directionStyle];
+
+ pos = coordinate - direction - grab;
+ value = this.getValueFromPosition(pos);
+
+ return value;
+ }
+
+ coordinates = (pos) => {
+ let value, fillPos, handlePos;
+ let { limit, grab } = this.state;
+ let { orientation } = this.props;
+ value = this.getValueFromPosition(pos);
+ handlePos = this.getPositionFromValue(value);
+
+ if (orientation === 'horizontal') {
+ fillPos = handlePos + grab;
+ } else {
+ fillPos = limit - handlePos + grab;
+ }
+
+ return {
+ fill: fillPos,
+ handle: handlePos,
+ };
+ }
+
+ render() {
+ let dimension, direction, position, coords, fillStyle, handleStyle, displayValue;
+ let { value, orientation, className } = this.props;
+
+ dimension = constants.orientation[orientation].dimension;
+ direction = constants.orientation[orientation].direction;
+
+ position = this.getPositionFromValue(value);
+ coords = this.coordinates(position);
+
+ fillStyle = {[dimension]: `${coords.fill}px`};
+ handleStyle = {[direction]: `${coords.handle}px`};
+
+ if(this.props.displayValue) {
+ displayValue = <div>{this.props.value}</div>;
+ }
+
+ return (
+ <div
+ ref="slider"
+ className={joinClasses('rangeslider ', 'rangeslider-' + orientation, className)}
+ onMouseDown={this.handleSliderMouseDown}
+ onClick={this.handleNoop}
+ style={{display:'flex'}}>
+ <div
+ ref="fill"
+ className="rangeslider__fill"
+ style={fillStyle} />
+ <div
+ ref="handle"
+ className="rangeslider__handle"
+ onMouseDown={this.handleKnobMouseDown}
+ onClick={this.handleNoop}
+ style={handleStyle}>
+ {displayValue}
+ </div>
+ </div>
+ );
+ }
+}
+
+export default Slider;
projects / osm / UI.git / blobdiff