import index.html and index.js from master
This commit is contained in:
parent
7cb9f9be59
commit
bc4b018fee
144
www/index.html
144
www/index.html
|
|
@ -60,6 +60,19 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-tmpl" id="momo-default-footer-tmpl">
|
||||
<div class="col-xs-6 navbar-btn text-left">
|
||||
<a href="https://dev.entrouvert.org/projects/momo/"
|
||||
class="btn btn-success pull-left momo-repo"
|
||||
target="_system"
|
||||
onclick="javascript:app.utils.onExternalLinkClick()">Momo repository</a>
|
||||
</div>
|
||||
<div class="col-xs-6 navbar-btn text-right">
|
||||
<a href="mailto:{%= o.meta.contact %}"
|
||||
class="btn btn-success pull-right momo-contact">{%= o.meta.contact %}</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-tmpl" id="momo-icon-tmpl">
|
||||
{% if(o.icon){ %}
|
||||
{% if(o.icon.isFramable()){ %}
|
||||
|
|
@ -71,41 +84,41 @@
|
|||
</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">
|
||||
<span class="navbar-brand" href="#home">
|
||||
{% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
|
||||
{%# (o.titleSeparator || o.meta.titleSeparator) %}
|
||||
{% } %}
|
||||
<span class="momo-icon">
|
||||
{% var icon = (o.titlePersistent || o.meta.titlePersistent || o.id == 'home') ? o.meta.icon : o.icon || o.meta.icon; %}
|
||||
{% if(icon){ %}
|
||||
{%# tmpl('momo-icon-tmpl', { icon: icon, size: 20, header: true }) %}
|
||||
<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>
|
||||
{% } %}
|
||||
</span>
|
||||
<span class="momo-title">
|
||||
{% if(o.titlePersistent || o.meta.titlePersistent || o.id == 'home'){ %}
|
||||
{%= o.meta.title %}
|
||||
</div>
|
||||
<span class="navbar-brand" href="#home">
|
||||
{% if(!(o.titlePersistent || o.meta.titlePersistent || o.id == 'home')){ %}
|
||||
{%# (o.titleSeparator || o.meta.titleSeparator) %}
|
||||
<small>
|
||||
{% if(o.meta.icon && o.icon){ %}
|
||||
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20, header: true }) %}
|
||||
{% } %}
|
||||
{%# o.title %}
|
||||
</small>
|
||||
{% } else { %}
|
||||
{%# (o.title || o.meta.title) %}
|
||||
{% } %}
|
||||
<span class="momo-icon">
|
||||
{% var icon = (o.titlePersistent || o.meta.titlePersistent || o.id == 'home') ? o.meta.icon : o.icon || o.meta.icon; %}
|
||||
{% if(icon){ %}
|
||||
{%# tmpl('momo-icon-tmpl', { icon: icon, size: 20, header: true }) %}
|
||||
{% } %}
|
||||
</span>
|
||||
<span class="momo-title">
|
||||
{% if(o.titlePersistent || o.meta.titlePersistent || o.id == 'home'){ %}
|
||||
{%= o.meta.title %}
|
||||
{%# (o.titleSeparator || o.meta.titleSeparator) %}
|
||||
<small>
|
||||
{% if(o.meta.icon && o.icon){ %}
|
||||
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 20, header: true }) %}
|
||||
{% } %}
|
||||
{%# o.title %}
|
||||
</small>
|
||||
{% } else { %}
|
||||
{%# (o.title || o.meta.title) %}
|
||||
{% } %}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Main Template -->
|
||||
|
|
@ -150,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>
|
||||
|
|
@ -161,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){ %}
|
||||
|
|
@ -179,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>
|
||||
|
|
@ -196,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>
|
||||
{% } %}
|
||||
|
|
@ -236,19 +261,44 @@
|
|||
<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 offline-hidden">
|
||||
<div class="momo-loading text-muted">
|
||||
<i class="fa fa-spinner fa-pulse fa-3x"></i>
|
||||
<p class="momo-loading-text">
|
||||
Chargement du contenu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% } %}
|
||||
|
||||
{% 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>
|
||||
|
|
@ -265,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){ %}
|
||||
|
|
@ -307,16 +356,7 @@
|
|||
<footer class="navbar navbar-inverse momo-footer">
|
||||
<div class="container-fluid clearfix">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 navbar-btn text-left">
|
||||
<a href="https://dev.entrouvert.org/projects/momo/"
|
||||
class="btn btn-success pull-left momo-repo"
|
||||
target="_system"
|
||||
onclick="javascript:app.utils.onExternalLinkClick()">Momo repository</a>
|
||||
</div>
|
||||
<div class="col-xs-6 navbar-btn text-right">
|
||||
<a href="mailto:{%= o.meta.contact %}"
|
||||
class="btn btn-success pull-right momo-contact">{%= o.meta.contact %}</a>
|
||||
</div>
|
||||
{%# o.footer %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
153
www/js/index.js
153
www/js/index.js
|
|
@ -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 = {
|
||||
|
|
@ -54,7 +55,8 @@ var app = {
|
|||
'menu': [],
|
||||
'stylesheets': [],
|
||||
'javascripts': [],
|
||||
'content': tmpl('momo-first-launch-tmpl', {})
|
||||
'content': tmpl('momo-first-launch-tmpl', {}),
|
||||
'footer': undefined
|
||||
},
|
||||
|
||||
// Default page attributes
|
||||
|
|
@ -69,6 +71,7 @@ var app = {
|
|||
},
|
||||
|
||||
// Misc Data
|
||||
online : false,
|
||||
current : 0,
|
||||
isAnimating : false,
|
||||
endCurrPage : false,
|
||||
|
|
@ -116,7 +119,37 @@ var app = {
|
|||
|
||||
// Device ready callback
|
||||
onDeviceReady: function() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', '../index.json');
|
||||
request.onload = function() {
|
||||
if (request.status != 200) {
|
||||
/* this should never happen */
|
||||
app.utils.setLoadingMsg("Initialisation de l'application : erreur de chargement");
|
||||
} else {
|
||||
var new_manifest = JSON.parse(this.responseText);
|
||||
for (var attr in new_manifest.meta) {
|
||||
if (new_manifest.meta.hasOwnProperty(attr)) {
|
||||
app.manifest.meta[attr] = new_manifest.meta[attr];
|
||||
}
|
||||
}
|
||||
app.manifest.title = new_manifest.title;
|
||||
app.manifest.content = new_manifest.content;
|
||||
app.manifest.pages = new_manifest.pages;
|
||||
app.manifest.footer = new_manifest.footer;
|
||||
app.manifest.display = new_manifest.display;
|
||||
app.manifest.menu = new_manifest.menu;
|
||||
app.manifest._pages = new_manifest._pages;
|
||||
app.onDefaultManifestLoaded();
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
},
|
||||
|
||||
onDefaultManifestLoaded: function() {
|
||||
app.initApplication();
|
||||
},
|
||||
|
||||
initApplication: function() {
|
||||
// Init fileSystem
|
||||
app.initFileSystem();
|
||||
|
||||
|
|
@ -130,13 +163,19 @@ var app = {
|
|||
app.loadLocalManifest();
|
||||
|
||||
// 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
|
||||
app.updateTimeout = setTimeout( app.checkForLastUpdateCheck, app.manifest.meta.updateFreq );
|
||||
|
||||
// Touch events faster response patch
|
||||
FastClick.attach(document.body);
|
||||
|
||||
// Start Application
|
||||
app.start();
|
||||
},
|
||||
|
||||
initFileSystem: function(){
|
||||
|
|
@ -197,11 +236,78 @@ 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
|
||||
var lastUpdate = localStorage.getItem("momo-timestamp") ? new Date(localStorage.getItem("momo-timestamp")) : new Date(0);
|
||||
var timeDiff = ((new Date()).getTime() - lastUpdate.getTime()) / 1000;
|
||||
var timeDiff = ((new Date()).getTime() - lastUpdate.getTime());
|
||||
var updateRequired = timeDiff > app.manifest.meta.updateFreq;
|
||||
|
||||
if(updateRequired){
|
||||
|
|
@ -215,16 +321,31 @@ 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){
|
||||
var msg = "Impossible de détecter une mise à jour car votre appareil n'est pas connecté à Internet. ";
|
||||
var updatedAt = localStorage.getItem('momo-updated-at');
|
||||
if(updatedAt){
|
||||
msg += "Pour information, la dernière mise à jour date du " + app.utils.formatDate(new Date(updatedAt)) + ".";
|
||||
}
|
||||
app.utils.setLoadingMsg("Application hors-ligne");
|
||||
app.flash(msg, 'danger');
|
||||
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 {
|
||||
|
|
@ -237,6 +358,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());
|
||||
|
|
@ -614,6 +738,11 @@ var app = {
|
|||
app.utils.setLoadingMsg("Démarrage de l'application");
|
||||
app.hasStarted = true;
|
||||
|
||||
/* if there's no footer, fallback to the default */
|
||||
if (typeof app.manifest.footer === 'undefined') {
|
||||
app.manifest.footer = tmpl('momo-default-footer-tmpl', app.manifest);
|
||||
}
|
||||
|
||||
// Default route to home
|
||||
app.manifest.id = app.currentPage = 'home';
|
||||
|
||||
|
|
@ -888,6 +1017,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);
|
||||
|
||||
|
|
@ -995,7 +1127,7 @@ var app = {
|
|||
prev, next;
|
||||
|
||||
|
||||
console.warn(app.previousPage + " -> " + page);
|
||||
//console.warn(app.previousPage + " -> " + page);
|
||||
|
||||
// Hack of the century ?
|
||||
if(app.ignoreHash){ return false; }
|
||||
|
|
@ -1092,7 +1224,7 @@ var app = {
|
|||
|
||||
var back = page === 'home';
|
||||
|
||||
console.log(app.pageHistory.join(',')+ " (index = "+app.pageIndex+")");
|
||||
//console.log(app.pageHistory.join(',')+ " (index = "+app.pageIndex+")");
|
||||
|
||||
if (app.pageHistory.length/* && app.historyLength == length*/) {
|
||||
// Goind Back
|
||||
|
|
@ -1119,7 +1251,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;
|
||||
|
|
@ -1161,7 +1297,7 @@ var app = {
|
|||
search: query,
|
||||
icon: "fa fa-search",
|
||||
title: 'Recherche "'+query+'"',
|
||||
content: results.length ? null : '<div class="well text-center text-muted">Aucun resultat</div>',
|
||||
content: results.length ? null : '<div class="well text-center text-muted">Aucun résultat</div>',
|
||||
pages: results.map(function(item){
|
||||
return item.ref;
|
||||
}),
|
||||
|
|
@ -1239,6 +1375,7 @@ var app = {
|
|||
function(){
|
||||
localStorage.setItem('momo-manifest-mtime', app.manifestMtime);
|
||||
localStorage.setItem('momo-assets-mtime', app.assetsMtime);
|
||||
localStorage.setItem('momo-updated-at', new Date());
|
||||
loadAssets(resolve, reject);
|
||||
},
|
||||
function(){
|
||||
|
|
|
|||
Reference in New Issue