gestion de l'affichage et de l'état du #BOUTON_TELECHARGER_OFFLINE + refactoring de offline.install

action/api_offline.php

@@ -87,6 +87,7 @@ function action_api_offline_install_js_dist($force_refresh = false) {
 
 	return offline_build_jslist($c,
 		array(
+			'javascript/offline.install.utils.js',
 			$debug ? 'javascript/offline.install.debug.js' : '',
 			'javascript/offline.install.js',
 		)

javascript/offline.install.debug.js

-function offline_show_sw_statut() {
+offline.showSWStatut = function() {
 	var c = navigator.serviceWorker.controller;
 	var status = "DEBUG SW: ";
 	if (!jQuery('#swstatus').length) {
@@ -20,5 +20,4 @@ function offline_show_sw_statut() {
 		status = status + '-';
 		jQuery('#swstatus').html(status);
 	}
-
 }
\ No newline at end of file

javascript/offline.install.js

@@ -5,15 +5,13 @@ if (typeof offlineConfig=="undefined"){
 else {
 	if ('serviceWorker' in navigator){
 		window.addEventListener('load', function (){
-			if (typeof offline_show_sw_statut === 'function') {offline_show_sw_statut();}
+			offline.activeDownloads();
 			navigator.serviceWorker.register(offlineConfig.swUrl, offlineConfig.swOptions).then(function (registration){
 				// Registration was successful
 				console.log('ServiceWorker registration successful with scope: ', registration.scope);
-				//if (typeof offline_show_sw_statut === 'function') {offline_show_sw_statut();}
 			}, function (err){
 				// registration failed :(
 				console.log('ServiceWorker registration failed: ', err);
-				//if (typeof offline_show_sw_statut === 'function') {offline_show_sw_statut();}
 			});
 		});
 	}

javascript/offline.install.storage.js

-// TODO : https://storage.spec.whatwg.org/
-Promise.all([
-  navigator.storage.persisted(),
-  navigator.permissions.query({name: "persistent-storage"})
-]).then(([persisted, permission]) => {
-  if(!persisted && permission.status == "granted") {
-    navigator.storage.persist().then( /* … */ )
-  } else if(!persistent && permission.status == "prompt") {
-    showPersistentStorageExplanation()
-  }
-})
\ No newline at end of file

javascript/offline.install.utils.js

+var offline = {
+  activeDownloads : function() {
+    var c = navigator.serviceWorker.controller;
+   	if (typeof c!=="undefined" && c){
+   		jQuery('.offline-download.activable').removeClass('activable').addClass('active');
+   	}
+   	else {
+   		jQuery('.offline-download.activable').removeClass('activable').addClass('unactive');
+   	}
+	  if (typeof offline.showSWStatut === 'function') {offline.showSWStatut();}
+  },
+  promptPersistent : function() {
+    // TODO : https://storage.spec.whatwg.org/
+    Promise.all([
+      navigator.storage.persisted(),
+      navigator.permissions.query({name: "persistent-storage"})
+    ]).then(([persisted, permission]) => {
+      if(!persisted && permission.status == "granted") {
+        navigator.storage.persist().then( /* … */ )
+      } else if(!persistent && permission.status == "prompt") {
+        showPersistentStorageExplanation()
+      }
+    })
+  }
+}

lang/offline_fr.php

@@ -10,6 +10,9 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
 	// O
 	'offline_titre' => 'Offline',
 
+	'offline_info_telecharger_lecture_offline_active' => "Télécharger pour lire hors-ligne",
+	'offline_info_telecharger_lecture_offline_unactive' => "Téléchargement impossible",
+
 	// C
 	'cfg_exemple' => 'Exemple',
 	'cfg_exemple_explication' => 'Explication de cet exemple',

offline/bouton-telecharger.html

+<div class="offline-download[ (#ENV{status,unactive})]">
+	<a href="#"
+	   class="btn-link">
+		[(#CHEMIN{img/travel-32.png}|balise_img)]
+		<span class="label">[(#ENV{label_active,<:offline:offline_info_telecharger_lecture_offline_active:>}|attribut_html)]</span>
+	</a>
+	<span class="btn-link disabled">
+		[(#CHEMIN{img/travel-off-32.png}|balise_img)]
+		<span class="label">[(#ENV{label_unactive,<:offline:offline_info_telecharger_lecture_offline_unactive:>}|attribut_html)]</span>
+	</span>
+</div>
+<style type="text/css">
+	.offline-download {float: right;margin: 10px;text-align: center}
+	.offline-download .label {display: block;text-align: center;max-width: 150px;font-size: 12px}
+	.offline-download>a {display: none}
+	.offline-download>span {display: block}
+	.offline-download.active>a {display: block}
+	.offline-download.active>span {display: none}
+	.offline-download.activable {opacity: 0.5;}
+</style>
\ No newline at end of file