parent
9d92d71484
commit
c22af363f3
|
@ -7,9 +7,10 @@ class Momo
|
||||||
contructor: (args...) ->
|
contructor: (args...) ->
|
||||||
@bindEvents()
|
@bindEvents()
|
||||||
|
|
||||||
|
|
||||||
bindEvents: ->
|
bindEvents: ->
|
||||||
# Navigation Handler
|
# Navigation Handler
|
||||||
window.addEventListener "hashchange", @onHashChange, false
|
xindow.addEventListener "hashchange", @onHashChange, false
|
||||||
document.addEventListener "deviceready", @onDeviceReady, false
|
document.addEventListener "deviceready", @onDeviceReady, false
|
||||||
|
|
||||||
init: ->
|
init: ->
|
||||||
|
|
|
@ -280,7 +280,7 @@ img {
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
.navbar-header {
|
.navbar-header {
|
||||||
min-width: 200px;
|
/*min-width: 300px;*/
|
||||||
}
|
}
|
||||||
.parent-navbar-brand {
|
.parent-navbar-brand {
|
||||||
display: table;
|
display: table;
|
||||||
|
@ -338,6 +338,9 @@ h1 {
|
||||||
overflow:visible;
|
overflow:visible;
|
||||||
padding:0px;
|
padding:0px;
|
||||||
}
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fade {
|
@keyframes fade {
|
||||||
from { opacity: 1.0; }
|
from { opacity: 1.0; }
|
||||||
|
@ -377,15 +380,26 @@ pre .boolean { color: #7587A6; }
|
||||||
pre .null { color: #828282; }
|
pre .null { color: #828282; }
|
||||||
pre .key { color: #CDA869; }
|
pre .key { color: #CDA869; }
|
||||||
|
|
||||||
|
.top-0 {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
.top-10 {
|
.top-10 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.top-20 {
|
.top-20 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
.bottom-0 {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
.bottom-10 {
|
.bottom-10 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.bottom-20 {
|
.bottom-20 {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.navbar .navbar-btn {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -84,15 +84,15 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/x-tmpl" id="momo-header-tmpl">
|
<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="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">
|
<span class="navbar-brand" href="#home">
|
||||||
{% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
|
{% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
|
||||||
{%# (o.titleSeparator || o.meta.titleSeparator) %}
|
{%# (o.titleSeparator || o.meta.titleSeparator) %}
|
||||||
|
@ -163,7 +163,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/x-tmpl" id="momo-list-item-tmpl">
|
<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){ %}
|
{% if(o.header){ %}
|
||||||
<span class="pull-left">
|
<span class="pull-left">
|
||||||
{% if(o.icon){ %}
|
{% if(o.icon){ %}
|
||||||
|
@ -192,16 +192,28 @@
|
||||||
<i class="fa fa-angle-right pull-right visible-xs-inline"></i>
|
<i class="fa fa-angle-right pull-right visible-xs-inline"></i>
|
||||||
{% } %}
|
{% } %}
|
||||||
{% } else { %}
|
{% } else { %}
|
||||||
<span class="pull-left">
|
{% if(o.external) { %}
|
||||||
{% if(o.icon){ %}
|
<i class="fa fa-external-link pull-right"></i>
|
||||||
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
|
{% } else { %}
|
||||||
|
<i class="fa fa-angle-right pull-right"></i>
|
||||||
{% } %}
|
{% } %}
|
||||||
{%# o.title %}
|
{% if(o.description){ %}
|
||||||
</span>
|
<h5 class="list-group-item-heading">
|
||||||
{% if(o.external) { %}
|
{% if(o.icon){ %}
|
||||||
<i class="fa fa-external-link pull-right"></i>
|
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20 }) %}
|
||||||
|
{% } %}
|
||||||
|
{%# o.title %}
|
||||||
|
</h5>
|
||||||
|
<p class="list-group-item-text">
|
||||||
|
{%# o.description %}
|
||||||
|
</p>
|
||||||
{% } else { %}
|
{% } 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>
|
</a>
|
||||||
|
@ -209,7 +221,7 @@
|
||||||
|
|
||||||
<script type="text/x-tmpl" id="momo-icon-item-tmpl">
|
<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 %}">
|
<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){ %}
|
{% if(o.external){ %}
|
||||||
<i class="fa fa-external-link top-right"></i>
|
<i class="fa fa-external-link top-right"></i>
|
||||||
{% } %}
|
{% } %}
|
||||||
|
@ -249,13 +261,22 @@
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
</script>
|
</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 -->
|
<!-- Page template -->
|
||||||
<script type="text/x-tmpl" id="momo-page-tmpl">
|
<script type="text/x-tmpl" id="momo-page-tmpl">
|
||||||
{% var displayFooter = true; %}
|
{% var displayFooter = true; %}
|
||||||
|
|
||||||
<div class="{% if(o.url){ %}{% } else { %}momo-page-wrapper{% } %} clearfix">
|
<div class="{% if(o.url){ %}{% } else { %}momo-page-wrapper{% } %} clearfix">
|
||||||
|
|
||||||
{% if(o.url && !o.url.isImage()){ %}
|
{% if(o.url && !o.url.isImage()){ %}
|
||||||
<div class="momo-frame-spinner">
|
<div class="momo-frame-spinner offline-hidden">
|
||||||
<div class="momo-loading text-muted">
|
<div class="momo-loading text-muted">
|
||||||
<i class="fa fa-spinner fa-pulse fa-3x"></i>
|
<i class="fa fa-spinner fa-pulse fa-3x"></i>
|
||||||
<p class="momo-loading-text">
|
<p class="momo-loading-text">
|
||||||
|
@ -266,12 +287,18 @@
|
||||||
{% } %}
|
{% } %}
|
||||||
|
|
||||||
{% if(!(o.url && o.url.isImage())){ %}
|
{% if(!(o.url && o.url.isImage())){ %}
|
||||||
|
<div class="offline-visible">
|
||||||
|
{%# tmpl('momo-offline-tmpl', o) %}
|
||||||
|
</div>
|
||||||
<div class="momo-flash-messages"></div>
|
<div class="momo-flash-messages"></div>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<section class="momo-page-content">{%# o.content %}</section>
|
<section class="momo-page-content">{%# o.content %}</section>
|
||||||
</div>
|
</div>
|
||||||
{% } else { %}
|
{% } else { %}
|
||||||
<div class="momo-image-viewer" style="background-image: url('{%# o.url %}');">
|
<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="momo-flash-messages"></div>
|
||||||
<div class="container-fluid momo-page-content-parent">
|
<div class="container-fluid momo-page-content-parent">
|
||||||
<section class="momo-page-content">{%# o.content %}</section>
|
<section class="momo-page-content">{%# o.content %}</section>
|
||||||
|
@ -288,7 +315,6 @@
|
||||||
|
|
||||||
{% if(o.url && !o.url.isImage()){ %}
|
{% if(o.url && !o.url.isImage()){ %}
|
||||||
<iframe src="{%= o.url %}" class="momo-iframe"></iframe>
|
<iframe src="{%= o.url %}" class="momo-iframe"></iframe>
|
||||||
<!--div class="momo-frame-overlay"></div-->
|
|
||||||
{% } %}
|
{% } %}
|
||||||
|
|
||||||
{% if(o.pages){ %}
|
{% if(o.pages){ %}
|
||||||
|
|
|
@ -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_OUT_CLASS = 'pt-page-moveToRightEasing pt-page-ontop';
|
||||||
var ANIMATION_BACK_IN_CLASS = 'pt-page-moveFromLeft';
|
var ANIMATION_BACK_IN_CLASS = 'pt-page-moveFromLeft';
|
||||||
var ON_PULL = 'checkForUpdate'; // || 'update'
|
var ON_PULL = 'checkForUpdate'; // || 'update'
|
||||||
|
var CHECK_FOR_CONNECTION_INTERVAL = 3000;
|
||||||
|
|
||||||
// Application
|
// Application
|
||||||
var app = {
|
var app = {
|
||||||
|
@ -70,6 +71,7 @@ var app = {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Misc Data
|
// Misc Data
|
||||||
|
online : false,
|
||||||
current : 0,
|
current : 0,
|
||||||
isAnimating : false,
|
isAnimating : false,
|
||||||
endCurrPage : false,
|
endCurrPage : false,
|
||||||
|
@ -160,6 +162,9 @@ var app = {
|
||||||
// Check for new updates
|
// Check for new updates
|
||||||
//app.checkForUpdate(app.start, app.start);
|
//app.checkForUpdate(app.start, app.start);
|
||||||
|
|
||||||
|
// Regulary check for connection
|
||||||
|
setInterval( app.checkConnection, CHECK_FOR_CONNECTION_INTERVAL );
|
||||||
|
|
||||||
// Update Reminder
|
// Update Reminder
|
||||||
app.updateTimeout = setTimeout( app.checkForLastUpdateCheck, app.manifest.meta.updateFreq );
|
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
|
// Check for last update check
|
||||||
checkForLastUpdateCheck: function(resolve, reject){
|
checkForLastUpdateCheck: function(resolve, reject){
|
||||||
// Checklast Update
|
// Checklast Update
|
||||||
|
@ -246,16 +318,25 @@ var app = {
|
||||||
|
|
||||||
checkForUpdate: function(resolve, reject) {
|
checkForUpdate: function(resolve, reject) {
|
||||||
app.utils.setLoadingMsg("Vérification des mises à jour");
|
app.utils.setLoadingMsg("Vérification des mises à jour");
|
||||||
|
app.checkConnection();
|
||||||
|
|
||||||
var manifestReady = false;
|
var manifestReady = false;
|
||||||
var assetsReady = false;
|
var assetsReady = false;
|
||||||
var updateAvailable = false;
|
var updateAvailable = false;
|
||||||
var updateError = 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 onGetMtime = function(key, mtime, ready){
|
||||||
var old_mtime = localStorage.getItem("momo-"+key+"-mtime");
|
var old_mtime = localStorage.getItem("momo-"+key+"-mtime");
|
||||||
if (mtime) {
|
if (mtime) {
|
||||||
if(mtime.toString() !== old_mtime) {
|
if(mtime != old_mtime) {
|
||||||
updateAvailable = true;
|
updateAvailable = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -268,6 +349,9 @@ var app = {
|
||||||
if(typeof reject === 'function'){
|
if(typeof reject === 'function'){
|
||||||
reject();
|
reject();
|
||||||
}
|
}
|
||||||
|
if(typeof resolve === 'function'){
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
/* record that a check for update was succesfully done */
|
/* record that a check for update was succesfully done */
|
||||||
localStorage.setItem("momo-timestamp", (new Date()).toString());
|
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)
|
// Render page (with small hack, so it doesn't mess up the display)
|
||||||
$inpage.innerHTML = app.renderPage(page_obj, force);
|
$inpage.innerHTML = app.renderPage(page_obj, force);
|
||||||
|
|
||||||
|
// Check for connection
|
||||||
|
app.checkConnection();
|
||||||
|
|
||||||
// Pull to update binder
|
// Pull to update binder
|
||||||
app.bindPagePull($inpage);
|
app.bindPagePull($inpage);
|
||||||
|
|
||||||
|
@ -1155,7 +1242,11 @@ var app = {
|
||||||
}
|
}
|
||||||
|
|
||||||
if(app.currentPage !== page){
|
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.parentPage = page;
|
||||||
app.previousPage = page;
|
app.previousPage = page;
|
||||||
|
|
Reference in New Issue