sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
269 lines (233 loc) • 8.59 kB
HTML
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>
goog.ui.OfflineInstallDialog, goog.ui.OfflineStatusCard, and
goog.ui.OfflineStatusComponent
</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.gears.StatusType');
goog.require('goog.ui.OfflineInstallDialog');
goog.require('goog.ui.OfflineInstallDialogScreen');
goog.require('goog.ui.OfflineStatusCard');
goog.require('goog.ui.OfflineStatusComponent');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/offline.css">
<style>
/* Misc. styles.*/
fieldset {
width: 80%;
}
label, input {
vertical-align: middle;
}
.log {
color: #369;
font-size: 95%;
}
.perf {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
border: 0;
padding: 10px;
text-align: right;
color: #888;
font-size: 90%;
font-style: italic;
}
.link {
cursor: pointer;
text-decoration: underline;
color: #0000cc;
}
#relative-cards .goog-offlinestatuscard {
position: relative;
}
</style>
</head>
<body>
<h1>goog.ui.OfflineInstallDialog</h1>
<fieldset>
<legend>
These dialogs show the install flow for the user:
</legend>
<div id="d1" class="link">Click for install flow</div>
<div id="d2" class="link">Click for upgrade flow</div>
<div id="d3" class="link">Click for enable flow</div>
<div id="d4" class="link">Click for custom screen</div>
</fieldset>
<h1>goog.ui.OfflineStatusCard</h1>
<fieldset>
<legend>
These cards show the various configurations:
</legend>
<div id="relative-cards">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
<div id="c6"></div>
<div id="c7"></div>
</div>
</fieldset>
<h1>goog.ui.OfflineStatusComponent</h1>
<fieldset>
<legend>
These components show the various configurations (hover for tooltip, click for details):
</legend>
<div><strong>Offline:</strong> <span id="comp3"></span></div>
<div><strong>Online:</strong> <span id="comp4"></span></div>
<div><strong>Syncing:</strong> <span id="comp5"></span></div>
<div><strong>Paused:</strong> <span id="comp6"></span></div>
<div><strong>Error:</strong> <span id="comp7"></span></div>
<div><strong>Not Installed:</strong> <span id="comp1"></span></div>
<div><strong>Installed:</strong> <span id="comp2"></span></div>
</fieldset>
<p id="log" class="log"></p>
<p id="perf" class="perf"></p>
<script>
var timer = goog.now();
// Message constants.
var MSG_GEARS_ENABLE_DESCRIPTION = goog.getMsg('Use the ' +
'<strong>Gears</strong> browser plug-in to <strong>view all ' +
'your documents</strong> even when you don\'t have a connection to ' +
'the internet.');
var MSG_GEARS_INSTALL_DESCRIPTION = goog.getMsg('Install the ' +
'<strong>Gears</strong> browser plug-in to <strong>view all ' +
'your documents</strong> even when you don\'t have a connection to ' +
'the internet.');
var MSG_GEARS_DIALOG_TITLE = goog.getMsg(
'Access Google Docs even when you\'re offline!');
var APP_URL = 'docs.google.com';
var GEARS_DOWNLOAD_PAGE_URL = 'http://gears.google.com/';
function createDialog() {
var dialog = new goog.ui.OfflineInstallDialog();
dialog.setTitle(MSG_GEARS_DIALOG_TITLE);
dialog.setAppUrl(APP_URL);
dialog.setGearsDownloadPageUrl(GEARS_DOWNLOAD_PAGE_URL);
return dialog;
}
// Setup the dialogs.
var d1 = createDialog();
d1.getScreen(goog.ui.OfflineInstallDialog.ScreenType.INSTALL)
.setInstallDescription(MSG_GEARS_INSTALL_DESCRIPTION);
d1.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.INSTALL);
d1.render();
goog.events.listen(goog.dom.getElement('d1'), goog.events.EventType.CLICK,
function(e) {
d1.setVisible(true);
});
var d2 = createDialog();
d2.getScreen(goog.ui.OfflineInstallDialog.ScreenType.UPGRADE)
.setUpgradeDescription('Upgrade message goes here');
d2.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.UPGRADE);
d2.render();
goog.events.listen(goog.dom.getElement('d2'), goog.events.EventType.CLICK,
function(e) {
d2.setVisible(true);
});
var d3 = createDialog();
d3.getScreen(goog.ui.OfflineInstallDialog.ScreenType.ENABLE)
.setContent(MSG_GEARS_ENABLE_DESCRIPTION);
d3.setCurrentScreenType(goog.ui.OfflineInstallDialog.ScreenType.ENABLE);
d3.render();
goog.events.listen(goog.dom.getElement('d3'), goog.events.EventType.CLICK,
function(e) {
d3.setVisible(true);
});
var d4 = createDialog();
var customScreen = new goog.ui.OfflineInstallDialogScreen(d4, 'custom');
customScreen.setContent('Custom content');
customScreen.setTitle('Custom title');
var bs = new goog.ui.Dialog.ButtonSet();
bs.set(goog.ui.Dialog.DefaultButtonKeys.OK, 'Okidoki', true);
customScreen.setButtonSet(bs);
customScreen.handleSelect = function(e) {
alert(e.key);
};
d4.registerScreen(customScreen);
d4.setCurrentScreenType('custom');
d4.render();
goog.events.listen(goog.dom.getElement('d4'), goog.events.EventType.CLICK,
function(e) {
d4.setVisible(true);
});
// Setup the cards.
var c1 = new goog.ui.OfflineStatusCard();
c1.setStatus(goog.gears.StatusType.NOT_INSTALLED);
c1.render(goog.dom.getElement('c1'));
var c2 = new goog.ui.OfflineStatusCard();
c2.setStatus(goog.gears.StatusType.INSTALLED);
c2.render(goog.dom.getElement('c2'));
var c3 = new goog.ui.OfflineStatusCard();
c3.setStatus(goog.gears.StatusType.OFFLINE);
c3.render(goog.dom.getElement('c3'));
var c4 = new goog.ui.OfflineStatusCard();
c4.setStatus(goog.gears.StatusType.ONLINE);
c4.render(goog.dom.getElement('c4'));
var c5 = new goog.ui.OfflineStatusCard();
c5.setStatus(goog.gears.StatusType.SYNCING);;
c5.render(goog.dom.getElement('c5'));
c5.getProgressBar().setValue(84)
var c6 = new goog.ui.OfflineStatusCard();
c6.setStatus(goog.gears.StatusType.PAUSED);
c6.render(goog.dom.getElement('c6'));
var c7 = new goog.ui.OfflineStatusCard();
c7.setStatus(goog.gears.StatusType.ERROR);
c7.render(goog.dom.getElement('c7'));
// Setup the components.
var comp1 = new goog.ui.OfflineStatusComponent();
comp1.setInstallDialog(createDialog());
comp1.setStatusCard(new goog.ui.OfflineStatusCard());
comp1.setStatus(goog.gears.StatusType.NOT_INSTALLED);
comp1.render(goog.dom.getElement('comp1'));
var comp2 = new goog.ui.OfflineStatusComponent();
comp2.setInstallDialog(createDialog());
comp2.setStatusCard(new goog.ui.OfflineStatusCard());
comp2.setStatus(goog.gears.StatusType.INSTALLED);
comp2.render(goog.dom.getElement('comp2'));
var comp3 = new goog.ui.OfflineStatusComponent();
comp3.setInstallDialog(createDialog());
comp3.setStatusCard(new goog.ui.OfflineStatusCard());
comp3.setStatus(goog.gears.StatusType.OFFLINE);
comp3.render(goog.dom.getElement('comp3'));
var comp4 = new goog.ui.OfflineStatusComponent();
comp4.setInstallDialog(createDialog());
comp4.setStatusCard(new goog.ui.OfflineStatusCard());
comp4.setStatus(goog.gears.StatusType.ONLINE);
comp4.render(goog.dom.getElement('comp4'));
var comp5 = new goog.ui.OfflineStatusComponent();
comp5.setInstallDialog(createDialog());
comp5.setStatusCard(new goog.ui.OfflineStatusCard());
comp5.setStatus(goog.gears.StatusType.SYNCING);
comp5.render(goog.dom.getElement('comp5'));
var comp6 = new goog.ui.OfflineStatusComponent();
comp6.setInstallDialog(createDialog());
comp6.setStatusCard(new goog.ui.OfflineStatusCard());
comp6.setStatus(goog.gears.StatusType.PAUSED);
comp6.render(goog.dom.getElement('comp6'));
var comp7 = new goog.ui.OfflineStatusComponent();
comp7.setInstallDialog(createDialog());
comp7.setStatusCard(new goog.ui.OfflineStatusCard());
comp7.setStatus(goog.gears.StatusType.ERROR);
comp7.render(goog.dom.getElement('comp7'));
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
</html>