js/gis_data_editor.js

   1 /**
   2  * @fileoverview    functions used in GIS data editor
   3  *
   4  * @requires    jQuery
   5  *
   6  */
   7
   8 /* global addZoomPanControllers, loadSVG, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
   9 /* global pmaThemeImage */ // templates/javascript/variables.twig
  10
  11 // eslint-disable-next-line no-unused-vars
  12 var gisEditorLoaded = false;
  13
  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     });
  22 }
  23
  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>');
  33
  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]\']'));
  38
  39     // Remove the unnecessary text
  40     $('div#gis_data_output p').remove();
  41
  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     });
  53 }
  54
  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="">';
  69 }
  70
  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();
  84 }
  85
  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;
  99
 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'];
 105
 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     }
 112
 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';
 117
 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     };
 129
 130     script.src = 'js/vendor/openlayers/OpenLayers.js';
 131     head.appendChild(script);
 132
 133     gisEditorLoaded = true;
 134 }
 135
 136 /**
 137  * Loads the GIS editor via AJAX
 138  *
 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');
 163 }
 164
 165 /**
 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;
 177
 178     var $gisEditor = $('#gis_editor');
 179     var $backgrouond = $('#popup_background');
 180
 181     $gisEditor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
 182     $backgrouond.css({ 'opacity' : '0.7' });
 183
 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     );
 190
 191     // Make it appear
 192     $backgrouond.fadeIn('fast');
 193     $gisEditor.fadeIn('fast');
 194 }
 195
 196 /**
 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();
 203
 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();
 213 }
 214
 215 /**
 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');
 228 });
 229
 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     });
 238
 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     });
 246
 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     });
 267
 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');
 274
 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     });
 286
 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     });
 293
 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     });
 310
 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');
 317
 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(']'));
 321
 322         // Find the number of lines
 323         var $noOfLinesInput = $('input[name=\'' + prefix + '[no_of_lines]' + '\']');
 324         var noOfLines = parseInt($noOfLinesInput.val(), 10);
 325
 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>';
 342
 343         $a.before(html);
 344         $noOfLinesInput.val(noOfLines + 1);
 345     });
 346
 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);
 358
 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>';
 371
 372         $a.before(html);
 373         $noOfPolygonsInput.val(noOfPolygons + 1);
 374     });
 375
 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);
 385
 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>';
 395
 396         $a.before(html1);
 397         $geomType.insertBefore($a);
 398         $a.before(html2);
 399         $noOfGeomsInput.val(noOfGeoms + 1);
 400     });
 401 });