| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- /**
- * DevExtreme (viz/range_selector/slider.js)
- * Version: 19.1.16
- * Build date: Tue Oct 18 2022
- *
- * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
- * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
- */
- "use strict";
- var commonModule = require("./common");
- var animationSettings = commonModule.utils.animationSettings;
- var formatValue = commonModule.formatValue;
- var SliderMarker = require("./slider_marker");
- var support = require("../../core/utils/support");
- var SPLITTER_WIDTH = 8;
- var TOUCH_SPLITTER_WIDTH = 20;
- function getSliderTrackerWidth(sliderHandleWidth) {
- return support.touchEvents || support.pointer ? TOUCH_SPLITTER_WIDTH : SPLITTER_WIDTH < sliderHandleWidth ? sliderHandleWidth : SPLITTER_WIDTH
- }
- function Slider(params, index) {
- var that = this;
- that._translator = params.translator;
- that._sliderGroup = params.renderer.g().attr({
- "class": "slider"
- }).append(params.root);
- that._line = params.renderer.path(null, "line").append(that._sliderGroup);
- that._marker = new SliderMarker(params.renderer, that._sliderGroup, 1 === index);
- that._tracker = params.renderer.rect().attr({
- "class": "slider-tracker",
- fill: "#000000",
- opacity: 1e-4
- }).css({
- cursor: "w-resize"
- }).append(params.trackersGroup)
- }
- Slider.prototype = {
- constructor: Slider,
- cancelAnimation: function() {
- this._sliderGroup.stopAnimation();
- this._tracker.stopAnimation()
- },
- applyPosition: function(isAnimated) {
- var that = this;
- var slider = that._sliderGroup;
- var tracker = that._tracker;
- var attrs = {
- translateX: that._position
- };
- that._marker.setPosition(that._position);
- if (isAnimated) {
- slider.animate(attrs, animationSettings);
- tracker.animate(attrs, animationSettings)
- } else {
- slider.attr(attrs);
- tracker.attr(attrs)
- }
- },
- _setValid: function(isValid) {
- this._marker.setValid(isValid);
- this._line.attr({
- stroke: this._colors[Number(isValid)]
- })
- },
- _setText: function(text) {
- this._marker.setText(text)
- },
- update: function(verticalRange, sliderHandleOptions, sliderMarkerOptions) {
- var that = this;
- that._formatOptions = {
- format: sliderMarkerOptions.format,
- customizeText: sliderMarkerOptions.customizeText
- };
- that._marker.applyOptions(sliderMarkerOptions, that._translator.getScreenRange());
- that._colors = [sliderMarkerOptions.invalidRangeColor, sliderHandleOptions.color];
- that._sliderGroup.attr({
- translateY: verticalRange[0]
- });
- that._line.attr({
- "stroke-width": sliderHandleOptions.width,
- stroke: sliderHandleOptions.color,
- "stroke-opacity": sliderHandleOptions.opacity,
- sharp: "h",
- points: [0, 0, 0, verticalRange[1] - verticalRange[0]]
- });
- var trackerWidth = getSliderTrackerWidth(sliderHandleOptions.width);
- that._tracker.attr({
- x: -trackerWidth / 2,
- y: 0,
- width: trackerWidth,
- height: verticalRange[1] - verticalRange[0],
- translateY: verticalRange[0]
- })
- },
- toForeground: function() {
- this._sliderGroup.toForeground()
- },
- getSliderTracker: function() {
- return this._tracker
- },
- getPosition: function() {
- return this._position
- },
- setDisplayValue: function(value) {
- this._value = value;
- this._setText(formatValue(value, this._formatOptions))
- },
- setOverlapped: function(isOverlapped) {
- this._marker.setOverlapped(isOverlapped)
- },
- getValue: function() {
- return this._value
- },
- on: function(event, handler) {
- this._tracker.on(event, handler);
- this._marker.getTracker().on(event, handler)
- },
- getCloudBorder: function() {
- return this._marker.getBorderPosition()
- },
- dispose: function() {
- this._marker.dispose()
- }
- };
- module.exports = Slider;
|