Permalink
Browse files

Merge branch 'slider-update'

  • Loading branch information...
Benjamin den Boer
Benjamin den Boer committed Jun 10, 2015
2 parents 21b9efa + 6acb7e4 commit 11139a7a01da279b96f7c6be82cc58e51e39193d
Showing with 535 additions and 17 deletions.
  1. +64 −17 framer/Components/SliderComponent.coffee
  2. +44 −0 test/studio/SliderComponentVertical.framer/app.coffee
  3. +12 −0 test/studio/SliderComponentVertical.framer/framer/coffee-script.js
  4. +10 −0 test/studio/SliderComponentVertical.framer/framer/config.json
  5. +126 −0 test/studio/SliderComponentVertical.framer/framer/framer.init.js
  6. +1 −0 test/studio/SliderComponentVertical.framer/framer/framer.js
  7. BIN test/studio/SliderComponentVertical.framer/framer/images/background.png
  8. BIN test/studio/SliderComponentVertical.framer/framer/images/cursor.png
  9. BIN test/studio/SliderComponentVertical.framer/framer/images/cursor@2x.png
  10. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-120.png
  11. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-152.png
  12. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-76.png
  13. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-arrow.png
  14. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-arrow@2x.png
  15. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-close.png
  16. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-close@2x.png
  17. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-framer.png
  18. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-framer@2x.png
  19. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-share.png
  20. BIN test/studio/SliderComponentVertical.framer/framer/images/icon-share@2x.png
  21. BIN test/studio/SliderComponentVertical.framer/framer/images/value.png
  22. +196 −0 test/studio/SliderComponentVertical.framer/framer/mirror.css
  23. +44 −0 test/studio/SliderComponentVertical.framer/framer/style.css
  24. +1 −0 test/studio/SliderComponentVertical.framer/framer/version
  25. BIN test/studio/SliderComponentVertical.framer/images/framer-icon.png
  26. BIN test/studio/SliderComponentVertical.framer/images/value.png
  27. +37 −0 test/studio/SliderComponentVertical.framer/index.html
@@ -41,11 +41,15 @@ class exports.SliderComponent extends Layer
@knobSize = options.knobSize or 30
@knob.superLayer = @fill.superLayer = @
@fill.height = @height
# Set fill initially
if @width > @height
@fill.height = @height
else
@fill.width = @width
@fill.borderRadius = @borderRadius
@knob.draggable.enabled = true
@knob.draggable.speedY = 0
@knob.draggable.overdrag = false
@knob.draggable.momentum = true
@knob.draggable.momentumOptions = {friction: 5, tolerance: 0.25}
@@ -59,8 +63,15 @@ class exports.SliderComponent extends Layer
@on("change:size", @_updateFrame)
@on("change:borderRadius", @_setRadius)
# Check for vertical sliders
if @width > @height
@knob.draggable.speedY = 0
@knob.on("change:x", @_updateFill)
else
@knob.draggable.speedX = 0
@knob.on("change:y", @_updateFill)
@knob.on("change:x", @_updateFill)
@knob.on("change:size", @_updateKnob)
@knob.on Events.Move, =>
@@ -75,16 +86,29 @@ class exports.SliderComponent extends Layer
event.stopPropagation()
offsetX = (@min / @canvasScaleX()) - @min
@value = @valueForPoint(Events.touchEvent(event).clientX - @screenScaledFrame().x) / @canvasScaleX() - offsetX
offsetY = (@min / @canvasScaleY()) - @min
if @width > @height
@value = @valueForPoint(Events.touchEvent(event).clientX - @screenScaledFrame().x) / @canvasScaleX() - offsetX
else
@value = @valueForPoint(Events.touchEvent(event).clientY - @screenScaledFrame().y) / @canvasScaleY() - offsetY
@knob.draggable._touchStart(event)
@_updateValue()
_updateFill: =>
@fill.width = @knob.midX
if @width > @height
@fill.width = @knob.midX
else
@fill.height = @knob.midY
_updateKnob: =>
@knob.midX = @fill.width
@knob.centerY()
if @width > @height
@knob.midX = @fill.width
@knob.centerY()
else
@knob.midY = @fill.height
@knob.centerX()
_updateFrame: =>
@knob.draggable.constraints =
@@ -93,8 +117,12 @@ class exports.SliderComponent extends Layer
width: @width + @knob.width
height: @height + @knob.height
@fill.height = @height
@knob.centerY()
if @width > @height
@fill.height = @height
@knob.centerY()
else
@fill.width = @width
@knob.centerX()
_setRadius: =>
radius = @borderRadius
@@ -106,7 +134,6 @@ class exports.SliderComponent extends Layer
@_knobSize = value
@knob.width = @_knobSize
@knob.height = @_knobSize
@knob.centerY()
@_updateFrame()
@define "min",
@@ -118,21 +145,41 @@ class exports.SliderComponent extends Layer
set: (value) -> @_max = value
@define "value",
get: -> @valueForPoint(@knob.midX)
get: ->
if @width > @height
@valueForPoint(@knob.midX)
else
@valueForPoint(@knob.midY)
set: (value) ->
@knob.midX = @pointForValue(value)
@_updateFill()
if @width > @height
@knob.midX = @pointForValue(value)
@_updateFill()
else
@knob.midY = @pointForValue(value)
@_updateFill()
_updateValue: =>
@emit("change:value", @value)
pointForValue: (value) ->
return Utils.modulate(value, [@min, @max], [0, @width], true)
if @width > @height
return Utils.modulate(value, [@min, @max], [0, @width], true)
else
return Utils.modulate(value, [@min, @max], [0, @height], true)
valueForPoint: (value) ->
return Utils.modulate(value, [0, @width], [@min, @max], true)
if @width > @height
return Utils.modulate(value, [0, @width], [@min, @max], true)
else
return Utils.modulate(value, [0, @height], [@min, @max], true)
animateToValue: (value, animationOptions={curve:"spring(300,25,0)"}) ->
animationOptions.properties = {x:@pointForValue(value)}
if @width > @height
animationOptions.properties = {x: @pointForValue(value) - (@knob.width/2)}
@knob.on("change:x", @_updateValue)
else
animationOptions.properties = {y: @pointForValue(value) - (@knob.height/2)}
@knob.on("change:y", @_updateValue)
@knob.animate(animationOptions)
@@ -0,0 +1,44 @@
document.body.style.cursor = "auto"
slider = new SliderComponent
width: 6
height: 200
min: 0, max: 50
value: 25
knobSize: 30
slider.center()
slider.x += 75
val = new Layer
backgroundColor: "transparent"
clip: false
val.style = {
"font": "100 92px/1 Helvetica Neue"
"color": "#333"
"text-align": "center"
}
val.html = slider.value
val.center()
val.x -= 75
slider2 = new SliderComponent
width: 200
height: 6
min: 0, max: 50
value: 25
knobSize: 30
slider2.center()
slider2.y -= 150
slider2.x -= 50
slider.on "change:value", ->
val.html = Math.round this.value
slider2.value = this.value
slider2.on "change:value", ->
val.html = Math.round this.value
slider.value = this.value

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 11139a7

Please sign in to comment.