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.8KB

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