Новый вариант управления - первая попытка
This commit is contained in:
parent
7e4f127df8
commit
32b9aa22f9
|
|
@ -1,4 +1,47 @@
|
|||
<div id="map"></div>
|
||||
<div id="control">
|
||||
<div class="glyphicon glyphicon-info-sign boxButtonInfo" title="Информация" onclick="openBox('Info')"></div>
|
||||
|
||||
<div class="glyphicon glyphicon-plus big _t" title="Приблизить" onclick="myMap.zoomIn()"></div>
|
||||
<div class="glyphicon glyphicon-minus big _b" title="Отдалить" onclick="myMap.zoomOut()"></div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<?php if ($user): ?>
|
||||
<div class="glyphicon glyphicon-map-marker _t" id="addPointButton" title="Добавить точку" onclick="activateAddPoint()"></div>
|
||||
<div class="glyphicon glyphicon-cloud-download _c" onclick="$('#routeWindow').hide(200);$('#myRoutesWindow').toggle(200);" title="Мои маршруты"></div>
|
||||
<div class="glyphicon glyphicon-user _b" onclick="" title="Профиль"></div>
|
||||
<?php else:?>
|
||||
<div class="glyphicon glyphicon-user" id="loginButton" onclick="$('#loginModal').modal('show');" title="Войти для добавления точки"></div>
|
||||
<?php endif;?>
|
||||
</div>
|
||||
<div id="box">
|
||||
<span id="boxClose" onclick="closeBox();">×</span>
|
||||
<div id="boxInfo">
|
||||
<h3>Информация</h3>
|
||||
<a onclick="$('#aboutModal').modal('show');" href="#">О проекте</a><br/>
|
||||
<a onclick="$('#howToUseModal').modal('show');" href="#">Как пользоваться</a><br/>
|
||||
<a onclick="$('#categoriesModal').modal('show');" href="#">Легенда</a><br/>
|
||||
<a href="/page/points">Список точек</a><br/>
|
||||
<br/>
|
||||
<span class="input-group">
|
||||
<input type="text" id="addressField" class="form-control" placeholder="Поиск на карте..." onkeydown="if(event.keyCode == 13) {searchAdderess()}" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" onclick="searchAdderess()"><span class="glyphicon glyphicon-search"></span></button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="boxLayers">
|
||||
<h3>Карты</h3>
|
||||
Layers
|
||||
</div>
|
||||
<div id="boxUser">
|
||||
<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="routeWindow" class="popover fade in">
|
||||
<h3 class="popover-title">Мой маршрут <b id="routeDistance"></b></h3>
|
||||
<div class="popover-content">
|
||||
|
|
@ -29,38 +72,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div id="footer">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td width="30%">
|
||||
<div class="input-group">
|
||||
<input type="text" id="addressField" class="form-control" placeholder="Поиск на карте..." onkeydown="if(event.keyCode == 13) {searchAdderess()}" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" onclick="searchAdderess()"><span class="glyphicon glyphicon-search"></span></button>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-default" type="button" onclick="$('#myRoutesWindow').hide(200);$('#routeWindow').toggle(200)"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>
|
||||
<?php if ($user): ?>
|
||||
<button class="btn btn-default" type="button" onclick="$('#routeWindow').hide(200);$('#myRoutesWindow').toggle(200);"><span class="glyphicon glyphicon-cloud-download"></span> Мои маршруты</button>
|
||||
<?php endif; ?>
|
||||
<button class="btn btn-default" type="button" onclick="showMeOnTheMap()"><span class="glyphicon glyphicon-screenshot"></span> Я на карте</button>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<?php if ($user): ?>
|
||||
<button class="btn btn-default" type="button" id="addPointButton" onclick="activateAddPoint()"><span class="glyphicon glyphicon-plus-sign"></span> Добавить точку</button>
|
||||
<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
|
||||
<?php else:?>
|
||||
<button class="btn btn-success" type="button" id="loginButton" onclick="$('#loginModal').modal('show');"><span class="glyphicon glyphicon-user"></span> Войти для добавления точки</button>
|
||||
<?php endif;?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<?= $user ? '' : self::renderPartial('modals/login.php', null, true) ?>
|
||||
<?= $user ? self::renderPartial('modals/addPoint.php', array('categories' => $categories), true) : '' ?>
|
||||
<?= self::renderPartial('modals/categories.php', array('categories' => $categories), true) ?>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,6 @@
|
|||
<body>
|
||||
<div class="header">
|
||||
<h1>WikiPoints</h1>
|
||||
<span class="mainMenu">
|
||||
<a onclick="$('#aboutModal').modal('show');" href="#">О проекте</a>
|
||||
|
|
||||
<a onclick="$('#howToUseModal').modal('show');" href="#">Как пользоваться</a>
|
||||
|
|
||||
<a onclick="$('#categoriesModal').modal('show');" href="#">Легенда</a>
|
||||
|
|
||||
<a href="/page/points">Список точек</a>
|
||||
</span>
|
||||
</div>
|
||||
<?= isset($content) && !empty($content) ? $content : 'No content =(' ?>
|
||||
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="Информация о проекте" aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -8,18 +8,14 @@
|
|||
|
||||
html {height: 100%;}
|
||||
body {margin: 0; padding: 0; height: 100%;}
|
||||
div#map {width: 100%; position: absolute; top: 0; bottom: 50px;}
|
||||
div#map {width: 100%; position: absolute; top: 0; bottom: 0px;}
|
||||
body.openBox div#map {right: 250px;}
|
||||
div.infoCard h3 {text-align: center; margin-top: 0;}
|
||||
div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0;}
|
||||
div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
|
||||
div.header h1 {display: inline; color: #333; cursor: default;}
|
||||
div.header span.mainMenu {display: none;}
|
||||
div.header:hover span.mainMenu {display: block;}
|
||||
div.add {cursor: pointer;}
|
||||
|
||||
div#footer {position: absolute; width: 100%; height: 50px; bottom: 0; padding: 12px 10px 0 10px;;}
|
||||
div#footer table{}
|
||||
|
||||
.form-group .error {display: none;}
|
||||
.form-group.has-error .error {display: inline-block;}
|
||||
|
||||
|
|
@ -33,3 +29,21 @@ div#footer table{}
|
|||
#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;}
|
||||
|
||||
|
||||
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;}
|
||||
div#control div:hover {background-color: #000;}
|
||||
div#control div.active {background-color: rgb(255, 162, 0);}
|
||||
div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;}
|
||||
div#control div._t {border-radius: 8px 0 0 0;border-bottom: solid 1px #666; margin-bottom: 0;}
|
||||
div#control div._c {border-radius: 0; border-bottom: solid 1px #666; margin-bottom: 0;}
|
||||
div#control div._b {border-radius: 0 0 0 8px;}
|
||||
div#control div.space {height: 10px; background-color: transparent; padding: 0;}
|
||||
|
||||
|
||||
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;}
|
||||
|
|
@ -57,7 +57,7 @@ function getURLParameter(name) {
|
|||
* @returns true
|
||||
*/
|
||||
function init() {
|
||||
myMap = L.map('map').setView([51.505, -0.09], 13);
|
||||
myMap = L.map('map',{zoomControl: false}).setView([51.505, -0.09], 13);
|
||||
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
|
||||
maxZoom: 18
|
||||
|
|
@ -319,8 +319,8 @@ function showMeOnTheMap()
|
|||
*/
|
||||
function activateAddPoint()
|
||||
{
|
||||
$('#addPointButton').toggleClass('btn-success').toggleClass('btn-default');
|
||||
if ($('#addPointButton').hasClass('btn-success'))
|
||||
$('#addPointButton').toggleClass('active');
|
||||
if ($('#addPointButton').hasClass('active'))
|
||||
{
|
||||
$('#map').css('cursor', 'crosshair');
|
||||
setStatus(statusHunting)
|
||||
|
|
@ -604,3 +604,29 @@ function editSetNewCoords()
|
|||
$('#map').css('cursor', 'crosshair');
|
||||
setStatus(statusReHunting)
|
||||
}
|
||||
|
||||
function openBox(type)
|
||||
{
|
||||
newTab = $('#box'+type).css('display') == 'none';
|
||||
|
||||
if (!newTab)
|
||||
{
|
||||
return closeBox();
|
||||
}
|
||||
|
||||
$('div','#control').removeClass('active');
|
||||
$('div','#box').css('display', 'none');
|
||||
|
||||
$('.boxButton'+type).addClass('active');
|
||||
$('#box'+type).css('display', 'block');
|
||||
$('body').addClass('openBox');
|
||||
}
|
||||
|
||||
function closeBox()
|
||||
{
|
||||
$('body').removeClass('openBox');
|
||||
$('div','#control').removeClass('active');
|
||||
$('div','#box').css('display', 'none');
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue