"
4 |
5 | #screen width vs. size of image width
6 | growthRatio = Screen.width / 732
7 | imageHeight = growthRatio * 432
8 |
9 | exports.keyboardLayer.states =
10 | shown:
11 | y: Screen.height - imageHeight
12 |
13 | exports.keyboardLayer.states.animationOptions =
14 | curve: "spring(500,50,15)"
15 |
16 | class exports.Input extends Layer
17 | @define "style",
18 | get: -> @input.style
19 | set: (value) ->
20 | _.extend @input.style, value
21 |
22 | @define "value",
23 | get: -> @input.value
24 | set: (value) ->
25 | @input.value = value
26 |
27 | constructor: (options = {}) ->
28 | options.setup ?= false
29 | options.width ?= Screen.width
30 | options.clip ?= false
31 | options.height ?= 60
32 | options.backgroundColor ?= if options.setup then "rgba(255, 60, 47, .5)" else "transparent"
33 | options.fontSize ?= 30
34 | options.lineHeight ?= 30
35 | options.padding ?= 10
36 | options.text ?= ""
37 | options.placeholder ?= ""
38 | options.virtualKeyboard ?= if Utils.isMobile() then false else true
39 | options.type ?= "text"
40 | options.goButton ?= false
41 |
42 | super options
43 |
44 | @placeholderColor = options.placeholderColor if options.placeholderColor?
45 | @input = document.createElement "input"
46 | @input.id = "input-#{_.now()}"
47 | @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};"
48 | @input.value = options.text
49 | @input.type = options.type
50 | @input.placeholder = options.placeholder
51 | @form = document.createElement "form"
52 |
53 | if options.goButton
54 | @form.action = "#"
55 | @form.addEventListener "submit", (event) ->
56 | event.preventDefault()
57 |
58 | @form.appendChild @input
59 | @_element.appendChild @form
60 |
61 | @backgroundColor = "transparent"
62 | @updatePlaceholderColor options.placeholderColor if @placeholderColor
63 |
64 | #only show honor virtual keyboard option when not on mobile,
65 | #otherwise ignore
66 | if !Utils.isMobile() && options.virtualKeyboard is true
67 | @input.addEventListener "focus", ->
68 | exports.keyboardLayer.bringToFront()
69 | exports.keyboardLayer.states.next()
70 | @input.addEventListener "blur", ->
71 | exports.keyboardLayer.states.switch "default"
72 |
73 | updatePlaceholderColor: (color) ->
74 | @placeholderColor = color
75 | if @pageStyle?
76 | document.head.removeChild @pageStyle
77 | @pageStyle = document.createElement "style"
78 | @pageStyle.type = "text/css"
79 | css = "##{@input.id}::-webkit-input-placeholder { color: #{@placeholderColor}; }"
80 | @pageStyle.appendChild(document.createTextNode css)
81 | document.head.appendChild @pageStyle
82 |
83 | focus: () ->
84 | @input.focus()
85 |
86 | onFocus: (cb) ->
87 | @input.addEventListener "focus", ->
88 | cb.apply(@)
89 |
90 | onBlur: (cb) ->
91 | @input.addEventListener "blur", ->
92 | cb.apply(@)
93 |
--------------------------------------------------------------------------------
/todoExample.framer/app.coffee:
--------------------------------------------------------------------------------
1 | { Machine } = require 'stateMachine'
2 | { TextLayer } = require 'TextLayer'
3 | InputModule = require 'input'
4 |
5 | Framer.Defaults.Layer =
6 | backgroundColor: null
7 | color: 'black'
8 |
9 | p =
10 | todo:
11 | width: Screen.width * 0.75
12 | height: 40
13 | textStyle:
14 | fontSize: 16
15 | fontFamily: '-apple-system'
16 | color: 'black'
17 | lineHeight: '40px'
18 |
19 | state =
20 | todos: [
21 | {
22 | label: 'Make a state machine for Framer'
23 | done: true
24 | color: Utils.randomColor()
25 | }, {
26 | label: 'Create a todo app in Framer'
27 | done: false
28 | color: Utils.randomColor()
29 | }
30 | ]
31 |
32 | layers = () ->
33 | todosCompleted = _.sumBy(state.todos, {done: true}) / state.todos.length
34 |
35 | todoList = new Layer
36 | x: Align.center
37 | y: Align.top(p.todo.height * 1.5)
38 | width: p.todo.width
39 |
40 | input = new InputModule.Input
41 | parent: todoList
42 | y: (p.todo.height + 10) * state.todos.length
43 | width: p.todo.width
44 | height: p.todo.height
45 | fontSize: 16
46 | borderWidth: 1
47 | borderColor: 'black'
48 | placeholder: 'New todo'
49 | virtualKeyboard: false
50 |
51 | input.style =
52 | 'line-height': '40px'
53 | 'box-sizing': 'border-box'
54 |
55 | input.form.addEventListener "submit", (event) ->
56 | event.preventDefault()
57 | app.setState {
58 | "todos[#{state.todos.length}].label": input.value
59 | "todos[#{state.todos.length}].color": Utils.randomColor()
60 | }
61 |
62 | if todosCompleted == 1
63 | banner = new TextLayer
64 | bannerTextStyle =
65 | text: 'All done! 👍'
66 | width: p.todo.width
67 | x: Align.center
68 | y: Align.top(20)
69 | fontWeight: 'bold'
70 | _.assign banner, _.extend bannerTextStyle, p.textStyle
71 | else
72 | progress = new Layer
73 | width: p.todo.width
74 | height: 10
75 | backgroundColor: '#ddd'
76 | x: Align.center
77 | y: Align.top(p.todo.height)
78 |
79 | progressBar = new Layer
80 | parent: progress
81 | width: todosCompleted * progress.width
82 | height: progress.height
83 | backgroundColor: 'black'
84 |
85 | for item, index in state.todos
86 | do (item, index) ->
87 | @todo = new Layer
88 | parent: todoList
89 | name: 'todo'
90 | borderWidth: 1
91 | borderColor: 'black'
92 | width: p.todo.width
93 | height: p.todo.height
94 | y: Align.top((p.todo.height + 10) * index)
95 |
96 | todo.onClick ->
97 | app.toggleState "todos[#{index}].done"
98 |
99 | @checkBox = new Layer
100 | name: 'checkbox'
101 | parent: @todo
102 | borderWidth: 1
103 | borderColor: 'black'
104 | size: p.todo.height / 2
105 | x: Align.left(9)
106 | y: Align.center
107 | backgroundColor: if item.done then 'black' else null
108 |
109 | @todoText = new TextLayer
110 | todoTextStyle =
111 | name: 'todo:text'
112 | parent: @todo
113 | text: item.label
114 | width: todo.width
115 | paddingLeft: p.todo.height
116 | style:
117 | 'text-decoration': if item.done then 'line-through' else 'none'
118 | _.assign todoText, _.assign todoTextStyle, p.textStyle
119 |
120 | @color = new Layer
121 | name: 'todo:color'
122 | parent: @todo
123 | size: p.todo.height / 2
124 | x: Align.right(-9)
125 | y: Align.center
126 | backgroundColor: item.color
127 |
128 |
129 | app = new Machine
130 | state: state
131 | layers: layers
132 | framer: Framer
--------------------------------------------------------------------------------
/todoExample.framer/modules/TextLayer.coffee:
--------------------------------------------------------------------------------
1 | class TextLayer extends Layer
2 |
3 | constructor: (options={}) ->
4 | @doAutoSize = false
5 | @doAutoSizeHeight = false
6 | options.backgroundColor ?= if options.setup then "hsla(60, 90%, 47%, .4)" else "transparent"
7 | options.color ?= "red"
8 | options.lineHeight ?= 1.25
9 | options.fontFamily ?= "Helvetica"
10 | options.fontSize ?= 20
11 | options.text ?= "Use layer.text to add text"
12 | super options
13 | @style.whiteSpace = "pre-line" # allow \n in .text
14 | @style.outline = "none" # no border when selected
15 |
16 | setStyle: (property, value, pxSuffix = false) ->
17 | @style[property] = if pxSuffix then value+"px" else value
18 | @emit("change:#{property}", value)
19 | if @doAutoSize then @calcSize()
20 |
21 | calcSize: ->
22 | sizeAffectingStyles =
23 | lineHeight: @style["line-height"]
24 | fontSize: @style["font-size"]
25 | fontWeight: @style["font-weight"]
26 | paddingTop: @style["padding-top"]
27 | paddingRight: @style["padding-right"]
28 | paddingBottom: @style["padding-bottom"]
29 | paddingLeft: @style["padding-left"]
30 | textTransform: @style["text-transform"]
31 | borderWidth: @style["border-width"]
32 | letterSpacing: @style["letter-spacing"]
33 | fontFamily: @style["font-family"]
34 | fontStyle: @style["font-style"]
35 | fontVariant: @style["font-variant"]
36 | constraints = {}
37 | if @doAutoSizeHeight then constraints.width = @width
38 | size = Utils.textSize @text, sizeAffectingStyles, constraints
39 | if @style.textAlign is "right"
40 | @width = size.width
41 | @x = @x-@width
42 | else
43 | @width = size.width
44 | @height = size.height
45 |
46 | @define "autoSize",
47 | get: -> @doAutoSize
48 | set: (value) ->
49 | @doAutoSize = value
50 | if @doAutoSize then @calcSize()
51 | @define "autoSizeHeight",
52 | set: (value) ->
53 | @doAutoSize = value
54 | @doAutoSizeHeight = value
55 | if @doAutoSize then @calcSize()
56 | @define "contentEditable",
57 | set: (boolean) ->
58 | @_element.contentEditable = boolean
59 | @ignoreEvents = !boolean
60 | @on "input", -> @calcSize() if @doAutoSize
61 | @define "text",
62 | get: -> @_element.textContent
63 | set: (value) ->
64 | @_element.textContent = value
65 | @emit("change:text", value)
66 | if @doAutoSize then @calcSize()
67 | @define "fontFamily",
68 | get: -> @style.fontFamily
69 | set: (value) -> @setStyle("fontFamily", value)
70 | @define "fontSize",
71 | get: -> @style.fontSize.replace("px","")
72 | set: (value) -> @setStyle("fontSize", value, true)
73 | @define "lineHeight",
74 | get: -> @style.lineHeight
75 | set: (value) -> @setStyle("lineHeight", value)
76 | @define "fontWeight",
77 | get: -> @style.fontWeight
78 | set: (value) -> @setStyle("fontWeight", value)
79 | @define "fontStyle",
80 | get: -> @style.fontStyle
81 | set: (value) -> @setStyle("fontStyle", value)
82 | @define "fontVariant",
83 | get: -> @style.fontVariant
84 | set: (value) -> @setStyle("fontVariant", value)
85 | @define "padding",
86 | set: (value) ->
87 | @setStyle("paddingTop", value, true)
88 | @setStyle("paddingRight", value, true)
89 | @setStyle("paddingBottom", value, true)
90 | @setStyle("paddingLeft", value, true)
91 | @define "paddingTop",
92 | get: -> @style.paddingTop.replace("px","")
93 | set: (value) -> @setStyle("paddingTop", value, true)
94 | @define "paddingRight",
95 | get: -> @style.paddingRight.replace("px","")
96 | set: (value) -> @setStyle("paddingRight", value, true)
97 | @define "paddingBottom",
98 | get: -> @style.paddingBottom.replace("px","")
99 | set: (value) -> @setStyle("paddingBottom", value, true)
100 | @define "paddingLeft",
101 | get: -> @style.paddingLeft.replace("px","")
102 | set: (value) -> @setStyle("paddingLeft", value, true)
103 | @define "textAlign",
104 | set: (value) -> @setStyle("textAlign", value)
105 | @define "textTransform",
106 | get: -> @style.textTransform
107 | set: (value) -> @setStyle("textTransform", value)
108 | @define "letterSpacing",
109 | get: -> @style.letterSpacing.replace("px","")
110 | set: (value) -> @setStyle("letterSpacing", value, true)
111 | @define "length",
112 | get: -> @text.length
113 |
114 | convertToTextLayer = (layer) ->
115 | t = new TextLayer
116 | name: layer.name
117 | frame: layer.frame
118 | parent: layer.parent
119 |
120 | cssObj = {}
121 | css = layer._info.metadata.css
122 | css.forEach (rule) ->
123 | return if _.includes rule, '/*'
124 | arr = rule.split(': ')
125 | cssObj[arr[0]] = arr[1].replace(';','')
126 | t.style = cssObj
127 |
128 | importPath = layer.__framerImportedFromPath
129 | if _.includes importPath, '@2x'
130 | t.fontSize *= 2
131 | t.lineHeight = (parseInt(t.lineHeight)*2)+'px'
132 | t.letterSpacing *= 2
133 |
134 | t.y -= (parseInt(t.lineHeight)-t.fontSize)/2 # compensate for how CSS handles line height
135 | t.y -= t.fontSize * 0.1 # sketch padding
136 | t.x -= t.fontSize * 0.08 # sketch padding
137 | t.width += t.fontSize * 0.5 # sketch padding
138 |
139 | t.text = layer._info.metadata.string
140 | layer.destroy()
141 | return t
142 |
143 | Layer::convertToTextLayer = -> convertToTextLayer(@)
144 |
145 | convertTextLayers = (obj) ->
146 | for prop,layer of obj
147 | if layer._info.kind is "text"
148 | obj[prop] = convertToTextLayer(layer)
149 |
150 | # Backwards compability. Replaced by convertToTextLayer()
151 | Layer::frameAsTextLayer = (properties) ->
152 | t = new TextLayer
153 | t.frame = @frame
154 | t.superLayer = @superLayer
155 | _.extend t,properties
156 | @destroy()
157 | t
158 |
159 | exports.TextLayer = TextLayer
160 | exports.convertTextLayers = convertTextLayers
161 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Framer State Machine
2 |
3 | Managing simple application state in Framer is pretty straightforward for simple prototypes, but things get complicated quickly.
4 |
5 | For example, let’s say we’ve got a counter, a message that tells you the state of the counter, and a button that increments the counter. Simple: just set the initial value of the counter variable, set up the message, increment the variable onClick, then update the message.
6 |
7 | ```coffeescript
8 | counter = 0
9 | message = new Layer
10 | html: "The button has been pressed #{counter} times"
11 | button = new Layer
12 | ...
13 | button.onClick ->
14 | counter++
15 | message.html = "The button has been pressed #{counter} times"
16 | ```
17 |
18 | ReactJS, unlike Framer, has got a neat way of dealing with application state: it stores it all in one place and then re-renders the necessary parts of the UI when the state changes. Combined with a well-defined inheritance model to pass information around the component tree, React makes it really easy to “reason” about state. All your application's state is in one place, and how components respond to that state are written in the components themselves.
19 |
20 | If we had built the example above in React instead of Framer, when we increment that counter, any part of the component that relies on the state (in our case, the message) is automatically re-rendered to reflect the change. Nice!
21 |
22 | ## Okay, so what does this module do?
23 |
24 | This module provides you with some basic React-style state management in your Framer prototype. The module provides you with methods to update the application state, and automatically re-renders the application to represent the latest state.
25 |
26 | Included with this repo is a simple demo...
27 |
28 | 
29 |
30 | Read more about the module on [Medium](https://blog.framer.com/react-style-state-machine-for-framer-e1c4e7032e65#.oc8c4jawv).
31 |
32 | ## How to use it
33 |
34 | Add the module to your Framer project:
35 | * Download the project from Github
36 | * Copy `stateMachine.coffee` into your project's `/modules` directory
37 | * Import the module into your prototype by adding `{ machine } = require 'stateMachine'` at the top of your `app.coffee`
38 | * Rename `boilerplate.coffee` to `app.coffee`, copy and overwrite it into your project's root directory (optional)
39 |
40 | ## There's more set up to do...
41 |
42 | For this module to work, you need to format your project code in a certain way. There are three parts to any prototype using Framer-state:
43 |
44 | 1. A `state` object
45 | 2. A `layers` function
46 | 3. An instantiation of the `Machine` class
47 |
48 | Let's take those things one by one, using our counter example above.
49 |
50 | ### `state`
51 |
52 | You must define an initial...uh...state for the state object. In the counter example, our state object would look like this:
53 |
54 | ```coffeescript
55 | state =
56 | counter: 0
57 | ```
58 |
59 | As I bet you can guess, we'll be updating `state.counter` in response to something the user does, and the prototype's rending of the current count will update too.
60 |
61 | ### `layers`
62 |
63 | `layers` is a function which contains your normal Framer layers. We might write this:
64 |
65 | ```coffeescript
66 | layers = () ->
67 | counter = new Layer
68 | html: "The current count is #{state.counter}"
69 | ```
70 |
71 | By calling `state.counter` in that interpolated string, well actually render the current state of the counter. So when the prototype first loads, the counter layer will read "The current count is 0"
72 |
73 | Let's make the counter increment when you click on it:
74 |
75 | ```coffeescript
76 | counter = new Layer
77 | html: "The current count is #{state.counter}"
78 |
79 | counter.onClick ->
80 | app.setState { 'counter': state.counter++ }
81 | ```
82 |
83 | The `setState` method simply iterates through all key/value pairs in the param and updates the corresponding key/value pairs in the `state` object, then re-renders the prototype to reflect the new state. Above, we're updating `counter` to be one number greater than the current value of the counter (`state.counter++` is the same as `state.counter + 1`).
84 |
85 | There are a couple other methods for updating state, covered below.
86 |
87 | ### `Machine`
88 |
89 | To make this all work, you must instantiate an instance of the State Machine. At the end of your prototype, after your `layer` function, add the class:
90 |
91 | ```coffeescript
92 | app = new Machine
93 | state: state
94 | layers: layers
95 | framer: Framer
96 | ```
97 |
98 | You'll notice that we also pass the `Framer` object the State Machine. That's just so it can have access to a list of layers in your prototype. `state` and `layers` will be the variables you assigned above.
99 |
100 | Putting it all together, your (condensed) prototype will look like this:
101 |
102 | ```coffeescript
103 | { Machine } = require 'stateMachine'
104 |
105 | state =
106 | counter: 0
107 |
108 | layers = () ->
109 | ...
110 |
111 | app = new Machine
112 | state: state
113 | layers: layers
114 | framer: Framer
115 | ```
116 |
117 | For a slightly more sophisticated example, view `todoExample.framer` included in this repo.
118 |
119 | ## It's not perfect
120 |
121 | One of React's nice features is the virtual DOM, which allows React to only re-render parts of your app that actually changed. For State Machine, I'm kind of brute-forcing the solution: every state update re-renders the entire app.
122 |
123 | This is pretty performant when your prototype is smaller or consists only of Framer-drawn layers, not imported Sketch layers. You've been warned 🤷
124 |
125 | If you've got ideas about how to make this better, feel free to open an issue or submit a pull request!
126 |
127 | ## Methods
128 |
129 | `setState`: Requires an object. Iterates through each key/value pair you pass it, updates the state object, then re-renders the prototype.
130 |
131 | Path to your key are represented by a string. So for instance `'item[3].status'` as a key will update the `status` of the third `item` in the state collection.
132 |
133 | `toggleState`: Requires a string. The key's value must be a boolean. This method simply reverses the boolean. You'd use this method to update the state controlled by a switch or single checkbox, for example. The string represents the path to a key in your state object, as detailed above.
134 |
--------------------------------------------------------------------------------
/todoExample.framer/framer/framer.modules.js:
--------------------------------------------------------------------------------
1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o