{% extends "egonomy_base.html" %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "View a collection" %} : {{ col.title }}{% endblock %}
{% block css_page %}<link rel="stylesheet" href="{% static 'egonomy/lib/leaflet/leaflet.css' %}" />{% endblock %}
{% block popins %}
{% if user.is_authenticated %}
{% ifequal user col.author %}
<div id="collection-parameters" class="popin big-popin box-shadow">
<header>
<h2>PARAMÈTRES DE LA COLLECTION</h2>
<a href="#" class="close-popin"></a>
</header>
<section>
<form action="{% url 'save_collection' %}" method="POST">
<div class="col-left">
<input name="collection-pk" type="hidden" value="{{ col.pk }}">
<table>
<tbody>
<tr>
<th><label for="collection-title">{% trans "Title" %} :</label></th>
<td>
<input name="collection-title" id="collection-title" class="w-194" type="text" placeholder="{% trans 'Title' %}" value="{{ col.title }}">
</td>
</tr>
<tr>
<th><label for="collection-publication-type">{% trans "Thumbnail" %} :</label></th>
<td>
<label class="no-margin styled-select">
<select name="collection-publication-type" id="collection-publication-type" class="w-192">
<option selected value="1">{% trans "List" %}</option>
<option value="2">{% trans "Mosaic" %}</option>
<option value="3">{% trans "Slideshow" %}</option>
<!--option value="4">{% trans "Geographical" %}</option-->
</select>
</label>
</td>
</tr>
<tr>
<th><label for="collection-public">{% trans "Availability" %} :</label></th>
<td>
<label class="no-margin styled-select">
<select id="collection-public" name="collection-public" class="w-192">
<option selected value="0">{% trans "Visible by me only" %}</option>
<option selected value="1">{% trans "Visible for everyone" %}</option>
</select>
</label>
</td>
</tr>
<!--tr>
<th><label for="share-collection">Partager :</label></th>
<td>
<input id="share-collection" class="w-194" type="text" placeholder="http://">
</td>
</tr-->
<tr>
<th colspan="2"><label for="collection-description">Description :</label></th>
</tr>
<tr>
<td colspan="2">
<textarea name="collection-description" id="collection-description">{{ col.description }}</textarea>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="list-style-2 clearfix">
<li>
<div class="top clearfix">
<img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
<img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
</div>
<div class="mid">
<h3>{{ col.title }}</h3>
<p>{% trans "by" %} {{ col.author }}</p>
</div>
<div class="bot clearfix">
<img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
<img src="{% static 'egonomy/img/empty.gif' %}" width="113px" height="113px" alt="" />
</div>
</li>
</ul>
<div class="buttons">
<a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
<input class="btn" type="submit" value="{% trans 'Submit' %}">
</div>{% csrf_token %}
</form>
</section>
</div>
<div id="modify-item" class="popin popin-modify-item box-shadow">
<header>
<h2>{% trans "Modify the item's comment" %}</h2>
<a href="#" class="close-popin"></a>
</header>
<section>
<form class="ajax-form" action="{% url 'modify_item' %}" method="POST">
<p>
<label class="block" for="item-description">{% trans "Image comment" %} :</label>
<textarea name="item-description" class="item-description"></textarea>
</p>
<div class="buttons">
<a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
<input class="btn" type="submit" value="{% trans 'Submit' %}">
</div>
<input name="collection_pk" type="hidden" value="{{ col.pk }}">
<input class="item-pk" name="item-pk" type="hidden" value="">{% csrf_token %}
</form>
</section>
</div>
<div class="popin modifyitem-success box-shadow">
<h2>{% trans "The item was successfully modified" %}</h2>
</div>
{% endifequal %}
{% endif %}
{% endblock %}
{% block content %}
<div class="title-page">
<h2>{{ col.title }} / <span>par {{ col.author }}</span></h2>
<ul class="sub-nav title-menu clearfix">
<li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>{% trans "list" %}</a></li>
<li><span class="dot-6"></span></li>
<li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>{% trans "mosaic" %}</a></li>
<li><span class="dot-6"></span></li>
<li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>{% trans "slideshow" %}</a></li>
<li><span class="dot-6"></span></li>
<li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>{% trans "geographical" %}</a></li>
<!--li><span class="dot-6"></span></li>
<li><a href="#">envoyer vers collage</a></li-->
</ul>
</div>
{% if ignored_images %}<p>Information : certaines images n'ont pas pu être importées car elles n'ont pas été trouvées dans la base de données.</p>{% endif %}
<div class="bar-tools clearfix">
<ul class="clearfix">
{% ifequal display "mosaic" %}
<li><a class="toggle-comment" href="#">
<span class="show-comment">{% trans "Display" %}</span>
<span class="hide-comment">{% trans "Hide" %}</span> {% trans "the comments" %}</a>
</li>
{% endifequal %}
<!--li><a href="#">lire le diaporama</a></li>
<li><a class="icon save" href="#">enregistrer sous</a></li-->
{% if user.is_authenticated %}
{% ifequal user col.author %}
<li>
<a class="icon trash" href="{% url 'delete_collection' %}?collection_pk={{col.pk}}" onclick="return confirm('{% trans "Do you really want to delete this collection ? Warning : this action est irreversible." %}')">{% trans "Delete this collection" %}</a>
</li>
<li><a class="open-popin" href="#collection-parameters">{% trans "Collection parameters" %}</a></li>
{% endifequal %}
{% endif %}
</ul>
</div>
{% if items %}
{% ifequal display "list" %}
<ul class="list-style-3 clearfix masonry-465">
{% for item in items %}
{% include 'partial/item_in_collection_list.html' %}
{% endfor %}
</ul>
{% endifequal %}
{% ifequal display "mosaic" %}
<div class="clearfix">
<div class="filters-wrap float-left">
<ul class="filters"></ul>
</div>
<ul class="list-style-5 mosaic float-left clearfix masonry-177">
{% for item in items %}
{% include 'partial/item_in_collection_mosaic.html' %}
{% endfor %}
</ul>
</div>
{% endifequal %}
{% ifequal display "geographical" %}
<div id="map"></div>
<ul class="list-style-4 clearfix">
{% for item in items %}
{% include 'partial/item_in_collection_geographical.html' %}
{% endfor %}
</ul>
{% endifequal %}
{% else %}
{% ifequal display "slideshow" %}
<div class="clearfix">
<iframe width="100%" height="700px" src="{% url 'embed_slideshow' collection_pk=col.pk %}" seamless="seamless" allowfullscreen="allowfullscreen"></iframe>
</div>
{% else %}
<div class="empty-block">
<form class="search-form-big" id="search-form-big" action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
<p>
<input id="search-field-big" type="text" placeholder="{% trans 'Search' %}" name="search"/>
<label class="styled-select">
<select id="search-type-big">
<option value="{% url 'all_pictures' %}"{% if not search_fragment %} selected{% endif %}>Images</option>
<option value="{% url 'all_fragments' %}"{% if search_fragment %} selected{% endif %}>Fragments</option>
</select>
</label>
<input type="hidden" value="all" name="field">
</p>
</form>
</div>
{% endifequal %}
{% endif %}
{% endblock %}
{% block js_page %}
{% ifequal display "mosaic" %}<script type="text/javascript" src="{% static 'egonomy/js/keyword-mosaic.js' %}"></script>{% endifequal %}
{% ifequal display "geographical" %}<script type="text/javascript" src="{% static 'egonomy/lib/leaflet/leaflet.js' %}"></script>{% endifequal %}
<script type="text/javascript">
$(function() {
$("#search-type-big").change(function() {
$("#search-form-big").attr("action", $(this).val());
if ($("#search-field-big").val()) {
$("#search-form-big").submit();
}
});
});
{% ifequal display "geographical" %}
if($('#map').length){
// get all geo datas
places = {{ places|safe }};
for (var loc in places) {
// http://maps.googleapis.com/maps/api/geocode/json?address=Bayonne,%20mus%C3%A9e%20Bonnat&sensor=false
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
type: "GET",
async: false,
data: {"address":loc, "sensor":false},
success: function(json){
// We test if results are ok
if("results" in json){
if(json["results"].length>0){
r = json["results"][0];
if("geometry" in json["results"][0]){
g = json["results"][0]["geometry"];
if("location" in g){
l = g["location"];
// We get lat and lng and save it.
// Thanks to async:false, loc is still the good reference.
places[loc]["location"]["lat"] = l["lat"];
places[loc]["location"]["lng"] = l["lng"];
}
}
}
}
},
error: function(){
// pass
}
});
}
// Locations have now lat and lng, we can init the map
initmap();
}
function initmap(){
// set up the map
map = new L.Map('map');
// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl);
// 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 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
marker_title = d.target._popup._content;
// Get the items
highlight_items(places[marker_title]["items"]);
});
// Item hover bevahiour : open/close popup
for(var i=0;i<places[loc]["items"].length;i++){
$("#item" + places[loc]["items"][i]).hover(
function(){
// id is like "itemNUM"
var id = $(this).attr('id');
var num_item = parseInt(id.substr(4));
var stop = false;
for(var loc in places){
for(var i=0;i<places[loc]["items"].length;i++){
if(places[loc]["items"][i]==num_item){
places[loc]["marker"].openPopup();
stop = true;
break;
}
}
if(stop){
break;
}
}
},
function(){
// id is like "itemNUM"
var id = $(this).attr('id');
var num_item = parseInt(id.substr(4));
var stop = false;
for(var loc in places){
for(var i=0;i<places[loc]["items"].length;i++){
if(places[loc]["items"][i]==num_item){
places[loc]["marker"].closePopup();
stop = true;
break;
}
}
if(stop){
break;
}
}
});
}
}
}
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
$(".geo-item").css("opacity","0.3");
for(var i=0;i<items.length;i++){
$("#item" + items[i]).css("opacity","1");
}
}
{% endifequal %}
</script>
{% endblock %}