loleflet: rework progress bar

4 files changed, 70 insertions, 23 deletions

diff --git a/loleaflet/dist/images/spinner.gif b/loleaflet/dist/images/spinner.gif
new file mode 100644
index 000000000..318c372f1
--- /dev/null
+++ b/loleaflet/dist/images/spinner.gif
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 5d48932b3..0fa0e5b4b 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -685,3 +685,15 @@ a.leaflet-control-buttons:hover:first-child {
 	color: rgba(0, 0, 0, 0.7);
 	text-shadow: 0 1px rgba(255, 255, 255, 0.4);
 	}
+
+.leaflet-progress-spinner {
+	background-image: url(images/spinner.gif);
+	background-repeat: no-repeat;
+	background-position: center center;
+	width: 100%;
+	height: 48px;
+	}
+
+.leaflet-progress-label {
+	text-align: center;
+	}
diff --git a/loleaflet/src/layer/marker/ProgressOverlay.js b/loleaflet/src/layer/marker/ProgressOverlay.js
index 055f7dd4a..1212618ce 100644
--- a/loleaflet/src/layer/marker/ProgressOverlay.js
+++ b/loleaflet/src/layer/marker/ProgressOverlay.js
@@ -7,33 +7,43 @@ L.ProgressOverlay = L.Layer.extend({
 	initialize: function (latlng, size) {
 		this._latlng = L.latLng(latlng);
 		this._size = size;
+		this._initLayout();
 	},
 
 	onAdd: function () {
-		this._initLayout();
-		this.update();
+		if (this._container) {
+			this.getPane().appendChild(this._container);
+			this.update();
+		}
+
+		this._map.on('moveend', this.update, this);
 	},
 
 	onRemove: function () {
-		L.DomUtil.remove(this._container);
+		if (this._container) {
+			this.getPane().removeChild(this._container);
+		}
 	},
 
 	update: function () {
-		if (this._container) {
-			var offset = this._size.divideBy(2, true);
-			var pos = this._map.latLngToLayerPoint(this._latlng).round();
-			this._setPos(pos.subtract(offset));
+		if (this._container && this._map) {
+			var origin = new L.Point(0, 0);
+			var paneOffset = this._map.layerPointToContainerPoint(origin);
+			var sizeOffset = this._size.divideBy(2, true);
+			var position = this._map.latLngToLayerPoint(this._latlng).round();
+			this._setPos(position.subtract(paneOffset).subtract(sizeOffset));
 		}
-		return this;
 	},
 
 	_initLayout: function () {
 		this._container = L.DomUtil.create('div', 'leaflet-progress-layer');
+		this._spinner = L.DomUtil.create('div', 'leaflet-progress-spinner', this._container);
+		this._label = L.DomUtil.create('div', 'leaflet-progress-label', this._container);
 		this._progress = L.DomUtil.create('div', 'leaflet-progress', this._container);
 		this._bar = L.DomUtil.create('span', '', this._progress);
-		this._label = L.DomUtil.create('span', '', this._bar);
+		this._value = L.DomUtil.create('span', '', this._bar);
 
-		L.DomUtil.setStyle(this._label, 'line-height', this._size.y + 'px');
+		L.DomUtil.setStyle(this._value, 'line-height', this._size.y + 'px');
 
 		this._container.style.width  = this._size.x + 'px';
 		this._container.style.height = this._size.y + 'px';
@@ -41,19 +51,30 @@ L.ProgressOverlay = L.Layer.extend({
 		L.DomEvent
 			.disableClickPropagation(this._progress)
 			.disableScrollPropagation(this._container);
-
-		if (this._container) {
-			this.getPane().appendChild(this._container);
-		}
 	},
 
 	_setPos: function (pos) {
 		L.DomUtil.setPosition(this._container, pos);
 	},
 
+	setLabel: function (label) {
+		if (this._label.innerHTML !== label) {
+			this._label.innerHTML = label;
+		}
+	},
+
+	setBar: function (bar) {
+		if (bar) {
+			this._progress.style.visibility = '';
+		}
+		else {
+			this._progress.style.visibility = 'hidden';
+		}
+	},
+
 	setValue: function (value) {
 		this._bar.style.width = value + '%';
-		this._label.innerHTML = value + '%';
+		this._value.innerHTML = value + '%';
 	}
 });
 
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index e7c622986..995a113fe 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -70,6 +70,7 @@ L.Map = L.Evented.extend({
 		}
 		this._addLayers(this.options.layers);
 		this._socket = L.socket(this);
+		this._progressBar = L.progressOverlay(this.getCenter(), L.point(150, 25));
 
 		// Inhibit the context menu - the browser thinks that the document
 		// is just a bunch of images, hence the context menu is useless (tdf#94599)
@@ -103,12 +104,13 @@ L.Map = L.Evented.extend({
 			}
 		});
 
-		this.on('statusindicator', this._onUpdateProgress, this);
-
 		// when editing, we need the LOK session right away
 		if (options.permission === 'edit') {
 			this.setPermission(options.permission);
 		}
+
+		this.showBusy('Initializing...', false);
+		this.on('statusindicator', this._onUpdateProgress, this);
 	},
 
 
@@ -121,6 +123,20 @@ L.Map = L.Evented.extend({
 		return this;
 	},
 
+	showBusy: function(label, bar) {
+		this._progressBar.setLabel(label);
+		this._progressBar.setBar(bar);
+		this._progressBar.setValue(0);
+
+		if (!this.hasLayer(this._progressBar)) {
+			this.addLayer(this._progressBar);
+		}
+	},
+
+	hideBusy: function () {
+		this.removeLayer(this._progressBar);
+	},
+
 	setZoom: function (zoom, options) {
 		if (!this._loaded) {
 			this._zoom = this._limitZoom(zoom);
@@ -698,15 +714,13 @@ L.Map = L.Evented.extend({
 
 	_onUpdateProgress: function (e) {
 		if (e.statusType === 'start') {
-			this._progressBar = L.progressOverlay(this.getCenter(), L.point(100, 32));
-			this.addLayer(this._progressBar);
+			this.showBusy('Loading...', true);
 		}
-		else if (e.statusType === 'setvalue' && this._progressBar) {
+		else if (e.statusType === 'setvalue') {
 			this._progressBar.setValue(e.value);
 		}
-		else if (e.statusType === 'finish' && this._progressBar) {
-			this.removeLayer(this._progressBar);
-			this._progressOverlay = null;
+		else if (e.statusType === 'finish' || e.statusType === 'loleafletloaded') {
+			this.hideBusy();
 		}
 	},