Merge pull request #73 from anthonykoerber/dev/nonscrollable-update

non scrollable behavior update for multi-panels
MediaMath · Apr 13, 2016 · 3a73b42 · 3a73b42
2 parents b5890e5 + 92faac3
commit 3a73b42
Showing 1 changed file with 60 additions and 24 deletions.
diff --git a/src/shared/behaviors/nonscrollable.html b/src/shared/behaviors/nonscrollable.html
@@ -7,6 +7,35 @@
 
 */
 (function(scope) {
+
+	var _openedInstances = new Set();
+	var __oldBodyPointer;
+
+	function _addOpenedInstance(instance) {
+		_openedInstances.add(instance);
+	}
+
+	function _removeOpenedInstance(instance) {
+		_openedInstances.delete(instance);
+	}
+
+	// There are cases where multiple panels can be opened simultaneously
+	// (a panel layout nested inside another panel for instance).
+	function _checkDocumentBody(state) {
+		var bodyPointer = document.body.style.pointerEvents;
+		if (state === 'opened') {
+			// Only set body on first opened instance
+			if (_openedInstances.size === 1) {
+				__oldBodyPointer = document.body.style.pointerEvents;
+				document.body.style.pointerEvents = 'none';
+			}
+		} else {
+			// only reset body if no opened instance
+			if (_openedInstances.size === 0) {
+				document.body.style.pointerEvents = __oldBodyPointer || '';
+			}
+		}
+	}
 
 	scope.NonScrollable = {
 		properties: {
@@ -16,41 +45,48 @@
 			}
 		},
 
-		observers:["_handleState(state)"],
+		__oldInstancePointer: null,
+
+		observers:['_handleState(state)'],
 
 		detached: function() {
-			this.style.pointerEvents = this.__oldInstancePointer  || "";
-			if(this._target && this._target.style) this._target.style.pointerEvents = this.__oldTargetPointer || "";
-			document.body.style.pointerEvents = this.__oldBodyPointer || "";
+			this._enable();
 		},
 
-		_handleState:function() {
-			if (this.disableScroll) {
-				this.debounce("nonscrollable", this._updateStyles);
+		_disable: function() {
+			_addOpenedInstance(this);
+			_checkDocumentBody('opened');
+
+			this.__oldInstancePointer = this.style.pointerEvents;
+			this.style.pointerEvents = 'all';
+
+			if (this._target && this._target.style) {
+				this.__oldTargetPointer = this._target.style.pointerEvents;
+				this._target.style.pointerEvents = 'all';
 			}
 		},
 
-		_updateStyles: function() {
-			if (this.state === "opened") {
-
-				this.__oldInstancePointer = this.style.pointerEvents;
-				this.style.pointerEvents = "all";
+		_enable: function() {
+			_removeOpenedInstance(this);
+			_checkDocumentBody('closed');
 
-				if(this._target && this._target.style) {
-					this.__oldTargetPointer = this._target.style.pointerEvents;
-					this._target.style.pointerEvents = "all";
-				}
+			this.style.pointerEvents = this.__oldInstancePointer || '';
 
-				this.__oldBodyPointer = document.body.style.pointerEvents;
-				document.body.style.pointerEvents = "none";
-			} else {
-				this.style.pointerEvents = this.__oldInstancePointer  || "";
-				if(this._target && this._target.style) this._target.style.pointerEvents = this.__oldTargetPointer || "";
-				document.body.style.pointerEvents = this.__oldBodyPointer || "";
+			if (this._target && this._target.style) {
+				this._target.style.pointerEvents = this.__oldTargetPointer || '';
 			}
 		},
 
-	};
+		_handleState:function(state) {
+			if (this.disableScroll) {
+				if (state === 'opened') {
+					this._disable();
+				} else {
+					this._enable();
+				}
+			}
+		}
+	}
 
 })(window.StrandTraits = window.StrandTraits || {});
-</script>
+</script>