Here’s the latest evolution of Pipe Cleaner, mainly recorded here for historical interest. The big change is that there isn’t a separate outside template – everything is in the one index.jd file. The new directive is template, which can read and execute an outside module or actually produce the final output (as we see in the very last directive). I have not put this up as an independent demo.
#
# Import the Python fire module
# - used in: map from:"fire.GetGeocodedIncidents" to:"incidents"
#
import module:"fire";
#
# Header for Google Maps popup
# - used in: map from:"fire.GetGeocodedIncidents" to:"incidents"
#
#
set to:"fitem.head.map" value:"""
<h3>
<a href="#{{ IncidentNumber }}">{{ AlarmLevel}}: {{ IncidentType }} on {{ RawStreet }}</a>
</h3>
""";
#
# Header for the sidebar
# - used in: map from:"fire.GetGeocodedIncidents" to:"incidents"
#
set to:"fitem.head.sb" value:"""
<h3>
{% if latitude and longitude %}
<a href="javascript:js_maps.map.panTo(new GLatLng({{ latitude }}, {{ longitude }}))">*</a>
{% endif %}
<a href="#{{ IncidentNumber }}">{{ AlarmLevel}}: {{ IncidentType }} on {{ RawStreet }}</a>
</h3>
""";
#
# Body for the Google Maps pop and the sidebar
# - used in: map from:"fire.GetGeocodedIncidents" to:"incidents"
#
set to:"fitem.body" value:"""
<p>
Alarm Level: {{ AlarmLevel }}
<br />
Incident Type: {{ IncidentType }}
<br />
City: {{ City }}
<br />
Street: {{ Street }} ({{ CrossStreet }})
<br />
Units: {{ Units }}
</p>
""";
#
# Convert all the incidents from the fire module
# to the path 'incidents' using the mapping rules defined above
#
# - incidents are used in "gmaps.js" and "gmaps.html"
#
map from:"fire.GetGeocodedIncidents" to:"incidents" map:{
"latitude" : "{{ latitude }}",
"longitude" : "{{ longitude }}",
"title" : "{{ AlarmLevel}}: {{ IncidentType }} on {{ RawStreet }}",
"uri" : "{{ HOME_URI }}#{{ IncidentNumber }}",
"body" : "{{ *fitem.head.map|safe }}{{ *fitem.body|safe }}",
"body_sb" : "{{ *fitem.head.sb|safe }}{{ *fitem.body|safe }}",
"IncidentNumber" : "{{ IncidentNumber }}"
};
#
# Load the 'gmaps' templates (for arbitrary geo-mapping),
# using the 'incidents' for its items and the specified meta.
#
# - used in in "gmaps.js" and "gmaps.html"
#
set to:"map_meta" value_render:true value:{
"id" : "maps",
"latitude" : 43.67,
"longitude" : -79.38,
"uzoom" : -13,
"gzoom" : 13,
"api_key" : "{{ cfg.gmaps.api_key|otherwise:'ABQIAAA...pIxzZQ' }}",
"html" : {
"width" : "1024px",
"height" : "800px"
}
};
#
# Produce GMaps
#
template script:"gmaps" items:"incidents" meta:"map_meta";
#
# Produce the final output
#
template value:"""
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
{{ gmaps.js|safe }}
</head>
<body>
<div id="content_wrapper">
<div id="map_wrapper">
{{ gmaps.html|safe }}
</div>
<div id="text_wrapper">
{% for incident in incidents %}
<div id="{{ incident.IncidentNumber }}">
{{ incident.body_sb|safe }}
</div>
{% endfor %}
</div>
</body>
</html>
""";
The gmaps.jd (imported in the second last directive) looks like as follows (there will not be a test). It’s designed to be a universal “show a map and plot points on in it” inclusion. I’ve added a few line breaks so the PRE box doesn’t break.
#
#
#
template to:"html" value:"""
<div id="id_{{ meta.id|jslug }}"
style="{% if meta.html.width %}width: {{ meta.html.width }};{% endif %}
{% if meta.html.height %} height: {{ meta.html.height }};{% endif %}
{% if meta.html.style %} style: {{ meta.html.style }};{% endif %}"
{% if meta.html.class %} class="{{ meta.html.class }}"{% endif %}
></div>
<script type="text/javascript">
js_{{ meta.id|jslug }}.onload();
</script>
""";
#
#
#
template to:"js" value:"""
<script
type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key={{meta.api_key}}">
</script>
<script type="text/javascript">
js_{{ meta.id|jslug }} = {
onload : function() {
js_{{ meta.id|jslug }}.map = new GMap2(document.getElementById("id_{{ meta.id|jslug }}"));
m = js_{{ meta.id|jslug }}.map;
m.setCenter(new GLatLng({{ meta.latitude }}, {{ meta.longitude }}), {{ meta.gzoom }});
// {{ items|length }} items follow
{% for itemd in items %}
{% if itemd.latitude and itemd.longitude %}
// {{ itemd.title }}
var ll = new GLatLng({{ itemd.latitude }}, {{ itemd.longitude }});
var marker = js_{{ meta.id|jslug }}.make_marker(m, ll, "{{ itemd.body|safe|escapejs }}");
m.addOverlay(marker);
{% else %}
// an item is missing latitude or longitude
{% endif %}
{% endfor %}
},
make_marker : function(m, ll, html) {
var marker = new GMarker(ll);
GEvent.addListener(marker, "click", function() {
m.openInfoWindowHtml(ll, html);
});
return marker;
},
end : 0
}
</script>
""";