js/gis_data_editor.js

   1 /**
   2  * @fileoverview    functions used in GIS data editor
   3  *
   4  * @requires    jQuery
   5  *
   6  */
   7
   8 var gisEditorLoaded = false;
   9
  10 /**
  11  * Closes the GIS data editor and perform necessary clean up work.
  12  */
  13 function closeGISEditor(){
  14     $("#popup_background").fadeOut("fast");
  15     $("#gis_editor").fadeOut("fast");
  16     $("#gis_editor").html('');
  17 }
  18
  19 /**
  20  * Prepares the HTML recieved via AJAX.
  21  */
  22 function prepareJSVersion() {
  23     // Hide 'Go' buttons associated with the dropdowns
  24     $('.go').hide();
  25
  26     // Change the text on the submit button
  27     $("input[name='gis_data[save]']")
  28         .attr('value', PMA_messages['strCopy'])
  29         .insertAfter($('#gis_data_textarea'))
  30         .before('<br><br>');
  31
  32     // Add close and cancel links
  33     $('#gis_data_editor').prepend('<a class="close_gis_editor">' + PMA_messages['strClose'] + '</a>');
  34     $('<a class="cancel_gis_editor"> ' + PMA_messages['strCancel'] + '</a>')
  35         .insertAfter($("input[name='gis_data[save]']"));
  36
  37     // Remove the unnecessary text
  38     $('div#gis_data_output p').remove();
  39
  40     // Remove 'add' buttons and add links
  41     $('.add').each(function(e) {
  42         var $button = $(this);
  43         $button.addClass('addJs').removeClass('add');
  44         var classes = $button.attr('class');
  45         $button
  46             .after('<a class="' + classes + '" name="' + $button.attr('name')
  47                 + '">+ ' + $button.attr('value') + '</a>')
  48             .remove();
  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>' + $.sprintf(PMA_messages['strPointN'], (pointNumber + 1)) + ':'
  61         + '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
  62         + '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value="">'
  63         + '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
  64         + '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value="">';
  65 }
  66
  67 /**
  68  * Initialize the visualization in the GIS data editor.
  69  */
  70 function initGISEditorVisualization() {
  71     // Loads either SVG or OSM visualization based on the choice
  72     selectVisualization();
  73     // Adds necessary styles to the div that coontains the openStreetMap
  74     styleOSM();
  75     // Loads the SVG element and make a reference to it
  76     loadSVG();
  77     // Adds controllers for zooming and panning
  78     addZoomPanControllers();
  79     zoomAndPan();
  80 }
  81
  82 /**
  83  * Loads JavaScript files and the GIS editor.
  84  *
  85  * @param value      current value of the geometry field
  86  * @param field      field name
  87  * @param type       geometry type
  88  * @param input_name name of the input field
  89  * @param token      token
  90  */
  91 function loadJSAndGISEditor(value, field, type, input_name, token) {
  92     var head = document.getElementsByTagName('head')[0];
  93     var script;
  94
  95     // Loads a set of small JS file needed for the GIS editor
  96     var smallScripts = [ 'js/jquery/jquery.svg.js',
  97                      'js/jquery/jquery.sprintf.js',
  98                      'js/jquery/jquery.mousewheel.js',
  99                      'js/jquery/jquery.event.drag-2.0.min.js',
 100                      'js/tbl_gis_visualization.js' ];
 101
 102     for (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, token);
 117         }
 118     };
 119     script.onload = function() {
 120         loadGISEditor(value, field, type, input_name, token);
 121     };
 122
 123     script.src = 'js/openlayers/OpenLayers.js';
 124     head.appendChild(script);
 125
 126     gisEditorLoaded = true;
 127 }
 128
 129 /**
 130  * Loads the GIS editor via AJAX
 131  *
 132  * @param value      current value of the geometry field
 133  * @param field      field name
 134  * @param type       geometry type
 135  * @param input_name name of the input field
 136  * @param token      token
 137  */
 138 function loadGISEditor(value, field, type, input_name, token) {
 139
 140     var $gis_editor = $("#gis_editor");
 141     $.post('gis_data_editor.php', {
 142         'field' : field,
 143         'value' : value,
 144         'type' : type,
 145         'input_name' : input_name,
 146         'get_gis_editor' : true,
 147         'token' : token
 148     }, function(data) {
 149         if (data.success == true) {
 150             $gis_editor.html(data.gis_editor);
 151             initGISEditorVisualization();
 152             prepareJSVersion();
 153         } else {
 154             PMA_ajaxShowMessage(data.error);
 155         }
 156     }, 'json');
 157 }
 158
 159 /**
 160  * Opens up the dialog for the GIS data editor.
 161  */
 162 function openGISEditor() {
 163
 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('<div id="gis_data_editor"><img class="ajaxIcon" id="loadingMonitorIcon" src="'
 179             + pmaThemeImage + 'ajax_clock_small.gif" alt=""></div>'
 180     );
 181
 182     // Make it appear
 183     $backgrouond.fadeIn("fast");
 184     $gis_editor.fadeIn("fast");
 185 }
 186
 187 /**
 188  * Prepare and insert the GIS data in Well Known Text format
 189  * to the input field.
 190  */
 191 function insertDataAndClose() {
 192     var $form = $('form#gis_data_editor_form');
 193     var input_name = $form.find("input[name='input_name']").val();
 194
 195     $.post('gis_data_editor.php', $form.serialize() + "&generate=true", function(data) {
 196         if(data.success == true) {
 197             $("input[name='" + input_name + "']").val(data.result);
 198         } else {
 199             PMA_ajaxShowMessage(data.error);
 200         }
 201     }, 'json');
 202     closeGISEditor();
 203 }
 204
 205 $(document).ready(function() {
 206
 207     // Remove the class that is added due to the URL being too long.
 208     $('.open_gis_editor a').removeClass('formLinkSubmit');
 209
 210     /**
 211      * Prepares and insert the GIS data to the input field on clicking 'copy'.
 212      */
 213     $("input[name='gis_data[save]']").live('click', function(event) {
 214         event.preventDefault();
 215         insertDataAndClose();
 216     });
 217
 218     /**
 219      * Prepares and insert the GIS data to the input field on pressing 'enter'.
 220      */
 221     $('#gis_editor').live('submit', function(event) {
 222         event.preventDefault();
 223         insertDataAndClose();
 224     });
 225
 226     /**
 227      * Trigger asynchronous calls on data change and update the output.
 228      */
 229     $('#gis_editor').find("input[type='text']").live('change', function() {
 230         var $form = $('form#gis_data_editor_form');
 231         $.post('gis_data_editor.php', $form.serialize() + "&generate=true", function(data) {
 232             if(data.success == true) {
 233                 $('#gis_data_textarea').val(data.result);
 234                 $('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
 235                 $('#openlayersmap').empty();
 236                 eval(data.openLayers);
 237                 initGISEditorVisualization();
 238             } else {
 239                 PMA_ajaxShowMessage(data.error);
 240             }
 241         }, 'json');
 242     });
 243
 244     /**
 245      * Update the form on change of the GIS type.
 246      */
 247     $(".gis_type").live('change', function(event) {
 248         var $gis_editor = $("#gis_editor");
 249         var $form = $('form#gis_data_editor_form');
 250
 251         $.post('gis_data_editor.php', $form.serialize() + "&get_gis_editor=true", function(data) {
 252             if(data.success == true) {
 253                 $gis_editor.html(data.gis_editor);
 254                 initGISEditorVisualization();
 255                 prepareJSVersion();
 256             } else {
 257                 PMA_ajaxShowMessage(data.error);
 258             }
 259         }, 'json');
 260     });
 261
 262     /**
 263      * Handles closing of the GIS data editor.
 264      */
 265     $('.close_gis_editor, .cancel_gis_editor').live('click', function() {
 266         closeGISEditor();
 267     });
 268
 269     /**
 270      * Handles adding data points
 271      */
 272     $('.addJs.addPoint').live('click', function() {
 273         var $a = $(this);
 274         var name = $a.attr('name');
 275         // Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
 276         var prefix = name.substr(0, name.length - 11);
 277         // Find the number of points
 278         var $noOfPointsInput = $("input[name='" + prefix + "[no_of_points]" + "']");
 279         var noOfPoints = parseInt($noOfPointsInput.attr('value'));
 280         // Add the new data point
 281         var html = addDataPoint(noOfPoints, prefix);
 282         $a.before(html);
 283         $noOfPointsInput.attr('value', noOfPoints + 1);
 284     });
 285
 286     /**
 287      * Handles adding linestrings and inner rings
 288      */
 289     $('.addLine.addJs').live('click', function() {
 290         var $a = $(this);
 291         var name = $a.attr('name');
 292
 293         // Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
 294         var prefix = name.substr(0, name.length - 10);
 295         var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
 296
 297         // Find the number of lines
 298         var $noOfLinesInput = $("input[name='" + prefix + "[no_of_lines]" + "']");
 299         var noOfLines = parseInt($noOfLinesInput.attr('value'));
 300
 301         // Add the new linesting of inner ring based on the type
 302         var html = '<br>';
 303         if (type == 'MULTILINESTRING') {
 304             html += PMA_messages['strLineString'] + (noOfLines + 1) + ':';
 305             var noOfPoints = 2;
 306         } else {
 307             html += PMA_messages['strInnerRing'] + noOfLines + ':';
 308             var noOfPoints = 4;
 309         }
 310         html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '">';
 311         for (i = 0; i < noOfPoints; i++) {
 312             html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
 313         }
 314         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]">+ '
 315             + PMA_messages['strAddPoint'] + '</a><br>';
 316
 317         $a.before(html);
 318         $noOfLinesInput.attr('value', noOfLines + 1);
 319     });
 320
 321     /**
 322      * Handles adding polygons
 323      */
 324     $('.addJs.addPolygon').live('click', function() {
 325         var $a = $(this);
 326         var name = $a.attr('name');
 327         // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
 328         var prefix = name.substr(0, name.length - 13);
 329         // Find the number of polygons
 330         var $noOfPolygonsInput = $("input[name='" + prefix + "[no_of_polygons]" + "']");
 331         var noOfPolygons = parseInt($noOfPolygonsInput.attr('value'));
 332
 333         // Add the new polygon
 334         var html = PMA_messages['strPolygon'] + (noOfPolygons + 1) + ':<br>';
 335         html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1">';
 336             + '<br>' + PMA_messages['strOuterRing'] + ':';
 337             + '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4">';
 338         for (i = 0; i < 4; i++) {
 339             html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
 340         }
 341         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]">+ '
 342             + PMA_messages['strAddPoint'] + '</a><br>'
 343             + '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]">+ '
 344             + PMA_messages['strAddInnerRing'] + '</a><br><br>';
 345
 346         $a.before(html);
 347         $noOfPolygonsInput.attr('value', noOfPolygons + 1);
 348     });
 349
 350     /**
 351      * Handles adding geoms
 352      */
 353     $('.addJs.addGeom').live('click', function() {
 354         var $a = $(this);
 355         var prefix = 'gis_data[GEOMETRYCOLLECTION]';
 356         // Find the number of geoms
 357         var $noOfGeomsInput = $("input[name='" + prefix + "[geom_count]" + "']");
 358         var noOfGeoms = parseInt($noOfGeomsInput.attr('value'));
 359
 360         var html1 = PMA_messages['strGeometry'] + (noOfGeoms + 1) + ':<br>';
 361         var $geomType = $("select[name='gis_data[" + (noOfGeoms - 1) + "][gis_type]']").clone();
 362         $geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
 363         var html2 = '<br>' + PMA_messages['strPoint'] + ' :'
 364             + '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
 365             + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value="">'
 366             + '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
 367             + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value="">'
 368             + '<br><br>';
 369
 370         $a.before(html1); $geomType.insertBefore($a); $a.before(html2);
 371         $noOfGeomsInput.attr('value', noOfGeoms + 1);
 372     });
 373 });