class-based Framer prototypes

app.coffee

# An example with classes building components.
# This stuff is a little fiddly to get set up,
# but once it's working it's great - you can just
# add new instances of the components, and each
# components holds references to all of its
# children. You can set defaults & states for each
# component separately.
#
# (try clicking on the post author, and then on each
# of the comments on a post)
#
# lmk if you want more detail or explanation
# <3 @jongold, 30/7/14

Framer.Defaults.Animation =
  curve: "spring"
  curveOptions:
    tension: 600
    friction: 30
    velocity: 0
    tolerance: 0.01

class Feed extends Layer
	constructor: (options = {}) ->
		super options
		@width = Screen.width
		@height = Screen.height
		@backgroundColor = '#e9eaed'
		@items = options.items
		
		@buildItems()
		
	buildItems: ->
		for item, i in @items
			feedItem = new FeedItem
				data: item
				index: i

			@addSubLayer feedItem

class FeedItem extends Layer
	constructor: (options = {}) ->
		super options
		@margin = 10
		@x = 10
		@width = Screen.width - 2 * @margin
		@backgroundColor = '#FFF'
		@style =
			border: '1px solid'
			borderColor: '#e5e6e9 #dfe0e4 #d0d1d5'
			borderRadius: '2px'
		
		@recalculateHeight()
			
		@data = options.data
		@index = options.index
		
		@commentHeight = 25
		@avatarHeight = 40
		@metaHeight = @avatarHeight + 10
		@postHeight = 100 # this should be more dynamic
		@buildUserMeta()
		@buildPost()
		@buildComments()
		
		@states.add
			'shifted':
				y: ->
					@y + 100

		@on Events.Click, (e) =>
			@states.next()
		
	buildUserMeta: ->
		@avatar = new Avatar
			x: @margin
			y: @margin
		@addSubLayer @avatar
		
		@authorName = new Layer
			backgroundColor: 'rgba(0,0,0,0)'
			width: 200
			x: @margin * 2 + @avatarHeight
			y: @margin

		@authorName.style =
				fontSize: '14px'
				color: '#3b5998'
				fontFamily: 'Helvetica'
				fontWeight: 'bold'
				
		@authorName.html = @data.username
		
		@addSubLayer @authorName
		
	buildPost: ->
		text = new Layer
			width: @width - 2 * @margin
			x: @margin
			y: @margin * 2 + @metaHeight
			height: @postHeight
		text.style =
			backgroundColor: 'rgba(0,0,0,0)'
			fontSize: '14px'
			fontFamily: 'Helvetica'
			color: 'rgb(20, 24, 35)'
			lineHeight: '19px'
		text.html = @data.text
			
		@addSubLayer text
		
	buildComments: ->
		@comments = _.map @data.comments, (comment, i) =>
			commentLayer = new Comment
				baseY: @metaHeight + @postHeight + @margin * 3
				width: @width - 2 * @margin
				index: i
				data: comment

			@addSubLayer commentLayer

			commentLayer
		
		@recalculateHeight()
		
	commentHeights: ->
		heights = _.map @comments, (comment) ->
			comment.height

		_.reduce heights, (sum, height) ->
			sum + height
	
	recalculateHeight: ->
		@height = @metaHeight + @postHeight + @commentHeights() + @margin * 4
		@y = @margin + ((@height + @margin) * @index)
			
class Comment extends Layer
	constructor: (options = {}) ->
		options.height ?= 60
		options.x ?= 10
		
		super options
		@index = options.index
		@y = options.baseY + (@index * @height) + 10
		@backgroundColor = 'rgba(0,0,0,0)'
		@data = options.data
		@avatar = new Avatar
		@addSubLayer @avatar
		@text = new Layer
			width: @width - @avatar.width
			x: @avatar.width + 10
			height: @height
			
		@text.style =
			backgroundColor: 'rgba(0,0,0,0)'
			fontSize: '14px'
			fontFamily: 'Helvetica'
			color: 'rgb(20, 24, 35)'
			lineHeight: '19px'
			
		@text.html = "<h4>#{@data.username}</h4>#{@data.text}"
			
		@addSubLayer @text
		@states.add
			'shifted':
				x: 100

		@on Events.Click, (e) =>
			e.stopPropagation()
			@states.next()


class Avatar extends Layer
	constructor: (options = {}) ->
		options.height ?= 40
		options.width ?= 40
		options.src ?= "http://placekitten.com/48"
		super options
		@src = options.src
		@backgroundColor = 'rgba(0,0,0,0)'
		@html = "<img src='#{@src}' />"
		
new Feed
	items: [
		{
			username: 'Chad Lonberger'
			text: 'Is Framerjs suitable for "larger" prototypes? Ideally I want to prototype entire products (or portions of products) to use during customer interviews/usability studies. Any thoughts on this? Thanks in advance.'
			comments: [
				{
					username: "Jon Gold"
					text: "Sure you can!"
				}
				{
					username: 'Hodor'
					text: 'Hodor'
				}
			]
		}
		{
			username: 'Koen Bok'
			text: "We're looking for an experienced developer in Cocoa/Javascript to join our team in Amsterdam and work on next generation creative tools. Mail koen at madebysofa dot com if you are interested."
			comments: [
				{
					username: "Koen Bok"
					text: "Tips are welcome too"
				}
				{
					username: 'Hodor'
					text: 'Hodor'
				}
			]
		}
	]