commit 344306b614882062ef61bd196dbd8bb9281c603f
parent 258215e06cc16048c240dbc4c720b9297007a00b
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Wed, 9 May 2018 15:05:20 +0300
azimuth control: simplify interface, use button with bar factory #64
Diffstat:
4 files changed, 30 insertions(+), 104 deletions(-)
diff --git a/src/lib/leaflet.control.azimuth/control.html b/src/lib/leaflet.control.azimuth/control.html
@@ -1,11 +1,4 @@
<div class="contents">
- <div class="left-buttons">
- <div class="button-minimize" data-bind="click: onMinimizeButtonClick"
- title="Minimize"></div>
- <div class="button-minimize icon-on-off"
- data-bind="click: onEnableButtonClick, css: {'state-on': _enabled()}"
- title="Switch draw by click on/off"></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
@@ -1,6 +1,6 @@
import L from 'leaflet';
import ko from 'knockout';
-import 'lib/leaflet.control.commons';
+import {makeButtonWithBar} from 'lib/leaflet.control.commons';
import layout from './control.html';
import 'lib/controls-styles/controls-styles.css';
import './style.css';
@@ -55,7 +55,6 @@ 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);
@@ -84,23 +83,24 @@ L.Control.Azimuth = L.Control.extend({
onAdd: function(map) {
this._map = map;
- const container = this._container =
- L.DomUtil.create('div', 'leaflet-control leaflet-control-button leaflet-control-azimuth');
- this._stopContainerEvents();
- container.innerHTML = layout;
- container.title = "Measure bearing, display line of sight";
- ko.applyBindings(this, container);
- L.DomEvent.on(container, 'click', this.onClick, this);
+ const {container, link, barContainer} = makeButtonWithBar(
+ 'leaflet-control-azimuth', 'Measure bearing, display line of sight', 'icon-azimuth');
+ this._container = container;
+ L.DomEvent.on(link, 'click', this.onClick, this);
+
+ barContainer.innerHTML = layout;
+ ko.applyBindings(this, barContainer);
return container;
},
onClick: function() {
- this.setExpanded(true);
+ if (this.isEnabled()) {
+ this.disableControl();
+ } else {
+ this.enableControl();
+ }
},
- onMinimizeButtonClick: function(e) {
- setTimeout(() => this.setExpanded(false), 0);
- },
onMarkerDrag: function(e) {
const marker = e.target;
@@ -113,46 +113,27 @@ 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);
+ enableControl: function() {
+ L.DomUtil.addClass(this._container, 'active');
+ L.DomUtil.addClass(this._map._container, 'azimuth-control-active');
+ this._map.on('click', this.onMapClick, this);
+ this.fire('enabled');
+ this._map.clickLocked = true;
+ this._enabled = true;
},
- setEnabled: function(enabled) {
- if (!!enabled === this.isEnabled()) {
- return;
- }
- if (enabled) {
- L.DomUtil.addClass(this._map._container, 'azimuth-control-active');
- this._map.on('click', this.onMapClick, this);
- this.fire('enabled');
- } else {
- L.DomUtil.removeClass(this._map._container, 'azimuth-control-active');
- this._map.off('click', this.onMapClick, this);
- }
- this._map.clickLocked = enabled;
- this._enabled(!!enabled);
+ disableControl: function() {
+ L.DomUtil.removeClass(this._container, 'active');
+ this.hideProfile();
+ this.setPoints({start: null, end: null});
+ L.DomUtil.removeClass(this._map._container, 'azimuth-control-active');
+ this._map.off('click', this.onMapClick, this);
+ this._map.clickLocked = false;
+ this._enabled = false;
},
isEnabled: function() {
- return !!this._enabled();
- },
-
- onEnableButtonClick: function() {
- this.setEnabled(!this.isEnabled());
- },
-
- isExpanded: function() {
- return L.DomUtil.hasClass(this._container, 'expanded');
+ return !!this._enabled;
},
setPoints: function(points) {
diff --git a/src/lib/leaflet.control.azimuth/on-off-power-button.svg b/src/lib/leaflet.control.azimuth/on-off-power-button.svg
@@ -1,11 +0,0 @@
-<?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
@@ -1,42 +1,5 @@
-.leaflet-control-azimuth {
+.icon-azimuth {
background-image: url('compass-pointing-north-east.svg');
- background-size: 16px 16px;
- user-select: none;
-}
-
-.leaflet-control-azimuth.expanded:hover {
- background-color: white;
-}
-
-.leaflet-control-azimuth .contents {
- display: none;
-}
-
-.leaflet-control-azimuth.expanded .contents {
- display: block;
-}
-
-.leaflet-control-azimuth.expanded {
- background-image: none;
- width: auto;
- height: auto;
- padding: 6px 6px;
- overflow: hidden;
-}
-
-.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{
