gestion d'un etat downloading et error sur le bouton de telechargement offline d'un objet

javascript/offline.install.utils.js

@@ -2,16 +2,37 @@ jQuery.fn.checkOfflineStatus = function() {
 	return this.each(function() {
 		var me = jQuery(this);
 		var url = me.attr('href');
+		url = parametre_url(url, 'var_mode','loaded');
 		console.log('check offline '+url);
 		caches.match(url).then(
 			function (response){
 				if (response && response!==undefined){
-					me.closest('.offline-download').addClass('offline-ok');
+					me.closest('.offline-download').removeClass('offline-error').addClass('offline-ok');
 				}
 			}
 		)
 	});
 };
+jQuery.fn.setOfflineDownloadingStatus = function(downloading) {
+	return this.each(function() {
+		var me = jQuery(this).closest('.offline-download');
+		if (downloading) {
+			me.addClass('offline-downloading')
+				.removeClass('offline-ok')
+				.removeClass('offline-error')
+				.find(':active,:focus').each(function(){this.blur()});
+		}
+		else {
+			me.removeClass('offline-downloading').find(':active,:focus').each(function(){this.blur()});
+		}
+	});
+};
+jQuery.fn.setOfflineErrorStatus = function() {
+	return this.each(function() {
+			var me = jQuery(this).closest('.offline-download');
+			me.addClass('offline-error');
+		})
+}
 var offline = {
   activeDownloads : function() {
     var c = navigator.serviceWorker.controller;
@@ -33,19 +54,31 @@ var offline = {
 		var me = jQuery(this);
 		var src = me.attr('href');
 		offline.promptPersistent();
+		me.setOfflineDownloadingStatus(true);
 		caches.open(offlineConfig.cacheName).then(function(cache) {
 			fetch(src).then(function(response) {
 				// put this in cache then we know this is already downloaded for offline
 				console.log('ofl-download:got response '+src);
-				cache.put(src,response.clone());
-				console.log('ofl-download:cache.put ok');
 				// src returns a JSON-encoded array of
 				// resource URLs that a given object depends on
 				//console.log(response.json());
 				return response.json().then(function(urls){
-					console.log('ofl-download:addAll',urls);
-					cache.addAll(urls);
-					me.checkOfflineStatus();
+					console.log('ofl-download:addAll:' + urls.length + " urls");
+					cache.addAll(urls).then(function() {
+						src = parametre_url(src, 'var_mode','loaded');
+						cache.put(src,new Response("OK", {status: 200})).then(function(){
+							console.log('ofl-download:cache.put ok');
+							//console.log('ofl-download:addAll finished');
+							me.setOfflineDownloadingStatus(false);
+							me.checkOfflineStatus();
+						});
+					})
+					.catch(function (error){
+						// catch seems to not work if 404 in the urls and addAll fail
+						offline.log("ofl-download:errors:", error);
+						me.setOfflineErrorStatus();
+					});
+					//console.log('ofl-download:addAll after');
 				});
 			});
 		});

offline/bouton-telecharger.html

@@ -8,11 +8,13 @@
 		[(#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>
+	<span class="progress"></span>
 </div>
 <style type="text/css">
 	.offline-download {float: right;margin: 10px;text-align: center;position: relative}
 	.offline-download .label {display: block;text-align: center;max-width: 150px;font-size: 12px}
 	.offline-download>a {display: none}
+	.offline-download>.downloading {display: none}
 	.offline-download>span {display: block}
 	.offline-download.active>a {display: block}
 	.offline-download.active>span {display: none}
@@ -28,4 +30,21 @@
 		right: 0;
 		bottom: 0;
 	}
+	.offline-download.offline-error:after {
+		content:'\0274C';
+		font-size: 36px;
+		font-weight: bold;
+		line-height: 0.75;
+		color: red;
+		display: block;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	.offline-download.offline-downloading>.progress {
+		display: block;
+		position: absolute;
+		top:0;left: 0;width: 100%;height: 100%;
+		background: rgba(255,255,255,0.7) url([(#CHEMIN_IMAGE{searching.gif})]) no-repeat center;
+	}
 </style>
\ No newline at end of file