[Bristol,Zurich] Factor out pin to template for shared use.

4 files changed, 31 insertions, 65 deletions

diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
index 6ef2f813a..c477ec5ac 100644
--- a/templates/web/base/maps/noscript_map.html
+++ b/templates/web/base/maps/noscript_map.html
@@ -23,7 +23,7 @@
             src="[% map.tiles.3 %]"
             style="top:256px; left:256px;">
     </div>
-    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
     [% INCLUDE compass %]
 </div>
 
@@ -49,24 +49,3 @@
     <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/zoom-minus-mini.png" border="0"></a></div>
 </div>
 [% END %]
-
-
-[% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.cobrand.base_url_for_report( pin.problem ) %][% pin.problem.url %]">
-[%- END -%]
-<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
-[% IF js -%]
-    class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
-    data-colour="[% pin.colour %]" data-id="[% pin.id %]"
-    data-title="[% pin.title | html %]" data-type="[% pin.type %]"
-[% ELSE -%]
-    class="pin"
-[% END -%]
-    alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
-[%- IF pin.id -%]
-</a>
-[% END %]
-
-[% END %]
diff --git a/templates/web/base/maps/pin.html b/templates/web/base/maps/pin.html
new file mode 100644
index 000000000..7dfce0bb3
--- /dev/null
+++ b/templates/web/base/maps/pin.html
@@ -0,0 +1,16 @@
+[% DEFAULT pin_style = 'top:' _ (pin.py - 64) _ 'px; left:' _ (pin.px - 24) _ 'px; position: absolute;' -%]
+[% IF pin.id %]
+<a title="[% pin.title | html %]" href="[% c.cobrand.base_url_for_report( pin.problem ) %][% pin.problem.url %]">
+[%- END -%]
+<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
+[% IF js -%]
+    class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
+    data-colour="[% pin.colour %]" data-id="[% pin.id %]"
+    data-title="[% pin.title | html %]" data-type="[% pin.type %]"
+[% ELSE -%]
+    class="pin"
+[% END -%]
+    alt="[% loc('Problem') %]" style="[% pin_style %]">
+[%- IF pin.id -%]
+</a>
+[% END %]
diff --git a/templates/web/bristol/maps/noscript_map.html b/templates/web/bristol/maps/noscript_map.html
index 1941cdd4c..0b4fe1ebf 100644
--- a/templates/web/bristol/maps/noscript_map.html
+++ b/templates/web/bristol/maps/noscript_map.html
@@ -45,26 +45,12 @@
 
 
 [% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img
-    data-foo="[% pin.px %],[% pin.py %]/ [% map.tile_size %]*[% map.cols %],[% map.rows %]"
-    border="0"
-    class="pin"
-    src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
-    alt="[% loc('Problem') %]"
-    style="
-        top: [% pin.py / ( map.tile_size * map.rows ) * 100  %]%;
-        left: [% pin.px / ( map.tile_size * map.cols ) * 100  %]%;
-        position: absolute;
-        margin-left: -24px; /* Half of 48px wide image */
-        margin-top: -64px; /* All of 64px tall image */
-    "
->
-[%- IF pin.id -%]
-</a>
+[%
+    SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
+    SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100;
+    # -24px half of 48px wide image, -64px all of 64px tall image
+    INCLUDE 'maps/pin.html'
+        pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;'
+%]
 [% END %]
 
-[% END %]
diff --git a/templates/web/zurich/maps/noscript_map.html b/templates/web/zurich/maps/noscript_map.html
index 1941cdd4c..2ebfcbf11 100644
--- a/templates/web/zurich/maps/noscript_map.html
+++ b/templates/web/zurich/maps/noscript_map.html
@@ -45,26 +45,11 @@
 
 
 [% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img
-    data-foo="[% pin.px %],[% pin.py %]/ [% map.tile_size %]*[% map.cols %],[% map.rows %]"
-    border="0"
-    class="pin"
-    src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
-    alt="[% loc('Problem') %]"
-    style="
-        top: [% pin.py / ( map.tile_size * map.rows ) * 100  %]%;
-        left: [% pin.px / ( map.tile_size * map.cols ) * 100  %]%;
-        position: absolute;
-        margin-left: -24px; /* Half of 48px wide image */
-        margin-top: -64px; /* All of 64px tall image */
-    "
->
-[%- IF pin.id -%]
-</a>
-[% END %]
-
+[%
+    SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
+    SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100;
+    # -24px half of 48px wide image, -64px all of 64px tall image
+    INCLUDE 'maps/pin.html'
+        pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;'
+%]
 [% END %]