Permalink
Browse files

Fixed mobile scrolling

  • Loading branch information...
koenbok committed Sep 25, 2014
1 parent ffd106e commit c1ad81e7bcb3322a5f4ae327790c9890fb6cb883
Showing with 87 additions and 23 deletions.
  1. +63 −4 extras/CactusFramer/static/app.coffee
  2. +13 −8 framer/Config.coffee
  3. +10 −10 framer/Extras/MobileScrollFix.coffee
  4. +1 −1 framer/Framer.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)
@@ -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;
}
"""
@@ -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
@@ -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

0 comments on commit c1ad81e

Please sign in to comment.