Skip to content

Instantly share code, notes, and snippets.

@samuelcouch

samuelcouch/.gitignore

Created April 27, 2016 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samuelcouch/4458c0164840f7ae88674cb73b8bb0d3 to your computer and use it in GitHub Desktop.
Save samuelcouch/4458c0164840f7ae88674cb73b8bb0d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.gitignore
# Framer Git Ignore
# General OSX
.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
# Framer Specific
.temp.html
framer/*.old.*
framer/backup.coffee
framer/backups/*
framer/.*.hash
Raw
app.coffee
{Pointer} = require 'Pointer'
Screen.backgroundColor = "#FF7300"
layerOverlayer = new Layer
width: Screen.width
height: (Screen.height)
x: Align.center
y: Align.center
# Create layers
svg = new Layer
width: Screen.width
height: (Screen.height)
x: Align.center
y: Align.center
backgroundColor: "#fff"
borderRadius: 6
html: '<svg id="svg" style="position: absolute; box-shadow: inset 0 0 0 1px white;" width="100%" height="100%" viewbox="0 0 #{Screen.width} #{Screen.height}"></svg>'
style:
fill: 'none'
stroke: '#002336'
custom:
polyline: null
svg: null
active: false
newPolyline = ->
# Get the svg element if we don't have it
svg.custom.svg = document.getElementById "svg" if svg.custom.svg is null
# Create a new polyline node and append it to the svg tag
svg.custom.polyline = document.createElementNS "http://www.w3.org/2000/svg", "polyline"
svg.custom.svg.appendChild svg.custom.polyline
updatePoints = (event, layer) ->
# Get Pointer Position
pos = Pointer.screen event, layer
# Create a new point
point = svg.custom.svg.createSVGPoint()
point.x = pos.x
point.y = pos.y
# Add the point to the polyline
svg.custom.polyline.points.appendItem point
layerOverlayer.on Events.TouchStart, ->
svg.custom.active = true
newPolyline()
layerOverlayer.on Events.TouchEnd, ->
svg.custom.active = false
layerOverlayer.on Events.TouchMove, (event, layer) ->
return unless svg.custom.active
updatePoints event, layer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script type="text/javascript">
// This automatically sets the right viewport scale on mobile devices
(function() {
var scale = 1 / window.devicePixelRatio
var viewport = "width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no"
var iOS = /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS) { viewport += ", shrink-to-fit=no" }
document.write("<meta name=\"viewport\" content=\"" + viewport + "\">")
})()
</script>
<link rel="apple-touch-icon" href="framer/images/icon-120.png">
<link rel="apple-touch-icon" href="framer/images/icon-76.png" sizes="76x76">
<link rel="apple-touch-icon" href="framer/images/icon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="framer/images/icon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="framer/images/icon-180.png" sizes="180x180">
<link rel="apple-touch-icon" href="framer/images/icon-192.png" sizes="192x192">
<link rel="stylesheet" type="text/css" href="framer/style.css">
<script src="framer/coffee-script.js"></script>
<script src="framer/framer.js"></script>
<script src="framer/framer.generated.js"></script>
<script src="framer/framer.modules.js"></script>
<script src="framer/framer.init.js"></script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment