Merge pull request #229 from Starcounter-Jack/no-ie8

Event handling improvements
Starcounter-Jack · Jul 9, 2019 · 996c967 · 996c967
2 parents bbd3002 + 43e72dd
commit 996c967
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 35 deletions.
diff --git a/src/duplex.ts b/src/duplex.ts
@@ -96,20 +96,11 @@ export function observe<T>(obj: Object|Array<T>, callback?: (patches: Operation[
       observer.next = setTimeout(dirtyCheck);
     };
     if (typeof window !== 'undefined') { //not Node
-      if (window.addEventListener) { //standards
-        window.addEventListener('mouseup', fastCheck);
-        window.addEventListener('keyup', fastCheck);
-        window.addEventListener('mousedown', fastCheck);
-        window.addEventListener('keydown', fastCheck);
-        window.addEventListener('change', fastCheck);
-      }
-      else { //IE8
-        (<any>document.documentElement).attachEvent('onmouseup', fastCheck);
-        (<any>document.documentElement).attachEvent('onkeyup', fastCheck);
-        (<any>document.documentElement).attachEvent('onmousedown', fastCheck);
-        (<any>document.documentElement).attachEvent('onkeydown', fastCheck);
-        (<any>document.documentElement).attachEvent('onchange', fastCheck);
-      }
+      window.addEventListener('mouseup', fastCheck);
+      window.addEventListener('keyup', fastCheck);
+      window.addEventListener('mousedown', fastCheck);
+      window.addEventListener('keydown', fastCheck);
+      window.addEventListener('change', fastCheck);
     }
   }
   observer.patches = patches;
@@ -121,18 +112,11 @@ export function observe<T>(obj: Object|Array<T>, callback?: (patches: Operation[
     removeObserverFromMirror(mirror, observer);
 
     if (typeof window !== 'undefined') {
-      if (window.removeEventListener) {
-        window.removeEventListener('mouseup', fastCheck);
-        window.removeEventListener('keyup', fastCheck);
-        window.removeEventListener('mousedown', fastCheck);
-        window.removeEventListener('keydown', fastCheck);
-      }
-      else {
-        (<any>document.documentElement).detachEvent('onmouseup', fastCheck);
-        (<any>document.documentElement).detachEvent('onkeyup', fastCheck);
-        (<any>document.documentElement).detachEvent('onmousedown', fastCheck);
-        (<any>document.documentElement).detachEvent('onkeydown', fastCheck);
-      }
+      window.removeEventListener('mouseup', fastCheck);
+      window.removeEventListener('keyup', fastCheck);
+      window.removeEventListener('mousedown', fastCheck);
+      window.removeEventListener('keydown', fastCheck);
+      window.removeEventListener('change', fastCheck);
     }
   };
 

diff --git a/test/spec/duplexSpec.js b/test/spec/duplexSpec.js
@@ -1330,12 +1330,14 @@ describe('duplex', function() {
       }
     });
 
-    it('should generate patch after `mouseup` event', function(done) {
+    it('should generate patch after `mouseup` event while observing', function(done) {
       obj = {
         lastName: 'Einstein'
       };
       var lastPatches;
+      var callCount = 0;
       var observer = jsonpatch.observe(obj, function(patches) {
+        callCount++;
         lastPatches = patches;
       });
 
@@ -1351,16 +1353,26 @@ describe('duplex', function() {
             value: 'Hawking'
           }
         ]);
-        done();
-      });
+
+        observer.unobserve();
+        obj.lastName = 'Musk';
+        trigger('mouseup');
+
+        setTimeout(function() {
+          expect(callCount).toEqual(1);
+          done();
+        }, 20);
+      }, 20);
     });
 
-    it('should generate patch after `mousedown` event', function(done) {
+    it('should generate patch after `mousedown` event while observing', function(done) {
       obj = {
         lastName: 'Einstein'
       };
       var lastPatches;
+      var callCount = 0;
       var observer = jsonpatch.observe(obj, function(patches) {
+        callCount++;
         lastPatches = patches;
       });
 
@@ -1375,16 +1387,60 @@ describe('duplex', function() {
             value: 'Hawking'
           }
         ]);
-        done();
+
+        observer.unobserve();
+        obj.lastName = 'Musk';
+        trigger('mousedown');
+
+        setTimeout(function() {
+          expect(callCount).toEqual(1);
+          done();
+        }, 20);
       }, 20);
     });
 
-    it('should generate patch after `keydown` event', function(done) {
+    it('should generate patch after `keyup` event while observing', function(done) {
       obj = {
         lastName: 'Einstein'
       };
       var lastPatches;
+      var callCount = 0;
       var observer = jsonpatch.observe(obj, function(patches) {
+        callCount++;
+        lastPatches = patches;
+      });
+
+      obj.lastName = 'Hawking';
+      trigger('keyup');
+
+      setTimeout(function() {
+        expect(lastPatches).toEqual([
+          {
+            op: 'replace',
+            path: '/lastName',
+            value: 'Hawking'
+          }
+        ]);
+
+        observer.unobserve();
+        obj.lastName = 'Musk';
+        trigger('keyup');
+
+        setTimeout(function() {
+          expect(callCount).toEqual(1);
+          done();
+        }, 20);
+      }, 20);
+    });
+
+    it('should generate patch after `keydown` event while observing', function(done) {
+      obj = {
+        lastName: 'Einstein'
+      };
+      var lastPatches;
+      var callCount = 0;
+      var observer = jsonpatch.observe(obj, function(patches) {
+        callCount++;
         lastPatches = patches;
       });
 
@@ -1399,16 +1455,26 @@ describe('duplex', function() {
             value: 'Hawking'
           }
         ]);
-        done();
+
+        observer.unobserve();
+        obj.lastName = 'Musk';
+        trigger('keydown');
+
+        setTimeout(function() {
+          expect(callCount).toEqual(1);
+          done();
+        }, 20);
       }, 20);
     });
 
-    it('should generate patch after `change` event', function(done) {
+    it('should generate patch after `change` event while observing', function(done) {
       obj = {
         lastName: 'Einstein'
       };
       var lastPatches;
+      var callCount = 0;
       var observer = jsonpatch.observe(obj, function(patches) {
+        callCount++;
         lastPatches = patches;
       });
 
@@ -1423,7 +1489,15 @@ describe('duplex', function() {
             value: 'Hawking'
           }
         ]);
-        done();
+
+        observer.unobserve();
+        obj.lastName = 'Musk';
+        trigger('change');
+
+        setTimeout(function() {
+          expect(callCount).toEqual(1);
+          done();
+        }, 20);
       }, 20);
     });
   });