upgrade

main/template/default/career/diagram.tpl

@@ -0,0 +1,165 @@
+<script>
+    mxBasePath = '{{ _p.web_lib }}mxgraph/src/';
+</script>
+<style>
+    #graphContainer svg {
+        min-width: 100% !important;
+    }
+</style>
+<script src="{{ _p.web_lib }}mxgraph/src/js/mxClient.js"></script>
+<script>
+    // Overridden to define per-shape connection points
+    mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
+        if (terminal != null && terminal.shape != null) {
+            if (terminal.shape.stencil != null) {
+                if (terminal.shape.stencil != null) {
+                    return terminal.shape.stencil.constraints;
+                }
+            } else if (terminal.shape.constraints != null) {
+                return terminal.shape.constraints;
+            }
+        }
+
+        return null;
+    };
+
+
+    // Edges have no connection points
+    mxPolyline.prototype.constraints = null;
+
+    // Program starts here. Creates a sample graph in the
+    // DOM node with the specified ID. This function is invoked
+    // from the onLoad event handler of the document (see below).
+    function main(container)
+    {
+        // Checks if the browser is supported
+        if (!mxClient.isBrowserSupported()) {
+            // Displays an error message if the browser is not supported.
+            mxUtils.error('Browser is not supported!', 200, false);
+        } else {
+            // Disables the built-in context menu
+            mxEvent.disableContextMenu(container);
+
+            // Creates the graph inside the given container
+            var graph = new mxGraph(container);
+            graph.setConnectable(true);
+            graph.setHtmlLabels(true);
+
+            // Blocks the selection of elements
+            graph.setEnabled(false);
+
+            // Enables connect preview for the default edge style
+            graph.connectionHandler.createEdgeState = function(me) {
+                var edge = graph.createEdge(null, null, null, null, null);
+
+                return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
+            };
+
+            // Specifies the default edge style
+            graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
+
+            // Enables rubberband selection
+            new mxRubberband(graph);
+
+            // Gets the default parent for inserting new cells. This
+            // is normally the first child of the root (ie. layer 0).
+            var parent = graph.getDefaultParent();
+
+            // Adds cells to the model in a single step
+            graph.getModel().beginUpdate();
+            try {
+                //var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+                //var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+                //var e1 = graph.insertEdge(parent, null, '', v1, v2);
+                {% for vertex in group_list %}
+                    {{ vertex }}
+                {% endfor %}
+
+                {% for vertex in subgroup_list %}
+                    {{ vertex }}
+                {% endfor %}
+
+                {% for vertex in vertex_list %}
+                    {% if 0 == iframe %}
+                        {{ vertex |replace({'iframe=1': 'iframe=0',})}}
+                    {% else %}
+                        {{ vertex }}
+                    {% endif %}
+                {% endfor %}
+
+                {% for vertex in connections %}
+                    {{ vertex }}
+                {% endfor %}
+            } finally {
+                // Updates the display
+                graph.getModel().endUpdate();
+            }
+        }
+    }
+
+    $(function () {
+        main(document.getElementById('graphContainer'));
+
+        var svg1 = document.getElementsByTagName("svg")[0];
+        var data = svg1.getBBox();
+        var widthValue = data.width + 100;
+        var heightValue = data.height + 100;
+
+        var att = document.createAttributeNS(null, "viewBox");
+        att.value = '0 0 ' + widthValue + ' ' + heightValue;
+        svg1.setAttributeNode(att);
+
+        $(".popup").qtip({
+            content: {
+                text: function(event, api) {
+                    var item = $(this);
+                    var itemId = $(this).attr("id");
+                    var desc = $(this).attr("data-description");
+                    var period = $(this).attr("data-period");
+                    var teacherText = $(this).attr("data-teacher-text");
+                    var teacher = $(this).attr("data-teacher");
+                    var score = $(this).attr("data-score");
+                    var value = $(this).attr("data-score-value");
+                    var info = $(this).attr("data-info");
+
+                    var teacherLabel = '';
+                    if (teacher != '') {
+                        teacherLabel = teacherText + ': ' + teacher + '<br />';
+                    }
+
+                    var textToShow = desc + '<br />' +
+                        period + '<br />' +
+                        teacherLabel +
+                        score + ': ' + value + '<br /><br />'+
+                        info + '<br />'
+                    ;
+
+                    return textToShow;
+                }
+            },
+            events: {
+                render: function(event, api) {
+                    var popup = $(api.elements.target);
+                    var bg = popup.attr("data-background-color");
+                    var color = popup.attr("data-color");
+                    var borderColor = popup.attr("data-border-color");
+                    // Grab the tooltip element from the API
+                    //var tooltip = api.elements.tooltip;
+
+                    $(this).css('background-color', bg);
+                    $(this).css('color', color);
+                    $(this).css('border-color', borderColor);
+                }
+            },
+            position: {
+                my: 'bottom left',  // Position my top left...
+                at: 'top right', // at the bottom right of...
+                adjust: {
+                    x: 0,
+                    y: 0
+                }
+            }
+        });
+    });
+</script>
+{{ content }}

main/template/default/career/diagram_full.tpl

@@ -0,0 +1,6 @@
+{% extends 'layout/layout_1_col.tpl'|get_template %}
+
+{% block content %}
+    {% set iframe = 0 %}
+    {% include 'career/diagram.tpl' |get_template %}
+{% endblock %}

main/template/default/career/diagram_iframe.tpl

@@ -0,0 +1,6 @@
+{% extends 'layout/no_layout.tpl'|get_template %}
+
+{% block body %}
+    {% set iframe = 1 %}
+    {% include 'career/diagram.tpl' |get_template %}
+{% endblock %}