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