Translated using Weblate (Slovenian)
[phpmyadmin.git] / js / gis_data_editor.js
blob8f5a871e08ef3c7fcfe498eb6db958afb6f16117
1 /**
2  * @fileoverview    functions used in GIS data editor
3  *
4  * @requires    jQuery
5  *
6  */
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;
14 /**
15  * Closes the GIS data editor and perform necessary clean up work.
16  */
17 function closeGISEditor () {
18     $('#popup_background').fadeOut('fast');
19     $('#gis_editor').fadeOut('fast', function () {
20         $(this).empty();
21     });
24 /**
25  * Prepares the HTML received via AJAX.
26  */
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'))
32         .before('<br><br>');
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');
47         $button.replaceWith(
48             '<a class="' + classes +
49             '" name="' + $button.attr('name') +
50             '" href="#">+ ' + $button.val() + '</a>'
51         );
52     });
55 /**
56  * Returns the HTML for a data point.
57  *
58  * @param pointNumber point number
59  * @param prefix      prefix of the name
60  * @returns the HTML for a data point
61  */
62 function addDataPoint (pointNumber, prefix) {
63     return '<br>' +
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="">';
71 /**
72  * Initialize the visualization in the GIS data editor.
73  */
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
78     styleOSM();
79     // Loads the SVG element and make a reference to it
80     loadSVG();
81     // Adds controllers for zooming and panning
82     addZoomPanControllers();
83     zoomAndPan();
86 /**
87  * Loads JavaScript files and the GIS editor.
88  *
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
93  * @param token      token
94  */
95 // eslint-disable-next-line no-unused-vars
96 function loadJSAndGISEditor (value, field, type, inputName) {
97     var head = document.getElementsByTagName('head')[0];
98     var script;
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);
111     }
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);
121         }
122     };
123     script.onload = function () {
124         loadGISEditor(value, field, type, inputName);
125     };
126     script.onerror = function () {
127         loadGISEditor(value, field, type, inputName);
128     };
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
143  */
144 function loadGISEditor (value, field, type, inputName) {
145     var $gisEditor = $('#gis_editor');
146     $.post('index.php?route=/gis-data-editor', {
147         'field' : field,
148         'value' : value,
149         'type' : type,
150         'input_name' : inputName,
151         'get_gis_editor' : true,
152         'ajax_request': true,
153         'server': CommonParams.get('server')
154     }, function (data) {
155         if (typeof data !== 'undefined' && data.success === true) {
156             $gisEditor.html(data.gis_editor);
157             initGISEditorVisualization();
158             prepareJSVersion();
159         } else {
160             Functions.ajaxShowMessage(data.error, false);
161         }
162     }, 'json');
166  * Opens up the dialog for the GIS data editor.
167  */
168 // eslint-disable-next-line no-unused-vars
169 function openGISEditor () {
170     // Center the popup
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' });
184     $gisEditor.append(
185         '<div id="gis_data_editor">' +
186         '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
187         pmaThemeImage + 'ajax_clock_small.gif" alt="">' +
188         '</div>'
189     );
191     // Make it appear
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.
199  */
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);
208         } else {
209             Functions.ajaxShowMessage(data.error, false);
210         }
211     }, 'json');
212     closeGISEditor();
216  * Unbind all event handlers before tearing down a page
217  */
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 () {
231     /**
232      * Prepares and insert the GIS data to the input field on clicking 'copy'.
233      */
234     $(document).on('click', '#gis_editor input[name=\'gis_data[save]\']', function (event) {
235         event.preventDefault();
236         insertDataAndClose();
237     });
239     /**
240      * Prepares and insert the GIS data to the input field on pressing 'enter'.
241      */
242     $(document).on('submit', '#gis_editor', function (event) {
243         event.preventDefault();
244         insertDataAndClose();
245     });
247     /**
248      * Trigger asynchronous calls on data change and update the output.
249      */
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();
262             } else {
263                 Functions.ajaxShowMessage(data.error, false);
264             }
265         }, 'json');
266     });
268     /**
269      * Update the form on change of the GIS type.
270      */
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();
280                 prepareJSVersion();
281             } else {
282                 Functions.ajaxShowMessage(data.error, false);
283             }
284         }, 'json');
285     });
287     /**
288      * Handles closing of the GIS data editor.
289      */
290     $(document).on('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor', function () {
291         closeGISEditor();
292     });
294     /**
295      * Handles adding data points
296      */
297     $(document).on('click', '#gis_editor a.addJs.addPoint', function () {
298         var $a = $(this);
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);
307         $a.before(html);
308         $noOfPointsInput.val(noOfPoints + 1);
309     });
311     /**
312      * Handles adding linestrings and inner rings
313      */
314     $(document).on('click', '#gis_editor a.addLine.addJs', function () {
315         var $a = $(this);
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
327         var html = '<br>';
328         var noOfPoints;
329         if (type === 'MULTILINESTRING') {
330             html += Messages.strLineString + ' ' + (noOfLines + 1) + ':';
331             noOfPoints = 2;
332         } else {
333             html += Messages.strInnerRing + ' ' + noOfLines + ':';
334             noOfPoints = 4;
335         }
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 + ']'));
339         }
340         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ ' +
341             Messages.strAddPoint + '</a><br>';
343         $a.before(html);
344         $noOfLinesInput.val(noOfLines + 1);
345     });
347     /**
348      * Handles adding polygons
349      */
350     $(document).on('click', '#gis_editor a.addJs.addPolygon', function () {
351         var $a = $(this);
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]'));
366         }
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>';
372         $a.before(html);
373         $noOfPolygonsInput.val(noOfPolygons + 1);
374     });
376     /**
377      * Handles adding geoms
378      */
379     $(document).on('click', '#gis_editor a.addJs.addGeom', function () {
380         var $a = $(this);
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="">' +
394             '<br><br>';
396         $a.before(html1);
397         $geomType.insertBefore($a);
398         $a.before(html2);
399         $noOfGeomsInput.val(noOfGeoms + 1);
400     });