js/gis_data_editor.js

   1 /**
   2  * @fileoverview    functions used in GIS data editor
   3  *
   4  * @requires    jQuery
   5  *
   6  */
   7
   8 /**
   9  * Closes the GIS data editor and perform necessary clean up work.
  10  */
  11 function closeGISEditor(){
  12     $("#popup_background").fadeOut("fast");
  13     $("#gis_editor").fadeOut("fast");
  14     $("#gis_editor").html('');
  15 }
  16
  17 /**
  18  * Prepares the HTML recieved via AJAX.
  19  */
  20 function prepareJSVersion() {
  21     // Hide 'Go' buttons associated with the dropdowns
  22     $('.go').hide();
  23
  24     // Change the text on the submit button
  25     $("input[name='gis_data[save]']")
  26         .attr('value', PMA_messages['strCopy'])
  27         .insertAfter($('#gis_data_textarea'))
  28         .before('<br><br>');
  29
  30     // Add close and cancel links
  31     $('#gis_data_editor').prepend('<a class="close_gis_editor">' + PMA_messages['strClose'] + '</a>');
  32     $('<a class="cancel_gis_editor"> ' + PMA_messages['strCancel'] + '</a>')
  33         .insertAfter($("input[name='gis_data[save]']"));
  34
  35     // Remove the unnecessary text
  36     $('div#gis_data_output p').remove();
  37
  38     // Remove 'add' buttons and add links
  39     $('.add').each(function(e) {
  40         var $button = $(this);
  41         $button.addClass('addJs').removeClass('add');
  42         var classes = $button.attr('class');
  43         $button
  44             .after('<a class="' + classes + '" name="' + $button.attr('name')
  45                 + '">+ ' + $button.attr('value') + '</a>')
  46             .remove();
  47     });
  48 }
  49
  50 /**
  51  * Returns the HTML for a data point.
  52  *
  53  * @param pointNumber point number
  54  * @param prefix      prefix of the name
  55  * @returns the HTML for a data point
  56  */
  57 function addDataPoint(pointNumber, prefix) {
  58     return '<br>' + PMA_messages['strPoint'] + (pointNumber + 1) + ':'
  59         + '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
  60         + '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value="">'
  61         + '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
  62         + '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value="">';
  63 }
  64
  65 /**
  66  * Initialize the visualization in the GIS data editor.
  67  */
  68 function initGISEditorVisualization() {
  69     // Loads either SVG or OSM visualization based on the choice
  70     selectVisualization();
  71     // Adds necessary styles to the div that coontains the openStreetMap
  72     styleOSM();
  73     // Loads the SVG element and make a reference to it
  74     loadSVG();
  75     // Adds controllers for zooming and panning
  76     addZoomPanControllers();
  77     zoomAndPan();
  78 }
  79
  80 /**
  81  * Opens up the GIS data editor.
  82  *
  83  * @param value      current value of the geometry field
  84  * @param field      field name
  85  * @param type       geometry type
  86  * @param input_name name of the input field
  87  * @param token      token
  88  */
  89 function openGISEditor(value, field, type, input_name, token) {
  90     // Center the popup
  91     var windowWidth = document.documentElement.clientWidth;
  92     var windowHeight = document.documentElement.clientHeight;
  93     var popupWidth = windowWidth * 0.9;
  94     var popupHeight = windowHeight * 0.9;
  95     var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
  96     var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
  97     var $gis_editor = $("#gis_editor");
  98     $gis_editor.css({"top": popupOffsetTop, "left": popupOffsetLeft, "width": popupWidth, "height": popupHeight});
  99
 100     $.post('gis_data_editor.php', {
 101         'field' : field,
 102         'value' : value,
 103         'type' : type,
 104         'input_name' : input_name,
 105         'get_gis_editor' : true,
 106         'token' : token
 107     }, function(data) {
 108         if(data.success == true) {
 109             $gis_editor.html(data.gis_editor);
 110             initGISEditorVisualization();
 111             prepareJSVersion();
 112         } else {
 113             PMA_ajaxShowMessage(data.error);
 114         }
 115     }, 'json');
 116
 117     // Make it appear
 118     $("#popup_background").css({"opacity":"0.7"});
 119     $("#popup_background").fadeIn("fast");
 120     $gis_editor.fadeIn("fast");
 121 }
 122
 123 /**
 124  * Prepare and insert the GIS data in Well Known Text format
 125  * to the input field.
 126  */
 127 function insertDataAndClose() {
 128     var $form = $('form#gis_data_editor_form');
 129     var input_name = $form.find("input[name='input_name']").val();
 130
 131     $.post('gis_data_editor.php', $form.serialize() + "&generate=true", function(data) {
 132         if(data.success == true) {
 133             $("input[name='" + input_name + "']").val(data.result);
 134         } else {
 135             PMA_ajaxShowMessage(data.error);
 136         }
 137     }, 'json');
 138     closeGISEditor();
 139 }
 140
 141 $(document).ready(function() {
 142
 143     // Remove the class that is added due to the URL being too long.
 144     $('.open_gis_editor a').removeClass('formLinkSubmit');
 145
 146     /**
 147      * Prepares and insert the GIS data to the input field on clicking 'copy'.
 148      */
 149     $("input[name='gis_data[save]']").live('click', function(event) {
 150         event.preventDefault();
 151         insertDataAndClose();
 152     });
 153
 154     /**
 155      * Prepares and insert the GIS data to the input field on pressing 'enter'.
 156      */
 157     $('#gis_editor').live('submit', function(event) {
 158         event.preventDefault();
 159         insertDataAndClose();
 160     });
 161
 162     /**
 163      * Trigger asynchronous calls on data change and update the output.
 164      */
 165     $('#gis_editor').find("input[type='text']").live('change', function() {
 166         var $form = $('form#gis_data_editor_form');
 167         $.post('gis_data_editor.php', $form.serialize() + "&generate=true", function(data) {
 168             if(data.success == true) {
 169                 $('#gis_data_textarea').val(data.result);
 170                 $('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
 171                 $('#openlayersmap').empty();
 172                 eval(data.openLayers);
 173                 initGISEditorVisualization();
 174             } else {
 175                 PMA_ajaxShowMessage(data.error);
 176             }
 177         }, 'json');
 178     });
 179
 180     /**
 181      * Update the form on change of the GIS type.
 182      */
 183     $(".gis_type").live('change', function(event) {
 184         var $gis_editor = $("#gis_editor");
 185         var $form = $('form#gis_data_editor_form');
 186
 187         $.post('gis_data_editor.php', $form.serialize() + "&get_gis_editor=true", function(data) {
 188             if(data.success == true) {
 189                 $gis_editor.html(data.gis_editor);
 190                 initGISEditorVisualization();
 191                 prepareJSVersion();
 192             } else {
 193                 PMA_ajaxShowMessage(data.error);
 194             }
 195         }, 'json');
 196     });
 197
 198     /**
 199      * Handles closing of the GIS data editor.
 200      */
 201     $('.close_gis_editor, .cancel_gis_editor').live('click', function() {
 202         closeGISEditor();
 203     });
 204
 205     /**
 206      * Handles adding data points
 207      */
 208     $('.addJs.addPoint').live('click', function() {
 209         var $a = $(this);
 210         var name = $a.attr('name');
 211         // Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
 212         var prefix = name.substr(0, name.length - 11);
 213         // Find the number of points
 214         var $noOfPointsInput = $("input[name='" + prefix + "[no_of_points]" + "']");
 215         var noOfPoints = parseInt($noOfPointsInput.attr('value'));
 216         // Add the new data point
 217         var html = addDataPoint(noOfPoints, prefix);
 218         $a.before(html);
 219         $noOfPointsInput.attr('value', noOfPoints + 1);
 220     });
 221
 222     /**
 223      * Handles adding linestrings and inner rings
 224      */
 225     $('.addLine.addJs').live('click', function() {
 226         var $a = $(this);
 227         var name = $a.attr('name');
 228
 229         // Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
 230         var prefix = name.substr(0, name.length - 10);
 231         var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
 232
 233         // Find the number of lines
 234         var $noOfLinesInput = $("input[name='" + prefix + "[no_of_lines]" + "']");
 235         var noOfLines = parseInt($noOfLinesInput.attr('value'));
 236
 237         // Add the new linesting of inner ring based on the type
 238         var html = '<br>';
 239         if (type == 'MULTILINESTRING') {
 240             html += PMA_messages['strLineString'] + (noOfLines + 1) + ':';
 241             var noOfPoints = 2;
 242         } else {
 243             html += PMA_messages['strInnerRing'] + noOfLines + ':';
 244             var noOfPoints = 4;
 245         }
 246         html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '">';
 247         for (i = 0; i < noOfPoints; i++) {
 248             html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
 249         }
 250         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]">+ '
 251             + PMA_messages['strAddPoint'] + '</a><br>';
 252
 253         $a.before(html);
 254         $noOfLinesInput.attr('value', noOfLines + 1);
 255     });
 256
 257     /**
 258      * Handles adding polygons
 259      */
 260     $('.addJs.addPolygon').live('click', function() {
 261         var $a = $(this);
 262         var name = $a.attr('name');
 263         // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
 264         var prefix = name.substr(0, name.length - 13);
 265         // Find the number of polygons
 266         var $noOfPolygonsInput = $("input[name='" + prefix + "[no_of_polygons]" + "']");
 267         var noOfPolygons = parseInt($noOfPolygonsInput.attr('value'));
 268
 269         // Add the new polygon
 270         var html = PMA_messages['strPolygon'] + (noOfPolygons + 1) + ':<br>';
 271         html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1">';
 272             + '<br>' + PMA_messages['strOuterRing'] + ':';
 273             + '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4">';
 274         for (i = 0; i < 4; i++) {
 275             html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
 276         }
 277         html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]">+ '
 278             + PMA_messages['strAddPoint'] + '</a><br>'
 279             + '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]">+ '
 280             + PMA_messages['strAddInnerRing'] + '</a><br><br>';
 281
 282         $a.before(html);
 283         $noOfPolygonsInput.attr('value', noOfPolygons + 1);
 284     });
 285
 286     /**
 287      * Handles adding geoms
 288      */
 289     $('.addJs.addGeom').live('click', function() {
 290         var $a = $(this);
 291         var prefix = 'gis_data[GEOMETRYCOLLECTION]';
 292         // Find the number of geoms
 293         var $noOfGeomsInput = $("input[name='" + prefix + "[geom_count]" + "']");
 294         var noOfGeoms = parseInt($noOfGeomsInput.attr('value'));
 295
 296         var html1 = PMA_messages['strGeometry'] + (noOfGeoms + 1) + ':<br>';
 297         var $geomType = $("select[name='gis_data[" + (noOfGeoms - 1) + "][gis_type]']").clone();
 298         $geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
 299         var html2 = '<br>' + PMA_messages['strPoint'] + ' :'
 300             + '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
 301             + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value="">'
 302             + '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
 303             + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value="">'
 304             + '<br><br>';
 305
 306         $a.before(html1); $geomType.insertBefore($a); $a.before(html2);
 307         $noOfGeomsInput.attr('value', noOfGeoms + 1);
 308     });
 309 });