373 lines
13 KiB
JavaScript
373 lines
13 KiB
JavaScript
/* vim: set expandtab sw=4 ts=4 sts=4: */
|
|
/**
|
|
* @fileoverview functions used in GIS data editor
|
|
*
|
|
* @requires jQuery
|
|
*
|
|
*/
|
|
|
|
var gisEditorLoaded = false;
|
|
|
|
/**
|
|
* Closes the GIS data editor and perform necessary clean up work.
|
|
*/
|
|
function closeGISEditor(){
|
|
$("#popup_background").fadeOut("fast");
|
|
$("#gis_editor").fadeOut("fast", function () {
|
|
$(this).html('');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Prepares the HTML recieved via AJAX.
|
|
*/
|
|
function prepareJSVersion() {
|
|
// Change the text on the submit button
|
|
$("#gis_editor input[name='gis_data[save]']")
|
|
.val(PMA_messages['strCopy'])
|
|
.insertAfter($('#gis_data_textarea'))
|
|
.before('<br><br>');
|
|
|
|
// Add close and cancel links
|
|
$('#gis_data_editor').prepend('<a class="close_gis_editor">' + PMA_messages['strClose'] + '</a>');
|
|
$('<a class="cancel_gis_editor"> ' + PMA_messages['strCancel'] + '</a>')
|
|
.insertAfter($("input[name='gis_data[save]']"));
|
|
|
|
// Remove the unnecessary text
|
|
$('div#gis_data_output p').remove();
|
|
|
|
// Remove 'add' buttons and add links
|
|
$('#gis_editor input.add').each(function(e) {
|
|
var $button = $(this);
|
|
$button.addClass('addJs').removeClass('add');
|
|
var classes = $button.attr('class');
|
|
$button.replaceWith(
|
|
'<a class="' + classes + '" name="' + $button.attr('name')
|
|
+ '">+ ' + $button.val() + '</a>'
|
|
);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Returns the HTML for a data point.
|
|
*
|
|
* @param pointNumber point number
|
|
* @param prefix prefix of the name
|
|
* @returns the HTML for a data point
|
|
*/
|
|
function addDataPoint(pointNumber, prefix) {
|
|
return '<br>' + $.sprintf(PMA_messages['strPointN'], (pointNumber + 1)) + ':'
|
|
+ '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
|
|
+ '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value="">'
|
|
+ '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
|
|
+ '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value="">';
|
|
}
|
|
|
|
/**
|
|
* Initialize the visualization in the GIS data editor.
|
|
*/
|
|
function initGISEditorVisualization() {
|
|
// Loads either SVG or OSM visualization based on the choice
|
|
selectVisualization();
|
|
// Adds necessary styles to the div that coontains the openStreetMap
|
|
styleOSM();
|
|
// Loads the SVG element and make a reference to it
|
|
loadSVG();
|
|
// Adds controllers for zooming and panning
|
|
addZoomPanControllers();
|
|
zoomAndPan();
|
|
}
|
|
|
|
/**
|
|
* Loads JavaScript files and the GIS editor.
|
|
*
|
|
* @param value current value of the geometry field
|
|
* @param field field name
|
|
* @param type geometry type
|
|
* @param input_name name of the input field
|
|
* @param token token
|
|
*/
|
|
function loadJSAndGISEditor(value, field, type, input_name, token) {
|
|
var head = document.getElementsByTagName('head')[0];
|
|
var script;
|
|
|
|
// Loads a set of small JS file needed for the GIS editor
|
|
var smallScripts = [ 'js/jquery/jquery.svg.js',
|
|
'js/jquery/jquery.mousewheel.js',
|
|
'js/jquery/jquery.event.drag-2.0.js',
|
|
'js/tbl_gis_visualization.js' ];
|
|
|
|
for (i = 0; i < smallScripts.length; i++) {
|
|
script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = smallScripts[i];
|
|
head.appendChild(script);
|
|
}
|
|
|
|
// OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
|
|
// Load the JS and do a callback to load the content for the GIS Editor.
|
|
script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
|
|
script.onreadystatechange = function() {
|
|
if (this.readyState == 'complete') {
|
|
loadGISEditor(value, field, type, input_name, token);
|
|
}
|
|
};
|
|
script.onload = function() {
|
|
loadGISEditor(value, field, type, input_name, token);
|
|
};
|
|
|
|
script.src = 'js/openlayers/OpenLayers.js';
|
|
head.appendChild(script);
|
|
|
|
gisEditorLoaded = true;
|
|
}
|
|
|
|
/**
|
|
* Loads the GIS editor via AJAX
|
|
*
|
|
* @param value current value of the geometry field
|
|
* @param field field name
|
|
* @param type geometry type
|
|
* @param input_name name of the input field
|
|
* @param token token
|
|
*/
|
|
function loadGISEditor(value, field, type, input_name, token) {
|
|
|
|
var $gis_editor = $("#gis_editor");
|
|
$.post('gis_data_editor.php', {
|
|
'field' : field,
|
|
'value' : value,
|
|
'type' : type,
|
|
'input_name' : input_name,
|
|
'get_gis_editor' : true,
|
|
'token' : token,
|
|
'ajax_request': true
|
|
}, function(data) {
|
|
if (data.success == true) {
|
|
$gis_editor.html(data.gis_editor);
|
|
initGISEditorVisualization();
|
|
prepareJSVersion();
|
|
} else {
|
|
PMA_ajaxShowMessage(data.error, false);
|
|
}
|
|
}, 'json');
|
|
}
|
|
|
|
/**
|
|
* Opens up the dialog for the GIS data editor.
|
|
*/
|
|
function openGISEditor() {
|
|
|
|
// Center the popup
|
|
var windowWidth = document.documentElement.clientWidth;
|
|
var windowHeight = document.documentElement.clientHeight;
|
|
var popupWidth = windowWidth * 0.9;
|
|
var popupHeight = windowHeight * 0.9;
|
|
var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
|
|
var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
|
|
|
|
var $gis_editor = $("#gis_editor");
|
|
var $backgrouond = $("#popup_background");
|
|
|
|
$gis_editor.css({"top": popupOffsetTop, "left": popupOffsetLeft, "width": popupWidth, "height": popupHeight});
|
|
$backgrouond.css({"opacity":"0.7"});
|
|
|
|
$gis_editor.append('<div id="gis_data_editor"><img class="ajaxIcon" id="loadingMonitorIcon" src="'
|
|
+ pmaThemeImage + 'ajax_clock_small.gif" alt=""></div>'
|
|
);
|
|
|
|
// Make it appear
|
|
$backgrouond.fadeIn("fast");
|
|
$gis_editor.fadeIn("fast");
|
|
}
|
|
|
|
/**
|
|
* Prepare and insert the GIS data in Well Known Text format
|
|
* to the input field.
|
|
*/
|
|
function insertDataAndClose() {
|
|
var $form = $('form#gis_data_editor_form');
|
|
var input_name = $form.find("input[name='input_name']").val();
|
|
|
|
$.post('gis_data_editor.php', $form.serialize() + "&generate=true&ajax_request=true", function(data) {
|
|
if(data.success == true) {
|
|
$("input[name='" + input_name + "']").val(data.result);
|
|
} else {
|
|
PMA_ajaxShowMessage(data.error, false);
|
|
}
|
|
}, 'json');
|
|
closeGISEditor();
|
|
}
|
|
|
|
$(function() {
|
|
|
|
// Remove the class that is added due to the URL being too long.
|
|
$('span.open_gis_editor a').removeClass('formLinkSubmit');
|
|
|
|
/**
|
|
* Prepares and insert the GIS data to the input field on clicking 'copy'.
|
|
*/
|
|
$("#gis_editor input[name='gis_data[save]']").live('click', function(event) {
|
|
event.preventDefault();
|
|
insertDataAndClose();
|
|
});
|
|
|
|
/**
|
|
* Prepares and insert the GIS data to the input field on pressing 'enter'.
|
|
*/
|
|
$('#gis_editor').live('submit', function(event) {
|
|
event.preventDefault();
|
|
insertDataAndClose();
|
|
});
|
|
|
|
/**
|
|
* Trigger asynchronous calls on data change and update the output.
|
|
*/
|
|
$('#gis_editor').find("input[type='text']").live('change', function() {
|
|
var $form = $('form#gis_data_editor_form');
|
|
$.post('gis_data_editor.php', $form.serialize() + "&generate=true&ajax_request=true", function(data) {
|
|
if(data.success == true) {
|
|
$('#gis_data_textarea').val(data.result);
|
|
$('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
|
|
$('#openlayersmap').empty();
|
|
eval(data.openLayers);
|
|
initGISEditorVisualization();
|
|
} else {
|
|
PMA_ajaxShowMessage(data.error, false);
|
|
}
|
|
}, 'json');
|
|
});
|
|
|
|
/**
|
|
* Update the form on change of the GIS type.
|
|
*/
|
|
$("#gis_editor select.gis_type").live('change', function(event) {
|
|
var $gis_editor = $("#gis_editor");
|
|
var $form = $('form#gis_data_editor_form');
|
|
|
|
$.post('gis_data_editor.php', $form.serialize() + "&get_gis_editor=true&ajax_request=true", function(data) {
|
|
if(data.success == true) {
|
|
$gis_editor.html(data.gis_editor);
|
|
initGISEditorVisualization();
|
|
prepareJSVersion();
|
|
} else {
|
|
PMA_ajaxShowMessage(data.error, false);
|
|
}
|
|
}, 'json');
|
|
});
|
|
|
|
/**
|
|
* Handles closing of the GIS data editor.
|
|
*/
|
|
$('#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor').live('click', function() {
|
|
closeGISEditor();
|
|
});
|
|
|
|
/**
|
|
* Handles adding data points
|
|
*/
|
|
$('#gis_editor a.addJs.addPoint').live('click', function() {
|
|
var $a = $(this);
|
|
var name = $a.attr('name');
|
|
// Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
|
|
var prefix = name.substr(0, name.length - 11);
|
|
// Find the number of points
|
|
var $noOfPointsInput = $("input[name='" + prefix + "[no_of_points]" + "']");
|
|
var noOfPoints = parseInt($noOfPointsInput.val());
|
|
// Add the new data point
|
|
var html = addDataPoint(noOfPoints, prefix);
|
|
$a.before(html);
|
|
$noOfPointsInput.val(noOfPoints + 1);
|
|
});
|
|
|
|
/**
|
|
* Handles adding linestrings and inner rings
|
|
*/
|
|
$('#gis_editor a.addLine.addJs').live('click', function() {
|
|
var $a = $(this);
|
|
var name = $a.attr('name');
|
|
|
|
// Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
|
|
var prefix = name.substr(0, name.length - 10);
|
|
var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
|
|
|
|
// Find the number of lines
|
|
var $noOfLinesInput = $("input[name='" + prefix + "[no_of_lines]" + "']");
|
|
var noOfLines = parseInt($noOfLinesInput.val());
|
|
|
|
// Add the new linesting of inner ring based on the type
|
|
var html = '<br>';
|
|
if (type == 'MULTILINESTRING') {
|
|
html += PMA_messages['strLineString'] + (noOfLines + 1) + ':';
|
|
var noOfPoints = 2;
|
|
} else {
|
|
html += PMA_messages['strInnerRing'] + noOfLines + ':';
|
|
var noOfPoints = 4;
|
|
}
|
|
html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '">';
|
|
for (i = 0; i < noOfPoints; i++) {
|
|
html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
|
|
}
|
|
html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]">+ '
|
|
+ PMA_messages['strAddPoint'] + '</a><br>';
|
|
|
|
$a.before(html);
|
|
$noOfLinesInput.val(noOfLines + 1);
|
|
});
|
|
|
|
/**
|
|
* Handles adding polygons
|
|
*/
|
|
$('#gis_editor a.addJs.addPolygon').live('click', function() {
|
|
var $a = $(this);
|
|
var name = $a.attr('name');
|
|
// Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
|
|
var prefix = name.substr(0, name.length - 13);
|
|
// Find the number of polygons
|
|
var $noOfPolygonsInput = $("input[name='" + prefix + "[no_of_polygons]" + "']");
|
|
var noOfPolygons = parseInt($noOfPolygonsInput.val());
|
|
|
|
// Add the new polygon
|
|
var html = PMA_messages['strPolygon'] + (noOfPolygons + 1) + ':<br>';
|
|
html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1">';
|
|
+ '<br>' + PMA_messages['strOuterRing'] + ':';
|
|
+ '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4">';
|
|
for (i = 0; i < 4; i++) {
|
|
html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
|
|
}
|
|
html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]">+ '
|
|
+ PMA_messages['strAddPoint'] + '</a><br>'
|
|
+ '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]">+ '
|
|
+ PMA_messages['strAddInnerRing'] + '</a><br><br>';
|
|
|
|
$a.before(html);
|
|
$noOfPolygonsInput.val(noOfPolygons + 1);
|
|
});
|
|
|
|
/**
|
|
* Handles adding geoms
|
|
*/
|
|
$('#gis_editor a.addJs.addGeom').live('click', function() {
|
|
var $a = $(this);
|
|
var prefix = 'gis_data[GEOMETRYCOLLECTION]';
|
|
// Find the number of geoms
|
|
var $noOfGeomsInput = $("input[name='" + prefix + "[geom_count]" + "']");
|
|
var noOfGeoms = parseInt($noOfGeomsInput.val());
|
|
|
|
var html1 = PMA_messages['strGeometry'] + (noOfGeoms + 1) + ':<br>';
|
|
var $geomType = $("select[name='gis_data[" + (noOfGeoms - 1) + "][gis_type]']").clone();
|
|
$geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
|
|
var html2 = '<br>' + PMA_messages['strPoint'] + ' :'
|
|
+ '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
|
|
+ '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value="">'
|
|
+ '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
|
|
+ '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value="">'
|
|
+ '<br><br>';
|
|
|
|
$a.before(html1); $geomType.insertBefore($a); $a.before(html2);
|
|
$noOfGeomsInput.val(noOfGeoms + 1);
|
|
});
|
|
});
|
