entrouvert
/
momo
Archived
17
0
Fork 0
Code Issues Pull Requests Releases Activity

Description Ref #8116 + Offline mode Ref #8052 + Minor fixes

This commit is contained in:
Ghislain Loaec 2015-10-02 09:58:24 +02:00
parent 9d92d71484
commit c22af363f3
4 changed files with 157 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scripts/momo.coffee
View File

@ -7,9 +7,10 @@ class Momo
contructor: (args...) ->
@bindEvents()
bindEvents: ->
# Navigation Handler
window.addEventListener "hashchange", @onHashChange, false
xindow.addEventListener "hashchange", @onHashChange, false
document.addEventListener "deviceready", @onDeviceReady, false
init: ->

16
www/css/index.css
View File

@ -280,7 +280,7 @@ img {
display: table;
}
.navbar-header {
min-width: 200px;
/*min-width: 300px;*/
}
.parent-navbar-brand {
display: table;
@ -338,6 +338,9 @@ h1 {
overflow:visible;
padding:0px;
}
h5 {
font-size: 16px;
}
@keyframes fade {
from { opacity: 1.0; }
@ -377,15 +380,26 @@ pre .boolean { color: #7587A6; }
pre .null { color: #828282; }
pre .key { color: #CDA869; }
.top-0 {
margin-top: 0px;
}
.top-10 {
margin-top: 10px;
}
.top-20 {
margin-top: 20px;
}
.bottom-0 {
margin-bottom: 0px;
}
.bottom-10 {
margin-bottom: 10px;
}
.bottom-20 {
margin-bottom: 20px;
}
@media (min-width: 768px) {
.navbar .navbar-btn {
padding-left: 0;
}
}

68
www/index.html
View File

@ -84,15 +84,15 @@
</script>
<script type="text/x-tmpl" id="momo-header-tmpl">
<div class="navbar-btn pull-left">
{% if(o.id && o.id != 'home'){ %}
<a href="#" class="btn btn-default pull-left momo-back-btn" onclick="window.history.back(); return false;">
<span class="sr-only"> History back </span>
<i class="fa fa-chevron-left"></i>
</a>
{% } %}
</div>
<div class="parent-navbar-brand">
<div class="navbar-btn">
{% if(o.id && o.id != 'home'){ %}
<a href="#" class="btn btn-default pull-left momo-back-btn" onclick="window.history.back(); return false;">
<span class="sr-only"> History back </span>
<i class="fa fa-chevron-left"></i>
</a>
{% } %}
</div>
<span class="navbar-brand" href="#home">
{% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
{%# (o.titleSeparator || o.meta.titleSeparator) %}
@ -163,7 +163,7 @@
</div>
</div>
</form>
<ul id="momo-menu" class="nav navbar-nav navbar-left"></ul>
<ul id="momo-menu" class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
@ -174,7 +174,7 @@
</script>
<script type="text/x-tmpl" id="momo-list-item-tmpl">
<a href="#{%= o.id %}" class="{% if(!o.header){ %} list-group-item {% } %} clearfix">
<a href="#{%= o.id %}" class="{% if(!o.header){ %} list-group-item {% } %} clearfix {%= o.external ? 'offline-disable' : '' %}">
{% if(o.header){ %}
<span class="pull-left">
{% if(o.icon){ %}
@ -192,16 +192,28 @@
<i class="fa fa-angle-right pull-right visible-xs-inline"></i>
{% } %}
{% } else { %}
<span class="pull-left">
{% if(o.icon){ %}
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
{% if(o.external) { %}
<i class="fa fa-external-link pull-right"></i>
{% } else { %}
<i class="fa fa-angle-right pull-right"></i>
{% } %}
{%# o.title %}
</span>
{% if(o.external) { %}
<i class="fa fa-external-link pull-right"></i>
{% if(o.description){ %}
<h5 class="list-group-item-heading">
{% if(o.icon){ %}
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
{% } %}
{%# o.title %}
</h5>
<p class="list-group-item-text">
{%# o.description %}
</p>
{% } else { %}
<i class="fa fa-angle-right pull-right"></i>
<h5 class="pull-left bottom-0 top-0">
{% if(o.icon){ %}
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
{% } %}
{%# o.title %}
</h5>
{% } %}
{% } %}
</a>
@ -209,7 +221,7 @@
<script type="text/x-tmpl" id="momo-icon-item-tmpl">
<div class="col-xs-{%= o.colxs %} col-sm-{%= o.colsm %} col-md-{%= o.colmd %} col-lg-{%= o.collg %}">
<a href="#{%= o.id %}" class="btn btn-block text-center {%= o.className || 'btn-default' %}">
<a href="#{%= o.id %}" class="btn btn-block text-center {%= o.className || 'btn-default' %} {%= o.external ? 'offline-disable' : '' %}">
{% if(o.external){ %}
<i class="fa fa-external-link top-right"></i>
{% } %}
@ -249,13 +261,22 @@
<div class="clearfix"></div>
</script>
<!-- Offline template -->
<script type="text/x-tmpl" id="momo-offline-tmpl">
<div class="alert alert-warning">
<i class="fa fa-warning"></i>
Application hors-ligne
</div>
</script>
<!-- Page template -->
<script type="text/x-tmpl" id="momo-page-tmpl">
{% var displayFooter = true; %}
<div class="{% if(o.url){ %}{% } else { %}momo-page-wrapper{% } %} clearfix">
{% if(o.url && !o.url.isImage()){ %}
<div class="momo-frame-spinner">
<div class="momo-frame-spinner offline-hidden">
<div class="momo-loading text-muted">
<i class="fa fa-spinner fa-pulse fa-3x"></i>
<p class="momo-loading-text">
@ -266,12 +287,18 @@
{% } %}
{% if(!(o.url && o.url.isImage())){ %}
<div class="offline-visible">
{%# tmpl('momo-offline-tmpl', o) %}
</div>
<div class="momo-flash-messages"></div>
<div class="container-fluid">
<section class="momo-page-content">{%# o.content %}</section>
</div>
{% } else { %}
<div class="momo-image-viewer" style="background-image: url('{%# o.url %}');">
<div class="offline-visible hidden">
{%# tmpl('momo-offline-tmpl', o) %}
</div>
<div class="momo-flash-messages"></div>
<div class="container-fluid momo-page-content-parent">
<section class="momo-page-content">{%# o.content %}</section>
@ -288,7 +315,6 @@
{% if(o.url && !o.url.isImage()){ %}
<iframe src="{%= o.url %}" class="momo-iframe"></iframe>
<!--div class="momo-frame-overlay"></div-->
{% } %}
{% if(o.pages){ %}

95
www/js/index.js
View File

@ -28,6 +28,7 @@ var ANIMATION_IN_CLASS = 'pt-page-moveFromRight';
var ANIMATION_BACK_OUT_CLASS = 'pt-page-moveToRightEasing pt-page-ontop';
var ANIMATION_BACK_IN_CLASS = 'pt-page-moveFromLeft';
var ON_PULL = 'checkForUpdate'; // || 'update'
var CHECK_FOR_CONNECTION_INTERVAL = 3000;
// Application
var app = {
@ -70,6 +71,7 @@ var app = {
},
// Misc Data
online : false,
current : 0,
isAnimating : false,
endCurrPage : false,
@ -160,6 +162,9 @@ var app = {
// Check for new updates
//app.checkForUpdate(app.start, app.start);
// Regulary check for connection
setInterval( app.checkConnection, CHECK_FOR_CONNECTION_INTERVAL );
// Update Reminder
app.updateTimeout = setTimeout( app.checkForLastUpdateCheck, app.manifest.meta.updateFreq );
@ -228,6 +233,73 @@ var app = {
});
},
checkConnection: function(resolve, reject){
try {
switch(navigator.network.connection.type){
case Connection.ETHERNET:
case Connection.WIFI:
case Connection.CELL_4G:
case Connection.CELL_3G:
case Connection.CELL_2G:
app.online = true;
if(typeof resolve === "function"){
resolve();
}
break;
case Connection.NONE:
case Connection.UNKNOWN:
default:
app.online = false;
if(typeof reject === "function"){
reject();
}
break;
}
} catch(e) {
if(navigator.onLine){
app.online = true;
if(typeof resolve === "function"){
resolve();
}
} else {
app.online = false;
if(typeof reject === "function"){
reject();
}
}
}
// Hide offline specific elements
var i, elements;
elements = document.getElementsByClassName("offline-hidden");
for (i = 0; i < elements.length; i++){
if(app.online){
elements[i].classList.remove('hidden');
} else {
elements[i].classList.add('hidden');
}
}
// Show offline specific elements
var i, elements;
elements = document.getElementsByClassName("offline-visible");
for (i = 0; i < elements.length; i++){
if(app.online){
elements[i].classList.add('hidden');
} else {
elements[i].classList.remove('hidden');
}
}
// Disable offline specific elements
elements = document.getElementsByClassName("offline-disable");
for (i = 0; i < elements.length; i++){
if(app.online){
elements[i].classList.remove('disabled');
} else {
elements[i].classList.add('disabled');
}
}
return app.online;
},
// Check for last update check
checkForLastUpdateCheck: function(resolve, reject){
// Checklast Update
@ -246,16 +318,25 @@ var app = {
checkForUpdate: function(resolve, reject) {
app.utils.setLoadingMsg("Vérification des mises à jour");
app.checkConnection();
var manifestReady = false;
var assetsReady = false;
var updateAvailable = false;
var updateError = false;
if(!app.online){
app.utils.setLoadingMsg("L'application est hors-ligne");
if(typeof resolve === 'function'){
resolve(false);
}
return;
}
var onGetMtime = function(key, mtime, ready){
var old_mtime = localStorage.getItem("momo-"+key+"-mtime");
if (mtime) {
if(mtime.toString() !== old_mtime) {
if(mtime != old_mtime) {
updateAvailable = true;
}
} else {
@ -268,6 +349,9 @@ var app = {
if(typeof reject === 'function'){
reject();
}
if(typeof resolve === 'function'){
resolve(false);
}
} else {
/* record that a check for update was succesfully done */
localStorage.setItem("momo-timestamp", (new Date()).toString());
@ -924,6 +1008,9 @@ var app = {
// Render page (with small hack, so it doesn't mess up the display)
$inpage.innerHTML = app.renderPage(page_obj, force);
// Check for connection
app.checkConnection();
// Pull to update binder
app.bindPagePull($inpage);
@ -1155,7 +1242,11 @@ var app = {
}
if(app.currentPage !== page){
app.navigate(page, back);
if(!app.pages[page].external || app.pages[page].external && app.online){
app.navigate(page, back);
} else {
window.history.go(-1);
}
}
app.parentPage = page;
app.previousPage = page;