Optimised Event Listener to unbind correct

reinerBa · Mar 22, 2017 · 3deb952 · 3deb952
1 parent 8a90b86
commit 3deb952
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 26 deletions.
diff --git a/Demo.html b/Demo.html
@@ -20,7 +20,8 @@
 </head>
 <body>
     <div id="app">
-         <h1 v-responsiveness="['hidden-all','xl','lg','md']">A Vue.js directive for Responsivity</h1>
+        <section v-if="bindElements">
+		<h1 v-responsiveness="['hidden-all','xl','lg','md']">A Vue.js directive for Responsivity</h1>
         <h2 v-responsiveness="['hidden-xl','hidden-md','hidden-lg']">A Vue.js directive for Responsivity</h2>
 
         <div>
@@ -46,6 +47,7 @@ <h3>Lets set up own break points (smartphone / desktop)</h3>
             <i v-responsiveness="['hidden-all','lg']">Large </i>
             <i v-responsiveness="['hidden-all','xl']">Extra large</i>
             </div>
+		</section>
     </div>
     <h3>Bootstrap 3 breaks</h3>
     <div id="app2">
@@ -59,7 +61,7 @@ <h3>Bootstrap 3 breaks</h3>
         var demoEl=new Vue({
             el: "#app",
             data: {
-                dataTrue:true,  
+                bindElements:true,  
                 respObj: { "xs": false, "hidden-xs": true, "hidden-xl": true },   //only the true counts like here http://vuejs.org/v2/guide/class-and-style.html
                 responsiveMarks$$myMarks:   //setting custom Responsive break marks with the name "myMarks"
                     { smartphone: { show: true, min: -1, max: 767 }, desktop: { show: true, min: 768, max: Infinity } }

diff --git a/Vue-Responsive.js b/Vue-Responsive.js
@@ -6,6 +6,7 @@
 (function(){
 	var vue_responsive={
 		bind: function (el, binding, vnode) {
+			var self=this;
 			//Bootstrap 4 Repsonsive Utils default
 			if (!this.__rPermissions) {
 				this.__rPermissions = {};
@@ -24,7 +25,20 @@
 				validInputs.push(i);
 				validInputs.push("hidden-"+i);
 			} 
-
+
+			//to use just one resize-event-listener whoose functions can easy unbound
+			this.intervalInstId = ++this.intervalInstId || 1;
+			vnode.intervalInstId = String(this.intervalInstId);
+			if(typeof this.resizeListeners === 'undefined'){
+				this.resizeListeners={};
+				function callInstances(){
+					for(var i in self.resizeListeners)
+						if(!isNaN(i))
+							self.resizeListeners[i]();
+				}
+				window.addEventListener("resize", callInstances);		
+			}
+
 			if (el.style.display.length){
 				el.dataset.initialDisplay = el.style.display; //save the user defined css-value
 			}
@@ -80,26 +94,25 @@
 		},
 		inserted: function (el, binding, vnode) { 
 			if (el.dataset.responsives == null) return 0;
-
+			var self=this;
+
 			function checkDisplay() {
 				var myPermissions = JSON.parse(el.dataset.responsives);
 				var curWidth = window.innerWidth;
 				var initial = el.dataset.initialDisplay ? el.dataset.initialDisplay : "block";
-				for (i in this.__rPermissions[binding.arg]) {
-					if (curWidth >= this.__rPermissions[binding.arg][i].min && curWidth <= this.__rPermissions[binding.arg][i].max) {
+				for (i in self.__rPermissions[binding.arg]) {
+					if (curWidth >= self.__rPermissions[binding.arg][i].min && curWidth <= self.__rPermissions[binding.arg][i].max) {
 						el.style.display = myPermissions[i] ? initial :"none";
 						break;
 					}
 				}
 			};
 			checkDisplay();
-
-			var listenerName;
-			window.addEventListener("resize", listenerName = checkDisplay);//arguments.callee(el, binding, vnode, 1) });
-			vnode.respLis = listenerName
+
+			this.resizeListeners[vnode.intervalInstId] = checkDisplay;
 		},
-		unbind: function (el, binding, vnode) {
-			window.removeEventListener("resize", vnode.respLis);
+		unbind: function (el, binding, vnode) { 
+			delete this.resizeListeners[vnode.intervalInstId];
 		}
 	};
 

diff --git a/dist/Vue-Responsive.js b/dist/Vue-Responsive.js
@@ -1,11 +1,12 @@
 /*!
- * Vue-Responsive v0.1.4
+ * Vue-Responsive v0.1.5
  * @Url: https://github.com/reinerBa/Vue-Responsive
  * @License: MIT, Reiner Bamberger
  */
 (function(){
 	var vue_responsive={
 		bind: function (el, binding, vnode) {
+			var self=this;
 			//Bootstrap 4 Repsonsive Utils default
 			if (!this.__rPermissions) {
 				this.__rPermissions = {};
@@ -24,7 +25,20 @@
 				validInputs.push(i);
 				validInputs.push("hidden-"+i);
 			} 
-
+
+			//to use just one resize-event-listener whoose functions can easy unbound
+			this.intervalInstId = ++this.intervalInstId || 1;
+			vnode.intervalInstId = String(this.intervalInstId);
+			if(typeof this.resizeListeners === 'undefined'){
+				this.resizeListeners={};
+				function callInstances(){
+					for(var i in self.resizeListeners)
+						if(!isNaN(i))
+							self.resizeListeners[i]();
+				}
+				window.addEventListener("resize", callInstances);		
+			}
+
 			if (el.style.display.length){
 				el.dataset.initialDisplay = el.style.display; //save the user defined css-value
 			}
@@ -80,26 +94,25 @@
 		},
 		inserted: function (el, binding, vnode) { 
 			if (el.dataset.responsives == null) return 0;
-
+			var self=this;
+
 			function checkDisplay() {
 				var myPermissions = JSON.parse(el.dataset.responsives);
 				var curWidth = window.innerWidth;
 				var initial = el.dataset.initialDisplay ? el.dataset.initialDisplay : "block";
-				for (i in this.__rPermissions[binding.arg]) {
-					if (curWidth >= this.__rPermissions[binding.arg][i].min && curWidth <= this.__rPermissions[binding.arg][i].max) {
+				for (i in self.__rPermissions[binding.arg]) {
+					if (curWidth >= self.__rPermissions[binding.arg][i].min && curWidth <= self.__rPermissions[binding.arg][i].max) {
 						el.style.display = myPermissions[i] ? initial :"none";
 						break;
 					}
 				}
 			};
 			checkDisplay();
-
-			var listenerName;
-			window.addEventListener("resize", listenerName = checkDisplay);//arguments.callee(el, binding, vnode, 1) });
-			vnode.respLis = listenerName
+
+			this.resizeListeners[vnode.intervalInstId] = checkDisplay;
 		},
-		unbind: function (el, binding, vnode) {
-			window.removeEventListener("resize", vnode.respLis);
+		unbind: function (el, binding, vnode) { 
+			delete this.resizeListeners[vnode.intervalInstId];
 		}
 	};
 

diff --git a/dist/Vue-Responsive.min.js b/dist/Vue-Responsive.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-responsive",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A Directive and Mixin for responsive handling with vue.js 2.0",
   "main": "Vue-Responsive.js",
   "scripts": {