From c22af363f3d166839139fc03961de23dcbb6b886 Mon Sep 17 00:00:00 2001
From: Ghislain Loaec <gloaec@cadoles.com>
Date: Fri, 2 Oct 2015 09:58:24 +0200
Subject: [PATCH] Description Ref #8116 + Offline mode Ref #8052 + Minor fixes

---
 assets/scripts/momo.coffee |  3 +-
 www/css/index.css          | 16 ++++++-
 www/index.html             | 68 ++++++++++++++++++---------
 www/js/index.js            | 95 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 157 insertions(+), 25 deletions(-)

diff --git a/assets/scripts/momo.coffee b/assets/scripts/momo.coffee
index a4090de..51b54e6 100644
--- a/assets/scripts/momo.coffee
+++ b/assets/scripts/momo.coffee
@@ -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: ->
diff --git a/www/css/index.css b/www/css/index.css
index 896511b..59ad62a 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -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;
+    }
+}
diff --git a/www/index.html b/www/index.html
index ca84c84..bc3f483 100644
--- a/www/index.html
+++ b/www/index.html
@@ -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){ %}
diff --git a/www/js/index.js b/www/js/index.js
index da209b4..ebefe55 100644
--- a/www/js/index.js
+++ b/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 = {
@@ -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;