altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 2 Packages Projects Releases Wiki Activity

Fixed the floorplan template and accompanying javascript to make the arrows which point out room location work. This needed some modification to support separate per-floor images, and a fix to make the arrow position setting code work in html5 ('px' must be specified). Also added handling of responsive resizing of the floor-plan images, to make the arrow point right independent of the image scaling.

Browse source 
- Legacy-Id: 11578
This commit is contained in:
Henrik Levkowetz 2016-07-09 19:49:51 +00:00
parent d53da28d00
commit a23b174b91
2 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ietf/static/ietf/js/room_params.js
View file

@ -52,18 +52,15 @@ function roomcoords(nm)
if (nmi[2] > nm0[2]) nm0[2] = nmi[2];
if (nmi[3] > nm0[3]) nm0[3] = nmi[3];
}
return [nm0[0], nm0[1], nm0[2], nm0[3]];
return [nm0[0], nm0[1], nm0[2], nm0[3], nm0[4], nm0[5]];
} else {
return findroom(nm);
}
}
function setarrow(nm, fl)
function setarrow(nm)
// Place an arrow at the center of a given room name (or list of room names separated by "/").
{
for (var i = 0; i < arrowsuffixlist.length; i++) {
removearrow(arrowsuffixlist[i], fl);
}
for (var i = 0; i < arguments.length; i+=2) {
nm = roommap(arguments[i]);
if (verbose) alert("nm=" + nm);
@ -74,17 +71,26 @@ function setarrow(nm, fl)
if (verbose) alert("roomcoords returned: " + ret);
if (!ret) continue;
var left = ret[0], top = ret[1], right = ret[2], bottom = ret[3], offsetleft = -25, offsettop = -25;
if (verbose) alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom);
var left = ret[0], top = ret[1], right = ret[2], bottom = ret[3], floor=ret[4], width=ret[5], offsetleft = -25, offsettop = -25;
if (verbose) alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom + ", floor=" + floor + ", width=" + width);
//alert("left=" + left + ", top=" + top + ", right=" + right + ", bottom=" + bottom);
var arrowdiv = fl+'-arrowdiv' + (j > 0 ? j : "");
// calculate arrow position
for (var i = 0; i < arrowsuffixlist.length; i++) {
removearrow(arrowsuffixlist[i], floor);
}
arrow_left = (left + (right - left) / 2 );
arrow_top = (top + (bottom - top) / 2 );
// scale the coordinates to match image scaling
var img = document.getElementById(floor+"-image");
scale = img.width / width;
arrow_left = arrow_left * scale;
arrow_top = arrow_top * scale;
var arrowdiv = floor+'-arrowdiv'+j;
//if (verbose) alert("arrowdiv: " + arrowdiv);
var adiv = document.getElementById(arrowdiv);
// if (verbose) alert("looking for 'arrowdiv'+" + j);
if (adiv) {
//if (verbose) alert("adiv found");
adiv.style.left = left + (right - left) / 2 + offsetleft;
adiv.style.top = top + (bottom - top) / 2 + offsettop;
adiv.style.left = arrow_left + offsetleft + "px";
adiv.style.top = arrow_top + offsettop + "px";
adiv.style.visibility = "visible";
}
}

20
ietf/templates/meeting/floor-plan.html
View file

@ -18,12 +18,15 @@
top: 0;
left: 0;
}
.floor-plan img {
padding: 0;
}
.rooms a {
text-decoration: underline;
}
{% endblock %}
{% block bodyAttrs %}data-spy="scroll" data-target="#affix"{% endblock %}
{% block bodyAttrs %}onload="automaticarrow(); checkParams();" data-spy="scroll" data-target="#affix"{% endblock %}
{% block content %}
{% origin %}
@ -43,17 +46,16 @@
<div class="anchor-target" id="{{floor.name|slugify}}"></div>
<h3>{{ floor.name }}</h3>
<div class="floor-plan">
<img class="col-md-12 col-sm-12 col-xs-12" src="{{ floor.image.url }}" >
<img id="{{floor.name|slugify}}-image" class="col-md-12 col-sm-12 col-xs-12" src="{{ floor.image.url }}" >
<!-- We need as many of these as we can have individual rooms combining into one -->
<div id="{{floor.name|slugify}}-arrowdiv" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
<div id="{{floor.name|slugify}}-arrowdiv0" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
<div id="{{floor.name|slugify}}-arrowdiv1" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
<div id="{{floor.name|slugify}}-arrowdiv2" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
<div id="{{floor.name|slugify}}-arrowdiv3" style="position: absolute; left: 0; top: 67.5px; visibility: hidden;"><img id="arrow" src="{% static 'ietf/images/arrow-ani.gif' %}"></div>
</div>
<div class="rooms">
{% for room in floor.room_set.all %}
{#<a href="javascript: setarrow('{{room.name|slugify}}','{{floor.name|slugify}}')">{{ room.name|nbsp }}</a>#}
{{ room.name|nbsp }}
<a href="javascript: setarrow('{{room.name|slugify}}')">{{ room.name|nbsp }}</a>
{% endfor %}
</div>
<div class="row"></div>
@ -87,19 +89,19 @@
function findroom(nm)
{
var left = 0, top = 0, right = 0, bottom = 0;
var left = 0, top = 0, right = 0, bottom = 0, floor="", width=0;
if (0) { }
{% for room in meeting.room_set.all %}
else if (nm == '{{room.name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; }{% endfor %}
else if (nm == '{{room.name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='{{room.floorplan.name|slugify}}'; width={{room.floorplan.image.width}}; }{% endfor %}
{% for room in meeting.room_set.all %}{% if room.functional_display_name %}
else if (nm == '{{room.functional_name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; }{% endif %}{% endfor %}
else if (nm == '{{room.functional_name|slugify}}') { left = {{room.left}}; top = {{room.top}}; right = {{room.right}}; bottom = {{room.bottom}}; floor='{{room.floorplan.name|slugify}}'; width={{room.floorplan.image.width}}; }{% endif %}{% endfor %}
else return null;
// alert("nm=" + nm + ",left=" + left + ",top=" + top + ",r=" + right + ",b=" + bottom);
return [left, top, right, bottom];
return [left, top, right, bottom, floor, width];
}
</script>
{% endwith %}