Fix currentPage bug, add horizontalPageIndex, verticalPageIndex

framer/Components/PageComponent.coffee

@@ -114,6 +114,12 @@ class exports.PageComponent extends ScrollComponent
 		@content.on(Events.AnimationStart, @_onAminationStart)
 		@content.on(Events.AnimationStop, @_onAminationEnd)
 
+	horizontalPageIndex: (page) ->
+		(_.sortBy(@content.subLayers, (l) -> l.x)).indexOf(page)
+
+	verticalPageIndex: (page) ->
+		(_.sortBy(@content.subLayers, (l) -> l.y)).indexOf(page)
+
 	_scrollStart: =>
 		@_currentPage = @currentPage
 
@@ -145,7 +151,7 @@ class exports.PageComponent extends ScrollComponent
 		# See if we meet the minimum velocity to scroll to the next page. If not we snap
 		# to the layer closest to the scroll point.
 		if Math.max(Math.abs(velocity.x), Math.abs(velocity.y)) < @velocityThreshold
-			@scrollToClosestLayer(@originX, @originY, true, @animationOptions)
+			@snapToPage(@closestPage, true, @animationOptions)
 			return 
 
 		# Figure out which direction we are scrolling to and make a sorted list of

test/studio/PageComponentEvents.framer/app.coffee

@@ -0,0 +1,25 @@
+# Test Page Component Horizontal Flicking
+
+page = new PageComponent width:Framer.Device.screen.width, height:Framer.Device.screen.height, backgroundColor:"#fff"
+page.scrollVertical = false
+
+for index in [0..30]
+	pageContent = new Layer
+		width:  page.width
+		height: page.height
+		x: index * (page.width + 4)
+		backgroundColor: Utils.randomColor(.5)
+		superLayer: page.content
+
+	pageContent.html = "#{index}"
+	pageContent.style = {
+		"font-size" : "100px"
+		"font-weight" : "100"
+		"text-align" : "center"
+		"line-height" : "#{Framer.Device.screen.height}px"
+		}
+
+# page.velocityMultiplier = 50
+
+page.on "change:currentPage", (currentPage) ->
+	print "currentPage", currentPage, "index:#{page.horizontalPageIndex(currentPage)}"

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

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

test/studio/PageComponentEvents.framer/framer/mirror.css

@@ -0,0 +1,196 @@
+* {
+	margin: 0;
+	padding: 0;
+	border: none;
+	-webkit-user-select: none;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+html, body, .wrapper {
+	height: 100%;
+}
+body {
+	background: #fff;
+	font: 300 20px "Helvetica Neue", Helvetica, sans-serif;
+	overflow: hidden;
+	cursor: url('images/cursor.png') 39 39, auto;
+	text-align: center;
+	position: relative;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+	color: #333740;
+}
+a {
+	color: gray;
+}
+.framerAlert {
+	font: 12px/1.6em Menlo;
+	margin: 10px;
+	color: gray;
+}
+::-webkit-scrollbar {
+	display: none;
+}
+.wrapper {
+	width:100%;
+	max-width: 240px;
+	margin: 0 auto;
+	padding-top: 38%;
+	position: relative;
+}
+/* Text */
+h1 {
+	font-size: 22px;
+	font-weight: 400;
+	margin-top: 0px;
+	line-height: 1.5;
+	color: black;
+
+	margin-bottom: 8px;
+	margin-top: 16px;
+}
+h2 {
+	font-size: 14px;
+	font-weight: 400;
+	color: #788594;
+}
+hr {
+	border: none;  width: 100%;
+	border-bottom: 1px solid #EFF1F3;
+	display: block; 
+	margin: 40px auto 32px auto;
+}
+p {
+	display: inline-block;
+	line-height: 1.5;
+}
+figure {
+	display: inline-block;
+}
+.share {
+	color: #007AFF;
+	display: inline-block;
+	margin-left: 8px;
+}
+.icon-share {
+	margin-right: 0px;
+	position: relative;
+	top:0.5px;
+}
+.arrow {
+	position: absolute;
+	max-width: 240px;
+	width: 100%;
+	left:50%; margin-left:-120px;
+	bottom: 24%;
+}
+.arrow figure {
+	-webkit-animation: bounce 1.25s ease infinite; 
+	-moz-animation:    bounce 1.25s ease infinite; 
+	-o-animation:      bounce 1.25s ease infinite; 
+	animation:         bounce 1.25s ease infinite; 
+	-webkit-transform-origin: center bottom;
+	-ms-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+/* Arrow animation */
+@-webkit-keyframes bounce {
+  0%, 100% {
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -16px, 0);
+    transform: translate3d(0, -16px, 0);
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -16px, 0);
+    transform: translate3d(0, -16px, 0);
+  }
+}
+/* Icons */
+.icon-close,
+.icon-framer,
+.icon-share,
+.icon-arrow {
+	background-size: cover;
+}
+.icon-close {
+	background-image: url("images/icon-close.png");
+	position: absolute;
+	top:16px;
+	right:16px;
+	cursor: pointer;
+	cursor: hand;
+	width: 18px;
+	height: 18px;
+}
+.icon-framer {
+	background-image: url("images/icon-framer.png");
+	width: 60px;
+	height: 60px;
+}
+.icon-share {
+	background-image: url("images/icon-share.png");
+	width: 11px;
+  	height: 18px; 
+}
+.icon-arrow {
+	background-image: url("images/icon-arrow.png");
+	width: 18px;
+	height: 30px; 
+}
+/* Retina Icons */
+@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	.icon-close {
+		background-image: url("images/icon-close@2x.png");
+	}
+	.icon-framer {
+		background-image: url("images/icon-framer@2x.png");
+	}
+	.icon-share {
+		background-image: url("images/icon-share@2x.png");
+	}
+	.icon-arrow {
+		background-image: url("images/icon-arrow@2x.png");
+	}
+}
+/* Avoid overflow scrolling when viewing in Portrait */
+@media screen and (orientation:portrait) {
+	html, body, .wrapper {
+		overflow: hidden;
+	}
+}
+/* iPad share icon is positioned in the navigation bar */
+@media screen and (min-width: 576px){
+	.arrow {
+		display: none;
+	}
+	.wrapper {
+		padding-bottom: 25%;
+	}
+}
+/* When it landscape, hide arrow and adjust spacing */
+@media screen and (orientation:landscape) {
+	.arrow {
+		display: none;
+	}
+	.wrapper {
+		padding-top: 10%;
+		padding-bottom: 0;
+	}
+}
+/* iPhone 6 Portrait */
+@media screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) {
+	.wrapper {
+		padding-top: 48%;	
+	}
+	.arrow {
+		bottom: 27%;
+	}
+}