Release 1.2.0

Author: simplesmiler

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.2.0] - 2016-11-24
+
+### Changed
+- Away callback may not be triggered until the end of the initial macrotask (fixes #8)
+
 ## [1.1.5] - 2016-09-30
 
 Skipped 1.1.4 due to publising mistake
@@ -64,3 +69,4 @@ Initial release
 [1.1.2]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.1...1.1.2
 [1.1.3]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.2...1.1.3
 [1.1.5]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.3...1.1.5
+[1.2.0]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.5...1.2.0

README.md

@@ -26,9 +26,9 @@ $ npm install vue-clickaway --save
 From CDN:
 
 ``` html
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.1.5/dist/vue-clickaway.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.2.0/dist/vue-clickaway.js"></script>
 <!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.1.5/dist/vue-clickaway.min.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.2.0/dist/vue-clickaway.min.js"></script>
 ```
 
 ## Usage

dist/vue-clickaway.common.js

@@ -3,7 +3,7 @@
 var Vue = require('vue');
 Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-var version = '1.1.5';
+var version = '1.2.0';
 
 var compatible = (/^1\./).test(Vue.version);
 if (!compatible) {
@@ -15,6 +15,22 @@ var directive = {
   acceptStatement: true,
   priority: 700,
 
+  bind: function() {
+    var self = this;
+
+    // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
+    //        in macrotasks. This causes the listener to be set up before
+    //        the "origin" click event (the event that lead to the binding of
+    //        the directive) arrives at the document root. To work around that,
+    //        we ignore events until the end of the "initial" macrotask.
+    // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+    // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
+    self.initialMacrotaskEnded = false;
+    setTimeout(function() {
+      self.initialMacrotaskEnded = true;
+    });
+  },
+
   update: function(handler) {
     if (typeof handler !== 'function') {
       if (process.env.NODE_ENV !== 'production') {
@@ -29,13 +45,14 @@ var directive = {
 
     this.reset();
 
+    var self = this;
     var el = this.el;
     var scope = this._scope || this.vm;
 
     this.handler = function(ev) {
       // @NOTE: IE 5.0+
       // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (!el.contains(ev.target)) {
+      if (self.initialMacrotaskEnded && !el.contains(ev.target)) {
         scope.$event = ev;
         var res = handler(ev);
         scope.$event = null;

dist/vue-clickaway.js

@@ -2,7 +2,7 @@
 
   Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-  var version = '1.1.5';
+  var version = '1.2.0';
 
   var compatible = (/^1\./).test(Vue.version);
   if (!compatible) {
@@ -14,6 +14,22 @@
     acceptStatement: true,
     priority: 700,
 
+    bind: function() {
+      var self = this;
+
+      // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
+      //        in macrotasks. This causes the listener to be set up before
+      //        the "origin" click event (the event that lead to the binding of
+      //        the directive) arrives at the document root. To work around that,
+      //        we ignore events until the end of the "initial" macrotask.
+      // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+      // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
+      self.initialMacrotaskEnded = false;
+      setTimeout(function() {
+        self.initialMacrotaskEnded = true;
+      });
+    },
+
     update: function(handler) {
       if (typeof handler !== 'function') {
         if ('development' !== 'production') {
@@ -28,13 +44,14 @@
 
       this.reset();
 
+      var self = this;
       var el = this.el;
       var scope = this._scope || this.vm;
 
       this.handler = function(ev) {
         // @NOTE: IE 5.0+
         // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-        if (!el.contains(ev.target)) {
+        if (self.initialMacrotaskEnded && !el.contains(ev.target)) {
           scope.$event = ev;
           var res = handler(ev);
           scope.$event = null;

dist/vue-clickaway.min.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export var version = '1.1.5';
+export var version = '1.2.0';
 
 var compatible = (/^1\./).test(Vue.version);
 if (!compatible) {

index.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-clickaway",
   "description": "Reusable clickaway directive for reusable Vue.js components",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "author": "Denis Karabaza <[email protected]>",
   "browserify": {
     "transform": [