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

framer/Components/SliderComponent.coffee

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

test/studio/PageComponentGrid.framer/app.coffee

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

test/studio/SliderComponentMin.framer/app.coffee

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

test/studio/SliderComponentMin.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/SliderComponentMin.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/SliderComponentMin.framer/framer/framer.js

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