Dialog: Use _trigger for drag and resize events instead of executing callbacks directly. Fixed #4629 - Dialog events not being triggered.

tests/unit/dialog/dialog_events.js

@@ -38,14 +38,19 @@ test("open", function() {
 });
 
 test("dragStart", function() {
-	expect(2);
+	expect(7);
 
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
 		dragStart: function(ev, ui) {
 			ok(true, 'dragging fires dragStart callback');
 			equals(this, el[0], "context of callback");
+			equals(ev.type, 'dialogdragStart', 'event type in callback');
+			same(ui, {}, 'ui hash in callback');
 		}
+	}).bind('dialogdragStart', function(ev, ui) {
+		ok(true, 'dragging fires dialogdragStart event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-dialog-titlebar", dlg());
 	drag(handle, 50, 50);
@@ -53,30 +58,44 @@ test("dragStart", function() {
 });
 
 test("drag", function() {
-	var fired = false;
+	expect(7);
+	var hasDragged = false;
 	
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
 		drag: function(ev, ui) {
-			fired = true;
+			if (!hasDragged) {
-			equals(this, el[0], "context of callback");
+				ok(true, 'dragging fires drag callback');
+				equals(this, el[0], "context of callback");
+				equals(ev.type, 'dialogdrag', 'event type in callback');
+				same(ui, {}, 'ui hash in callback');
+				
+				hasDragged = true;
+			}
 		}
+	}).one('dialogdrag', function(ev, ui) {
+		ok(true, 'dragging fires dialogdrag event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-dialog-titlebar", dlg());
 	drag(handle, 50, 50);
-	ok(fired, "drag fired");
 	el.remove();
 });
 
 test("dragStop", function() {
-	expect(2);
+	expect(7);
 
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
+		dragStart: function(ev, ui) {
-		dragStop: function(ev, ui) {
 			ok(true, 'dragging fires dragStop callback');
 			equals(this, el[0], "context of callback");
+			equals(ev.type, 'dialogdragStop', 'event type in callback');
+			same(ui, {}, 'ui hash in callback');
 		}
+	}).bind('dialogdragStop', function(ev, ui) {
+		ok(true, 'dragging fires dialogdragStop event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-dialog-titlebar", dlg());
 	drag(handle, 50, 50);
@@ -84,14 +103,19 @@ test("dragStop", function() {
 });
 
 test("resizeStart", function() {
-	expect(2);
+	expect(7);
 
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
 		resizeStart: function(ev, ui) {
 			ok(true, 'resizing fires resizeStart callback');
 			equals(this, el[0], "context of callback");
+			equals(ev.type, 'dialogresizeStart', 'event type in callback');
+			same(ui, {}, 'ui hash in callback');
 		}
+	}).bind('dialogresizeStart', function(ev, ui) {
+		ok(true, 'resizing fires dialogresizeStart event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-resizable-se", dlg());
 	drag(handle, 50, 50);
@@ -99,30 +123,44 @@ test("resizeStart", function() {
 });
 
 test("resize", function() {
-	var fired = false;
+	expect(7);
+	var hasResized = false;
 
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
 		resize: function(ev, ui) {
-			fired = true;
+			if (!hasResized) {
-			equals(this, el[0], "context of callback");
+				ok(true, 'resizing fires resize callback');
+				equals(this, el[0], "context of callback");
+				equals(ev.type, 'dialogresize', 'event type in callback');
+				same(ui, {}, 'ui hash in callback');
+				
+				hasResized = true;
+			}
 		}
+	}).one('dialogresize', function(ev, ui) {
+		ok(true, 'resizing fires dialogresize event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-resizable-se", dlg());
 	drag(handle, 50, 50);
-	ok(fired, "resize fired");
 	el.remove();
 });
 
 test("resizeStop", function() {
-	expect(2);
+	expect(7);
 
-	el = $("<div></div>");
+	el = $('<div></div>').dialog({
-	el.dialog({
 		resizeStop: function(ev, ui) {
 			ok(true, 'resizing fires resizeStop callback');
 			equals(this, el[0], "context of callback");
+			equals(ev.type, 'dialogresizeStop', 'event type in callback');
+			same(ui, {}, 'ui hash in callback');
 		}
+	}).bind('dialogresizeStop', function(ev, ui) {
+		ok(true, 'resizing fires dialogresizeStop event');
+		equals(this, el[0], 'context of event');
+		same(ui, {}, 'ui hash in event');
 	});
 	var handle = $(".ui-resizable-se", dlg());
 	drag(handle, 50, 50);

ui/ui.dialog.js

@@ -320,17 +320,17 @@ $.widget("ui.dialog", {
 			cancel: '.ui-dialog-content',
 			handle: '.ui-dialog-titlebar',
 			containment: 'document',
-			start: function() {
+			start: function(event) {
 				heightBeforeDrag = options.height;
 				$(this).height($(this).height()).addClass("ui-dialog-dragging");
-				(options.dragStart && options.dragStart.apply(self.element[0], arguments));
+				self._trigger('dragStart', event);
 			},
-			drag: function() {
+			drag: function(event) {
-				(options.drag && options.drag.apply(self.element[0], arguments));
+				self._trigger('drag', event);
 			},
-			stop: function() {
+			stop: function(event) {
 				$(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
-				(options.dragStop && options.dragStop.apply(self.element[0], arguments));
+				self._trigger('dragStop', event);
 				$.ui.dialog.overlay.resize();
 			}
 		});
@@ -351,19 +351,19 @@ $.widget("ui.dialog", {
 			maxHeight: options.maxHeight,
 			minWidth: options.minWidth,
 			minHeight: self._minHeight(),
-			start: function() {
-				$(this).addClass("ui-dialog-resizing");
-				(options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
-			},
-			resize: function() {
-				(options.resize && options.resize.apply(self.element[0], arguments));
-			},
 			handles: resizeHandles,
-			stop: function() {
+			start: function(event) {
+				$(this).addClass("ui-dialog-resizing");
+				self._trigger('resizeStart', event);
+			},
+			resize: function(event) {
+				self._trigger('resize', event);
+			},
+			stop: function(event) {
 				$(this).removeClass("ui-dialog-resizing");
 				options.height = $(this).height();
 				options.width = $(this).width();
-				(options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
+				self._trigger('resizeStop', event);
 				$.ui.dialog.overlay.resize();
 			}
 		})