[Libreoffice-commits] online.git: loleaflet/build loleaflet/dist loleaflet/src

[Henry Castro]

 loleaflet/build/deps.js               |    3 
 loleaflet/dist/leaflet.css            |   56 ++++++++++++++++
 loleaflet/src/layer/marker/Cursor.js  |  115 ++++++++++++++++++++++++++++++++++
 loleaflet/src/layer/tile/TileLayer.js |    3 
 4 files changed, 174 insertions(+), 3 deletions(-)

New commits:
commit 78764623d81257f4511aeffd7461522f2d4fbb3d
Author: Henry Castro <hcastro at collabora.com>
Date:   Tue Jun 2 23:38:00 2015 -0400

    Added blinking cursor

diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index e1fd636..ec73c3e 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -57,7 +57,8 @@ var deps = {
 	Marker: {
 		src: ['layer/marker/Icon.js',
 		      'layer/marker/Icon.Default.js',
-		      'layer/marker/Marker.js'],
+		      'layer/marker/Marker.js',
+		      'layer/marker/Cursor.js'],
 		desc: 'Markers to put on the map.'
 	},
 
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 8aa8aed..dbf8e53 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -554,3 +554,59 @@
 	        transition: background-color 0.8s linear;
 
 }
+
+.blinking-cursor {
+  font-weight: 100;
+  font-size: 20px;
+  color: #2E3D48;
+  -webkit-animation: 1s blink step-end infinite;
+  -moz-animation: 1s blink step-end infinite;
+  -ms-animation: 1s blink step-end infinite;
+  -o-animation: 1s blink step-end infinite;
+  animation: 1s blink step-end infinite;
+}
+
+ at keyframes "blink" {
+  from, to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}
+
+ at -moz-keyframes blink {
+  from, to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}
+
+ at -webkit-keyframes "blink" {
+  from, to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}
+
+ at -ms-keyframes "blink" {
+  from, to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}
+
+ at -o-keyframes "blink" {
+  from, to {
+    color: transparent;
+  }
+  50% {
+    color: black;
+  }
+}
diff --git a/loleaflet/src/layer/marker/Cursor.js b/loleaflet/src/layer/marker/Cursor.js
new file mode 100644
index 0000000..3ffce81
--- /dev/null
+++ b/loleaflet/src/layer/marker/Cursor.js
@@ -0,0 +1,115 @@
+/*
+ * L.Cursor blinking cursor.
+ */
+
+L.Cursor = L.Layer.extend({
+
+	options: {
+		zIndexOffset: 0,
+		opacity: 1
+	},
+
+	initialize: function (latlng, options) {
+		L.setOptions(this, options);
+		this._latlng = L.latLng(latlng);
+	},
+
+	onAdd: function (map) {
+		this._initLayout();
+		this.update();
+	},
+
+	onRemove: function () {
+		L.DomUtil.remove(this._container);
+	},
+
+	getEvents: function () {
+		var events = {viewreset: this.update};
+
+		return events;
+	},
+
+	getLatLng: function () {
+		return this._latlng;
+	},
+
+	setLatLng: function (latlng) {
+		var oldLatLng = this._latlng;
+		this._latlng = L.latLng(latlng);
+		this.update();
+		return this.fire('move', {oldLatLng: oldLatLng, latlng: this._latlng});
+	},
+
+	setZIndexOffset: function (offset) {
+		this.options.zIndexOffset = offset;
+		return this.update();
+	},
+
+	update: function () {
+		if (this._container) {
+			var pos = this._map.latLngToLayerPoint(this._latlng).round();
+			this._setPos(pos);
+		}
+		return this;
+	},
+
+	_initLayout: function () {
+		this._container = L.DomUtil.create('div', 'leaflet-popup');
+
+		//<span class="blinking-cursor">|</span>
+		var span = L.DomUtil.create('span', 'blinking-cursor', this._container);
+		span.innerHTML = '|';
+
+		L.DomEvent
+			.disableClickPropagation(span)
+			.disableScrollPropagation(this._container);
+
+		if (this._container) {
+			this.getPane().appendChild(this._container);
+		}
+	},
+
+	_setPos: function (pos) {
+		L.DomUtil.setPosition(this._container, pos);
+
+		this._zIndex = pos.y + this.options.zIndexOffset;
+
+		this._resetZIndex();
+	},
+
+	_updateZIndex: function (offset) {
+		this._icon.style.zIndex = this._zIndex + offset;
+	},
+
+	_animateZoom: function (opt) {
+		var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
+
+		this._setPos(pos);
+	},
+
+	setOpacity: function (opacity) {
+		this.options.opacity = opacity;
+		if (this._map) {
+			this._updateOpacity();
+		}
+
+		return this;
+	},
+
+	_updateOpacity: function () {
+		var opacity = this.options.opacity;
+		L.DomUtil.setOpacity(this._container, opacity);
+	},
+
+	_bringToFront: function () {
+		this._updateZIndex(this.options.riseOffset);
+	},
+
+	_resetZIndex: function () {
+		this._updateZIndex(0);
+	}
+});
+
+L.cursor = function (latlng, options) {
+	return new L.Cursor(latlng, options);
+};
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 1fe5013..79324bb 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -576,8 +576,7 @@ L.TileLayer = L.GridLayer.extend({
 				this._map.removeLayer(this._cursorMarker);
 
 			var latlngs = L.rectangle(this._cursorBounds).getLatLngs();
-			// TODO replace for a blinking cursor image.
-			this._cursorMarker = L.polyline(latlngs.concat([latlngs[0]]));
+			this._cursorMarker = L.cursor(latlngs[2], {color: 'red'});
 			this._map.addLayer(this._cursorMarker);
 		}
 		else {