Permalink
Browse files

Make the ScrollComponent.wrap auto correct

- For a single layer (without sublayers)
- For a missing mask
- For a mask > screen size (if onscreen)

References framer/company#208
  • Loading branch information...
koenbok committed Jun 27, 2015
1 parent d2152f3 commit 194c6c150466db8b4c5fd88448c1e433ca9cb954
Showing with 608 additions and 8 deletions.
  1. +39 −8 framer/Components/ScrollComponent.coffee
  2. BIN test/studio/ScrollComponentCorrectForScreen.framer/Test.sketch
  3. +7 −0 test/studio/ScrollComponentCorrectForScreen.framer/app.coffee
  4. +12 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/coffee-script.js
  5. +10 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/config.json
  6. +126 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/framer.init.js
  7. +1 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/framer.js
  8. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/background.png
  9. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/cursor.png
  10. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/cursor@2x.png
  11. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-120.png
  12. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-152.png
  13. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-76.png
  14. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-arrow.png
  15. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-arrow@2x.png
  16. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-close.png
  17. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-close@2x.png
  18. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-framer.png
  19. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-framer@2x.png
  20. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-share.png
  21. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/icon-share@2x.png
  22. BIN test/studio/ScrollComponentCorrectForScreen.framer/framer/images/value.png
  23. +196 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/mirror.css
  24. +44 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/style.css
  25. +1 −0 test/studio/ScrollComponentCorrectForScreen.framer/framer/version
  26. 0 test/studio/ScrollComponentCorrectForScreen.framer/images/.gitkeep
  27. BIN test/studio/ScrollComponentCorrectForScreen.framer/images/framer-icon.png
  28. BIN test/studio/ScrollComponentCorrectForScreen.framer/images/value.png
  29. BIN ...rectForScreen.framer/imported/Test/images/Layer-Scroller-2D359935-64F3-4912-98C4-FCEDCB619148.png
  30. BIN ...creen.framer/imported/Test/images/Layer-ScrollerNoParent-91226E5B-0E96-4192-ACEF-4C0AB3E20B17.png
  31. +67 −0 test/studio/ScrollComponentCorrectForScreen.framer/imported/Test/layers.json
  32. +68 −0 test/studio/ScrollComponentCorrectForScreen.framer/imported/Test/layers.json.js
  33. +37 −0 test/studio/ScrollComponentCorrectForScreen.framer/index.html
@@ -382,36 +382,67 @@ class exports.ScrollComponent extends Layer
##############################################################
# Convenience function to make a single layer scrollable
@wrap = (layer, options = {}) ->
@wrap = (layer, options = {correct:true}) ->
# This function wraps the given layer into a scroll or page component. This is
# great for importing from Sketch or Photoshop.
scroll = new @(options)
# If we actually forgot to add a sub layer, so for example if
# there is just one layer and we want to make it scrollable we
# correct that here.
if options.correct is true
if layer.subLayers.length is 0
wrapper = new Layer
wrapper.name = "ScrollComponent"
wrapper.frame = layer.frame
layer.superLayer = wrapper
layer.x = layer.y = 0
layer = wrapper
console.log "Corrected the scroll component without sub layers"
for propKey in ["frame", "image", "name"]
scroll[propKey] = layer[propKey]
# https://github.com/motif/Company/issues/208
# This could potentially be smart to avoid an unexpected state if
# you forgot to add a mask in sketch or photoshop and the scroll
# component size becomes the same as it's content.
# https://github.com/motif/Company/issues/208
# This only makes sense if your scroll component is on the screen
# to begin with so we check that first. Because maybe you put it
# offscreen to move it onscreen later.
# screenFrame = scroll.screenFrame
# You can turn this off by setting correct to false
# if screenFrame.y + screenFrame.height > Screen.height
# scroll.height = Screen.height - screenFrame.y
if options.correct is true
# if screenFrame.x + screenFrame.width > Screen.width
# scroll.width = Screen.width - screenFrame.x
screenFrame = scroll.screenFrame
if screenFrame.x < Screen.width
if screenFrame.x + screenFrame.width > Screen.width
scroll.width = Screen.width - screenFrame.x
console.log "Corrected the scroll width to #{scroll.width}"
if screenFrame.y < Screen.height
if screenFrame.y + screenFrame.height > Screen.height
scroll.height = Screen.height - screenFrame.y
console.log "Corrected the scroll height to #{scroll.height}"
# Now copy over all the content to the new scroll component
for subLayer in layer.subLayers
subLayerIndex = subLayer.index
subLayer.superLayer = scroll.content
subLayer.index = subLayerIndex
scroll.superLayer = layer.superLayer
scroll.index = layer.index
layer.destroy()
return scroll
Binary file not shown.
@@ -0,0 +1,7 @@
sketch = Framer.Importer.load "imported/Test"
scrollA = ScrollComponent.wrap(sketch.ScrollerNoParent)
scrollB = ScrollComponent.wrap(sketch.ScrollerNoMask)
scrollA.scrollHorizontal = false
scrollB.scrollHorizontal = false

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,10 @@
{
"device" : "iPhone 5S Space Gray",
"sharedPrototype" : 1,
"deviceOrientation" : 0,
"contentScale" : 1,
"deviceType" : "iphone-6-silver",
"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()
})()
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.

0 comments on commit 194c6c1

Please sign in to comment.