geo collection enhancement, fragment on hover in image page, and version number to 0.7.1.
--- a/src/egonomy/__init__.py Thu Jul 18 11:25:53 2013 +0200
+++ b/src/egonomy/__init__.py Thu Jul 18 16:54:24 2013 +0200
@@ -1,4 +1,4 @@
-VERSION = (0, 7, 0, "final", 1)
+VERSION = (0, 7, 1, "final", 1)
VERSION_STR = unicode(".".join(map(lambda i:"%02d" % (i,), VERSION[:2])))
--- a/src/egonomy/static/egonomy/css/style.css Thu Jul 18 11:25:53 2013 +0200
+++ b/src/egonomy/static/egonomy/css/style.css Thu Jul 18 16:54:24 2013 +0200
@@ -360,13 +360,23 @@
.senapi_text {
}
-#info_tag{
+#info_tag, #info_fragment{
background-color: white;
border: 1px solid #AAAAAA;
pointer-events: none;
position: absolute;
z-index: 1000;
}
-#info_tag img{
+#info_tag img, #info_fragment h3, #info_fragment p{
margin: 5px;
}
+#info_fragment h3{ font-size: 1.4em; }
+#info_fragment .desc{ font-size: 0.8em; }
+
+/* tests */
+.svg_over_image{
+ opacity: 0;
+}
+.svg_over_image:hover{
+ opacity: 1;
+}
--- a/src/egonomy/templates/egonomy_annotate_picture.html Thu Jul 18 11:25:53 2013 +0200
+++ b/src/egonomy/templates/egonomy_annotate_picture.html Thu Jul 18 16:54:24 2013 +0200
@@ -42,22 +42,30 @@
</div>
<article class="edition">
<div class="slideshow box-edition">
- <div class="image-wrap">
- {% with img.info.image_file as image %}
- {% if image|is_portrait %}
- {% thumbnail image "x600" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
- {% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width="600" height="600" class="placeholder" />
- {% endthumbnail %}
- {% else %}
- {% thumbnail image "600" format="PNG" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
- {% empty %}
- <img src="{% static 'egonomy/img/empty.gif' %}" width="600" height="600" class="placeholder" />
- {% endthumbnail %}
- {% endif %}
- {% endwith %}
+ <div class="image-and-fragment">
+ {% with img.info.image_file as image %}
+ {% if image|is_portrait %}
+ {% thumbnail image "x600" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="600" height="600" class="placeholder" />
+ {% endthumbnail %}
+ {% else %}
+ {% thumbnail image "600" format="PNG" crop="center" as im %}
+ <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+ {% empty %}
+ <img src="{% static 'egonomy/img/empty.gif' %}" width="600" height="600" class="placeholder" />
+ {% endthumbnail %}
+ {% endif %}
+ {% endwith %}
+ {% if fragment_list %}
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+ {% for fragment in fragment_list %}
+ <path class="svg_over_image" d="{{ fragment.coordinates }}" stroke="red" stroke-width="0" fill="red" fill-opacity=".3"
+ data-title="{{ fragment.title }}" data-description="{{ fragment.description }}" data-tags="{{ fragment.tags }}" />
+ {% endfor %}
+ </svg>
+ {% endif %}
</div>
{% if search %}
{% if index_search > 0 %}
@@ -147,5 +155,30 @@
<p class="null">{% trans "No collection" %}</p>
{% endif %}
</div>
+ <div id="info_fragment" style="display:none;">
+ <p>coucou</p>
+ </div>
</article>
{% endblock %}
+
+{% block js_page %}
+ <script type="text/javascript">
+ $(function() {
+ // Functions to show tag's images
+ $(".svg_over_image").hover(
+ function(e){
+ ti = $(this).attr("data-title").split(",");
+ de = $(this).attr("data-description").split(",");
+ ta = $(this).attr("data-tags").split(",");
+ var s = '<h3>' + ti + '</h3><p class="desc">' + de + '</p><p>' + ta + '</p>';
+ $("#info_fragment").html(s);
+ $("#info_fragment").css({'top':e.pageY-50,'right':$(window).width()-e.pageX});
+ $("#info_fragment").show();
+ },
+ function(e){
+ $("#info_fragment").hide();
+ }
+ );
+ });
+ </script>
+{% endblock %}
\ No newline at end of file
--- a/src/egonomy/templates/egonomy_view_collection.html Thu Jul 18 11:25:53 2013 +0200
+++ b/src/egonomy/templates/egonomy_view_collection.html Thu Jul 18 16:54:24 2013 +0200
@@ -265,14 +265,26 @@
// start the map in South-East England
map.setView(new L.LatLng(48.833, 2.333),4);
map.addLayer(osm);
+ var minLat = false, maxLat = false, minLng = false, maxLng = false;
// markers
for (var loc in places) {
if(places[loc]["location"]["lat"] && places[loc]["location"]["lng"]){
// Set marker
- var marker = L.marker([places[loc]["location"]["lat"], places[loc]["location"]["lng"]]).addTo(map);
+ var lat = places[loc]["location"]["lat"];
+ var lng = places[loc]["location"]["lng"];
+ var marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup(loc);
places[loc]["marker"] = marker;
+ // Save lat/lng to get max/min lat/lng
+ if(!minLat){ minLat = lat; }
+ if(!maxLat){ maxLat = lat; }
+ if(!minLng){ minLng = lng; }
+ if(!maxLng){ maxLng = lng; }
+ if(lat<minLat){ minLat = lat; }
+ if(maxLat<lat){ maxLat = lat; }
+ if(lng<minLng){ minLng = lng; }
+ if(maxLng<lng){ maxLng = lng; }
// Marker click behaviour : highlight items
marker.on('click', function(d){
// Get the marker's title thanks to leaflet object organisation
@@ -325,6 +337,8 @@
map.on('popupclose', function(e) {
$(".geo-item").css("opacity","1");
});
+ // Now that all markers have been set, we set fitBounds( <LatLngBounds> bounds )
+ map.fitBounds([[minLat, minLng], [maxLat, maxLng]]);
}
function highlight_items(items){
// unhighlight all