{% extends "egonomy_newbase.html" %}
{% load static %}
{% load absstatic %}
{% load i18n %}
{% load thumbnail %}
{% block title %}{% trans "Annotate a picture" %}{% endblock %}
{% block css_page %}
<link rel="stylesheet" href="{% static 'egonomy/css/slideshow.css' %}" />
{% endblock %}
{% block content %}
<div class="title-page">
<h2>{{ img.metadata.titre|default:_("No title") }}</h2>
</div>
<div class="bar-tools clearfix">
<ul class="clearfix left">
<!--li><a class="go-to mosaic" href="#"></a></li-->
{% if search %}
<li><a class="go-to search" href="{% url 'all_pictures' %}?search={{ search }}"></a></li>
{% endif %}
</ul>
<ul class="clearfix">
<li>
<a class="icon cut" href="{% url 'create_fragment' image_id=img.id %}">{% trans "Create a fragment" %}</a>
</li>
<li>
{% if user.is_authenticated %}
<a class="icon plus open-popin additemtocollection" data-type="image" data-id="{{ img.id }}" href="#add-to-collection">{% trans "Add to a collection" %}</a>
{% else %}
<a class="icon plus" href="{% url 'login' %}?next={% url 'annotate_picture' image_id=img.id %}">{% trans "Add to a collection" %}</a>
{% endif %}
</li>
<!--li>
<form action="#">
<p>
<input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
</p>
</form>
</li-->
</ul>
</div>
<article class="edition">
<div class="slideshow box-edition">
<a draggable="true" ondragstart="onDragImage(event)"
data-image="{% static img.info.image_file.url %}"
data-clip-path=""
data-title="{{ img.metadata.titre|default:_('No title') }}"
data-description="{% trans 'Author' %} : {{ img.metadata.auteur|default:_('Not documented') }}" href="{% url 'annotate_picture' image_id=img.id %}">
<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>
</a>
{% if search %}
{% if index_search > 0 %}
<div class="arrow-wrap left-arrow">
<a class="arrow" href="{% url 'picture_by_search' %}?search={{ search }}&index_search={{ index_search|add:-1 }}"></a>
</div>
{% endif %}
{% if index_search|add:1 < nb_results %}
<div class="arrow-wrap right-arrow">
<a class="arrow" href="{% url 'picture_by_search' %}?search={{ search }}&index_search={{ index_search|add:1 }}"></a>
</div>
{% endif %}
{% endif %}
<ul class="share">
<li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
<li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
</ul>
</div>
<div class="info box-edition">
<table>
<tbody>
<tr>
<th>{% trans "Description" %} :</th>
<td>{{ img.metadata.description|default:"" }}</td>
</tr>
<tr>
<th>{% trans "Author" %} :</th>
<td>{{ img.metadata.auteur|default:"" }}</td>
</tr>
<tr>
<th>{% trans "Period" %} :</th>
<td>{{ img.metadata.periode|default:"" }}</td>
</tr>
<tr>
<th>{% trans "Production site" %} :</th>
<td>{{ img.metadata.site|default:"" }}</td>
</tr>
<tr>
<th>{% trans "Localization" %} :</th>
<td>{{ img.metadata.localisation|default:"" }}</td>
</tr>
</tbody>
</table>
</div>
<div class="box-edition">
<h3>{% trans "Keywords" %} :</h3>
<ul class="list-key-search list-keywords clearfix">
{% for t in img.metadata.tag_list %}
{% if t != "" %}<li><a class="box-shadow-2" href='{% url "all_pictures" %}?field=all&search="{{ t }}"'>{{ t }}</a></li>{% endif %}
{% endfor %}
</ul>
</div>
<div class="box-edition">
<h3>{% trans "Fragments from this picture" %} :</h3>
{% if fragment_list %}
<ul class="fullwidth clearfix">
{% for fragment in fragment_list %}
<li class="subcol subcol-seventh">
<a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
<div class="center-image">
<div class="image-and-fragment">
{% include "partial/picture_and_red_fragment.html" %}
</div>
</div>
<h3>{{ fragment.title }}</h3></a>
<p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
</li>
{% endfor %}
</ul>
{% else %}
<p class="null">{% trans "No fragment" %}</p>
{% endif %}
</div>
<div class="box-edition">
<h3>{% trans "Collections including this picture" %} :</h3>
{% if related_collections %}
<ul class="fullwidth clearfix">
{% for c in related_collections %}
<li class="subcol subcol-seventh">
<a href="{% url 'view_collection' collection_pk=c.pk %}">
<h3>{{ c.title }}</h3></a>
<p>{% trans "by" %} <strong><a href="{% url 'user_collections' username=c.author %}">{{ c.author }}</a></strong></p>
</li>
{% endfor %}
</ul>
{% else %}
<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();
}
);
});
function onDragImage(e){
var dt = e.dataTransfer;
var snippet = $('<div>').html(dt.getData("text/html"));
snippet.find("svg").remove();
e.dataTransfer.setData("text/html", snippet.html());
}
</script>
{% endblock %}