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 source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!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