nakarte

Source code of https://map.sikmir.ru (fork)
git clone git://git.sikmir.ru/nakarte
Log | Files | Refs | LICENSE

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:
Msrc/lib/leaflet.control.azimuth/control.html | 7-------
Msrc/lib/leaflet.control.azimuth/index.js | 77+++++++++++++++++++++++++++++------------------------------------------------
Dsrc/lib/leaflet.control.azimuth/on-off-power-button.svg | 11-----------
Msrc/lib/leaflet.control.azimuth/style.css | 39+--------------------------------------
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{