fixed select and scrollbar behavior

w3co · Nov 27, 2014 · 69ccd75 · 69ccd75
1 parent 856e1d5
commit 69ccd75
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 18 deletions.
diff --git a/js/jcf.button.js b/js/jcf.button.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.checkbox.js b/js/jcf.checkbox.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.file.js b/js/jcf.file.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.js b/js/jcf.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function (root, factory) {
 	if (typeof define === 'function' && define.amd) {
@@ -129,8 +129,8 @@
 		// check that mouse event are not simulated by mobile browsers
 		var lastTouch = null;
 		var mouseEventSimulated = function(e) {
-			var dx = Math.abs(e.clientX - lastTouch.x),
-				dy = Math.abs(e.clientY - lastTouch.y),
+			var dx = Math.abs(e.pageX - lastTouch.x),
+				dy = Math.abs(e.pageY - lastTouch.y),
 				rangeDistance = 25;
 
 			if (dx <= rangeDistance && dy <= rangeDistance) {
@@ -141,6 +141,7 @@
 		// normalize event
 		var fixEvent = function(e) {
 			var origEvent = e || window.event,
+				touchEventData = null,
 				targetEventName = eventMap[origEvent.type];
 
 			e = $.event.fix(origEvent);
@@ -156,13 +157,15 @@
 			} else {
 				e.pointerType = origEvent.type.substr(0,5); // "mouse" or "touch" word length
 			}
-			if(!e.pageX || !e.pageY) {
-				e.pageX = (origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent).pageX;
-				e.pageY = (origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent).pageY;
+
+			if(!e.pageX && !e.pageY) {
+				touchEventData = origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent;
+				e.pageX = touchEventData.pageX;
+				e.pageY = touchEventData.pageY;
 			}
 
-			if(origEvent.type === 'touchend' && origEvent.changedTouches[0]) {
-				lastTouch = {x: origEvent.changedTouches[0].clientX, y: origEvent.changedTouches[0].clientY};
+			if(origEvent.type === 'touchend') {
+				lastTouch = {x: e.pageX, y: e.pageY};
 			}
 			if(e.pointerType === 'mouse' && lastTouch && mouseEventSimulated(e)) {
 				return;

diff --git a/js/jcf.radio.js b/js/jcf.radio.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';

diff --git a/js/jcf.scrollable.js b/js/jcf.scrollable.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';
@@ -94,10 +94,31 @@
 			}
 		},
 		onMoveBody: function(e) {
+			var targetScrollTop,
+				targetScrollLeft,
+				verticalScrollAllowed = this.verticalScrollActive,
+				horizontalScrollAllowed = this.horizontalScrollActive;
+
 			if(e.pointerType === 'touch') {
-				e.preventDefault();
-				this.realElement.scrollLeft(this.touchData.scrollLeft - e.pageX + this.touchData.left);
-				this.realElement.scrollTop(this.touchData.scrollTop - e.pageY + this.touchData.top);
+				targetScrollTop = this.touchData.scrollTop - e.pageY + this.touchData.top;
+				targetScrollLeft = this.touchData.scrollLeft - e.pageX + this.touchData.left;
+
+				// check that scrolling is ended and release outer scrolling
+				if(this.verticalScrollActive && (targetScrollTop < 0 || targetScrollTop > this.vBar.maxValue)) {
+					verticalScrollAllowed = false;
+				}
+				if(this.horizontalScrollActive && (targetScrollLeft < 0 || targetScrollLeft > this.hBar.maxValue)) {
+					horizontalScrollAllowed = false;
+				}
+
+				this.realElement.scrollTop(targetScrollTop);
+				this.realElement.scrollLeft(targetScrollLeft);
+
+				if(verticalScrollAllowed || horizontalScrollAllowed) {
+					e.preventDefault();
+				} else {
+					this.onReleaseBody(e);
+				}
 			}
 		},
 		onReleaseBody: function(e) {

diff --git a/js/jcf.select.js b/js/jcf.select.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';
@@ -194,6 +194,7 @@
 			}
 
 			// toggle dropdown visibility
+			this.selectOpenedByEvent = e.pointerType;
 			this.toggleDropdown();
 
 			// misc handlers
@@ -350,6 +351,9 @@
 				this.doc.off('jcf-pointerdown', this.onOutsideClick);
 				this.win.off('resize', this.onResize);
 				this.dropActive = false;
+				if(this.selectOpenedByEvent === 'touch') {
+					this.onBlur();
+				}
 			}
 		},
 		toggleDropdown: function() {

diff --git a/js/jcf.textarea.js b/js/jcf.textarea.js
@@ -4,7 +4,7 @@
  * Copyright 2014 PSD2HTML (http://psd2html.com)
  * Released under the MIT license (LICENSE.txt)
  * 
- * Version: 1.0.1
+ * Version: 1.0.2
  */
 ;(function($, window) {
 	'use strict';