layer-switcher: moved to sidebar #36

osmcz · Apr 12, 2016 · adcf224 · adcf224
1 parent 3d1c57b
commit adcf224
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -96,7 +96,7 @@ a:hover.as-text {
     z-index: 3000;
     max-width: 250px;
     display: block;
-    background: rgba(255,255,255,0.6);
+    background: rgba(255,255,255,0.8);
     font-size: 130%;
 
     position: absolute;
@@ -106,8 +106,28 @@ a:hover.as-text {
 #map-layers {
     right:0;
     width: 250px;
-    text-align: right;
+    text-align: left;
+    font-size: 13px;
+    display: none;
+}
+#map-layers h2 {
+  margin: 10px 0;
+}
+#map-layers label {
+  display: block;
 }
+a.leaflet-control-layers-toggle {
+    width: 46px;
+    height: 66px;
+    background-position: center 5px;
+    padding-top: 33px;
+    font-size: 10px;
+    color: #000 !important;
+    text-align: center;
+}
+a.leaflet-control-layers-toggle:before { content: "Mapové vrstvy"; }
+a.leaflet-control-layers-toggle:hover { text-decoration: none; }
+
 
 @media screen and (min-width: 768px) {
     #map-sidebar, #map-layers {
@@ -277,6 +297,7 @@ a:hover.as-text {
 }
 #main .jumbotron .close-overlay {
     font-size: 60px;
+    color: 333;
 }
 
 #main .jumbotron h1 img.osmlogo {

diff --git a/index.html b/index.html
@@ -126,20 +126,18 @@ <h2>Editace rozcestníku</h2>
             xxx left<br>
         </div>
     </div>
+  -->
+
     <div id="map-layers">
         <div class="sidebar-inner">
-            <button type="button" class="close" onclick="$(this).parent().parent().hide();"><span
+            <button type="button" class="close"><span
                     aria-hidden="true">&times;</span></button>
             <h2>Vrstvy</h2>
-            right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br>
-            right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br>
-            right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br>
-            right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br>
-            right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br>
-            right<br> right<br> right<br> right<br> right<br> xxxx right<br>
+            <p>V mapových vrstvách poznáte pravou sílu OpenStreetMap. Jednu mapovou databázi vykreslují různí dobrovolníci pro mnoho různých využití - od turistiky po lyžování.
+            <div id="map-layers-content">
+            </div>
         </div>
     </div>
-    -->
     <div id="map-searchbar">
     </div>
     <div id="map"></div>

diff --git a/js/layer-switcher.js b/js/layer-switcher.js
@@ -80,10 +80,17 @@ osmcz.LayerSwitcher = L.Control.extend({
 
 		var form = this._form = L.DomUtil.create('form', className + '-list');
 
+    $('#map-layers button.close').click(function(){
+      $('#map-layers').hide();
+      $(container).show();
+    });
+
+
 		if (this.options.collapsed) {
 			if (!L.Browser.android) {
 				L.DomEvent
-				    .on(container, 'mouseover', this._expand, this)
+            .on(container, 'click', this._expand, this)  //osmcz
+            //.on(container, 'mouseover', this._expand, this)
 				    .on(container, 'mouseout', this._collapse, this);
 			}
 			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
@@ -113,7 +120,8 @@ osmcz.LayerSwitcher = L.Control.extend({
 		this._separator = L.DomUtil.create('div', className + '-separator', form);
 		this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
 
-		container.appendChild(form);
+    //container.appendChild(form);
+    $('#map-layers-content').append(form);
 	},
 
 	_addLayer: function (layer, name, overlay) {
@@ -241,12 +249,14 @@ osmcz.LayerSwitcher = L.Control.extend({
 	},
 
 	_expand: function () {
+    $('#map-layers').show();
+    $(this._container).hide();
 
-		L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+		//L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
 	},
 
 	_collapse: function () {
-		this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+		//this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
 	}
 });