Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
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.
- Loading branch information
Showing
with
512 additions
and 2 deletions.
- +26 −2 framer/Layer.coffee
- +37 −0 test/studio/ScrollComponentBlockClick.framer/app.coffee
- +12 −0 test/studio/ScrollComponentBlockClick.framer/framer/coffee-script.js
- +10 −0 test/studio/ScrollComponentBlockClick.framer/framer/config.json
- +126 −0 test/studio/ScrollComponentBlockClick.framer/framer/framer.init.js
- +1 −0 test/studio/ScrollComponentBlockClick.framer/framer/framer.js
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/background.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/cursor-active.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/cursor-active@2x.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/cursor.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/cursor@2x.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-120.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-152.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-76.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-arrow.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-arrow@2x.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-close.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-close@2x.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-framer.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-framer@2x.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-share.png
- BIN test/studio/ScrollComponentBlockClick.framer/framer/images/icon-share@2x.png
- +196 −0 test/studio/ScrollComponentBlockClick.framer/framer/mirror.css
- +44 −0 test/studio/ScrollComponentBlockClick.framer/framer/style.css
- +1 −0 test/studio/ScrollComponentBlockClick.framer/framer/version
- 0 test/studio/ScrollComponentBlockClick.framer/images/.gitkeep
- BIN test/studio/ScrollComponentBlockClick.framer/images/framer-icon.png
- +37 −0 test/studio/ScrollComponentBlockClick.framer/index.html
- +22 −0 test/tests/LayerTest.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] | ||
|
@@ -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 | ||
} |
@@ -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() | ||
|
||
})() |
@@ -0,0 +1 @@ | ||
../../../../build/framer.debug.js |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.