Permalink
Browse files

Fix currentPage bug, add horizontalPageIndex, verticalPageIndex

  • Loading branch information...
koenbok committed Apr 2, 2015
1 parent 1febf8d commit 7e4f83bb9ed26b42e0927e647e7adb0da2d701a5
Showing with 459 additions and 1 deletion.
  1. +7 −1 framer/Components/PageComponent.coffee
  2. +25 −0 test/studio/PageComponentEvents.framer/app.coffee
  3. +12 −0 test/studio/PageComponentEvents.framer/framer/coffee-script.js
  4. +10 −0 test/studio/PageComponentEvents.framer/framer/config.json
  5. +126 −0 test/studio/PageComponentEvents.framer/framer/framer.init.js
  6. +1 −0 test/studio/PageComponentEvents.framer/framer/framer.js
  7. BIN test/studio/PageComponentEvents.framer/framer/images/background.png
  8. BIN test/studio/PageComponentEvents.framer/framer/images/cursor.png
  9. BIN test/studio/PageComponentEvents.framer/framer/images/cursor@2x.png
  10. BIN test/studio/PageComponentEvents.framer/framer/images/icon-120.png
  11. BIN test/studio/PageComponentEvents.framer/framer/images/icon-152.png
  12. BIN test/studio/PageComponentEvents.framer/framer/images/icon-76.png
  13. BIN test/studio/PageComponentEvents.framer/framer/images/icon-arrow.png
  14. BIN test/studio/PageComponentEvents.framer/framer/images/icon-arrow@2x.png
  15. BIN test/studio/PageComponentEvents.framer/framer/images/icon-close.png
  16. BIN test/studio/PageComponentEvents.framer/framer/images/icon-close@2x.png
  17. BIN test/studio/PageComponentEvents.framer/framer/images/icon-framer.png
  18. BIN test/studio/PageComponentEvents.framer/framer/images/icon-framer@2x.png
  19. BIN test/studio/PageComponentEvents.framer/framer/images/icon-share.png
  20. BIN test/studio/PageComponentEvents.framer/framer/images/icon-share@2x.png
  21. +196 −0 test/studio/PageComponentEvents.framer/framer/mirror.css
  22. +44 −0 test/studio/PageComponentEvents.framer/framer/style.css
  23. +1 −0 test/studio/PageComponentEvents.framer/framer/version
  24. BIN test/studio/PageComponentEvents.framer/images/framer-icon.png
  25. +37 −0 test/studio/PageComponentEvents.framer/index.html
@@ -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
@@ -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)}"

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.
@@ -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%;
}
}
Oops, something went wrong.

0 comments on commit 7e4f83b

Please sign in to comment.