nakarte

commit a7b3245636ab9f487b0b08ac4d5024e1b3d11bb8
parent ac95ac12eece0c00dc79c3e8132101ba6aad8f1a
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Wed,  9 May 2018 14:18:34 +0300

panoramas control: use button with bar factory #64

Diffstat:
M
src/lib/leaflet.control.panoramas/index.js
 | 
33
++++++++++++++++++++-------------
M
src/lib/leaflet.control.panoramas/style.css
 | 
22
+++++-----------------

2 files changed, 25 insertions(+), 30 deletions(-)
diff --git a/src/lib/leaflet.control.panoramas/index.js b/src/lib/leaflet.control.panoramas/index.js
@@ -1,8 +1,10 @@
 import L from 'leaflet';
-import './style.css';
-import 'lib/controls-styles/controls-styles.css';
 import ko from 'vendored/knockout';
 import googleProvider from './lib/google';
+
+import './style.css';
+import 'lib/controls-styles/controls-styles.css';
+import {makeButtonWithBar} from 'lib/leaflet.control.commons';
 import mapillaryProvider from './lib/mapillary';
 import wikimediaProvider from './lib/wikimedia';
 
@@ -86,15 +88,20 @@ L.Control.Panoramas = L.Control.extend({
 
         onAdd: function(map) {
             this._map = map;
-            const container = this._container = L.DomUtil.create('div', 'leaflet-control leaflet-contol-panoramas');
-            container.innerHTML = `
-                <a name="button" class="panoramas-button leaflet-control-button icon-panoramas" title="Show panoramas"
-                    data-bind="click: onButtonClick"></a>
-                <div class="panoramas-list control-form" data-bind="foreach: providers">
-                    <div><label><input type="checkbox" data-bind="checked: selected"><span data-bind="text: title"></span></label></div>
-                </div>
-            `;
-            this._stopContainerEvents();
+            const {container, link, barContainer} = makeButtonWithBar(
+                'leaflet-contol-panoramas', 'Show panoramas', 'icon-panoramas');
+            this._container = container;
+            L.DomEvent.on(link, 'click', this.onButtonClick, this);
+            barContainer.innerHTML = `
+                 <div class="panoramas-list" data-bind="foreach: providers">
+                     <div>
+                         <label>
+                             <input type="checkbox" data-bind="checked: selected"><span data-bind="text: title"></span>
+                         </label>
+                     </div>
+                 </div>
+             `;
+
             ko.applyBindings(this, container);
             map.createPane('rasterOverlay').style.zIndex = 300;
             return container;
@@ -113,7 +120,7 @@ L.Control.Panoramas = L.Control.extend({
                 return;
             }
             this.controlEnabled = true;
-            L.DomUtil.addClass(this._container, 'enabled');
+            L.DomUtil.addClass(this._container, 'active');
             this.updateCoverageVisibility();
             this._map.on('click', this.onMapClick, this);
             L.DomUtil.addClass(this._map._container, 'panoramas-control-active');
@@ -125,7 +132,7 @@ L.Control.Panoramas = L.Control.extend({
                 return;
             }
             this.controlEnabled = false;
-            L.DomUtil.removeClass(this._container, 'enabled');
+            L.DomUtil.removeClass(this._container, 'active');
             this.updateCoverageVisibility();
             this._map.off('click', this.onMapClick, this);
             this.hidePanoViewer();
diff --git a/src/lib/leaflet.control.panoramas/style.css b/src/lib/leaflet.control.panoramas/style.css
@@ -1,30 +1,20 @@
 .icon-panoramas {
     background-image: url('panoramas-off.png');
+    background-size: 17px 17px !important;
 }
 
-.leaflet-contol-panoramas.enabled .icon-panoramas {
-    background-image: url('panoramas-on.png');
+.leaflet-touch .icon-panoramas {
+    background-size: 62% 62% !important;
 }
 
-
-.panoramas-list, .panoramas-button {
-    float: left;
-}
-
-.panoramas-list {
-    margin-left: 6px;
-    padding-left: 6px !important;
-    display: none;
+.leaflet-contol-panoramas.active .icon-panoramas {
+    background-image: url('panoramas-on.png');
 }
 
 .panoramas-list input, .panoramas-list label {
     vertical-align: bottom;
 }
 
-.leaflet-contol-panoramas.enabled .panoramas-list {
-    display: block;
-}
-
 .panorama-container {
     width: 100%;
     height: 100%;
@@ -71,6 +61,4 @@
     background-size: 12px 12px;
     width: 12px !important;
     height: 12px !important;
-    /*margin-left: -5px;*/
-    /*margin-top: -5px;*/
 }