slider.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /**
  2. * DevExtreme (viz/range_selector/slider.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var commonModule = require("./common");
  11. var animationSettings = commonModule.utils.animationSettings;
  12. var formatValue = commonModule.formatValue;
  13. var SliderMarker = require("./slider_marker");
  14. var support = require("../../core/utils/support");
  15. var SPLITTER_WIDTH = 8;
  16. var TOUCH_SPLITTER_WIDTH = 20;
  17. function getSliderTrackerWidth(sliderHandleWidth) {
  18. return support.touchEvents || support.pointer ? TOUCH_SPLITTER_WIDTH : SPLITTER_WIDTH < sliderHandleWidth ? sliderHandleWidth : SPLITTER_WIDTH
  19. }
  20. function Slider(params, index) {
  21. var that = this;
  22. that._translator = params.translator;
  23. that._sliderGroup = params.renderer.g().attr({
  24. "class": "slider"
  25. }).append(params.root);
  26. that._line = params.renderer.path(null, "line").append(that._sliderGroup);
  27. that._marker = new SliderMarker(params.renderer, that._sliderGroup, 1 === index);
  28. that._tracker = params.renderer.rect().attr({
  29. "class": "slider-tracker",
  30. fill: "#000000",
  31. opacity: 1e-4
  32. }).css({
  33. cursor: "w-resize"
  34. }).append(params.trackersGroup)
  35. }
  36. Slider.prototype = {
  37. constructor: Slider,
  38. cancelAnimation: function() {
  39. this._sliderGroup.stopAnimation();
  40. this._tracker.stopAnimation()
  41. },
  42. applyPosition: function(isAnimated) {
  43. var that = this;
  44. var slider = that._sliderGroup;
  45. var tracker = that._tracker;
  46. var attrs = {
  47. translateX: that._position
  48. };
  49. that._marker.setPosition(that._position);
  50. if (isAnimated) {
  51. slider.animate(attrs, animationSettings);
  52. tracker.animate(attrs, animationSettings)
  53. } else {
  54. slider.attr(attrs);
  55. tracker.attr(attrs)
  56. }
  57. },
  58. _setValid: function(isValid) {
  59. this._marker.setValid(isValid);
  60. this._line.attr({
  61. stroke: this._colors[Number(isValid)]
  62. })
  63. },
  64. _setText: function(text) {
  65. this._marker.setText(text)
  66. },
  67. update: function(verticalRange, sliderHandleOptions, sliderMarkerOptions) {
  68. var that = this;
  69. that._formatOptions = {
  70. format: sliderMarkerOptions.format,
  71. customizeText: sliderMarkerOptions.customizeText
  72. };
  73. that._marker.applyOptions(sliderMarkerOptions, that._translator.getScreenRange());
  74. that._colors = [sliderMarkerOptions.invalidRangeColor, sliderHandleOptions.color];
  75. that._sliderGroup.attr({
  76. translateY: verticalRange[0]
  77. });
  78. that._line.attr({
  79. "stroke-width": sliderHandleOptions.width,
  80. stroke: sliderHandleOptions.color,
  81. "stroke-opacity": sliderHandleOptions.opacity,
  82. sharp: "h",
  83. points: [0, 0, 0, verticalRange[1] - verticalRange[0]]
  84. });
  85. var trackerWidth = getSliderTrackerWidth(sliderHandleOptions.width);
  86. that._tracker.attr({
  87. x: -trackerWidth / 2,
  88. y: 0,
  89. width: trackerWidth,
  90. height: verticalRange[1] - verticalRange[0],
  91. translateY: verticalRange[0]
  92. })
  93. },
  94. toForeground: function() {
  95. this._sliderGroup.toForeground()
  96. },
  97. getSliderTracker: function() {
  98. return this._tracker
  99. },
  100. getPosition: function() {
  101. return this._position
  102. },
  103. setDisplayValue: function(value) {
  104. this._value = value;
  105. this._setText(formatValue(value, this._formatOptions))
  106. },
  107. setOverlapped: function(isOverlapped) {
  108. this._marker.setOverlapped(isOverlapped)
  109. },
  110. getValue: function() {
  111. return this._value
  112. },
  113. on: function(event, handler) {
  114. this._tracker.on(event, handler);
  115. this._marker.getTracker().on(event, handler)
  116. },
  117. getCloudBorder: function() {
  118. return this._marker.getBorderPosition()
  119. },
  120. dispose: function() {
  121. this._marker.dispose()
  122. }
  123. };
  124. module.exports = Slider;