commit 04af06ac009e1f9a30f3ec62e99424968382fa4a
parent c3b3e6d21c7d6919ef55050815c54bfc76d226b8
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Sun, 26 Mar 2017 20:15:59 +0300
[azimuth] azimuth and track edit disable each other when activated
Diffstat:
6 files changed, 61 insertions(+), 12 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -111,11 +111,12 @@ function setUp() {
L.DomEvent.on(window, 'beforeunload', () => tracklist.saveTracksToStorage());
- tracklist.on('startedit elevation-shown', () => azimuthControl.setEnabled(false));
+ tracklist.on('startedit', () => azimuthControl.setEnabled(false));
+ tracklist.on('elevation-shown', () => azimuthControl.hideProfile());
azimuthControl.on('enabled', () => {
tracklist.stopEditLine();
- tracklist.hideElevationProfile();
- })
+ });
+ azimuthControl.on('elevation-shown', () => tracklist.hideElevationProfile());
}
export default {setUp};
diff --git a/src/lib/leaflet.control.azimuth/control.html b/src/lib/leaflet.control.azimuth/control.html
@@ -1,5 +1,9 @@
<div class="contents">
- <div class="button-minimize" data-bind="click: onMinimizeButtonClick"></div>
+ <div class="left-buttons">
+ <div class="button-minimize" data-bind="click: onMinimizeButtonClick"></div>
+ <div class="button-minimize icon-on-off"
+ data-bind="click: onEnableButtonClick, css: {'state-on': _enabled()}"></div>
+ </div>
<table>
<tr>
<td>True azimuth</td>
diff --git a/src/lib/leaflet.control.azimuth/index.js b/src/lib/leaflet.control.azimuth/index.js
@@ -55,6 +55,7 @@ L.Control.Azimuth = L.Control.extend({
initialize: function(options) {
L.Control.prototype.initialize.call(this, options);
+ this._enabled = ko.observable(false);
this.trueAzimuth = ko.observable(null);
this.magneticAzimuth = ko.observable(null);
this.distance = ko.observable(null);
@@ -94,11 +95,11 @@ L.Control.Azimuth = L.Control.extend({
},
onClick: function() {
- this.setEnabled(true);
+ this.setExpanded(true);
},
onMinimizeButtonClick: function(e) {
- setTimeout(() => this.setEnabled(false), 0);
+ setTimeout(() => this.setExpanded(false), 0);
},
onMarkerDrag: function(e) {
@@ -112,25 +113,44 @@ L.Control.Azimuth = L.Control.extend({
}
},
+ setExpanded: function(expanded) {
+ if (!!expanded === this.isExpanded()) {
+ return;
+ }
+ if (expanded) {
+ L.DomUtil.addClass(this._container, 'expanded');
+ } else {
+ L.DomUtil.removeClass(this._container, 'expanded');
+ this.hideProfile();
+ this.setPoints({start: null, end: null});
+ }
+ this.setEnabled(expanded);
+ },
+
setEnabled: function(enabled) {
if (!!enabled === this.isEnabled()) {
return;
}
if (enabled) {
- L.DomUtil.addClass(this._container, 'expanded');
L.DomUtil.addClass(this._map._container, 'azimuth-control-active');
this._map.on('click', this.onMapClick, this);
this.fire('enabled');
} else {
- L.DomUtil.removeClass(this._container, 'expanded');
L.DomUtil.removeClass(this._map._container, 'azimuth-control-active');
this._map.off('click', this.onMapClick, this);
- this.setPoints({start: null, end: null});
- this.hideProfile();
}
+ this._enabled(!!enabled);
},
isEnabled: function() {
+ return !!this._enabled();
+ },
+
+ onEnableButtonClick: function() {
+ this.setEnabled(!this.isEnabled());
+ },
+
+ isExpanded: function() {
return L.DomUtil.hasClass(this._container, 'expanded');
},
@@ -210,6 +230,7 @@ L.Control.Azimuth = L.Control.extend({
sightLine: true
});
this.elevationControl.on('remove', () => this.elevationControl = null);
+ this.fire('elevation-shown');
},
diff --git a/src/lib/leaflet.control.azimuth/on-off-power-button.svg b/src/lib/leaflet.control.azimuth/on-off-power-button.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
+<g>
+ <path style="fill:#777;" d="M10.5,1.674V4c1.215,0.912,2,2.364,2,4c0,2.762-2.238,5-5,5s-5-2.238-5-5c0-1.636,0.785-3.088,2-4
+ V1.674C2.135,2.797,0.5,5.208,0.5,8c0,3.866,3.134,7,7,7s7-3.134,7-7C14.5,5.208,12.865,2.797,10.5,1.674z"/>
+ <path style="fill:#777;" d="M8.5,7.003V0.997C8.5,0.446,8.056,0,7.5,0c-0.553,0-1,0.453-1,0.997v6.006C6.5,7.554,6.944,8,7.5,8
+ C8.053,8,8.5,7.547,8.5,7.003z"/>
+</g>
+</svg>
diff --git a/src/lib/leaflet.control.azimuth/style.css b/src/lib/leaflet.control.azimuth/style.css
@@ -24,10 +24,21 @@
overflow: hidden;
}
-.leaflet-control-azimuth .button-minimize {
+.leaflet-control-azimuth .left-buttons {
float: left;
}
+.leaflet-control-azimuth .icon-on-off {
+ background-image: url('on-off-power-button.svg') !important;
+ background-size: 14px;
+ position: relative;
+ top: 10px;
+}
+
+.leaflet-control-azimuth .state-on {
+ background-color: #99d5ff;
+}
+
.leaflet-control-azimuth table{
border-collapse: collapse;
line-height: 16px;
@@ -38,6 +49,7 @@
.leaflet-control-azimuth td:last-child {
padding-left: 4px;
text-align: center;
+ width: 5.5em;
}
.leaflet-control-azimuth .buttons {
diff --git a/src/lib/leaflet.control.layers.minimize/style.css b/src/lib/leaflet.control.layers.minimize/style.css
@@ -1,4 +1,4 @@
-.button-minimize {
+.leaflet-control-layers .button-minimize {
float: right;
}
