commit 745a8fc3dee03304e74fb2ee302baff112d8aa70
parent 61cae8cba702c1a47bce3c58261433a5ce5349ef
Author: Igor Sidorov <igor.sidorov@onapp.com>
Date: Fri, 8 Jun 2018 08:26:10 +0300
More compact UI for coordinates
Diffstat:
3 files changed, 42 insertions(+), 16 deletions(-)
diff --git a/src/lib/leaflet.control.coordinates/coordinates.css b/src/lib/leaflet.control.coordinates/coordinates.css
@@ -16,12 +16,28 @@
float: right;
}
+.leaflet-coordinates-wrapper-signed-degrees {
+ min-width: 11em;
+}
+
+.leaflet-coordinates-wrapper-degrees {
+ min-width: 14em;
+}
+
+.leaflet-coordinates-wrapper-degrees-and-minutes {
+ min-width: 14.5em;
+}
+
+.leaflet-coordinates-wrapper-degrees-and-minutes-and-seconds {
+ min-width: 16em;
+}
+
.leaflet-coordinates-container {
- padding: 3px 5px;
+ padding: 0 5px;
}
-.leaflet-coordinates-format {
- padding: 2px 0;
+.leaflet-coordinates-longitude {
+ float: right;
}
.leaflet-coordinates-format-radio {
@@ -33,5 +49,5 @@
border: none;
border-top: 1px solid #eee;
margin-top: 0px;
- margin-bottom: 6px;
+ margin-bottom: 3px;
}
diff --git a/src/lib/leaflet.control.coordinates/formats.js b/src/lib/leaflet.control.coordinates/formats.js
@@ -43,6 +43,7 @@ function transform(latlng, format) {
const SIGNED_DEGREES = {
code: 'd',
label: '±ddd.ddddd',
+ wrapperClass: 'leaflet-coordinates-wrapper-signed-degrees',
process: (latlng) => {
return transform(latlng, ({signedDegrees}) => signedDegrees);
}
@@ -51,6 +52,7 @@ const SIGNED_DEGREES = {
const DEGREES = {
code: 'D',
label: 'ddd.ddddd°',
+ wrapperClass: 'leaflet-coordinates-wrapper-degrees',
process: (latlng) => {
return transform(latlng, ({degrees, direction}) => {
return `${direction} ${degrees}°`;
@@ -61,6 +63,7 @@ const DEGREES = {
const DEGREES_AND_MINUTES = {
code: 'DM',
label: 'ddd°mm.mmm′',
+ wrapperClass: 'leaflet-coordinates-wrapper-degrees-and-minutes',
process: (latlng) => {
return transform(latlng, ({intDegrees, minutes, direction}) => {
return `${direction} ${intDegrees}°${minutes}′`;
@@ -71,6 +74,7 @@ const DEGREES_AND_MINUTES = {
const DEGREES_AND_MINUTES_AND_SECONDS = {
code: 'DMS',
label: 'ddd°mm′ss.s″',
+ wrapperClass: 'leaflet-coordinates-wrapper-degrees-and-minutes-and-seconds',
process: (latlng) => {
return transform(latlng, ({intDegrees, intMinutes, seconds, direction}) => {
return `${direction} ${intDegrees}°${intMinutes}′${seconds}″`;
diff --git a/src/lib/leaflet.control.coordinates/index.js b/src/lib/leaflet.control.coordinates/index.js
@@ -46,6 +46,10 @@ L.Control.Coordinates = L.Control.extend({
return UNKNOWN_COORDINATES;
}, this);
+ this.wrapperClass = ko.pureComputed(() => {
+ return this.format().wrapperClass;
+ }, this);
+
this.formatCode.subscribe((_) => {
this.saveStateToStorage();
}, this);
@@ -63,18 +67,19 @@ L.Control.Coordinates = L.Control.extend({
this._link = link;
barContainer.innerHTML = `
- <div class="leaflet-coordinates-container" data-bind="with: formattedCoordinates()">
- <span data-bind="html: lat"></span>
-
- <span data-bind="html: lng"></span>
- </div>
- <hr class="leaflet-coordinates-divider" />
- <div data-bind="foreach: formats">
- <div class="leaflet-coordinates-format">
- <label>
- <input type="radio" data-bind="checked: $parent.formatCode, value: code" class="leaflet-coordinates-format-radio"/>
- <span data-bind="html: label"></span>
- </label>
+ <div data-bind="css: wrapperClass">
+ <div class="leaflet-coordinates-container" data-bind="with: formattedCoordinates()">
+ <span class="leaflet-coordinates-latitude" data-bind="html: lat"></span>
+ <span class="leaflet-coordinates-longitude" data-bind="html: lng"></span>
+ </div>
+ <hr class="leaflet-coordinates-divider" />
+ <div data-bind="foreach: formats">
+ <div>
+ <label title="">
+ <input type="radio" data-bind="checked: $parent.formatCode, value: code" class="leaflet-coordinates-format-radio"/>
+ <span data-bind="html: label"></span>
+ </label>
+ </div>
</div>
</div>
`;
@@ -121,6 +126,7 @@ L.Control.Coordinates = L.Control.extend({
this._map[eventFunc]('mousemove', this.onMouseMove, this);
this._map[eventFunc]('contextmenu', this.onMapRightClick, this);
this._isEnabled = !!enabled;
+ this.latlng(null);
},
onMapRightClick: function(e) {
