Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VRangeSlider.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. // Styles
  2. import '../../../src/stylus/components/_range-sliders.styl';
  3. // Extensions
  4. import VSlider from '../VSlider';
  5. import { createRange, deepEqual } from '../../util/helpers';
  6. /* @vue/component */
  7. export default {
  8. name: 'v-range-slider',
  9. extends: VSlider,
  10. props: {
  11. value: {
  12. type: Array,
  13. default: function _default() {
  14. return [];
  15. }
  16. }
  17. },
  18. data: function data(vm) {
  19. return {
  20. activeThumb: null,
  21. lazyValue: !vm.value.length ? [0, 0] : vm.value
  22. };
  23. },
  24. computed: {
  25. classes: function classes() {
  26. return Object.assign({}, {
  27. 'v-input--range-slider': true
  28. }, VSlider.options.computed.classes.call(this));
  29. },
  30. internalValue: {
  31. get: function get() {
  32. return this.lazyValue;
  33. },
  34. set: function set(val) {
  35. var _this = this;
  36. var min = this.min,
  37. max = this.max;
  38. // Round value to ensure the
  39. // entire slider range can
  40. // be selected with step
  41. var value = val.map(function (v) {
  42. return _this.roundValue(Math.min(Math.max(v, min), max));
  43. });
  44. // Switch values if range and wrong order
  45. if (value[0] > value[1] || value[1] < value[0]) {
  46. if (this.activeThumb !== null) this.activeThumb = this.activeThumb === 1 ? 0 : 1;
  47. value = [value[1], value[0]];
  48. }
  49. this.lazyValue = value;
  50. if (!deepEqual(value, this.value)) this.$emit('input', value);
  51. this.validate();
  52. }
  53. },
  54. inputWidth: function inputWidth() {
  55. var _this2 = this;
  56. return this.internalValue.map(function (v) {
  57. return (_this2.roundValue(v) - _this2.min) / (_this2.max - _this2.min) * 100;
  58. });
  59. },
  60. isDirty: function isDirty() {
  61. var _this3 = this;
  62. return this.internalValue.some(function (v) {
  63. return v !== _this3.min;
  64. }) || this.alwaysDirty;
  65. },
  66. trackFillStyles: function trackFillStyles() {
  67. var styles = VSlider.options.computed.trackFillStyles.call(this);
  68. var fillPercent = Math.abs(this.inputWidth[0] - this.inputWidth[1]);
  69. styles.width = 'calc(' + fillPercent + '% - ' + this.trackPadding + 'px)';
  70. styles[this.$vuetify.rtl ? 'right' : 'left'] = this.inputWidth[0] + '%';
  71. return styles;
  72. },
  73. trackPadding: function trackPadding() {
  74. if (this.isDirty || this.internalValue[0]) return 0;
  75. return VSlider.options.computed.trackPadding.call(this);
  76. }
  77. },
  78. methods: {
  79. getIndexOfClosestValue: function getIndexOfClosestValue(arr, v) {
  80. if (Math.abs(arr[0] - v) < Math.abs(arr[1] - v)) return 0;else return 1;
  81. },
  82. genInput: function genInput() {
  83. var _this4 = this;
  84. return createRange(2).map(function (i) {
  85. var input = VSlider.options.methods.genInput.call(_this4);
  86. input.data.attrs.value = _this4.internalValue[i];
  87. input.data.on.focus = function (e) {
  88. _this4.activeThumb = i;
  89. VSlider.options.methods.onFocus.call(_this4, e);
  90. };
  91. return input;
  92. });
  93. },
  94. genChildren: function genChildren() {
  95. var _this5 = this;
  96. return [this.genInput(), this.genTrackContainer(), this.genSteps(), createRange(2).map(function (i) {
  97. var value = _this5.internalValue[i];
  98. var onDrag = function onDrag(e) {
  99. _this5.isActive = true;
  100. _this5.activeThumb = i;
  101. _this5.onThumbMouseDown(e);
  102. };
  103. var valueWidth = _this5.inputWidth[i];
  104. var isActive = (_this5.isFocused || _this5.isActive) && _this5.activeThumb === i;
  105. return _this5.genThumbContainer(value, valueWidth, isActive, onDrag);
  106. })];
  107. },
  108. onSliderClick: function onSliderClick(e) {
  109. if (!this.isActive) {
  110. this.isFocused = true;
  111. this.onMouseMove(e, true);
  112. this.$emit('change', this.internalValue);
  113. }
  114. },
  115. onMouseMove: function onMouseMove(e) {
  116. var trackClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  117. var _parseMouseMove = this.parseMouseMove(e),
  118. value = _parseMouseMove.value,
  119. isInsideTrack = _parseMouseMove.isInsideTrack;
  120. if (isInsideTrack) {
  121. if (trackClick) this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value);
  122. this.setInternalValue(value);
  123. }
  124. },
  125. onKeyDown: function onKeyDown(e) {
  126. var value = this.parseKeyDown(e, this.internalValue[this.activeThumb]);
  127. if (value == null) return;
  128. this.setInternalValue(value);
  129. },
  130. setInternalValue: function setInternalValue(value) {
  131. var _this6 = this;
  132. this.internalValue = this.internalValue.map(function (v, i) {
  133. if (i === _this6.activeThumb) return value;else return Number(v);
  134. });
  135. }
  136. }
  137. };
  138. //# sourceMappingURL=VRangeSlider.js.map