Working in the center labels into the items in a visualmap. (not finished)

This commit is contained in:
mdtrooper 2015-07-27 16:24:04 +02:00
parent b1034c2071
commit c003bf344a
3 changed files with 61 additions and 23 deletions

View File

@ -86,6 +86,8 @@ function visual_map_main() {
draw_lines(lines, 'background', true);
draw_user_lines("", 0, 0, 0 , 0, 0, true);
//~ center_labels();
}
);

View File

@ -113,6 +113,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$imageSize = '';
if (!empty($proportion)) {
$top = $top * $proportion['proportion_height'];
$left = $left * $proportion['proportion_width'];
@ -782,9 +783,10 @@ function visual_map_print_item($mode = "read", $layoutData,
echo '<div id="' . $id . '" class="' . $class . '" ' .
'style="z-index: ' .$z_index . ';' .
'position: absolute; top: ' . $top . 'px; ' .
'position: absolute; ' .
'top: ' . $top . 'px; ' .
'left: ' . $left . 'px;' .
'text-align: center;' .
'text-align: left;' .
'display: inline-block; ' . $sizeStyle . '">';
if ($link) {
@ -804,7 +806,7 @@ function visual_map_print_item($mode = "read", $layoutData,
break;
case STATIC_GRAPH:
case GROUP_ITEM:
echo "<div style='width:150px'>";
echo "<div>";
if ($layoutData['image'] != null) {
@ -1776,6 +1778,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
$(window).load(function() {
draw_lines(lines, 'background');
draw_user_lines_read();
center_labels();
}
);
/* ]]> */
@ -1873,20 +1876,25 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
continue;
}
if (($dif_height === 0) && ($dif_width === 0)) {
$proportion = null;
}
else {
$proportion = array(
'dif_height' => $dif_height,
'dif_width' => $dif_width,
'proportion_height' => $proportion_height,
'proportion_width' => $proportion_width);
}
switch ($layout_data['type']) {
case LINE_ITEM:
visual_map_print_user_lines("read", $layout_data,
array('dif_height' => $dif_height,
'dif_width' => $dif_width,
'proportion_height' => $proportion_height,
'proportion_width' => $proportion_width));
$proportion);
break;
default:
visual_map_print_item("read", $layout_data,
array('dif_height' => $dif_height,
'dif_width' => $dif_width,
'proportion_height' => $proportion_height,
'proportion_width' => $proportion_width), $show_links);
$proportion, $show_links);
break;
}
}

View File

@ -17,6 +17,7 @@
* @param editor Boolean variable to set other css selector in editor (when true).
*/
function draw_line (line, id_div) {
selector = '';
//Check if the global var resize_map is defined
@ -34,15 +35,20 @@ function draw_line (line, id_div) {
brush.setStroke (lineThickness);
brush.setColor (line['color']);
have_node_begin_img = $('#'+line['node_begin'] + " img").length;
have_node_end_img = $('#'+line['node_end'] + " img").length;
have_node_begin_img = $('#' + line['node_begin'] + " img").length;
have_node_end_img = $('#' + line['node_end'] + " img").length;
if (line['x1']) {
x1 = line['x'];
}
else {
width = $('#'+line['node_begin']).width();
x1 = parseInt($('#'+line['node_begin']).css (selector + 'left')) + (width / 2);
if (have_node_begin_img) {
width = $('#' + line['node_begin'] + " img").width();
}
else {
width = $('#' + line['node_begin']).width();
}
x1 = parseInt($('#' + line['node_begin']).css (selector + 'left')) + (width / 2);
}
if (line['y1']) {
@ -50,20 +56,25 @@ function draw_line (line, id_div) {
}
else {
if (have_node_begin_img) {
height = parseInt($('#'+line['node_begin'] + " img").css('height'));
height = parseInt($('#' + line['node_begin'] + " img").css('height'));
}
else {
height = $('#'+line['node_begin']).height();
height = $('#' + line['node_begin']).height();
}
y1 = parseInt($('#'+line['node_begin']).css (selector + 'top')) + (height / 2);
y1 = parseInt($('#' + line['node_begin']).css (selector + 'top')) + (height / 2);
}
if (line['x2']) {
x2 = line['x2'];
}
else {
width = $('#'+line['node_end']).width();
x2 = parseInt($('#'+line['node_end']).css (selector + 'left')) + (width / 2);
if (have_node_end_img) {
width = $('#' + line['node_end'] + " img").width();
}
else {
width = $('#' + line['node_end']).width();
}
x2 = parseInt($('#' + line['node_end']).css (selector + 'left')) + (width / 2);
}
if (line['y2']) {
@ -71,12 +82,12 @@ function draw_line (line, id_div) {
}
else {
if (have_node_end_img) {
height = parseInt($('#'+line['node_end'] + " img").css('height'));
height = parseInt($('#' + line['node_end'] + " img").css('height'));
}
else {
height = $('#'+line['node_end']).height();
height = $('#' + line['node_end']).height();
}
y2 = parseInt($('#'+line['node_end']).css (selector + 'top')) + (height / 2);
y2 = parseInt($('#' + line['node_end']).css (selector + 'top')) + (height / 2);
}
@ -143,4 +154,21 @@ function draw_user_lines_read() {
}
obj_js_user_lines.paint();
}
function center_labels() {
jQuery.each($(".item"), function(i, item) {
if ($(item).width() > $("img", item).width()) {
dif_width = $(item).width() - $("img", item).width();
x = parseInt($(item).css("left"));
x = x - (dif_width / 2)
$(item)
.css("left", x + "px")
.css("text-align", "center");
}
});
}