Initial commit

README.md

@@ -1,2 +1,42 @@
 # Input-Framer
-Module to easily add input functionality to your prototypes
+
+Framer module to easily turn your designs inputs into real inputs.
+
+![Input Demo](img/input.gif)
+
+## Add it in your Framer Studio project
+
+- Download the project from github.
+- Copy `input.coffee` and `keyboard.png` into `modules/` folder.
+- Import it in Framer Studio by writing: `InputModule = require "input"`.
+
+**Note:** `keyboard.png` is prepared for iPhone 6. If you want to use a different size, replace with your own image.
+
+## How to use it
+
+Export your assets as you would do normally, then create an input object and place it over your designed input. Done!  
+Remember that all parameters are optional.
+
+```coffeescript
+input = new InputModule.Input
+	setup: false # Change to true when positioning the input so you can see it
+	virtualKeyboard: true # Enable or disable virtual keyboard for when viewing on computer
+	text: "ajimix"
+	placeholder: "Username"
+	placeholderColor: "#fff"
+	y: 240
+	x: 90
+	width: 500
+	height: 60
+```
+
+#### Styling your input
+
+```coffeescript
+input.style = 
+	fontSize: "30px"
+	lineHeight: "30px"
+	padding: "10px"
+	color: "white"
+	...
+```

input.coffee

@@ -0,0 +1,59 @@
+exports.keyboardLayer = new Layer
+	x:0, y:Screen.height, width:750, height:432, image:"modules/keyboard.png", visible: false
+
+exports.keyboardLayer.states.add
+	"shown": y: Screen.height - exports.keyboardLayer.height
+
+exports.keyboardLayer.states.animationOptions =
+	curve: "spring(500,50,15)"
+
+class exports.Input extends Layer
+	@define "style",
+		get: -> @input.style
+		set: (value) ->
+			_.extend @input.style, value
+
+	constructor: (options = {}) ->
+		options.setup ?= false
+		options.width ?= Screen.width
+		options.clip ?= false
+		options.height ?= 60
+		options.backgroundColor ?= if options.setup then "rgba(255, 60, 47, .5)" else "transparent"
+		options.fontSize ?= 30
+		options.lineHeight ?= 30
+		options.padding ?= 10
+		options.text ?= ""
+		options.placeholder ?= ""
+		options.virtualKeyboard ?= if Utils.isMobile() then false else true
+
+		super options
+
+		@placeholderColor = options.placeholderColor if options.placeholderColor?
+		@input = document.createElement "input"
+		@input.id = "input-#{_.now()}"
+		@input.style.cssText = "font-size: #{options.fontSize}px; line-height: #{options.lineHeight}px; padding: #{options.padding}px; width: #{options.width}px; height: #{options.height}px; border: none; outline-width: 0; background-image: url(about:blank); background-color: #{options.backgroundColor};"
+		@input.value = options.text
+		@input.placeholder = options.placeholder
+		@_element.appendChild @input
+
+		@backgroundColor = "transparent"
+		@updatePlaceholderColor options.placeholderColor if @placeholderColor
+
+		if !Utils.isMobile() || options.virtualKeyboard
+			exports.keyboardLayer.visible = true
+
+			@input.addEventListener "focus", ->
+				exports.keyboardLayer.bringToFront()
+				exports.keyboardLayer.states.next()
+			@input.addEventListener "blur", ->
+				exports.keyboardLayer.states.switch "default"
+
+	updatePlaceholderColor: (color) ->
+		@placeholderColor = color
+		if @pageStyle?
+			document.head.removeChild @pageStyle
+		@pageStyle = document.createElement "style"
+		@pageStyle.type = "text/css"
+		css = "##{@input.id}::-webkit-input-placeholder { color: #{@placeholderColor}; }"
+		@pageStyle.appendChild(document.createTextNode css)
+		document.head.appendChild @pageStyle