From a23b174b91955435a7770c056f8398f43c8d114f Mon Sep 17 00:00:00 2001 From: Henrik Levkowetz Date: Sat, 9 Jul 2016 19:49:51 +0000 Subject: [PATCH] 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. - Legacy-Id: 11578 --- ietf/static/ietf/js/room_params.js | 30 +++++++++++++++----------- ietf/templates/meeting/floor-plan.html | 20 +++++++++-------- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/ietf/static/ietf/js/room_params.js b/ietf/static/ietf/js/room_params.js index dd7efa720..f287bc550 100644 --- a/ietf/static/ietf/js/room_params.js +++ b/ietf/static/ietf/js/room_params.js @@ -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"; } } diff --git a/ietf/templates/meeting/floor-plan.html b/ietf/templates/meeting/floor-plan.html index 7bc605778..89b714277 100644 --- a/ietf/templates/meeting/floor-plan.html +++ b/ietf/templates/meeting/floor-plan.html @@ -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 @@

{{ floor.name }}

- + - +
{% for room in floor.room_set.all %} - {#{{ room.name|nbsp }}#} - {{ room.name|nbsp }} + {{ room.name|nbsp }} {% endfor %}
@@ -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]; } {% endwith %}