Swap two Framer layers of different heights and reposition parent layers

swapLayersAndRepositionElements.coffee

# 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)