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();
+ });
});