Permalink
Browse files

Merge branch 'master' of github.com:koenbok/Framer

  • Loading branch information...
koenbok committed Apr 30, 2015
2 parents ce79b87 + ca658df commit f755586951a1c3bda92bf5022fa27fa6cec645c2
Showing with 1,009 additions and 19 deletions.
  1. +18 −14 framer/Components/SliderComponent.coffee
  2. +13 −5 test/studio/PageComponentGrid.framer/app.coffee
  3. +62 −0 test/studio/SliderComponentMin.framer/app.coffee
  4. +12 −0 test/studio/SliderComponentMin.framer/framer/coffee-script.js
  5. +10 −0 test/studio/SliderComponentMin.framer/framer/config.json
  6. +126 −0 test/studio/SliderComponentMin.framer/framer/framer.init.js
  7. +1 −0 test/studio/SliderComponentMin.framer/framer/framer.js
  8. BIN test/studio/SliderComponentMin.framer/framer/images/background.png
  9. BIN test/studio/SliderComponentMin.framer/framer/images/cursor.png
  10. BIN test/studio/SliderComponentMin.framer/framer/images/cursor@2x.png
  11. BIN test/studio/SliderComponentMin.framer/framer/images/icon-120.png
  12. BIN test/studio/SliderComponentMin.framer/framer/images/icon-152.png
  13. BIN test/studio/SliderComponentMin.framer/framer/images/icon-76.png
  14. BIN test/studio/SliderComponentMin.framer/framer/images/icon-arrow.png
  15. BIN test/studio/SliderComponentMin.framer/framer/images/icon-arrow@2x.png
  16. BIN test/studio/SliderComponentMin.framer/framer/images/icon-close.png
  17. BIN test/studio/SliderComponentMin.framer/framer/images/icon-close@2x.png
  18. BIN test/studio/SliderComponentMin.framer/framer/images/icon-framer.png
  19. BIN test/studio/SliderComponentMin.framer/framer/images/icon-framer@2x.png
  20. BIN test/studio/SliderComponentMin.framer/framer/images/icon-share.png
  21. BIN test/studio/SliderComponentMin.framer/framer/images/icon-share@2x.png
  22. BIN test/studio/SliderComponentMin.framer/framer/images/value.png
  23. +196 −0 test/studio/SliderComponentMin.framer/framer/mirror.css
  24. +44 −0 test/studio/SliderComponentMin.framer/framer/style.css
  25. +1 −0 test/studio/SliderComponentMin.framer/framer/version
  26. BIN test/studio/SliderComponentMin.framer/images/framer-icon.png
  27. BIN test/studio/SliderComponentMin.framer/images/value.png
  28. +37 −0 test/studio/SliderComponentMin.framer/index.html
  29. +62 −0 test/studio/SliderComponentValue.framer/app.coffee
  30. +12 −0 test/studio/SliderComponentValue.framer/framer/coffee-script.js
  31. +10 −0 test/studio/SliderComponentValue.framer/framer/config.json
  32. +126 −0 test/studio/SliderComponentValue.framer/framer/framer.init.js
  33. +1 −0 test/studio/SliderComponentValue.framer/framer/framer.js
  34. BIN test/studio/SliderComponentValue.framer/framer/images/background.png
  35. BIN test/studio/SliderComponentValue.framer/framer/images/cursor.png
  36. BIN test/studio/SliderComponentValue.framer/framer/images/cursor@2x.png
  37. BIN test/studio/SliderComponentValue.framer/framer/images/icon-120.png
  38. BIN test/studio/SliderComponentValue.framer/framer/images/icon-152.png
  39. BIN test/studio/SliderComponentValue.framer/framer/images/icon-76.png
  40. BIN test/studio/SliderComponentValue.framer/framer/images/icon-arrow.png
  41. BIN test/studio/SliderComponentValue.framer/framer/images/icon-arrow@2x.png
  42. BIN test/studio/SliderComponentValue.framer/framer/images/icon-close.png
  43. BIN test/studio/SliderComponentValue.framer/framer/images/icon-close@2x.png
  44. BIN test/studio/SliderComponentValue.framer/framer/images/icon-framer.png
  45. BIN test/studio/SliderComponentValue.framer/framer/images/icon-framer@2x.png
  46. BIN test/studio/SliderComponentValue.framer/framer/images/icon-share.png
  47. BIN test/studio/SliderComponentValue.framer/framer/images/icon-share@2x.png
  48. BIN test/studio/SliderComponentValue.framer/framer/images/value.png
  49. +196 −0 test/studio/SliderComponentValue.framer/framer/mirror.css
  50. +44 −0 test/studio/SliderComponentValue.framer/framer/style.css
  51. +1 −0 test/studio/SliderComponentValue.framer/framer/version
  52. BIN test/studio/SliderComponentValue.framer/images/framer-icon.png
  53. BIN test/studio/SliderComponentValue.framer/images/value.png
  54. +37 −0 test/studio/SliderComponentValue.framer/index.html
@@ -31,16 +31,14 @@ class exports.SliderComponent extends Layer
backgroundColor: "#fff"
superLayer: @
shadowY: 1
shadowBlur: 4
shadowColor: "rgba(0,0,0,0.4)"
shadowBlur: 3
shadowColor: "rgba(0,0,0,0.35)"
@knob.draggable.enabled = true
@knob.draggable.speedY = 0
@knob.draggable.overdrag = false
@knob.draggable.momentum = true
@knob.draggable.momentumOptions =
friction: 2
tolerance: 1/10
@knob.draggable.momentumOptions = {friction: 2, tolerance: 1/10}
@knob.draggable.bounce = false
@knob.draggable.propagateEvents = false
@knob.borderRadius = @knob.width
@@ -56,34 +54,40 @@ class exports.SliderComponent extends Layer
@knob.placeBefore(@fill)
@_updateFrame()
@on("change:frame", @_updateFrame)
@on("change:borderRadius", @_setRadius)
@knob.on("change:x", @_updateFill)
@knob.on("change:x", @_updateValue)
@on(Events.MouseDown, @_touchDown)
@on(Events.TouchDown, @_touchDown)
@knob.on("change:size", @_updateFrame)
@knob.on(Events.DragMove, @_updateFrame)
# On click/touch of the slider, update the value
@on(Events.TouchStart, @_touchDown)
@knobSize = options.knobSize or 30
_touchDown: (event) =>
event.preventDefault()
event.stopPropagation()
@value = @valueForPoint(event.x - @canvasFrame.x)
if @min > 0 then offsetX = (@min / @canvasScaleX()) - @min else offsetX = 0
@value = @valueForPoint(event.x - @screenScaledFrame().x) / @canvasScaleX() - offsetX
@knob.draggable._touchStart(event)
_updateFill: =>
@fill.width = @knob.midX
_updateFrame: =>
@knob.draggable.constraints =
x: -@knobSize / 2
y: -@knobSize / 2
width: @width + @knobSize
height: @height + @knobSize
x: -@knob.width / 2
y: -@knob.height / 2
width: @width + @knob.width
height: @height + @knob.height
@knob.centerY()
@knob.midX = @fill.width
_setRadius: =>
radius = @borderRadius
@@ -1,6 +1,7 @@
page = new PageComponent
width: Screen.width - 200
height: Screen.height - 200
width: Screen.width - 20
height: Screen.height - 20
contentInset: {top: 200, left:200, right:200}
page.center()
@@ -9,15 +10,22 @@ cols = 3
gutter = 0
allLayers = []
for rowIndex in [0..rows-1]
for colIndex in [0..cols-1]
cellLayer = new Layer
width: page.width - 100
height: page.height - 100
width: page.width - 10
height: page.height - 10
x: colIndex * (page.width + gutter)
y: rowIndex * (page.height + gutter)
superLayer: page.content
backgroundColor: Utils.randomColor()
Utils.labelLayer cellLayer, "#{rowIndex}:#{colIndex}"
Utils.labelLayer cellLayer, "#{rowIndex}:#{colIndex}"
allLayers.push(cellLayer)
page.snapToPage(allLayers[4], false)
@@ -0,0 +1,62 @@
# SliderComponent
sliderA = new SliderComponent
sliderA.center()
# Values
sliderA.min = 50
sliderA.max = 150
sliderA.value = 50
# knobSize vs. size
sliderA.knobSize = 60
sliderA.knob.width = sliderA.knob.height = 40
# Visualize value
sliderA.knob.clip = false
valueLayer = new Layer
width:60, height:72, image:"images/value.png"
superLayer: sliderA.knob
y: sliderA.knob.y - 70, scale: 0
valueLayer.x -= 10
# Style
valueLayer.html = sliderA.value
valueLayer.style = {
"color" : "#fff"
"font-size" : "28px"
"font-family" : "Helvetica Neue"
"font-weight" : "300"
"line-height" : "#{valueLayer.height - 12}px"
"text-align" : "center"
}
# Set origin to animate from bottom
valueLayer.originY = 1
# States
valueLayer.states.add
fade25: {opacity: 0.25}
fade50: {opacity: 0.50}
fade75: {opacity: 0.75}
nofade: {opacity: 1}
scaleDown: {scale: 0}
scaleUp: {scale: 0.8}
valueLayer.states.animationOptions = curve: "spring(300,30,0)"
# Visualize output
sliderA.knob.on Events.DragStart, ->
valueLayer.states.switch "scaleUp"
# Test proper output
sliderA.on "change:value", ->
valueLayer.html = Math.round(this.value)
valueLayer.states.switch "fade25" if this.value is 0
valueLayer.states.switch "fade50" if this.value >= 25
valueLayer.states.switch "fade75" if this.value >= 50
valueLayer.states.switch "nofade" if this.value >= 75
# Return after DragEnd
sliderA.knob.on Events.DragAnimationDidEnd, ->
valueLayer.states.switch "scaleDown"

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,10 @@
{
"device" : "iPhone 5S Space Gray",
"sharedPrototype" : 1,
"deviceOrientation" : 0,
"contentScale" : 1,
"deviceType" : "fullscreen",
"updateDelay" : 0.3,
"deviceScale" : -1,
"delay" : 0.3
}
@@ -0,0 +1,126 @@
(function() {
function isFileLoadingAllowed() {
return (window.location.protocol.indexOf("file") == -1)
}
function isHomeScreened() {
return ("standalone" in window.navigator) && window.navigator.standalone == true
}
function isCompatibleBrowser() {
return Utils.isWebKit()
}
var alertNode;
function dismissAlert() {
alertNode.parentElement.removeChild(alertNode)
loadProject()
}
function showAlert(html) {
alertNode = document.createElement("div")
alertNode.classList.add("framerAlertBackground")
alertNode.innerHTML = html
document.addEventListener("DOMContentLoaded", function(event) {
document.body.appendChild(alertNode)
})
window.dismissAlert = dismissAlert;
}
function showBrowserAlert() {
var html = ""
html += "<div class='framerAlert'>"
html += "<strong>Error: Not A WebKit Browser</strong>"
html += "Your browser is not supported. <br> Please use Safari or Chrome.<br>"
html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
html += "</div>"
showAlert(html)
}
function showFileLoadingAlert() {
var html = ""
html += "<div class='framerAlert'>"
html += "<strong>Error: Local File Restrictions</strong>"
html += "Preview this prototype with Framer Mirror or learn more about "
html += "<a href='https://github.com/koenbok/Framer/wiki/LocalLoading'>file restrictions</a>.<br>"
html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
html += "</div>"
showAlert(html)
}
function showHomeScreenAlert() {
link = document.createElement("link");
link.href = "framer/mirror.css"
link.type = "text/css"
link.rel = "stylesheet"
link.media = "screen"
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByTagName("head")[0].appendChild(link)
})
var html = ""
html += "<figure class='icon-close' href='javascript:void(0)' onclick='dismissAlert();'></figure>"
html += "<section class='wrapper'>"
html += "<figure class='icon-framer'></figure><h1>Install Prototype</h1>"
html += "<p>Tap <div class='share'><figure class='icon-share'></figure> Share</div>, then choose 'Add to Home Screen'</p> "
html += "<section class='arrow'><figure class='icon-arrow'></figure></section>"
html += "</section>"
showAlert(html)
}
function loadProject() {
CoffeeScript.load("app.coffee")
}
function setDefaultPageTitle() {
// If no title was set we set it to the project folder name so
// you get a nice name on iOS if you bookmark to desktop.
document.addEventListener("DOMContentLoaded", function() {
if (document.title == "") {
if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) {
document.title = window.FramerStudioInfo.documentTitle
} else {
document.title = window.location.pathname.replace(/\//g, "")
}
}
})
}
function init() {
if (Utils.isFramerStudio()) {
return
}
setDefaultPageTitle()
if (!isCompatibleBrowser()) {
return showBrowserAlert()
}
if (!isFileLoadingAllowed()) {
return showFileLoadingAlert()
}
// if (Utils.isMobile() && !isHomeScreened()) {
// return showHomeScreenAlert()
// }
loadProject()
}
init()
})()
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.

0 comments on commit f755586

Please sign in to comment.