Fixed mobile scrolling

extras/CactusFramer/static/app.coffee

@@ -1,7 +1,66 @@
-layer = new Layer
+document.ontouchmove = (event) ->
+	if event.target is document.body
+		event.preventDefault()
+	#event.preventDefault()
+	#event.stopPropagation()
+	#event.stopImmediatePropagation()
 
-print layer.ignoreEvents
 
-layer.html = "<input type='text'>"
+# checkIfElementShouldScroll = (element) ->
+# 	print typeof element
+# 	return true
 
-print layer.ignoreEvents
+# document.ontouchmove = (e) ->
+
+# 	target = e.currentTarget
+
+# 	while (target)
+
+# 		if checkIfElementShouldScroll(target)
+# 			return
+
+# 		target = target.parentNode
+
+# 	e.preventDefault()
+
+
+ScrollFix = (elem) ->
+
+	# Variables to track inputs
+	startY = undefined
+	startTopScroll = undefined
+	elem = elem or document.querySelector(elem)
+
+	# If there is no element, then do nothing	
+	return  unless elem
+
+	# Handle the start of interactions
+	elem.addEventListener "touchstart", ((event) ->
+		startY = event.touches[0].pageY
+		startTopScroll = elem.scrollTop
+		elem.scrollTop = 1  if startTopScroll <= 0
+		elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1  if startTopScroll + elem.offsetHeight >= elem.scrollHeight
+		return
+	), false
+	return
+
+
+
+
+margin = 300
+
+scrollingLayer = new Layer
+	width:  window.innerWidth - margin
+	height: window.innerHeight - margin
+
+contentLayer = new Layer
+	width:  scrollingLayer.width
+	height: scrollingLayer.height * 3
+	image: "http://goo.gl/gpEHNR"
+	superLayer: scrollingLayer
+
+scrollingLayer.center()
+scrollingLayer.scrollVertical = true
+
+
+ScrollFix(document)

framer/Config.coffee

@@ -1,15 +1,19 @@
 Utils = require "./Utils"
 
 FramerCSS = """
+body {
+	margin: 0;
+}
+
 .framerContext {	
-	position: absolute
-	left: 0
-	top: 0
-	right: 0
-	bottom: 0
-	pointer-events: none
-	overflow: hidden
-	-webkit-perspective: 1000
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	overflow: hidden;
+	-webkit-perspective: 1000;
 }
 
 .framerLayer {
@@ -28,6 +32,7 @@ FramerCSS = """
 .framerLayer option
 {
 	pointer-events: auto;
+	-webkit-user-select: auto;
 }
 
 """

framer/Extras/MobileScrollFix.coffee

@@ -2,6 +2,15 @@ Utils = require "../Utils"
 
 exports.enable = ->
 
+	# If we touch the document directly we want to ignore scroll events
+	document.ontouchmove = (event) ->
+		if event.target is document.body
+			event.preventDefault()
+
+
+	# The second part is that when we scroll a div that is already at it's top 
+	# scroll position the scroll event will propagate up and enable elastic scrolling.
+
 	handleScrollingLayerTouchMove = (event) ->
 		event.stopPropagation()
 
@@ -26,23 +35,14 @@ exports.enable = ->
 			@on "change:scrollVertical", @_updateScrollListeners
 			@_updateScrollListeners()
 
-
 		_updateScrollListeners: =>
+
 			if @scrollVertical is true
 				@on "touchmove", handleScrollingLayerTouchMove
 				@on "touchstart", handleScrollingLayerTouchStart
 			else
 				@off "touchmove", handleScrollingLayerTouchMove
 				@off "touchstart", handleScrollingLayerTouchStart
 
-		__createRootElement: =>
-
-			rootElement = super
-
-			rootElement.addEventListener "touchmove", (event) ->
-				event.preventDefault()
-
-			return rootElement
-
 	# Override the standard window Layer with this patched one
 	window.Layer = window.Framer.Layer = MobileScrollFixLayer

framer/Framer.coffee

@@ -44,7 +44,7 @@ Framer.CurrentContext = Framer.DefaultContext
 require "./Compat"
 
 # Fix for mobile scrolling
-# Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
+Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
 
 # Set the defaults
 Defaults = (require "./Defaults").Defaults