number_box.spin.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. /**
  2. * DevExtreme (ui/number_box/number_box.spin.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 $ = require("../../core/renderer");
  11. var domAdapter = require("../../core/dom_adapter");
  12. var eventsEngine = require("../../events/core/events_engine");
  13. var Widget = require("../widget/ui.widget");
  14. var extend = require("../../core/utils/extend").extend;
  15. var eventUtils = require("../../events/utils");
  16. var pointerEvents = require("../../events/pointer");
  17. var feedbackEvents = require("../../events/core/emitter.feedback");
  18. var holdEvent = require("../../events/hold");
  19. var Deferred = require("../../core/utils/deferred").Deferred;
  20. var SPIN_CLASS = "dx-numberbox-spin";
  21. var SPIN_BUTTON_CLASS = "dx-numberbox-spin-button";
  22. var SPIN_HOLD_DELAY = 100;
  23. var NUMBER_BOX = "dxNumberBox";
  24. var POINTERUP_EVENT_NAME = eventUtils.addNamespace(pointerEvents.up, NUMBER_BOX);
  25. var POINTERCANCEL_EVENT_NAME = eventUtils.addNamespace(pointerEvents.cancel, NUMBER_BOX);
  26. var SpinButton = Widget.inherit({
  27. _getDefaultOptions: function() {
  28. return extend(this.callBase(), {
  29. direction: "up",
  30. onChange: null,
  31. activeStateEnabled: true,
  32. hoverStateEnabled: true
  33. })
  34. },
  35. _initMarkup: function() {
  36. this.callBase();
  37. var direction = SPIN_CLASS + "-" + this.option("direction");
  38. this.$element().addClass(SPIN_BUTTON_CLASS).addClass(direction);
  39. this._spinIcon = $("<div>").addClass(direction + "-icon").appendTo(this.$element())
  40. },
  41. _render: function() {
  42. this.callBase();
  43. var eventName = eventUtils.addNamespace(pointerEvents.down, this.NAME);
  44. var $element = this.$element();
  45. eventsEngine.off($element, eventName);
  46. eventsEngine.on($element, eventName, this._spinDownHandler.bind(this));
  47. this._spinChangeHandler = this._createActionByOption("onChange")
  48. },
  49. _spinDownHandler: function(e) {
  50. e.preventDefault();
  51. this._clearTimer();
  52. eventsEngine.on(this.$element(), holdEvent.name, function() {
  53. this._feedBackDeferred = new Deferred;
  54. feedbackEvents.lock(this._feedBackDeferred);
  55. this._spinChangeHandler({
  56. event: e
  57. });
  58. this._holdTimer = setInterval(this._spinChangeHandler, SPIN_HOLD_DELAY, {
  59. event: e
  60. })
  61. }.bind(this));
  62. var document = domAdapter.getDocument();
  63. eventsEngine.on(document, POINTERUP_EVENT_NAME, this._clearTimer.bind(this));
  64. eventsEngine.on(document, POINTERCANCEL_EVENT_NAME, this._clearTimer.bind(this));
  65. this._spinChangeHandler({
  66. event: e
  67. })
  68. },
  69. _dispose: function() {
  70. this._clearTimer();
  71. this.callBase()
  72. },
  73. _clearTimer: function() {
  74. eventsEngine.off(this.$element(), holdEvent.name);
  75. var document = domAdapter.getDocument();
  76. eventsEngine.off(document, POINTERUP_EVENT_NAME);
  77. eventsEngine.off(document, POINTERCANCEL_EVENT_NAME);
  78. if (this._feedBackDeferred) {
  79. this._feedBackDeferred.resolve()
  80. }
  81. if (this._holdTimer) {
  82. clearInterval(this._holdTimer)
  83. }
  84. },
  85. _optionChanged: function(args) {
  86. switch (args.name) {
  87. case "onChange":
  88. case "direction":
  89. this._invalidate();
  90. break;
  91. default:
  92. this.callBase(args)
  93. }
  94. }
  95. });
  96. module.exports = SpinButton;