nakarte

commit a02905431024aebd1bd2d2f026273386f9e4e714
parent f59a774fc4327fb903fc231a2272a58de9727c08
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Wed,  9 May 2018 14:16:42 +0300

added factories for controls: single button and button with bar #64

Diffstat:
M
src/lib/leaflet.control.commons/index.js
 | 
51
++++++++++++++++++++++++++++++++++++++++++++++-----
A
src/lib/leaflet.control.commons/style.css
 | 
26
++++++++++++++++++++++++++

2 files changed, 72 insertions(+), 5 deletions(-)
diff --git a/src/lib/leaflet.control.commons/index.js b/src/lib/leaflet.control.commons/index.js
@@ -1,11 +1,51 @@
 import L from 'leaflet';
+import './style.css';
+
+
+function stopContainerEvents(container) {
+    L.DomEvent.disableClickPropagation(container);
+    L.DomEvent.disableScrollPropagation(container);
+    L.DomEvent.on(container, 'mousemove contextmenu', L.DomEvent.stop);
+}
 
 L.Control.include({
     _stopContainerEvents: function() {
-        const container = this._container;
-        L.DomEvent.disableClickPropagation(container);
-        L.DomEvent.disableScrollPropagation(container);
-        L.DomEvent.on(container, 'mousemove contextmenu', L.DomEvent.stop);
-
+        stopContainerEvents(this._container);
     }
 });
+
+function makeButton(containerClass, title, iconClass, noControlClass) {
+    let cls = 'leaflet-bar leaflet-control-single-button';
+    if (!noControlClass) {
+        cls += ' leafletControl';
+    }
+    if (containerClass) {
+        cls += ' ' + containerClass;
+    }
+    const container = L.DomUtil.create('div', cls);
+    stopContainerEvents(container);
+    const link = L.DomUtil.create('a', null, container);
+    link.href = '#';
+    L.DomEvent.on(link, 'click', L.DomEvent.preventDefault);
+    if (title) {
+        link.title = title;
+    }
+    const icon = L.DomUtil.create('div', iconClass, link);
+    return {container, link, icon};
+}
+
+function makeButtonWithBar(containerClass, title, iconClass) {
+    let cls = 'leaflet-control button-with-bar';
+    if (containerClass) {
+        cls += ' ' + containerClass;
+    }
+    const container = L.DomUtil.create('div', cls);
+    const {container: buttonContainer, link, icon} = makeButton(null, title, iconClass, true);
+    container.appendChild(buttonContainer);
+
+    const barContainer = L.DomUtil.create('div', 'leaflet-bar bar', container);
+    stopContainerEvents(barContainer);
+    return {container, buttonContainer, link, icon, barContainer}
+}
+
+export {stopContainerEvents, makeButton, makeButtonWithBar};
+\ No newline at end of file
diff --git a/src/lib/leaflet.control.commons/style.css b/src/lib/leaflet.control.commons/style.css
@@ -0,0 +1,25 @@
+.leaflet-control-single-button {
+    float: left;
+}
+
+.leaflet-control-single-button a div {
+    background-size: 62%;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    width: 100%;
+    height: 100%;
+}
+
+.button-with-bar .bar {
+    display: none;
+    float: left;
+    margin-left: 6px;
+
+    background-color: white;
+    border-radius: 4px;
+    padding: 4px 6px 4px 6px;
+}
+
+.button-with-bar.active .bar {
+    display: block;
+}
+\ No newline at end of file