├── CSS Helpers └── Gradient Background.coffee ├── Custom Devices ├── Chromeless Screen.coffee └── Scale Device Into View.coffee ├── Date & Time ├── Date.coffee └── Time.coffee ├── LICENSE ├── Other └── Example.coffee ├── README.md ├── Responsive └── Detect Orientation Change.coffee ├── Share UI ├── Enable Share UI inside Studio.coffee ├── Metadata.coffee ├── Project Info.coffee └── Remove Framer Share UI.coffee ├── Sharing Info.coffee ├── Utilities ├── Add File To Document.coffee ├── Create Error.coffee ├── Enable Preloader.coffee ├── Fix for Windows Multi Input Devices.coffee ├── Remove Hints.coffee └── Send Print to Console.coffee └── readme.txt /CSS Helpers/Gradient Background.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | backgroundGradient = (layer, start="rgba(0,0,0,1)", stop="rgba(0,0,0,0)", deg=0) -> 4 | gradient = "linear-gradient(\#{deg}deg, \#{start}, \#{stop})" 5 | return if layer? then layer.style.backgroundImage = gradient else gradient 6 | 7 | #{contents} 8 | """ -------------------------------------------------------------------------------- /Custom Devices/Chromeless Screen.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # 4 | # Custom Device with Chromeless Screen 5 | 6 | Framer.Device.customize 7 | deviceType: Framer.Device.Type.Browser 8 | screenWidth: 1366 9 | screenHeight: 1024 10 | deviceImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 11 | deviceImageWidth: 1366 12 | deviceImageHeight: 1024 13 | # 14 | 15 | #{contents} 16 | """ 17 | 18 | 19 | -------------------------------------------------------------------------------- /Custom Devices/Scale Device Into View.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # 4 | # Scale the screen to fit viewer window 5 | 6 | (scaleScreen = (modifier = 1, delay = .05) -> Utils.delay delay, => Framer.Device.setDeviceScale (Canvas.width/Screen.width) * modifier, true)() 7 | 8 | # 9 | 10 | #{contents} 11 | 12 | """ 13 | -------------------------------------------------------------------------------- /Date & Time/Date.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | 5 | # 6 | # Parse Date Values 7 | 8 | today = new Date().toLocaleDateString() 9 | 10 | ########################################################################################## 11 | # Get day of month (assuming a date format of "10 August 2016" or "August 10, 2016") 12 | 13 | regExDay = ///(\\d{1,2})\\b///i 14 | regExMonth = ///(\\D{3,})\\s///i 15 | regExYear = ///\\s(\\d{2,})$///i 16 | 17 | date = 18 | day: today.match(regExDay )[1] 19 | month: today.match(regExMonth)[1] 20 | year: today.match(regExYear )[1] 21 | 22 | print today, date.day, date.month, date.year 23 | 24 | ########################################################################################## 25 | # Day of Week 26 | 27 | dayOfWeek = new Date().getDay() 28 | 29 | dayString = switch dayOfWeek 30 | when 0 then "Sunday" 31 | when 1 then "Monday" 32 | when 2 then "Tuesday" 33 | when 3 then "Wednesday" 34 | when 4 then "Thursday" 35 | when 5 then "Friday" 36 | when 6 then "Saturday" 37 | 38 | print dayString 39 | 40 | # 41 | 42 | """ -------------------------------------------------------------------------------- /Date & Time/Time.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | 5 | t = new Date().toLocaleTimeString().match /^(\\d+:\\d{2}):\\d{2}\\s([APM]{2})/ 6 | time = "\#{t[1]} \#{t[2]}" 7 | """ 8 | 9 | 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Seattle.framer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Other/Example.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | 5 | # Hello world! 6 | """ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Snippets 2 | A collection of snippets for Framer 3 | -------------------------------------------------------------------------------- /Responsive/Detect Orientation Change.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | 4 | # detect orientation change 5 | Framer.Device.on "change:orientation", -> print "device changed orientation" 6 | 7 | #{contents} 8 | """ 9 | 10 | 11 | -------------------------------------------------------------------------------- /Share UI/Enable Share UI inside Studio.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | 4 | # 5 | # Enable Share UI inside Framer 6 | 7 | Framer.Extras.ShareInfo.enable() 8 | 9 | # 10 | 11 | #{contents} 12 | """ 13 | -------------------------------------------------------------------------------- /Share UI/Metadata.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # Project Metadata 4 | Framer.Metadata = 5 | title: "" 6 | description: "" 7 | author: "" 8 | twitter: "" 9 | 10 | #{contents} 11 | """ 12 | -------------------------------------------------------------------------------- /Share UI/Project Info.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # 4 | # Project Info 5 | # 6 | # Information entered here will be shown when shared. 7 | # To edit this information, edit the snippet ‘Project Info’ 8 | 9 | Framer.Info = 10 | title: "" 11 | description: "" 12 | author: "Jordan Robert Dobson" 13 | twitter: "jordandobson" 14 | 15 | # 16 | 17 | #{contents} 18 | """ 19 | -------------------------------------------------------------------------------- /Share UI/Remove Framer Share UI.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | 4 | # 5 | # Remove Framer Share UI 6 | 7 | Utils.insertCSS "a.badge, a.btn-open, a.btn-dl, #FramerContextRoot-Sharing{ display: none !important; }" 8 | 9 | # 10 | 11 | #{contents} 12 | """ 13 | 14 | 15 | -------------------------------------------------------------------------------- /Sharing Info.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # 4 | # Project Info 5 | # This info is presented in a widget when you share. 6 | # http://framerjs.com/docs/#info.info 7 | 8 | Framer.Info = 9 | title: "" 10 | author: "#{options?.username ? ''}" 11 | twitter: "" 12 | description: "" 13 | 14 | # 15 | 16 | #{contents} 17 | """ 18 | -------------------------------------------------------------------------------- /Utilities/Add File To Document.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | addCssFile = (location) -> 4 | file = document.createElement 'link' 5 | file.rel = 'stylesheet' 6 | file.href = location 7 | document.getElementsByTagName('head')[0].appendChild file 8 | 9 | addCssFile "_.css" 10 | 11 | addJsFile = (location) -> 12 | file = document.createElement 'script' 13 | file.src = location 14 | document.getElementsByTagName('head')[0].appendChild file 15 | 16 | addJsFile "_.js" 17 | 18 | #{contents} 19 | """ -------------------------------------------------------------------------------- /Utilities/Create Error.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | # 4 | # Show an error message as part of your app.coffee or Module file 5 | error = (message) -> 6 | Framer.Extras.ErrorDisplay.enable() 7 | throw Error message 8 | # 9 | #{contents} 10 | """ 11 | 12 | 13 | -------------------------------------------------------------------------------- /Utilities/Enable Preloader.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | 4 | # Enable preloader 5 | unless Utils.isFramerStudio() then Framer.Extras.Preloader.enable() 6 | 7 | #{contents} 8 | """ 9 | 10 | 11 | -------------------------------------------------------------------------------- /Utilities/Fix for Windows Multi Input Devices.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | 4 | # I should add User Agent detection when I have access to a windows machine again 5 | # Tell 2:1 computers (desktop/laptops with touch screens) to use the mouse 6 | # since that's what most people try first. 7 | # Working example here: http://prototyp.in/#/create/-KIAIQ0qzgeoZHDXlq_n 8 | 9 | if Utils.isDesktop() or not Utils.isTouch() 10 | Framer.Extras.TouchEmulator.disable() 11 | preventer = () -> alert "Please use your mouse and not the touch screen." 12 | preventer2 = (ev) -> if ev.pointerType is "touch" then preventer() # Edge-only 13 | window.addEventListener "touchstart", preventer, false 14 | window.addEventListener "pointerdown", preventer2, false # Make sure alert also fires in Edge 15 | Events.TouchStart = "mousedown" 16 | Events.TouchEnd = "mouseup" 17 | Events.TouchMove = "mousemove" 18 | Events.Click = Events.TouchEnd 19 | 20 | #{contents} 21 | """ 22 | 23 | 24 | -------------------------------------------------------------------------------- /Utilities/Remove Hints.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | Framer.Extras.Hints.disable() 4 | 5 | #{contents} 6 | """ -------------------------------------------------------------------------------- /Utilities/Send Print to Console.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | print = -> console.log.apply console, arguments 4 | 5 | #{contents} 6 | """ -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | Here you can create your own snippets. --------------------------------------------------------------------------------