mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
65 lines
1.6 KiB
HTML
65 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Offline.js Demo</title>
|
|
<style>
|
|
#state
|
|
{
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 75px;
|
|
padding: 8px 10px;
|
|
background-color: blue;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: large;
|
|
}
|
|
#state.up { background-color: green; }
|
|
#state.down { background-color: red; }
|
|
#msg {
|
|
margin: 100px 30%;
|
|
}
|
|
</style>
|
|
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
|
|
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="state">? unknown</div>
|
|
|
|
<div id="msg">
|
|
Simple demonstrator of the offline.js library.
|
|
<ul>
|
|
<li>Unplug the network wire (or disable wifi adapter) and the state indicator will change.</li>
|
|
<li>Plug the wire again and the indicator will report network availability again</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function updateState()
|
|
{
|
|
console.log('updateState', Offline.state);
|
|
var icon = Offline.state === 'up' ? "fa-link" : "fa-chain-broken";
|
|
$('#state')
|
|
.removeClass('up down')
|
|
.addClass(Offline.state)
|
|
.html('<i class="fa '+icon+'"></i> ' + Offline.state);
|
|
}
|
|
|
|
$(function()
|
|
{
|
|
Offline.options = { checkOnLoad: true, reconnect: true, requests: false };
|
|
Offline.check();
|
|
updateState();
|
|
|
|
Offline.on('up down', updateState );
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |