[Libreoffice-commits] online.git: loleaflet/dist loleaflet/src
Henry Castro
hcastro at collabora.com
Wed Apr 6 13:14:34 UTC 2016
loleaflet/dist/images/spinner.gif |binary
loleaflet/dist/leaflet.css | 12 ++++++
loleaflet/src/layer/marker/ProgressOverlay.js | 51 ++++++++++++++++++--------
loleaflet/src/map/Map.js | 30 +++++++++++----
4 files changed, 70 insertions(+), 23 deletions(-)
New commits:
commit ab0429622eb2310c879ad15e6e210b3b54074326
Author: Henry Castro <hcastro at collabora.com>
Date: Wed Apr 6 09:14:54 2016 -0400
loleflet: rework progress bar
diff --git a/loleaflet/dist/images/spinner.gif b/loleaflet/dist/images/spinner.gif
new file mode 100644
index 0000000..318c372
Binary files /dev/null and b/loleaflet/dist/images/spinner.gif differ
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 5d48932..0fa0e5b 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 055f7dd..1212618 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 e7c6229..995a113 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();
}
},
More information about the Libreoffice-commits
mailing list