Skip to content

Instantly share code, notes, and snippets.

@antonkartashov
Forked from jemgold/app.coffee
Created January 3, 2017 04:04
Show Gist options
  • Save antonkartashov/8db50dda13c45394b09b8f3cb6e53708 to your computer and use it in GitHub Desktop.
Save antonkartashov/8db50dda13c45394b09b8f3cb6e53708 to your computer and use it in GitHub Desktop.
class-based Framer prototypes
# 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'
}
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment