Automatically block click events in layers wrapped in moved draggable

The most common use case here is to add a layer to a scroll and add a click handler. When you move around the scroll, you expect the click handler not to trigger. There is a small tolerance built in.

framer/Layer.coffee

@@ -68,6 +68,10 @@ class exports.Layer extends BaseClass
		@_prefer2d = false
		@_alwaysUseImageCache = false

		# Private setting for canceling of click event if wrapped in moved draggable
		@_cancelClickEventInDragSession = true
		@_cancelClickEventInDragSessionTolerance = 4

		# We have to create the element before we set the defaults
		@_createElement()

@@ -827,8 +831,23 @@ class exports.Layer extends BaseClass
	@define "_domEventManager",
		get: -> @_context.domEventManager.wrap(@_element)

	emit: (args...) ->
		super(args..., @)
	emit: (eventName, args...) ->

		# If this layer has a parent draggable view and its position moved
		# while dragging we automatically cancel click events. This is what
		# you expect when you add a button to a scroll content layer.

		if @_cancelClickEventInDragSession
			if eventName is Events.Click
				parentDraggableLayer = @_parentDraggableLayer()
				if parentDraggableLayer
					offset = parentDraggableLayer.draggable.offset
					return if Math.abs(0 - offset.x) > @_cancelClickEventInDragSessionTolerance
					return if Math.abs(0 - offset.y) > @_cancelClickEventInDragSessionTolerance

		# Always scope the event this to the layer and pass the layer as
		# last argument for every event.
		super(eventName, args..., @)

	once: (eventName, listener) =>
		super(eventName, listener)
@@ -861,6 +880,11 @@ class exports.Layer extends BaseClass
		if not @listeners(eventName).length
			@_domEventManager.removeAllListeners(eventName)

	_parentDraggableLayer: ->
		for layer in @superLayers()
			return layer if layer._draggable?.enabled
		return null 

	on: @::addListener
	off: @::removeListener

test/studio/ScrollComponentBlockClick.framer/app.coffee

@@ -0,0 +1,37 @@
scroll = new ScrollComponent
scroll.size = Screen.size
scroll.scrollHorizontal = false
scroll.backgroundColor = null

rows = 40

gutter = 8
width  = scroll.width
height = 200

for rowIndex in [0..rows-1]
		
	cellLayer = new Layer
		width:  width
		height: height
		y: rowIndex * (height + gutter)
		backgroundColor: Utils.randomColor(.5)
		superLayer: scroll.content

	Utils.labelLayer cellLayer, rowIndex
	
	
eventKeys = [
	"Move", 
	"ScrollStart", 
	"ScrollMove", 
	"ScrollEnd", 
	"ScrollAnimationDidStart", 
	"ScrollAnimationDidEnd", 
]

_.map eventKeys, (eventKey) ->
	print eventKey
	scroll.on Events[eventKey], ->
		print eventKey, Events[eventKey]
	

test/studio/ScrollComponentBlockClick.framer/framer/config.json

@@ -0,0 +1,10 @@
{
  "device" : "iPhone 5S Space Gray",
  "sharedPrototype" : 1,
  "deviceOrientation" : 0,
  "contentScale" : 1,
  "deviceType" : "fullscreen",
  "updateDelay" : 0.3,
  "deviceScale" : -1,
  "delay" : 0.3
}

test/studio/ScrollComponentBlockClick.framer/framer/framer.init.js

@@ -0,0 +1,126 @@
(function() {

function isFileLoadingAllowed() {
	return (window.location.protocol.indexOf("file") == -1)
}

function isHomeScreened() {
	return ("standalone" in window.navigator) && window.navigator.standalone == true
}

function isCompatibleBrowser() {
	return Utils.isWebKit()
}

var alertNode;

function dismissAlert() {
	alertNode.parentElement.removeChild(alertNode)
	loadProject()
}

function showAlert(html) {

	alertNode = document.createElement("div")

	alertNode.classList.add("framerAlertBackground")
	alertNode.innerHTML = html

	document.addEventListener("DOMContentLoaded", function(event) {
		document.body.appendChild(alertNode)
	})

	window.dismissAlert = dismissAlert;
}

function showBrowserAlert() {
	var html = ""
	html += "<div class='framerAlert'>"
	html += "<strong>Error: Not A WebKit Browser</strong>"
	html += "Your browser is not supported. <br> Please use Safari or Chrome.<br>"
	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
	html += "</div>"

	showAlert(html)
}

function showFileLoadingAlert() {
	var html = ""
	html += "<div class='framerAlert'>"
	html += "<strong>Error: Local File Restrictions</strong>"
	html += "Preview this prototype with Framer Mirror or learn more about "
	html += "<a href='https://github.com/koenbok/Framer/wiki/LocalLoading'>file restrictions</a>.<br>"
	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
	html += "</div>"

	showAlert(html)
}

function showHomeScreenAlert() {

	link = document.createElement("link");
	link.href = "framer/mirror.css"
	link.type = "text/css"
	link.rel = "stylesheet"
	link.media = "screen"

	document.addEventListener("DOMContentLoaded", function(event) {
		document.getElementsByTagName("head")[0].appendChild(link)
	})

	var html = ""
	html += "<figure class='icon-close' href='javascript:void(0)' onclick='dismissAlert();'></figure>"
	html += "<section class='wrapper'>"
	html += "<figure class='icon-framer'></figure><h1>Install Prototype</h1>"
	html += "<p>Tap <div class='share'><figure class='icon-share'></figure> Share</div>, then choose 'Add to Home Screen'</p> "
	html += "<section class='arrow'><figure class='icon-arrow'></figure></section>"
	html += "</section>"

	showAlert(html)
}

function loadProject() {
	CoffeeScript.load("app.coffee")
}

function setDefaultPageTitle() {
	// If no title was set we set it to the project folder name so
	// you get a nice name on iOS if you bookmark to desktop.
	document.addEventListener("DOMContentLoaded", function() {
		if (document.title == "") {
			if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) {
				document.title = window.FramerStudioInfo.documentTitle
			} else {
				document.title = window.location.pathname.replace(/\//g, "")
			}
		}
	})
}

function init() {

	if (Utils.isFramerStudio()) {
		return
	}

	setDefaultPageTitle()

	if (!isCompatibleBrowser()) {
		return showBrowserAlert()
	}

	if (!isFileLoadingAllowed()) {
		return showFileLoadingAlert()
	}

	// if (Utils.isMobile() && !isHomeScreened()) {
	// 	return showHomeScreenAlert()
	// }

	loadProject()

}

init()

})()

test/studio/ScrollComponentBlockClick.framer/framer/framer.js

@@ -0,0 +1 @@
../../../../build/framer.debug.js