gallery-2012.12.12-21-11 benjamind gallery-scrollfix

build/gallery-scrollfix/gallery-scrollfix-debug.js

@@ -0,0 +1,84 @@
+YUI.add('gallery-scrollfix', function (Y, NAME) {
+
+/**
+ * ScrollFix is a simple Node plugin that prevents mousewheel events inside
+ * the host node from bubbling up to parent nodes if the scroll has reached the
+ * bottom of the host node. This fixes an issue commonly seen in websites where
+ * the user scrolls an inner-scroll area but then the whole page moves as the
+ * scroll reaches the bottom of the inner-scroll area.
+ *
+ * @module gallery-scrollfix
+ **/
+
+/**
+ * <p>
+ * ScrollFix is a Node plugin that can be used to stop scroll events from
+ * escaping an inner scroll area when the scroll reaches the bottom of the area.
+ * </p>
+ * @class NodeScrollFix
+ */
+function NodeScrollFix(/*config*/) {
+	NodeScrollFix.superclass.constructor.apply(this, arguments);
+}
+NodeScrollFix.NAME = 'gallery-scrollfix';
+NodeScrollFix.NS = 'scrollfix';
+NodeScrollFix.ATTRS = {
+	/**
+	 * Defines a node or CSS selector to listen to for the mousewheel
+	 * events. This defaults to the body element of the page and probably
+	 * should not be altered in most cases.
+	 *
+	 * @attribute target
+	 * @default Y.one('body')
+	 * @type string | Y.Node
+	 */
+	target: {
+		value: Y.one('body'),
+		setter: function(value) {
+			if (typeof value === 'string') {
+				return Y.one(value);
+			} else if (value instanceof Y.Node) {
+				return value;
+			}
+			return Y.Attribute.INVALID_VALUE;
+		}
+	}
+};
+Y.extend(NodeScrollFix, Y.Plugin.Base, {
+    initializer: function(/*config*/) {
+		var host = this.get('host');
+
+		host.on('mouseenter',function(/*ev*/) {
+			var target = this.get('target');
+			this.mouseWheelListener = target.on('mousewheel',function(ev) {
+				var scrollNode = host.getDOMNode(),
+					remainingHeight = scrollNode.scrollHeight - scrollNode.scrollTop,
+					clientHeight = scrollNode.clientHeight;
+				// decide if we should prevent scrolling or not
+				if (scrollNode.scrollHeight > clientHeight) {
+					// scrollbars are visible
+					if (ev.wheelDelta > 0 && scrollNode.scrollTop <= 0) {
+						// scrolling up, and already at top
+						ev.preventDefault();
+					} else if (ev.wheelDelta < 0 && remainingHeight <= clientHeight+1) {
+						// scrolling down and near enough the bottom already
+						ev.preventDefault();
+					}
+				}
+			});
+		},this);
+		host.on('mouseleave',function(/*ev*/) {
+			this.mouseWheelListener.detach();
+			this.mouseWheelListener = null;
+		},this);
+	},
+	destructor: function() {
+		if (this.mouseWheelListener) {
+			this.mouseWheelListener.detach();
+			this.mouseWheelListener = null;
+		}
+	}
+});
+Y.namespace('Plugin').NodeScrollFix = NodeScrollFix;
+
+}, 'gallery-2012.12.12-21-11', {"requires": ["event-mouseenter", "plugin"]});

build/gallery-scrollfix/gallery-scrollfix.js

@@ -0,0 +1,84 @@
+YUI.add('gallery-scrollfix', function (Y, NAME) {
+
+/**
+ * ScrollFix is a simple Node plugin that prevents mousewheel events inside
+ * the host node from bubbling up to parent nodes if the scroll has reached the
+ * bottom of the host node. This fixes an issue commonly seen in websites where
+ * the user scrolls an inner-scroll area but then the whole page moves as the
+ * scroll reaches the bottom of the inner-scroll area.
+ *
+ * @module gallery-scrollfix
+ **/
+
+/**
+ * <p>
+ * ScrollFix is a Node plugin that can be used to stop scroll events from
+ * escaping an inner scroll area when the scroll reaches the bottom of the area.
+ * </p>
+ * @class NodeScrollFix
+ */
+function NodeScrollFix(/*config*/) {
+	NodeScrollFix.superclass.constructor.apply(this, arguments);
+}
+NodeScrollFix.NAME = 'gallery-scrollfix';
+NodeScrollFix.NS = 'scrollfix';
+NodeScrollFix.ATTRS = {
+	/**
+	 * Defines a node or CSS selector to listen to for the mousewheel
+	 * events. This defaults to the body element of the page and probably
+	 * should not be altered in most cases.
+	 *
+	 * @attribute target
+	 * @default Y.one('body')
+	 * @type string | Y.Node
+	 */
+	target: {
+		value: Y.one('body'),
+		setter: function(value) {
+			if (typeof value === 'string') {
+				return Y.one(value);
+			} else if (value instanceof Y.Node) {
+				return value;
+			}
+			return Y.Attribute.INVALID_VALUE;
+		}
+	}
+};
+Y.extend(NodeScrollFix, Y.Plugin.Base, {
+    initializer: function(/*config*/) {
+		var host = this.get('host');
+
+		host.on('mouseenter',function(/*ev*/) {
+			var target = this.get('target');
+			this.mouseWheelListener = target.on('mousewheel',function(ev) {
+				var scrollNode = host.getDOMNode(),
+					remainingHeight = scrollNode.scrollHeight - scrollNode.scrollTop,
+					clientHeight = scrollNode.clientHeight;
+				// decide if we should prevent scrolling or not
+				if (scrollNode.scrollHeight > clientHeight) {
+					// scrollbars are visible
+					if (ev.wheelDelta > 0 && scrollNode.scrollTop <= 0) {
+						// scrolling up, and already at top
+						ev.preventDefault();
+					} else if (ev.wheelDelta < 0 && remainingHeight <= clientHeight+1) {
+						// scrolling down and near enough the bottom already
+						ev.preventDefault();
+					}
+				}
+			});
+		},this);
+		host.on('mouseleave',function(/*ev*/) {
+			this.mouseWheelListener.detach();
+			this.mouseWheelListener = null;
+		},this);
+	},
+	destructor: function() {
+		if (this.mouseWheelListener) {
+			this.mouseWheelListener.detach();
+			this.mouseWheelListener = null;
+		}
+	}
+});
+Y.namespace('Plugin').NodeScrollFix = NodeScrollFix;
+
+}, 'gallery-2012.12.12-21-11', {"requires": ["event-mouseenter", "plugin"]});

src/gallery-scrollfix/HISTORY.md

@@ -0,0 +1,3 @@
+gallery-scrollfix
+========
+First commit. Implemented basic suite of tests and the plugin itself.

src/gallery-scrollfix/README.md

@@ -0,0 +1,3 @@
+gallery-scrollfix
+========
+A basic Node plugin to help prevent accidental scrolling of the document when inside an inner-scroll area.

src/gallery-scrollfix/build.json

@@ -0,0 +1,10 @@
+{
+    "name": "gallery-scrollfix",
+    "builds": {
+        "gallery-scrollfix": {
+            "jsfiles": [
+                "js/gallery-scrollfix.js"
+            ]
+        }
+    }
+}

src/gallery-scrollfix/docs/basic-example.mustache

@@ -0,0 +1,53 @@
+<style scoped>
+	body {
+		height: 3000px;
+	}
+	.my-scrollable-div-fixed {
+
+	}
+	.my-scrollable-div {
+		height: 200px;
+		width: 200px;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		display: inline-block;
+	}
+	.my-scrollable-div p {
+		margin: 0px;
+		font-weight: bold;
+		font-size: 108%;
+		padding: 10px;
+		color:white;
+	}
+	.my-scrollable-div-content {
+		height: 500px;
+		width: 200px;
+		background: #87e0fd;
+		background: -moz-linear-gradient(top,  #87e0fd 0%, #05abe0 100%);
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0));
+		background: -webkit-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
+		background: -o-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
+		background: -ms-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
+		background: linear-gradient(to bottom,  #87e0fd 0%,#05abe0 100%);
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
+	}
+</style>
+
+<div class='intro'>
+	<p>The ScrollFix plugin prevents mousewheel events inside an inner-scrollable node from scrolling the parent document.</p>
+</div>
+
+<div class='example yui3-skin-sam'>
+	{{>basic-example-source}}
+</div>
+
+<h2>Basic Usage</h2>
+<p>In this example we just attach a ScrollFix plugin to our scrollable node. Note there are two scrollable divs in the example above, the first does not have the ScrollFix plugin attached, the second does using the code below:</p>
+```
+<script>
+YUI().use('node','gallery-scrollfix', function (Y) {
+	var scroller = Y.one('.my-scrollable-div-fixed');
+	scroller.plug(Y.Plugin.NodeScrollFix);
+});
+</script>
+```