When clicked, a layer can have an alternate image, an alternate background color, or an overlay!

framer-alternate-states.coffee

Layer.define "alternateBackgroundColor",
	exportable: true
	default: ""
	get: ->
		@_getPropertyValue "alternateBackgroundColor"
	set: (alternateBackgroundColor) ->
		return if alternateBackgroundColor == @_getPropertyValue "alternateBackgroundColor"
		@_setPropertyValue "alternateBackgroundColor", alternateBackgroundColor
		
		originalBackgroundColor = @backgroundColor

		@off Events.TouchStart, @alternateBackgroundColorTouchStartEvent if @alternateBackgroundColorTouchStartEvent
		@on Events.TouchStart, =>
			@style["backgroundColor"] = alternateBackgroundColor
		@off Events.TouchEnd, @alternateBackgroundColorTouchEndEvent if @alternateBackgroundColorTouchEndEvent
		@on Events.TouchEnd, =>
			@style["backgroundColor"] = originalBackgroundColor

Layer.define "alternateImage",
	exportable: true
	default: ""
	get: ->
		@_getPropertyValue "alternateImage"
	set: (imageUrl) ->
		currentValue = @_getPropertyValue "alternateImage"
		return @emit "load" if currentValue == imageUrl

		# If the file is local, we want to avoid caching
		if Utils.isLocal() and not imageUrl.match(/^https?:\/\//)
			imageUrl += "?nocache=#{Date.now()}"

		@_setPropertyValue "alternateImage", imageUrl
		
		@off Events.TouchStart, @alternateImageTouchStartEvent if @alternateImageTouchStartEvent
		@on Events.TouchStart, @alternateImageTouchStartEvent = =>
			@style["background-image"] = "url('#{@alternateImage}')"
		@off Events.TouchEnd, @alternateImageTouchEndEvent if @alternateImageTouchEndEvent
		@on Events.TouchEnd, @alternateImageTouchEndEvent = =>
			imageUrl = @image
			if Utils.isLocal() and not imageUrl.match(/^https?:\/\//)
				imageUrl += "?nocache=#{Date.now()}"
			@style["background-image"] = "url('#{imageUrl}')"

Layer.define "clickOverlayColor",
	exportable: true
	default: ""
	get: ->
		@_getPropertyValue "clickOverlayColor"
	set: (color) ->
		return if color == @_getPropertyValue "clickOverlayColor"

		@_setPropertyValue "clickOverlayColor", color

		@off Events.TouchStart, @clickOverlayTouchStartEvent if @clickOverlayTouchStartEvent
		@on Events.TouchStart, @clickOverlayTouchStartEvent = =>
			@hover?.destroy()
			@hover = new Layer x: 0, y: 0, width: @width, height: @height, superLayer: @, opacity: 0.5
			@hover.backgroundColor = color

		@off Events.TouchStart, @clickOverlayTouchEndEvent if @clickOverlayTouchEndEvent
		@on Events.TouchEnd, @clickOverlayTouchEndEvent = =>
			@hover.destroy()