chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Career diagram: Move tpl code in separate tpls

Browse Source 
In order to allow to be added in an iframe BT#18720
pull/3883/head
Julio Montoya 5 years ago
parent d9e57ba093
commit 417982b528
5 changed files with 171 additions and 158 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      main/admin/career_diagram.php
  2. 308
      main/template/default/career/diagram.tpl
  3. 6
      main/template/default/career/diagram_full.tpl
  4. 6
      main/template/default/career/diagram_iframe.tpl
  5. 7
      main/user/career_diagram.php

2
main/admin/career_diagram.php
Unescape View File

@ -107,5 +107,5 @@ if (!empty($diagram)) {
} }
$tpl->assign('content', $html); $tpl->assign('content', $html);
$layout = $tpl->get_template('career/diagram.tpl'); $layout = $tpl->get_template('career/diagram_full.tpl');
$tpl->display($layout); $tpl->display($layout);

308
main/template/default/career/diagram.tpl
Unescape View File

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

6
main/template/default/career/diagram_full.tpl
Unescape View File

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

6
main/template/default/career/diagram_iframe.tpl
Unescape View File

@ -0,0 +1,6 @@
{% extends 'layout/blank_no_header.tpl'|get_template %}
{% block body %}
{% include 'diagram.tpl'%}
{{ content }}
{% endblock %}

7
main/user/career_diagram.php
Unescape View File

@ -97,5 +97,10 @@ if (!empty($diagram)) {
} }
$tpl->assign('content', $html); $tpl->assign('content', $html);
$layout = $tpl->get_template('career/diagram.tpl'); if ($showFullPage) {
$layout = $tpl->get_template('career/diagram_full.tpl');
} else {
$layout = $tpl->get_template('career/diagram_iframe.tpl');
}
$tpl->display($layout); $tpl->display($layout);

Write Preview
Loading…
Cancel
Save