Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
1,009 additions
and 19 deletions.
- +18 −14 framer/Components/SliderComponent.coffee
- +13 −5 test/studio/PageComponentGrid.framer/app.coffee
- +62 −0 test/studio/SliderComponentMin.framer/app.coffee
- +12 −0 test/studio/SliderComponentMin.framer/framer/coffee-script.js
- +10 −0 test/studio/SliderComponentMin.framer/framer/config.json
- +126 −0 test/studio/SliderComponentMin.framer/framer/framer.init.js
- +1 −0 test/studio/SliderComponentMin.framer/framer/framer.js
- BIN test/studio/SliderComponentMin.framer/framer/images/background.png
- BIN test/studio/SliderComponentMin.framer/framer/images/cursor.png
- BIN test/studio/SliderComponentMin.framer/framer/images/cursor@2x.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-120.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-152.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-76.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-arrow.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-arrow@2x.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-close.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-close@2x.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-framer.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-framer@2x.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-share.png
- BIN test/studio/SliderComponentMin.framer/framer/images/icon-share@2x.png
- BIN test/studio/SliderComponentMin.framer/framer/images/value.png
- +196 −0 test/studio/SliderComponentMin.framer/framer/mirror.css
- +44 −0 test/studio/SliderComponentMin.framer/framer/style.css
- +1 −0 test/studio/SliderComponentMin.framer/framer/version
- BIN test/studio/SliderComponentMin.framer/images/framer-icon.png
- BIN test/studio/SliderComponentMin.framer/images/value.png
- +37 −0 test/studio/SliderComponentMin.framer/index.html
- +62 −0 test/studio/SliderComponentValue.framer/app.coffee
- +12 −0 test/studio/SliderComponentValue.framer/framer/coffee-script.js
- +10 −0 test/studio/SliderComponentValue.framer/framer/config.json
- +126 −0 test/studio/SliderComponentValue.framer/framer/framer.init.js
- +1 −0 test/studio/SliderComponentValue.framer/framer/framer.js
- BIN test/studio/SliderComponentValue.framer/framer/images/background.png
- BIN test/studio/SliderComponentValue.framer/framer/images/cursor.png
- BIN test/studio/SliderComponentValue.framer/framer/images/cursor@2x.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-120.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-152.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-76.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-arrow.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-arrow@2x.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-close.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-close@2x.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-framer.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-framer@2x.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-share.png
- BIN test/studio/SliderComponentValue.framer/framer/images/icon-share@2x.png
- BIN test/studio/SliderComponentValue.framer/framer/images/value.png
- +196 −0 test/studio/SliderComponentValue.framer/framer/mirror.css
- +44 −0 test/studio/SliderComponentValue.framer/framer/style.css
- +1 −0 test/studio/SliderComponentValue.framer/framer/version
- BIN test/studio/SliderComponentValue.framer/images/framer-icon.png
- BIN test/studio/SliderComponentValue.framer/images/value.png
- +37 −0 test/studio/SliderComponentValue.framer/index.html
@@ -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" |
@@ -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() | ||
|
||
})() |
@@ -0,0 +1 @@ | ||
../../../../build/framer.debug.js |
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.