loleaflet/build/deps.js | 5 ++
loleaflet/dist/leaflet.css | 36 +++++++++++++++
loleaflet/src/layer/marker/ProgressOverlay.js | 62 ++++++++++++++++++++++++++
loleaflet/src/layer/tile/TileLayer.js | 3 -
loleaflet/src/map/Map.js | 16 ++++++
5 files changed, 121 insertions(+), 1 deletion(-)
New commits:
commit a1e3c30d6e6019c7aa8306b9617561e8bd761480
Author: Henry Castro <hcas...@collabora.com>
Date: Thu Mar 31 21:26:19 2016 -0400
loleaflet: bccu#1622, add a marker progress bar
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 9f0131f..13c6fe1 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -74,6 +74,11 @@ var deps = {
desc: 'Used to display an image over a particular rectangular
area of the map.'
},
+ ProgressOverlay: {
+ src: ['layer/marker/ProgressOverlay.js'],
+ desc: 'Used to display a progress image over rectangular are of
the map.'
+ },
+
Marker: {
src: ['layer/marker/Icon.js',
'layer/marker/Icon.Default.js',
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 4170f47..5d48932 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -9,6 +9,7 @@
.leaflet-map-pane canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
+.leaflet-progress-layer,
.leaflet-layer {
position: absolute;
left: 0;
@@ -649,3 +650,38 @@ a.leaflet-control-buttons:hover:first-child {
display: block;
margin: 0 auto;
}
+
+.leaflet-progress {
+ background: #ebebeb;
+ border-left: 1px solid transparent;
+ border-right: 1px solid transparent;
+ border-radius: 10px;
+ height:100%;
+ }
+
+.leaflet-progress > span {
+ position: relative;
+ float: left;
+ margin: 0 -1px;
+ height: 100%;
+ text-align: right;
+ background: #5aaadb;
+ border: 1px solid;
+ border-color: #459fd6 #3094d2 #277db2;
+ border-radius: 10px;
+ background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%,
#5aaadb);
+ background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%,
#5aaadb);
+ background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%,
#5aaadb);
+ background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%,
#5aaadb);
+ -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px
rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0,
0, 0.2);
+ }
+
+.leaflet-progress > span > span {
+ padding: 0 8px;
+ font-size: 11px;
+ font-weight: bold;
+ color: #404040;
+ color: rgba(0, 0, 0, 0.7);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.4);
+ }
diff --git a/loleaflet/src/layer/marker/ProgressOverlay.js
b/loleaflet/src/layer/marker/ProgressOverlay.js
new file mode 100644
index 0000000..055f7dd
--- /dev/null
+++ b/loleaflet/src/layer/marker/ProgressOverlay.js
@@ -0,0 +1,62 @@
+/*
+ * L.ProgressOverlay is used to overlay progress images over the map.
+ */
+
+L.ProgressOverlay = L.Layer.extend({
+
+ initialize: function (latlng, size) {
+ this._latlng = L.latLng(latlng);
+ this._size = size;
+ },
+
+ onAdd: function () {
+ this._initLayout();
+ this.update();
+ },
+
+ onRemove: function () {
+ L.DomUtil.remove(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));
+ }
+ return this;
+ },
+
+ _initLayout: function () {
+ this._container = L.DomUtil.create('div',
'leaflet-progress-layer');
+ 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);
+
+ L.DomUtil.setStyle(this._label, 'line-height', this._size.y +
'px');
+
+ this._container.style.width = this._size.x + 'px';
+ this._container.style.height = this._size.y + 'px';
+
+ 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);
+ },
+
+ setValue: function (value) {
+ this._bar.style.width = value + '%';
+ this._label.innerHTML = value + '%';
+ }
+});
+
+L.progressOverlay = function (latlng, size) {
+ return new L.ProgressOverlay(latlng, size);
+};
diff --git a/loleaflet/src/layer/tile/TileLayer.js
b/loleaflet/src/layer/tile/TileLayer.js
index 5eee647..1da6533 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -175,6 +175,7 @@ L.TileLayer = L.GridLayer.extend({
}
},
this);
+
for (var key in this._selectionHandles) {
this._selectionHandles[key].on('drag dragend',
this._onSelectionHandleDrag, this);
}
@@ -747,7 +748,7 @@ L.TileLayer = L.GridLayer.extend({
done(e, tile);
},
- _mapOnError: function (e) {
+ _mapOnError: function (e) {
if (e.msg) {
this._map.setPermission('view');
}
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index c2ae5bd..e7c6229 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -103,6 +103,8 @@ 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);
@@ -694,6 +696,20 @@ 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);
+ }
+ else if (e.statusType === 'setvalue' && this._progressBar) {
+ this._progressBar.setValue(e.value);
+ }
+ else if (e.statusType === 'finish' && this._progressBar) {
+ this.removeLayer(this._progressBar);
+ this._progressOverlay = null;
+ }
+ },
+
_isMouseEnteringLeaving: function (e) {
var target = e.target || e.srcElement,
related = e.relatedTarget;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
