Permalink
Browse files

added manifest and working sync code

  • Loading branch information...
1 parent f12299a commit c216115f2515be6d537a6f014fcf0e1a7edc8bef @p-m-p committed Feb 11, 2012
View
BIN css/images/sync.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
47 css/style.css
@@ -0,0 +1,47 @@
+html {
+ font: 1.1em/1em helvetica, arial, sans-serif;
+ color: #333;
+ background-color: #222;
+}
+
+#dir-tree {
+ width: 340px;
+ border: solid 10px #555;
+ padding: 0;
+ margin: 20px auto;
+ background-color: #fefefe;
+ list-style: none;
+}
+
+#dir-tree li {
+ padding: 8px 12px;
+ border-bottom: solid 1px #dedede;
+ border-top: solid 1px white;
+ position: relative;
+}
+
+li a {
+ text-decoration: none;
+ color: #dedede;
+}
+
+.synced a { color: #555 }
+.synced a:hover {
+ color: #2698D1;
+}
+
+.syncing { background-color: #FCF2D7 }
+.syncing a { color: #E6AE15 }
+
+.file-actions {
+ position: absolute;
+ top: 8px;
+ right: 12px;
+}
+
+.sync {
+ width: 16px;
+ height: 16px;
+ background: url(images/sync.png);
+ display: none;
+}
View
10 file-list.php
@@ -0,0 +1,10 @@
+<?php foreach (glob('fs/*.*') as $f) : $name = str_replace('fs/', '', $f); ?>
+
+ <li class="file-entry" data-fe="<?php echo $name; ?>">
+ <a class="open" href="<?php echo $f; ?>"><?php echo $name; ?></a>
+ <span class="file-actions">
+ <a class="sync" href="<?php echo $f; ?>"></a>
+ </span>
+ </li>
+
+<?php endforeach; ?>
View
BIN fs/Mastering.Regular.Expressions.3rd.Edition.Aug.2006.chm
Binary file not shown.
View
BIN fs/The_Joy_of_Clojure.pdf
Binary file not shown.
View
BIN fs/fwunixref.pdf
Binary file not shown.
View
BIN fs/vimbook-OPL.pdf
Binary file not shown.
View
22 index.php
@@ -1,40 +1,32 @@
<!doctype html>
-<html>
+<html manifest="sync.appcache">
<head>
<title>Offline files with HTML5</title>
+ <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ol id="dir-tree">
- <?php foreach (glob('fs/*.*') as $f) : ?>
-
- <li>
- <a class="pull" href="<?php echo $f; ?>">
- <?php echo str_replace('fs/', '', $f); ?>
- </a>
- </li>
-
- <?php endforeach; ?>
+ <?php include 'file-list.php'; ?>
</ol>
</body>
<script src="js/sync.js"></script>
<script>
+
window.requestFileSystem || (
window.requestFileSystem = window.webkitRequestFileSystem
);
- window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(gb) {
+ window.webkitStorageInfo.requestQuota(PERSISTENT, 5*1024*1024, function(gb) {
window.requestFileSystem(
window.PERSISTENT
, gb
, fileSync.init
, fileSync.err
);
- }, function(e) {
- console.log('Error', e);
- });
-
+ }, fileSync.err);
+
</script>
</html>
View
166 js/sync.js
@@ -1,48 +1,190 @@
window.fileSync = (function (w) {
var api = {}
+ , dir
, root;
+ // set up event handlers and file system
api.init = function (fs) {
-
- var dir = document.getElementById('dir-tree');
+
+ dir = document.getElementById('dir-tree');
dir.addEventListener('click', api.fileAction, false);
root = fs.root;
+ // offline detection
+ w.addEventListener("offline", api.toggleOnlineState, false);
+ w.addEventListener("online", api.refreshFiles, false);
+
+ if (w.navigator.onLine) {
+
+ api.refreshFiles();
+ return;
+
+ }
+
+ api.toggleOnlineState();
+ api.syncStatus();
+
};
- api.fileAction = function (ev) {
+ api.refreshFiles = function () {
+
+ var xhr = new XMLHttpRequest;
+
+ xhr.open('get', 'file-list.php', true);
+ xhr.onerror = api.err;
+ xhr.onload = function () {
+
+ dir.innerHTML = this.response;
+ api.syncStatus();
+
+ }
+
+ xhr.send();
+
+ };
- ev.preventDefault();
- var t = ev.target;
- console.log(ev);
- if (t.className.indexOf('pull') !== -1) {
- api.pull(t.href);
+ api.syncStatus = function () {
+
+ var dr = root.createReader();
+ dr.readEntries(api.updateStatus, api.err);
+ api.toggleOnlineState();
+
+ };
+
+
+ api.toggleOnlineState = function () {
+
+ var i = 0
+ , d = 'none'
+ , sy = dir.querySelectorAll(".sync");
+
+ if (w.navigator.onLine) {
+ d = 'inline-block';
}
- ev.preventDefault();
+ for (i = 0; i < sy.length; ++i) {
+ sy.item(i).style.display = d;
+ }
+
+ };
+
+
+ api.updateStatus = function (listing) {
+
+ var i = 0, entry;
+
+ for (; i < listing.length; ++i) {
+
+ entry = listing.item(i);
+ api.flagSynced(entry);
+
+ }
};
- api.pull = function (path) {
+ //event handler for tree node actions
+ api.fileAction = function (ev) {
+
+ var t = ev.target, name;
+
+ if (t.nodeName.toLowerCase() === 'a') {
+
+ name = t.href.match(/[^/]+$/)[0];
+
+ if (t.className.indexOf('sync') !== -1) {
+
+ t.parentNode.parentNode.className = 'file-entry syncing';
+ api.pull(t.href, name);
+
+ }
+
+ else if (t.className.indexOf('open') !== -1) {
+ api.open(name);
+ }
+
+ ev.preventDefault();
+
+ }
+
+ };
+
+
+ // pull file down into local
+ api.pull = function (url, name) {
var xhr = new XMLHttpRequest;
- xhr.open('get', path, true);
- xhr.responseType = 'blob';
+ xhr.open('get', url, true);
+ xhr.responseType = 'arraybuffer';
xhr.onload = function () {
+ var res = this.response;
+
+ root.getFile(name, {create: true}, function (fe) {
+
+ fe.createWriter(function(writer) {
+
+ var bb = new w.WebKitBlobBuilder;
+
+ writer.onwriteend = function () {
+ api.flagSynced(fe)
+ }
+ writer.onerror = api.err;
+
+ bb.append(res);
+ writer.write(bb.getBlob());
+
+ });
+
+ }, api.err);
}
xhr.send();
};
+
+ api.open = function (name) {
+
+ root.getFile(name, {}, function (fe) {
+
+ w.location = fe.toURL();
+
+ }, api.err);
+
+ };
+
+
+ // find the node and mark it as synced
+ api.flagSynced = function (entry) {
+
+ var nl = dir.querySelectorAll('.file-entry')
+ , i = 0
+ , node;
+
+ for (; i < nl.length; ++i) {
+
+ node = nl.item(i);
+
+ if (node.dataset.fe === entry.name) {
+
+ node.className = 'file-entry synced';
+ break;
+
+ }
+
+ }
+
+ };
+
+
+ // default error handler - that doesn't do anything useful
api.err = function (ev) {
console.log(ev);
};
View
11 sync.appcache
@@ -0,0 +1,11 @@
+CACHE MANIFEST
+
+NETWORK:
+file-list.php
+/fs
+
+CACHE:
+index.php
+css/style.css
+css/images/sync.png
+js/sync.js

0 comments on commit c216115

Please sign in to comment.