Efficiant template code factorization.
{% extends "egonomy_base.html" %}
{% load static %}
{% load i18n %}
{% load thumbnail %}
{% load egonomy_thumbnail %}
{% block title %}{% trans "Create or edit a fragment" %}{% endblock %}
{% block css_page %}
<link rel="stylesheet" href="{% static 'egonomy/css/jquery-ui.css' %}" />
<link rel="stylesheet" href="{% static 'egonomy/css/jquery.tagit.css' %}" />
<link rel="stylesheet" href="{% static 'egonomy/css/tagit.ui-zendesk.css' %}" />
{% endblock %}
{% block js_import %}
{{block.super}}
<script type="text/javascript" src="{% static 'egonomy/lib/raphael-min.js' %}"></script>
<script type="text/javascript" src="{% static 'egonomy/js/cutout.js' %}"></script>
<script type="text/javascript" src="{% static 'egonomy/lib/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'egonomy/js/tag-it.js' %}"></script>
{% endblock %}
{% block js_inline %}
{{block.super}}
<script type="text/javascript">
window.onload = function() {
// Functions to add all tags from various sources
if($("#add_rmn_tags")){
$("#add_rmn_tags").click(function() {
addTags($("#rmn_tags").text().split(', '));
});
}
if($("#add_pertimm_title")){
$("#add_pertimm_title").click(function() {
addTags($("#pertimm_title_tags").text().split(', '));
});
}
if($("#add_pertimm_description")){
$("#add_pertimm_description").click(function() {
addTags($("#pertimm_description_tags").text().split(', '));
});
}
if($("#add_pertimm_thesaurus")){
$("#add_pertimm_thesaurus").click(function() {
addTags($("#pertimm_thesaurus_tags").text().split(', '));
});
}
// Function to add one tag
$(".addable_tag").click(function() {
addTags([$(this).text()])
});
// Init tagit autocomplete with tags from various sources
autocomplete_tags = $("#rmn_tags").text().split(', ');
autocomplete_tags = autocomplete_tags.concat($("#pertimm_title_tags").text().split(', '));
autocomplete_tags = autocomplete_tags.concat($("#pertimm_description_tags").text().split(', '));
autocomplete_tags = autocomplete_tags.concat($("#pertimm_thesaurus_tags").text().split(', '));
$('#user_keywords').tagit({availableTags: autocomplete_tags, allowSpaces: true});
};
function addTags(tags){
nt = tags.length;
for(var i=0; i<nt; i++){
$('#user_keywords').tagit('createTag', tags[i]);
}
}
</script>
{% endblock %}
{% block content %}
<div class="fullwidth">
<form action="{% url 'save_fragment' %}" method="POST">
<div class="column column-half">
<a href="#" class="head-button clear-fragment" title="{% trans 'Erase the drawing' %}">×</a>
<a href="#" class="head-button reset-fragment" title="{% trans 'Back to the original drawing' %}">↺</a>
<h2>{% if frg_to_modify %}{{ frg_to_modify.title }}{% else %}{% trans 'New fragment' %}{% endif %} :</h2>
<div class="center-image">
<div class="image-and-fragment">
{% with img.info.image_file as image %}
{% if image|ratio > 0.8 %}
{% thumbnail image "476" 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="476" height="476" class="placeholder" />
{% endthumbnail %}
{% else %}
{% 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="476" height="476" class="placeholder" />
{% endthumbnail %}
{% endif %}
{% endwith %}
<div class="cutout-canvas"></div>
</div>
</div>
<input name="fragment_path" id="fragment_path" type="hidden" class="fragment-path column-half" value="{% if frg_to_modify %}{{ frg_to_modify.coordinates }}{% endif %}" />
<input name="image_id" id="image_id" type="hidden" value="{{ img.id }}" />
{% if frg_to_modify %}<input name="fragment_pk" id="fragment_pk" type="hidden" value="{{ frg_to_modify.pk }}" />{% endif %}
{% csrf_token %}
</div>
<div class="column column-half">
<table class="image-metadata">
<tr>
<th>{% trans 'Source picture' %} :</th>
<td><a href="{% url 'annotate_picture' image_id=img.id %}">{{ img.metadata.titre|default:_("No title") }}</a></td>
</tr>
<tr>
<th>{% trans "Fragment's title" %} :</th>
<td><input type="text" class="fragment-title" placeholder="{% trans "Fragment's title" %}" name="fragment_title" id="fragment_title" {% if frg_to_modify %}value="{{ frg_to_modify.title }}"{% endif %}/></td>
</tr>
<tr>
<th>{% trans "Fragment's description" %} :</th>
<td><textarea class="fragment-description" name="fragment_description" id="fragment_description" {% if frg_to_modify %}value="{{ frg_to_modify.description }}"{% endif %}></textarea></td>
</tr>
<tr>
<th>{% trans 'Users keywords' %} :</th>
<td><input id="user_keywords" name="user_keywords" class="user-keywords" {% if frg_to_modify %}value="{{ frg_to_modify.tags }}"{% endif %}></ul>
</tr>
{% if img.metadata.mots_cles %}
<tr>
<th>{% trans 'RMN keywords' %} :</th>
<td><span id="rmn_tags">{% for t in img.metadata.mots_cles_list %}<span class="clickable addable_tag">{{ t }}</span>{% if not forloop.last %}, {% endif %}{% endfor %}</span>
<br/><span id="add_rmn_tags" class="right clickable">+ {% trans 'Add all RMN keywords to yours' %}</span></td>
</tr>
{% endif %}
{% if img.metadata.titre_pertimm %}
<tr>
<th>{% trans "Pertimm title" %} :</th>
<td><span id="pertimm_title_tags">{% for t in img.metadata.titre_pertimm_list %}<span class="clickable addable_tag">{{ t }}</span>{% if not forloop.last %}, {% endif %}{% endfor %}</span>
<br/><span id="add_pertimm_title" class="right clickable">+ {% trans 'Add all Pertimm title keywords to yours' %}</span></td>
</tr>
{% endif %}
{% if img.metadata.description_pertimm %}
<tr>
<th>{% trans "Pertimm description" %} :</th>
<td><span id="pertimm_description_tags">{% for t in img.metadata.description_pertimm_list %}<span class="clickable addable_tag">{{ t }}</span>{% if not forloop.last %}, {% endif %}{% endfor %}</span>
<br/><span id="add_pertimm_description" class="right clickable">+ {% trans 'Add all Pertimm description keywords to yours' %}</span></td>
</tr>
{% endif %}
{% if img.metadata.thesaurus_pertimm %}
<tr>
<th>{% trans "Pertimm thesaurus" %} :</th>
<td><span id="pertimm_thesaurus_tags">{% for t in img.metadata.thesaurus_pertimm_list %}<span class="clickable addable_tag">{{ t }}</span>{% if not forloop.last %}, {% endif %}{% endfor %}</span>
<br/><span id="add_pertimm_thesaurus" class="right clickable">+ {% trans 'Add all Pertimm thesaurus keywords to yours' %}</span></td>
</tr>
{% endif %}
</table>
<div class="fullwidth">
<input class="user-submit" type="submit" value="{% trans 'Save the fragment' %}" />
</div>
</div>
</form>
</div>
<div class="fullwidth">
<div class="column column-full">
<h2>{% trans "Fragments from this picture" %}</h2>
<ul class="fullwidth">
{% for fragment in fragment_list %}
<li class="subcol subcol-eighth">
<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>
</div>
</div>
{% endblock %}