├── README.md
└── Comment.coffee


/README.md:
--------------------------------------------------------------------------------
 1 | # Comment for Framer.js
 2 | 
 3 | Framer.js module for making comments in your prototypes
 4 | 
 5 | ![Comment](https://s3.amazonaws.com/f.cl.ly/items/2Y3t3X1w3S2d3X3W270B/commentmodule.gif)
 6 | 
 7 | ## Installation
 8 | 
 9 | 1. Download the Comment.coffee file and drop it inside a Framer Studio project.
10 | 
11 | More info about how to install modules in Framer: [FramerJS Docs - Modules](http://framerjs.com/docs/#modules)
12 | 
13 | 
14 | ## Examples
15 | 
16 | ### Basic usage
17 | 
18 | 	new Comment
19 | 		text: "not decided on this animation"
20 | 		superLayer: featuredScroll.content
21 | 		x: 20
22 | 		y: 20
23 | 
24 | 	new Comment
25 | 		text: "this image is just a placeholder"
26 | 		midX: image.x
27 | 		midY: image.y
28 | 
29 | 	new Comment
30 | 		text: "this feature is not yet implemented in the prototype"
31 | 		midX: page.screenFrame.x
32 | 		midY: page.screenFrame.y
33 | 


--------------------------------------------------------------------------------
/Comment.coffee:
--------------------------------------------------------------------------------
 1 | class module.exports extends Layer
 2 | 	constructor: (options={}) ->
 3 | 		options.name ?= "comment"
 4 | 		options.backgroundColor ?= "#9567D7"
 5 | 		options.width ?= 20
 6 | 		options.height ?= 20
 7 | 		options.borderRadius ?= "50%"
 8 | 		options.clip = false
 9 | 		options.shadowBlur = 4
10 | 		options.shadowY = 2
11 | 		options.shadowColor = "rgba(0,0,0,0.3)"
12 | 		options.borderColor = "white"
13 | 		options.borderWidth = 2
14 | 		super options
15 | 		@pixelAlign()
16 | 		
17 | 		textarea = new Layer
18 | 			name: "textarea"
19 | 			x: @width + 10
20 | 			y: 0
21 | 			backgroundColor: "#151517"
22 | 			shadowBlur: 5
23 | 			shadowY: 2
24 | 			shadowColor: "rgba(0,0,0,0.2)"
25 | 			borderRadius: 3
26 | 			visible: false
27 | 			superLayer: @
28 | 			html: options.text
29 | 		textarea.style =
30 | 			fontSize: "13px"
31 | 			padding: "10px"
32 | 			color: "white"
33 | 			fontFamily: "Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
34 | 			lineHeight: "1.2em"
35 | 		sizeAffectingStyles =
36 | 			fontSize: textarea.style["font-size"]
37 | 			fontWeight: textarea.style["font-weight"]
38 | 			padding: textarea.style["padding"]
39 | 			fontFamily: textarea.style["font-family"]
40 | 			lineHeight: textarea.style["line-height"]
41 | 		constraints = {width: 200} if options.text.length > 35
42 | 		textarea.frame = Utils.textSize options.text, sizeAffectingStyles, constraints
43 | 		@on Events.MouseOver, -> textarea.visible = true
44 | 		@on Events.MouseOut, -> textarea.visible = false


--------------------------------------------------------------------------------