1 /* vim: set expandtab sw=4 ts=4 sts=4: */
3 * @fileoverview functions used in GIS data editor
9 var gisEditorLoaded = false;
12 * Closes the GIS data editor and perform necessary clean up work.
14 function closeGISEditor () {
15 $('#popup_background').fadeOut('fast');
16 $('#gis_editor').fadeOut('fast', function () {
22 * Prepares the HTML received via AJAX.
24 function prepareJSVersion () {
25 // Change the text on the submit button
26 $('#gis_editor').find('input[name=\'gis_data[save]\']')
27 .val(PMA_messages.strCopy)
28 .insertAfter($('#gis_data_textarea'))
29 .before('<br/><br/>');
31 // Add close and cancel links
32 $('#gis_data_editor').prepend('<a class="close_gis_editor" href="#">' + PMA_messages.strClose + '</a>');
33 $('<a class="cancel_gis_editor" href="#"> ' + PMA_messages.strCancel + '</a>')
34 .insertAfter($('input[name=\'gis_data[save]\']'));
36 // Remove the unnecessary text
37 $('div#gis_data_output p').remove();
39 // Remove 'add' buttons and add links
40 $('#gis_editor').find('input.add').each(function (e) {
41 var $button = $(this);
42 $button.addClass('addJs').removeClass('add');
43 var classes = $button.attr('class');
45 '<a class="' + classes +
46 '" name="' + $button.attr('name') +
47 '" href="#">+ ' + $button.val() + '</a>'
53 * Returns the HTML for a data point.
55 * @param pointNumber point number
56 * @param prefix prefix of the name
57 * @returns the HTML for a data point
59 function addDataPoint (pointNumber, prefix) {
61 PMA_sprintf(PMA_messages.strPointN, (pointNumber + 1)) + ': ' +
62 '<label for="x">' + PMA_messages.strX + '</label>' +
63 '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value=""/>' +
64 '<label for="y">' + PMA_messages.strY + '</label>' +
65 '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value=""/>';
69 * Initialize the visualization in the GIS data editor.
71 function initGISEditorVisualization () {
72 // Loads either SVG or OSM visualization based on the choice
73 selectVisualization();
74 // Adds necessary styles to the div that coontains the openStreetMap
76 // Loads the SVG element and make a reference to it
78 // Adds controllers for zooming and panning
79 addZoomPanControllers();
84 * Loads JavaScript files and the GIS editor.
86 * @param value current value of the geometry field
87 * @param field field name
88 * @param type geometry type
89 * @param input_name name of the input field
92 function loadJSAndGISEditor (value, field, type, input_name) {
93 var head = document.getElementsByTagName('head')[0];
96 // Loads a set of small JS file needed for the GIS editor
97 var smallScripts = ['js/vendor/jquery/jquery.svg.js',
98 'js/vendor/jquery/jquery.mousewheel.js',
99 'js/vendor/jquery/jquery.event.drag-2.2.js',
100 'js/tbl_gis_visualization.js'];
102 for (var i = 0; i < smallScripts.length; i++) {
103 script = document.createElement('script');
104 script.type = 'text/javascript';
105 script.src = smallScripts[i];
106 head.appendChild(script);
109 // OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
110 // Load the JS and do a callback to load the content for the GIS Editor.
111 script = document.createElement('script');
112 script.type = 'text/javascript';
114 script.onreadystatechange = function () {
115 if (this.readyState === 'complete') {
116 loadGISEditor(value, field, type, input_name);
119 script.onload = function () {
120 loadGISEditor(value, field, type, input_name);
122 script.onerror = function () {
123 loadGISEditor(value, field, type, input_name);
126 script.src = 'js/vendor/openlayers/OpenLayers.js';
127 head.appendChild(script);
129 gisEditorLoaded = true;
133 * Loads the GIS editor via AJAX
135 * @param value current value of the geometry field
136 * @param field field name
137 * @param type geometry type
138 * @param input_name name of the input field
140 function loadGISEditor (value, field, type, input_name) {
141 var $gis_editor = $('#gis_editor');
142 $.post('gis_data_editor.php', {
146 'input_name' : input_name,
147 'get_gis_editor' : true,
150 if (typeof data !== 'undefined' && data.success === true) {
151 $gis_editor.html(data.gis_editor);
152 initGISEditorVisualization();
155 PMA_ajaxShowMessage(data.error, false);
161 * Opens up the dialog for the GIS data editor.
163 function openGISEditor () {
165 var windowWidth = document.documentElement.clientWidth;
166 var windowHeight = document.documentElement.clientHeight;
167 var popupWidth = windowWidth * 0.9;
168 var popupHeight = windowHeight * 0.9;
169 var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
170 var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
172 var $gis_editor = $('#gis_editor');
173 var $backgrouond = $('#popup_background');
175 $gis_editor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
176 $backgrouond.css({ 'opacity' : '0.7' });
179 '<div id="gis_data_editor">' +
180 '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
181 pmaThemeImage + 'ajax_clock_small.gif" alt=""/>' +
186 $backgrouond.fadeIn('fast');
187 $gis_editor.fadeIn('fast');
191 * Prepare and insert the GIS data in Well Known Text format
192 * to the input field.
194 function insertDataAndClose () {
195 var $form = $('form#gis_data_editor_form');
196 var input_name = $form.find('input[name=\'input_name\']').val();
198 var argsep = PMA_commonParams.get('arg_separator');
199 $.post('gis_data_editor.php', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
200 if (typeof data !== 'undefined' && data.success === true) {
201 $('input[name=\'' + input_name + '\']').val(data.result);
203 PMA_ajaxShowMessage(data.error, false);
210 * Unbind all event handlers before tearing down a page
212 AJAX.registerTeardown('gis_data_editor.js', function () {
213 $(document).off('click', '#gis_editor input[name=\'gis_data[save]\']');
214 $(document).off('submit', '#gis_editor');
215 $(document).off('change', '#gis_editor input[type=\'text\']');
216 $(document).off('change', '#gis_editor select.gis_type');
217 $(document).off('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor');
218 $(document).off('click', '#gis_editor a.addJs.addPoint');
219 $(document).off('click', '#gis_editor a.addLine.addJs');
220 $(document).off('click', '#gis_editor a.addJs.addPolygon');
221 $(document).off('click', '#gis_editor a.addJs.addGeom');
224 AJAX.registerOnload('gis_data_editor.js', function () {
226 * Prepares and insert the GIS data to the input field on clicking 'copy'.
228 $(document).on('click', '#gis_editor input[name=\'gis_data[save]\']', function (event) {
229 event.preventDefault();
230 insertDataAndClose();
234 * Prepares and insert the GIS data to the input field on pressing 'enter'.
236 $(document).on('submit', '#gis_editor', function (event) {
237 event.preventDefault();
238 insertDataAndClose();
242 * Trigger asynchronous calls on data change and update the output.
244 $(document).on('change', '#gis_editor input[type=\'text\']', function () {
245 var $form = $('form#gis_data_editor_form');
246 var argsep = PMA_commonParams.get('arg_separator');
247 $.post('gis_data_editor.php', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
248 if (typeof data !== 'undefined' && data.success === true) {
249 $('#gis_data_textarea').val(data.result);
250 $('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
251 $('#openlayersmap').empty();
252 /* TODO: the gis_data_editor should rather return JSON than JS code to eval */
253 eval(data.openLayers);
254 initGISEditorVisualization();
256 PMA_ajaxShowMessage(data.error, false);
262 * Update the form on change of the GIS type.
264 $(document).on('change', '#gis_editor select.gis_type', function (event) {
265 var $gis_editor = $('#gis_editor');
266 var $form = $('form#gis_data_editor_form');
268 var argsep = PMA_commonParams.get('arg_separator');
269 $.post('gis_data_editor.php', $form.serialize() + argsep + 'get_gis_editor=true' + argsep + 'ajax_request=true', function (data) {
270 if (typeof data !== 'undefined' && data.success === true) {
271 $gis_editor.html(data.gis_editor);
272 initGISEditorVisualization();
275 PMA_ajaxShowMessage(data.error, false);
281 * Handles closing of the GIS data editor.
283 $(document).on('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor', function () {
288 * Handles adding data points
290 $(document).on('click', '#gis_editor a.addJs.addPoint', function () {
292 var name = $a.attr('name');
293 // Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
294 var prefix = name.substr(0, name.length - 11);
295 // Find the number of points
296 var $noOfPointsInput = $('input[name=\'' + prefix + '[no_of_points]' + '\']');
297 var noOfPoints = parseInt($noOfPointsInput.val(), 10);
298 // Add the new data point
299 var html = addDataPoint(noOfPoints, prefix);
301 $noOfPointsInput.val(noOfPoints + 1);
305 * Handles adding linestrings and inner rings
307 $(document).on('click', '#gis_editor a.addLine.addJs', function () {
309 var name = $a.attr('name');
311 // Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
312 var prefix = name.substr(0, name.length - 10);
313 var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
315 // Find the number of lines
316 var $noOfLinesInput = $('input[name=\'' + prefix + '[no_of_lines]' + '\']');
317 var noOfLines = parseInt($noOfLinesInput.val(), 10);
319 // Add the new linesting of inner ring based on the type
322 if (type === 'MULTILINESTRING') {
323 html += PMA_messages.strLineString + ' ' + (noOfLines + 1) + ':';
326 html += PMA_messages.strInnerRing + ' ' + noOfLines + ':';
329 html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '"/>';
330 for (var i = 0; i < noOfPoints; i++) {
331 html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
333 html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ ' +
334 PMA_messages.strAddPoint + '</a><br/>';
337 $noOfLinesInput.val(noOfLines + 1);
341 * Handles adding polygons
343 $(document).on('click', '#gis_editor a.addJs.addPolygon', function () {
345 var name = $a.attr('name');
346 // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
347 var prefix = name.substr(0, name.length - 13);
348 // Find the number of polygons
349 var $noOfPolygonsInput = $('input[name=\'' + prefix + '[no_of_polygons]' + '\']');
350 var noOfPolygons = parseInt($noOfPolygonsInput.val(), 10);
352 // Add the new polygon
353 var html = PMA_messages.strPolygon + ' ' + (noOfPolygons + 1) + ':<br/>';
354 html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1"/>' +
355 '<br/>' + PMA_messages.strOuterRing + ':' +
356 '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4"/>';
357 for (var i = 0; i < 4; i++) {
358 html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
360 html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]" href="#">+ ' +
361 PMA_messages.strAddPoint + '</a><br/>' +
362 '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]" href="#">+ ' +
363 PMA_messages.strAddInnerRing + '</a><br/><br/>';
366 $noOfPolygonsInput.val(noOfPolygons + 1);
370 * Handles adding geoms
372 $(document).on('click', '#gis_editor a.addJs.addGeom', function () {
374 var prefix = 'gis_data[GEOMETRYCOLLECTION]';
375 // Find the number of geoms
376 var $noOfGeomsInput = $('input[name=\'' + prefix + '[geom_count]' + '\']');
377 var noOfGeoms = parseInt($noOfGeomsInput.val(), 10);
379 var html1 = PMA_messages.strGeometry + ' ' + (noOfGeoms + 1) + ':<br/>';
380 var $geomType = $('select[name=\'gis_data[' + (noOfGeoms - 1) + '][gis_type]\']').clone();
381 $geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
382 var html2 = '<br/>' + PMA_messages.strPoint + ' :' +
383 '<label for="x"> ' + PMA_messages.strX + ' </label>' +
384 '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value=""/>' +
385 '<label for="y"> ' + PMA_messages.strY + ' </label>' +
386 '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value=""/>' +
390 $geomType.insertBefore($a);
392 $noOfGeomsInput.val(noOfGeoms + 1);