├── .DS_Store ├── InputField-example.framer ├── .temp.html ├── Icon ├── Icon ├── app.coffee ├── app.js ├── framer │ ├── .framer.modules.js.hash │ ├── backups │ │ ├── backup-2016-06-23 14.43.35.coffee │ │ ├── backup-2016-06-23 14.44.35.coffee │ │ ├── backup-2016-06-23 14.46.35.coffee │ │ ├── backup-2016-06-23 16.08.43.coffee │ │ ├── backup-2016-06-23 16.23.39.coffee │ │ ├── backup-2016-06-23 16.24.39.coffee │ │ ├── backup-2016-06-23 16.25.39.coffee │ │ ├── backup-2016-06-23 16.26.39.coffee │ │ ├── backup-2016-06-23 16.27.39.coffee │ │ ├── backup-2016-06-23 16.28.39.coffee │ │ ├── backup-2016-06-23 16.29.39.coffee │ │ ├── backup-2016-06-23 16.30.39.coffee │ │ ├── backup-2016-06-23 16.31.39.coffee │ │ ├── backup-2016-06-23 16.32.39.coffee │ │ ├── backup-2016-06-23 16.33.39.coffee │ │ ├── backup-2016-06-23 16.34.39.coffee │ │ ├── backup-2016-06-23 16.35.39.coffee │ │ ├── backup-2016-06-23 16.36.39.coffee │ │ ├── backup-2016-06-23 16.37.39.coffee │ │ ├── backup-2016-06-23 16.56.39.coffee │ │ └── backup-2016-06-23 17.03.13.coffee │ ├── coffee-script.js │ ├── config.json │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── images │ │ ├── background.png │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-76.png │ │ ├── icon-arrow.png │ │ ├── icon-arrow@2x.png │ │ ├── icon-close.png │ │ ├── icon-close@2x.png │ │ ├── icon-framer.png │ │ ├── icon-framer@2x.png │ │ ├── icon-share.png │ │ └── icon-share@2x.png │ ├── manifest.txt │ ├── mirror.css │ ├── preview.png │ ├── style.css │ └── version ├── images │ └── .gitkeep ├── index.html └── modules │ └── InputField.coffee ├── LICENSE └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/.DS_Store -------------------------------------------------------------------------------- /InputField-example.framer/.temp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /InputField-example.framer/Icon: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/Icon -------------------------------------------------------------------------------- /InputField-example.framer/Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/Icon -------------------------------------------------------------------------------- /InputField-example.framer/app.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | # TO DO - Textarea or Content Editable 8 | # TO DO - Post to Github 9 | 10 | ################################################################################ 11 | 12 | Screen.backgroundColor = "#808080" 13 | 14 | ################################################################################ 15 | # Build the text inputs 16 | # 17 | # Valid & Tested InputField Types: 18 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 19 | # "time", "month", "date", "datetime-local" 20 | # 21 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 22 | # 23 | # Here's a few examples to use for the value: property when you create them. 24 | # * time: "12:38" 25 | # * month: "2016-01" 26 | # * date: "2016-01-04" 27 | # * datetime-local: "2016-01-04T12:44:31.192" 28 | # 29 | # NOTES / 30 | # Some types work better than others on mobile or display differently than desktop. 31 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 32 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 33 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 34 | # 35 | ################################################################################ 36 | # SIMPLE EXAMPLE 37 | # myInput = new InputField 38 | # width: 300 39 | # height: 88 40 | # backgroundColor: "white" 41 | # 42 | ################################################################################ 43 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 44 | 45 | # InputField Instance: text 46 | 47 | colorInput = new InputField 48 | name: "colorInput" 49 | type: "text" 50 | width: Screen.width 51 | height: 132 52 | y: 0 53 | color: "#696969" 54 | backgroundColor: "#f5f5f5" 55 | indent: 48 56 | fontSize: 48 57 | fontWeight: 600 58 | fontFamily: "Georgia, serif" 59 | placeHolder: "Enter Hexadecimal Color" 60 | placeHolderFocus: "#_ _ _ _ _ _" 61 | placeHolderColor: "silver" 62 | autoCapitalize: false 63 | autoComplete: false 64 | autoCorrect: false 65 | maxLength: 7 66 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 67 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 68 | value: "" 69 | # lineHeight: 30 70 | 71 | # InputField Instance: text - Events 72 | 73 | colorInput.on Events.Input, (value, layer) -> 74 | setDefault @ if @.isEmpty 75 | 76 | colorInput.on Events.Focus, (value, layer) -> 77 | @.color = @.originalTextColor 78 | 79 | colorInput.on Events.Blur, (value, layer) -> 80 | @.color = "limeGreen" if @.isValid 81 | 82 | colorInput.on Events.Valid, (value, layer) -> 83 | setValid @, value 84 | 85 | colorInput.on Events.Invalid, (value, layer) -> 86 | setInvalid @, value 87 | 88 | colorInput.on Events.Match, (value, layer) -> 89 | setDefault @, value 90 | @.animate properties: 91 | backgroundColor: value 92 | color: "#fff" 93 | Utils.delay 3, => 94 | @.animate properties: 95 | backgroundColor: "#f5f5f5" 96 | color: @.originalTextColor 97 | 98 | ################################################################################ 99 | 100 | # InputField Instance: file-image 101 | 102 | imagePlaceholder = new Layer 103 | width: Screen.width 104 | height: Screen.height/2 105 | image: "" 106 | maxY: Screen.height 107 | backgroundColor: "black" 108 | html: "Add Image" 109 | style: 110 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 111 | textAlign: "center" 112 | 113 | fileInput = new InputField 114 | name: "fileInput" 115 | type: "file-image" 116 | width: Screen.width 117 | parent: imagePlaceholder 118 | 119 | 120 | 121 | # InputField Instance: file-image - Events 122 | 123 | fileInput.on Events.FileData, (value, layer) -> 124 | @.parent.image = value 125 | @.parent.html = "" 126 | 127 | ################################################################################ 128 | # DEMO HELPER FUNCTIONS 129 | 130 | # Text Input Validation Functions 131 | 132 | setDefault = (input, value) -> 133 | check.states.switch "invalid" 134 | input.color = input.originalTextColor 135 | input.backgroundColor = "#f5f5f5" 136 | Screen.backgroundColor = "#808080" 137 | 138 | setValid = (input, value) -> 139 | check.states.switch "valid" 140 | input.color = input.originalTextColor 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | 144 | setInvalid = (input, value) -> 145 | check.states.switch "invalid" 146 | input.backgroundColor = "#f5f5f5" 147 | Screen.backgroundColor = value 148 | Utils.delay 1.5, => 149 | unless input.isValid 150 | input.color = "red" unless input.isEmpty 151 | check.states.switch "invalid" 152 | Screen.backgroundColor = value 153 | 154 | ################################################################################ 155 | # DEMO HELPER CODE FOR CHECKMARK 156 | 157 | # Checkmark for Valid Answer 158 | 159 | check = new Layer 160 | width: 20 161 | height: 40 162 | rotation: 45 163 | backgroundColor: "" 164 | style: boxShadow: "inset -8px -8px 0 limeGreen" 165 | 166 | check.states.add 167 | valid: opacity: 1, scale: 1 168 | invalid: opacity: 0, scale: .25 169 | check.states.animationOptions = curve: "spring(1000,30,0)" 170 | check.states.switchInstant "invalid" 171 | check.center() 172 | 173 | check.bringToFront() 174 | check.props = 175 | midY: colorInput.midY - 8 176 | maxX: colorInput.maxX - 48 177 | 178 | ################################################################################ 179 | # DEMO FOR CLASS FUNCTIONS 180 | 181 | # Print button 182 | 183 | buttton_read = new Layer 184 | width: Screen.width/3 185 | height: 88 186 | y: 132 + (Screen.width/3)/3 187 | x: (Screen.width/3)/3 188 | borderRadius: 132/2 189 | backgroundColor: "rgba(0,0,0,.25)" 190 | html: "Print Value" 191 | style: 192 | font: "400 32px/88px -apple-system, sans-serif" 193 | textAlign: "center" 194 | boxShadow: "inset 0 0 0 2px #fff" 195 | 196 | buttton_read.onClick -> 197 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 198 | print colorInput.value 199 | 200 | # Clear button 201 | 202 | buttton_clear = new Layer 203 | width: Screen.width/3 204 | height: 88 205 | y: 132 + (Screen.width/3)/3 206 | maxX: Screen.width - (Screen.width/3)/3 207 | borderRadius: 132/2 208 | backgroundColor: "rgba(0,0,0,.25)" 209 | html: "Clear Value" 210 | style: 211 | font: "400 32px/88px -apple-system, sans-serif" 212 | textAlign: "center" 213 | boxShadow: "inset 0 0 0 2px #fff" 214 | 215 | buttton_clear.onClick -> 216 | colorInput.clear() 217 | setDefault(colorInput) 218 | -------------------------------------------------------------------------------- /InputField-example.framer/app.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.9.3 2 | 3 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/.framer.modules.js.hash: -------------------------------------------------------------------------------- 1 | 5f8d63f377e8cd6ccdc2a8cf4571dbd4:/Users/jordan/_Framer/_Modules/github/framer-InputField/InputField-example.framer/modules/InputField.coffee -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 14.43.35.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | 54 | fileInput = new InputField 55 | name: "fileInput" 56 | type: "file-image" 57 | width: Screen.width 58 | parent: photoSpot 59 | 60 | fileInput.on Events.FileData, (value, layer) -> 61 | @.parent.image = value 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | colorInput.on Events.Input, (value, layer) -> 88 | setDefault @ if @.isEmpty 89 | # print "INPUT", value, layer, @.isEmpty 90 | 91 | colorInput.on Events.Focus, (value, layer) -> 92 | @.color = @.originalTextColor 93 | # print "Blur", value, layer 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | # print "Blur", value, layer 98 | 99 | colorInput.on Events.Valid, (value, layer) -> 100 | setValid @, value 101 | # print "Valid", value, layer 102 | 103 | colorInput.on Events.Invalid, (value, layer) -> 104 | setInvalid @, value 105 | 106 | colorInput.on Events.Invalid, (value, layer) -> 107 | setInvalid @, value 108 | # print "Invalid", value, layer 109 | 110 | colorInput.on Events.Match, (value, layer) -> 111 | setDefault @, value 112 | @.animate properties: 113 | backgroundColor: value 114 | color: "#fff" 115 | Utils.delay 3, => 116 | @.animate properties: 117 | backgroundColor: "#f5f5f5" 118 | color: @.originalTextColor 119 | 120 | ################################################################################ 121 | # DEMO HELPER FUNCTIONS 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | check = new Layer 149 | width: 20 150 | height: 40 151 | rotation: 45 152 | backgroundColor: "" 153 | style: boxShadow: "inset -8px -8px 0 limeGreen" 154 | 155 | check.states.add 156 | valid: opacity: 1, scale: 1 157 | invalid: opacity: 0, scale: .25 158 | check.states.animationOptions = curve: "spring(1000,30,0)" 159 | check.states.switchInstant "invalid" 160 | check.center() 161 | 162 | check.bringToFront() 163 | check.props = 164 | midY: colorInput.midY - 8 165 | maxX: colorInput.maxX - 48 166 | 167 | ################################################################################ 168 | # DEMO FOR CLASS FUNCTIONS 169 | 170 | buttton_read = new Layer 171 | width: Screen.width/3 172 | height: 88 173 | y: 132 + (Screen.width/3)/3 174 | x: (Screen.width/3)/3 175 | borderRadius: 132/2 176 | backgroundColor: "rgba(0,0,0,.25)" 177 | html: "Print Value" 178 | style: 179 | font: "400 32px/88px -apple-system, sans-serif" 180 | textAlign: "center" 181 | boxShadow: "inset 0 0 0 2px #fff" 182 | 183 | buttton_read.onClick -> 184 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 185 | print colorInput.value 186 | 187 | buttton_clear = new Layer 188 | width: Screen.width/3 189 | height: 88 190 | y: 132 + (Screen.width/3)/3 191 | maxX: Screen.width - (Screen.width/3)/3 192 | borderRadius: 132/2 193 | backgroundColor: "rgba(0,0,0,.25)" 194 | html: "Clear Value" 195 | style: 196 | font: "400 32px/88px -apple-system, sans-serif" 197 | textAlign: "center" 198 | boxShadow: "inset 0 0 0 2px #fff" 199 | 200 | buttton_clear.onClick -> 201 | colorInput.clear() 202 | setDefault(colorInput) 203 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 14.44.35.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | 54 | fileInput = new InputField 55 | name: "fileInput" 56 | type: "file-image" 57 | width: Screen.width 58 | parent: photoSpot 59 | 60 | fileInput.on Events.FileData, (value, layer) -> 61 | @.parent.image = value 62 | @.parent.html = "" 63 | 64 | colorInput = new InputField 65 | name: "colorInput" 66 | type: "text" 67 | width: Screen.width 68 | height: 132 69 | y: 0 70 | color: "#696969" 71 | backgroundColor: "#f5f5f5" 72 | indent: 48 73 | fontSize: 48 74 | fontWeight: 600 75 | fontFamily: "Georgia, serif" 76 | placeHolder: "Enter Hexadecimal Color" 77 | placeHolderFocus: "#_ _ _ _ _ _" 78 | placeHolderColor: "silver" 79 | autoCapitalize: false 80 | autoComplete: false 81 | autoCorrect: false 82 | maxLength: 7 83 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 84 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 85 | value: "" 86 | # lineHeight: 30 87 | 88 | colorInput.on Events.Input, (value, layer) -> 89 | setDefault @ if @.isEmpty 90 | # print "INPUT", value, layer, @.isEmpty 91 | 92 | colorInput.on Events.Focus, (value, layer) -> 93 | @.color = @.originalTextColor 94 | # print "Blur", value, layer 95 | 96 | colorInput.on Events.Blur, (value, layer) -> 97 | @.color = "limeGreen" if @.isValid 98 | # print "Blur", value, layer 99 | 100 | colorInput.on Events.Valid, (value, layer) -> 101 | setValid @, value 102 | # print "Valid", value, layer 103 | 104 | colorInput.on Events.Invalid, (value, layer) -> 105 | setInvalid @, value 106 | 107 | colorInput.on Events.Invalid, (value, layer) -> 108 | setInvalid @, value 109 | # print "Invalid", value, layer 110 | 111 | colorInput.on Events.Match, (value, layer) -> 112 | setDefault @, value 113 | @.animate properties: 114 | backgroundColor: value 115 | color: "#fff" 116 | Utils.delay 3, => 117 | @.animate properties: 118 | backgroundColor: "#f5f5f5" 119 | color: @.originalTextColor 120 | 121 | ################################################################################ 122 | # DEMO HELPER FUNCTIONS 123 | 124 | setDefault = (input, value) -> 125 | check.states.switch "invalid" 126 | input.color = input.originalTextColor 127 | input.backgroundColor = "#f5f5f5" 128 | Screen.backgroundColor = "#808080" 129 | 130 | setValid = (input, value) -> 131 | check.states.switch "valid" 132 | input.color = input.originalTextColor 133 | input.backgroundColor = "#f5f5f5" 134 | Screen.backgroundColor = value 135 | 136 | setInvalid = (input, value) -> 137 | check.states.switch "invalid" 138 | input.backgroundColor = "#f5f5f5" 139 | Screen.backgroundColor = value 140 | Utils.delay 1.5, => 141 | unless input.isValid 142 | input.color = "red" unless input.isEmpty 143 | check.states.switch "invalid" 144 | Screen.backgroundColor = value 145 | 146 | ################################################################################ 147 | # DEMO HELPER CODE FOR CHECKMARK 148 | 149 | check = new Layer 150 | width: 20 151 | height: 40 152 | rotation: 45 153 | backgroundColor: "" 154 | style: boxShadow: "inset -8px -8px 0 limeGreen" 155 | 156 | check.states.add 157 | valid: opacity: 1, scale: 1 158 | invalid: opacity: 0, scale: .25 159 | check.states.animationOptions = curve: "spring(1000,30,0)" 160 | check.states.switchInstant "invalid" 161 | check.center() 162 | 163 | check.bringToFront() 164 | check.props = 165 | midY: colorInput.midY - 8 166 | maxX: colorInput.maxX - 48 167 | 168 | ################################################################################ 169 | # DEMO FOR CLASS FUNCTIONS 170 | 171 | buttton_read = new Layer 172 | width: Screen.width/3 173 | height: 88 174 | y: 132 + (Screen.width/3)/3 175 | x: (Screen.width/3)/3 176 | borderRadius: 132/2 177 | backgroundColor: "rgba(0,0,0,.25)" 178 | html: "Print Value" 179 | style: 180 | font: "400 32px/88px -apple-system, sans-serif" 181 | textAlign: "center" 182 | boxShadow: "inset 0 0 0 2px #fff" 183 | 184 | buttton_read.onClick -> 185 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 186 | print colorInput.value 187 | 188 | buttton_clear = new Layer 189 | width: Screen.width/3 190 | height: 88 191 | y: 132 + (Screen.width/3)/3 192 | maxX: Screen.width - (Screen.width/3)/3 193 | borderRadius: 132/2 194 | backgroundColor: "rgba(0,0,0,.25)" 195 | html: "Clear Value" 196 | style: 197 | font: "400 32px/88px -apple-system, sans-serif" 198 | textAlign: "center" 199 | boxShadow: "inset 0 0 0 2px #fff" 200 | 201 | buttton_clear.onClick -> 202 | colorInput.clear() 203 | setDefault(colorInput) 204 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 14.46.35.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | colorInput.on Events.Input, (value, layer) -> 88 | setDefault @ if @.isEmpty 89 | # print "INPUT", value, layer, @.isEmpty 90 | 91 | colorInput.on Events.Focus, (value, layer) -> 92 | @.color = @.originalTextColor 93 | # print "Blur", value, layer 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | # print "Blur", value, layer 98 | 99 | colorInput.on Events.Valid, (value, layer) -> 100 | setValid @, value 101 | # print "Valid", value, layer 102 | 103 | colorInput.on Events.Invalid, (value, layer) -> 104 | setInvalid @, value 105 | 106 | colorInput.on Events.Invalid, (value, layer) -> 107 | setInvalid @, value 108 | # print "Invalid", value, layer 109 | 110 | colorInput.on Events.Match, (value, layer) -> 111 | setDefault @, value 112 | @.animate properties: 113 | backgroundColor: value 114 | color: "#fff" 115 | Utils.delay 3, => 116 | @.animate properties: 117 | backgroundColor: "#f5f5f5" 118 | color: @.originalTextColor 119 | 120 | ################################################################################ 121 | # DEMO HELPER FUNCTIONS 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | check = new Layer 149 | width: 20 150 | height: 40 151 | rotation: 45 152 | backgroundColor: "" 153 | style: boxShadow: "inset -8px -8px 0 limeGreen" 154 | 155 | check.states.add 156 | valid: opacity: 1, scale: 1 157 | invalid: opacity: 0, scale: .25 158 | check.states.animationOptions = curve: "spring(1000,30,0)" 159 | check.states.switchInstant "invalid" 160 | check.center() 161 | 162 | check.bringToFront() 163 | check.props = 164 | midY: colorInput.midY - 8 165 | maxX: colorInput.maxX - 48 166 | 167 | ################################################################################ 168 | # DEMO FOR CLASS FUNCTIONS 169 | 170 | buttton_read = new Layer 171 | width: Screen.width/3 172 | height: 88 173 | y: 132 + (Screen.width/3)/3 174 | x: (Screen.width/3)/3 175 | borderRadius: 132/2 176 | backgroundColor: "rgba(0,0,0,.25)" 177 | html: "Print Value" 178 | style: 179 | font: "400 32px/88px -apple-system, sans-serif" 180 | textAlign: "center" 181 | boxShadow: "inset 0 0 0 2px #fff" 182 | 183 | buttton_read.onClick -> 184 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 185 | print colorInput.value 186 | 187 | buttton_clear = new Layer 188 | width: Screen.width/3 189 | height: 88 190 | y: 132 + (Screen.width/3)/3 191 | maxX: Screen.width - (Screen.width/3)/3 192 | borderRadius: 132/2 193 | backgroundColor: "rgba(0,0,0,.25)" 194 | html: "Clear Value" 195 | style: 196 | font: "400 32px/88px -apple-system, sans-serif" 197 | textAlign: "center" 198 | boxShadow: "inset 0 0 0 2px #fff" 199 | 200 | buttton_clear.onClick -> 201 | colorInput.clear() 202 | setDefault(colorInput) 203 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.08.43.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | colorInput.on Events.Input, (value, layer) -> 88 | setDefault @ if @.isEmpty 89 | # print "INPUT", value, layer, @.isEmpty 90 | 91 | colorInput.on Events.Focus, (value, layer) -> 92 | @.color = @.originalTextColor 93 | # print "Blur", value, layer 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | # print "Blur", value, layer 98 | 99 | colorInput.on Events.Valid, (value, layer) -> 100 | setValid @, value 101 | # print "Valid", value, layer 102 | 103 | colorInput.on Events.Invalid, (value, layer) -> 104 | setInvalid @, value 105 | 106 | colorInput.on Events.Invalid, (value, layer) -> 107 | setInvalid @, value 108 | # print "Invalid", value, layer 109 | 110 | colorInput.on Events.Match, (value, layer) -> 111 | setDefault @, value 112 | @.animate properties: 113 | backgroundColor: value 114 | color: "#fff" 115 | Utils.delay 3, => 116 | @.animate properties: 117 | backgroundColor: "#f5f5f5" 118 | color: @.originalTextColor 119 | 120 | ################################################################################ 121 | # DEMO HELPER FUNCTIONS 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | check = new Layer 149 | width: 20 150 | height: 40 151 | rotation: 45 152 | backgroundColor: "" 153 | style: boxShadow: "inset -8px -8px 0 limeGreen" 154 | 155 | check.states.add 156 | valid: opacity: 1, scale: 1 157 | invalid: opacity: 0, scale: .25 158 | check.states.animationOptions = curve: "spring(1000,30,0)" 159 | check.states.switchInstant "invalid" 160 | check.center() 161 | 162 | check.bringToFront() 163 | check.props = 164 | midY: colorInput.midY - 8 165 | maxX: colorInput.maxX - 48 166 | 167 | ################################################################################ 168 | # DEMO FOR CLASS FUNCTIONS 169 | 170 | buttton_read = new Layer 171 | width: Screen.width/3 172 | height: 88 173 | y: 132 + (Screen.width/3)/3 174 | x: (Screen.width/3)/3 175 | borderRadius: 132/2 176 | backgroundColor: "rgba(0,0,0,.25)" 177 | html: "Print Value" 178 | style: 179 | font: "400 32px/88px -apple-system, sans-serif" 180 | textAlign: "center" 181 | boxShadow: "inset 0 0 0 2px #fff" 182 | 183 | buttton_read.onClick -> 184 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 185 | print colorInput.value 186 | 187 | buttton_clear = new Layer 188 | width: Screen.width/3 189 | height: 88 190 | y: 132 + (Screen.width/3)/3 191 | maxX: Screen.width - (Screen.width/3)/3 192 | borderRadius: 132/2 193 | backgroundColor: "rgba(0,0,0,.25)" 194 | html: "Clear Value" 195 | style: 196 | font: "400 32px/88px -apple-system, sans-serif" 197 | textAlign: "center" 198 | boxShadow: "inset 0 0 0 2px #fff" 199 | 200 | buttton_clear.onClick -> 201 | colorInput.clear() 202 | setDefault(colorInput) 203 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.23.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | colorInput.on Events.Input, (value, layer) -> 88 | setDefault @ if @.isEmpty 89 | # print "INPUT", value, layer, @.isEmpty 90 | 91 | colorInput.on Events.Focus, (value, layer) -> 92 | @.color = @.originalTextColor 93 | # print "Blur", value, layer 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | # print "Blur", value, layer 98 | 99 | colorInput.on Events.Valid, (value, layer) -> 100 | setValid @, value 101 | # print "Valid", value, layer 102 | 103 | colorInput.on Events.Invalid, (value, layer) -> 104 | setInvalid @, value 105 | 106 | colorInput.on Events.Invalid, (value, layer) -> 107 | setInvalid @, value 108 | # print "Invalid", value, layer 109 | 110 | colorInput.on Events.Match, (value, layer) -> 111 | setDefault @, value 112 | @.animate properties: 113 | backgroundColor: value 114 | color: "#fff" 115 | Utils.delay 3, => 116 | @.animate properties: 117 | backgroundColor: "#f5f5f5" 118 | color: @.originalTextColor 119 | 120 | ################################################################################ 121 | # DEMO HELPER FUNCTIONS 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | # Checkmark for Valid Answer 149 | 150 | check = new Layer 151 | width: 20 152 | height: 40 153 | rotation: 45 154 | backgroundColor: "" 155 | style: boxShadow: "inset -8px -8px 0 limeGreen" 156 | 157 | check.states.add 158 | valid: opacity: 1, scale: 1 159 | invalid: opacity: 0, scale: .25 160 | check.states.animationOptions = curve: "spring(1000,30,0)" 161 | check.states.switchInstant "invalid" 162 | check.center() 163 | 164 | check.bringToFront() 165 | check.props = 166 | midY: colorInput.midY - 8 167 | maxX: colorInput.maxX - 48 168 | 169 | ################################################################################ 170 | # DEMO FOR CLASS FUNCTIONS 171 | 172 | # Print button 173 | 174 | buttton_read = new Layer 175 | width: Screen.width/3 176 | height: 88 177 | y: 132 + (Screen.width/3)/3 178 | x: (Screen.width/3)/3 179 | borderRadius: 132/2 180 | backgroundColor: "rgba(0,0,0,.25)" 181 | html: "Print Value" 182 | style: 183 | font: "400 32px/88px -apple-system, sans-serif" 184 | textAlign: "center" 185 | boxShadow: "inset 0 0 0 2px #fff" 186 | 187 | buttton_read.onClick -> 188 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 189 | print colorInput.value 190 | 191 | # Clear button 192 | 193 | buttton_clear = new Layer 194 | width: Screen.width/3 195 | height: 88 196 | y: 132 + (Screen.width/3)/3 197 | maxX: Screen.width - (Screen.width/3)/3 198 | borderRadius: 132/2 199 | backgroundColor: "rgba(0,0,0,.25)" 200 | html: "Clear Value" 201 | style: 202 | font: "400 32px/88px -apple-system, sans-serif" 203 | textAlign: "center" 204 | boxShadow: "inset 0 0 0 2px #fff" 205 | 206 | buttton_clear.onClick -> 207 | colorInput.clear() 208 | setDefault(colorInput) 209 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.24.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | colorInput.on Events.Input, (value, layer) -> 88 | setDefault @ if @.isEmpty 89 | # print "INPUT", value, layer, @.isEmpty 90 | 91 | colorInput.on Events.Focus, (value, layer) -> 92 | @.color = @.originalTextColor 93 | # print "Blur", value, layer 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | # print "Blur", value, layer 98 | 99 | colorInput.on Events.Valid, (value, layer) -> 100 | setValid @, value 101 | # print "Valid", value, layer 102 | 103 | colorInput.on Events.Invalid, (value, layer) -> 104 | setInvalid @, value 105 | 106 | colorInput.on Events.Invalid, (value, layer) -> 107 | setInvalid @, value 108 | # print "Invalid", value, layer 109 | 110 | colorInput.on Events.Match, (value, layer) -> 111 | setDefault @, value 112 | @.animate properties: 113 | backgroundColor: value 114 | color: "#fff" 115 | Utils.delay 3, => 116 | @.animate properties: 117 | backgroundColor: "#f5f5f5" 118 | color: @.originalTextColor 119 | 120 | ################################################################################ 121 | # DEMO HELPER FUNCTIONS 122 | 123 | # Text Input Validation Functions 124 | 125 | setDefault = (input, value) -> 126 | check.states.switch "invalid" 127 | input.color = input.originalTextColor 128 | input.backgroundColor = "#f5f5f5" 129 | Screen.backgroundColor = "#808080" 130 | 131 | setValid = (input, value) -> 132 | check.states.switch "valid" 133 | input.color = input.originalTextColor 134 | input.backgroundColor = "#f5f5f5" 135 | Screen.backgroundColor = value 136 | 137 | setInvalid = (input, value) -> 138 | check.states.switch "invalid" 139 | input.backgroundColor = "#f5f5f5" 140 | Screen.backgroundColor = value 141 | Utils.delay 1.5, => 142 | unless input.isValid 143 | input.color = "red" unless input.isEmpty 144 | check.states.switch "invalid" 145 | Screen.backgroundColor = value 146 | 147 | ################################################################################ 148 | # DEMO HELPER CODE FOR CHECKMARK 149 | 150 | # Checkmark for Valid Answer 151 | 152 | check = new Layer 153 | width: 20 154 | height: 40 155 | rotation: 45 156 | backgroundColor: "" 157 | style: boxShadow: "inset -8px -8px 0 limeGreen" 158 | 159 | check.states.add 160 | valid: opacity: 1, scale: 1 161 | invalid: opacity: 0, scale: .25 162 | check.states.animationOptions = curve: "spring(1000,30,0)" 163 | check.states.switchInstant "invalid" 164 | check.center() 165 | 166 | check.bringToFront() 167 | check.props = 168 | midY: colorInput.midY - 8 169 | maxX: colorInput.maxX - 48 170 | 171 | ################################################################################ 172 | # DEMO FOR CLASS FUNCTIONS 173 | 174 | # Print button 175 | 176 | buttton_read = new Layer 177 | width: Screen.width/3 178 | height: 88 179 | y: 132 + (Screen.width/3)/3 180 | x: (Screen.width/3)/3 181 | borderRadius: 132/2 182 | backgroundColor: "rgba(0,0,0,.25)" 183 | html: "Print Value" 184 | style: 185 | font: "400 32px/88px -apple-system, sans-serif" 186 | textAlign: "center" 187 | boxShadow: "inset 0 0 0 2px #fff" 188 | 189 | buttton_read.onClick -> 190 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 191 | print colorInput.value 192 | 193 | # Clear button 194 | 195 | buttton_clear = new Layer 196 | width: Screen.width/3 197 | height: 88 198 | y: 132 + (Screen.width/3)/3 199 | maxX: Screen.width - (Screen.width/3)/3 200 | borderRadius: 132/2 201 | backgroundColor: "rgba(0,0,0,.25)" 202 | html: "Clear Value" 203 | style: 204 | font: "400 32px/88px -apple-system, sans-serif" 205 | textAlign: "center" 206 | boxShadow: "inset 0 0 0 2px #fff" 207 | 208 | buttton_clear.onClick -> 209 | colorInput.clear() 210 | setDefault(colorInput) 211 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.25.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | # InputField Events 88 | 89 | colorInput.on Events.Input, (value, layer) -> 90 | setDefault @ if @.isEmpty 91 | # print "INPUT", value, layer, @.isEmpty 92 | 93 | colorInput.on Events.Focus, (value, layer) -> 94 | @.color = @.originalTextColor 95 | # print "Blur", value, layer 96 | 97 | colorInput.on Events.Blur, (value, layer) -> 98 | @.color = "limeGreen" if @.isValid 99 | # print "Blur", value, layer 100 | 101 | colorInput.on Events.Valid, (value, layer) -> 102 | setValid @, value 103 | # print "Valid", value, layer 104 | 105 | colorInput.on Events.Invalid, (value, layer) -> 106 | setInvalid @, value 107 | 108 | colorInput.on Events.Invalid, (value, layer) -> 109 | setInvalid @, value 110 | # print "Invalid", value, layer 111 | 112 | colorInput.on Events.Match, (value, layer) -> 113 | setDefault @, value 114 | @.animate properties: 115 | backgroundColor: value 116 | color: "#fff" 117 | Utils.delay 3, => 118 | @.animate properties: 119 | backgroundColor: "#f5f5f5" 120 | color: @.originalTextColor 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.26.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | photoSpot = new Layer 43 | width: Screen.width 44 | height: Screen.height/2 45 | image: "" 46 | maxY: Screen.height 47 | backgroundColor: "black" 48 | html: "Add Image" 49 | style: 50 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 51 | textAlign: "center" 52 | 53 | fileInput = new InputField 54 | name: "fileInput" 55 | type: "file-image" 56 | width: Screen.width 57 | parent: photoSpot 58 | 59 | fileInput.on Events.FileData, (value, layer) -> 60 | @.parent.image = value 61 | @.parent.html = "" 62 | 63 | colorInput = new InputField 64 | name: "colorInput" 65 | type: "text" 66 | width: Screen.width 67 | height: 132 68 | y: 0 69 | color: "#696969" 70 | backgroundColor: "#f5f5f5" 71 | indent: 48 72 | fontSize: 48 73 | fontWeight: 600 74 | fontFamily: "Georgia, serif" 75 | placeHolder: "Enter Hexadecimal Color" 76 | placeHolderFocus: "#_ _ _ _ _ _" 77 | placeHolderColor: "silver" 78 | autoCapitalize: false 79 | autoComplete: false 80 | autoCorrect: false 81 | maxLength: 7 82 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 83 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 84 | value: "" 85 | # lineHeight: 30 86 | 87 | # InputField Events 88 | 89 | colorInput.on Events.Input, (value, layer) -> 90 | setDefault @ if @.isEmpty 91 | 92 | colorInput.on Events.Focus, (value, layer) -> 93 | @.color = @.originalTextColor 94 | 95 | colorInput.on Events.Blur, (value, layer) -> 96 | @.color = "limeGreen" if @.isValid 97 | 98 | colorInput.on Events.Valid, (value, layer) -> 99 | setValid @, value 100 | 101 | colorInput.on Events.Invalid, (value, layer) -> 102 | setInvalid @, value 103 | 104 | colorInput.on Events.Match, (value, layer) -> 105 | setDefault @, value 106 | @.animate properties: 107 | backgroundColor: value 108 | color: "#fff" 109 | Utils.delay 3, => 110 | @.animate properties: 111 | backgroundColor: "#f5f5f5" 112 | color: @.originalTextColor 113 | 114 | ################################################################################ 115 | # DEMO HELPER FUNCTIONS 116 | 117 | # Text Input Validation Functions 118 | 119 | setDefault = (input, value) -> 120 | check.states.switch "invalid" 121 | input.color = input.originalTextColor 122 | input.backgroundColor = "#f5f5f5" 123 | Screen.backgroundColor = "#808080" 124 | 125 | setValid = (input, value) -> 126 | check.states.switch "valid" 127 | input.color = input.originalTextColor 128 | input.backgroundColor = "#f5f5f5" 129 | Screen.backgroundColor = value 130 | 131 | setInvalid = (input, value) -> 132 | check.states.switch "invalid" 133 | input.backgroundColor = "#f5f5f5" 134 | Screen.backgroundColor = value 135 | Utils.delay 1.5, => 136 | unless input.isValid 137 | input.color = "red" unless input.isEmpty 138 | check.states.switch "invalid" 139 | Screen.backgroundColor = value 140 | 141 | ################################################################################ 142 | # DEMO HELPER CODE FOR CHECKMARK 143 | 144 | # Checkmark for Valid Answer 145 | 146 | check = new Layer 147 | width: 20 148 | height: 40 149 | rotation: 45 150 | backgroundColor: "" 151 | style: boxShadow: "inset -8px -8px 0 limeGreen" 152 | 153 | check.states.add 154 | valid: opacity: 1, scale: 1 155 | invalid: opacity: 0, scale: .25 156 | check.states.animationOptions = curve: "spring(1000,30,0)" 157 | check.states.switchInstant "invalid" 158 | check.center() 159 | 160 | check.bringToFront() 161 | check.props = 162 | midY: colorInput.midY - 8 163 | maxX: colorInput.maxX - 48 164 | 165 | ################################################################################ 166 | # DEMO FOR CLASS FUNCTIONS 167 | 168 | # Print button 169 | 170 | buttton_read = new Layer 171 | width: Screen.width/3 172 | height: 88 173 | y: 132 + (Screen.width/3)/3 174 | x: (Screen.width/3)/3 175 | borderRadius: 132/2 176 | backgroundColor: "rgba(0,0,0,.25)" 177 | html: "Print Value" 178 | style: 179 | font: "400 32px/88px -apple-system, sans-serif" 180 | textAlign: "center" 181 | boxShadow: "inset 0 0 0 2px #fff" 182 | 183 | buttton_read.onClick -> 184 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 185 | print colorInput.value 186 | 187 | # Clear button 188 | 189 | buttton_clear = new Layer 190 | width: Screen.width/3 191 | height: 88 192 | y: 132 + (Screen.width/3)/3 193 | maxX: Screen.width - (Screen.width/3)/3 194 | borderRadius: 132/2 195 | backgroundColor: "rgba(0,0,0,.25)" 196 | html: "Clear Value" 197 | style: 198 | font: "400 32px/88px -apple-system, sans-serif" 199 | textAlign: "center" 200 | boxShadow: "inset 0 0 0 2px #fff" 201 | 202 | buttton_clear.onClick -> 203 | colorInput.clear() 204 | setDefault(colorInput) 205 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.27.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | ################################################################################ 96 | # DEMO HELPER FUNCTIONS 97 | 98 | # Text Input Validation Functions 99 | 100 | setDefault = (input, value) -> 101 | check.states.switch "invalid" 102 | input.color = input.originalTextColor 103 | input.backgroundColor = "#f5f5f5" 104 | Screen.backgroundColor = "#808080" 105 | 106 | setValid = (input, value) -> 107 | check.states.switch "valid" 108 | input.color = input.originalTextColor 109 | input.backgroundColor = "#f5f5f5" 110 | Screen.backgroundColor = value 111 | 112 | setInvalid = (input, value) -> 113 | check.states.switch "invalid" 114 | input.backgroundColor = "#f5f5f5" 115 | Screen.backgroundColor = value 116 | Utils.delay 1.5, => 117 | unless input.isValid 118 | input.color = "red" unless input.isEmpty 119 | check.states.switch "invalid" 120 | Screen.backgroundColor = value 121 | 122 | ################################################################################ 123 | # DEMO HELPER CODE FOR CHECKMARK 124 | 125 | # Checkmark for Valid Answer 126 | 127 | check = new Layer 128 | width: 20 129 | height: 40 130 | rotation: 45 131 | backgroundColor: "" 132 | style: boxShadow: "inset -8px -8px 0 limeGreen" 133 | 134 | check.states.add 135 | valid: opacity: 1, scale: 1 136 | invalid: opacity: 0, scale: .25 137 | check.states.animationOptions = curve: "spring(1000,30,0)" 138 | check.states.switchInstant "invalid" 139 | check.center() 140 | 141 | check.bringToFront() 142 | check.props = 143 | midY: colorInput.midY - 8 144 | maxX: colorInput.maxX - 48 145 | 146 | ################################################################################ 147 | # DEMO FOR CLASS FUNCTIONS 148 | 149 | # Print button 150 | 151 | buttton_read = new Layer 152 | width: Screen.width/3 153 | height: 88 154 | y: 132 + (Screen.width/3)/3 155 | x: (Screen.width/3)/3 156 | borderRadius: 132/2 157 | backgroundColor: "rgba(0,0,0,.25)" 158 | html: "Print Value" 159 | style: 160 | font: "400 32px/88px -apple-system, sans-serif" 161 | textAlign: "center" 162 | boxShadow: "inset 0 0 0 2px #fff" 163 | 164 | buttton_read.onClick -> 165 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 166 | print colorInput.value 167 | 168 | # Clear button 169 | 170 | buttton_clear = new Layer 171 | width: Screen.width/3 172 | height: 88 173 | y: 132 + (Screen.width/3)/3 174 | maxX: Screen.width - (Screen.width/3)/3 175 | borderRadius: 132/2 176 | backgroundColor: "rgba(0,0,0,.25)" 177 | html: "Clear Value" 178 | style: 179 | font: "400 32px/88px -apple-system, sans-serif" 180 | textAlign: "center" 181 | boxShadow: "inset 0 0 0 2px #fff" 182 | 183 | buttton_clear.onClick -> 184 | colorInput.clear() 185 | setDefault(colorInput) 186 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.28.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | imagePlaceholde = new Layer 96 | width: Screen.width 97 | height: Screen.height/2 98 | image: "" 99 | maxY: Screen.height 100 | backgroundColor: "black" 101 | html: "Add Image" 102 | style: 103 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 104 | textAlign: "center" 105 | 106 | fileInput = new InputField 107 | name: "fileInput" 108 | type: "file-image" 109 | width: Screen.width 110 | parent: photoSpot 111 | 112 | fileInput.on Events.FileData, (value, layer) -> 113 | @.parent.image = value 114 | @.parent.html = "" 115 | 116 | ################################################################################ 117 | # DEMO HELPER FUNCTIONS 118 | 119 | # Text Input Validation Functions 120 | 121 | setDefault = (input, value) -> 122 | check.states.switch "invalid" 123 | input.color = input.originalTextColor 124 | input.backgroundColor = "#f5f5f5" 125 | Screen.backgroundColor = "#808080" 126 | 127 | setValid = (input, value) -> 128 | check.states.switch "valid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = value 132 | 133 | setInvalid = (input, value) -> 134 | check.states.switch "invalid" 135 | input.backgroundColor = "#f5f5f5" 136 | Screen.backgroundColor = value 137 | Utils.delay 1.5, => 138 | unless input.isValid 139 | input.color = "red" unless input.isEmpty 140 | check.states.switch "invalid" 141 | Screen.backgroundColor = value 142 | 143 | ################################################################################ 144 | # DEMO HELPER CODE FOR CHECKMARK 145 | 146 | # Checkmark for Valid Answer 147 | 148 | check = new Layer 149 | width: 20 150 | height: 40 151 | rotation: 45 152 | backgroundColor: "" 153 | style: boxShadow: "inset -8px -8px 0 limeGreen" 154 | 155 | check.states.add 156 | valid: opacity: 1, scale: 1 157 | invalid: opacity: 0, scale: .25 158 | check.states.animationOptions = curve: "spring(1000,30,0)" 159 | check.states.switchInstant "invalid" 160 | check.center() 161 | 162 | check.bringToFront() 163 | check.props = 164 | midY: colorInput.midY - 8 165 | maxX: colorInput.maxX - 48 166 | 167 | ################################################################################ 168 | # DEMO FOR CLASS FUNCTIONS 169 | 170 | # Print button 171 | 172 | buttton_read = new Layer 173 | width: Screen.width/3 174 | height: 88 175 | y: 132 + (Screen.width/3)/3 176 | x: (Screen.width/3)/3 177 | borderRadius: 132/2 178 | backgroundColor: "rgba(0,0,0,.25)" 179 | html: "Print Value" 180 | style: 181 | font: "400 32px/88px -apple-system, sans-serif" 182 | textAlign: "center" 183 | boxShadow: "inset 0 0 0 2px #fff" 184 | 185 | buttton_read.onClick -> 186 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 187 | print colorInput.value 188 | 189 | # Clear button 190 | 191 | buttton_clear = new Layer 192 | width: Screen.width/3 193 | height: 88 194 | y: 132 + (Screen.width/3)/3 195 | maxX: Screen.width - (Screen.width/3)/3 196 | borderRadius: 132/2 197 | backgroundColor: "rgba(0,0,0,.25)" 198 | html: "Clear Value" 199 | style: 200 | font: "400 32px/88px -apple-system, sans-serif" 201 | textAlign: "center" 202 | boxShadow: "inset 0 0 0 2px #fff" 203 | 204 | buttton_clear.onClick -> 205 | colorInput.clear() 206 | setDefault(colorInput) 207 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.29.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | fileInput.on Events.FileData, (value, layer) -> 115 | @.parent.image = value 116 | @.parent.html = "" 117 | 118 | ################################################################################ 119 | # DEMO HELPER FUNCTIONS 120 | 121 | # Text Input Validation Functions 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | # Checkmark for Valid Answer 149 | 150 | check = new Layer 151 | width: 20 152 | height: 40 153 | rotation: 45 154 | backgroundColor: "" 155 | style: boxShadow: "inset -8px -8px 0 limeGreen" 156 | 157 | check.states.add 158 | valid: opacity: 1, scale: 1 159 | invalid: opacity: 0, scale: .25 160 | check.states.animationOptions = curve: "spring(1000,30,0)" 161 | check.states.switchInstant "invalid" 162 | check.center() 163 | 164 | check.bringToFront() 165 | check.props = 166 | midY: colorInput.midY - 8 167 | maxX: colorInput.maxX - 48 168 | 169 | ################################################################################ 170 | # DEMO FOR CLASS FUNCTIONS 171 | 172 | # Print button 173 | 174 | buttton_read = new Layer 175 | width: Screen.width/3 176 | height: 88 177 | y: 132 + (Screen.width/3)/3 178 | x: (Screen.width/3)/3 179 | borderRadius: 132/2 180 | backgroundColor: "rgba(0,0,0,.25)" 181 | html: "Print Value" 182 | style: 183 | font: "400 32px/88px -apple-system, sans-serif" 184 | textAlign: "center" 185 | boxShadow: "inset 0 0 0 2px #fff" 186 | 187 | buttton_read.onClick -> 188 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 189 | print colorInput.value 190 | 191 | # Clear button 192 | 193 | buttton_clear = new Layer 194 | width: Screen.width/3 195 | height: 88 196 | y: 132 + (Screen.width/3)/3 197 | maxX: Screen.width - (Screen.width/3)/3 198 | borderRadius: 132/2 199 | backgroundColor: "rgba(0,0,0,.25)" 200 | html: "Clear Value" 201 | style: 202 | font: "400 32px/88px -apple-system, sans-serif" 203 | textAlign: "center" 204 | boxShadow: "inset 0 0 0 2px #fff" 205 | 206 | buttton_clear.onClick -> 207 | colorInput.clear() 208 | setDefault(colorInput) 209 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.30.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance - file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | fileInput.on Events.FileData, (value, layer) -> 115 | @.parent.image = value 116 | @.parent.html = "" 117 | 118 | ################################################################################ 119 | # DEMO HELPER FUNCTIONS 120 | 121 | # Text Input Validation Functions 122 | 123 | setDefault = (input, value) -> 124 | check.states.switch "invalid" 125 | input.color = input.originalTextColor 126 | input.backgroundColor = "#f5f5f5" 127 | Screen.backgroundColor = "#808080" 128 | 129 | setValid = (input, value) -> 130 | check.states.switch "valid" 131 | input.color = input.originalTextColor 132 | input.backgroundColor = "#f5f5f5" 133 | Screen.backgroundColor = value 134 | 135 | setInvalid = (input, value) -> 136 | check.states.switch "invalid" 137 | input.backgroundColor = "#f5f5f5" 138 | Screen.backgroundColor = value 139 | Utils.delay 1.5, => 140 | unless input.isValid 141 | input.color = "red" unless input.isEmpty 142 | check.states.switch "invalid" 143 | Screen.backgroundColor = value 144 | 145 | ################################################################################ 146 | # DEMO HELPER CODE FOR CHECKMARK 147 | 148 | # Checkmark for Valid Answer 149 | 150 | check = new Layer 151 | width: 20 152 | height: 40 153 | rotation: 45 154 | backgroundColor: "" 155 | style: boxShadow: "inset -8px -8px 0 limeGreen" 156 | 157 | check.states.add 158 | valid: opacity: 1, scale: 1 159 | invalid: opacity: 0, scale: .25 160 | check.states.animationOptions = curve: "spring(1000,30,0)" 161 | check.states.switchInstant "invalid" 162 | check.center() 163 | 164 | check.bringToFront() 165 | check.props = 166 | midY: colorInput.midY - 8 167 | maxX: colorInput.maxX - 48 168 | 169 | ################################################################################ 170 | # DEMO FOR CLASS FUNCTIONS 171 | 172 | # Print button 173 | 174 | buttton_read = new Layer 175 | width: Screen.width/3 176 | height: 88 177 | y: 132 + (Screen.width/3)/3 178 | x: (Screen.width/3)/3 179 | borderRadius: 132/2 180 | backgroundColor: "rgba(0,0,0,.25)" 181 | html: "Print Value" 182 | style: 183 | font: "400 32px/88px -apple-system, sans-serif" 184 | textAlign: "center" 185 | boxShadow: "inset 0 0 0 2px #fff" 186 | 187 | buttton_read.onClick -> 188 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 189 | print colorInput.value 190 | 191 | # Clear button 192 | 193 | buttton_clear = new Layer 194 | width: Screen.width/3 195 | height: 88 196 | y: 132 + (Screen.width/3)/3 197 | maxX: Screen.width - (Screen.width/3)/3 198 | borderRadius: 132/2 199 | backgroundColor: "rgba(0,0,0,.25)" 200 | html: "Clear Value" 201 | style: 202 | font: "400 32px/88px -apple-system, sans-serif" 203 | textAlign: "center" 204 | boxShadow: "inset 0 0 0 2px #fff" 205 | 206 | buttton_clear.onClick -> 207 | colorInput.clear() 208 | setDefault(colorInput) 209 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.31.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance of file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | 115 | 116 | # InputField Instance of file-image - Events 117 | 118 | fileInput.on Events.FileData, (value, layer) -> 119 | @.parent.image = value 120 | @.parent.html = "" 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.32.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance - text 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance - text - Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | 115 | 116 | # InputField Instance of file-image - Events 117 | 118 | fileInput.on Events.FileData, (value, layer) -> 119 | @.parent.image = value 120 | @.parent.html = "" 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.33.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance: text 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance: text - Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance: file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | 115 | 116 | # InputField Instance: file-image - Events 117 | 118 | fileInput.on Events.FileData, (value, layer) -> 119 | @.parent.image = value 120 | @.parent.html = "" 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.34.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. Ask 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 28 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance: text 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance: text - Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance: file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | 115 | 116 | # InputField Instance: file-image - Events 117 | 118 | fileInput.on Events.FileData, (value, layer) -> 119 | @.parent.image = value 120 | @.parent.html = "" 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.35.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | Screen.backgroundColor = "#808080" 8 | 9 | ################################################################################ 10 | # Build the text inputs 11 | # 12 | # Valid & Tested InputField Types: 13 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 14 | # "time", "month", "date", "datetime-local" 15 | # 16 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 17 | # 18 | # Here's a few examples to use for the value: property when you create them. 19 | # * time: "12:38" 20 | # * month: "2016-01" 21 | # * date: "2016-01-04" 22 | # * datetime-local: "2016-01-04T12:44:31.192" 23 | # 24 | # NOTES / 25 | # Some types work better than others on mobile or display differently than desktop. 26 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 27 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 28 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 29 | # 30 | # TO DO - Textarea or Content Editable 31 | # 32 | ################################################################################ 33 | # SIMPLE EXAMPLE 34 | # myInput = new InputField 35 | # width: 300 36 | # height: 88 37 | # backgroundColor: "white" 38 | 39 | ################################################################################ 40 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 41 | 42 | # InputField Instance: text 43 | 44 | colorInput = new InputField 45 | name: "colorInput" 46 | type: "text" 47 | width: Screen.width 48 | height: 132 49 | y: 0 50 | color: "#696969" 51 | backgroundColor: "#f5f5f5" 52 | indent: 48 53 | fontSize: 48 54 | fontWeight: 600 55 | fontFamily: "Georgia, serif" 56 | placeHolder: "Enter Hexadecimal Color" 57 | placeHolderFocus: "#_ _ _ _ _ _" 58 | placeHolderColor: "silver" 59 | autoCapitalize: false 60 | autoComplete: false 61 | autoCorrect: false 62 | maxLength: 7 63 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 64 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 65 | value: "" 66 | # lineHeight: 30 67 | 68 | # InputField Instance: text - Events 69 | 70 | colorInput.on Events.Input, (value, layer) -> 71 | setDefault @ if @.isEmpty 72 | 73 | colorInput.on Events.Focus, (value, layer) -> 74 | @.color = @.originalTextColor 75 | 76 | colorInput.on Events.Blur, (value, layer) -> 77 | @.color = "limeGreen" if @.isValid 78 | 79 | colorInput.on Events.Valid, (value, layer) -> 80 | setValid @, value 81 | 82 | colorInput.on Events.Invalid, (value, layer) -> 83 | setInvalid @, value 84 | 85 | colorInput.on Events.Match, (value, layer) -> 86 | setDefault @, value 87 | @.animate properties: 88 | backgroundColor: value 89 | color: "#fff" 90 | Utils.delay 3, => 91 | @.animate properties: 92 | backgroundColor: "#f5f5f5" 93 | color: @.originalTextColor 94 | 95 | # InputField Instance: file-image 96 | 97 | imagePlaceholder = new Layer 98 | width: Screen.width 99 | height: Screen.height/2 100 | image: "" 101 | maxY: Screen.height 102 | backgroundColor: "black" 103 | html: "Add Image" 104 | style: 105 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 106 | textAlign: "center" 107 | 108 | fileInput = new InputField 109 | name: "fileInput" 110 | type: "file-image" 111 | width: Screen.width 112 | parent: imagePlaceholder 113 | 114 | 115 | 116 | # InputField Instance: file-image - Events 117 | 118 | fileInput.on Events.FileData, (value, layer) -> 119 | @.parent.image = value 120 | @.parent.html = "" 121 | 122 | ################################################################################ 123 | # DEMO HELPER FUNCTIONS 124 | 125 | # Text Input Validation Functions 126 | 127 | setDefault = (input, value) -> 128 | check.states.switch "invalid" 129 | input.color = input.originalTextColor 130 | input.backgroundColor = "#f5f5f5" 131 | Screen.backgroundColor = "#808080" 132 | 133 | setValid = (input, value) -> 134 | check.states.switch "valid" 135 | input.color = input.originalTextColor 136 | input.backgroundColor = "#f5f5f5" 137 | Screen.backgroundColor = value 138 | 139 | setInvalid = (input, value) -> 140 | check.states.switch "invalid" 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | Utils.delay 1.5, => 144 | unless input.isValid 145 | input.color = "red" unless input.isEmpty 146 | check.states.switch "invalid" 147 | Screen.backgroundColor = value 148 | 149 | ################################################################################ 150 | # DEMO HELPER CODE FOR CHECKMARK 151 | 152 | # Checkmark for Valid Answer 153 | 154 | check = new Layer 155 | width: 20 156 | height: 40 157 | rotation: 45 158 | backgroundColor: "" 159 | style: boxShadow: "inset -8px -8px 0 limeGreen" 160 | 161 | check.states.add 162 | valid: opacity: 1, scale: 1 163 | invalid: opacity: 0, scale: .25 164 | check.states.animationOptions = curve: "spring(1000,30,0)" 165 | check.states.switchInstant "invalid" 166 | check.center() 167 | 168 | check.bringToFront() 169 | check.props = 170 | midY: colorInput.midY - 8 171 | maxX: colorInput.maxX - 48 172 | 173 | ################################################################################ 174 | # DEMO FOR CLASS FUNCTIONS 175 | 176 | # Print button 177 | 178 | buttton_read = new Layer 179 | width: Screen.width/3 180 | height: 88 181 | y: 132 + (Screen.width/3)/3 182 | x: (Screen.width/3)/3 183 | borderRadius: 132/2 184 | backgroundColor: "rgba(0,0,0,.25)" 185 | html: "Print Value" 186 | style: 187 | font: "400 32px/88px -apple-system, sans-serif" 188 | textAlign: "center" 189 | boxShadow: "inset 0 0 0 2px #fff" 190 | 191 | buttton_read.onClick -> 192 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 193 | print colorInput.value 194 | 195 | # Clear button 196 | 197 | buttton_clear = new Layer 198 | width: Screen.width/3 199 | height: 88 200 | y: 132 + (Screen.width/3)/3 201 | maxX: Screen.width - (Screen.width/3)/3 202 | borderRadius: 132/2 203 | backgroundColor: "rgba(0,0,0,.25)" 204 | html: "Clear Value" 205 | style: 206 | font: "400 32px/88px -apple-system, sans-serif" 207 | textAlign: "center" 208 | boxShadow: "inset 0 0 0 2px #fff" 209 | 210 | buttton_clear.onClick -> 211 | colorInput.clear() 212 | setDefault(colorInput) 213 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.36.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | # TO DO - Textarea or Content Editable 8 | # TO DO - Post to Github 9 | 10 | ################################################################################ 11 | 12 | Screen.backgroundColor = "#808080" 13 | 14 | ################################################################################ 15 | # Build the text inputs 16 | # 17 | # Valid & Tested InputField Types: 18 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 19 | # "time", "month", "date", "datetime-local" 20 | # 21 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 22 | # 23 | # Here's a few examples to use for the value: property when you create them. 24 | # * time: "12:38" 25 | # * month: "2016-01" 26 | # * date: "2016-01-04" 27 | # * datetime-local: "2016-01-04T12:44:31.192" 28 | # 29 | # NOTES / 30 | # Some types work better than others on mobile or display differently than desktop. 31 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 32 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 33 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 34 | # 35 | ################################################################################ 36 | # SIMPLE EXAMPLE 37 | # myInput = new InputField 38 | # width: 300 39 | # height: 88 40 | # backgroundColor: "white" 41 | 42 | ################################################################################ 43 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 44 | 45 | # InputField Instance: text 46 | 47 | colorInput = new InputField 48 | name: "colorInput" 49 | type: "text" 50 | width: Screen.width 51 | height: 132 52 | y: 0 53 | color: "#696969" 54 | backgroundColor: "#f5f5f5" 55 | indent: 48 56 | fontSize: 48 57 | fontWeight: 600 58 | fontFamily: "Georgia, serif" 59 | placeHolder: "Enter Hexadecimal Color" 60 | placeHolderFocus: "#_ _ _ _ _ _" 61 | placeHolderColor: "silver" 62 | autoCapitalize: false 63 | autoComplete: false 64 | autoCorrect: false 65 | maxLength: 7 66 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 67 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 68 | value: "" 69 | # lineHeight: 30 70 | 71 | # InputField Instance: text - Events 72 | 73 | colorInput.on Events.Input, (value, layer) -> 74 | setDefault @ if @.isEmpty 75 | 76 | colorInput.on Events.Focus, (value, layer) -> 77 | @.color = @.originalTextColor 78 | 79 | colorInput.on Events.Blur, (value, layer) -> 80 | @.color = "limeGreen" if @.isValid 81 | 82 | colorInput.on Events.Valid, (value, layer) -> 83 | setValid @, value 84 | 85 | colorInput.on Events.Invalid, (value, layer) -> 86 | setInvalid @, value 87 | 88 | colorInput.on Events.Match, (value, layer) -> 89 | setDefault @, value 90 | @.animate properties: 91 | backgroundColor: value 92 | color: "#fff" 93 | Utils.delay 3, => 94 | @.animate properties: 95 | backgroundColor: "#f5f5f5" 96 | color: @.originalTextColor 97 | 98 | # InputField Instance: file-image 99 | 100 | imagePlaceholder = new Layer 101 | width: Screen.width 102 | height: Screen.height/2 103 | image: "" 104 | maxY: Screen.height 105 | backgroundColor: "black" 106 | html: "Add Image" 107 | style: 108 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 109 | textAlign: "center" 110 | 111 | fileInput = new InputField 112 | name: "fileInput" 113 | type: "file-image" 114 | width: Screen.width 115 | parent: imagePlaceholder 116 | 117 | 118 | 119 | # InputField Instance: file-image - Events 120 | 121 | fileInput.on Events.FileData, (value, layer) -> 122 | @.parent.image = value 123 | @.parent.html = "" 124 | 125 | ################################################################################ 126 | # DEMO HELPER FUNCTIONS 127 | 128 | # Text Input Validation Functions 129 | 130 | setDefault = (input, value) -> 131 | check.states.switch "invalid" 132 | input.color = input.originalTextColor 133 | input.backgroundColor = "#f5f5f5" 134 | Screen.backgroundColor = "#808080" 135 | 136 | setValid = (input, value) -> 137 | check.states.switch "valid" 138 | input.color = input.originalTextColor 139 | input.backgroundColor = "#f5f5f5" 140 | Screen.backgroundColor = value 141 | 142 | setInvalid = (input, value) -> 143 | check.states.switch "invalid" 144 | input.backgroundColor = "#f5f5f5" 145 | Screen.backgroundColor = value 146 | Utils.delay 1.5, => 147 | unless input.isValid 148 | input.color = "red" unless input.isEmpty 149 | check.states.switch "invalid" 150 | Screen.backgroundColor = value 151 | 152 | ################################################################################ 153 | # DEMO HELPER CODE FOR CHECKMARK 154 | 155 | # Checkmark for Valid Answer 156 | 157 | check = new Layer 158 | width: 20 159 | height: 40 160 | rotation: 45 161 | backgroundColor: "" 162 | style: boxShadow: "inset -8px -8px 0 limeGreen" 163 | 164 | check.states.add 165 | valid: opacity: 1, scale: 1 166 | invalid: opacity: 0, scale: .25 167 | check.states.animationOptions = curve: "spring(1000,30,0)" 168 | check.states.switchInstant "invalid" 169 | check.center() 170 | 171 | check.bringToFront() 172 | check.props = 173 | midY: colorInput.midY - 8 174 | maxX: colorInput.maxX - 48 175 | 176 | ################################################################################ 177 | # DEMO FOR CLASS FUNCTIONS 178 | 179 | # Print button 180 | 181 | buttton_read = new Layer 182 | width: Screen.width/3 183 | height: 88 184 | y: 132 + (Screen.width/3)/3 185 | x: (Screen.width/3)/3 186 | borderRadius: 132/2 187 | backgroundColor: "rgba(0,0,0,.25)" 188 | html: "Print Value" 189 | style: 190 | font: "400 32px/88px -apple-system, sans-serif" 191 | textAlign: "center" 192 | boxShadow: "inset 0 0 0 2px #fff" 193 | 194 | buttton_read.onClick -> 195 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 196 | print colorInput.value 197 | 198 | # Clear button 199 | 200 | buttton_clear = new Layer 201 | width: Screen.width/3 202 | height: 88 203 | y: 132 + (Screen.width/3)/3 204 | maxX: Screen.width - (Screen.width/3)/3 205 | borderRadius: 132/2 206 | backgroundColor: "rgba(0,0,0,.25)" 207 | html: "Clear Value" 208 | style: 209 | font: "400 32px/88px -apple-system, sans-serif" 210 | textAlign: "center" 211 | boxShadow: "inset 0 0 0 2px #fff" 212 | 213 | buttton_clear.onClick -> 214 | colorInput.clear() 215 | setDefault(colorInput) 216 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.37.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | # TO DO - Textarea or Content Editable 8 | # TO DO - Post to Github 9 | 10 | ################################################################################ 11 | 12 | Screen.backgroundColor = "#808080" 13 | 14 | ################################################################################ 15 | # Build the text inputs 16 | # 17 | # Valid & Tested InputField Types: 18 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 19 | # "time", "month", "date", "datetime-local" 20 | # 21 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 22 | # 23 | # Here's a few examples to use for the value: property when you create them. 24 | # * time: "12:38" 25 | # * month: "2016-01" 26 | # * date: "2016-01-04" 27 | # * datetime-local: "2016-01-04T12:44:31.192" 28 | # 29 | # NOTES / 30 | # Some types work better than others on mobile or display differently than desktop. 31 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 32 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 33 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 34 | # 35 | ################################################################################ 36 | # SIMPLE EXAMPLE 37 | # myInput = new InputField 38 | # width: 300 39 | # height: 88 40 | # backgroundColor: "white" 41 | # 42 | ################################################################################ 43 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 44 | 45 | # InputField Instance: text 46 | 47 | colorInput = new InputField 48 | name: "colorInput" 49 | type: "text" 50 | width: Screen.width 51 | height: 132 52 | y: 0 53 | color: "#696969" 54 | backgroundColor: "#f5f5f5" 55 | indent: 48 56 | fontSize: 48 57 | fontWeight: 600 58 | fontFamily: "Georgia, serif" 59 | placeHolder: "Enter Hexadecimal Color" 60 | placeHolderFocus: "#_ _ _ _ _ _" 61 | placeHolderColor: "silver" 62 | autoCapitalize: false 63 | autoComplete: false 64 | autoCorrect: false 65 | maxLength: 7 66 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 67 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 68 | value: "" 69 | # lineHeight: 30 70 | 71 | # InputField Instance: text - Events 72 | 73 | colorInput.on Events.Input, (value, layer) -> 74 | setDefault @ if @.isEmpty 75 | 76 | colorInput.on Events.Focus, (value, layer) -> 77 | @.color = @.originalTextColor 78 | 79 | colorInput.on Events.Blur, (value, layer) -> 80 | @.color = "limeGreen" if @.isValid 81 | 82 | colorInput.on Events.Valid, (value, layer) -> 83 | setValid @, value 84 | 85 | colorInput.on Events.Invalid, (value, layer) -> 86 | setInvalid @, value 87 | 88 | colorInput.on Events.Match, (value, layer) -> 89 | setDefault @, value 90 | @.animate properties: 91 | backgroundColor: value 92 | color: "#fff" 93 | Utils.delay 3, => 94 | @.animate properties: 95 | backgroundColor: "#f5f5f5" 96 | color: @.originalTextColor 97 | 98 | # InputField Instance: file-image 99 | 100 | imagePlaceholder = new Layer 101 | width: Screen.width 102 | height: Screen.height/2 103 | image: "" 104 | maxY: Screen.height 105 | backgroundColor: "black" 106 | html: "Add Image" 107 | style: 108 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 109 | textAlign: "center" 110 | 111 | fileInput = new InputField 112 | name: "fileInput" 113 | type: "file-image" 114 | width: Screen.width 115 | parent: imagePlaceholder 116 | 117 | 118 | 119 | # InputField Instance: file-image - Events 120 | 121 | fileInput.on Events.FileData, (value, layer) -> 122 | @.parent.image = value 123 | @.parent.html = "" 124 | 125 | ################################################################################ 126 | # DEMO HELPER FUNCTIONS 127 | 128 | # Text Input Validation Functions 129 | 130 | setDefault = (input, value) -> 131 | check.states.switch "invalid" 132 | input.color = input.originalTextColor 133 | input.backgroundColor = "#f5f5f5" 134 | Screen.backgroundColor = "#808080" 135 | 136 | setValid = (input, value) -> 137 | check.states.switch "valid" 138 | input.color = input.originalTextColor 139 | input.backgroundColor = "#f5f5f5" 140 | Screen.backgroundColor = value 141 | 142 | setInvalid = (input, value) -> 143 | check.states.switch "invalid" 144 | input.backgroundColor = "#f5f5f5" 145 | Screen.backgroundColor = value 146 | Utils.delay 1.5, => 147 | unless input.isValid 148 | input.color = "red" unless input.isEmpty 149 | check.states.switch "invalid" 150 | Screen.backgroundColor = value 151 | 152 | ################################################################################ 153 | # DEMO HELPER CODE FOR CHECKMARK 154 | 155 | # Checkmark for Valid Answer 156 | 157 | check = new Layer 158 | width: 20 159 | height: 40 160 | rotation: 45 161 | backgroundColor: "" 162 | style: boxShadow: "inset -8px -8px 0 limeGreen" 163 | 164 | check.states.add 165 | valid: opacity: 1, scale: 1 166 | invalid: opacity: 0, scale: .25 167 | check.states.animationOptions = curve: "spring(1000,30,0)" 168 | check.states.switchInstant "invalid" 169 | check.center() 170 | 171 | check.bringToFront() 172 | check.props = 173 | midY: colorInput.midY - 8 174 | maxX: colorInput.maxX - 48 175 | 176 | ################################################################################ 177 | # DEMO FOR CLASS FUNCTIONS 178 | 179 | # Print button 180 | 181 | buttton_read = new Layer 182 | width: Screen.width/3 183 | height: 88 184 | y: 132 + (Screen.width/3)/3 185 | x: (Screen.width/3)/3 186 | borderRadius: 132/2 187 | backgroundColor: "rgba(0,0,0,.25)" 188 | html: "Print Value" 189 | style: 190 | font: "400 32px/88px -apple-system, sans-serif" 191 | textAlign: "center" 192 | boxShadow: "inset 0 0 0 2px #fff" 193 | 194 | buttton_read.onClick -> 195 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 196 | print colorInput.value 197 | 198 | # Clear button 199 | 200 | buttton_clear = new Layer 201 | width: Screen.width/3 202 | height: 88 203 | y: 132 + (Screen.width/3)/3 204 | maxX: Screen.width - (Screen.width/3)/3 205 | borderRadius: 132/2 206 | backgroundColor: "rgba(0,0,0,.25)" 207 | html: "Clear Value" 208 | style: 209 | font: "400 32px/88px -apple-system, sans-serif" 210 | textAlign: "center" 211 | boxShadow: "inset 0 0 0 2px #fff" 212 | 213 | buttton_clear.onClick -> 214 | colorInput.clear() 215 | setDefault(colorInput) 216 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 16.56.39.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | # TO DO - Textarea or Content Editable 8 | # TO DO - Post to Github 9 | 10 | ################################################################################ 11 | 12 | Screen.backgroundColor = "#808080" 13 | 14 | ################################################################################ 15 | # Build the text inputs 16 | # 17 | # Valid & Tested InputField Types: 18 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 19 | # "time", "month", "date", "datetime-local" 20 | # 21 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 22 | # 23 | # Here's a few examples to use for the value: property when you create them. 24 | # * time: "12:38" 25 | # * month: "2016-01" 26 | # * date: "2016-01-04" 27 | # * datetime-local: "2016-01-04T12:44:31.192" 28 | # 29 | # NOTES / 30 | # Some types work better than others on mobile or display differently than desktop. 31 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 32 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 33 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 34 | # 35 | ################################################################################ 36 | # SIMPLE EXAMPLE 37 | # myInput = new InputField 38 | # width: 300 39 | # height: 88 40 | # backgroundColor: "white" 41 | # 42 | ################################################################################ 43 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 44 | 45 | # InputField Instance: text 46 | 47 | colorInput = new InputField 48 | name: "colorInput" 49 | type: "text" 50 | width: Screen.width 51 | height: 132 52 | y: 0 53 | color: "#696969" 54 | backgroundColor: "#f5f5f5" 55 | indent: 48 56 | fontSize: 48 57 | fontWeight: 600 58 | fontFamily: "Georgia, serif" 59 | placeHolder: "Enter Hexadecimal Color" 60 | placeHolderFocus: "#_ _ _ _ _ _" 61 | placeHolderColor: "silver" 62 | autoCapitalize: false 63 | autoComplete: false 64 | autoCorrect: false 65 | maxLength: 7 66 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 67 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 68 | value: "" 69 | # lineHeight: 30 70 | 71 | # InputField Instance: text - Events 72 | 73 | colorInput.on Events.Input, (value, layer) -> 74 | setDefault @ if @.isEmpty 75 | 76 | colorInput.on Events.Focus, (value, layer) -> 77 | @.color = @.originalTextColor 78 | 79 | colorInput.on Events.Blur, (value, layer) -> 80 | @.color = "limeGreen" if @.isValid 81 | 82 | colorInput.on Events.Valid, (value, layer) -> 83 | setValid @, value 84 | 85 | colorInput.on Events.Invalid, (value, layer) -> 86 | setInvalid @, value 87 | 88 | colorInput.on Events.Match, (value, layer) -> 89 | setDefault @, value 90 | @.animate properties: 91 | backgroundColor: value 92 | color: "#fff" 93 | Utils.delay 3, => 94 | @.animate properties: 95 | backgroundColor: "#f5f5f5" 96 | color: @.originalTextColor 97 | 98 | ################################################################################ 99 | 100 | # InputField Instance: file-image 101 | 102 | imagePlaceholder = new Layer 103 | width: Screen.width 104 | height: Screen.height/2 105 | image: "" 106 | maxY: Screen.height 107 | backgroundColor: "black" 108 | html: "Add Image" 109 | style: 110 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 111 | textAlign: "center" 112 | 113 | fileInput = new InputField 114 | name: "fileInput" 115 | type: "file-image" 116 | width: Screen.width 117 | parent: imagePlaceholder 118 | 119 | 120 | 121 | # InputField Instance: file-image - Events 122 | 123 | fileInput.on Events.FileData, (value, layer) -> 124 | @.parent.image = value 125 | @.parent.html = "" 126 | 127 | ################################################################################ 128 | # DEMO HELPER FUNCTIONS 129 | 130 | # Text Input Validation Functions 131 | 132 | setDefault = (input, value) -> 133 | check.states.switch "invalid" 134 | input.color = input.originalTextColor 135 | input.backgroundColor = "#f5f5f5" 136 | Screen.backgroundColor = "#808080" 137 | 138 | setValid = (input, value) -> 139 | check.states.switch "valid" 140 | input.color = input.originalTextColor 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | 144 | setInvalid = (input, value) -> 145 | check.states.switch "invalid" 146 | input.backgroundColor = "#f5f5f5" 147 | Screen.backgroundColor = value 148 | Utils.delay 1.5, => 149 | unless input.isValid 150 | input.color = "red" unless input.isEmpty 151 | check.states.switch "invalid" 152 | Screen.backgroundColor = value 153 | 154 | ################################################################################ 155 | # DEMO HELPER CODE FOR CHECKMARK 156 | 157 | # Checkmark for Valid Answer 158 | 159 | check = new Layer 160 | width: 20 161 | height: 40 162 | rotation: 45 163 | backgroundColor: "" 164 | style: boxShadow: "inset -8px -8px 0 limeGreen" 165 | 166 | check.states.add 167 | valid: opacity: 1, scale: 1 168 | invalid: opacity: 0, scale: .25 169 | check.states.animationOptions = curve: "spring(1000,30,0)" 170 | check.states.switchInstant "invalid" 171 | check.center() 172 | 173 | check.bringToFront() 174 | check.props = 175 | midY: colorInput.midY - 8 176 | maxX: colorInput.maxX - 48 177 | 178 | ################################################################################ 179 | # DEMO FOR CLASS FUNCTIONS 180 | 181 | # Print button 182 | 183 | buttton_read = new Layer 184 | width: Screen.width/3 185 | height: 88 186 | y: 132 + (Screen.width/3)/3 187 | x: (Screen.width/3)/3 188 | borderRadius: 132/2 189 | backgroundColor: "rgba(0,0,0,.25)" 190 | html: "Print Value" 191 | style: 192 | font: "400 32px/88px -apple-system, sans-serif" 193 | textAlign: "center" 194 | boxShadow: "inset 0 0 0 2px #fff" 195 | 196 | buttton_read.onClick -> 197 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 198 | print colorInput.value 199 | 200 | # Clear button 201 | 202 | buttton_clear = new Layer 203 | width: Screen.width/3 204 | height: 88 205 | y: 132 + (Screen.width/3)/3 206 | maxX: Screen.width - (Screen.width/3)/3 207 | borderRadius: 132/2 208 | backgroundColor: "rgba(0,0,0,.25)" 209 | html: "Clear Value" 210 | style: 211 | font: "400 32px/88px -apple-system, sans-serif" 212 | textAlign: "center" 213 | boxShadow: "inset 0 0 0 2px #fff" 214 | 215 | buttton_clear.onClick -> 216 | colorInput.clear() 217 | setDefault(colorInput) 218 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/backups/backup-2016-06-23 17.03.13.coffee: -------------------------------------------------------------------------------- 1 | {InputField} = require 'InputField' 2 | 3 | ################################################################################ 4 | # Updated 04 APR 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 5 | ################################################################################ 6 | 7 | # TO DO - Textarea or Content Editable 8 | # TO DO - Post to Github 9 | 10 | ################################################################################ 11 | 12 | Screen.backgroundColor = "#808080" 13 | 14 | ################################################################################ 15 | # Build the text inputs 16 | # 17 | # Valid & Tested InputField Types: 18 | # "text", "email", "number", "number-only", "url", "tel", "password", "search", file, file-multiple, file-image, file-video 19 | # "time", "month", "date", "datetime-local" 20 | # 21 | # The time & date types REQUIRE the value property is in a correct format & IGNORES the placeholder property. 22 | # 23 | # Here's a few examples to use for the value: property when you create them. 24 | # * time: "12:38" 25 | # * month: "2016-01" 26 | # * date: "2016-01-04" 27 | # * datetime-local: "2016-01-04T12:44:31.192" 28 | # 29 | # NOTES / 30 | # Some types work better than others on mobile or display differently than desktop. 31 | # All properties will work with input type "text" but may not work with other types. Ask for help if needed. 32 | # Some events won't fire if you enter incorrect content for the field type: i.e. "foo" for input type "number". 33 | # Find more patterns for the Valid and Invalid events at http://html5pattern.com 34 | # 35 | ################################################################################ 36 | # SIMPLE EXAMPLE 37 | # myInput = new InputField 38 | # width: 300 39 | # height: 88 40 | # backgroundColor: "white" 41 | # 42 | ################################################################################ 43 | # ADVANCED EXAMPLE WITH EVENTS & ALL SUPPORTED PROPERTIES 44 | 45 | # InputField Instance: text 46 | 47 | colorInput = new InputField 48 | name: "colorInput" 49 | type: "text" 50 | width: Screen.width 51 | height: 132 52 | y: 0 53 | color: "#696969" 54 | backgroundColor: "#f5f5f5" 55 | indent: 48 56 | fontSize: 48 57 | fontWeight: 600 58 | fontFamily: "Georgia, serif" 59 | placeHolder: "Enter Hexadecimal Color" 60 | placeHolderFocus: "#_ _ _ _ _ _" 61 | placeHolderColor: "silver" 62 | autoCapitalize: false 63 | autoComplete: false 64 | autoCorrect: false 65 | maxLength: 7 66 | pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" 67 | match: ["orange", "Orange", "red", "Red", "blue", "Blue"] 68 | value: "" 69 | # lineHeight: 30 70 | 71 | # InputField Instance: text - Events 72 | 73 | colorInput.on Events.Input, (value, layer) -> 74 | setDefault @ if @.isEmpty 75 | 76 | colorInput.on Events.Focus, (value, layer) -> 77 | @.color = @.originalTextColor 78 | 79 | colorInput.on Events.Blur, (value, layer) -> 80 | @.color = "limeGreen" if @.isValid 81 | 82 | colorInput.on Events.Valid, (value, layer) -> 83 | setValid @, value 84 | 85 | colorInput.on Events.Invalid, (value, layer) -> 86 | setInvalid @, value 87 | 88 | colorInput.on Events.Match, (value, layer) -> 89 | setDefault @, value 90 | @.animate properties: 91 | backgroundColor: value 92 | color: "#fff" 93 | Utils.delay 3, => 94 | @.animate properties: 95 | backgroundColor: "#f5f5f5" 96 | color: @.originalTextColor 97 | 98 | ################################################################################ 99 | 100 | # InputField Instance: file-image 101 | 102 | imagePlaceholder = new Layer 103 | width: Screen.width 104 | height: Screen.height/2 105 | image: "" 106 | maxY: Screen.height 107 | backgroundColor: "black" 108 | html: "Add Image" 109 | style: 110 | font: "200 2em/#{Screen.height/2}px -apple-system, Roboto, helvetica, sans-serif" 111 | textAlign: "center" 112 | 113 | fileInput = new InputField 114 | name: "fileInput" 115 | type: "file-image" 116 | width: Screen.width 117 | parent: imagePlaceholder 118 | 119 | 120 | 121 | # InputField Instance: file-image - Events 122 | 123 | fileInput.on Events.FileData, (value, layer) -> 124 | @.parent.image = value 125 | @.parent.html = "" 126 | 127 | ################################################################################ 128 | # DEMO HELPER FUNCTIONS 129 | 130 | # Text Input Validation Functions 131 | 132 | setDefault = (input, value) -> 133 | check.states.switch "invalid" 134 | input.color = input.originalTextColor 135 | input.backgroundColor = "#f5f5f5" 136 | Screen.backgroundColor = "#808080" 137 | 138 | setValid = (input, value) -> 139 | check.states.switch "valid" 140 | input.color = input.originalTextColor 141 | input.backgroundColor = "#f5f5f5" 142 | Screen.backgroundColor = value 143 | 144 | setInvalid = (input, value) -> 145 | check.states.switch "invalid" 146 | input.backgroundColor = "#f5f5f5" 147 | Screen.backgroundColor = value 148 | Utils.delay 1.5, => 149 | unless input.isValid 150 | input.color = "red" unless input.isEmpty 151 | check.states.switch "invalid" 152 | Screen.backgroundColor = value 153 | 154 | ################################################################################ 155 | # DEMO HELPER CODE FOR CHECKMARK 156 | 157 | # Checkmark for Valid Answer 158 | 159 | check = new Layer 160 | width: 20 161 | height: 40 162 | rotation: 45 163 | backgroundColor: "" 164 | style: boxShadow: "inset -8px -8px 0 limeGreen" 165 | 166 | check.states.add 167 | valid: opacity: 1, scale: 1 168 | invalid: opacity: 0, scale: .25 169 | check.states.animationOptions = curve: "spring(1000,30,0)" 170 | check.states.switchInstant "invalid" 171 | check.center() 172 | 173 | check.bringToFront() 174 | check.props = 175 | midY: colorInput.midY - 8 176 | maxX: colorInput.maxX - 48 177 | 178 | ################################################################################ 179 | # DEMO FOR CLASS FUNCTIONS 180 | 181 | # Print button 182 | 183 | buttton_read = new Layer 184 | width: Screen.width/3 185 | height: 88 186 | y: 132 + (Screen.width/3)/3 187 | x: (Screen.width/3)/3 188 | borderRadius: 132/2 189 | backgroundColor: "rgba(0,0,0,.25)" 190 | html: "Print Value" 191 | style: 192 | font: "400 32px/88px -apple-system, sans-serif" 193 | textAlign: "center" 194 | boxShadow: "inset 0 0 0 2px #fff" 195 | 196 | buttton_read.onClick -> 197 | print if colorInput.checkMatch() then "Match Found" else "No Match Found" 198 | print colorInput.value 199 | 200 | # Clear button 201 | 202 | buttton_clear = new Layer 203 | width: Screen.width/3 204 | height: 88 205 | y: 132 + (Screen.width/3)/3 206 | maxX: Screen.width - (Screen.width/3)/3 207 | borderRadius: 132/2 208 | backgroundColor: "rgba(0,0,0,.25)" 209 | html: "Clear Value" 210 | style: 211 | font: "400 32px/88px -apple-system, sans-serif" 212 | textAlign: "center" 213 | boxShadow: "inset 0 0 0 2px #fff" 214 | 215 | buttton_clear.onClick -> 216 | colorInput.clear() 217 | setDefault(colorInput) 218 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "propertyPanelToggleStates" : { 3 | 4 | }, 5 | "deviceOrientation" : 0, 6 | "sharedPrototype" : 1, 7 | "contentScale" : 1, 8 | "deviceType" : "apple-iphone-6s-silver", 9 | "selectedHand" : "", 10 | "updateDelay" : 0.3, 11 | "deviceScale" : "fit", 12 | "foldedCodeRanges" : [ 13 | "{1813, 569}", 14 | "{2383, 646}", 15 | "{3112, 423}", 16 | "{3536, 136}", 17 | "{3782, 661}", 18 | "{4559, 438}", 19 | "{5108, 449}", 20 | "{5560, 415}" 21 | ], 22 | "orientation" : 0, 23 | "fullScreen" : false 24 | } -------------------------------------------------------------------------------- /InputField-example.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer && window._bridge) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (DeviceComponent) {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | if (window.Framer) {window.Framer.Defaults.DeviceView = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-6s-silver","contentScale":1,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-6s-silver","contentScale":1,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"InputField-example.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /InputField-example.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "

" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "

" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "

" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function showHomeScreenAlert() { 60 | 61 | link = document.createElement("link"); 62 | link.href = "framer/mirror.css" 63 | link.type = "text/css" 64 | link.rel = "stylesheet" 65 | link.media = "screen" 66 | 67 | document.addEventListener("DOMContentLoaded", function(event) { 68 | document.getElementsByTagName("head")[0].appendChild(link) 69 | }) 70 | 71 | var html = "" 72 | html += "

" 73 | html += "

" 74 | html += "

Install Prototype

" 75 | html += "

Tap

, then choose 'Add to Home Screen'

" 76 | html += "

" 77 | html += "

" 78 | 79 | showAlert(html) 80 | } 81 | 82 | function loadProject() { 83 | CoffeeScript.load("app.coffee") 84 | } 85 | 86 | function setDefaultPageTitle() { 87 | // If no title was set we set it to the project folder name so 88 | // you get a nice name on iOS if you bookmark to desktop. 89 | document.addEventListener("DOMContentLoaded", function() { 90 | if (document.title == "") { 91 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 92 | document.title = window.FramerStudioInfo.documentTitle 93 | } else { 94 | document.title = window.location.pathname.replace(/\//g, "") 95 | } 96 | } 97 | }) 98 | } 99 | 100 | function init() { 101 | 102 | if (Utils.isFramerStudio()) { 103 | return 104 | } 105 | 106 | setDefaultPageTitle() 107 | 108 | if (!isCompatibleBrowser()) { 109 | return showBrowserAlert() 110 | } 111 | 112 | if (!isFileLoadingAllowed()) { 113 | return showFileLoadingAlert() 114 | } 115 | 116 | // if (Utils.isMobile() && !isHomeScreened()) { 117 | // return showHomeScreenAlert() 118 | // } 119 | 120 | loadProject() 121 | 122 | } 123 | 124 | init() 125 | 126 | })() 127 | -------------------------------------------------------------------------------- /InputField-example.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" + INPUT_SELECTOR_NUMBER + INPUT_HIDE_PSUEDO_UI + ""; 141 | case !this.isSearch: 142 | return ""; 143 | default: 144 | return ""; 145 | } 146 | }).call(this); 147 | if (this.options.placeHolderColor != null) { 148 | this.html += ""; 149 | } 150 | this.input = document.createElement("input"); 151 | this.input.type = this.options.type; 152 | if (this.options.value != null) { 153 | this.input.value = this.options.value; 154 | } 155 | if (this.options.placeHolder != null) { 156 | this.input.placeholder = this.options.placeHolder; 157 | } 158 | if (this.options.pattern != null) { 159 | this.input.pattern = this.options.pattern; 160 | } 161 | if (this.options.maxLength != null) { 162 | this.input.setAttribute("maxLength", this.options.maxLength); 163 | } 164 | this.input.setAttribute("autocapitalize", (this.options.autoCapitalize === true ? "on" : "off")); 165 | this.input.setAttribute("autocomplete", (this.options.autoComplete === true ? "on" : "off")); 166 | this.input.setAttribute("autocorrect", (this.options.autoCorrect === true ? "on" : "off")); 167 | if (this.isFileMulti) { 168 | this.input.setAttribute("multiple", "multiple"); 169 | } 170 | if (this.isFileVideo) { 171 | this.input.setAttribute("accept", "video/*"); 172 | } 173 | if (this.isFilePhoto) { 174 | this.input.setAttribute("accept", "image/*"); 175 | } 176 | this._element.appendChild(this.input); 177 | this.isEmpty = !(((ref = this.options.value) != null ? ref.length : void 0) > 0); 178 | this.originalTextColor = this.options.color; 179 | inputStyle = { 180 | font: this.options.fontWeight + " " + this.options.fontSize + "px/" + this.options.lineHeight + " " + this.options.fontFamily, 181 | outline: "none", 182 | textIndent: this.options.indent + "px", 183 | backgroundColor: "transparent", 184 | height: "100%", 185 | width: "100%", 186 | margin: "0", 187 | padding: "0", 188 | verticalAlign: "top", 189 | "-webkit-appearance": "none", 190 | opacity: this.isFile ? 0 : 1, 191 | pointerEvents: this.isFile ? "all" : "none" 192 | }; 193 | for (key in inputStyle) { 194 | val = inputStyle[key]; 195 | this.input.style[key] = val; 196 | } 197 | if (this.options.color != null) { 198 | this.input.style.color = this.options.color; 199 | } 200 | this.input.onfocus = (function(_this) { 201 | return function() { 202 | document.body.scrollTop = 0; 203 | if (_this.options.placeHolderFocus != null) { 204 | _this.input.placeholder = _this.options.placeHolderFocus; 205 | } 206 | document.body.scrollTop = 0; 207 | return _this.emit(Events.Focus, _this.input.value, _this); 208 | }; 209 | })(this); 210 | this.input.onblur = (function(_this) { 211 | return function() { 212 | document.body.scrollTop = 0; 213 | if (!(_this.input.placeholder === _this.options.placeHolder || (_this.options.placeHolder == null))) { 214 | _this.input.placeholder = _this.options.placeHolder; 215 | } 216 | return _this.emit(Events.Blur, _this.input.value, _this); 217 | }; 218 | })(this); 219 | this.input.oninput = (function(_this) { 220 | return function() { 221 | var ref1; 222 | _this.isEmpty = !(((ref1 = _this.input.value) != null ? ref1.length : void 0) > 0); 223 | _this.emit(Events.Input, _this.input.value, _this); 224 | return _this.checkValidity(); 225 | }; 226 | })(this); 227 | if (this.isFile) { 228 | this.input.addEventListener("change", this.fileSelectHandler, false); 229 | } 230 | this.on(Events.TouchEnd, function() { 231 | return this.input.focus(); 232 | }); 233 | this.on("change:color", function() { 234 | return this.changeInputTextColor(); 235 | }); 236 | this.wrapFileInputToParent(); 237 | } 238 | 239 | InputField.prototype.fileSelectHandler = function(event) { 240 | var file, reader; 241 | if (!event) { 242 | return; 243 | } 244 | file = event.target.files[0]; 245 | if (file.type.indexOf("image") === 0) { 246 | reader = new FileReader(); 247 | reader.onload = (function(_this) { 248 | return function(readEvent) { 249 | _this.emit(Events.FileData, readEvent.target.result, _this); 250 | console.log(readEvent); 251 | return console.log(file); 252 | }; 253 | })(this); 254 | return reader.readAsDataURL(file); 255 | } 256 | }; 257 | 258 | InputField.prototype.checkValidity = function() { 259 | var ref, validity; 260 | if (!this.shouldCheckValidity) { 261 | return; 262 | } 263 | if (this.options.pattern != null) { 264 | validity = this.input.checkValidity(); 265 | this.isEmpty = !(((ref = this.input.value) != null ? ref.length : void 0) > 0); 266 | if (this.isValid !== validity || this.isEmpty) { 267 | if (this.isEmpty || !validity) { 268 | this.isValid = false; 269 | this.emit(Events.Invalid, this.input.value, this); 270 | } else { 271 | this.isValid = true; 272 | this.emit(Events.Valid, this.input.value, this); 273 | } 274 | } 275 | } 276 | if (this.checkMatch()) { 277 | this.isValid = true; 278 | return this.emit(Events.Match, this.input.value, this); 279 | } 280 | }; 281 | 282 | InputField.prototype.checkMatch = function() { 283 | var i, len, match, ref; 284 | if (this.options.match == null) { 285 | return false; 286 | } 287 | if (Array.isArray(this.options.match)) { 288 | ref = this.options.match; 289 | for (i = 0, len = ref.length; i < len; i++) { 290 | match = ref[i]; 291 | if (this.input.value.indexOf(match) > -1) { 292 | return true; 293 | } 294 | } 295 | } else { 296 | if (this.input.value.indexOf(this.options.match) > -1) { 297 | return true; 298 | } 299 | } 300 | return false; 301 | }; 302 | 303 | InputField.prototype.clear = function() { 304 | this.input.value = ""; 305 | this.isValid = null; 306 | return this.isEmpty = true; 307 | }; 308 | 309 | InputField.prototype.changeInputTextColor = function() { 310 | return this.input.style.color = this.color.toHexString(); 311 | }; 312 | 313 | InputField.prototype.changeInputValue = function(v) { 314 | this.input.value = v; 315 | return this.input.oninput(); 316 | }; 317 | 318 | InputField.prototype.wrapFileInputToParent = function() { 319 | if (!this.isFile) { 320 | return; 321 | } 322 | if (this.parent) { 323 | this.width = this.parent.frame.width; 324 | return this.height = this.parent.frame.height; 325 | } else { 326 | this.input.style.opacity = 1; 327 | this.input.style.lineHeight = this.height + "px"; 328 | this.input.style.color = "#fff"; 329 | this.input.style.textIndent = "1em"; 330 | return this.backgroundColor = "#fff"; 331 | } 332 | }; 333 | 334 | return InputField; 335 | 336 | })(Layer); 337 | 338 | 339 | },{}]},{},[]) 340 | //# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIvVXNlcnMvam9yZGFuL19GcmFtZXIvX01vZHVsZXMvZ2l0aHViL2ZyYW1lci1JbnB1dEZpZWxkL0lucHV0RmllbGQtZXhhbXBsZS5mcmFtZXIvbW9kdWxlcy9JbnB1dEZpZWxkLmNvZmZlZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQzBCQSxJQUFBOzs7O0FBQU0sT0FBTyxDQUFDO0FBRWIsTUFBQTs7OztFQUFBLGNBQUEsR0FBaUI7O0VBRWpCLG9CQUFBLEdBQXdCOztFQUN4QixxQkFBQSxHQUF3Qjs7RUFDeEIscUJBQUEsR0FBd0I7O0VBRXhCLE1BQU0sQ0FBQyxLQUFQLEdBQWtCOztFQUNsQixNQUFNLENBQUMsS0FBUCxHQUFrQjs7RUFDbEIsTUFBTSxDQUFDLElBQVAsR0FBa0I7O0VBQ2xCLE1BQU0sQ0FBQyxLQUFQLEdBQWtCOztFQUNsQixNQUFNLENBQUMsT0FBUCxHQUFrQjs7RUFDbEIsTUFBTSxDQUFDLEtBQVAsR0FBa0I7O0VBQ2xCLE1BQU0sQ0FBQyxRQUFQLEdBQWtCOztFQUVsQixVQUFDLENBQUEsTUFBRCxDQUFRLE9BQVIsRUFDQztJQUFBLEdBQUEsRUFBSyxTQUFBO2FBQ0osSUFBQyxDQUFBLEtBQUssQ0FBQztJQURILENBQUw7SUFHQSxHQUFBLEVBQUssU0FBQyxDQUFEO01BQ0osSUFBQSxDQUFjLENBQWQ7QUFBQSxlQUFBOztNQUNBLElBQUcsSUFBQyxDQUFBLEtBQUo7ZUFDQyxJQUFDLENBQUEsZ0JBQUQsQ0FBa0IsQ0FBbEIsRUFERDs7SUFGSSxDQUhMO0dBREQ7O0VBVWEsb0JBQUMsT0FBRDtBQUVaLFFBQUE7SUFGYSxJQUFDLENBQUEsNEJBQUQsVUFBUzs7SUFFdEIsSUFBQyxDQUFBLFFBQUQsR0FBWTtJQUNaLElBQUMsQ0FBQSxRQUFELEdBQVk7SUFDWixJQUFDLENBQUEsTUFBRCxHQUFZO0lBRVosSUFBQyxDQUFBLE9BQUQsR0FBWTtJQUNa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QUMsS0FBSyxDQUFDO2FBQzFCLElBQUMsQ0FBQyxNQUFGLEdBQVcsSUFBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsT0FGM0I7S0FBQSxNQUFBO01BSUMsSUFBQyxDQUFBLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBYixHQUF1QjtNQUN2QixJQUFDLENBQUEsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFiLEdBQTZCLElBQUMsQ0FBQyxNQUFILEdBQVU7TUFDdEMsSUFBQyxDQUFBLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBYixHQUFxQjtNQUNyQixJQUFDLENBQUEsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFiLEdBQTBCO2FBQzFCLElBQUMsQ0FBQyxlQUFGLEdBQXFCLE9BUnRCOztFQUZzQjs7OztHQXhOUyIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCIjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuIyBDcmVhdGVkIDA3IEphbiAyMDE2IGJ5IEpvcmRhbiBSb2JlcnQgRG9ic29uIC8gQGpvcmRhbmRvYnNvbiAvIEpvcmRhbkRvYnNvbi5jb21cbiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG4jXG4jIFZhbGlkICYgVGVzdGVkIElucHV0RmllbGQgVHlwZXM6IFxuIyBcdFwidGV4dFwiLCBcImVtYWlsXCIsIFwibnVtYmVyXCIsIFwibnVtYmVyLW9ubHlcIiwgXCJ1cmxcIiwgXCJ0ZWxcIiwgXCJwYXNzd29yZFwiLCBcInNlYXJjaFwiXG4jIFx0XCJ0aW1lXCIsIFwibW9udGhcIiwgXCJkYXRlXCIsIFwiZGF0ZXRpbWUtbG9jYWxcIiwgXCJmaWxlXCIsIFwiZmlsZS1tdWx0aXBsZVwiLCBcImZpbGUtaW1hZ2VcIiwgXCJmaWxlLXZpZGVvXCJcbiMgXG4jIFRoZSB0aW1lICYgZGF0ZSB0eXBlcyBSRVFVSVJFIHRoZSB2YWx1ZSBwcm9wZXJ0eSBpcyBpbiBhIGNvcnJlY3QgZm9ybWF0ICYgSUdOT1JFIHRoZSBwbGFjZWhvbGRlciBwcm9wZXJ0eS5cbiMgXG4jIEhlcmUncyBhIGZldyBleGFtcGxlcyB0byB1c2UgZm9yIHRoZSB2YWx1ZTogcHJvcGVydHkgd2hlbiB5b3UgY3JlYXRlIHRoZW06XG4jXG4jIFx0KiB0aW1lOiBcIjEyOjM4XCJcbiMgXHQqIG1vbnRoOiBcIjIwMTYtMDFcIlxuIyBcdCogZGF0ZTogXCIyMDE2LTAxLTA0XCJcbiMgXHQqIGRhdGV0aW1lLWxvY2FsOiBcIjIwMTYtMDEtMDRUMTI6NDQ6MzEuMTkyXCJcbiNcbiMgTk9URVMgLyBcbiMgXHRTb21lIHR5cGVzIHdvcmsgYmV0dGVyIHRoYW4gb3RoZXJzIG9uIG1vYmlsZSBvciBkaXNwbGF5IGRpZmZlcmVudGx5IHRoYW4gZGVza3RvcC5cbiMgXHRBbGwgcHJvcGVydGllcyB3aWxsIHdvcmsgd2l0aCBpbnB1dCB0eXBlIFwidGV4dFwiIGJ1dCBtYXkgbm90IHdvcmsgd2l0aCBvdGhlciB0eXBlcy5cbiMgXHRTb21lIGV2ZW50cyB3b24ndCBmaXJlIGlmIHlvdSBlbnRlciBpbmNvcnJlY3QgY29udGVudCBmb3IgdGhlIGZpZWxkIHR5cGU6IGkuZS4gXCJoZWxsb1wiIGZvciBpbnB1dCB0eXBlIFwibnVtYmVyXCIuXG4jIFx0RmluZCBtb3JlIHBhdHRlcm5zIGZvciBWYWxpZCBhbmQgSW52YWxpZCBldmVudHMgYXQgaHR0cDovL2h0bWw1cGF0dGVybi5jb21cbiMgXG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuXG5cbmNsYXNzIGV4cG9ydHMuSW5wdXRGaWVsZCBleHRlbmRzIExheWVyXG5cblx0UEFUVEVSTl9OVU1CRVIgPSBcIlswLTldKlwiXG5cdFxuXHRJTlBVVF9ISURFX1BTVUVET19VSSAgPSBcInsgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOyBkaXNwbGF5OiBub25lOyB9XCJcblx0SU5QVVRfU0VMRUNUT1JfTlVNQkVSID0gXCJpbnB1dFt0eXBlPW51bWJlcl06Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24sIGlucHV0W3R5cGU9bnVtYmVyXTo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvblwiXG5cdElOUFVUX1NFTEVDVE9SX1NFQVJDSCA9IFwiaW5wdXRbdHlwZT1zZWFyY2hdOjotd2Via2l0LXNlYXJjaC1jYW5jZWwtYnV0dG9uXCJcblx0XG5cdEV2ZW50cy5JbnB1dCAgICA9IFwiSW5wdXRGaWVsZC5PbklucHV0XCJcblx0RXZlbnRzLkZvY3VzICAgID0gXCJJbnB1dEZpZWxkLk9uRm9jdXNcIlxuXHRFdmVudHMuQmx1ciAgICAgPSBcIklucHV0RmllbGQuT25CbHVyXCJcblx0RXZlbnRzLlZhbGlkICAgID0gXCJJbnB1dEZpZWxkLk9uVmFsaWRcIlxuXHRFdmVudHMuSW52YWxpZCAgPSBcIklucHV0RmllbGQuT25JbnZhbGlkXCJcblx0RXZlbnRzLk1hdGNoICAgID0gXCJJbnB1dEZpZWxkLk9uTWF0Y2hcIlxuXHRFdmVudHMuRmlsZURhdGEgPSBcIklucHV0RmllbGQuT25GaWxlRGF0YVwiXG5cdFxuXHRAZGVmaW5lIFwidmFsdWVcIixcblx0XHRnZXQ6IC0+XG5cdFx0XHRAaW5wdXQudmFsdWVcblx0XHRcdFxuXHRcdHNldDogKHYpIC0+XG5cdFx0XHRyZXR1cm4gdW5sZXNzIHZcblx0XHRcdGlmIEBpbnB1dFxuXHRcdFx0XHRAY2hhbmdlSW5wdXRWYWx1ZSB2XG5cblxuXHRjb25zdHJ1Y3RvcjogKEBvcHRpb25zPXt9KSAtPlxuXHRcblx0XHRAaXNOdW1iZXIgPSBmYWxzZVxuXHRcdEBpc1NlYXJjaCA9IGZhbHNlXG5cdFx0QGlzRmlsZSAgID0gZmFsc2Vcblx0XHRcblx0XHRAaXNFbXB0eSAgPSB0cnVlXG5cdFx0QGlzVmFsaWQgID0gbnVsbFxuXHRcdFxuXHRcdEBpc0ZpbGVNdWx0aSA9IGZhbHNlXG5cdFx0QGlzRmlsZVBob3RvID0gZmFsc2Vcblx0XHRAaXNGaWxlVmlkZW8gPSBmYWxzZVxuXHRcdFxuXHRcdEBvcmlnaW5hbFRleHRDb2xvciA9IG51bGxcblx0XHRcblx0XHQjIE1ha2Ugc3VyZSB3ZSBzZXQgdGhlIENoZWNraW5nIEZsYWdcblx0XHRAc2hvdWxkQ2hlY2tWYWxpZGl0eSA9IHRydWUgaWYgQG9wdGlvbnMucGF0dGVybj8gb3IgQG9wdGlvbnMubWF0Y2g/XG5cblx0XHQjIE1ha2Ugc3VyZSB0aGlzIGlzIGluIHB4XG5cdFx0QG9wdGlvbnMubGluZUhlaWdodCA9IFwiI3tAb3B0aW9ucy5saW5lSGVpZ2h0fXB4XCIgaWYgQG9wdGlvbnMubGluZUhlaWdodD9cblx0XHQgXHRcdFx0XHRcdFx0XHRcdFxuXHRcdCMgRnJhbWVyIExheWVyIFByb3BzXG5cdFx0QG9wdGlvbnMubmFtZSAgICAgICAgICAgICA/PSBcIiN7QG9wdGlvbnMudHlwZX1JbnB1dFwiXG5cdFx0QG9wdGlvbnMuY29sb3IgICAgICAgICAgICA/PSBcIiMwMDBcIlxuXHRcdEBvcHRpb25zLmJhY2tncm91bmRDb2xvciAgPz0gXCJcIlxuXHRcdEBvcHRpb25zLmJvcmRlclJhZGl1cyAgICAgPz0gMFxuXG5cdFx0IyBDdXN0b20gTGF5ZXIgUHJvcHNcdFx0XG5cdFx0QG9wdGlvbnMudHlwZSAgICAgICAgICAgICA/PSBcInRleHRcIlxuXHRcdEBvcHRpb25zLmZvbnRTaXplICAgICAgICAgPz0gMzJcblx0XHRAb3B0aW9ucy5mb250V2VpZ2h0ICAgICAgID89IDMwMFxuXHRcdEBvcHRpb25zLmZvbnRGYW1pbHkgICAgICAgPz0gXCItYXBwbGUtc3lzdGVtLCBIZWx2ZXRpY2EgTmV1ZVwiXG5cdFx0QG9wdGlvbnMubGluZUhlaWdodCAgICAgICA/PSAxLjI1XG5cdFx0QG9wdGlvbnMuaW5kZW50ICAgICAgICAgICA/PSAwXG5cdFx0QG9wdGlvbnMucGxhY2VIb2xkZXJGb2N1cyA/PSBudWxsXG5cdFx0QG9wdGlvbnMucGxhY2VIb2xkZXJDb2xvciA/PSBudWxsXG5cblxuXHRcdCMgU3RhcnRlZCB3b3JrIG9uIGZpbGVcblx0XHRpZiBfLnN0YXJ0c1dpdGgoQG9wdGlvbnMudHlwZSwgW1wiZmlsZVwiXSlcblx0XHRcdEBvcHRpb25zLmZvbnRTaXplID0gXCJpbmhlcml0XCJcblx0XHRcdEBvcHRpb25zLmZvbnRXZWlnaHQgPSA0MDBcblx0XHRcdEBvcHRpb25zLmxpbmVIZWlnaHQgPSAxXG5cblx0XHRzdXBlciBAb3B0aW9uc1xuXHRcdFxuXHRcdCMgQWRqdXN0IGEgZmV3IHRoaW5ncyBmb3IgdmFyaW91cyB0eXBlc1xuXHRcdFxuXHRcdHN3aXRjaCBAb3B0aW9ucy50eXBlXG5cdFx0XHR3aGVuIFwic2VhcmNoXCIgdGhlbiBAaXNTZWFyY2ggPSB0cnVlXG5cdFx0XHR3aGVuIFwibnVtYmVyXCIgdGhlbiBAaXNOdW1iZXIgPSB0cnVlXG5cdFx0XHR3aGVuIFwibnVtYmVycy1vbmx5XCIsIFwibnVtYmVyLW9ubHlcIlxuXHRcdFx0XHRAaXNOdW1iZXIgPSB0cnVlXG5cdFx0XHRcdEBvcHRpb25zLnR5cGUgICAgPSBpZiBAb3B0aW9ucy5wYXR0ZXJuPyB0aGVuIFwibnVtYmVyXCIgICAgICAgICBlbHNlIFwidGV4dFwiXG5cdFx0XHRcdEBvcHRpb25zLnBhdHRlcm4gPSBpZiBAb3B0aW9ucy5wYXR0ZXJuPyB0aGVuIEBvcHRpb25zLnBhdHRlcm4gZWxzZSBQQVRURVJOX05VTUJFUlxuXHRcdFx0d2hlbiBcImZpbGVcIiwgXCJmaWxlLW11bHRpcGxlXCIsIFwiZmlsZS1pbWFnZVwiLCBcImZpbGUtdmlkZW9cIlxuXHRcdFx0XHRAaXNGaWxlID0gdHJ1ZVxuXHRcdFx0XHRAaXNGaWxlUGhvdG8gPSB0cnVlIGlmIEBvcHRpb25zLnR5cGUgaXMgXCJmaWxlLWltYWdlXCJcblx0XHRcdFx0QGlzRmlsZVZpZGVvID0gdHJ1ZSBpZiBAb3B0aW9ucy50eXBlIGlzIFwiZmlsZS12aWRlb1wiXG5cdFx0XHRcdEBpc0ZpbGVNdWx0aSA9IHRydWUgaWYgQG9wdGlvbnMudHlwZSBpcyBcImZpbGUtbXVsdGlwbGVcIlxuXHRcdFx0XHRAb3B0aW9ucy50eXBlID0gXCJmaWxlXCJcblx0XHRcdFx0XG5cdFx0XG5cdFx0QGh0bWwgKz0gc3dpdGNoXG5cdFx0XHR3aGVuIEBpc051bWJlciB0aGVuIFwiPHN0eWxlIHR5cGU9J3RleHQvY3NzJz4je0lOUFVUX1NFTEVDVE9SX05VTUJFUn0je0lOUFVUX0hJREVfUFNVRURPX1VJfTwvc3R5bGU+XCJcblx0XHRcdHdoZW4gQGlzU2VhcmNoIHRoZW4gXCI8c3R5bGUgdHlwZT0ndGV4dC9jc3MnPiN7SU5QVVRfU0VMRUNUT1JfU0VBUkNIfSN7SU5QVVRfSElERV9QU1VFRE9fVUl9PC9zdHlsZT5cIlxuXHRcdFx0ZWxzZSBcIlwiXG5cblx0XHRpZiBAb3B0aW9ucy5wbGFjZUhvbGRlckNvbG9yP1xuXHRcdFx0QGh0bWwgKz0gXCI8c3R5bGUgdHlwZT0ndGV4dC9jc3MnPjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlciB7IGNvbG9yOiAje0BvcHRpb25zLnBsYWNlSG9sZGVyQ29sb3J9OyB9IDo6LW1vei1wbGFjZWhvbGRlciB7IGNvbG9yOiAje0BvcHRpb25zLnBsYWNlSG9sZGVyQ29sb3J9OyB9IDotbXMtaW5wdXQtcGxhY2Vob2xkZXIgeyBjb2xvcjogI3tAb3B0aW9ucy5wbGFjZUhvbGRlckNvbG9yfTsgfSA6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlciB7IGNvbG9yOiAje0BvcHRpb25zLnBsYWNlSG9sZGVyQ29sb3J9OyB9IDpwbGFjZWhvbGRlci1zaG93biB7IGNvbG9yOiAje0BvcHRpb25zLnBsYWNlSG9sZGVyQ29sb3J9OyB9PC9zdHlsZT5cIlxuXHRcdFx0XG5cdFx0IyBDcmVhdGUgVGhlIElucHV0XG5cdFx0XG5cdFx0QGlucHV0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCBcImlucHV0XCJcblx0XHQjIFRleHQgVHlwZSBBZGp1c3RtZW50c1xuXHRcdEBpbnB1dC50eXBlICAgICAgICA9IEBvcHRpb25zLnR5cGVcblx0XHRAaW5wdXQudmFsdWUgICAgICAgPSBAb3B0aW9ucy52YWx1ZSAgICAgICAgICAgICAgICAgIGlmIEBvcHRpb25zLnZhbHVlP1xuXHRcdEBpbnB1dC5wbGFjZWhvbGRlciA9IEBvcHRpb25zLnBsYWNlSG9sZGVyICAgICAgICAgICAgaWYgQG9wdGlvbnMucGxhY2VIb2xkZXI/XG5cdFx0QGlucHV0LnBhdHRlcm4gICAgID0gQG9wdGlvbnMucGF0dGVybiAgICAgICAgICAgICAgICBpZiBAb3B0aW9ucy5wYXR0ZXJuP1xuXHRcdEBpbnB1dC5zZXRBdHRyaWJ1dGUoXCJtYXhMZW5ndGhcIiwgQG9wdGlvbnMubWF4TGVuZ3RoKSBpZiBAb3B0aW9ucy5tYXhMZW5ndGg/XG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcImF1dG9jYXBpdGFsaXplXCIsIChpZiBAb3B0aW9ucy5hdXRvQ2FwaXRhbGl6ZSBpcyB0cnVlIHRoZW4gXCJvblwiIGVsc2UgXCJvZmZcIikpXG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcImF1dG9jb21wbGV0ZVwiLCAgIChpZiBAb3B0aW9ucy5hdXRvQ29tcGxldGUgICBpcyB0cnVlIHRoZW4gXCJvblwiIGVsc2UgXCJvZmZcIikpXG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcImF1dG9jb3JyZWN0XCIsICAgIChpZiBAb3B0aW9ucy5hdXRvQ29ycmVjdCAgICBpcyB0cnVlIHRoZW4gXCJvblwiIGVsc2UgXCJvZmZcIikpXG5cdFx0IyBGaWxlIFR5cGUgQWRqdXN0bWVudHMgXG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcIm11bHRpcGxlXCIsIFwibXVsdGlwbGVcIikgaWYgQGlzRmlsZU11bHRpXG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcImFjY2VwdFwiLCAgIFwidmlkZW8vKlwiICkgaWYgQGlzRmlsZVZpZGVvXG5cdFx0QGlucHV0LnNldEF0dHJpYnV0ZShcImFjY2VwdFwiLCAgIFwiaW1hZ2UvKlwiICkgaWYgQGlzRmlsZVBob3RvXG5cdFx0XG5cdFx0QF9lbGVtZW50LmFwcGVuZENoaWxkIEBpbnB1dFxuXHRcdFxuXHRcdCMgU2V0dXAgVmFsdWVzXG5cdFx0QGlzRW1wdHkgICAgICAgICAgID0gIShAb3B0aW9ucy52YWx1ZT8ubGVuZ3RoID4gMClcblx0XHRAb3JpZ2luYWxUZXh0Q29sb3IgPSBAb3B0aW9ucy5jb2xvclxuXHRcdFxuXHRcdCMgU2V0dXAgSW5wdXQgU3R5bGVcblx0XHRcblx0XHRpbnB1dFN0eWxlID1cblx0XHRcdGZvbnQ6IFwiI3tAb3B0aW9ucy5mb250V2VpZ2h0fSAje0BvcHRpb25zLmZvbnRTaXplfXB4LyN7QG9wdGlvbnMubGluZUhlaWdodH0gI3tAb3B0aW9ucy5mb250RmFtaWx5fVwiXG5cdFx0XHRvdXRsaW5lOiBcIm5vbmVcIlxuXHRcdFx0dGV4dEluZGVudDogXCIje0BvcHRpb25zLmluZGVudH1weFwiXG5cdFx0XHRiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIlxuXHRcdFx0aGVpZ2h0OiBcIjEwMCVcIlxuXHRcdFx0d2lkdGg6ICBcIjEwMCVcIlxuXHRcdFx0bWFyZ2luOiAgXCIwXCJcblx0XHRcdHBhZGRpbmc6IFwiMFwiXG5cdFx0XHR2ZXJ0aWNhbEFsaWduOiBcInRvcFwiXG5cdFx0XHRcIi13ZWJraXQtYXBwZWFyYW5jZVwiOiBcIm5vbmVcIlxuXHRcdFx0b3BhY2l0eTogICAgICAgaWYgQGlzRmlsZSB0aGVuIDAgICAgIGVsc2UgMVxuXHRcdFx0cG9pbnRlckV2ZW50czogaWYgQGlzRmlsZSB0aGVuIFwiYWxsXCIgZWxzZSBcIm5vbmVcIlxuXHRcdFx0XG5cdFx0QGlucHV0LnN0eWxlW2tleV0gID0gdmFsIGZvciBrZXksIHZhbCBvZiBpbnB1dFN0eWxlXG5cdFx0QGlucHV0LnN0eWxlLmNvbG9yID0gQG9wdGlvbnMuY29sb3IgaWYgQG9wdGlvbnMuY29sb3I/XG5cdFx0XG5cdFx0QGlucHV0Lm9uZm9jdXMgPSA9PlxuXHRcdFx0ZG9jdW1lbnQuYm9keS5zY3JvbGxUb3AgPSAwXG5cdFx0XHRAaW5wdXQucGxhY2Vob2xkZXIgPSBAb3B0aW9ucy5wbGFjZUhvbGRlckZvY3VzIGlmIEBvcHRpb25zLnBsYWNlSG9sZGVyRm9jdXM/XG5cdFx0XHRkb2N1bWVudC5ib2R5LnNjcm9sbFRvcCA9IDBcblx0XHRcdEBlbWl0KEV2ZW50cy5Gb2N1cywgQGlucHV0LnZhbHVlLCBAKVxuXG5cdFx0QGlucHV0Lm9uYmx1ciAgPSA9PlxuXHRcdFx0ZG9jdW1lbnQuYm9keS5zY3JvbGxUb3AgPSAwXG5cdFx0XHR1bmxlc3MgQGlucHV0LnBsYWNlaG9sZGVyIGlzIEBvcHRpb25zLnBsYWNlSG9sZGVyIG9yICFAb3B0aW9ucy5wbGFjZUhvbGRlcj9cblx0XHRcdFx0QGlucHV0LnBsYWNlaG9sZGVyID0gQG9wdGlvbnMucGxhY2VIb2xkZXJcblx0XHRcdEBlbWl0KEV2ZW50cy5CbHVyLCBAaW5wdXQudmFsdWUsIEApXG5cblx0XHRAaW5wdXQub25pbnB1dCA9ID0+XG5cdFx0XHRAaXNFbXB0eSA9ICEoIEBpbnB1dC52YWx1ZT8ubGVuZ3RoID4gMClcblx0XHRcdEBlbWl0KEV2ZW50cy5JbnB1dCwgQGlucHV0LnZhbHVlLCBAKVxuXHRcdFx0QGNoZWNrVmFsaWRpdHkoKVxuXHRcdFx0XG5cdFx0QGlucHV0LmFkZEV2ZW50TGlzdGVuZXIoXCJjaGFuZ2VcIiwgQGZpbGVTZWxlY3RIYW5kbGVyLCBmYWxzZSkgaWYgQGlzRmlsZVxuXHRcdFx0XG5cdFx0QG9uIEV2ZW50cy5Ub3VjaEVuZCwgLT4gQGlucHV0LmZvY3VzKClcblx0XHRAb24gXCJjaGFuZ2U6Y29sb3JcIiwgIC0+IEBjaGFuZ2VJbnB1dFRleHRDb2xvcigpXG5cdFx0XG5cdFx0QHdyYXBGaWxlSW5wdXRUb1BhcmVudCgpXG5cdFx0XG5cblx0IyBodHRwOi8vd3d3LnNpdGVwb2ludC5jb20vaHRtbDUtamF2YXNjcmlwdC1vcGVuLWRyb3BwZWQtZmlsZXMvXG5cdGZpbGVTZWxlY3RIYW5kbGVyOiAoZXZlbnQpID0+XG5cdFx0cmV0dXJuIHVubGVzcyBldmVudCAjIGZpeCBDaGVjayB0aGlzIGJldHRlcj9cblx0XHRmaWxlID0gZXZlbnQudGFyZ2V0LmZpbGVzWzBdXHRcdFxuXHRcdGlmIGZpbGUudHlwZS5pbmRleE9mKFwiaW1hZ2VcIikgPT0gMFxuXHRcdFx0cmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKVxuXHRcdFx0cmVhZGVyLm9ubG9hZCA9IChyZWFkRXZlbnQpID0+IFxuXHRcdFx0XHRAZW1pdChFdmVudHMuRmlsZURhdGEsIHJlYWRFdmVudC50YXJnZXQucmVzdWx0LCBAKVxuXHRcdFx0XHRjb25zb2xlLmxvZyByZWFkRXZlbnRcblx0XHRcdFx0Y29uc29sZS5sb2cgZmlsZVxuXHRcdFx0cmVhZGVyLnJlYWRBc0RhdGFVUkwgZmlsZVxuXHRcdFxuXHRjaGVja1ZhbGlkaXR5OiAtPlxuXHRcdHJldHVybiB1bmxlc3MgQHNob3VsZENoZWNrVmFsaWRpdHlcblxuXHRcdGlmIEBvcHRpb25zLnBhdHRlcm4/XG5cdFx0XHR2YWxpZGl0eSA9IEBpbnB1dC5jaGVja1ZhbGlkaXR5KClcblx0XHRcdEBpc0VtcHR5ID0gISggQGlucHV0LnZhbHVlPy5sZW5ndGggPiAwKVxuXHRcdFx0XG5cdFx0XHRpZiBAaXNWYWxpZCBpc250IHZhbGlkaXR5IG9yIEBpc0VtcHR5XG5cdFx0XHRcdGlmIEBpc0VtcHR5IG9yICF2YWxpZGl0eVxuXHRcdFx0XHRcdEBpc1ZhbGlkID0gZmFsc2Vcblx0XHRcdFx0XHRAZW1pdChFdmVudHMuSW52YWxpZCwgQGlucHV0LnZhbHVlLCBAKVxuXHRcdFx0XHRlbHNlXG5cdFx0XHRcdFx0QGlzVmFsaWQgPSB0cnVlXG5cdFx0XHRcdFx0QGVtaXQoRXZlbnRzLlZhbGlkLCAgIEBpbnB1dC52YWx1ZSwgQClcblx0XHRcdFx0XHRcblx0XHRpZiBAY2hlY2tNYXRjaCgpXG5cdFx0XHRAaXNWYWxpZCA9IHRydWVcblx0XHRcdEBlbWl0KEV2ZW50cy5NYXRjaCwgQGlucHV0LnZhbHVlLCBAKVxuXHRcdFx0XG5cdGNoZWNrTWF0Y2g6IC0+XG5cdFx0cmV0dXJuIGZhbHNlIHVubGVzcyBAb3B0aW9ucy5tYXRjaD9cblx0XHRpZiBBcnJheS5pc0FycmF5KEBvcHRpb25zLm1hdGNoKVxuXHRcdFx0Zm9yIG1hdGNoIGluIEBvcHRpb25zLm1hdGNoXG5cdFx0XHRcdHJldHVybiB0cnVlIGlmIEBpbnB1dC52YWx1ZS5pbmRleE9mKG1hdGNoKSA+IC0xXG5cdFx0ZWxzZVxuXHRcdFx0cmV0dXJuIHRydWUgaWYgQGlucHV0LnZhbHVlLmluZGV4T2YoQG9wdGlvbnMubWF0Y2gpID4gLTFcblx0XHRyZXR1cm4gZmFsc2Vcblx0XHRcdFxuXHRjbGVhcjogLT5cblx0XHRAaW5wdXQudmFsdWUgPSBcIlwiXG5cdFx0QGlzVmFsaWQgPSBudWxsXG5cdFx0QGlzRW1wdHkgPSB0cnVlXG5cdFx0XG5cdGNoYW5nZUlucHV0VGV4dENvbG9yOiAtPiBcblx0XHRAaW5wdXQuc3R5bGUuY29sb3IgPSBAY29sb3IudG9IZXhTdHJpbmcoKVxuXHRcblx0Y2hhbmdlSW5wdXRWYWx1ZTogKHYpIC0+XG5cdFx0QGlucHV0LnZhbHVlID0gdlxuXHRcdEBpbnB1dC5vbmlucHV0KClcblx0XHRcblx0d3JhcEZpbGVJbnB1dFRvUGFyZW50OiAtPlxuXHRcdHJldHVybiB1bmxlc3MgQGlzRmlsZVxuXHRcdGlmIEAucGFyZW50XG5cdFx0XHRALndpZHRoICA9IEAucGFyZW50LmZyYW1lLndpZHRoXG5cdFx0XHRALmhlaWdodCA9IEAucGFyZW50LmZyYW1lLmhlaWdodFxuXHRcdGVsc2Vcblx0XHRcdEBpbnB1dC5zdHlsZS5vcGFjaXR5ID0gMVxuXHRcdFx0QGlucHV0LnN0eWxlLmxpbmVIZWlnaHQgPSBcIiN7QC5oZWlnaHR9cHhcIlxuXHRcdFx0QGlucHV0LnN0eWxlLmNvbG9yID0gXCIjZmZmXCJcblx0XHRcdEBpbnB1dC5zdHlsZS50ZXh0SW5kZW50ID0gXCIxZW1cIlxuXHRcdFx0QC5iYWNrZ3JvdW5kQ29sb3IgID0gXCIjZmZmXCJcblx0XHRcblx0XHRcblx0XHQiXX0= 341 | -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/background.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/cursor-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/cursor-active.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/cursor-active@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/cursor-active@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/cursor.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/cursor@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/cursor@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-120.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-152.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-76.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-arrow.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-arrow@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-arrow@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-close.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-close@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-close@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-framer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-framer.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-framer@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-framer@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-share.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/images/icon-share@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/images/icon-share@2x.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/manifest.txt: -------------------------------------------------------------------------------- 1 | app.coffee 2 | app.js 3 | framer/backups/backup-2016-06-23 14.43.35.coffee 4 | framer/backups/backup-2016-06-23 14.44.35.coffee 5 | framer/backups/backup-2016-06-23 14.46.35.coffee 6 | framer/backups/backup-2016-06-23 16.08.43.coffee 7 | framer/backups/backup-2016-06-23 16.23.39.coffee 8 | framer/backups/backup-2016-06-23 16.24.39.coffee 9 | framer/backups/backup-2016-06-23 16.25.39.coffee 10 | framer/backups/backup-2016-06-23 16.26.39.coffee 11 | framer/backups/backup-2016-06-23 16.27.39.coffee 12 | framer/backups/backup-2016-06-23 16.28.39.coffee 13 | framer/backups/backup-2016-06-23 16.29.39.coffee 14 | framer/backups/backup-2016-06-23 16.30.39.coffee 15 | framer/backups/backup-2016-06-23 16.31.39.coffee 16 | framer/backups/backup-2016-06-23 16.32.39.coffee 17 | framer/backups/backup-2016-06-23 16.33.39.coffee 18 | framer/backups/backup-2016-06-23 16.34.39.coffee 19 | framer/backups/backup-2016-06-23 16.35.39.coffee 20 | framer/backups/backup-2016-06-23 16.36.39.coffee 21 | framer/backups/backup-2016-06-23 16.37.39.coffee 22 | framer/backups/backup-2016-06-23 16.56.39.coffee 23 | framer/backups/backup-2016-06-23 17.03.13.coffee 24 | framer/coffee-script.js 25 | framer/config.json 26 | framer/framer.generated.js 27 | framer/framer.init.js 28 | framer/framer.js 29 | framer/framer.js.map 30 | framer/framer.modules.js 31 | framer/images/background.png 32 | framer/images/cursor-active.png 33 | framer/images/cursor-active@2x.png 34 | framer/images/cursor.png 35 | framer/images/cursor@2x.png 36 | framer/images/icon-120.png 37 | framer/images/icon-152.png 38 | framer/images/icon-76.png 39 | framer/images/icon-arrow.png 40 | framer/images/icon-arrow@2x.png 41 | framer/images/icon-close.png 42 | framer/images/icon-close@2x.png 43 | framer/images/icon-framer.png 44 | framer/images/icon-framer@2x.png 45 | framer/images/icon-share.png 46 | framer/images/icon-share@2x.png 47 | framer/manifest.txt 48 | framer/mirror.css 49 | framer/preview.png 50 | framer/style.css 51 | framer/version 52 | Icon 53 | index.html 54 | modules/InputField.coffee -------------------------------------------------------------------------------- /InputField-example.framer/framer/mirror.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | -webkit-user-select: none; 6 | -webkit-tap-highlight-color: rgba(0,0,0,0); 7 | } 8 | html, body, .wrapper { 9 | height: 100%; 10 | } 11 | body { 12 | background: #fff; 13 | font: 300 20px "Helvetica Neue", Helvetica, sans-serif; 14 | overflow: hidden; 15 | cursor: url('images/cursor.png') 39 39, auto; 16 | text-align: center; 17 | position: relative; 18 | -webkit-font-smoothing: antialiased; 19 | text-rendering: optimizeLegibility; 20 | color: #333740; 21 | } 22 | a { 23 | color: gray; 24 | } 25 | .framerAlert { 26 | font: 12px/1.6em Menlo; 27 | margin: 10px; 28 | color: gray; 29 | } 30 | ::-webkit-scrollbar { 31 | display: none; 32 | } 33 | .wrapper { 34 | width:100%; 35 | max-width: 240px; 36 | margin: 0 auto; 37 | padding-top: 38%; 38 | position: relative; 39 | } 40 | /* Text */ 41 | h1 { 42 | font-size: 22px; 43 | font-weight: 400; 44 | margin-top: 0px; 45 | line-height: 1.5; 46 | color: black; 47 | 48 | margin-bottom: 8px; 49 | margin-top: 16px; 50 | } 51 | h2 { 52 | font-size: 14px; 53 | font-weight: 400; 54 | color: #788594; 55 | } 56 | hr { 57 | border: none; width: 100%; 58 | border-bottom: 1px solid #EFF1F3; 59 | display: block; 60 | margin: 40px auto 32px auto; 61 | } 62 | p { 63 | display: inline-block; 64 | line-height: 1.5; 65 | } 66 | figure { 67 | display: inline-block; 68 | } 69 | .share { 70 | color: #007AFF; 71 | display: inline-block; 72 | margin-left: 8px; 73 | } 74 | .icon-share { 75 | margin-right: 0px; 76 | position: relative; 77 | top:0.5px; 78 | } 79 | .arrow { 80 | position: absolute; 81 | max-width: 240px; 82 | width: 100%; 83 | left:50%; margin-left:-120px; 84 | bottom: 24%; 85 | } 86 | .arrow figure { 87 | -webkit-animation: bounce 1.25s ease infinite; 88 | -moz-animation: bounce 1.25s ease infinite; 89 | -o-animation: bounce 1.25s ease infinite; 90 | animation: bounce 1.25s ease infinite; 91 | -webkit-transform-origin: center bottom; 92 | -ms-transform-origin: center bottom; 93 | transform-origin: center bottom; 94 | } 95 | /* Arrow animation */ 96 | @-webkit-keyframes bounce { 97 | 0%, 100% { 98 | -webkit-transform: translate3d(0,0,0); 99 | transform: translate3d(0,0,0); 100 | } 101 | 50% { 102 | -webkit-transform: translate3d(0, -16px, 0); 103 | transform: translate3d(0, -16px, 0); 104 | } 105 | } 106 | @keyframes bounce { 107 | 0%, 100% { 108 | -webkit-transform: translate3d(0,0,0); 109 | transform: translate3d(0,0,0); 110 | } 111 | 50% { 112 | -webkit-transform: translate3d(0, -16px, 0); 113 | transform: translate3d(0, -16px, 0); 114 | } 115 | } 116 | /* Icons */ 117 | .icon-close, 118 | .icon-framer, 119 | .icon-share, 120 | .icon-arrow { 121 | background-size: cover; 122 | } 123 | .icon-close { 124 | background-image: url("images/icon-close.png"); 125 | position: absolute; 126 | top:16px; 127 | right:16px; 128 | cursor: pointer; 129 | cursor: hand; 130 | width: 18px; 131 | height: 18px; 132 | } 133 | .icon-framer { 134 | background-image: url("images/icon-framer.png"); 135 | width: 60px; 136 | height: 60px; 137 | } 138 | .icon-share { 139 | background-image: url("images/icon-share.png"); 140 | width: 11px; 141 | height: 18px; 142 | } 143 | .icon-arrow { 144 | background-image: url("images/icon-arrow.png"); 145 | width: 18px; 146 | height: 30px; 147 | } 148 | /* Retina Icons */ 149 | @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 150 | .icon-close { 151 | background-image: url("images/icon-close@2x.png"); 152 | } 153 | .icon-framer { 154 | background-image: url("images/icon-framer@2x.png"); 155 | } 156 | .icon-share { 157 | background-image: url("images/icon-share@2x.png"); 158 | } 159 | .icon-arrow { 160 | background-image: url("images/icon-arrow@2x.png"); 161 | } 162 | } 163 | /* Avoid overflow scrolling when viewing in Portrait */ 164 | @media screen and (orientation:portrait) { 165 | html, body, .wrapper { 166 | overflow: hidden; 167 | } 168 | } 169 | /* iPad share icon is positioned in the navigation bar */ 170 | @media screen and (min-width: 576px){ 171 | .arrow { 172 | display: none; 173 | } 174 | .wrapper { 175 | padding-bottom: 25%; 176 | } 177 | } 178 | /* When it landscape, hide arrow and adjust spacing */ 179 | @media screen and (orientation:landscape) { 180 | .arrow { 181 | display: none; 182 | } 183 | .wrapper { 184 | padding-top: 10%; 185 | padding-bottom: 0; 186 | } 187 | } 188 | /* iPhone 6 Portrait */ 189 | @media screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) { 190 | .wrapper { 191 | padding-top: 48%; 192 | } 193 | .arrow { 194 | bottom: 27%; 195 | } 196 | } -------------------------------------------------------------------------------- /InputField-example.framer/framer/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/framer/preview.png -------------------------------------------------------------------------------- /InputField-example.framer/framer/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | -webkit-user-select: none; 6 | -webkit-tap-highlight-color: rgba(0,0,0,0); 7 | } 8 | 9 | body { 10 | background-color: #000; 11 | font: 28px/1em "Helvetica"; 12 | color: #FFF; 13 | overflow: hidden; 14 | } 15 | 16 | a { 17 | color: gray; 18 | } 19 | 20 | body { 21 | cursor: url('images/cursor.png') 32 32, auto; 22 | cursor: -webkit-image-set( 23 | url('images/cursor.png') 1x, 24 | url('images/cursor@2x.png') 2x 25 | ) 32 32, auto; 26 | } 27 | 28 | body:active { 29 | cursor: url('images/cursor-active.png') 32 32, auto; 30 | cursor: -webkit-image-set( 31 | url('images/cursor-active.png') 1x, 32 | url('images/cursor-active@2x.png') 2x 33 | ) 32 32, auto; 34 | } 35 | 36 | .framerAlertBackground { 37 | position: absolute; top:0px; left:0px; right:0px; bottom:0px; 38 | z-index: 1000; 39 | background-color: #fff; 40 | } 41 | 42 | .framerAlert { 43 | font:400 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 44 | -webkit-font-smoothing:antialiased; 45 | color:#616367; text-align:center; 46 | position: absolute; top:40%; left:50%; width:260px; margin-left:-130px; 47 | } 48 | .framerAlert strong { font-weight:500; color:#000; margin-bottom:8px; display:block; } 49 | .framerAlert a { color:#28AFFA; } 50 | .framerAlert .btn { 51 | font-weight:500; text-decoration:none; line-height:1; 52 | display:inline-block; padding:6px 12px 7px 12px; 53 | border-radius:3px; margin-top:12px; 54 | background:#28AFFA; color:#fff; 55 | } 56 | 57 | ::-webkit-scrollbar { 58 | display: none; 59 | } -------------------------------------------------------------------------------- /InputField-example.framer/framer/version: -------------------------------------------------------------------------------- 1 | 3 -------------------------------------------------------------------------------- /InputField-example.framer/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordandobson/framer-InputField/79559f3ff7df74e6a5c93cc827dd9d1655a328b6/InputField-example.framer/images/.gitkeep -------------------------------------------------------------------------------- /InputField-example.framer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /InputField-example.framer/modules/InputField.coffee: -------------------------------------------------------------------------------- 1 | ################################################################################ 2 | # Created 07 Jan 2016 by Jordan Robert Dobson / @jordandobson / JordanDobson.com 3 | ################################################################################ 4 | # 5 | # Valid & Tested InputField Types: 6 | # "text", "email", "number", "number-only", "url", "tel", "password", "search" 7 | # "time", "month", "date", "datetime-local", "file", "file-multiple", "file-image", "file-video" 8 | # 9 | # The time & date types REQUIRE the value property is in a correct format & IGNORE the placeholder property. 10 | # 11 | # Here's a few examples to use for the value: property when you create them: 12 | # 13 | # * time: "12:38" 14 | # * month: "2016-01" 15 | # * date: "2016-01-04" 16 | # * datetime-local: "2016-01-04T12:44:31.192" 17 | # 18 | # NOTES / 19 | # Some types work better than others on mobile or display differently than desktop. 20 | # All properties will work with input type "text" but may not work with other types. 21 | # Some events won't fire if you enter incorrect content for the field type: i.e. "hello" for input type "number". 22 | # Find more patterns for Valid and Invalid events at http://html5pattern.com 23 | # 24 | ################################################################################ 25 | 26 | 27 | class exports.InputField extends Layer 28 | 29 | PATTERN_NUMBER = "[0-9]*" 30 | 31 | INPUT_HIDE_PSUEDO_UI = "{ -webkit-appearance: none; display: none; }" 32 | INPUT_SELECTOR_NUMBER = "input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button" 33 | INPUT_SELECTOR_SEARCH = "input[type=search]::-webkit-search-cancel-button" 34 | 35 | Events.Input = "InputField.OnInput" 36 | Events.Focus = "InputField.OnFocus" 37 | Events.Blur = "InputField.OnBlur" 38 | Events.Valid = "InputField.OnValid" 39 | Events.Invalid = "InputField.OnInvalid" 40 | Events.Match = "InputField.OnMatch" 41 | Events.FileData = "InputField.OnFileData" 42 | 43 | @define "value", 44 | get: -> 45 | @input.value 46 | 47 | set: (v) -> 48 | return unless v 49 | if @input 50 | @changeInputValue v 51 | 52 | 53 | constructor: (@options={}) -> 54 | 55 | @isNumber = false 56 | @isSearch = false 57 | @isFile = false 58 | 59 | @isEmpty = true 60 | @isValid = null 61 | 62 | @isFileMulti = false 63 | @isFilePhoto = false 64 | @isFileVideo = false 65 | 66 | @originalTextColor = null 67 | 68 | # Make sure we set the Checking Flag 69 | @shouldCheckValidity = true if @options.pattern? or @options.match? 70 | 71 | # Make sure this is in px 72 | @options.lineHeight = "#{@options.lineHeight}px" if @options.lineHeight? 73 | 74 | # Framer Layer Props 75 | @options.name ?= "#{@options.type}Input" 76 | @options.color ?= "#000" 77 | @options.backgroundColor ?= "" 78 | @options.borderRadius ?= 0 79 | 80 | # Custom Layer Props 81 | @options.type ?= "text" 82 | @options.fontSize ?= 32 83 | @options.fontWeight ?= 300 84 | @options.fontFamily ?= "-apple-system, Helvetica Neue" 85 | @options.lineHeight ?= 1.25 86 | @options.indent ?= 0 87 | @options.placeHolderFocus ?= null 88 | @options.placeHolderColor ?= null 89 | 90 | 91 | # Started work on file 92 | if _.startsWith(@options.type, ["file"]) 93 | @options.fontSize = "inherit" 94 | @options.fontWeight = 400 95 | @options.lineHeight = 1 96 | 97 | super @options 98 | 99 | # Adjust a few things for various types 100 | 101 | switch @options.type 102 | when "search" then @isSearch = true 103 | when "number" then @isNumber = true 104 | when "numbers-only", "number-only" 105 | @isNumber = true 106 | @options.type = if @options.pattern? then "number" else "text" 107 | @options.pattern = if @options.pattern? then @options.pattern else PATTERN_NUMBER 108 | when "file", "file-multiple", "file-image", "file-video" 109 | @isFile = true 110 | @isFilePhoto = true if @options.type is "file-image" 111 | @isFileVideo = true if @options.type is "file-video" 112 | @isFileMulti = true if @options.type is "file-multiple" 113 | @options.type = "file" 114 | 115 | 116 | @html += switch 117 | when @isNumber then "" 118 | when @isSearch then "" 119 | else "" 120 | 121 | if @options.placeHolderColor? 122 | @html += "" 123 | 124 | # Create The Input 125 | 126 | @input = document.createElement "input" 127 | # Text Type Adjustments 128 | @input.type = @options.type 129 | @input.value = @options.value if @options.value? 130 | @input.placeholder = @options.placeHolder if @options.placeHolder? 131 | @input.pattern = @options.pattern if @options.pattern? 132 | @input.setAttribute("maxLength", @options.maxLength) if @options.maxLength? 133 | @input.setAttribute("autocapitalize", (if @options.autoCapitalize is true then "on" else "off")) 134 | @input.setAttribute("autocomplete", (if @options.autoComplete is true then "on" else "off")) 135 | @input.setAttribute("autocorrect", (if @options.autoCorrect is true then "on" else "off")) 136 | # File Type Adjustments 137 | @input.setAttribute("multiple", "multiple") if @isFileMulti 138 | @input.setAttribute("accept", "video/*" ) if @isFileVideo 139 | @input.setAttribute("accept", "image/*" ) if @isFilePhoto 140 | 141 | @_element.appendChild @input 142 | 143 | # Setup Values 144 | @isEmpty = !(@options.value?.length > 0) 145 | @originalTextColor = @options.color 146 | 147 | # Setup Input Style 148 | 149 | inputStyle = 150 | font: "#{@options.fontWeight} #{@options.fontSize}px/#{@options.lineHeight} #{@options.fontFamily}" 151 | outline: "none" 152 | textIndent: "#{@options.indent}px" 153 | backgroundColor: "transparent" 154 | height: "100%" 155 | width: "100%" 156 | margin: "0" 157 | padding: "0" 158 | verticalAlign: "top" 159 | "-webkit-appearance": "none" 160 | opacity: if @isFile then 0 else 1 161 | pointerEvents: if @isFile then "all" else "auto" 162 | 163 | @input.style[key] = val for key, val of inputStyle 164 | @input.style.color = @options.color if @options.color? 165 | 166 | @input.onfocus = => 167 | document.body.scrollTop = 0 168 | @input.placeholder = @options.placeHolderFocus if @options.placeHolderFocus? 169 | document.body.scrollTop = 0 170 | @emit(Events.Focus, @input.value, @) 171 | 172 | @input.onblur = => 173 | document.body.scrollTop = 0 174 | unless @input.placeholder is @options.placeHolder or !@options.placeHolder? 175 | @input.placeholder = @options.placeHolder 176 | @emit(Events.Blur, @input.value, @) 177 | 178 | @input.oninput = => 179 | @isEmpty = !( @input.value?.length > 0) 180 | @emit(Events.Input, @input.value, @) 181 | @checkValidity() 182 | 183 | @input.addEventListener("change", @fileSelectHandler, false) if @isFile 184 | 185 | @on Events.TouchEnd, -> @input.focus() 186 | @on "change:color", -> @changeInputTextColor() 187 | 188 | @wrapFileInputToParent() 189 | 190 | 191 | # http://www.sitepoint.com/html5-javascript-open-dropped-files/ 192 | fileSelectHandler: (event) => 193 | return unless event # fix Check this better? 194 | file = event.target.files[0] 195 | if file.type.indexOf("image") == 0 196 | reader = new FileReader() 197 | reader.onload = (readEvent) => 198 | @emit(Events.FileData, readEvent.target.result, @) 199 | console.log readEvent 200 | console.log file 201 | reader.readAsDataURL file 202 | 203 | checkValidity: -> 204 | return unless @shouldCheckValidity 205 | 206 | if @options.pattern? 207 | validity = @input.checkValidity() 208 | @isEmpty = !( @input.value?.length > 0) 209 | 210 | if @isValid isnt validity or @isEmpty 211 | if @isEmpty or !validity 212 | @isValid = false 213 | @emit(Events.Invalid, @input.value, @) 214 | else 215 | @isValid = true 216 | @emit(Events.Valid, @input.value, @) 217 | 218 | if @checkMatch() 219 | @isValid = true 220 | @emit(Events.Match, @input.value, @) 221 | 222 | checkMatch: -> 223 | return false unless @options.match? 224 | if Array.isArray(@options.match) 225 | for match in @options.match 226 | return true if @input.value.indexOf(match) > -1 227 | else 228 | return true if @input.value.indexOf(@options.match) > -1 229 | return false 230 | 231 | clear: -> 232 | @input.value = "" 233 | @isValid = null 234 | @isEmpty = true 235 | 236 | changeInputTextColor: -> 237 | @input.style.color = @color.toHexString() 238 | 239 | changeInputValue: (v) -> 240 | @input.value = v 241 | @input.oninput() 242 | 243 | wrapFileInputToParent: -> 244 | return unless @isFile 245 | if @.parent 246 | @.width = @.parent.frame.width 247 | @.height = @.parent.frame.height 248 | else 249 | @input.style.opacity = 1 250 | @input.style.lineHeight = "#{@.height}px" 251 | @input.style.color = "#fff" 252 | @input.style.textIndent = "1em" 253 | @.backgroundColor = "#fff" 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jordan Dobson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # framer-InputField 2 | A module to add text & date inputs to your prototypes and listen to events. 3 | --------------------------------------------------------------------------------