Skip to content


Subversion checkout URL

You can clone with
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

157 lines (117 sloc) 4.773 kB
<!DOCTYPE html>
<title>AppCloud Emulator</title>
<link rel="stylesheet" href="emu.css" />
<link type="text/css" href="smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
function frameChanged() {
var contentWindow = bc = $("#phone iframe").get(0).contentWindow;
bc = contentWindow.bc;
$$ = contentWindow.$; // save off the other jquery so we can use it
function changeView(uri) {
var frame = document.getElementsByTagName("iframe")[0];
if (uri) {
frame.setAttribute("src", "../" + uri);
else {
$(function() {
var triggerSwipe, updateDisplay;
$.get("../manifest.json", function(data) {
var ul = $("#views ul");
var views = data.views;
for (var i in views) {
var uri = views[i].uri;
var label = views[i].navigationTitle;
var icon = views[i].navigationIcon;
ul.append('<li><a href="#" onclick="changeView(\'' + uri + '\'); return false;">' + (icon ? '<img src="../'+icon+'" title="'+label+'" />' : '<span>'+label+'</span>') + '</a></li>');
$("#selectView").button({ icons: {secondary:"ui-icon-triangle-1-s"} });
// event handlers
$("#phone .actions .back").click(function() {
// triggers display updates (such as orientation after display changes)
updateDisplay = function() {
// if you don't change the orientation you have to trigger the event yourself
// we'll force the orientation to be changed
if (typeof bc != "undefined") bc.context.viewOrientation = null;
$( $("#phone iframe").get(0).contentWindow ).trigger("resize");
$("#orientation input").change(function() {
var portrait = $("#portrait").get(0).checked;
$("#phone").removeClass(portrait ? "landscape" : "portrait")
.addClass(portrait ? "portrait" : "landscape");
$("#device input").change(function() {
var iphone = $("#iphone").get(0).checked;
$("#phone").removeClass(iphone ? "android" : "iphone")
.addClass(iphone ? "iphone" : "android");
// defaults
$("#portrait").get(0).checked = true;
$("#iphone").get(0).checked = true;
triggerSwipe = function(direction) {
var current = bc.ui.currentPage;
if (!current) return;
$$(current).trigger("swipe", direction);
$("#swipeLeft").click(function() { triggerSwipe("swipeLeft"); });
$("#swipeRight").click(function() { triggerSwipe("swipeRight"); });
<div id="content">
<div id="controls">
<div id="orientation" class="radioset">
<input type="radio" id="portrait" name="orientation" /><label for="portrait"><img src="images/iphone-portait.png" /></label>
<input type="radio" id="landscape" name="orientation" /><label for="landscape"><img src="images/iphone-portait.png" class="rotate-90-left" /></label>
<div id="device" class="radioset">
<input type="radio" id="iphone" name="device" /><label for="iphone"><img src="images/iphone-icon.png" /></label>
<input type="radio" id="android" name="device" /><label for="android"><img src="images/android-icon.png" /></label>
<div id="miniControls">
<div id="views" style="display: none;">
<button id="selectView">Views</button>
<div id="swipes">
<button id="swipeLeft" class="button ui-icon ui-icon-arrowreturnthick-1-w" title="Swipe Left" />
<button id="swipeRight" class="button ui-icon ui-icon-arrowreturnthick-1-e" title="Swipe Right" />
<div id="phoneWrapper">
<div id="phone">
<iframe src="" frameborder="0" onload="frameChanged();"></iframe>
<div class="actions">
<a class="back" onclick="return false;" href="#"><span></span></a>
<div id="attribution">
&copy; 2011 Created by <a href="" target="_blank"><span>Cantina Consulting</span> <img src="images/cantina-logo.png" /></a>
Jump to Line
Something went wrong with that request. Please try again.