Add helpers for cache checking and display
This commit is contained in:
Lance Stout
parent
e98db0503e
commit
60abb1ec60
|
|
@ -14,6 +14,7 @@ var Storage = require('./storage');
|
|||
var xmppEventHandlers = require('./helpers/xmppEventHandlers');
|
||||
var Notify = require('notify.js');
|
||||
var Desktop = require('./helpers/desktop');
|
||||
var AppCache = require('./helpers/cache');
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -38,6 +39,7 @@ module.exports = {
|
|||
function (cb) {
|
||||
app.notifications = new Notify();
|
||||
app.desktop = new Desktop();
|
||||
app.cache = new AppCache();
|
||||
app.storage = new Storage();
|
||||
app.storage.open(cb);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
var WildEmitter = require('wildemitter');
|
||||
var STATES = [
|
||||
'uncached',
|
||||
'idle',
|
||||
'checking',
|
||||
'downloading',
|
||||
'updateReady',
|
||||
'obsolete'
|
||||
];
|
||||
|
||||
function AppCache() {
|
||||
WildEmitter.call(this);
|
||||
|
||||
var self = this;
|
||||
this.cache = window.applicationCache;
|
||||
this.state = STATES[this.cache.status];
|
||||
this.emit('change', this.state);
|
||||
|
||||
function mapevent(name, altName) {
|
||||
self.cache.addEventListener(name, function (e) {
|
||||
var newState = STATES[self.cache.status];
|
||||
if (newState !== self.state) {
|
||||
self.state = newState;
|
||||
self.emit('change', newState);
|
||||
}
|
||||
self.emit(altName || name, e);
|
||||
}, false);
|
||||
}
|
||||
mapevent('cached');
|
||||
mapevent('checking');
|
||||
mapevent('downloading');
|
||||
mapevent('error');
|
||||
mapevent('noupdate', 'noUpdate');
|
||||
mapevent('obsolete');
|
||||
mapevent('progress');
|
||||
mapevent('updateready', 'updateReady');
|
||||
}
|
||||
|
||||
AppCache.prototype = Object.create(WildEmitter.prototype, {
|
||||
constructor: {
|
||||
value: AppCache
|
||||
}
|
||||
});
|
||||
|
||||
AppCache.prototype.update = function () {
|
||||
this.cache.update();
|
||||
};
|
||||
|
||||
|
||||
module.exports = AppCache;
|
||||
|
|
@ -23,6 +23,11 @@ module.exports = HumanModel.define({
|
|||
self.markInactive();
|
||||
});
|
||||
|
||||
self.cacheStatus = app.cache.state;
|
||||
app.cache.on('change', function (state) {
|
||||
self.cacheStatus = state;
|
||||
});
|
||||
|
||||
this.markActive();
|
||||
},
|
||||
session: {
|
||||
|
|
@ -35,7 +40,8 @@ module.exports = HumanModel.define({
|
|||
allowAlerts: ['bool', false, false],
|
||||
badge: 'string',
|
||||
pageTitle: 'string',
|
||||
hasActiveCall: ['boolean', false, false]
|
||||
hasActiveCall: ['boolean', false, false],
|
||||
cacheStatus: 'string'
|
||||
},
|
||||
derived: {
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ exports.pages = {};
|
|||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="wrapper"><aside id="menu"><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><header id="me"><h1><img class="avatar"/><span class="name"></span><span contenteditable="true" class="status"></span></h1><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header></div><main id="pages"></main></body>');
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><header id="me"><h1><img class="avatar"/><span class="name"></span><span contenteditable="true" class="status"></span></h1><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header></div><main id="pages"></main></body>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
body
|
||||
#connectionOverlay
|
||||
aside#connectionStatus.box
|
||||
p
|
||||
p
|
||||
| You're currently
|
||||
strong disconnected
|
||||
button.primary.reconnect Reconnect
|
||||
#updateBar
|
||||
p Update available!
|
||||
button.primary.upgrade Upgrade
|
||||
#wrapper
|
||||
aside#menu
|
||||
section#roster
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ module.exports = HumanView.extend({
|
|||
},
|
||||
classBindings: {
|
||||
connected: '#connectionOverlay',
|
||||
cacheStatus: '#updateBar',
|
||||
hasActiveCall: '#wrapper'
|
||||
},
|
||||
render: function () {
|
||||
|
|
|
|||
|
|
@ -551,6 +551,19 @@ button.secondary:hover:not(:disabled) {
|
|||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
#updateBar {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 900;
|
||||
transition: all 0.25s linear 0;
|
||||
border-bottom: 1px solid #222;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
@import 'components/buttons'
|
||||
|
||||
@import 'pages/connectionStatus'
|
||||
@import 'pages/updateBar'
|
||||
@import 'pages/roster'
|
||||
@import 'pages/chat'
|
||||
@import 'pages/settings'
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
&.connected
|
||||
height: 0px
|
||||
|
||||
|
||||
#connectionStatus
|
||||
top: -200px
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
@import '../_variables'
|
||||
@import '../_mixins'
|
||||
|
||||
#updateBar
|
||||
position: fixed
|
||||
top: 0px
|
||||
left: 0px
|
||||
width: 100%
|
||||
height: 30px
|
||||
background: rgba(0, 0, 0, 0.8)
|
||||
z-index: 900
|
||||
transition: all .25s linear 0
|
||||
border-bottom: 1px solid #222
|
||||
text-align: center
|
||||
display: none
|
||||
|
|
@ -55,7 +55,7 @@ clientApp.on('ready', function () {
|
|||
|
||||
var manifestTemplate = fs.readFileSync(__dirname + '/clientapp/templates/misc/manifest.cache', 'utf-8');
|
||||
var cacheManifest = manifestTemplate
|
||||
.replace('#{version}', pkginfo.version)
|
||||
.replace('#{version}', pkginfo.version + config.isDev ? ' ' + Date.now() : '')
|
||||
.replace('#{jsFileName}', clientApp.jsFileName())
|
||||
.replace('#{cssFileName}', clientApp.cssFileName());
|
||||
console.log('Cache manifest generated');
|
||||
|
|
|
|||
Loading…
Reference in New Issue