Create a gist now

Instantly share code, notes, and snippets.

Swap two Framer layers of different heights and reposition parent layers
# Swap two Framer layers of different heights and reposition parent layers
# Special thanks to Niels http://stackoverflow.com/questions/39240373/framerjs-layer-with-dynamic-height-importing-layers-from-sketch (much cleaner than the original solution I wrote)
# Cowritten by Emily (https://github.com/xymostech) & Nick (https://github.com/mrnickbreen) at Khan Academy (https://github.com/khan)
stackLayers = (layerList, amountToReposition = 0) ->
for layer in layerList
layer.y = layer.y + amountToReposition
resizeParents = (layer, heightDifference) ->
if !layer.parent
return
parent = layer.parent
if parent instanceof ScrollComponent
return
parentChildren = parent.children.slice()
parentChildren.sort (a, b) -> a.y - b.y
layerIndex = parentChildren.indexOf layer
layersToReposition = parentChildren.slice(layerIndex + 1)
stackLayers(layersToReposition, heightDifference)
parent.removeChild(layer)
parent.height = parent.height + heightDifference
parent.addChild(layer)
resizeParents(parent, heightDifference)
# This assumes the layers are the exact same width and may have different heights
swapLayersAndRepositionElements = (originalLayer, newLayer,
destroyOriginalLayer = false) ->
heightDifference = newLayer.height - originalLayer.height
resizeParents(originalLayer, heightDifference)
# Add new layer and remove old layer
if (destroyOriginalLayer)
originalLayer.destroy()
else
originalLayer.y = -1000
parentLayer = originalLayer.parent
if parentLayer
parentLayer.removeChild(originalLayer)
parentLayer.addChild(newLayer)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment