Merge pull request #65 from Waxolunist/wysihtml5

---

I restructured the tests for events slightly.

The tests fail at the moment. So maybe you merge them in and ignore them for the moment.

There are multiple errors:

* The event object is not an argument of the callback.
* Firing a drop event results in a paste event.

I fire the events twice. Once with happen.js and once with vanilla js to show that not happen.js is the cause of this behaviour. I also tried it with the QUnit 1.12 and the old method, but the result is the same.

The reason why the old tests were not showing the wrong behaviour was that paste did fire twice and so the missing execution of the drop callback was not spotted.

Author: Oliver Pulges

src/views/composer.observe.js

@@ -158,29 +158,34 @@
     }
 
     // --------- Focus & blur logic ---------
-    dom.observe(focusBlurElement, "focus", function() {
-      that.parent.fire("focus").fire("focus:composer");
+    dom.observe(focusBlurElement, "focus", function(event) {
+      that.parent.fire("focus", event).fire("focus:composer", event);
 
       // Delay storing of state until all focus handler are fired
       // especially the one which resets the placeholder
       setTimeout(function() { state = that.getValue(false, false); }, 0);
     });
 
-    dom.observe(focusBlurElement, "blur", function() {
+    dom.observe(focusBlurElement, "blur", function(event) {
       if (state !== that.getValue(false, false)) {
-        that.parent.fire("change").fire("change:composer");
+        //create change event if supported (all except IE8)
+        var changeevent = event;
+        if(typeof Object.create == 'function') {
+          changeevent = Object.create(event, { type: { value: 'change' } });
+        }
+        that.parent.fire("change", changeevent).fire("change:composer", changeevent);
       }
-      that.parent.fire("blur").fire("blur:composer");
+      that.parent.fire("blur", event).fire("blur:composer", event);
     });
 
     // --------- Drag & Drop logic ---------
     dom.observe(element, "dragenter", function() {
       that.parent.fire("unset_placeholder");
     });
 
-    dom.observe(element, pasteEvents, function() {
+    dom.observe(element, pasteEvents, function(event) {
       setTimeout(function() {
-        that.parent.fire("paste").fire("paste:composer");
+        that.parent.fire(event.type, event).fire(event.type + ":composer", event);
       }, 0);
     });
 

test/editor_contenteditablemode_test.js

@@ -58,7 +58,7 @@ if (wysihtml5.browser.supported()) {
 
 // EVENTS TESTS 
   asyncTest("Check events", function() {
-    expect(8);
+    expect(17);
 
     var that = this;
     var editor = new wysihtml5.Editor(this.editableArea);
@@ -70,28 +70,32 @@ if (wysihtml5.browser.supported()) {
     editor.on("load", function() {
       var composerElement = that.editableArea;
 
-      editor.on("focus", function() {
+      editor.on("focus", function(event) {
         ok(true, "'focus' event correctly fired");
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'focus', "event is of type 'focus'");
       });
 
-      editor.on("blur", function() {
+      editor.on("blur", function(event) {
         ok(true, "'blur' event correctly fired");
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'blur', "event is of type 'blur'");
       });
 
-      editor.on("change", function() {
+      editor.on("change", function(event) {
         ok(true, "'change' event correctly fired");
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'change', "event is of type 'change'");
       });
 
-      editor.on("paste", function() {
-        ok(true, "'paste' event correctly fired");
-      });
-      
-      editor.on("drop", function() {
-        ok(true, "'drop' event correctly fired");
-      });
 
-      editor.on("custom_event", function() {
+      editor.on("custom_event", function(event) {
         ok(true, "'custom_event' correctly fired");
+        ok(event, "event is defined");
+        ok(event && event.type === 'custom_event', "event is of type 'custom_event'");
       });
 
       happen.once(composerElement, {type: "focus"});
@@ -104,15 +108,83 @@ if (wysihtml5.browser.supported()) {
 
       equal(wysihtml5.dom.getStyle("margin-top").from(composerElement), "5px", ":focus styles are correctly unset");
 
+      
+      editor.fire("custom_event", { type: 'custom_event' });
+      
+      setTimeout(function() { start(); }, 100);
+    });
+  });
+
+  asyncTest("Check events paste", function() {
+    expect(12);
+    
+    var that = this;
+    var editor = new wysihtml5.Editor(this.editableArea);
+    
+    editor.on("load", function() {
+      var composerElement = that.editableArea;
+      
+      editor.on("paste", function(event) {
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'paste', "event is of type 'paste'");
+      });
+
+      //Assure that the event on the dom element works as expected
+      that.editableArea.addEventListener('paste', function (event) {
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'paste', "event is of type 'paste'");
+      });
+
       happen.once(composerElement, {type: "paste"});
-      happen.once(composerElement, {type: "drop"});
+      //Just to show that not happen.js is the source of error
+      var event = new Event('paste');
+      that.editableArea.dispatchEvent(event);
+      //QUnit.triggerEvent(composerElement, 'paste');
 
-      editor.fire("custom_event");
+      setTimeout(function() { start(); }, 100);
+    });
+  });
+
+  asyncTest("Check events drop", function() {
+    expect(12);
+    
+    var that = this;
+    var editor = new wysihtml5.Editor(this.editableArea);
+    
+    editor.on("load", function() {
+      var composerElement = that.editableArea;
 
+      //if changing from drop to paste it works
+      editor.on('drop', function(event) {
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'drop', "event is of type 'drop'");
+      });
+
+      editor.on('paste', function(event) {
+        ok(false, "No 'paste' event was fired.");
+      });
+
+      //Assure that the event on the dom element works as expected
+      that.editableArea.addEventListener('drop', function (event) {
+        ok(event, "event is defined");
+        ok(event instanceof Event, "event is instance of 'Event'");
+        ok(event && event.type === 'drop', "event is of type 'drop'");
+      });
+
+      happen.once(composerElement, {type: "drop"});
+      //Just to show that not happen.js is the source of error
+      var event = new Event('drop');
+      that.editableArea.dispatchEvent(event);
+      //QUnit.triggerEvent(composerElement, 'drop');
+
       setTimeout(function() { start(); }, 100);
     });
   });
 
+
 // Placeholder tests  
   asyncTest("Check placeholder", function() {
     expect(12);