├── README.md ├── example.coffee ├── examples ├── feedback.framer │ ├── .gitignore │ ├── app.coffee │ ├── framer │ │ ├── .bookmark │ │ ├── coffee-script.js │ │ ├── config.json │ │ ├── design.vekter │ │ ├── framer.generated.js │ │ ├── framer.init.js │ │ ├── framer.js │ │ ├── framer.js.map │ │ ├── framer.modules.js │ │ ├── framer.vekter.js │ │ ├── images │ │ │ ├── cursor-active.png │ │ │ ├── cursor-active@2x.png │ │ │ ├── cursor.png │ │ │ ├── cursor@2x.png │ │ │ ├── icon-120.png │ │ │ ├── icon-152.png │ │ │ ├── icon-180.png │ │ │ ├── icon-192.png │ │ │ └── icon-76.png │ │ ├── style.css │ │ └── version │ ├── images │ │ ├── .gitkeep │ │ └── Artboard Copy 3.svg │ ├── index.html │ └── modules │ │ └── feedback.coffee └── share-permalink.framer │ ├── .gitignore │ ├── app.coffee │ ├── framer │ ├── .bookmark │ ├── coffee-script.js │ ├── config.json │ ├── design.vekter │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── framer.vekter.js │ ├── images │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ └── icon-76.png │ ├── style.css │ └── version │ ├── images │ ├── .gitkeep │ └── design │ │ ├── VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png │ │ ├── VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png-preview │ │ ├── cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png │ │ ├── cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png-preview │ │ ├── e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png │ │ ├── e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png-preview │ │ ├── f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png │ │ ├── f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-1024 │ │ ├── f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-2048 │ │ ├── f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-512 │ │ ├── f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-preview │ │ ├── ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png │ │ ├── ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png-preview │ │ ├── n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png │ │ └── n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png-preview │ ├── index.html │ └── modules │ └── feedback.coffee ├── feedback.coffee ├── module.json └── thumb.png /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Framer Feedback Icon 4 | 5 |

6 |

Framer Feedback

7 |

Easily include feedback messages in your prototypes. 8 |

9 |

10 | 11 | Install with Framer Modules 13 | 14 |

15 | 16 |
17 | 18 | ## Discover 19 | The Feedback Module for Framer makes it easier for you to prototype with feedback messages. It allows you to easily spawn two different types of feedback messages in any part of your prototype. 20 | 21 | [![](https://media.giphy.com/media/3gL42l3ppwJC6eKxem/source.gif)](https://framer.cloud/UbNRL) 22 | 23 | ## Example 24 | 25 | [Copy to clipboard](https://framer.cloud/GUsVL) - Feedback message when copying an app permalink to clipboard. 26 | 27 | ## Including the Module 28 | 29 | To include the Feedback Class as a module, place the `feedback.coffee` file inside the `/modules` folder of your prototype. 30 | 31 | Include the module into your Framer project: 32 | 33 | ```coffee 34 | Feedback = require "feedback" 35 | ``` 36 | 37 | ## Generic Feedback 38 | 39 | By default, the feedback component includes a dismissable icon at the end of the message. This is often used when you wish to show the user a message that needs their attention. 40 | 41 | ```coffee 42 | feedback = new Feedback 43 | text: 'Hello world.' 44 | ``` 45 | 46 | ![generic feedback](https://media.giphy.com/media/4ZobZB3GghKGwR1KVp/source.gif) 47 | 48 | Since this module extends [TextLayer.](https://framer.com/docs/#text.textlayer), it inherits all the goodness that comes with it. For example, to invert the style of the feedback component (white background / dark text): 49 | 50 | ```coffee 51 | feedback = new Feedback 52 | text: 'Hello world.' 53 | color: 'black' 54 | backgroundColor: 'white' 55 | ``` 56 | 57 | ## Auto Dismiss Feedback 58 | 59 | If an `autoDimiss` object is passed in as an option, it will dismiss itself after a set duration of time. 60 | 61 | ```coffee 62 | feedback = new Feedback 63 | text: 'Hello world.' 64 | autoDismiss: 65 | duration: 3 # duration before auto dissmiss 66 | color: '007AFF' # counter bar color 67 | counterHeight: 5 # counter bar height 68 | ``` 69 | 70 | Some `autoDismiss` options include: 71 | 72 | | Properties | Type | Description | 73 | | :------------ | :----- | :------------------------------------------------ | 74 | | duration | number | duration before feedback message dismisses itself | 75 | | color | Color | counter bar color | 76 | | counterHeight | number | counter bar height | 77 | 78 | ![auto dismiss feedback](https://media.giphy.com/media/O5txiLniPd3nI0CKcG/source.gif) 79 | 80 | ## Listen to dismiss events 81 | 82 | You can also listen to dismiss event to trigger other functions. 83 | 84 | ```coffee 85 | feedback = new feedback 86 | text: 'Hello, world.' 87 | autoDimiss: 88 | duration: 2 89 | 90 | feedback.onDimiss -> 91 | print 'feedback is dismissed' 92 | ``` 93 | -------------------------------------------------------------------------------- /example.coffee: -------------------------------------------------------------------------------- 1 | # Auto Dismiss Feedback Message 2 | Feedback = new Feedback 3 | text: 'Hello world.' 4 | backgroundColor: '#333' 5 | autoDismiss: 6 | duration: 3 7 | color: '#007AFF' 8 | counterHeight: 5 9 | -------------------------------------------------------------------------------- /examples/feedback.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /examples/feedback.framer/app.coffee: -------------------------------------------------------------------------------- 1 | Feedback = require 'feedback' 2 | 3 | button_timer.onClick -> 4 | feedbackAutoDismiss = new Feedback 5 | text: 'Hello world.' 6 | autoDismiss: 7 | duration: 3 8 | color: '#007AFF' 9 | counterHeight: 5 10 | 11 | 12 | button_generic.onClick -> 13 | feedback = new Feedback 14 | text: 'Hello world.' -------------------------------------------------------------------------------- /examples/feedback.framer/framer/.bookmark: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/.bookmark -------------------------------------------------------------------------------- /examples/feedback.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "orientation" : 0, 3 | "updateDelay" : 0.29999999999999999, 4 | "designModeSelected" : 0, 5 | "cachedDeviceHeight" : 0, 6 | "contentScale" : 1, 7 | "cachedDeviceWidth" : 0, 8 | "deviceType" : "fullscreen", 9 | "sharedPrototype" : true, 10 | "propertyPanelToggleStates" : { 11 | 12 | }, 13 | "projectId" : "7D28D928-08A8-4309-A868-CD0CFCE113AA", 14 | "deviceOrientation" : 0, 15 | "selectedHand" : "iphone-hands-1", 16 | "showBezel" : true, 17 | "foldedCodeRanges" : [ 18 | 19 | ], 20 | "deviceScale" : 1 21 | } -------------------------------------------------------------------------------- /examples/feedback.framer/framer/design.vekter: -------------------------------------------------------------------------------- 1 | { 2 | "root" : { 3 | "__class" : "CanvasNode", 4 | "children" : [ 5 | { 6 | "__class" : "FrameNode", 7 | "aspectRatioLocked" : false, 8 | "blendingEnabled" : 0, 9 | "blendingMode" : "normal", 10 | "blur" : 12, 11 | "blurEnabled" : 0, 12 | "blurType" : "layer", 13 | "borderBottom" : 1, 14 | "borderColor" : "#222", 15 | "borderEnabled" : 0, 16 | "borderLeft" : 1, 17 | "borderPerSide" : false, 18 | "borderRight" : 1, 19 | "borderStyle" : "solid", 20 | "borderTop" : 1, 21 | "borderWidth" : 1, 22 | "bottom" : null, 23 | "boxShadows" : [ 24 | 25 | ], 26 | "brightness" : 100, 27 | "brightnessEnabled" : 0, 28 | "centerAnchorX" : 0, 29 | "centerAnchorY" : 0, 30 | "children" : [ 31 | { 32 | "__class" : "FrameNode", 33 | "aspectRatioLocked" : false, 34 | "blendingEnabled" : 0, 35 | "blendingMode" : "normal", 36 | "blur" : 12, 37 | "blurEnabled" : 0, 38 | "blurType" : "layer", 39 | "borderBottom" : 1, 40 | "borderColor" : "#222", 41 | "borderEnabled" : 0, 42 | "borderLeft" : 1, 43 | "borderPerSide" : false, 44 | "borderRight" : 1, 45 | "borderStyle" : "solid", 46 | "borderTop" : 1, 47 | "borderWidth" : 1, 48 | "bottom" : null, 49 | "boxShadows" : [ 50 | 51 | ], 52 | "brightness" : 100, 53 | "brightnessEnabled" : 0, 54 | "centerAnchorX" : 0.5, 55 | "centerAnchorY" : 0.2158920539730135, 56 | "children" : [ 57 | { 58 | "__class" : "FrameNode", 59 | "aspectRatioLocked" : false, 60 | "blendingEnabled" : 0, 61 | "blendingMode" : "normal", 62 | "blur" : 12, 63 | "blurEnabled" : 0, 64 | "blurType" : "layer", 65 | "borderBottom" : 1, 66 | "borderColor" : "rgba(205, 207, 209, 1.00)", 67 | "borderEnabled" : -1, 68 | "borderLeft" : 1, 69 | "borderPerSide" : false, 70 | "borderRight" : 1, 71 | "borderStyle" : "solid", 72 | "borderTop" : 1, 73 | "borderWidth" : 1, 74 | "bottom" : 0, 75 | "boxShadows" : [ 76 | 77 | ], 78 | "brightness" : 100, 79 | "brightnessEnabled" : 0, 80 | "centerAnchorX" : 0.5, 81 | "centerAnchorY" : 0.80514705882352944, 82 | "children" : [ 83 | { 84 | "__class" : "TextNode", 85 | "autoSize" : true, 86 | "blendingEnabled" : 0, 87 | "blendingMode" : "normal", 88 | "blur" : 12, 89 | "blurEnabled" : 0, 90 | "blurType" : "layer", 91 | "bottom" : null, 92 | "brightness" : 100, 93 | "brightnessEnabled" : 0, 94 | "centerAnchorX" : 0.5, 95 | "centerAnchorY" : 0.5, 96 | "constraintsLocked" : false, 97 | "contrast" : 100, 98 | "contrastEnabled" : 0, 99 | "editable" : false, 100 | "exportOptions" : [ 101 | 102 | ], 103 | "grayscale" : 0, 104 | "grayScaleEnabled" : 0, 105 | "height" : 21, 106 | "heightFactor" : null, 107 | "hueRotate" : 0, 108 | "hueRotateEnabled" : 0, 109 | "id" : "g_m6b2\/{", 110 | "invert" : 0, 111 | "invertEnabled" : 0, 112 | "left" : null, 113 | "locked" : false, 114 | "name" : null, 115 | "opacity" : 1, 116 | "parentid" : "P&Tf_H-9", 117 | "right" : null, 118 | "rotation" : 0, 119 | "saturate" : 100, 120 | "saturateEnabled" : 0, 121 | "sepia" : 0, 122 | "sepiaEnabled" : 0, 123 | "shadows" : [ 124 | 125 | ], 126 | "styledText" : { 127 | "__class" : "StyledTextDraft", 128 | "blocks" : [ 129 | { 130 | "data" : { 131 | "emptyStyle" : [ 132 | "FONT:SFUIText-Semibold", 133 | "SIZE:18", 134 | "COLOR:hsl(0, 0%, 100%)" 135 | ] 136 | }, 137 | "depth" : 0, 138 | "entityRanges" : [ 139 | 140 | ], 141 | "inlineStyleRanges" : [ 142 | { 143 | "length" : 21, 144 | "offset" : 0, 145 | "style" : "FONT:SFUIText-Semibold" 146 | }, 147 | { 148 | "length" : 21, 149 | "offset" : 0, 150 | "style" : "SIZE:18" 151 | }, 152 | { 153 | "length" : 21, 154 | "offset" : 0, 155 | "style" : "COLOR:hsl(0, 0%, 100%)" 156 | } 157 | ], 158 | "key" : "2diue", 159 | "text" : "Auto Dismiss Feedback", 160 | "type" : "unstyled" 161 | } 162 | ], 163 | "cached" : { 164 | "html" : "Auto Dismiss Feedback<\/span><\/span>", 165 | "os" : "10_13", 166 | "size" : { 167 | "height" : 21, 168 | "width" : 207 169 | }, 170 | "width" : 0 171 | }, 172 | "entityMap" : { 173 | 174 | } 175 | }, 176 | "targetName" : null, 177 | "top" : null, 178 | "visible" : true, 179 | "width" : 207, 180 | "widthFactor" : null 181 | } 182 | ], 183 | "clip" : false, 184 | "constraintsLocked" : false, 185 | "contrast" : 100, 186 | "contrastEnabled" : 0, 187 | "deviceType" : null, 188 | "exportIncludesBackground" : true, 189 | "exportOptions" : [ 190 | 191 | ], 192 | "fillColor" : "hsl(229, 100%, 50%)", 193 | "fillEnabled" : true, 194 | "fillGradient" : { 195 | "__class" : "LinearGradient", 196 | "alpha" : 1, 197 | "angle" : 0, 198 | "end" : "#D2F29F", 199 | "start" : "#5FA52C" 200 | }, 201 | "fillImage" : null, 202 | "fillImagePixelHeight" : null, 203 | "fillImagePixelWidth" : null, 204 | "fillImageResize" : "fill", 205 | "fillType" : "color", 206 | "grayscale" : 0, 207 | "grayScaleEnabled" : 0, 208 | "height" : 53, 209 | "heightFactor" : null, 210 | "hueRotate" : 0, 211 | "hueRotateEnabled" : 0, 212 | "id" : "P&Tf_H-9", 213 | "intrinsicHeight" : null, 214 | "intrinsicWidth" : null, 215 | "invert" : 0, 216 | "invertEnabled" : 0, 217 | "left" : 0, 218 | "locked" : false, 219 | "name" : "button_timer", 220 | "opacity" : 1, 221 | "parentid" : "Im7Gy7vOg", 222 | "radius" : 5, 223 | "radiusBottomLeft" : 5, 224 | "radiusBottomRight" : 5, 225 | "radiusIsRelative" : false, 226 | "radiusPerCorner" : false, 227 | "radiusTopLeft" : 5, 228 | "radiusTopRight" : 5, 229 | "right" : 0, 230 | "rotation" : 0, 231 | "saturate" : 100, 232 | "saturateEnabled" : 0, 233 | "sepia" : 0, 234 | "sepiaEnabled" : 0, 235 | "targetName" : "button_timer", 236 | "top" : null, 237 | "visible" : true, 238 | "width" : 335, 239 | "widthFactor" : null 240 | }, 241 | { 242 | "__class" : "FrameNode", 243 | "aspectRatioLocked" : false, 244 | "blendingEnabled" : 0, 245 | "blendingMode" : "normal", 246 | "blur" : 12, 247 | "blurEnabled" : 0, 248 | "blurType" : "layer", 249 | "borderBottom" : 1, 250 | "borderColor" : "rgba(205, 207, 209, 1.00)", 251 | "borderEnabled" : -1, 252 | "borderLeft" : 1, 253 | "borderPerSide" : false, 254 | "borderRight" : 1, 255 | "borderStyle" : "solid", 256 | "borderTop" : 1, 257 | "borderWidth" : 1, 258 | "bottom" : null, 259 | "boxShadows" : [ 260 | 261 | ], 262 | "brightness" : 100, 263 | "brightnessEnabled" : 0, 264 | "centerAnchorX" : 0.5, 265 | "centerAnchorY" : 0.19485294117647059, 266 | "children" : [ 267 | { 268 | "__class" : "TextNode", 269 | "autoSize" : true, 270 | "blendingEnabled" : 0, 271 | "blendingMode" : "normal", 272 | "blur" : 12, 273 | "blurEnabled" : 0, 274 | "blurType" : "layer", 275 | "bottom" : null, 276 | "brightness" : 100, 277 | "brightnessEnabled" : 0, 278 | "centerAnchorX" : 0.50187265917602997, 279 | "centerAnchorY" : 0.5, 280 | "constraintsLocked" : false, 281 | "contrast" : 100, 282 | "contrastEnabled" : 0, 283 | "editable" : false, 284 | "exportOptions" : [ 285 | 286 | ], 287 | "grayscale" : 0, 288 | "grayScaleEnabled" : 0, 289 | "height" : 21, 290 | "heightFactor" : null, 291 | "hueRotate" : 0, 292 | "hueRotateEnabled" : 0, 293 | "id" : "uB+,3u3M", 294 | "invert" : 0, 295 | "invertEnabled" : 0, 296 | "left" : null, 297 | "locked" : false, 298 | "name" : null, 299 | "opacity" : 1, 300 | "parentid" : "ql4|P5U%", 301 | "right" : null, 302 | "rotation" : 0, 303 | "saturate" : 100, 304 | "saturateEnabled" : 0, 305 | "sepia" : 0, 306 | "sepiaEnabled" : 0, 307 | "shadows" : [ 308 | 309 | ], 310 | "styledText" : { 311 | "__class" : "StyledTextDraft", 312 | "blocks" : [ 313 | { 314 | "data" : { 315 | "emptyStyle" : [ 316 | "LETTERSPACING:0", 317 | "LINEHEIGHT:1.2", 318 | "FONT:SFUIText-Semibold", 319 | "ALIGN:center", 320 | "SIZE:18", 321 | "COLOR:hsl(0, 0%, 100%)" 322 | ] 323 | }, 324 | "depth" : 0, 325 | "entityRanges" : [ 326 | 327 | ], 328 | "inlineStyleRanges" : [ 329 | { 330 | "length" : 16, 331 | "offset" : 0, 332 | "style" : "LETTERSPACING:0" 333 | }, 334 | { 335 | "length" : 16, 336 | "offset" : 0, 337 | "style" : "LINEHEIGHT:1.2" 338 | }, 339 | { 340 | "length" : 16, 341 | "offset" : 0, 342 | "style" : "FONT:SFUIText-Semibold" 343 | }, 344 | { 345 | "length" : 16, 346 | "offset" : 0, 347 | "style" : "ALIGN:center" 348 | }, 349 | { 350 | "length" : 16, 351 | "offset" : 0, 352 | "style" : "SIZE:18" 353 | }, 354 | { 355 | "length" : 16, 356 | "offset" : 0, 357 | "style" : "COLOR:hsl(0, 0%, 100%)" 358 | } 359 | ], 360 | "key" : "2diue", 361 | "text" : "Generic Feedback", 362 | "type" : "unstyled" 363 | } 364 | ], 365 | "cached" : { 366 | "html" : "Generic Feedback<\/span><\/span>", 367 | "os" : "10_13", 368 | "size" : { 369 | "height" : 21, 370 | "width" : 161 371 | }, 372 | "width" : 0 373 | }, 374 | "entityMap" : { 375 | 376 | } 377 | }, 378 | "targetName" : null, 379 | "top" : null, 380 | "visible" : true, 381 | "width" : 161, 382 | "widthFactor" : null 383 | } 384 | ], 385 | "clip" : false, 386 | "constraintsLocked" : false, 387 | "contrast" : 100, 388 | "contrastEnabled" : 0, 389 | "deviceType" : null, 390 | "exportIncludesBackground" : true, 391 | "exportOptions" : [ 392 | 393 | ], 394 | "fillColor" : "hsl(229, 100%, 50%)", 395 | "fillEnabled" : true, 396 | "fillGradient" : { 397 | "__class" : "LinearGradient", 398 | "alpha" : 1, 399 | "angle" : 0, 400 | "end" : "rgba(0,0,0,0)", 401 | "start" : "#000000" 402 | }, 403 | "fillImage" : null, 404 | "fillImagePixelHeight" : null, 405 | "fillImagePixelWidth" : null, 406 | "fillImageResize" : "fill", 407 | "fillType" : "color", 408 | "grayscale" : 0, 409 | "grayScaleEnabled" : 0, 410 | "height" : 53, 411 | "heightFactor" : null, 412 | "hueRotate" : 0, 413 | "hueRotateEnabled" : 0, 414 | "id" : "ql4|P5U%", 415 | "intrinsicHeight" : null, 416 | "intrinsicWidth" : null, 417 | "invert" : 0, 418 | "invertEnabled" : 0, 419 | "left" : 0, 420 | "locked" : false, 421 | "name" : "button_generic", 422 | "opacity" : 1, 423 | "parentid" : "Im7Gy7vOg", 424 | "radius" : 5, 425 | "radiusBottomLeft" : 5, 426 | "radiusBottomRight" : 5, 427 | "radiusIsRelative" : false, 428 | "radiusPerCorner" : false, 429 | "radiusTopLeft" : 5, 430 | "radiusTopRight" : 5, 431 | "right" : 0, 432 | "rotation" : 0, 433 | "saturate" : 100, 434 | "saturateEnabled" : 0, 435 | "sepia" : 0, 436 | "sepiaEnabled" : 0, 437 | "targetName" : "button_generic", 438 | "top" : 0, 439 | "visible" : true, 440 | "width" : 335, 441 | "widthFactor" : null 442 | } 443 | ], 444 | "clip" : false, 445 | "constraintsLocked" : false, 446 | "contrast" : 100, 447 | "contrastEnabled" : 0, 448 | "deviceType" : null, 449 | "exportIncludesBackground" : true, 450 | "exportOptions" : [ 451 | 452 | ], 453 | "fillColor" : "rgba(255,255,255,1)", 454 | "fillEnabled" : false, 455 | "fillGradient" : { 456 | "__class" : "LinearGradient", 457 | "alpha" : 1, 458 | "angle" : 0, 459 | "end" : "rgba(0,0,0,0)", 460 | "start" : "black" 461 | }, 462 | "fillImage" : null, 463 | "fillImagePixelHeight" : null, 464 | "fillImagePixelWidth" : null, 465 | "fillImageResize" : "fill", 466 | "fillType" : "color", 467 | "grayscale" : 0, 468 | "grayScaleEnabled" : 0, 469 | "height" : 136, 470 | "heightFactor" : null, 471 | "hueRotate" : 0, 472 | "hueRotateEnabled" : 0, 473 | "id" : "Im7Gy7vOg", 474 | "intrinsicHeight" : null, 475 | "intrinsicWidth" : null, 476 | "invert" : 0, 477 | "invertEnabled" : 0, 478 | "left" : 61, 479 | "locked" : false, 480 | "name" : null, 481 | "opacity" : 1, 482 | "parentid" : "M~&hoP2z", 483 | "radius" : 0, 484 | "radiusBottomLeft" : 0, 485 | "radiusBottomRight" : 0, 486 | "radiusIsRelative" : false, 487 | "radiusPerCorner" : false, 488 | "radiusTopLeft" : 0, 489 | "radiusTopRight" : 0, 490 | "right" : 61, 491 | "rotation" : 0, 492 | "saturate" : 100, 493 | "saturateEnabled" : 0, 494 | "sepia" : 0, 495 | "sepiaEnabled" : 0, 496 | "targetName" : null, 497 | "top" : 76, 498 | "visible" : true, 499 | "width" : 253, 500 | "widthFactor" : null 501 | } 502 | ], 503 | "clip" : true, 504 | "constraintsLocked" : false, 505 | "contrast" : 100, 506 | "contrastEnabled" : 0, 507 | "deviceType" : "apple-iphone-x-space-gray", 508 | "exportIncludesBackground" : true, 509 | "exportOptions" : [ 510 | 511 | ], 512 | "fillColor" : "hsl(0, 0%, 100%)", 513 | "fillEnabled" : true, 514 | "fillGradient" : { 515 | "__class" : "LinearGradient", 516 | "alpha" : 1, 517 | "angle" : 0, 518 | "end" : "rgba(0,0,0,0)", 519 | "start" : "black" 520 | }, 521 | "fillImage" : null, 522 | "fillImagePixelHeight" : null, 523 | "fillImagePixelWidth" : null, 524 | "fillImageResize" : "fill", 525 | "fillType" : "color", 526 | "grayscale" : 0, 527 | "grayScaleEnabled" : 0, 528 | "height" : 812, 529 | "heightFactor" : null, 530 | "hueRotate" : 0, 531 | "hueRotateEnabled" : 0, 532 | "id" : "M~&hoP2z", 533 | "intrinsicHeight" : null, 534 | "intrinsicWidth" : null, 535 | "invert" : 0, 536 | "invertEnabled" : 0, 537 | "left" : 0, 538 | "locked" : false, 539 | "name" : null, 540 | "opacity" : 1, 541 | "parentid" : "\/xsmIwvt", 542 | "radius" : 0, 543 | "radiusBottomLeft" : 0, 544 | "radiusBottomRight" : 0, 545 | "radiusIsRelative" : false, 546 | "radiusPerCorner" : false, 547 | "radiusTopLeft" : 0, 548 | "radiusTopRight" : 0, 549 | "right" : null, 550 | "rotation" : 0, 551 | "saturate" : 100, 552 | "saturateEnabled" : 0, 553 | "sepia" : 0, 554 | "sepiaEnabled" : 0, 555 | "targetName" : null, 556 | "top" : 0, 557 | "visible" : true, 558 | "width" : 375, 559 | "widthFactor" : null 560 | } 561 | ], 562 | "id" : "\/xsmIwvt", 563 | "parentid" : null 564 | }, 565 | "version" : 21 566 | } -------------------------------------------------------------------------------- /examples/feedback.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":1,"selectedHand":"iphone-hands-1","deviceType":"fullscreen","contentScale":1,"hideBezel":false,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":1,"selectedHand":"iphone-hands-1","deviceType":"fullscreen","contentScale":1,"hideBezel":false,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"feedback.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /examples/feedback.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 += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function loadProject(callback) { 60 | CoffeeScript.load("app.coffee", callback) 61 | } 62 | 63 | function setDefaultPageTitle() { 64 | // If no title was set we set it to the project folder name so 65 | // you get a nice name on iOS if you bookmark to desktop. 66 | document.addEventListener("DOMContentLoaded", function() { 67 | if (document.title == "") { 68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 69 | document.title = window.FramerStudioInfo.documentTitle 70 | } else { 71 | document.title = window.location.pathname.replace(/\//g, "") 72 | } 73 | } 74 | }) 75 | } 76 | 77 | function init() { 78 | 79 | if (Utils.isFramerStudio()) { 80 | return 81 | } 82 | 83 | setDefaultPageTitle() 84 | 85 | if (!isCompatibleBrowser()) { 86 | return showBrowserAlert() 87 | } 88 | 89 | if (!isFileLoadingAllowed()) { 90 | return showFileLoadingAlert() 91 | } 92 | 93 | loadProject(function(){ 94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project") 95 | var context; 96 | if (typeof Framer !== "undefined" && Framer !== null) { 97 | if ((context = Framer.CurrentContext) != null) { 98 | if (typeof context.emit === "function") { 99 | context.emit("loaded:project"); 100 | } 101 | } 102 | } 103 | }) 104 | } 105 | 106 | init() 107 | 108 | })() 109 | -------------------------------------------------------------------------------- /examples/feedback.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\n \n\n\n"; 20 | if (options.autoDismiss) { 21 | textPadding = { 22 | top: 16, 23 | right: 16, 24 | bottom: 16, 25 | left: 16 26 | }; 27 | } else { 28 | textPadding = { 29 | top: 16, 30 | right: 48, 31 | bottom: 16, 32 | left: 16 33 | }; 34 | } 35 | Feedback.__super__.constructor.call(this, _.defaults(options, { 36 | fontSize: 16, 37 | color: 'white', 38 | text: options.text, 39 | backgroundColor: '#333', 40 | borderRadius: 3, 41 | lineHeight: 1.4, 42 | x: Align.center, 43 | y: Align.bottom(-20), 44 | clip: true, 45 | padding: textPadding, 46 | borderColor: 'rgba(0, 0, 0, 0.2)', 47 | borderWidth: 1 48 | })); 49 | this.name = 'feedback'; 50 | this.states.show = { 51 | opacity: 1, 52 | y: options.y || Align.bottom(0) 53 | }; 54 | this.states.hide = { 55 | opacity: 0, 56 | y: options.y || Align.bottom(0) 57 | }; 58 | this.states.animationOptions = { 59 | time: 0.25 60 | }; 61 | this.stateSwitch('hide'); 62 | this.states["switch"]('show'); 63 | dismissFeedback = (function(_this) { 64 | return function() { 65 | var feedback; 66 | feedback = Layer.select('feedback'); 67 | feedback.states["switch"]('hide'); 68 | Utils.delay(0.5, function() { 69 | return feedback.destroy(); 70 | }); 71 | return _this.emit(Events.Dismiss); 72 | }; 73 | })(this); 74 | if (options.autoDismiss) { 75 | counter = new Layer({ 76 | parent: this, 77 | borderRadius: 10, 78 | y: Align.top(0), 79 | height: options.autoDismiss.counterHeight || 3, 80 | backgroundColor: options.autoDismiss.color || 'white', 81 | width: this.width 82 | }); 83 | counter.animate({ 84 | width: 0, 85 | options: { 86 | time: options.autoDismiss.duration || 3, 87 | curve: 'linear' 88 | } 89 | }); 90 | counter.onAnimationEnd(function() { 91 | return dismissFeedback(); 92 | }); 93 | } else { 94 | dismiss = new Layer({ 95 | parent: this, 96 | backgroundColor: null, 97 | borderRadius: 50, 98 | y: Align.top(14), 99 | x: Align.right(-12), 100 | html: svg, 101 | width: 24, 102 | height: 24, 103 | opacity: 0.5, 104 | style: { 105 | 'cursor': 'pointer' 106 | } 107 | }); 108 | dismiss.onMouseOver(function() { 109 | return this.opacity = 1; 110 | }); 111 | dismiss.onMouseOut(function() { 112 | return this.opacity = 0.5; 113 | }); 114 | dismiss.onClick(function() { 115 | return dismissFeedback(); 116 | }); 117 | } 118 | } 119 | 120 | Feedback.prototype.onDismiss = function(cb) { 121 | return this.on(Events.Dismiss, cb); 122 | }; 123 | 124 | return Feedback; 125 | 126 | })(TextLayer); 127 | 128 | module.exports = Feedback; 129 | 130 | 131 | },{}]},{},[]) 132 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWVyLm1vZHVsZXMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL1VzZXJzL2phY2t5bGVlL1Byb2plY3RzL2NvZGUvZnJhbWVyLWZlZWRiYWNrLW1vZHVsZS9leGFtcGxlcy9mZWVkYmFjay5mcmFtZXIvbW9kdWxlcy9mZWVkYmFjay5jb2ZmZWUiLCJub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIkV2ZW50cy5EaXNtaXNzID0gXCJEaXNtaXNzRmVlZGJhY2tcIlxuXG4jIEZlZWRiYWNrIENsYXNzXG5jbGFzcyBGZWVkYmFjayBleHRlbmRzIFRleHRMYXllclxuICBjb25zdHJ1Y3RvcjogKG9wdGlvbnM9e30pIC0+XG5cbiAgICAjIERpc21pc3MgaWNvbiBzdmcgc2V0IHVwXG4gICAgc3ZnUHJvcHMgPVxuICAgICAgY29sb3I6IG9wdGlvbnMuY29sb3IgfHwgJ3doaXRlJ1xuXG4gICAgc3ZnID1cbiAgICBcIlwiXCJcbiAgICBcdFx0PHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIyNFwiIGhlaWdodD1cIjI0XCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxuICAgICAgPHBhdGggZmlsbD1cIiN7c3ZnUHJvcHMuY29sb3J9XCIgZD1cIk0xMy40MTUyNSwxMi4wMDA1IEwxNy43MDcyNSw3LjcwNzUgQzE4LjA5ODI1LDcuMzE3NSAxOC4wOTgyNSw2LjY4NDUgMTcuNzA3MjUsNi4yOTM1IEMxNy4zMTYyNSw1LjkwMjUgMTYuNjg0MjUsNS45MDI1IDE2LjI5MzI1LDYuMjkzNSBMMTIuMDAxMjUsMTAuNTg2NSBMNy43MDcyNSw2LjI5MjUgQzcuMzE2MjUsNS45MDI1IDYuNjg0MjUsNS45MDI1IDYuMjkzMjUsNi4yOTI1IEM1LjkwMjI1LDYuNjgzNSA1LjkwMjI1LDcuMzE1NSA2LjI5MzI1LDcuNzA2NSBMMTAuNTg3MjUsMTIuMDAwNSBMNi4yOTMyNSwxNi4yOTQ1IEM1LjkwMzI1LDE2LjY4NDUgNS45MDIyNSwxNy4zMTg1IDYuMjkzMjUsMTcuNzA4NSBDNi42ODQyNSwxOC4wOTk1IDcuMzE3MjUsMTguMDk4NSA3LjcwNzI1LDE3LjcwODUgTDEyLjAwMTI1LDEzLjQxNDUgTDE2LjI5NDI1LDE3LjcwNjUgQzE2LjY4NDI1LDE4LjA5NzUgMTcuMzE3MjUsMTguMDk3NSAxNy43MDgyNSwxNy43MDY1IEMxOC4wOTkyNSwxNy4zMTY1IDE4LjA5ODI1LDE2LjY4MzUgMTcuNzA4MjUsMTYuMjkzNSBMMTMuNDE1MjUsMTIuMDAwNSBaXCIvPlxuICAgIDwvc3ZnPlxuXG5cbiAgICBcdFx0XCJcIlwiXG5cbiAgICAjIHRleHQgcGFkZGluZyBzZXR0aW5ncyBmb3IgZGlmZmVyZW50IHR5cGVzIG9mIGZlZWRiYWNrXG4gICAgaWYgb3B0aW9ucy5hdXRvRGlzbWlzc1xuICAgICAgdGV4dFBhZGRpbmcgPVxuICAgICAgICB0b3A6IDE2LFxuICAgICAgICByaWdodDogMTYsXG4gICAgICAgIGJvdHRvbTogMTYsXG4gICAgICAgIGxlZnQ6IDE2XG4gICAgZWxzZVxuICAgICAgdGV4dFBhZGRpbmcgPVxuICAgICAgICB0b3A6IDE2LFxuICAgICAgICByaWdodDogNDgsXG4gICAgICAgIGJvdHRvbTogMTYsXG4gICAgICAgIGxlZnQ6IDE2XG5cbiAgICAjIHNvbWUgZ2VuZXJpYyBsb29raW5nIGRlZmF1bHRzIGZvciBGZWVkYmFjayBjbGFzc1xuICAgIHN1cGVyIF8uZGVmYXVsdHMgb3B0aW9ucyxcbiAgICAgIGZvbnRTaXplOiAxNlxuICAgICAgY29sb3I6ICd3aGl0ZSdcbiAgICAgIHRleHQ6IG9wdGlvbnMudGV4dFxuICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzMzMydcbiAgICAgIGJvcmRlclJhZGl1czogM1xuICAgICAgbGluZUhlaWdodDogMS40XG4gICAgICB4OiBBbGlnbi5jZW50ZXJcbiAgICAgIHk6IEFsaWduLmJvdHRvbSgtMjApXG4gICAgICBjbGlwOiB0cnVlXG4gICAgICBwYWRkaW5nOiB0ZXh0UGFkZGluZ1xuICAgICAgYm9yZGVyQ29sb3I6ICdyZ2JhKDAsIDAsIDAsIDAuMiknXG4gICAgICBib3JkZXJXaWR0aDogMVxuXG4gICAgQG5hbWUgPSAnZmVlZGJhY2snXG4gICAgQHN0YXRlcy5zaG93ID1cbiAgICAgIG9wYWNpdHk6IDFcbiAgICAgIHk6IG9wdGlvbnMueSB8fCBBbGlnbi5ib3R0b20oMClcblxuICAgIEBzdGF0ZXMuaGlkZSA9XG4gICAgICBvcGFjaXR5OiAwXG4gICAgICB5OiBvcHRpb25zLnkgfHwgQWxpZ24uYm90dG9tKDApXG5cbiAgICBAc3RhdGVzLmFuaW1hdGlvbk9wdGlvbnMgPVxuICAgICAgdGltZTogMC4yNVxuXG4gICAgQHN0YXRlU3dpdGNoKCdoaWRlJylcbiAgICBAc3RhdGVzLnN3aXRjaCgnc2hvdycpXG5cbiAgICAjIGhhbmRsZXIgZm9yIGRpbWlzc2luZyBmZWVkYmFjay5cbiAgICBkaXNtaXNzRmVlZGJhY2sgPSAoKSA9PlxuICAgICAgZmVlZGJhY2sgPSBMYXllci5zZWxlY3QoJ2ZlZWRiYWNrJylcbiAgICAgIGZlZWRiYWNrLnN0YXRlcy5zd2l0Y2goJ2hpZGUnKVxuICAgICAgVXRpbHMuZGVsYXkgMC41LCAtPlxuICAgICAgICBmZWVkYmFjay5kZXN0cm95KClcblxuICAgICAgQGVtaXQoRXZlbnRzLkRpc21pc3MpXG5cblxuICAgICMgV2hlbiAnYXV0b0Rpc21pc3MnIG9iamVjdCBpcyB1c2VkIGFzIGFuIG9wdGlvbiwgZ2VuZXJhdGUgaG9yaXpvbnRhbCBiYXIgdGhhdCBjb3VudHMgZG93biB0byB0aGUgdXNlci1zcGVjaWZpZWQgZHVyYXRpb24uXG4gICAgaWYgb3B0aW9ucy5hdXRvRGlzbWlzc1xuICAgICAgY291bnRlciA9IG5ldyBMYXllclxuICAgICAgICBwYXJlbnQ6IEBcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAxMFxuICAgICAgICB5OiBBbGlnbi50b3AoMClcbiAgICAgICAgaGVpZ2h0OiBvcHRpb25zLmF1dG9EaXNtaXNzLmNvdW50ZXJIZWlnaHQgfHwgM1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IG9wdGlvbnMuYXV0b0Rpc21pc3MuY29sb3IgfHwgJ3doaXRlJ1xuICAgICAgICB3aWR0aDogQHdpZHRoXG5cbiAgICAgIGNvdW50ZXIuYW5pbWF0ZVxuICAgICAgICB3aWR0aDogMFxuICAgICAgICBvcHRpb25zOlxuICAgICAgICAgIHRpbWU6IG9wdGlvbnMuYXV0b0Rpc21pc3MuZHVyYXRpb24gfHwgM1xuICAgICAgICAgIGN1cnZlOiAnbGluZWFyJ1xuXG4gICAgICBjb3VudGVyLm9uQW5pbWF0aW9uRW5kIC0+XG4gICAgICAgIGRpc21pc3NGZWVkYmFjaygpXG5cbiAgICAjIE90aGVyd2lzZSwgZGVmYXVsdCB0byB1c2luZyBhIGRpbWlzc2FibGUgRmVlZGJhY2sgJiBnZW5lcmF0ZSBkaW1pc3MgaWNvbiBidXR0b24uXG4gICAgZWxzZVxuICAgICAgZGlzbWlzcyA9IG5ldyBMYXllclxuICAgICAgICBwYXJlbnQ6IEBcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBudWxsXG4gICAgICAgIGJvcmRlclJhZGl1czogNTBcbiAgICAgICAgeTogQWxpZ24udG9wKDE0KVxuICAgICAgICB4OiBBbGlnbi5yaWdodCgtMTIpXG4gICAgICAgIGh0bWw6IHN2Z1xuICAgICAgICB3aWR0aDogMjRcbiAgICAgICAgaGVpZ2h0OiAyNFxuICAgICAgICBvcGFjaXR5OiAwLjVcbiAgICAgICAgc3R5bGU6ICdjdXJzb3InOidwb2ludGVyJ1xuXG4gICAgICBkaXNtaXNzLm9uTW91c2VPdmVyIC0+XG4gICAgICAgIHRoaXMub3BhY2l0eSA9IDFcblxuICAgICAgZGlzbWlzcy5vbk1vdXNlT3V0IC0+XG4gICAgICAgIHRoaXMub3BhY2l0eSA9IDAuNVxuXG4gICAgICBkaXNtaXNzLm9uQ2xpY2sgLT5cbiAgICAgICAgZGlzbWlzc0ZlZWRiYWNrKClcblxuICBvbkRpc21pc3M6IChjYikgLT4gQG9uKEV2ZW50cy5EaXNtaXNzLCBjYilcblxubW9kdWxlLmV4cG9ydHMgPSBGZWVkYmFja1xuIiwiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFDQUE7QURBQSxJQUFBLFFBQUE7RUFBQTs7O0FBQUEsTUFBTSxDQUFDLE9BQVAsR0FBaUI7O0FBR1g7OztFQUNTLGtCQUFDLE9BQUQ7QUFHWCxRQUFBOztNQUhZLFVBQVE7O0lBR3BCLFFBQUEsR0FDRTtNQUFBLEtBQUEsRUFBTyxPQUFPLENBQUMsS0FBUixJQUFpQixPQUF4Qjs7SUFFRixHQUFBLEdBQ0EsZ0hBQUEsR0FFZ0IsUUFBUSxDQUFDLEtBRnpCLEdBRStCO0lBTy9CLElBQUcsT0FBTyxDQUFDLFdBQVg7TUFDRSxXQUFBLEdBQ0U7UUFBQSxHQUFBLEVBQUssRUFBTDtRQUNBLEtBQUEsRUFBTyxFQURQO1FBRUEsTUFBQSxFQUFRLEVBRlI7UUFHQSxJQUFBLEVBQU0sRUFITjtRQUZKO0tBQUEsTUFBQTtNQU9FLFdBQUEsR0FDRTtRQUFBLEdBQUEsRUFBSyxFQUFMO1FB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 133 | -------------------------------------------------------------------------------- /examples/feedback.framer/framer/framer.vekter.js: -------------------------------------------------------------------------------- 1 | (function(scope) {var __layer_0__ = new Layer({"backgroundColor":"hsl(0, 0%, 100%)","width":375,"height":812,"constraintValues":{"height":812,"heightFactor":1,"width":375,"widthFactor":1},"blending":"normal","clip":true,"borderStyle":"solid"});var __layer_1__ = new Layer({"parent":__layer_0__,"backgroundColor":null,"width":253,"x":61,"height":136,"constraintValues":{"left":61,"height":136,"centerAnchorX":0.5,"width":253,"right":61,"top":76,"centerAnchorY":0.2158920539730135},"blending":"normal","clip":false,"borderStyle":"solid","y":76});var button_timer = new Layer({"parent":__layer_1__,"name":"button_timer","backgroundColor":"hsl(229, 100%, 50%)","width":253,"height":53,"constraintValues":{"height":53,"centerAnchorX":0.5,"width":253,"bottom":0,"right":0,"top":null,"centerAnchorY":0.80514705882352944},"blending":"normal","borderRadius":5,"clip":false,"borderStyle":"solid","y":83});var __layer_2__ = new TextLayer({"parent":button_timer,"backgroundColor":null,"width":207,"x":23,"styledText":{"blocks":[{"inlineStyles":[{"css":{"fontSize":"18px","WebkitTextFillColor":"hsl(0, 0%, 100%)","whiteSpace":"pre","fontWeight":600,"letterSpacing":"0px","tabSize":4,"fontFamily":"\"SFUIText-Semibold\", \"SF UI Text\", sans-serif","lineHeight":"1.2"},"startIndex":0,"endIndex":21}],"text":"Auto Dismiss Feedback"}]},"height":21,"constraintValues":{"left":null,"height":21,"centerAnchorX":0.5,"width":207,"top":null,"centerAnchorY":0.5},"blending":"normal","autoSize":true,"y":16});var button_generic = new Layer({"parent":__layer_1__,"name":"button_generic","backgroundColor":"hsl(229, 100%, 50%)","width":253,"height":53,"constraintValues":{"height":53,"centerAnchorX":0.5,"width":253,"right":0,"centerAnchorY":0.19485294117647059},"blending":"normal","borderRadius":5,"clip":false,"borderStyle":"solid"});var __layer_3__ = new TextLayer({"parent":button_generic,"backgroundColor":null,"width":161,"x":46,"styledText":{"blocks":[{"inlineStyles":[{"css":{"fontSize":"18px","WebkitTextFillColor":"hsl(0, 0%, 100%)","whiteSpace":"pre","fontWeight":600,"letterSpacing":"0px","tabSize":4,"fontFamily":"\"SFUIText-Semibold\", \"SF UI Text\", sans-serif","lineHeight":"1.2"},"startIndex":0,"endIndex":16}],"text":"Generic Feedback"}],"alignment":"center"},"height":21,"constraintValues":{"left":null,"height":21,"centerAnchorX":0.50187265917602997,"width":161,"top":null,"centerAnchorY":0.5},"blending":"normal","autoSize":true,"y":16});if(__layer_1__ !== undefined){__layer_1__.__framerInstanceInfo = {"hash":"#vekter|__layer_1__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_2__ !== undefined){__layer_2__.__framerInstanceInfo = {"framerClass":"TextLayer","hash":"#vekter|__layer_2__","vekterClass":"TextNode","text":"Auto Dismiss Feedback"}};if(__layer_0__ !== undefined){__layer_0__.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|__layer_0__","vekterClass":"FrameNode","deviceType":"apple-iphone-x-space-gray","deviceName":"Apple iPhone X"}};if(button_generic !== undefined){button_generic.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|button_generic","targetName":"button_generic","vekterClass":"FrameNode"}};if(button_timer !== undefined){button_timer.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|button_timer","targetName":"button_timer","vekterClass":"FrameNode"}};if(__layer_3__ !== undefined){__layer_3__.__framerInstanceInfo = {"framerClass":"TextLayer","hash":"#vekter|__layer_3__","vekterClass":"TextNode","text":"Generic Feedback"}};if (scope["__vekterVariables"]) { scope["__vekterVariables"].map(function(variable) { delete scope[variable] } ) };Object.assign(scope, {button_timer, button_generic});scope["__vekterVariables"] = ["button_timer", "button_generic"];if (typeof Framer.CurrentContext.layout === 'function') {Framer.CurrentContext.layout()};})(window); -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/cursor-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/cursor-active.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/cursor-active@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/cursor-active@2x.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/cursor.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/cursor@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/cursor@2x.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/icon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/icon-120.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/icon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/icon-152.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/icon-180.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/icon-192.png -------------------------------------------------------------------------------- /examples/feedback.framer/framer/images/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/framer/images/icon-76.png -------------------------------------------------------------------------------- /examples/feedback.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: #fff; 11 | font: 28px/1em "Helvetica"; 12 | color: gray; 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 | } -------------------------------------------------------------------------------- /examples/feedback.framer/framer/version: -------------------------------------------------------------------------------- 1 | 13 -------------------------------------------------------------------------------- /examples/feedback.framer/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/feedback.framer/images/.gitkeep -------------------------------------------------------------------------------- /examples/feedback.framer/images/Artboard Copy 3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Artboard Copy 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/feedback.framer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/feedback.framer/modules/feedback.coffee: -------------------------------------------------------------------------------- 1 | Events.Dismiss = "DismissFeedback" 2 | 3 | # Feedback Class 4 | class Feedback extends TextLayer 5 | constructor: (options={}) -> 6 | 7 | # Dismiss icon svg set up 8 | svgProps = 9 | color: options.color || 'white' 10 | 11 | svg = 12 | """ 13 | 14 | 15 | 16 | 17 | 18 | """ 19 | 20 | # text padding settings for different types of feedback 21 | if options.autoDismiss 22 | textPadding = 23 | top: 16, 24 | right: 16, 25 | bottom: 16, 26 | left: 16 27 | else 28 | textPadding = 29 | top: 16, 30 | right: 48, 31 | bottom: 16, 32 | left: 16 33 | 34 | # some generic looking defaults for Feedback class 35 | super _.defaults options, 36 | fontSize: 16 37 | color: 'white' 38 | text: options.text 39 | backgroundColor: '#333' 40 | borderRadius: 3 41 | lineHeight: 1.4 42 | x: Align.center 43 | y: Align.bottom(-20) 44 | clip: true 45 | padding: textPadding 46 | borderColor: 'rgba(0, 0, 0, 0.2)' 47 | borderWidth: 1 48 | 49 | @name = 'feedback' 50 | @states.show = 51 | opacity: 1 52 | y: options.y || Align.bottom(0) 53 | 54 | @states.hide = 55 | opacity: 0 56 | y: options.y || Align.bottom(0) 57 | 58 | @states.animationOptions = 59 | time: 0.25 60 | 61 | @stateSwitch('hide') 62 | @states.switch('show') 63 | 64 | # handler for dimissing feedback. 65 | dismissFeedback = () => 66 | feedback = Layer.select('feedback') 67 | feedback.states.switch('hide') 68 | Utils.delay 0.5, -> 69 | feedback.destroy() 70 | 71 | @emit(Events.Dismiss) 72 | 73 | 74 | # When 'autoDismiss' object is used as an option, generate horizontal bar that counts down to the user-specified duration. 75 | if options.autoDismiss 76 | counter = new Layer 77 | parent: @ 78 | borderRadius: 10 79 | y: Align.top(0) 80 | height: options.autoDismiss.counterHeight || 3 81 | backgroundColor: options.autoDismiss.color || 'white' 82 | width: @width 83 | 84 | counter.animate 85 | width: 0 86 | options: 87 | time: options.autoDismiss.duration || 3 88 | curve: 'linear' 89 | 90 | counter.onAnimationEnd -> 91 | dismissFeedback() 92 | 93 | # Otherwise, default to using a dimissable Feedback & generate dimiss icon button. 94 | else 95 | dismiss = new Layer 96 | parent: @ 97 | backgroundColor: null 98 | borderRadius: 50 99 | y: Align.top(14) 100 | x: Align.right(-12) 101 | html: svg 102 | width: 24 103 | height: 24 104 | opacity: 0.5 105 | style: 'cursor':'pointer' 106 | 107 | dismiss.onMouseOver -> 108 | this.opacity = 1 109 | 110 | dismiss.onMouseOut -> 111 | this.opacity = 0.5 112 | 113 | dismiss.onClick -> 114 | dismissFeedback() 115 | 116 | onDismiss: (cb) -> @on(Events.Dismiss, cb) 117 | 118 | module.exports = Feedback 119 | -------------------------------------------------------------------------------- /examples/share-permalink.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /examples/share-permalink.framer/app.coffee: -------------------------------------------------------------------------------- 1 | # Show Hints 2 | Framer.Extras.Hints.enable() 3 | Canvas.backgroundColor = 'd7d7d7' 4 | 5 | # This is a test 6 | 7 | # Use desktop cursor 8 | document.body.style.cursor = "auto" 9 | 10 | Feedback = require 'feedback' 11 | 12 | # on peramlink button mouse out 13 | btn_share.onMouseOver (event, layer) -> 14 | hint.states.switch("show") 15 | 16 | # on peramlink button mouse out 17 | btn_share.onMouseOut (event, layer) -> 18 | hint.states.switch("default") 19 | 20 | # cursor style 21 | btn_share.style = 22 | 'cursor':'pointer' 23 | 24 | hint.states.show = 25 | opacity: 1 26 | y: 58 27 | 28 | hint.states.animationOptions = 29 | time: 0.2 30 | 31 | btn_share.onClick (event, layer) -> 32 | feedbackAutoDismiss = new Feedback 33 | x: 32 34 | text: 'Share link copied to clipboard.' 35 | fontFamily: 'metric' 36 | autoDismiss: 37 | duration: 4 38 | color: '#019C42' -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/.bookmark: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/.bookmark -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "orientation" : 0, 3 | "updateDelay" : 0.29999999999999999, 4 | "designModeSelected" : 0, 5 | "cachedDeviceHeight" : 720, 6 | "contentScale" : 1, 7 | "cachedDeviceWidth" : 1152, 8 | "fullScreen" : false, 9 | "deviceType" : "apple-macbook", 10 | "sharedPrototype" : true, 11 | "propertyPanelToggleStates" : { 12 | 13 | }, 14 | "projectId" : "E9D0C387-FCCA-4721-ACF6-C5038647C3C7", 15 | "deviceOrientation" : 0, 16 | "selectedHand" : "", 17 | "showBezel" : true, 18 | "foldedCodeRanges" : [ 19 | 20 | ], 21 | "deviceScale" : "fit" 22 | } -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/design.vekter: -------------------------------------------------------------------------------- 1 | { 2 | "root" : { 3 | "__class" : "CanvasNode", 4 | "children" : [ 5 | { 6 | "__class" : "FrameNode", 7 | "aspectRatioLocked" : false, 8 | "blendingEnabled" : 0, 9 | "blendingMode" : "normal", 10 | "blur" : 12, 11 | "blurEnabled" : 0, 12 | "blurType" : "layer", 13 | "borderBottom" : 1, 14 | "borderColor" : "#222", 15 | "borderEnabled" : 0, 16 | "borderLeft" : 1, 17 | "borderPerSide" : false, 18 | "borderRight" : 1, 19 | "borderStyle" : "solid", 20 | "borderTop" : 1, 21 | "borderWidth" : 1, 22 | "bottom" : null, 23 | "boxShadows" : [ 24 | 25 | ], 26 | "brightness" : 100, 27 | "brightnessEnabled" : 0, 28 | "centerAnchorX" : 0, 29 | "centerAnchorY" : 0, 30 | "children" : [ 31 | { 32 | "__class" : "FrameNode", 33 | "aspectRatioLocked" : true, 34 | "blendingEnabled" : 0, 35 | "blendingMode" : "normal", 36 | "blur" : 12, 37 | "blurEnabled" : 0, 38 | "blurType" : "layer", 39 | "borderBottom" : 1, 40 | "borderColor" : "#222", 41 | "borderEnabled" : 0, 42 | "borderLeft" : 1, 43 | "borderPerSide" : false, 44 | "borderRight" : 1, 45 | "borderStyle" : "solid", 46 | "borderTop" : 1, 47 | "borderWidth" : 1, 48 | "bottom" : -4, 49 | "boxShadows" : [ 50 | 51 | ], 52 | "brightness" : 100, 53 | "brightnessEnabled" : 0, 54 | "centerAnchorX" : 0.54479166666666667, 55 | "centerAnchorY" : 0.50055555555555553, 56 | "children" : [ 57 | 58 | ], 59 | "clip" : false, 60 | "constraintsLocked" : false, 61 | "contrast" : 100, 62 | "contrastEnabled" : 0, 63 | "deviceType" : null, 64 | "exportIncludesBackground" : true, 65 | "exportOptions" : [ 66 | 67 | ], 68 | "fillColor" : "transparent", 69 | "fillEnabled" : true, 70 | "fillGradient" : { 71 | "__class" : "LinearGradient", 72 | "alpha" : 1, 73 | "angle" : 0, 74 | "end" : "rgba(0,0,0,0)", 75 | "start" : "black" 76 | }, 77 | "fillImage" : "f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png", 78 | "fillImagePixelHeight" : null, 79 | "fillImagePixelWidth" : null, 80 | "fillImageResize" : "fill", 81 | "fillType" : "image", 82 | "grayscale" : 0, 83 | "grayScaleEnabled" : 0, 84 | "height" : 907, 85 | "heightFactor" : null, 86 | "hueRotate" : 0, 87 | "hueRotateEnabled" : 0, 88 | "id" : "j.v:8-Ye", 89 | "intrinsicHeight" : 907, 90 | "intrinsicWidth" : 1799, 91 | "invert" : 0, 92 | "invertEnabled" : 0, 93 | "left" : -115, 94 | "locked" : false, 95 | "name" : null, 96 | "opacity" : 1, 97 | "parentid" : "*Mw~KI(Z", 98 | "radius" : 0, 99 | "radiusBottomLeft" : 0, 100 | "radiusBottomRight" : 0, 101 | "radiusIsRelative" : false, 102 | "radiusPerCorner" : false, 103 | "radiusTopLeft" : 0, 104 | "radiusTopRight" : 0, 105 | "right" : -244, 106 | "rotation" : 0, 107 | "saturate" : 100, 108 | "saturateEnabled" : 0, 109 | "sepia" : 0, 110 | "sepiaEnabled" : 0, 111 | "targetName" : null, 112 | "top" : null, 113 | "visible" : true, 114 | "width" : 1799, 115 | "widthFactor" : null 116 | }, 117 | { 118 | "__class" : "FrameNode", 119 | "aspectRatioLocked" : false, 120 | "blendingEnabled" : 0, 121 | "blendingMode" : "normal", 122 | "blur" : 12, 123 | "blurEnabled" : 0, 124 | "blurType" : "layer", 125 | "borderBottom" : 1, 126 | "borderColor" : "#222", 127 | "borderEnabled" : 0, 128 | "borderLeft" : 1, 129 | "borderPerSide" : false, 130 | "borderRight" : 1, 131 | "borderStyle" : "solid", 132 | "borderTop" : 1, 133 | "borderWidth" : 1, 134 | "bottom" : null, 135 | "boxShadows" : [ 136 | 137 | ], 138 | "brightness" : 100, 139 | "brightnessEnabled" : 0, 140 | "centerAnchorX" : 0.5, 141 | "centerAnchorY" : 0.026666666666666668, 142 | "children" : [ 143 | { 144 | "__class" : "FrameNode", 145 | "aspectRatioLocked" : false, 146 | "blendingEnabled" : 0, 147 | "blendingMode" : "normal", 148 | "blur" : 12, 149 | "blurEnabled" : 0, 150 | "blurType" : "layer", 151 | "borderBottom" : 1, 152 | "borderColor" : "#222", 153 | "borderEnabled" : 0, 154 | "borderLeft" : 1, 155 | "borderPerSide" : false, 156 | "borderRight" : 1, 157 | "borderStyle" : "solid", 158 | "borderTop" : 1, 159 | "borderWidth" : 1, 160 | "bottom" : 0, 161 | "boxShadows" : [ 162 | 163 | ], 164 | "brightness" : 100, 165 | "brightnessEnabled" : 0, 166 | "centerAnchorX" : 0.41535150645624103, 167 | "centerAnchorY" : 0.5, 168 | "children" : [ 169 | { 170 | "__class" : "FrameNode", 171 | "aspectRatioLocked" : true, 172 | "blendingEnabled" : 0, 173 | "blendingMode" : "normal", 174 | "blur" : 12, 175 | "blurEnabled" : 0, 176 | "blurType" : "layer", 177 | "borderBottom" : 1, 178 | "borderColor" : "#222", 179 | "borderEnabled" : 0, 180 | "borderLeft" : 1, 181 | "borderPerSide" : false, 182 | "borderRight" : 1, 183 | "borderStyle" : "solid", 184 | "borderTop" : 1, 185 | "borderWidth" : 1, 186 | "bottom" : 9, 187 | "boxShadows" : [ 188 | 189 | ], 190 | "brightness" : 100, 191 | "brightnessEnabled" : 0, 192 | "centerAnchorX" : 0.05647840531561462, 193 | "centerAnchorY" : 0.5, 194 | "children" : [ 195 | 196 | ], 197 | "clip" : false, 198 | "constraintsLocked" : false, 199 | "contrast" : 100, 200 | "contrastEnabled" : 0, 201 | "deviceType" : null, 202 | "exportIncludesBackground" : true, 203 | "exportOptions" : [ 204 | 205 | ], 206 | "fillColor" : "transparent", 207 | "fillEnabled" : true, 208 | "fillGradient" : { 209 | "__class" : "LinearGradient", 210 | "alpha" : 1, 211 | "angle" : 0, 212 | "end" : "rgba(0,0,0,0)", 213 | "start" : "black" 214 | }, 215 | "fillImage" : "e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png", 216 | "fillImagePixelHeight" : null, 217 | "fillImagePixelWidth" : null, 218 | "fillImageResize" : "fill", 219 | "fillType" : "image", 220 | "grayscale" : 0, 221 | "grayScaleEnabled" : 0, 222 | "height" : 30, 223 | "heightFactor" : null, 224 | "hueRotate" : 0, 225 | "hueRotateEnabled" : 0, 226 | "id" : "Z?V|.gE+", 227 | "intrinsicHeight" : 30, 228 | "intrinsicWidth" : 102, 229 | "invert" : 0, 230 | "invertEnabled" : 0, 231 | "left" : 17, 232 | "locked" : false, 233 | "name" : null, 234 | "opacity" : 1, 235 | "parentid" : "T5pn5CoK", 236 | "radius" : 0, 237 | "radiusBottomLeft" : 0, 238 | "radiusBottomRight" : 0, 239 | "radiusIsRelative" : false, 240 | "radiusPerCorner" : false, 241 | "radiusTopLeft" : 0, 242 | "radiusTopRight" : 0, 243 | "right" : null, 244 | "rotation" : 0, 245 | "saturate" : 100, 246 | "saturateEnabled" : 0, 247 | "sepia" : 0, 248 | "sepiaEnabled" : 0, 249 | "targetName" : null, 250 | "top" : 9, 251 | "visible" : true, 252 | "width" : 102, 253 | "widthFactor" : null 254 | }, 255 | { 256 | "__class" : "FrameNode", 257 | "aspectRatioLocked" : true, 258 | "blendingEnabled" : 0, 259 | "blendingMode" : "normal", 260 | "blur" : 12, 261 | "blurEnabled" : 0, 262 | "blurType" : "layer", 263 | "borderBottom" : 1, 264 | "borderColor" : "#222", 265 | "borderEnabled" : 0, 266 | "borderLeft" : 1, 267 | "borderPerSide" : false, 268 | "borderRight" : 1, 269 | "borderStyle" : "solid", 270 | "borderTop" : 1, 271 | "borderWidth" : 1, 272 | "bottom" : 8, 273 | "boxShadows" : [ 274 | 275 | ], 276 | "brightness" : 100, 277 | "brightnessEnabled" : 0, 278 | "centerAnchorX" : 0.19269102990033224, 279 | "centerAnchorY" : 0.5, 280 | "children" : [ 281 | 282 | ], 283 | "clip" : false, 284 | "constraintsLocked" : false, 285 | "contrast" : 100, 286 | "contrastEnabled" : 0, 287 | "deviceType" : null, 288 | "exportIncludesBackground" : true, 289 | "exportOptions" : [ 290 | 291 | ], 292 | "fillColor" : "transparent", 293 | "fillEnabled" : true, 294 | "fillGradient" : { 295 | "__class" : "LinearGradient", 296 | "alpha" : 1, 297 | "angle" : 0, 298 | "end" : "rgba(0,0,0,0)", 299 | "start" : "black" 300 | }, 301 | "fillImage" : "ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png", 302 | "fillImagePixelHeight" : null, 303 | "fillImagePixelWidth" : null, 304 | "fillImageResize" : "fill", 305 | "fillType" : "image", 306 | "grayscale" : 0, 307 | "grayScaleEnabled" : 0, 308 | "height" : 32, 309 | "heightFactor" : null, 310 | "hueRotate" : 0, 311 | "hueRotateEnabled" : 0, 312 | "id" : "R5r(t>hw", 313 | "intrinsicHeight" : 32, 314 | "intrinsicWidth" : 188, 315 | "invert" : 0, 316 | "invertEnabled" : 0, 317 | "left" : 138, 318 | "locked" : false, 319 | "name" : null, 320 | "opacity" : 1, 321 | "parentid" : "T5pn5CoK", 322 | "radius" : 0, 323 | "radiusBottomLeft" : 0, 324 | "radiusBottomRight" : 0, 325 | "radiusIsRelative" : false, 326 | "radiusPerCorner" : false, 327 | "radiusTopLeft" : 0, 328 | "radiusTopRight" : 0, 329 | "right" : null, 330 | "rotation" : 0, 331 | "saturate" : 100, 332 | "saturateEnabled" : 0, 333 | "sepia" : 0, 334 | "sepiaEnabled" : 0, 335 | "targetName" : null, 336 | "top" : 8, 337 | "visible" : true, 338 | "width" : 188, 339 | "widthFactor" : null 340 | }, 341 | { 342 | "__class" : "FrameNode", 343 | "aspectRatioLocked" : false, 344 | "blendingEnabled" : 0, 345 | "blendingMode" : "normal", 346 | "blur" : 12, 347 | "blurEnabled" : 0, 348 | "blurType" : "layer", 349 | "borderBottom" : 0, 350 | "borderColor" : "hsl(0, 0%, 0%)", 351 | "borderEnabled" : 1, 352 | "borderLeft" : 1, 353 | "borderPerSide" : true, 354 | "borderRight" : 0, 355 | "borderStyle" : "solid", 356 | "borderTop" : 0, 357 | "borderWidth" : 1, 358 | "bottom" : 0, 359 | "boxShadows" : [ 360 | 361 | ], 362 | "brightness" : 100, 363 | "brightnessEnabled" : 0, 364 | "centerAnchorX" : 0.98006644518272423, 365 | "centerAnchorY" : 0.5, 366 | "children" : [ 367 | { 368 | "__class" : "SVGNode", 369 | "aspectRatioLocked" : true, 370 | "blendingEnabled" : 0, 371 | "blendingMode" : "normal", 372 | "blur" : 12, 373 | "blurEnabled" : 0, 374 | "blurType" : "layer", 375 | "bottom" : null, 376 | "brightness" : 100, 377 | "brightnessEnabled" : 0, 378 | "centerAnchorX" : 0.5, 379 | "centerAnchorY" : 0.51041666666666663, 380 | "colorable" : true, 381 | "constraintsLocked" : false, 382 | "contrast" : 100, 383 | "contrastEnabled" : 0, 384 | "exportOptions" : [ 385 | 386 | ], 387 | "fillColor" : "hsl(0, 0%, 100%)", 388 | "fillGradient" : { 389 | "__class" : "LinearGradient", 390 | "alpha" : 1, 391 | "angle" : 0, 392 | "end" : "rgba(0,0,0,0)", 393 | "start" : "black" 394 | }, 395 | "fillImage" : null, 396 | "fillImagePixelHeight" : null, 397 | "fillImagePixelWidth" : null, 398 | "fillImageResize" : "fill", 399 | "fillType" : "color", 400 | "grayscale" : 0, 401 | "grayScaleEnabled" : 0, 402 | "height" : 15, 403 | "heightFactor" : null, 404 | "hueRotate" : 0, 405 | "hueRotateEnabled" : 0, 406 | "id" : "ea+1U_5(", 407 | "intrinsicHeight" : 24, 408 | "intrinsicWidth" : 24, 409 | "invert" : 0, 410 | "invertEnabled" : 0, 411 | "left" : null, 412 | "locked" : false, 413 | "name" : "icon_share", 414 | "opacity" : 1, 415 | "originalFilename" : "share", 416 | "parentid" : ".[7{mAz-", 417 | "right" : null, 418 | "rotation" : 0, 419 | "saturate" : 100, 420 | "saturateEnabled" : 0, 421 | "sepia" : 0, 422 | "sepiaEnabled" : 0, 423 | "shadows" : [ 424 | 425 | ], 426 | "svg" : "<\/path><\/polyline><\/line><\/svg>", 427 | "targetName" : "icon_share", 428 | "top" : null, 429 | "visible" : true, 430 | "width" : 15, 431 | "widthFactor" : null 432 | }, 433 | { 434 | "__class" : "SVGNode", 435 | "aspectRatioLocked" : true, 436 | "blendingEnabled" : 0, 437 | "blendingMode" : "normal", 438 | "blur" : 12, 439 | "blurEnabled" : 0, 440 | "blurType" : "layer", 441 | "bottom" : null, 442 | "brightness" : 100, 443 | "brightnessEnabled" : 0, 444 | "centerAnchorX" : 0.51041666666666663, 445 | "centerAnchorY" : 0.51041666666666663, 446 | "colorable" : true, 447 | "constraintsLocked" : false, 448 | "contrast" : 100, 449 | "contrastEnabled" : 0, 450 | "exportOptions" : [ 451 | 452 | ], 453 | "fillColor" : "hsl(0, 0%, 100%)", 454 | "fillGradient" : { 455 | "__class" : "LinearGradient", 456 | "alpha" : 1, 457 | "angle" : 0, 458 | "end" : "rgba(0,0,0,0)", 459 | "start" : "black" 460 | }, 461 | "fillImage" : null, 462 | "fillImagePixelHeight" : null, 463 | "fillImagePixelWidth" : null, 464 | "fillImageResize" : "fill", 465 | "fillType" : "color", 466 | "grayscale" : 0, 467 | "grayScaleEnabled" : 0, 468 | "height" : 15, 469 | "heightFactor" : null, 470 | "hueRotate" : 0, 471 | "hueRotateEnabled" : 0, 472 | "id" : "\/$M&LWtE", 473 | "intrinsicHeight" : 24, 474 | "intrinsicWidth" : 24, 475 | "invert" : 0, 476 | "invertEnabled" : 0, 477 | "left" : null, 478 | "locked" : false, 479 | "name" : "icon_loader", 480 | "opacity" : 0, 481 | "originalFilename" : "loader", 482 | "parentid" : ".[7{mAz-", 483 | "right" : null, 484 | "rotation" : 0, 485 | "saturate" : 100, 486 | "saturateEnabled" : 0, 487 | "sepia" : 0, 488 | "sepiaEnabled" : 0, 489 | "shadows" : [ 490 | 491 | ], 492 | "svg" : "<\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/svg>", 493 | "targetName" : "icon_loader", 494 | "top" : null, 495 | "visible" : true, 496 | "width" : 15, 497 | "widthFactor" : null 498 | } 499 | ], 500 | "clip" : false, 501 | "constraintsLocked" : false, 502 | "contrast" : 100, 503 | "contrastEnabled" : 0, 504 | "deviceType" : null, 505 | "exportIncludesBackground" : true, 506 | "exportOptions" : [ 507 | 508 | ], 509 | "fillColor" : "rgba(41, 43, 43, 1.00)", 510 | "fillEnabled" : true, 511 | "fillGradient" : { 512 | "__class" : "LinearGradient", 513 | "alpha" : 1, 514 | "angle" : 0, 515 | "end" : "rgba(0,0,0,0)", 516 | "start" : "black" 517 | }, 518 | "fillImage" : null, 519 | "fillImagePixelHeight" : null, 520 | "fillImagePixelWidth" : null, 521 | "fillImageResize" : "fill", 522 | "fillType" : "color", 523 | "grayscale" : 0, 524 | "grayScaleEnabled" : 0, 525 | "height" : 48, 526 | "heightFactor" : null, 527 | "hueRotate" : 0, 528 | "hueRotateEnabled" : 0, 529 | "id" : ".[7{mAz-", 530 | "intrinsicHeight" : null, 531 | "intrinsicWidth" : null, 532 | "invert" : 0, 533 | "invertEnabled" : 0, 534 | "left" : null, 535 | "locked" : false, 536 | "name" : "btn_share", 537 | "opacity" : 1, 538 | "parentid" : "T5pn5CoK", 539 | "radius" : 0, 540 | "radiusBottomLeft" : 0, 541 | "radiusBottomRight" : 0, 542 | "radiusIsRelative" : false, 543 | "radiusPerCorner" : false, 544 | "radiusTopLeft" : 0, 545 | "radiusTopRight" : 0, 546 | "right" : 0, 547 | "rotation" : 0, 548 | "saturate" : 100, 549 | "saturateEnabled" : 0, 550 | "sepia" : 0, 551 | "sepiaEnabled" : 0, 552 | "targetName" : "btn_share", 553 | "top" : 0, 554 | "visible" : true, 555 | "width" : 48, 556 | "widthFactor" : null 557 | }, 558 | { 559 | "__class" : "FrameNode", 560 | "aspectRatioLocked" : true, 561 | "blendingEnabled" : 0, 562 | "blendingMode" : "normal", 563 | "blur" : 12, 564 | "blurEnabled" : 0, 565 | "blurType" : "layer", 566 | "borderBottom" : 1, 567 | "borderColor" : "#222", 568 | "borderEnabled" : 0, 569 | "borderLeft" : 1, 570 | "borderPerSide" : false, 571 | "borderRight" : 1, 572 | "borderStyle" : "solid", 573 | "borderTop" : 1, 574 | "borderWidth" : 1, 575 | "bottom" : 0, 576 | "boxShadows" : [ 577 | 578 | ], 579 | "brightness" : 100, 580 | "brightnessEnabled" : 0, 581 | "centerAnchorX" : 0.91528239202657802, 582 | "centerAnchorY" : 0.5, 583 | "children" : [ 584 | 585 | ], 586 | "clip" : false, 587 | "constraintsLocked" : false, 588 | "contrast" : 100, 589 | "contrastEnabled" : 0, 590 | "deviceType" : null, 591 | "exportIncludesBackground" : true, 592 | "exportOptions" : [ 593 | 594 | ], 595 | "fillColor" : "transparent", 596 | "fillEnabled" : true, 597 | "fillGradient" : { 598 | "__class" : "LinearGradient", 599 | "alpha" : 1, 600 | "angle" : 0, 601 | "end" : "rgba(0,0,0,0)", 602 | "start" : "black" 603 | }, 604 | "fillImage" : "cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png", 605 | "fillImagePixelHeight" : null, 606 | "fillImagePixelWidth" : null, 607 | "fillImageResize" : "fill", 608 | "fillType" : "image", 609 | "grayscale" : 0, 610 | "grayScaleEnabled" : 0, 611 | "height" : 48, 612 | "heightFactor" : null, 613 | "hueRotate" : 0, 614 | "hueRotateEnabled" : 0, 615 | "id" : "^(Copy a link to share this view with others<\/span><\/span>", 1139 | "os" : "10_13", 1140 | "size" : { 1141 | "height" : 19, 1142 | "width" : 252 1143 | }, 1144 | "width" : 0 1145 | }, 1146 | "entityMap" : { 1147 | 1148 | } 1149 | }, 1150 | "targetName" : null, 1151 | "top" : null, 1152 | "visible" : true, 1153 | "width" : 252, 1154 | "widthFactor" : null 1155 | } 1156 | ], 1157 | "clip" : false, 1158 | "constraintsLocked" : false, 1159 | "contrast" : 100, 1160 | "contrastEnabled" : 0, 1161 | "deviceType" : null, 1162 | "exportIncludesBackground" : true, 1163 | "exportOptions" : [ 1164 | 1165 | ], 1166 | "fillColor" : "rgba(41, 43, 43, 1.00)", 1167 | "fillEnabled" : true, 1168 | "fillGradient" : { 1169 | "__class" : "LinearGradient", 1170 | "alpha" : 1, 1171 | "angle" : 0, 1172 | "end" : "rgba(0,0,0,0)", 1173 | "start" : "black" 1174 | }, 1175 | "fillImage" : null, 1176 | "fillImagePixelHeight" : null, 1177 | "fillImagePixelWidth" : null, 1178 | "fillImageResize" : "fill", 1179 | "fillType" : "color", 1180 | "grayscale" : 0, 1181 | "grayScaleEnabled" : 0, 1182 | "height" : 37, 1183 | "heightFactor" : null, 1184 | "hueRotate" : 0, 1185 | "hueRotateEnabled" : 0, 1186 | "id" : "e~0g7L&^", 1187 | "intrinsicHeight" : null, 1188 | "intrinsicWidth" : null, 1189 | "invert" : 0, 1190 | "invertEnabled" : 0, 1191 | "left" : null, 1192 | "locked" : false, 1193 | "name" : "hint", 1194 | "opacity" : 0, 1195 | "parentid" : "*Mw~KI(Z", 1196 | "radius" : 5, 1197 | "radiusBottomLeft" : 5, 1198 | "radiusBottomRight" : 5, 1199 | "radiusIsRelative" : false, 1200 | "radiusPerCorner" : false, 1201 | "radiusTopLeft" : 5, 1202 | "radiusTopRight" : 5, 1203 | "right" : 27, 1204 | "rotation" : 0, 1205 | "saturate" : 100, 1206 | "saturateEnabled" : 0, 1207 | "sepia" : 0, 1208 | "sepiaEnabled" : 0, 1209 | "targetName" : "hint", 1210 | "top" : 53, 1211 | "visible" : true, 1212 | "width" : 284, 1213 | "widthFactor" : null 1214 | } 1215 | ], 1216 | "clip" : true, 1217 | "constraintsLocked" : false, 1218 | "contrast" : 100, 1219 | "contrastEnabled" : 0, 1220 | "deviceType" : "apple-macbook-pro", 1221 | "exportIncludesBackground" : true, 1222 | "exportOptions" : [ 1223 | 1224 | ], 1225 | "fillColor" : "hsl(0, 0%, 100%)", 1226 | "fillEnabled" : true, 1227 | "fillGradient" : { 1228 | "__class" : "LinearGradient", 1229 | "alpha" : 1, 1230 | "angle" : 0, 1231 | "end" : "#8AF2FF", 1232 | "start" : "#1FA5FF" 1233 | }, 1234 | "fillImage" : null, 1235 | "fillImagePixelHeight" : null, 1236 | "fillImagePixelWidth" : null, 1237 | "fillImageResize" : "fill", 1238 | "fillType" : "color", 1239 | "grayscale" : 0, 1240 | "grayScaleEnabled" : 0, 1241 | "height" : 900, 1242 | "heightFactor" : null, 1243 | "hueRotate" : 0, 1244 | "hueRotateEnabled" : 0, 1245 | "id" : "*Mw~KI(Z", 1246 | "intrinsicHeight" : null, 1247 | "intrinsicWidth" : null, 1248 | "invert" : 0, 1249 | "invertEnabled" : 0, 1250 | "left" : -1, 1251 | "locked" : false, 1252 | "name" : null, 1253 | "opacity" : 1, 1254 | "parentid" : "{T{ZV=;$", 1255 | "radius" : 0, 1256 | "radiusBottomLeft" : 0, 1257 | "radiusBottomRight" : 0, 1258 | "radiusIsRelative" : false, 1259 | "radiusPerCorner" : false, 1260 | "radiusTopLeft" : 0, 1261 | "radiusTopRight" : 0, 1262 | "right" : null, 1263 | "rotation" : 0, 1264 | "saturate" : 100, 1265 | "saturateEnabled" : 0, 1266 | "sepia" : 0, 1267 | "sepiaEnabled" : 0, 1268 | "targetName" : null, 1269 | "top" : 4, 1270 | "visible" : true, 1271 | "width" : 1440, 1272 | "widthFactor" : null 1273 | } 1274 | ], 1275 | "id" : "{T{ZV=;$", 1276 | "parentid" : null 1277 | }, 1278 | "version" : 21 1279 | } -------------------------------------------------------------------------------- /examples/share-permalink.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-macbook","contentScale":1,"hideBezel":false,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-macbook","contentScale":1,"hideBezel":false,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"share-permalink.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /examples/share-permalink.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 += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function loadProject(callback) { 60 | CoffeeScript.load("app.coffee", callback) 61 | } 62 | 63 | function setDefaultPageTitle() { 64 | // If no title was set we set it to the project folder name so 65 | // you get a nice name on iOS if you bookmark to desktop. 66 | document.addEventListener("DOMContentLoaded", function() { 67 | if (document.title == "") { 68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 69 | document.title = window.FramerStudioInfo.documentTitle 70 | } else { 71 | document.title = window.location.pathname.replace(/\//g, "") 72 | } 73 | } 74 | }) 75 | } 76 | 77 | function init() { 78 | 79 | if (Utils.isFramerStudio()) { 80 | return 81 | } 82 | 83 | setDefaultPageTitle() 84 | 85 | if (!isCompatibleBrowser()) { 86 | return showBrowserAlert() 87 | } 88 | 89 | if (!isFileLoadingAllowed()) { 90 | return showFileLoadingAlert() 91 | } 92 | 93 | loadProject(function(){ 94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project") 95 | var context; 96 | if (typeof Framer !== "undefined" && Framer !== null) { 97 | if ((context = Framer.CurrentContext) != null) { 98 | if (typeof context.emit === "function") { 99 | context.emit("loaded:project"); 100 | } 101 | } 102 | } 103 | }) 104 | } 105 | 106 | init() 107 | 108 | })() 109 | -------------------------------------------------------------------------------- /examples/share-permalink.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\n \n\n\n"; 20 | if (options.autoDismiss) { 21 | textPadding = { 22 | top: 16, 23 | right: 16, 24 | bottom: 16, 25 | left: 16 26 | }; 27 | } else { 28 | textPadding = { 29 | top: 16, 30 | right: 48, 31 | bottom: 16, 32 | left: 16 33 | }; 34 | } 35 | Feedback.__super__.constructor.call(this, _.defaults(options, { 36 | fontSize: 16, 37 | color: 'white', 38 | text: options.text, 39 | backgroundColor: '#333', 40 | borderRadius: 3, 41 | lineHeight: 1.4, 42 | x: Align.center, 43 | y: Align.bottom(-20), 44 | clip: true, 45 | padding: textPadding, 46 | borderColor: 'rgba(0, 0, 0, 0.2)', 47 | borderWidth: 1 48 | })); 49 | this.name = 'feedback'; 50 | this.states.show = { 51 | opacity: 1, 52 | y: options.y || Align.bottom(0) 53 | }; 54 | this.states.hide = { 55 | opacity: 0, 56 | y: options.y || Align.bottom(0) 57 | }; 58 | this.states.animationOptions = { 59 | time: 0.25 60 | }; 61 | this.stateSwitch('hide'); 62 | this.states["switch"]('show'); 63 | dismissFeedback = (function(_this) { 64 | return function() { 65 | var feedback; 66 | feedback = Layer.select('feedback'); 67 | feedback.states["switch"]('hide'); 68 | Utils.delay(0.5, function() { 69 | return feedback.destroy(); 70 | }); 71 | return _this.emit(Events.Dismiss); 72 | }; 73 | })(this); 74 | if (options.autoDismiss) { 75 | counter = new Layer({ 76 | parent: this, 77 | borderRadius: 10, 78 | y: Align.top(0), 79 | height: options.autoDismiss.counterHeight || 3, 80 | backgroundColor: options.autoDismiss.color || 'white', 81 | width: this.width 82 | }); 83 | counter.animate({ 84 | width: 0, 85 | options: { 86 | time: options.autoDismiss.duration || 3, 87 | curve: 'linear' 88 | } 89 | }); 90 | counter.onAnimationEnd(function() { 91 | return dismissFeedback(); 92 | }); 93 | } else { 94 | dismiss = new Layer({ 95 | parent: this, 96 | backgroundColor: null, 97 | borderRadius: 50, 98 | y: Align.top(14), 99 | x: Align.right(-12), 100 | html: svg, 101 | width: 24, 102 | height: 24, 103 | opacity: 0.5, 104 | style: { 105 | 'cursor': 'pointer' 106 | } 107 | }); 108 | dismiss.onMouseOver(function() { 109 | return this.opacity = 1; 110 | }); 111 | dismiss.onMouseOut(function() { 112 | return this.opacity = 0.5; 113 | }); 114 | dismiss.onClick(function() { 115 | return dismissFeedback(); 116 | }); 117 | } 118 | } 119 | 120 | Feedback.prototype.onDismiss = function(cb) { 121 | return this.on(Events.Dismiss, cb); 122 | }; 123 | 124 | return Feedback; 125 | 126 | })(TextLayer); 127 | 128 | module.exports = Feedback; 129 | 130 | 131 | },{}]},{},[]) 132 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWVyLm1vZHVsZXMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL1VzZXJzL2phY2t5bGVlL1Byb2plY3RzL2NvZGUvZnJhbWVyLWZlZWRiYWNrLW1vZHVsZS9leGFtcGxlcy9zaGFyZS1wZXJtYWxpbmsuZnJhbWVyL21vZHVsZXMvZmVlZGJhY2suY29mZmVlIiwibm9kZV9tb2R1bGVzL2Jyb3dzZXItcGFjay9fcHJlbHVkZS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJFdmVudHMuRGlzbWlzcyA9IFwiRGlzbWlzc0ZlZWRiYWNrXCJcblxuIyBGZWVkYmFjayBDbGFzc1xuY2xhc3MgRmVlZGJhY2sgZXh0ZW5kcyBUZXh0TGF5ZXJcbiAgY29uc3RydWN0b3I6IChvcHRpb25zPXt9KSAtPlxuXG4gICAgIyBEaXNtaXNzIGljb24gc3ZnIHNldCB1cFxuICAgIHN2Z1Byb3BzID1cbiAgICAgIGNvbG9yOiBvcHRpb25zLmNvbG9yIHx8ICd3aGl0ZSdcblxuICAgIHN2ZyA9XG4gICAgXCJcIlwiXG4gICAgXHRcdDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMjRcIiBoZWlnaHQ9XCIyNFwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIj5cbiAgICAgIDxwYXRoIGZpbGw9XCIje3N2Z1Byb3BzLmNvbG9yfVwiIGQ9XCJNMTMuNDE1MjUsMTIuMDAwNSBMMTcuNzA3MjUsNy43MDc1IEMxOC4wOTgyNSw3LjMxNzUgMTguMDk4MjUsNi42ODQ1IDE3LjcwNzI1LDYuMjkzNSBDMTcuMzE2MjUsNS45MDI1IDE2LjY4NDI1LDUuOTAyNSAxNi4yOTMyNSw2LjI5MzUgTDEyLjAwMTI1LDEwLjU4NjUgTDcuNzA3MjUsNi4yOTI1IEM3LjMxNjI1LDUuOTAyNSA2LjY4NDI1LDUuOTAyNSA2LjI5MzI1LDYuMjkyNSBDNS45MDIyNSw2LjY4MzUgNS45MDIyNSw3LjMxNTUgNi4yOTMyNSw3LjcwNjUgTDEwLjU4NzI1LDEyLjAwMDUgTDYuMjkzMjUsMTYuMjk0NSBDNS45MDMyNSwxNi42ODQ1IDUuOTAyMjUsMTcuMzE4NSA2LjI5MzI1LDE3LjcwODUgQzYuNjg0MjUsMTguMDk5NSA3LjMxNzI1LDE4LjA5ODUgNy43MDcyNSwxNy43MDg1IEwxMi4wMDEyNSwxMy40MTQ1IEwxNi4yOTQyNSwxNy43MDY1IEMxNi42ODQyNSwxOC4wOTc1IDE3LjMxNzI1LDE4LjA5NzUgMTcuNzA4MjUsMTcuNzA2NSBDMTguMDk5MjUsMTcuMzE2NSAxOC4wOTgyNSwxNi42ODM1IDE3LjcwODI1LDE2LjI5MzUgTDEzLjQxNTI1LDEyLjAwMDUgWlwiLz5cbiAgICA8L3N2Zz5cblxuXG4gICAgXHRcdFwiXCJcIlxuXG4gICAgIyB0ZXh0IHBhZGRpbmcgc2V0dGluZ3MgZm9yIGRpZmZlcmVudCB0eXBlcyBvZiBmZWVkYmFja1xuICAgIGlmIG9wdGlvbnMuYXV0b0Rpc21pc3NcbiAgICAgIHRleHRQYWRkaW5nID1cbiAgICAgICAgdG9wOiAxNixcbiAgICAgICAgcmlnaHQ6IDE2LFxuICAgICAgICBib3R0b206IDE2LFxuICAgICAgICBsZWZ0OiAxNlxuICAgIGVsc2VcbiAgICAgIHRleHRQYWRkaW5nID1cbiAgICAgICAgdG9wOiAxNixcbiAgICAgICAgcmlnaHQ6IDQ4LFxuICAgICAgICBib3R0b206IDE2LFxuICAgICAgICBsZWZ0OiAxNlxuXG4gICAgIyBzb21lIGdlbmVyaWMgbG9va2luZyBkZWZhdWx0cyBmb3IgRmVlZGJhY2sgY2xhc3NcbiAgICBzdXBlciBfLmRlZmF1bHRzIG9wdGlvbnMsXG4gICAgICBmb250U2l6ZTogMTZcbiAgICAgIGNvbG9yOiAnd2hpdGUnXG4gICAgICB0ZXh0OiBvcHRpb25zLnRleHRcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzMnXG4gICAgICBib3JkZXJSYWRpdXM6IDNcbiAgICAgIGxpbmVIZWlnaHQ6IDEuNFxuICAgICAgeDogQWxpZ24uY2VudGVyXG4gICAgICB5OiBBbGlnbi5ib3R0b20oLTIwKVxuICAgICAgY2xpcDogdHJ1ZVxuICAgICAgcGFkZGluZzogdGV4dFBhZGRpbmdcbiAgICAgIGJvcmRlckNvbG9yOiAncmdiYSgwLCAwLCAwLCAwLjIpJ1xuICAgICAgYm9yZGVyV2lkdGg6IDFcblxuICAgIEBuYW1lID0gJ2ZlZWRiYWNrJ1xuICAgIEBzdGF0ZXMuc2hvdyA9XG4gICAgICBvcGFjaXR5OiAxXG4gICAgICB5OiBvcHRpb25zLnkgfHwgQWxpZ24uYm90dG9tKDApXG5cbiAgICBAc3RhdGVzLmhpZGUgPVxuICAgICAgb3BhY2l0eTogMFxuICAgICAgeTogb3B0aW9ucy55IHx8IEFsaWduLmJvdHRvbSgwKVxuXG4gICAgQHN0YXRlcy5hbmltYXRpb25PcHRpb25zID1cbiAgICAgIHRpbWU6IDAuMjVcblxuICAgIEBzdGF0ZVN3aXRjaCgnaGlkZScpXG4gICAgQHN0YXRlcy5zd2l0Y2goJ3Nob3cnKVxuXG4gICAgIyBoYW5kbGVyIGZvciBkaW1pc3NpbmcgZmVlZGJhY2suXG4gICAgZGlzbWlzc0ZlZWRiYWNrID0gKCkgPT5cbiAgICAgIGZlZWRiYWNrID0gTGF5ZXIuc2VsZWN0KCdmZWVkYmFjaycpXG4gICAgICBmZWVkYmFjay5zdGF0ZXMuc3dpdGNoKCdoaWRlJylcbiAgICAgIFV0aWxzLmRlbGF5IDAuNSwgLT5cbiAgICAgICAgZmVlZGJhY2suZGVzdHJveSgpXG5cbiAgICAgIEBlbWl0KEV2ZW50cy5EaXNtaXNzKVxuXG5cbiAgICAjIFdoZW4gJ2F1dG9EaXNtaXNzJyBvYmplY3QgaXMgdXNlZCBhcyBhbiBvcHRpb24sIGdlbmVyYXRlIGhvcml6b250YWwgYmFyIHRoYXQgY291bnRzIGRvd24gdG8gdGhlIHVzZXItc3BlY2lmaWVkIGR1cmF0aW9uLlxuICAgIGlmIG9wdGlvbnMuYXV0b0Rpc21pc3NcbiAgICAgIGNvdW50ZXIgPSBuZXcgTGF5ZXJcbiAgICAgICAgcGFyZW50OiBAXG4gICAgICAgIGJvcmRlclJhZGl1czogMTBcbiAgICAgICAgeTogQWxpZ24udG9wKDApXG4gICAgICAgIGhlaWdodDogb3B0aW9ucy5hdXRvRGlzbWlzcy5jb3VudGVySGVpZ2h0IHx8IDNcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBvcHRpb25zLmF1dG9EaXNtaXNzLmNvbG9yIHx8ICd3aGl0ZSdcbiAgICAgICAgd2lkdGg6IEB3aWR0aFxuXG4gICAgICBjb3VudGVyLmFuaW1hdGVcbiAgICAgICAgd2lkdGg6IDBcbiAgICAgICAgb3B0aW9uczpcbiAgICAgICAgICB0aW1lOiBvcHRpb25zLmF1dG9EaXNtaXNzLmR1cmF0aW9uIHx8IDNcbiAgICAgICAgICBjdXJ2ZTogJ2xpbmVhcidcblxuICAgICAgY291bnRlci5vbkFuaW1hdGlvbkVuZCAtPlxuICAgICAgICBkaXNtaXNzRmVlZGJhY2soKVxuXG4gICAgIyBPdGhlcndpc2UsIGRlZmF1bHQgdG8gdXNpbmcgYSBkaW1pc3NhYmxlIEZlZWRiYWNrICYgZ2VuZXJhdGUgZGltaXNzIGljb24gYnV0dG9uLlxuICAgIGVsc2VcbiAgICAgIGRpc21pc3MgPSBuZXcgTGF5ZXJcbiAgICAgICAgcGFyZW50OiBAXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogbnVsbFxuICAgICAgICBib3JkZXJSYWRpdXM6IDUwXG4gICAgICAgIHk6IEFsaWduLnRvcCgxNClcbiAgICAgICAgeDogQWxpZ24ucmlnaHQoLTEyKVxuICAgICAgICBodG1sOiBzdmdcbiAgICAgICAgd2lkdGg6IDI0XG4gICAgICAgIGhlaWdodDogMjRcbiAgICAgICAgb3BhY2l0eTogMC41XG4gICAgICAgIHN0eWxlOiAnY3Vyc29yJzoncG9pbnRlcidcblxuICAgICAgZGlzbWlzcy5vbk1vdXNlT3ZlciAtPlxuICAgICAgICB0aGlzLm9wYWNpdHkgPSAxXG5cbiAgICAgIGRpc21pc3Mub25Nb3VzZU91dCAtPlxuICAgICAgICB0aGlzLm9wYWNpdHkgPSAwLjVcblxuICAgICAgZGlzbWlzcy5vbkNsaWNrIC0+XG4gICAgICAgIGRpc21pc3NGZWVkYmFjaygpXG5cbiAgb25EaXNtaXNzOiAoY2IpIC0+IEBvbihFdmVudHMuRGlzbWlzcywgY2IpXG5cbm1vZHVsZS5leHBvcnRzID0gRmVlZGJhY2tcbiIsIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQ0FBO0FEQUEsSUFBQSxRQUFBO0VBQUE7OztBQUFBLE1BQU0sQ0FBQyxPQUFQLEdBQWlCOztBQUdYOzs7RUFDUyxrQkFBQyxPQUFEO0FBR1gsUUFBQTs7TUFIWSxVQUFROztJQUdwQixRQUFBLEdBQ0U7TUFBQSxLQUFBLEVBQU8sT0FBTyxDQUFDLEtBQVIsSUFBaUIsT0FBeEI7O0lBRUYsR0FBQSxHQUNBLGdIQUFBLEdBRWdCLFFBQVEsQ0FBQyxLQUZ6QixHQUUrQjtJQU8vQixJQUFHLE9BQU8sQ0FBQyxXQUFYO01BQ0UsV0FBQSxHQUNFO1FBQUEsR0FBQSxFQUFLLEVBQUw7UUFDQSxLQUFBLEVBQU8sRUFEUDtRQUVBLE1BQUEsRUFBUSxFQUZSO1FBR0EsSUFBQSxFQUFNLEVBSE47UUFGSjtLQUFBLE1BQUE7TUFPRSxXQUFBLEdBQ0U7UUFBQSxHQUFBLEVBQUss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 133 | -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/framer.vekter.js: -------------------------------------------------------------------------------- 1 | (function(scope) {var __layer_0__ = new Layer({"backgroundColor":"hsl(0, 0%, 100%)","width":1440,"height":900,"constraintValues":{"height":900,"heightFactor":1,"width":1440,"widthFactor":1},"blending":"normal","clip":true,"borderStyle":"solid"});var __layer_1__ = new Layer({"parent":__layer_0__,"backgroundSize":"fill","backgroundColor":null,"width":1799,"x":-115,"height":907,"constraintValues":{"left":-115,"aspectRatioLocked":true,"height":907,"centerAnchorX":0.54479166666666667,"width":1799,"bottom":-4,"right":-244,"top":null,"centerAnchorY":0.50055555555555553},"blending":"normal","image":"images\/design\/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png","clip":false,"borderStyle":"solid","y":-3});var __layer_2__ = new Layer({"parent":__layer_0__,"name":"topnav","backgroundColor":"transparent","width":1440,"height":48,"constraintValues":{"height":48,"centerAnchorX":0.5,"width":1440,"right":0,"centerAnchorY":0.026666666666666668},"blending":"normal","clip":false,"borderStyle":"solid"});var __layer_3__ = new Layer({"parent":__layer_2__,"name":"nav","backgroundColor":"rgba(41, 43, 43, 1.00)","width":1204,"height":48,"constraintValues":{"height":48,"centerAnchorX":0.41535150645624103,"width":1204,"bottom":0,"right":236,"centerAnchorY":0.5},"blending":"normal","clip":false,"borderStyle":"solid"});var __layer_4__ = new Layer({"parent":__layer_3__,"backgroundSize":"fill","backgroundColor":null,"width":102,"x":17,"height":30,"constraintValues":{"left":17,"aspectRatioLocked":true,"height":30,"centerAnchorX":0.05647840531561462,"width":102,"bottom":9,"top":9,"centerAnchorY":0.5},"blending":"normal","image":"images\/design\/e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png","clip":false,"borderStyle":"solid","y":9});var __layer_5__ = new Layer({"parent":__layer_3__,"backgroundSize":"fill","backgroundColor":null,"width":188,"x":138,"height":32,"constraintValues":{"left":138,"aspectRatioLocked":true,"height":32,"centerAnchorX":0.19269102990033224,"width":188,"bottom":8,"top":8,"centerAnchorY":0.5},"blending":"normal","image":"images\/design\/ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png","clip":false,"borderStyle":"solid","y":8});var btn_share = new Layer({"parent":__layer_3__,"name":"btn_share","borderWidth":{"left":1,"bottom":0,"right":0,"top":0},"backgroundColor":"rgba(41, 43, 43, 1.00)","width":48,"x":1156,"borderColor":"hsl(0, 0%, 0%)","height":48,"constraintValues":{"left":null,"height":48,"centerAnchorX":0.98006644518272423,"width":48,"bottom":0,"right":0,"centerAnchorY":0.5},"blending":"normal","clip":false,"borderStyle":"solid"});var icon_share = new SVGLayer({"parent":btn_share,"name":"icon_share","backgroundColor":null,"width":15,"x":17,"htmlIntrinsicSize":{"height":24,"width":24},"color":"hsl(0, 0%, 100%)","height":15,"constraintValues":{"left":null,"aspectRatioLocked":true,"height":15,"centerAnchorX":0.5,"width":15,"top":null,"centerAnchorY":0.51041666666666663},"blending":"normal","y":17,"svg":"<\/path><\/polyline><\/line><\/svg>"});var icon_loader = new SVGLayer({"parent":btn_share,"name":"icon_loader","backgroundColor":null,"width":15,"x":17,"htmlIntrinsicSize":{"height":24,"width":24},"color":"hsl(0, 0%, 100%)","height":15,"constraintValues":{"left":null,"aspectRatioLocked":true,"height":15,"centerAnchorX":0.51041666666666663,"width":15,"top":null,"centerAnchorY":0.51041666666666663},"blending":"normal","opacity":0,"y":17,"svg":"<\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/svg>"});var __layer_6__ = new Layer({"parent":__layer_3__,"backgroundSize":"fill","backgroundColor":null,"width":108,"x":1048,"height":48,"constraintValues":{"left":null,"height":48,"centerAnchorX":0.91528239202657802,"width":108,"bottom":0,"right":48,"centerAnchorY":0.5,"aspectRatioLocked":true},"blending":"normal","image":"images\/design\/cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png","clip":false,"borderStyle":"solid"});var __layer_7__ = new Layer({"parent":__layer_2__,"name":"collection","borderWidth":{"left":1,"bottom":0,"right":0,"top":0},"backgroundColor":"rgba(41, 43, 43, 1.00)","width":236,"x":1204,"borderColor":"hsl(0, 0%, 0%)","height":48,"constraintValues":{"left":null,"height":48,"centerAnchorX":0.91535150645624108,"width":236,"bottom":0,"right":0,"centerAnchorY":0.5},"blending":"normal","clip":false,"borderStyle":"solid"});var __layer_8__ = new Layer({"parent":__layer_7__,"backgroundSize":"fill","backgroundColor":null,"width":90,"x":136,"height":32,"constraintValues":{"left":null,"aspectRatioLocked":true,"height":32,"centerAnchorX":0.76694915254237284,"width":90,"bottom":8,"right":10,"top":8,"centerAnchorY":0.5},"blending":"normal","image":"images\/design\/n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png","clip":false,"borderStyle":"solid","y":8});var __layer_9__ = new Layer({"parent":__layer_7__,"backgroundSize":"fill","backgroundColor":null,"width":81,"x":20,"height":16,"constraintValues":{"left":20,"aspectRatioLocked":true,"height":16,"centerAnchorX":0.25635593220338981,"width":81,"top":null,"centerAnchorY":0.5},"blending":"normal","image":"images\/design\/VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png","clip":false,"borderStyle":"solid","y":16});var hint = new Layer({"parent":__layer_0__,"name":"hint","backgroundColor":"rgba(41, 43, 43, 1.00)","width":284,"x":1129,"height":37,"constraintValues":{"left":null,"height":37,"centerAnchorX":0.88263888888888886,"width":284,"right":27,"top":53,"centerAnchorY":0.079444444444444443},"blending":"normal","borderRadius":5,"opacity":0,"clip":false,"borderStyle":"solid","y":53});var __layer_10__ = new TextLayer({"parent":hint,"backgroundColor":null,"width":252,"x":16,"styledText":{"blocks":[{"inlineStyles":[{"css":{"fontSize":"16px","WebkitTextFillColor":"hsl(0, 0%, 100%)","whiteSpace":"pre","fontWeight":400,"letterSpacing":"0px","tabSize":4,"fontFamily":"\"Metric-Regular\", \"Metric\", serif","lineHeight":"1.2"},"startIndex":0,"endIndex":42}],"text":"Copy a link to share this view with others"}]},"height":19,"constraintValues":{"left":null,"height":19,"centerAnchorX":0.5,"width":252,"top":null,"centerAnchorY":0.5},"blending":"normal","autoSize":true,"y":9});if(__layer_9__ !== undefined){__layer_9__.__framerInstanceInfo = {"hash":"#vekter|__layer_9__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_7__ !== undefined){__layer_7__.__framerInstanceInfo = {"hash":"#vekter|__layer_7__","vekterClass":"FrameNode","framerClass":"Layer"}};if(btn_share !== undefined){btn_share.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|btn_share","targetName":"btn_share","vekterClass":"FrameNode"}};if(__layer_8__ !== undefined){__layer_8__.__framerInstanceInfo = {"hash":"#vekter|__layer_8__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_2__ !== undefined){__layer_2__.__framerInstanceInfo = {"hash":"#vekter|__layer_2__","vekterClass":"FrameNode","framerClass":"Layer"}};if(icon_loader !== undefined){icon_loader.__framerInstanceInfo = {"originalFilename":"loader","framerClass":"SVGLayer","hash":"#vekter|icon_loader","targetName":"icon_loader","vekterClass":"SVGNode"}};if(__layer_10__ !== undefined){__layer_10__.__framerInstanceInfo = {"framerClass":"TextLayer","hash":"#vekter|__layer_10__","vekterClass":"TextNode","text":"Copy a link to share this view with others"}};if(__layer_0__ !== undefined){__layer_0__.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|__layer_0__","vekterClass":"FrameNode","deviceType":"apple-macbook-pro","deviceName":"Apple MacBook Pro"}};if(icon_share !== undefined){icon_share.__framerInstanceInfo = {"originalFilename":"share","framerClass":"SVGLayer","hash":"#vekter|icon_share","targetName":"icon_share","vekterClass":"SVGNode"}};if(__layer_4__ !== undefined){__layer_4__.__framerInstanceInfo = {"hash":"#vekter|__layer_4__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_6__ !== undefined){__layer_6__.__framerInstanceInfo = {"hash":"#vekter|__layer_6__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_1__ !== undefined){__layer_1__.__framerInstanceInfo = {"hash":"#vekter|__layer_1__","vekterClass":"FrameNode","framerClass":"Layer"}};if(hint !== undefined){hint.__framerInstanceInfo = {"framerClass":"Layer","hash":"#vekter|hint","targetName":"hint","vekterClass":"FrameNode"}};if(__layer_3__ !== undefined){__layer_3__.__framerInstanceInfo = {"hash":"#vekter|__layer_3__","vekterClass":"FrameNode","framerClass":"Layer"}};if(__layer_5__ !== undefined){__layer_5__.__framerInstanceInfo = {"hash":"#vekter|__layer_5__","vekterClass":"FrameNode","framerClass":"Layer"}};if (scope["__vekterVariables"]) { scope["__vekterVariables"].map(function(variable) { delete scope[variable] } ) };Object.assign(scope, {btn_share, icon_share, icon_loader, hint});scope["__vekterVariables"] = ["btn_share", "icon_share", "icon_loader", "hint"];if (typeof Framer.CurrentContext.layout === 'function') {Framer.CurrentContext.layout()};})(window); -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/cursor-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/cursor-active.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/cursor-active@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/cursor-active@2x.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/cursor.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/cursor@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/cursor@2x.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/icon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/icon-120.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/icon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/icon-152.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/icon-180.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/icon-192.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/images/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/framer/images/icon-76.png -------------------------------------------------------------------------------- /examples/share-permalink.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: #fff; 11 | font: 28px/1em "Helvetica"; 12 | color: gray; 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 | } -------------------------------------------------------------------------------- /examples/share-permalink.framer/framer/version: -------------------------------------------------------------------------------- 1 | 13 -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/.gitkeep -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/VSkvLfaB1DolQbKwWfvLAY9gYvUiVdMl27tiGbyPyUqBeiMZzOK7CZyqQCPMKlnPH8Llms4yOOCZ2fT5RNQ.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/cvZnZxJAXuTevUIiapPB0o4M0vWuB2diopUgXE4Pt8AWAhU0mFmFuseuN4UorvYCadCsql6cyV7hlO3XV9zMQ.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/e8n6J8hFsbcrB0QI91ujcdpi7UYWSt6GviUaz1ROfOBFT2qA8ak0ZzXjBPyHOlkUaGihR9m30f1enJnVbkvEKQ.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-1024: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-1024 -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-2048: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-2048 -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-512: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-512 -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/f82zPnxUihIrowX5c7pfHvua3TnUUM2SGtCdMQRflEV5YGWkzJLdXSVZCius7lFd83XYh6Y1I0g8lN0U0GPg.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/ifpgn7e1YlD86MIVmwdrBFaRrKY0BzYXsK2u3yAHpt6klTfDpGQfqIaYy3KLBLZLtndYLLfbtLESZJ2w.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png -------------------------------------------------------------------------------- /examples/share-permalink.framer/images/design/n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png-preview: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/examples/share-permalink.framer/images/design/n0rmpJNjjJaNdGyumym6k0jvZmmEs93fQASPcQmty5ejs9dA8OxfpqTPvkpzJGEN1eVI8L4tOelnDrqrhbg.png-preview -------------------------------------------------------------------------------- /examples/share-permalink.framer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/share-permalink.framer/modules/feedback.coffee: -------------------------------------------------------------------------------- 1 | Events.Dismiss = "DismissFeedback" 2 | 3 | # Feedback Class 4 | class Feedback extends TextLayer 5 | constructor: (options={}) -> 6 | 7 | # Dismiss icon svg set up 8 | svgProps = 9 | color: options.color || 'white' 10 | 11 | svg = 12 | """ 13 | 14 | 15 | 16 | 17 | 18 | """ 19 | 20 | # text padding settings for different types of feedback 21 | if options.autoDismiss 22 | textPadding = 23 | top: 16, 24 | right: 16, 25 | bottom: 16, 26 | left: 16 27 | else 28 | textPadding = 29 | top: 16, 30 | right: 48, 31 | bottom: 16, 32 | left: 16 33 | 34 | # some generic looking defaults for Feedback class 35 | super _.defaults options, 36 | fontSize: 16 37 | color: 'white' 38 | text: options.text 39 | backgroundColor: '#333' 40 | borderRadius: 3 41 | lineHeight: 1.4 42 | x: Align.center 43 | y: Align.bottom(-20) 44 | clip: true 45 | padding: textPadding 46 | borderColor: 'rgba(0, 0, 0, 0.2)' 47 | borderWidth: 1 48 | 49 | @name = 'feedback' 50 | @states.show = 51 | opacity: 1 52 | y: options.y || Align.bottom(0) 53 | 54 | @states.hide = 55 | opacity: 0 56 | y: options.y || Align.bottom(0) 57 | 58 | @states.animationOptions = 59 | time: 0.25 60 | 61 | @stateSwitch('hide') 62 | @states.switch('show') 63 | 64 | # handler for dimissing feedback. 65 | dismissFeedback = () => 66 | feedback = Layer.select('feedback') 67 | feedback.states.switch('hide') 68 | Utils.delay 0.5, -> 69 | feedback.destroy() 70 | 71 | @emit(Events.Dismiss) 72 | 73 | 74 | # When 'autoDismiss' object is used as an option, generate horizontal bar that counts down to the user-specified duration. 75 | if options.autoDismiss 76 | counter = new Layer 77 | parent: @ 78 | borderRadius: 10 79 | y: Align.top(0) 80 | height: options.autoDismiss.counterHeight || 3 81 | backgroundColor: options.autoDismiss.color || 'white' 82 | width: @width 83 | 84 | counter.animate 85 | width: 0 86 | options: 87 | time: options.autoDismiss.duration || 3 88 | curve: 'linear' 89 | 90 | counter.onAnimationEnd -> 91 | dismissFeedback() 92 | 93 | # Otherwise, default to using a dimissable Feedback & generate dimiss icon button. 94 | else 95 | dismiss = new Layer 96 | parent: @ 97 | backgroundColor: null 98 | borderRadius: 50 99 | y: Align.top(14) 100 | x: Align.right(-12) 101 | html: svg 102 | width: 24 103 | height: 24 104 | opacity: 0.5 105 | style: 'cursor':'pointer' 106 | 107 | dismiss.onMouseOver -> 108 | this.opacity = 1 109 | 110 | dismiss.onMouseOut -> 111 | this.opacity = 0.5 112 | 113 | dismiss.onClick -> 114 | dismissFeedback() 115 | 116 | onDismiss: (cb) -> @on(Events.Dismiss, cb) 117 | 118 | module.exports = Feedback 119 | -------------------------------------------------------------------------------- /feedback.coffee: -------------------------------------------------------------------------------- 1 | Events.Dismiss = "DismissFeedback" 2 | 3 | # Feedback Class 4 | class Feedback extends TextLayer 5 | constructor: (options={}) -> 6 | 7 | # Dismiss icon svg set up 8 | svgProps = 9 | color: options.color || 'white' 10 | 11 | svg = 12 | """ 13 | 14 | 15 | 16 | 17 | 18 | """ 19 | 20 | # text padding settings for different types of feedback 21 | if options.autoDismiss 22 | textPadding = 23 | top: 16, 24 | right: 16, 25 | bottom: 16, 26 | left: 16 27 | else 28 | textPadding = 29 | top: 16, 30 | right: 48, 31 | bottom: 16, 32 | left: 16 33 | 34 | # some generic looking defaults for Feedback class 35 | super _.defaults options, 36 | fontSize: 16 37 | color: 'white' 38 | text: options.text 39 | backgroundColor: '#333' 40 | borderRadius: 3 41 | lineHeight: 1.4 42 | x: Align.center 43 | y: Align.bottom(-20) 44 | clip: true 45 | padding: textPadding 46 | borderColor: 'rgba(0, 0, 0, 0.2)' 47 | borderWidth: 1 48 | 49 | @name = 'feedback' 50 | @states.show = 51 | opacity: 1 52 | y: options.y || Align.bottom(0) 53 | 54 | @states.hide = 55 | opacity: 0 56 | y: options.y || Align.bottom(0) 57 | 58 | @states.animationOptions = 59 | time: 0.25 60 | 61 | @stateSwitch('hide') 62 | @states.switch('show') 63 | 64 | # handler for dimissing feedback. 65 | dismissFeedback = () => 66 | feedback = Layer.select('feedback') 67 | feedback.states.switch('hide') 68 | Utils.delay 0.5, -> 69 | feedback.destroy() 70 | 71 | @emit(Events.Dismiss) 72 | 73 | 74 | # When 'autoDismiss' object is used as an option, generate horizontal bar that counts down to the user-specified duration. 75 | if options.autoDismiss 76 | counter = new Layer 77 | parent: @ 78 | borderRadius: 10 79 | y: Align.top(0) 80 | height: options.autoDismiss.counterHeight || 3 81 | backgroundColor: options.autoDismiss.color || 'white' 82 | width: @width 83 | 84 | counter.animate 85 | width: 0 86 | options: 87 | time: options.autoDismiss.duration || 3 88 | curve: 'linear' 89 | 90 | counter.onAnimationEnd -> 91 | dismissFeedback() 92 | 93 | # Otherwise, default to using a dimissable Feedback & generate dimiss icon button. 94 | else 95 | dismiss = new Layer 96 | parent: @ 97 | backgroundColor: null 98 | borderRadius: 50 99 | y: Align.top(14) 100 | x: Align.right(-12) 101 | html: svg 102 | width: 24 103 | height: 24 104 | opacity: 0.5 105 | style: 'cursor':'pointer' 106 | 107 | dismiss.onMouseOver -> 108 | this.opacity = 1 109 | 110 | dismiss.onMouseOut -> 111 | this.opacity = 0.5 112 | 113 | dismiss.onClick -> 114 | dismissFeedback() 115 | 116 | onDismiss: (cb) -> @on(Events.Dismiss, cb) 117 | 118 | module.exports = Feedback 119 | -------------------------------------------------------------------------------- /module.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Framer Feedback", 3 | "description": "The Feedback Module for Framer makes it easier for you to prototype with feedback messages.", 4 | "author": "Jacky Lee", 5 | "require": "Feedback = require 'feedback'", 6 | "install": "feedback.coffee", 7 | "thumb": "thumb.png", 8 | "example": "example.coffee" 9 | } 10 | -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aboutjax/Framer-Feedback/07e759440b7ab48766a4db9b3a8b4d50a53ce52d/thumb.png --------------------------------------------------------------------------------