js/gis_data_editor.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * @fileoverview    functions used in GIS data editor
   4  *
   5  * @requires    jQuery
   6  *
   7  */
   8
   9 var gisEditorLoaded = false;
  10
  11 /**
  12  * Closes the GIS data editor and perform necessary clean up work.
  13  */
  14 function closeGISEditor () {
  15     $('#popup_background').fadeOut('fast');
  16     $('#gis_editor').fadeOut('fast', function () {
  17         $(this).empty();
  18     });
  19 }
  20
  21 /**
  22  * Prepares the HTML received via AJAX.
  23  */
  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/>');
  30
  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]\']'));
  35
  36     // Remove the unnecessary text
  37     $('div#gis_data_output p').remove();
  38
  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');
  44         $button.replaceWith(
  45             '<a class="' + classes +
  46             '" name="' + $button.attr('name') +
  47             '" href="#">+ ' + $button.val() + '</a>'
  48         );
  49     });
  50 }
  51
  52 /**
  53  * Returns the HTML for a data point.
  54  *
  55  * @param pointNumber point number
  56  * @param prefix      prefix of the name
  57  * @returns the HTML for a data point
  58  */
  59 function addDataPoint (pointNumber, prefix) {
  60     return '<br/>' +
  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=""/>';
  66 }
  67
  68 /**
  69  * Initialize the visualization in the GIS data editor.
  70  */
  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
  75     styleOSM();
  76     // Loads the SVG element and make a reference to it
  77     loadSVG();
  78     // Adds controllers for zooming and panning
  79     addZoomPanControllers();
  80     zoomAndPan();
  81 }
  82
  83 /**
  84  * Loads JavaScript files and the GIS editor.
  85  *
  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
  90  * @param token      token
  91  */
  92 function loadJSAndGISEditor (value, field, type, input_name) {
  93     var head = document.getElementsByTagName('head')[0];
  94     var script;
  95
  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'];
 101
 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);
 107     }
 108
 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';
 113
 114     script.onreadystatechange = function () {
 115         if (this.readyState === 'complete') {
 116             loadGISEditor(value, field, type, input_name);
 117         }
 118     };
 119     script.onload = function () {
 120         loadGISEditor(value, field, type, input_name);
 121     };
 122     script.onerror = function () {
 123         loadGISEditor(value, field, type, input_name);
 124     };
 125
 126     script.src = 'js/vendor/openlayers/OpenLayers.js';
 127     head.appendChild(script);
 128
 129     gisEditorLoaded = true;
 130 }
 131
 132 /**
 133  * Loads the GIS editor via AJAX
 134  *
 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
 139  */
 140 function loadGISEditor (value, field, type, input_name) {
 141     var $gis_editor = $('#gis_editor');
 142     $.post('gis_data_editor.php', {
 143         'field' : field,
 144         'value' : value,
 145         'type' : type,
 146         'input_name' : input_name,
 147         'get_gis_editor' : true,
 148         'ajax_request': true
 149     }, function (data) {
 150         if (typeof data !== 'undefined' && data.success === true) {
 151             $gis_editor.html(data.gis_editor);
 152             initGISEditorVisualization();
 153             prepareJSVersion();
 154         } else {
 155             PMA_ajaxShowMessage(data.error, false);
 156         }
 157     }, 'json');
 158 }
 159
 160 /**
 161  * Opens up the dialog for the GIS data editor.
 162  */
 163 function openGISEditor () {
 164     // Center the popup
 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;
 171
 172     var $gis_editor = $('#gis_editor');
 173     var $backgrouond = $('#popup_background');
 174
 175     $gis_editor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
 176     $backgrouond.css({ 'opacity' : '0.7' });
 177
 178     $gis_editor.append(
 179         '<div id="gis_data_editor">' +
 180         '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
 181         pmaThemeImage + 'ajax_clock_small.gif" alt=""/>' +
 182         '</div>'
 183     );
 184
 185     // Make it appear
 186     $backgrouond.fadeIn('fast');
 187     $gis_editor.fadeIn('fast');
 188 }
 189
 190 /**
 191  * Prepare and insert the GIS data in Well Known Text format
 192  * to the input field.
 193  */
 194 function insertDataAndClose () {
 195     var $form = $('form#gis_data_editor_form');
 196     var input_name = $form.find('input[name=\'input_name\']').val();
 197
 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);
 202         } else {
 203             PMA_ajaxShowMessage(data.error, false);
 204         }
 205     }, 'json');
 206     closeGISEditor();
 207 }
 208
 209 /**
 210  * Unbind all event handlers before tearing down a page
 211  */
 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');
 222 });
 223
 224 AJAX.registerOnload('gis_data_editor.js', function () {
 225     /**
 226      * Prepares and insert the GIS data to the input field on clicking 'copy'.
 227      */
 228     $(document).on('click', '#gis_editor input[name=\'gis_data[save]\']', function (event) {
 229         event.preventDefault();
 230         insertDataAndClose();
 231     });
 232
 233     /**
 234      * Prepares and insert the GIS data to the input field on pressing 'enter'.
 235      */
 236     $(document).on('submit', '#gis_editor', function (event) {
 237         event.preventDefault();
 238         insertDataAndClose();
 239     });
 240
 241     /**
 242      * Trigger asynchronous calls on data change and update the output.
 243      */
 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();
 255             } else {
 256                 PMA_ajaxShowMessage(data.error, false);
 257             }
 258         }, 'json');
 259     });
 260
 261     /**
 262      * Update the form on change of the GIS type.
 263      */
 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');
 267
 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();
 273                 prepareJSVersion();
 274             } else {
 275                 PMA_ajaxShowMessage(data.error, false);
 276             }
 277         }, 'json');
 278     });
 279
 280     /**
 281      * Handles closing of the GIS data editor.
 282      */
 283     $(document).on('click', '#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor', function () {
 284         closeGISEditor();
 285     });
 286
 287     /**
 288      * Handles adding data points
 289      */
 290     $(document).on('click', '#gis_editor a.addJs.addPoint', function () {
 291         var $a = $(this);
 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);
 300         $a.before(html);
 301         $noOfPointsInput.val(noOfPoints + 1);
 302     });
 303
 304     /**
 305      * Handles adding linestrings and inner rings
 306      */
 307     $(document).on('click', '#gis_editor a.addLine.addJs', function () {
 308         var $a = $(this);
 309         var name = $a.attr('name');
 310
 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(']'));
 314
 315         // Find the number of lines
 316         var $noOfLinesInput = $('input[name=\'' + prefix + '[no_of_lines]' + '\']');
 317         var noOfLines = parseInt($noOfLinesInput.val(), 10);
 318
 319         // Add the new linesting of inner ring based on the type
 320         var html = '<br/>';
 321         var noOfPoints;
 322         if (type === 'MULTILINESTRING') {
 323             html += PMA_messages.strLineString + ' ' + (noOfLines + 1) + ':';
 324             noOfPoints = 2;
 325         } else {
 326             html += PMA_messages.strInnerRing + ' ' + noOfLines + ':';
 327             noOfPoints = 4;
 328         }
 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 + ']'));
 332         }
 333         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ ' +
 334             PMA_messages.strAddPoint + '</a><br/>';
 335
 336         $a.before(html);
 337         $noOfLinesInput.val(noOfLines + 1);
 338     });
 339
 340     /**
 341      * Handles adding polygons
 342      */
 343     $(document).on('click', '#gis_editor a.addJs.addPolygon', function () {
 344         var $a = $(this);
 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);
 351
 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]'));
 359         }
 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/>';
 364
 365         $a.before(html);
 366         $noOfPolygonsInput.val(noOfPolygons + 1);
 367     });
 368
 369     /**
 370      * Handles adding geoms
 371      */
 372     $(document).on('click', '#gis_editor a.addJs.addGeom', function () {
 373         var $a = $(this);
 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);
 378
 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=""/>' +
 387             '<br/><br/>';
 388
 389         $a.before(html1);
 390         $geomType.insertBefore($a);
 391         $a.before(html2);
 392         $noOfGeomsInput.val(noOfGeoms + 1);
 393     });
 394 });