Permalink
Browse files

New syntax for ScrollComponent.wrap

  • Loading branch information...
koenbok committed Sep 8, 2015
1 parent a6eb697 commit ef74161814c1eafc4f878909109f5a7a75dd0f52
Showing with 54 additions and 47 deletions.
  1. +54 −47 framer/Components/ScrollComponent.coffee
@@ -88,6 +88,9 @@ class exports.ScrollComponent extends Layer
@_applyOptionsAndDefaults(options)
@_enableMouseWheelHandling()
if options.hasOwnProperty("wrap")
wrapComponent(@, options.wrap)
calculateContentFrame: ->
# Calculates the size of the content. By default this returns the total
@@ -382,67 +385,71 @@ class exports.ScrollComponent extends Layer
##############################################################
# Convenience function to make a single layer scrollable
@wrap = (layer, options = {correct:true}) ->
@wrap = (layer, options) ->
return wrapComponent(new @(options), layer, options)
# This function wraps the given layer into a scroll or page component. This is
# great for importing from Sketch or Photoshop.
scroll = new @(options)
wrapComponent = (instance, layer, options = {correct:true}) ->
# 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.
# This function wraps the given layer into a scroll or page component. This is
# great for importing from Sketch or Photoshop.
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
scroll = instance
console.log "Corrected the scroll component without sub layers"
# 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.
for propKey in ["frame", "image", "name"]
scroll[propKey] = layer[propKey]
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
# https://github.com/motif/Company/issues/208
console.log "Corrected the scroll component without sub layers"
# 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.
for propKey in ["frame", "image", "name"]
scroll[propKey] = layer[propKey]
# 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.
# https://github.com/motif/Company/issues/208
# You can turn this off by setting correct to false
# 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.
if options.correct is true
# 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.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 options.correct is true
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}"
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}"
# 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
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}"
scroll.superLayer = layer.superLayer
scroll.index = layer.index
layer.destroy()
return scroll
# 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

0 comments on commit ef74161

Please sign in to comment.