Server : Apache/2.4.41 (Ubuntu) System : Linux journalup 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory : /var/www/phpwinfx/js/
Upload File :
Current File : /var/www/phpwinfx/js/gis_data_editor.js
/* 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).empty();
});
}
/**
* Prepares the HTML received via AJAX.
*/
function prepareJSVersion () {
// Change the text on the submit button
$('#gis_editor').find('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" href="#">' + PMA_messages.strClose + '</a>');
$('<a class="cancel_gis_editor" href="#"> ' + 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').find('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') +
'" href="#">+ ' + $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/>' +
PMA_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) {
var head = document.getElementsByTagName('head')[0];
var script;
// Loads a set of small JS file needed for the GIS editor
var smallScripts = ['js/vendor/jquery/jquery.svg.js',
'js/vendor/jquery/jquery.mousewheel.js',
'js/vendor/jquery/jquery.event.drag-2.2.js',
'js/tbl_gis_visualization.js'];
for (var 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);
}
};
script.onload = function () {
loadGISEditor(value, field, type, input_name);
};
script.onerror = function () {
loadGISEditor(value, field, type, input_name);
};
script.src = 'js/vendor/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
*/
function loadGISEditor (value, field, type, input_name) {
var $gis_editor = $('#gis_editor');
$.post('gis_data_editor.php', {
'field' : field,
'value' : value,
'type' : type,
'input_name' : input_name,
'get_gis_editor' : true,
'ajax_request': true
}, function (data) {
if (typeof data !== 'undefined' && 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();
var argsep = PMA_commonParams.get('arg_separator');
$.post('gis_data_editor.php', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
if (typeof data !== 'undefined' && data.success === true) {
$('input[name=\'' + input_name + '\']').val(data.result);
} else {
PMA_ajaxShowMessage(data.error, false);
}
}, 'json');
closeGISEditor();
}
/**
* Unbind all event handlers before tearing down a page
*/
AJAX.registerTeardown('gis_data_editor.js', function () {
$(document).off('click', '#gis_editor input[name=\'gis_data[save]\']');
$(document).off('submit', '#gis_editor');
$(document).off('change', '#gis_editor input[type=\'text\']');
$(document).off('change', '#gis_editor select.gis_type');
$(document).off('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor');
$(document).off('click', '#gis_editor a.addJs.addPoint');
$(document).off('click', '#gis_editor a.addLine.addJs');
$(document).off('click', '#gis_editor a.addJs.addPolygon');
$(document).off('click', '#gis_editor a.addJs.addGeom');
});
AJAX.registerOnload('gis_data_editor.js', function () {
/**
* Prepares and insert the GIS data to the input field on clicking 'copy'.
*/
$(document).on('click', '#gis_editor input[name=\'gis_data[save]\']', function (event) {
event.preventDefault();
insertDataAndClose();
});
/**
* Prepares and insert the GIS data to the input field on pressing 'enter'.
*/
$(document).on('submit', '#gis_editor', function (event) {
event.preventDefault();
insertDataAndClose();
});
/**
* Trigger asynchronous calls on data change and update the output.
*/
$(document).on('change', '#gis_editor input[type=\'text\']', function () {
var $form = $('form#gis_data_editor_form');
var argsep = PMA_commonParams.get('arg_separator');
$.post('gis_data_editor.php', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
if (typeof data !== 'undefined' && data.success === true) {
$('#gis_data_textarea').val(data.result);
$('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
$('#openlayersmap').empty();
/* TODO: the gis_data_editor should rather return JSON than JS code to eval */
eval(data.openLayers);
initGISEditorVisualization();
} else {
PMA_ajaxShowMessage(data.error, false);
}
}, 'json');
});
/**
* Update the form on change of the GIS type.
*/
$(document).on('change', '#gis_editor select.gis_type', function (event) {
var $gis_editor = $('#gis_editor');
var $form = $('form#gis_data_editor_form');
var argsep = PMA_commonParams.get('arg_separator');
$.post('gis_data_editor.php', $form.serialize() + argsep + 'get_gis_editor=true' + argsep + 'ajax_request=true', function (data) {
if (typeof data !== 'undefined' && 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.
*/
$(document).on('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor', function () {
closeGISEditor();
});
/**
* Handles adding data points
*/
$(document).on('click', '#gis_editor a.addJs.addPoint', 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(), 10);
// Add the new data point
var html = addDataPoint(noOfPoints, prefix);
$a.before(html);
$noOfPointsInput.val(noOfPoints + 1);
});
/**
* Handles adding linestrings and inner rings
*/
$(document).on('click', '#gis_editor a.addLine.addJs', 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(), 10);
// Add the new linesting of inner ring based on the type
var html = '<br/>';
var noOfPoints;
if (type === 'MULTILINESTRING') {
html += PMA_messages.strLineString + ' ' + (noOfLines + 1) + ':';
noOfPoints = 2;
} else {
html += PMA_messages.strInnerRing + ' ' + noOfLines + ':';
noOfPoints = 4;
}
html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '"/>';
for (var i = 0; i < noOfPoints; i++) {
html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
}
html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ ' +
PMA_messages.strAddPoint + '</a><br/>';
$a.before(html);
$noOfLinesInput.val(noOfLines + 1);
});
/**
* Handles adding polygons
*/
$(document).on('click', '#gis_editor a.addJs.addPolygon', 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(), 10);
// 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 (var i = 0; i < 4; i++) {
html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
}
html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]" href="#">+ ' +
PMA_messages.strAddPoint + '</a><br/>' +
'<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]" href="#">+ ' +
PMA_messages.strAddInnerRing + '</a><br/><br/>';
$a.before(html);
$noOfPolygonsInput.val(noOfPolygons + 1);
});
/**
* Handles adding geoms
*/
$(document).on('click', '#gis_editor a.addJs.addGeom', 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(), 10);
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);
});
});
