diff --git a/js/ui/resizable.js b/js/ui/resizable.js index abe254bb0e5a..eba81530ca47 100644 --- a/js/ui/resizable.js +++ b/js/ui/resizable.js @@ -98,6 +98,7 @@ const Resizable = DOMComponent.inherit({ }, _renderHandles: function() { + this._handles = []; const handles = this.option('handles'); if(handles === 'none') { @@ -114,21 +115,19 @@ const Resizable = DOMComponent.inherit({ inArray('bottom', directions) + 1 && inArray('left', directions) + 1 && this._renderHandle('corner-bottom-left'); inArray('top', directions) + 1 && inArray('right', directions) + 1 && this._renderHandle('corner-top-right'); inArray('top', directions) + 1 && inArray('left', directions) + 1 && this._renderHandle('corner-top-left'); + this._attachEventHandlers(); }, _renderHandle: function(handleName) { - const $element = this.$element(); - const $handle = $('
'); - - $handle + const $handle = $('
') .addClass(RESIZABLE_HANDLE_CLASS) .addClass(RESIZABLE_HANDLE_CLASS + '-' + handleName) - .appendTo($element); + .appendTo(this.$element()); - this._attachEventHandlers($handle); + this._handles.push($handle); }, - _attachEventHandlers: function($handle) { + _attachEventHandlers: function() { if(this.option('disabled')) { return; } @@ -138,12 +137,24 @@ const Resizable = DOMComponent.inherit({ handlers[DRAGSTART_EVENT_NAME] = this._dragHandler.bind(this); handlers[DRAGSTART_END_EVENT_NAME] = this._dragEndHandler.bind(this); - eventsEngine.on($handle, handlers, { - direction: 'both', - immediate: true + this._handles.forEach(function(handleElement) { + eventsEngine.on(handleElement, handlers, { + direction: 'both', + immediate: true + }); + }); + }, + + _detachEventHandlers: function() { + this._handles.forEach(function(handleElement) { + eventsEngine.off(handleElement); }); }, + _toggleEventHandlers: function(shouldAttachEvents) { + shouldAttachEvents ? this._attachEventHandlers() : this._detachEventHandlers(); + }, + _dragStartHandler: function(e) { const $element = this.$element(); if($element.is('.dx-state-disabled, .dx-state-disabled *')) { @@ -412,6 +423,9 @@ const Resizable = DOMComponent.inherit({ _optionChanged: function(args) { switch(args.name) { case 'disabled': + this._toggleEventHandlers(!args.value); + this.callBase(args); + break; case 'handles': this._invalidate(); break; diff --git a/testing/tests/DevExpress.ui.widgets/resizable.tests.js b/testing/tests/DevExpress.ui.widgets/resizable.tests.js index 21649668a232..64775c260ccc 100644 --- a/testing/tests/DevExpress.ui.widgets/resizable.tests.js +++ b/testing/tests/DevExpress.ui.widgets/resizable.tests.js @@ -741,6 +741,32 @@ QUnit.module('actions', () => { pointer.dragStart(); }); + QUnit.test('onResizeStart - subscription by "on" method', function(assert) { + assert.expect(3); + + const resizeStartHandler = function(e) { + assert.ok(true, 'onResizeStart action fired'); + + assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument'); + assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument'); + }; + + const resize = () => { + const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right'); + const pointer = pointerMock($handle).start(); + pointer.dragStart(); + }; + + const $resizable = $('#resizable').dxResizable(); + const instance = $resizable.dxResizable('instance'); + + instance.on('resizeStart', resizeStartHandler); + resize(); + + instance.off('resizeStart', resizeStartHandler); + resize(); + }); + QUnit.test('onResize action should be fired during resize', function(assert) { assert.expect(3); @@ -758,6 +784,32 @@ QUnit.module('actions', () => { pointer.dragStart().drag(10, 0); }); + QUnit.test('onResize action - subscription by "on" method', function(assert) { + assert.expect(3); + + const resizeHandler = function(e) { + assert.ok(true, 'onResize action fired'); + + assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument'); + assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument'); + }; + + const resize = () => { + const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right'); + const pointer = pointerMock($handle).start(); + pointer.dragStart().drag(10, 0); + }; + + const $resizable = $('#resizable').dxResizable(); + const instance = $resizable.dxResizable('instance'); + + instance.on('resize', resizeHandler); + resize(); + + instance.off('resize', resizeHandler); + resize(); + }); + QUnit.test('dxresize event should be fired during resize', function(assert) { const $resizable = $('#resizable').dxResizable(); const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right'); const pointer = pointerMock($handle).start(); @@ -813,5 +865,29 @@ QUnit.module('actions', () => { pointer.dragStart().drag(10, 0).dragEnd(); }); + + QUnit.test('onResizeEnd action - subscription by "on" method', function(assert) { + const resizeEndHandler = function(e) { + assert.ok(true, 'onResizeEnd action fired'); + + assert.equal(e.width, $resizable.outerWidth(), 'width passed as event argument'); + assert.equal(e.height, $resizable.outerHeight(), 'height passed as event argument'); + }; + + const resize = () => { + const $handle = $resizable.find('.' + RESIZABLE_HANDLE_CORNER_CLASS + '-bottom-right'); + const pointer = pointerMock($handle).start(); + pointer.dragStart().drag(10, 0).dragEnd(); + }; + + const $resizable = $('#resizable').dxResizable(); + const instance = $resizable.dxResizable('instance'); + + instance.on('resizeEnd', resizeEndHandler); + resize(); + + instance.off('resizeEnd', resizeEndHandler); + resize(); + }); });