1 files changed, 387 insertions, 0 deletions
diff --git a/hugo/js/gis_data_editor.js b/hugo/js/gis_data_editor.js
new file mode 100644
index 0000000..d24bfb9
--- /dev/null
+++ b/hugo/js/gis_data_editor.js
@@ -0,0 +1,387 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * @fileoverview    functions used in GIS data editor
+ *
+ * @requires    jQuery
+ *
+ */
+
+var gisEditorLoaded = false;
+
+/**
+ * Closes the GIS data editor and perform necessary clean up work.
+ */
+function closeGISEditor(){
+    $("#popup_background").fadeOut("fast");
+    $("#gis_editor").fadeOut("fast", function () {
+        $(this).empty();
+    });
+}
+
+/**
+ * Prepares the HTML recieved via AJAX.
+ */
+function prepareJSVersion() {
+    // Change the text on the submit button
+    $("#gis_editor input[name='gis_data[save]']")
+        .val(PMA_messages['strCopy'])
+        .insertAfter($('#gis_data_textarea'))
+        .before('<br/><br/>');
+
+    // Add close and cancel links
+    $('#gis_data_editor').prepend('<a class="close_gis_editor" href="#">' + PMA_messages['strClose'] + '</a>');
+    $('<a class="cancel_gis_editor" href="#"> ' + PMA_messages['strCancel'] + '</a>')
+        .insertAfter($("input[name='gis_data[save]']"));
+
+    // Remove the unnecessary text
+    $('div#gis_data_output p').remove();
+
+    // Remove 'add' buttons and add links
+    $('#gis_editor input.add').each(function(e) {
+        var $button = $(this);
+        $button.addClass('addJs').removeClass('add');
+        var classes = $button.attr('class');
+        $button.replaceWith(
+            '<a class="' + classes + '" name="' + $button.attr('name')
+                + '" href="#">+ ' + $button.val() + '</a>'
+        );
+    });
+}
+
+/**
+ * Returns the HTML for a data point.
+ *
+ * @param pointNumber point number
+ * @param prefix      prefix of the name
+ * @returns the HTML for a data point
+ */
+function addDataPoint(pointNumber, prefix) {
+    return '<br/>' + $.sprintf(PMA_messages['strPointN'], (pointNumber + 1)) + ': '
+        + '<label for="x">' + PMA_messages['strX'] + '</label>'
+        + '<input type="text" name="' + prefix + '[' + pointNumber + '][x]" value=""/>'
+        + '<label for="y">' + PMA_messages['strY'] + '</label>'
+        + '<input type="text" name="' + prefix + '[' + pointNumber + '][y]" value=""/>';
+}
+
+/**
+ * Initialize the visualization in the GIS data editor.
+ */
+function initGISEditorVisualization() {
+    // Loads either SVG or OSM visualization based on the choice
+    selectVisualization();
+    // Adds necessary styles to the div that coontains the openStreetMap
+    styleOSM();
+    // Loads the SVG element and make a reference to it
+    loadSVG();
+    // Adds controllers for zooming and panning
+    addZoomPanControllers();
+    zoomAndPan();
+}
+
+/**
+ * Loads JavaScript files and the GIS editor.
+ *
+ * @param value      current value of the geometry field
+ * @param field      field name
+ * @param type       geometry type
+ * @param input_name name of the input field
+ * @param token      token
+ */
+function loadJSAndGISEditor(value, field, type, input_name, token) {
+    var head = document.getElementsByTagName('head')[0];
+    var script;
+
+    // Loads a set of small JS file needed for the GIS editor
+    var smallScripts = [ 'js/jquery/jquery.svg.js',
+                     'js/jquery/jquery.mousewheel.js',
+                     'js/jquery/jquery.event.drag-2.2.js',
+                     'js/tbl_gis_visualization.js' ];
+
+    for (var i = 0; i < smallScripts.length; i++) {
+        script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = smallScripts[i];
+        head.appendChild(script);
+    }
+
+    // OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
+    // Load the JS and do a callback to load the content for the GIS Editor.
+    script = document.createElement('script');
+    script.type = 'text/javascript';
+
+    script.onreadystatechange = function() {
+        if (this.readyState == 'complete') {
+            loadGISEditor(value, field, type, input_name, token);
+        }
+    };
+    script.onload = function() {
+        loadGISEditor(value, field, type, input_name, token);
+    };
+
+    script.src = 'js/openlayers/OpenLayers.js';
+    head.appendChild(script);
+
+    gisEditorLoaded = true;
+}
+
+/**
+ * Loads the GIS editor via AJAX
+ *
+ * @param value      current value of the geometry field
+ * @param field      field name
+ * @param type       geometry type
+ * @param input_name name of the input field
+ * @param token      token
+ */
+function loadGISEditor(value, field, type, input_name, token) {
+
+    var $gis_editor = $("#gis_editor");
+    $.post('gis_data_editor.php', {
+        'field' : field,
+        'value' : value,
+        'type' : type,
+        'input_name' : input_name,
+        'get_gis_editor' : true,
+        'token' : token,
+        'ajax_request': true
+    }, function(data) {
+        if (data.success == true) {
+            $gis_editor.html(data.gis_editor);
+            initGISEditorVisualization();
+            prepareJSVersion();
+        } else {
+            PMA_ajaxShowMessage(data.error, false);
+        }
+    }, 'json');
+}
+
+/**
+ * Opens up the dialog for the GIS data editor.
+ */
+function openGISEditor() {
+
+    // Center the popup
+    var windowWidth = document.documentElement.clientWidth;
+    var windowHeight = document.documentElement.clientHeight;
+    var popupWidth = windowWidth * 0.9;
+    var popupHeight = windowHeight * 0.9;
+    var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
+    var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
+
+    var $gis_editor = $("#gis_editor");
+    var $backgrouond = $("#popup_background");
+
+    $gis_editor.css({"top": popupOffsetTop, "left": popupOffsetLeft, "width": popupWidth, "height": popupHeight});
+    $backgrouond.css({"opacity":"0.7"});
+
+    $gis_editor.append('<div id="gis_data_editor"><img class="ajaxIcon" id="loadingMonitorIcon" src="'
+            + pmaThemeImage + 'ajax_clock_small.gif" alt=""/></div>'
+    );
+
+    // Make it appear
+    $backgrouond.fadeIn("fast");
+    $gis_editor.fadeIn("fast");
+}
+
+/**
+ * Prepare and insert the GIS data in Well Known Text format
+ * to the input field.
+ */
+function insertDataAndClose() {
+    var $form = $('form#gis_data_editor_form');
+    var input_name = $form.find("input[name='input_name']").val();
+
+    $.post('gis_data_editor.php', $form.serialize() + "&generate=true&ajax_request=true", function(data) {
+        if (data.success == true) {
+            $("input[name='" + input_name + "']").val(data.result);
+        } else {
+            PMA_ajaxShowMessage(data.error, false);
+        }
+    }, 'json');
+    closeGISEditor();
+}
+
+/**
+ * Unbind all event handlers before tearing down a page
+ */
+AJAX.registerTeardown('gis_data_editor.js', function() {
+    $("#gis_editor input[name='gis_data[save]']").die('click');
+    $('#gis_editor').die('submit');
+    $('#gis_editor').find("input[type='text']").die('change');
+    $("#gis_editor select.gis_type").die('change');
+    $('#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor').die('click');
+    $('#gis_editor a.addJs.addPoint').die('click');
+    $('#gis_editor a.addLine.addJs').die('click');
+    $('#gis_editor a.addJs.addPolygon').die('click');
+    $('#gis_editor a.addJs.addGeom').die('click');
+});
+
+AJAX.registerOnload('gis_data_editor.js', function() {
+
+    // Remove the class that is added due to the URL being too long.
+    $('span.open_gis_editor a').removeClass('formLinkSubmit');
+
+    /**
+     * Prepares and insert the GIS data to the input field on clicking 'copy'.
+     */
+    $("#gis_editor input[name='gis_data[save]']").live('click', function(event) {
+        event.preventDefault();
+        insertDataAndClose();
+    });
+
+    /**
+     * Prepares and insert the GIS data to the input field on pressing 'enter'.
+     */
+    $('#gis_editor').live('submit', function(event) {
+        event.preventDefault();
+        insertDataAndClose();
+    });
+
+    /**
+     * Trigger asynchronous calls on data change and update the output.
+     */
+    $('#gis_editor').find("input[type='text']").live('change', function() {
+        var $form = $('form#gis_data_editor_form');
+        $.post('gis_data_editor.php', $form.serialize() + "&generate=true&ajax_request=true", function(data) {
+            if (data.success == true) {
+                $('#gis_data_textarea').val(data.result);
+                $('#placeholder').empty().removeClass('hasSVG').html(data.visualization);
+                $('#openlayersmap').empty();
+                eval(data.openLayers);
+                initGISEditorVisualization();
+            } else {
+                PMA_ajaxShowMessage(data.error, false);
+            }
+        }, 'json');
+    });
+
+    /**
+     * Update the form on change of the GIS type.
+     */
+    $("#gis_editor select.gis_type").live('change', function(event) {
+        var $gis_editor = $("#gis_editor");
+        var $form = $('form#gis_data_editor_form');
+
+        $.post('gis_data_editor.php', $form.serialize() + "&get_gis_editor=true&ajax_request=true", function(data) {
+            if (data.success == true) {
+                $gis_editor.html(data.gis_editor);
+                initGISEditorVisualization();
+                prepareJSVersion();
+            } else {
+                PMA_ajaxShowMessage(data.error, false);
+            }
+        }, 'json');
+    });
+
+    /**
+     * Handles closing of the GIS data editor.
+     */
+    $('#gis_editor a.close_gis_editor, #gis_editor a.cancel_gis_editor').live('click', function() {
+        closeGISEditor();
+    });
+
+    /**
+     * Handles adding data points
+     */
+    $('#gis_editor a.addJs.addPoint').live('click', function() {
+        var $a = $(this);
+        var name = $a.attr('name');
+        // Eg. name = gis_data[0][MULTIPOINT][add_point] => prefix = gis_data[0][MULTIPOINT]
+        var prefix = name.substr(0, name.length - 11);
+        // Find the number of points
+        var $noOfPointsInput = $("input[name='" + prefix + "[no_of_points]" + "']");
+        var noOfPoints = parseInt($noOfPointsInput.val());
+        // Add the new data point
+        var html = addDataPoint(noOfPoints, prefix);
+        $a.before(html);
+        $noOfPointsInput.val(noOfPoints + 1);
+    });
+
+    /**
+     * Handles adding linestrings and inner rings
+     */
+    $('#gis_editor a.addLine.addJs').live('click', function() {
+        var $a = $(this);
+        var name = $a.attr('name');
+
+        // Eg. name = gis_data[0][MULTILINESTRING][add_line] => prefix = gis_data[0][MULTILINESTRING]
+        var prefix = name.substr(0, name.length - 10);
+        var type = prefix.slice(prefix.lastIndexOf('[') + 1, prefix.lastIndexOf(']'));
+
+        // Find the number of lines
+        var $noOfLinesInput = $("input[name='" + prefix + "[no_of_lines]" + "']");
+        var noOfLines = parseInt($noOfLinesInput.val());
+
+        // Add the new linesting of inner ring based on the type
+        var html = '<br/>';
+        if (type == 'MULTILINESTRING') {
+            html += PMA_messages['strLineString'] + ' ' + (noOfLines + 1) + ':';
+            var noOfPoints = 2;
+        } else {
+            html += PMA_messages['strInnerRing'] + ' ' + noOfLines + ':';
+            var noOfPoints = 4;
+        }
+        html += '<input type="hidden" name="' + prefix + '[' + noOfLines + '][no_of_points]" value="' + noOfPoints + '"/>';
+        for (var i = 0; i < noOfPoints; i++) {
+            html += addDataPoint(i, (prefix + '[' + noOfLines + ']'));
+        }
+        html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfLines + '][add_point]" href="#">+ '
+            + PMA_messages['strAddPoint'] + '</a><br/>';
+
+        $a.before(html);
+        $noOfLinesInput.val(noOfLines + 1);
+    });
+
+    /**
+     * Handles adding polygons
+     */
+    $('#gis_editor a.addJs.addPolygon').live('click', function() {
+        var $a = $(this);
+        var name = $a.attr('name');
+        // Eg. name = gis_data[0][MULTIPOLYGON][add_polygon] => prefix = gis_data[0][MULTIPOLYGON]
+        var prefix = name.substr(0, name.length - 13);
+        // Find the number of polygons
+        var $noOfPolygonsInput = $("input[name='" + prefix + "[no_of_polygons]" + "']");
+        var noOfPolygons = parseInt($noOfPolygonsInput.val());
+
+        // Add the new polygon
+        var html = PMA_messages['strPolygon'] + ' ' + (noOfPolygons + 1) + ':<br/>';
+        html += '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][no_of_lines]" value="1"/>'
+            + '<br/>' + PMA_messages['strOuterRing'] + ':'
+            + '<input type="hidden" name="' + prefix + '[' + noOfPolygons + '][0][no_of_points]" value="4"/>';
+        for (var i = 0; i < 4; i++) {
+            html += addDataPoint(i, (prefix + '[' + noOfPolygons + '][0]'));
+        }
+        html += '<a class="addPoint addJs" name="' + prefix + '[' + noOfPolygons + '][0][add_point]" href="#">+ '
+            + PMA_messages['strAddPoint'] + '</a><br/>'
+            + '<a class="addLine addJs" name="' + prefix + '[' + noOfPolygons + '][add_line]" href="#">+ '
+            + PMA_messages['strAddInnerRing'] + '</a><br/><br/>';
+
+        $a.before(html);
+        $noOfPolygonsInput.val(noOfPolygons + 1);
+    });
+
+    /**
+     * Handles adding geoms
+     */
+    $('#gis_editor a.addJs.addGeom').live('click', function() {
+        var $a = $(this);
+        var prefix = 'gis_data[GEOMETRYCOLLECTION]';
+        // Find the number of geoms
+        var $noOfGeomsInput = $("input[name='" + prefix + "[geom_count]" + "']");
+        var noOfGeoms = parseInt($noOfGeomsInput.val());
+
+        var html1 = PMA_messages['strGeometry'] + ' ' + (noOfGeoms + 1) + ':<br/>';
+        var $geomType = $("select[name='gis_data[" + (noOfGeoms - 1) + "][gis_type]']").clone();
+        $geomType.attr('name', 'gis_data[' + noOfGeoms + '][gis_type]').val('POINT');
+        var html2 = '<br/>' + PMA_messages['strPoint'] + ' :'
+            + '<label for="x"> ' + PMA_messages['strX'] + ' </label>'
+            + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][x]" value=""/>'
+            + '<label for="y"> ' + PMA_messages['strY'] + ' </label>'
+            + '<input type="text" name="gis_data[' + noOfGeoms + '][POINT][y]" value=""/>'
+            + '<br/><br/>';
+
+        $a.before(html1); $geomType.insertBefore($a); $a.before(html2);
+        $noOfGeomsInput.val(noOfGeoms + 1);
+    });
+});