Новый вариант отображения окна маршрута

ground/views/indexTemplate.php

@@ -7,7 +7,7 @@
 
 	<div class="glyphicon glyphicon-globe _t boxButtonLayers" onclick="openBox('Layers')" title="Слои карты"></div>
 	<div class="glyphicon glyphicon-flag _b" title="Я на карте" onclick="showMeOnTheMap()"></div>
-	<div class="glyphicon glyphicon-list" title="Маршрут" onclick="$('#myRoutesWindow').hide(200);$('#routeWindow').toggle(200)"></div>
+	<div class="glyphicon glyphicon-list boxButtonRoute" title="Маршрут" onclick="openBox('Route')"></div>
 
 
 	<?php if ($user): ?>
@@ -38,22 +38,17 @@
 		<h3>Карты</h3>
 		Layers
 	</div>
-	<div id="boxUser">
+	<div id="boxRoute">
-		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
+		<h3>Маршрут</h3>
-	</div>
-</div>
-<div id="routeWindow" class="popover fade in">
-	<h3 class="popover-title">Мой маршрут <b id="routeDistance"></b></h3>
-	<div class="popover-content">
 		<div id="wayPoints"></div>
-	</div>
-	<div class="buttons" style="padding: 3px 14px;">
-		<button class="btn btn-default" type="button" onclick="$('#routeWindow').toggle(200)">Скрыть</button>
 		<?php if ($user): ?>
 			<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload"></span> Сохранить</button>
 		<?php endif; ?>
 		<button class="btn btn-info" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
 	</div>
+	<div id="boxUser">
+		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
+	</div>
 </div>
 <?php if ($user): ?>
 <div id="myRoutesWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto; max-width: none;">

public/css/style.css

@@ -23,14 +23,11 @@ div.add {cursor: pointer;}
 #wayPoints .wayPoint {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
 #wayPoints .wayPoint span {font-weight: bold; color: red;}
 
-#routeWindow {display: none;position: absolute; top: 35px; right: 7px; left: auto; max-width: none; width: 345px; bottom: 55px;}
-#routeWindow .popover-content {overflow-y: scroll; bottom: 45px; position: absolute; top: 36px; width: 342px;}
-#routeWindow .buttons {bottom: 3px; position: absolute;}
 #routes {margin-bottom: 10px; height: 200px; background-color: #ff9999;}
 #routes .route {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
 #routes .route span {font-weight: bold; color: red;}
 
-
+/*Controls for BOX*/
 div#control {width: 50px; position: absolute; top: 0; right: 0;bottom: 50px; color: white; font-size: 20px; padding-top: 10px;}
 body.openBox div#control {right: 250px;}
 div#control div {background-color: rgba(15, 15, 15, 0.65); border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px;}
@@ -42,8 +39,12 @@ div#control div._c {border-radius: 0; border-bottom: solid 1px #666; margin-bott
 div#control div._b {border-radius: 0 0 0 8px;}
 div#control div.space {height: 10px; background-color: transparent; padding: 0;}
 
-
+/*BOX*/
 body.openBox div#box {display: block;}
 div#box {width: 250px; display: none; position: absolute; top: 0; right: 0;bottom: 0px; border-left: 2px solid rgba(45, 45, 45, 0.8); padding: 0 7px;}
 div#box #boxClose {position: absolute; right: 7px; top: 7px; color: #999; font-size: 18px; font-weight: bolder; cursor: pointer;}
 div#box div {display: none;}
+div#box div > div{display: block;}
+
+/*Leaflet FIX*/
+.leaflet-popup-content-wrapper .leaflet-popup-scrolled {border-bottom: none;border-top: none;}

public/js/main.js

@@ -156,7 +156,7 @@ function init() {
 	$("#wayPoints").disableSelection();
 
     myMap.on('moveend', function(e) {
-        if (!myMap._popup && $('#routeWindow').css('display') == 'none')
+        if (!myMap._popup && $('#boxRoute').css('display') == 'none')
         {
             history.pushState({}, document.title, "/?lat=" + myMap.getCenter().lat + "&lng=" + myMap.getCenter().lng + "&zoom=" + myMap.getZoom());
         }
@@ -248,7 +248,7 @@ function showInfo(id)
 				description = description + '</div>';
                 
                 marker.options.description = description;
-                marker.bindPopup(marker.options.description, {maxWidth: 500}).openPopup();
+                marker.bindPopup(marker.options.description, {maxWidth: 500, maxHeight: 300}).openPopup();
 			}
 		});
 	}
@@ -558,7 +558,7 @@ function addToRoute(id)
 	console.log(points[id]);
 	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].options.title + '</div>');
 	myMap._popup._close();
-	$('#routeWindow').show(200);
+	openBox('Route', true);
 	return true;
 }
 
@@ -605,17 +605,18 @@ function editSetNewCoords()
 	setStatus(statusReHunting)
 }
 
-function openBox(type)
+function openBox(type, keepOpen)
 {
 	newTab = $('#box'+type).css('display') == 'none';
+	keepOpen = keepOpen == true;
 
-	if (!newTab)
+	if (!newTab && !keepOpen)
 	{
 		return closeBox();
 	}
 
 	$('div','#control').removeClass('active');
-	$('div','#box').css('display', 'none');
+	$('#box').children('div').css('display', 'none');
 
 	$('.boxButton'+type).addClass('active');
 	$('#box'+type).css('display', 'block');
@@ -626,7 +627,7 @@ function closeBox()
 {
 	$('body').removeClass('openBox');
 	$('div','#control').removeClass('active');
-	$('div','#box').css('display', 'none');
+	$('#box').children('div').css('display', 'none');
 
 	return true;
 }