2 * @fileoverview functions used in GIS data editor
8 /* global addZoomPanControllers, loadSVG, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
9 /* global pmaThemeImage */ // templates/javascript/variables.twig
11 // eslint-disable-next-line no-unused-vars
12 var gisEditorLoaded = false;
15 * Closes the GIS data editor and perform necessary clean up work.
17 function closeGISEditor () {
18 $('#popup_background').fadeOut('fast');
19 $('#gis_editor').fadeOut('fast', function () {
25 * Prepares the HTML received via AJAX.
27 function prepareJSVersion () {
28 // Change the text on the submit button
29 $('#gis_editor').find('input[name=\'gis_data[save]\']')
30 .val(Messages.strCopy)
31 .insertAfter($('#gis_data_textarea'))
34 // Add close and cancel links
35 $('#gis_data_editor').prepend('<a class="close_gis_editor" href="#">' + Messages.strClose + '</a>');
36 $('<a class="cancel_gis_editor" href="#"> ' + Messages.strCancel + '</a>')
37 .insertAfter($('input[name=\'gis_data[save]\']'));
39 // Remove the unnecessary text
40 $('div#gis_data_output p').remove();
42 // Remove 'add' buttons and add links
43 $('#gis_editor').find('input.add').each(function () {
44 var $button = $(this);
45 $button.addClass('addJs').removeClass('add');
46 var classes = $button.attr('class');
48 '<a class="' + classes +
49 '" name="' + $button.attr('name') +
50 '" href="#">+ ' + $button.val() + '</a>'
56 * Returns the HTML for a data point.
58 * @param pointNumber point number
59 * @param prefix prefix of the name
60 * @returns the HTML for a data point
62 function addDataPoint (pointNumber, prefix) {
64 Functions.sprintf(Messages.strPointN, (pointNumber + 1)) + ': ' +
65 '<label for="x">' + Messages.strX + '</label>' +
66 '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value="">' +
67 '<label for="y">' + Messages.strY + '</label>' +
68 '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value="">';
72 * Initialize the visualization in the GIS data editor.
74 function initGISEditorVisualization () {
75 // Loads either SVG or OSM visualization based on the choice
76 selectVisualization();
77 // Adds necessary styles to the div that coontains the openStreetMap
79 // Loads the SVG element and make a reference to it
81 // Adds controllers for zooming and panning
82 addZoomPanControllers();
87 * Loads JavaScript files and the GIS editor.
89 * @param value current value of the geometry field
90 * @param field field name
91 * @param type geometry type
92 * @param inputName name of the input field
95 // eslint-disable-next-line no-unused-vars
96 function loadJSAndGISEditor (value, field, type, inputName) {
97 var head = document.getElementsByTagName('head')[0];
100 // Loads a set of small JS file needed for the GIS editor
101 var smallScripts = ['js/vendor/jquery/jquery.svg.js',
102 'js/vendor/jquery/jquery.mousewheel.js',
103 'js/vendor/jquery/jquery.event.drag-2.2.js',
104 'js/table/gis_visualization.js'];
106 for (var i = 0; i < smallScripts.length; i++) {
107 script = document.createElement('script');
108 script.type = 'text/javascript';
109 script.src = smallScripts[i];
110 head.appendChild(script);
113 // OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
114 // Load the JS and do a callback to load the content for the GIS Editor.
115 script = document.createElement('script');
116 script.type = 'text/javascript';
118 script.onreadystatechange = function () {
119 if (this.readyState === 'complete') {
120 loadGISEditor(value, field, type, inputName);
123 script.onload = function () {
124 loadGISEditor(value, field, type, inputName);
126 script.onerror = function () {
127 loadGISEditor(value, field, type, inputName);
130 script.src = 'js/vendor/openlayers/OpenLayers.js';
131 head.appendChild(script);
133 gisEditorLoaded = true;
137 * Loads the GIS editor via AJAX
139 * @param value current value of the geometry field
140 * @param field field name
141 * @param type geometry type
142 * @param inputName name of the input field
144 function loadGISEditor (value, field, type, inputName) {
145 var $gisEditor = $('#gis_editor');
146 $.post('index.php?route=/gis-data-editor', {
150 'input_name' : inputName,
151 'get_gis_editor' : true,
152 'ajax_request': true,
153 'server': CommonParams.get('server')
155 if (typeof data !== 'undefined' && data.success === true) {
156 $gisEditor.html(data.gis_editor);
157 initGISEditorVisualization();
160 Functions.ajaxShowMessage(data.error, false);
166 * Opens up the dialog for the GIS data editor.
168 // eslint-disable-next-line no-unused-vars
169 function openGISEditor () {
171 var windowWidth = document.documentElement.clientWidth;
172 var windowHeight = document.documentElement.clientHeight;
173 var popupWidth = windowWidth * 0.9;
174 var popupHeight = windowHeight * 0.9;
175 var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
176 var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
178 var $gisEditor = $('#gis_editor');
179 var $backgrouond = $('#popup_background');
181 $gisEditor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
182 $backgrouond.css({ 'opacity' : '0.7' });
185 '<div id="gis_data_editor">' +
186 '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
187 pmaThemeImage + 'ajax_clock_small.gif" alt="">' +
192 $backgrouond.fadeIn('fast');
193 $gisEditor.fadeIn('fast');
197 * Prepare and insert the GIS data in Well Known Text format
198 * to the input field.
200 function insertDataAndClose () {
201 var $form = $('form#gis_data_editor_form');
202 var inputName = $form.find('input[name=\'input_name\']').val();
204 var argsep = CommonParams.get('arg_separator');
205 $.post('index.php?route=/gis-data-editor', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
206 if (typeof data !== 'undefined' && data.success === true) {
207 $('input[name=\'' + inputName + '\']').val(data.result);
209 Functions.ajaxShowMessage(data.error, false);
216 * Unbind all event handlers before tearing down a page
218 AJAX.registerTeardown('gis_data_editor.js', function () {
219 $(document).off('click', '#gis_editor input[name=\'gis_data[save]\']');
220 $(document).off('submit', '#gis_editor');
221 $(document).off('change', '#gis_editor input[type=\'text\']');
222 $(document).off('change', '#gis_editor select.gis_type');
223 $(document).off('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor');
224 $(document).off('click', '#gis_editor a.addJs.addPoint');
225 $(document).off('click', '#gis_editor a.addLine.addJs');
226 $(document).off('click', '#gis_editor a.addJs.addPolygon');
227 $(document).off('click', '#gis_editor a.addJs.addGeom');
230 AJAX.registerOnload('gis_data_editor.js', function () {
232 * Prepares and insert the GIS data to the input field on clicking 'copy'.
234 $(document).on('click', '#gis_editor input[name=\'gis_data[save]\']', function (event) {
235 event.preventDefault();
236 insertDataAndClose();
240 * Prepares and insert the GIS data to the input field on pressing 'enter'.
242 $(document).on('submit', '#gis_editor', function (event) {
243 event.preventDefault();
244 insertDataAndClose();
248 * Trigger asynchronous calls on data change and update the output.
250 $(document).on('change', '#gis_editor input[type=\'text\']', function () {
251 var $form = $('form#gis_data_editor_form');
252 var argsep = CommonParams.get('arg_separator');
253 $.post('index.php?route=/gis-data-editor', $form.serialize() + argsep + 'generate=true' + argsep + 'ajax_request=true', function (data) {
254 if (typeof data !== 'undefined' && data.success === true) {
255 $('#gis_data_textarea').val(data.result);
256 $('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
257 $('#openlayersmap').empty();
258 /* TODO: the gis_data_editor should rather return JSON than JS code to eval */
259 // eslint-disable-next-line no-eval
260 eval(data.openLayers);
261 initGISEditorVisualization();
263 Functions.ajaxShowMessage(data.error, false);
269 * Update the form on change of the GIS type.
271 $(document).on('change', '#gis_editor select.gis_type', function () {
272 var $gisEditor = $('#gis_editor');
273 var $form = $('form#gis_data_editor_form');
275 var argsep = CommonParams.get('arg_separator');
276 $.post('index.php?route=/gis-data-editor', $form.serialize() + argsep + 'get_gis_editor=true' + argsep + 'ajax_request=true', function (data) {
277 if (typeof data !== 'undefined' && data.success === true) {
278 $gisEditor.html(data.gis_editor);
279 initGISEditorVisualization();
282 Functions.ajaxShowMessage(data.error, false);
288 * Handles closing of the GIS data editor.
290 $(document).on('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor', function () {
295 * Handles adding data points
297 $(document).on('click', '#gis_editor a.addJs.addPoint', function () {
299 var name = $a.attr('name');
300 // Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
301 var prefix = name.substr(0, name.length - 11);
302 // Find the number of points
303 var $noOfPointsInput = $('input[name=\'' + prefix + '[no_of_points]' + '\']');
304 var noOfPoints = parseInt($noOfPointsInput.val(), 10);
305 // Add the new data point
306 var html = addDataPoint(noOfPoints, prefix);
308 $noOfPointsInput.val(noOfPoints + 1);
312 * Handles adding linestrings and inner rings
314 $(document).on('click', '#gis_editor a.addLine.addJs', function () {
316 var name = $a.attr('name');
318 // Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
319 var prefix = name.substr(0, name.length - 10);
320 var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
322 // Find the number of lines
323 var $noOfLinesInput = $('input[name=\'' + prefix + '[no_of_lines]' + '\']');
324 var noOfLines = parseInt($noOfLinesInput.val(), 10);
326 // Add the new linesting of inner ring based on the type
329 if (type === 'MULTILINESTRING') {
330 html += Messages.strLineString + ' ' + (noOfLines + 1) + ':';
333 html += Messages.strInnerRing + ' ' + noOfLines + ':';
336 html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '">';
337 for (var i = 0; i < noOfPoints; i++) {
338 html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
340 html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ ' +
341 Messages.strAddPoint + '</a><br>';
344 $noOfLinesInput.val(noOfLines + 1);
348 * Handles adding polygons
350 $(document).on('click', '#gis_editor a.addJs.addPolygon', function () {
352 var name = $a.attr('name');
353 // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
354 var prefix = name.substr(0, name.length - 13);
355 // Find the number of polygons
356 var $noOfPolygonsInput = $('input[name=\'' + prefix + '[no_of_polygons]' + '\']');
357 var noOfPolygons = parseInt($noOfPolygonsInput.val(), 10);
359 // Add the new polygon
360 var html = Messages.strPolygon + ' ' + (noOfPolygons + 1) + ':<br>';
361 html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1">' +
362 '<br>' + Messages.strOuterRing + ':' +
363 '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4">';
364 for (var i = 0; i < 4; i++) {
365 html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
367 html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]" href="#">+ ' +
368 Messages.strAddPoint + '</a><br>' +
369 '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]" href="#">+ ' +
370 Messages.strAddInnerRing + '</a><br><br>';
373 $noOfPolygonsInput.val(noOfPolygons + 1);
377 * Handles adding geoms
379 $(document).on('click', '#gis_editor a.addJs.addGeom', function () {
381 var prefix = 'gis_data[GEOMETRYCOLLECTION]';
382 // Find the number of geoms
383 var $noOfGeomsInput = $('input[name=\'' + prefix + '[geom_count]' + '\']');
384 var noOfGeoms = parseInt($noOfGeomsInput.val(), 10);
386 var html1 = Messages.strGeometry + ' ' + (noOfGeoms + 1) + ':<br>';
387 var $geomType = $('select[name=\'gis_data[' + (noOfGeoms - 1) + '][gis_type]\']').clone();
388 $geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
389 var html2 = '<br>' + Messages.strPoint + ' :' +
390 '<label for="x"> ' + Messages.strX + ' </label>' +
391 '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value="">' +
392 '<label for="y"> ' + Messages.strY + ' </label>' +
393 '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value="">' +
397 $geomType.insertBefore($a);
399 $noOfGeomsInput.val(noOfGeoms + 1);