Merge branch 'slider-update'

framer/Components/SliderComponent.coffee

@@ -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)

test/studio/SliderComponentVertical.framer/app.coffee

@@ -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 

test/studio/SliderComponentVertical.framer/framer/config.json

@@ -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
+}

test/studio/SliderComponentVertical.framer/framer/framer.init.js

@@ -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()
+
+})()

test/studio/SliderComponentVertical.framer/framer/framer.js

@@ -0,0 +1 @@
+../../../../build/framer.debug.js