Куски JS разнесены по разным файлам. При клике на картинку она увеличивается.

This commit is contained in:
Krivchikov Dmitry 2014-07-01 17:06:04 +04:00
parent 35a3712688
commit 43b5eccbb4
6 changed files with 35 additions and 224 deletions

View File

@ -10,6 +10,7 @@ class IndexController extends Controller
{
self::addScript('/js/jquery-2.1.0.min.js');
self::addScript('/js/jquery-ui-1.10.4.custom.min.js');
self::addScript('/js/bootstrap.min.js');
self::addScript('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js');
self::addScript('http://maps.google.com/maps/api/js?v=3&sensor=false');
@ -18,8 +19,10 @@ class IndexController extends Controller
self::addScript('http://api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU');
self::addScript('/js/tile/Yandex.js');
self::addScript('/js/main.js?ver='.App::getConfig('version'));
self::addScript('/js/bootstrap.min.js');
self::addScript('/js/app.js?ver='.App::getConfig('version'));
self::addScript('/js/map.js?ver='.App::getConfig('version'));
self::addScript('/js/route.js?ver='.App::getConfig('version'));
self::addStyle('/css/style.css?ver='.App::getConfig('version'));
self::addStyle('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css');
self::addStyle('/css/bootstrap.min.css');

View File

@ -41,6 +41,7 @@ class JsonController extends Controller
$point = new Point();
$point = $point->getByPK($id);
$point->descriptionHtml = nl2br($point->description);
$point->name = htmlspecialchars($point->name);
$categories = new Category();
$categories = $categories->getAll();

View File

@ -77,3 +77,4 @@
<?= $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) ?>
<?= self::renderPartial('modals/image.php', array(), true) ?>

View File

@ -0,0 +1,16 @@
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="imageModalLabel"></h4>
</div>
<div class="modal-body" style="text-align: center;">
<img src="" id="imageModalImg" style="max-width: 555px; max-height: 450px;" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>

View File

@ -11,7 +11,7 @@ body {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
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.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0; cursor: pointer;}
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.add {cursor: pointer;}

View File

@ -2,39 +2,6 @@
* Let's GO!
*/
// ------------ Система статусов приложения ------------------------------------
var statusReady = 0; // Обычный режим. Просмотр точек, навигация по карте и прочее.
var statusHunting = 1; // Курсор-прицел. Поиск места для добавления точки.
var statusReHunting = 2; // КУрсор прицел. Переопределение координат точки.
var statusAdd = 3; // Открыто окно добавления точки - форма.
var statusEdit = 4; // Открыто окно редактирования точки. В нём информация о существующей точке, включая ID.
var statusSendingToServer = 5; // Отправлен запрос на сервер - ждём, не даём жать кнопку повторно, отвлекаем пользователя.
var status = statusReady;
var statusPrev = statusReady;
/**
* Устанавливает новое значение статуса.
* @returns {undefined}
*/
function setStatus(value)
{
statusPrev = status;
status = value;
}
/**
* Меняет значение статуса на предыдущее.
* @returns {undefined}
*/
function resetStatus()
{
tmp = status;
status = statusPrev;
statusPrev = tmp;
}
// -----------------------------------------------------------------------------
$(document).ready(function(){init()});
var myMap;
var categories = Array();
@ -46,12 +13,6 @@ var addPointInProcess = false;
var layer;
var layers = Array();
// -------------------------------- Libs ---------------------------------------
function getURLParameter(name) {
return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]);
}
// -----------------------------------------------------------------------------
/**
@ -149,7 +110,7 @@ function constructPoint(data)
* Загружает точки с сервера.
* @returns {Boolean}
*/
function getPoints()
function initPoints()
{
$.ajax({
url: "/json/points/",
@ -192,7 +153,7 @@ function showInfo(id)
pointsSources[id] = data;
description = '<div class="infoCard">' +
'<h3>' + data.name + '</h3>' +
'<img src="' + data.img + '" />' +
'<img src="' + data.img + '" onclick="showImage(\''+ data.img +'\',\''+ data.name +'\')" />' +
'<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(' + id + ')">' +
'<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
'</button><br/>';
@ -233,12 +194,12 @@ function initCategories()
for (var k in data) {
categories[data[k]['id']] = L.icon({
iconUrl: data[k]['icon'],
iconSize: [32, 37], // size of the icon
iconAnchor: [16, 37], // point of the icon which will correspond to marker's location
popupAnchor: [0, 1] // point from which the popup should open relative to the iconAnchor
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, 1]
});
}
getPoints();
initPoints();
}
});
@ -280,11 +241,11 @@ function searchAdderess()
function showMeOnTheMap()
{
navigator.geolocation.getCurrentPosition(function(pos) {
points.im.geometry.setCoordinates([pos.coords.latitude, pos.coords.longitude]);
myMap.setCenter(points.im.geometry.getCoordinates());
//points.im.geometry.setCoordinates([pos.coords.latitude, pos.coords.longitude]);
myMap.setView([pos.coords.latitude, pos.coords.longitude], 15);
});
myMap.setCenter(points.im.geometry.getCoordinates());
//myMap.setCenter(points.im.geometry.getCoordinates());
}
/**
@ -406,154 +367,10 @@ function addPoint()
}
/**
* Строит маршрут по выбранным точкам.
* Включает режим редактирования точки.
* @param int id
* @returns {undefined}
*/
function buildRoute()
{
wayPoints = Array();
if (route)
myMap.geoObjects.remove(route);
$('#wayPoints div').each(function(i, el)
{
wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
});
ymaps.route(wayPoints, {
mapStateAutoApply: true
}).then(function(newRoute) {
route = newRoute;
route.options.set({
// в балуне выводим только информацию о времени движения с учетом пробок
balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
strokeColor: '9000ffff',
opacity: 0.9
});
myMap.geoObjects.add(route);
distance = Math.round(route.getLength() / 1000);
$('#routeDistance').text(distance + ' км.');
routeToURL();
});
}
/**
* Сохраняет маршрут на сервере.
* @returns {undefined}
*/
function saveRoute()
{
wayPoints = Array();
name = prompt('Как назвать маршрут?', 'Мой маршрут');
$('#wayPoints div').each(function(i, el)
{
wayPoints.push($(el).attr('pointId'));
});
if (name && name != '')
$.ajax({
type: "POST",
url: "/json/saveroute/",
data: {
name: name,
points: wayPoints
},
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data);
}
});
}
/**
* Формирует список точек маршрута из JSON.ы
* @param {JSON} data
* @returns {Boolean}
*/
function loadRouteJSON(data)
{
$('#wayPoints').text('');
response = JSON.parse(data);
for (var k in response)
{
addToRoute(response[k]);
}
return true;
}
/**
* Подгружает маршрут с заданныи ID с сервера.
* @param {Integer} id
* @returns {undefined}
*/
function loadRoute(id)
{
$('#myRoutesWindow').hide(200);
$.ajax({
url: "/json/route/id/" + id,
success: function(data)
{
loadRouteJSON(data)
buildRoute();
}
});
}
/**
* Удаляет маршрут с заданным ID с сервера.
* @param {Integer} id
* @returns {undefined}
*/
function deleteRoute(id)
{
$.ajax({
url: "/json/deleteroute/id/" + id,
success: function(data)
{
console.log('Route '+id+' was removed.');
}
});
}
/**
* Добавляет точку с маршрут (в список выбранных точек)
* @param {Integer} id
* @returns {Boolean}
*/
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();
openBox('Route', true);
return true;
}
/**
* Формирует URL в соответсвии с точками маршрута.
* @returns {Boolean}
*/
function routeToURL()
{
wayPoints = Array();
$('#wayPoints div').each(function(i, el)
{
wayPoints.push($(el).attr('pointId'));
});
history.pushState({}, document.title, "/?route=" + JSON.stringify(wayPoints));
return true;
}
function editPoint(id)
{
$('#addPointId').remove();
@ -579,33 +396,6 @@ function editSetNewCoords()
setStatus(statusReHunting)
}
function openBox(type, keepOpen)
{
newTab = $('#box'+type).css('display') == 'none';
keepOpen = keepOpen == true;
if (!newTab && !keepOpen)
{
return closeBox();
}
$('div','#control').removeClass('active');
$('#box').children('div').css('display', 'none');
$('.boxButton'+type).addClass('active');
$('#box'+type).css('display', 'block');
$('body').addClass('openBox');
}
function closeBox()
{
$('body').removeClass('openBox');
$('div','#control').removeClass('active');
$('#box').children('div').css('display', 'none');
return true;
}
function setLayer(name)
{
if (layer)