Commit 716266ed authored by Tobias Bernard's avatar Tobias Bernard

Mobile shell: add keyboard show/hide prototype and video

parent 4422a88a
# How to run this prototype
1. Set up Atom and install the packages
- coffee-compile
- atom-live-server
2. Start coffee-compile and atom-live-server
3. The prototype opens in the browser
4. Edit app.coffee
5. On each save, the prototype auto-reloads in the browser
## Base layer and background
home = new Layer
width: 360
height: 720
image: "images/background.png"
home.center()
## App content
app = new Layer
width: 360
height: 654
y: 720 - 40 - 654
image: "images/app.png"
animationOptions:
time: 0.12
app.parent = home
app.states.up =
y: 720 - 40 - 654 - 212
animationOptions:
time: 0.2
## Keyboard
keyboard = new Layer
width: 360
height: 212
y: 720 - 40
image: "images/keyboard.png"
animationOptions:
time: 0.12
keyboard.parent = home
keyboard.states.up =
y: 720 - 40 - 212
animationOptions:
time: 0.2
app.on "tap", ->
app.animate("up")
keyboard.animate("up")
emojiBtn.animate("visible")
hidekeyboardBtn.animate("visible")
## System bottom bar
bottombar = new Layer
width: 360
height: 40
y: 720 - 40
image: "images/bottombar.png"
bottombar.parent = home
emojiBtn = new Layer
width: 50
height: 40
y: 720 - 40
image: "images/emoji-button.png"
scale: 0
animationOptions:
time: 0.15
delay: 0.1
emojiBtn.parent = home
emojiBtn.states.visible =
scale: 1
hidekeyboardBtn = new Layer
width: 50
height: 40
y: 720 - 40
x: 360 - 50
image: "images/hidekeyboard-button.png"
scale: 0
animationOptions:
time: 0.15
delay: 0.1
hidekeyboardBtn.parent = home
hidekeyboardBtn.states.visible =
scale: 1
hidekeyboardBtn.on "tap", ->
app.animate("default")
keyboard.animate("default")
emojiBtn.animate("default")
hidekeyboardBtn.animate("default")
## App headerbar
headerbar = new Layer
width: 360
height: 48
y: 26
image: "images/headerbar.png"
headerbar.parent = home
## System top bar
topbar = new Layer
width: 360
height: 26
image: "images/topbar.png"
topbar.parent = home
var app, bottombar, emojiBtn, headerbar, hidekeyboardBtn, home, keyboard, topbar;
home = new Layer({
width: 360,
height: 720,
image: "images/background.png"
});
home.center();
app = new Layer({
width: 360,
height: 654,
y: 720 - 40 - 654,
image: "images/app.png",
animationOptions: {
time: 0.12
}
});
app.parent = home;
app.states.up = {
y: 720 - 40 - 654 - 212,
animationOptions: {
time: 0.2
}
};
keyboard = new Layer({
width: 360,
height: 212,
y: 720 - 40,
image: "images/keyboard.png",
animationOptions: {
time: 0.12
}
});
keyboard.parent = home;
keyboard.states.up = {
y: 720 - 40 - 212,
animationOptions: {
time: 0.2
}
};
app.on("tap", function() {
app.animate("up");
keyboard.animate("up");
emojiBtn.animate("visible");
return hidekeyboardBtn.animate("visible");
});
bottombar = new Layer({
width: 360,
height: 40,
y: 720 - 40,
image: "images/bottombar.png"
});
bottombar.parent = home;
emojiBtn = new Layer({
width: 50,
height: 40,
y: 720 - 40,
image: "images/emoji-button.png",
scale: 0,
animationOptions: {
time: 0.15,
delay: 0.1
}
});
emojiBtn.parent = home;
emojiBtn.states.visible = {
scale: 1
};
hidekeyboardBtn = new Layer({
width: 50,
height: 40,
y: 720 - 40,
x: 360 - 50,
image: "images/hidekeyboard-button.png",
scale: 0,
animationOptions: {
time: 0.15,
delay: 0.1
}
});
hidekeyboardBtn.parent = home;
hidekeyboardBtn.states.visible = {
scale: 1
};
hidekeyboardBtn.on("tap", function() {
app.animate("default");
keyboard.animate("default");
emojiBtn.animate("default");
return hidekeyboardBtn.animate("default");
});
headerbar = new Layer({
width: 360,
height: 48,
y: 26,
image: "images/headerbar.png"
});
headerbar.parent = home;
topbar = new Layer({
width: 360,
height: 26,
image: "images/topbar.png"
});
topbar.parent = home;
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!-- <meta name="viewport" content="width=640,initial-scale=0.5,user-scalable=no"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="icon/apple-touch-icon-precomposed.png">
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
border:none;
-webkit-user-select:none;
}
body {
/* background: black url('images/background.png')
repeat scroll top left; */
font: 28px/1em "Helvetica";
color: #FFF;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
/* body > * {
width: 432px !important;
height: 768px !important;
} */
a {
color: #bfbfbf;
}
</style>
</head>
<body>
<script src="framer/framer.js"></script>
<script src="app.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment