Skip to content
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.