--- a/src/egonomy/static/egonomy/js/tag-it.js Tue Jun 25 11:37:02 2013 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,533 +0,0 @@
-/*
-* jQuery UI Tag-it!
-*
-* @version v2.0 (06/2011)
-*
-* Copyright 2011, Levy Carneiro Jr.
-* Released under the MIT license.
-* http://aehlke.github.com/tag-it/LICENSE
-*
-* Homepage:
-* http://aehlke.github.com/tag-it/
-*
-* Authors:
-* Levy Carneiro Jr.
-* Martin Rehfeld
-* Tobias Schmidt
-* Skylar Challand
-* Alex Ehlke
-*
-* Maintainer:
-* Alex Ehlke - Twitter: @aehlke
-*
-* Dependencies:
-* jQuery v1.4+
-* jQuery UI v1.8+
-*/
-(function($) {
-
- $.widget('ui.tagit', {
- options: {
- allowDuplicates : false,
- caseSensitive : true,
- fieldName : 'tags',
- placeholderText : null, // Sets `placeholder` attr on input field.
- readOnly : false, // Disables editing.
- removeConfirmation: false, // Require confirmation to remove tags.
- tagLimit : null, // Max number of tags allowed (null for unlimited).
-
- // Used for autocomplete, unless you override `autocomplete.source`.
- availableTags : [],
-
- // Use to override or add any options to the autocomplete widget.
- //
- // By default, autocomplete.source will map to availableTags,
- // unless overridden.
- autocomplete: {},
-
- // Shows autocomplete before the user even types anything.
- showAutocompleteOnFocus: false,
-
- // When enabled, quotes are unneccesary for inputting multi-word tags.
- allowSpaces: false,
-
- // The below options are for using a single field instead of several
- // for our form values.
- //
- // When enabled, will use a single hidden field for the form,
- // rather than one per tag. It will delimit tags in the field
- // with singleFieldDelimiter.
- //
- // The easiest way to use singleField is to just instantiate tag-it
- // on an INPUT element, in which case singleField is automatically
- // set to true, and singleFieldNode is set to that element. This
- // way, you don't need to fiddle with these options.
- singleField: false,
-
- // This is just used when preloading data from the field, and for
- // populating the field with delimited tags as the user adds them.
- singleFieldDelimiter: ',',
-
- // Set this to an input DOM node to use an existing form field.
- // Any text in it will be erased on init. But it will be
- // populated with the text of tags as they are created,
- // delimited by singleFieldDelimiter.
- //
- // If this is not set, we create an input node for it,
- // with the name given in settings.fieldName.
- singleFieldNode: null,
-
- // Whether to animate tag removals or not.
- animate: true,
-
- // Optionally set a tabindex attribute on the input that gets
- // created for tag-it.
- tabIndex: null,
-
- // Event callbacks.
- beforeTagAdded : null,
- afterTagAdded : null,
-
- beforeTagRemoved : null,
- afterTagRemoved : null,
-
- onTagClicked : null,
- onTagLimitExceeded : null,
-
-
- // DEPRECATED:
- //
- // /!\ These event callbacks are deprecated and WILL BE REMOVED at some
- // point in the future. They're here for backwards-compatibility.
- // Use the above before/after event callbacks instead.
- onTagAdded : null,
- onTagRemoved: null,
- // `autocomplete.source` is the replacement for tagSource.
- tagSource: null
- // Do not use the above deprecated options.
- },
-
- _create: function() {
- // for handling static scoping inside callbacks
- var that = this;
-
- // There are 2 kinds of DOM nodes this widget can be instantiated on:
- // 1. UL, OL, or some element containing either of these.
- // 2. INPUT, in which case 'singleField' is overridden to true,
- // a UL is created and the INPUT is hidden.
- if (this.element.is('input')) {
- this.tagList = $('<ul></ul>').insertAfter(this.element);
- this.options.singleField = true;
- this.options.singleFieldNode = this.element;
- this.element.css('display', 'none');
- } else {
- this.tagList = this.element.find('ul, ol').andSelf().last();
- }
-
- this.tagInput = $('<input type="text" />').addClass('ui-widget-content');
-
- if (this.options.readOnly) this.tagInput.attr('disabled', 'disabled');
-
- if (this.options.tabIndex) {
- this.tagInput.attr('tabindex', this.options.tabIndex);
- }
-
- if (this.options.placeholderText) {
- this.tagInput.attr('placeholder', this.options.placeholderText);
- }
-
- if (!this.options.autocomplete.source) {
- this.options.autocomplete.source = function(search, showChoices) {
- var filter = search.term.toLowerCase();
- var choices = $.grep(this.options.availableTags, function(element) {
- // Only match autocomplete options that begin with the search term.
- // (Case insensitive.)
- return (element.toLowerCase().indexOf(filter) === 0);
- });
- showChoices(this._subtractArray(choices, this.assignedTags()));
- };
- }
-
- if (this.options.showAutocompleteOnFocus) {
- this.tagInput.focus(function(event, ui) {
- that._showAutocomplete();
- });
-
- if (typeof this.options.autocomplete.minLength === 'undefined') {
- this.options.autocomplete.minLength = 0;
- }
- }
-
- // Bind autocomplete.source callback functions to this context.
- if ($.isFunction(this.options.autocomplete.source)) {
- this.options.autocomplete.source = $.proxy(this.options.autocomplete.source, this);
- }
-
- // DEPRECATED.
- if ($.isFunction(this.options.tagSource)) {
- this.options.tagSource = $.proxy(this.options.tagSource, this);
- }
-
- this.tagList
- .addClass('tagit')
- .addClass('ui-widget ui-widget-content ui-corner-all')
- // Create the input field.
- .append($('<li class="tagit-new"></li>').append(this.tagInput))
- .click(function(e) {
- var target = $(e.target);
- if (target.hasClass('tagit-label')) {
- var tag = target.closest('.tagit-choice');
- if (!tag.hasClass('removed')) {
- that._trigger('onTagClicked', e, {tag: tag, tagLabel: that.tagLabel(tag)});
- }
- } else {
- // Sets the focus() to the input field, if the user
- // clicks anywhere inside the UL. This is needed
- // because the input field needs to be of a small size.
- that.tagInput.focus();
- }
- });
-
- // Single field support.
- var addedExistingFromSingleFieldNode = false;
- if (this.options.singleField) {
- if (this.options.singleFieldNode) {
- // Add existing tags from the input field.
- var node = $(this.options.singleFieldNode);
- var tags = node.val().split(this.options.singleFieldDelimiter);
- node.val('');
- $.each(tags, function(index, tag) {
- that.createTag(tag, null, true);
- addedExistingFromSingleFieldNode = true;
- });
- } else {
- // Create our single field input after our list.
- this.options.singleFieldNode = $('<input type="hidden" style="display:none;" value="" name="' + this.options.fieldName + '" />');
- this.tagList.after(this.options.singleFieldNode);
- }
- }
-
- // Add existing tags from the list, if any.
- if (!addedExistingFromSingleFieldNode) {
- this.tagList.children('li').each(function() {
- if (!$(this).hasClass('tagit-new')) {
- that.createTag($(this).text(), $(this).attr('class'), true);
- $(this).remove();
- }
- });
- }
-
- // Events.
- this.tagInput
- .keydown(function(event) {
- // Backspace is not detected within a keypress, so it must use keydown.
- if (event.which == $.ui.keyCode.BACKSPACE && that.tagInput.val() === '') {
- var tag = that._lastTag();
- if (!that.options.removeConfirmation || tag.hasClass('remove')) {
- // When backspace is pressed, the last tag is deleted.
- that.removeTag(tag);
- } else if (that.options.removeConfirmation) {
- tag.addClass('remove ui-state-highlight');
- }
- } else if (that.options.removeConfirmation) {
- that._lastTag().removeClass('remove ui-state-highlight');
- }
-
- // Comma/Space/Enter are all valid delimiters for new tags,
- // except when there is an open quote or if setting allowSpaces = true.
- // Tab will also create a tag, unless the tag input is empty,
- // in which case it isn't caught.
- if (
- event.which === $.ui.keyCode.COMMA ||
- event.which === $.ui.keyCode.ENTER ||
- (
- event.which == $.ui.keyCode.TAB &&
- that.tagInput.val() !== ''
- ) ||
- (
- event.which == $.ui.keyCode.SPACE &&
- that.options.allowSpaces !== true &&
- (
- $.trim(that.tagInput.val()).replace( /^s*/, '' ).charAt(0) != '"' ||
- (
- $.trim(that.tagInput.val()).charAt(0) == '"' &&
- $.trim(that.tagInput.val()).charAt($.trim(that.tagInput.val()).length - 1) == '"' &&
- $.trim(that.tagInput.val()).length - 1 !== 0
- )
- )
- )
- ) {
- // Enter submits the form if there's no text in the input.
- if (!(event.which === $.ui.keyCode.ENTER && that.tagInput.val() === '')) {
- event.preventDefault();
- }
-
- that.createTag(that._cleanedInput());
-
- // The autocomplete doesn't close automatically when TAB is pressed.
- // So let's ensure that it closes.
- that.tagInput.autocomplete('close');
- }
- }).blur(function(e){
- // Create a tag when the element loses focus.
- // If autocomplete is enabled and suggestion was clicked, don't add it.
- if (!that.tagInput.data('autocomplete-open')) {
- that.createTag(that._cleanedInput());
- }
- });
-
- // Autocomplete.
- if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
- var autocompleteOptions = {
- select: function(event, ui) {
- that.createTag(ui.item.value);
- // Preventing the tag input to be updated with the chosen value.
- return false;
- }
- };
- $.extend(autocompleteOptions, this.options.autocomplete);
-
- // tagSource is deprecated, but takes precedence here since autocomplete.source is set by default,
- // while tagSource is left null by default.
- autocompleteOptions.source = this.options.tagSource || autocompleteOptions.source;
-
- this.tagInput.autocomplete(autocompleteOptions).bind('autocompleteopen', function(event, ui) {
- that.tagInput.data('autocomplete-open', true);
- }).bind('autocompleteclose', function(event, ui) {
- that.tagInput.data('autocomplete-open', false)
- });
- }
- },
-
- _cleanedInput: function() {
- // Returns the contents of the tag input, cleaned and ready to be passed to createTag
- return $.trim(this.tagInput.val().replace(/^"(.*)"$/, '$1'));
- },
-
- _lastTag: function() {
- return this.tagList.find('.tagit-choice:last:not(.removed)');
- },
-
- _tags: function() {
- return this.tagList.find('.tagit-choice:not(.removed)');
- },
-
- assignedTags: function() {
- // Returns an array of tag string values
- var that = this;
- var tags = [];
- if (this.options.singleField) {
- tags = $(this.options.singleFieldNode).val().split(this.options.singleFieldDelimiter);
- if (tags[0] === '') {
- tags = [];
- }
- } else {
- this._tags().each(function() {
- tags.push(that.tagLabel(this));
- });
- }
- return tags;
- },
-
- _updateSingleTagsField: function(tags) {
- // Takes a list of tag string values, updates this.options.singleFieldNode.val to the tags delimited by this.options.singleFieldDelimiter
- $(this.options.singleFieldNode).val(tags.join(this.options.singleFieldDelimiter)).trigger('change');
- },
-
- _subtractArray: function(a1, a2) {
- var result = [];
- for (var i = 0; i < a1.length; i++) {
- if ($.inArray(a1[i], a2) == -1) {
- result.push(a1[i]);
- }
- }
- return result;
- },
-
- tagLabel: function(tag) {
- // Returns the tag's string label.
- if (this.options.singleField) {
- return $(tag).find('.tagit-label:first').text();
- } else {
- return $(tag).find('input:first').val();
- }
- },
-
- _showAutocomplete: function() {
- this.tagInput.autocomplete('search', '');
- },
-
- _findTagByLabel: function(name) {
- var that = this;
- var tag = null;
- this._tags().each(function(i) {
- if (that._formatStr(name) == that._formatStr(that.tagLabel(this))) {
- tag = $(this);
- return false;
- }
- });
- return tag;
- },
-
- _isNew: function(name) {
- return !this._findTagByLabel(name);
- },
-
- _formatStr: function(str) {
- if (this.options.caseSensitive) {
- return str;
- }
- return $.trim(str.toLowerCase());
- },
-
- _effectExists: function(name) {
- return Boolean($.effects && ($.effects[name] || ($.effects.effect && $.effects.effect[name])));
- },
-
- createTag: function(value, additionalClass, duringInitialization) {
- var that = this;
-
- value = $.trim(value);
-
- if (value === '') {
- return false;
- }
-
- if (!this.options.allowDuplicates && !this._isNew(value)) {
- var existingTag = this._findTagByLabel(value);
- if (this._trigger('onTagExists', null, {
- existingTag: existingTag,
- duringInitialization: duringInitialization
- }) !== false) {
- if (this._effectExists('highlight')) {
- existingTag.effect('highlight');
- }
- }
- return false;
- }
-
- if (this.options.tagLimit && this.options.tagLimit >= this._tags().length) {
- this._trigger('onTagLimitExceeded', null, {duringInitialization: duringInitialization});
- return false;
- }
-
- var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(value);
-
- // Create tag.
- var tag = $('<li></li>')
- .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
- .addClass(additionalClass)
- .append(label);
-
- if (this.options.readOnly){
- tag.addClass('tagit-choice-read-only');
- } else {
- tag.addClass('tagit-choice-editable');
- // Button for removing the tag.
- var removeTagIcon = $('<span></span>')
- .addClass('ui-icon ui-icon-close');
- var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
- .addClass('tagit-close')
- .append(removeTagIcon)
- .click(function(e) {
- // Removes a tag when the little 'x' is clicked.
- that.removeTag(tag);
- });
- tag.append(removeTag);
- }
-
- // Unless options.singleField is set, each tag has a hidden input field inline.
- if (!this.options.singleField) {
- var escapedValue = label.html();
- tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.fieldName + '" />');
- }
-
- if (this._trigger('beforeTagAdded', null, {
- tag: tag,
- tagLabel: this.tagLabel(tag),
- duringInitialization: duringInitialization
- }) === false) {
- return;
- }
-
- if (this.options.singleField) {
- var tags = this.assignedTags();
- tags.push(value);
- this._updateSingleTagsField(tags);
- }
-
- // DEPRECATED.
- this._trigger('onTagAdded', null, tag);
-
- this.tagInput.val('');
-
- // Insert tag.
- this.tagInput.parent().before(tag);
-
- this._trigger('afterTagAdded', null, {
- tag: tag,
- tagLabel: this.tagLabel(tag),
- duringInitialization: duringInitialization
- });
-
- if (this.options.showAutocompleteOnFocus && !duringInitialization) {
- setTimeout(function () { that._showAutocomplete(); }, 0);
- }
- },
-
- removeTag: function(tag, animate) {
- animate = typeof animate === 'undefined' ? this.options.animate : animate;
-
- tag = $(tag);
-
- // DEPRECATED.
- this._trigger('onTagRemoved', null, tag);
-
- if (this._trigger('beforeTagRemoved', null, {tag: tag, tagLabel: this.tagLabel(tag)}) === false) {
- return;
- }
-
- if (this.options.singleField) {
- var tags = this.assignedTags();
- var removedTagLabel = this.tagLabel(tag);
- tags = $.grep(tags, function(el){
- return el != removedTagLabel;
- });
- this._updateSingleTagsField(tags);
- }
-
- if (animate) {
- tag.addClass('removed'); // Excludes this tag from _tags.
- var hide_args = this._effectExists('blind') ? ['blind', {direction: 'horizontal'}, 'fast'] : ['fast'];
-
- hide_args.push(function() {
- tag.remove();
- });
-
- tag.fadeOut('fast').hide.apply(tag, hide_args).dequeue();
- } else {
- tag.remove();
- }
-
- this._trigger('afterTagRemoved', null, {tag: tag, tagLabel: this.tagLabel(tag)});
- },
-
- removeTagByLabel: function(tagLabel, animate) {
- var toRemove = this._findTagByLabel(tagLabel);
- if (!toRemove) {
- throw "No such tag exists with the name '" + tagLabel + "'";
- }
- this.removeTag(toRemove, animate);
- },
-
- removeAll: function() {
- // Removes all tags.
- var that = this;
- this._tags().each(function(index, tag) {
- that.removeTag(tag, false);
- });
- }
-
- });
-})(jQuery);
-
--- a/src/egonomy/templates/egonomy_create_fragment.html Tue Jun 25 11:37:02 2013 +0200
+++ b/src/egonomy/templates/egonomy_create_fragment.html Tue Jun 25 16:13:16 2013 +0200
@@ -1,180 +1,151 @@
-{% extends "egonomy_base.html" %}
+{% extends "egonomy_newbase.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">
- function init_sensitive_click(){
- // Init senseetive api request
- if($("#senseetive_click")){
- $("#senseetive_click").click(function() {
- var v = $(".fragment-path").val();
- if(v!="" && v!="MZ" && !$("#senseetive_click").hasClass("loader")){
- $("#senseetive_click").addClass("loader");
- var data_obj = { "image":"{{ img.id }}", "path":$("#fragment_path").val() };
- $.ajax({
- url: '{% url "senseetive_api" %}',
- data: data_obj,
- dataType: "json",
- success: function(data, status, request){
- var keywords = data["keywords"];
- var n = keywords.length;
- if(n>0){
- s = '<div id="tabs" style="height: 320px;"><ul><li><a href="#tabs-1">Mots-clés</a></li><li><a href="#tabs-2">Images</a></li></ul>'
- + '<div id="tabs-1" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
- + '<ul id="add_senseetive_tags">';
- var images = data["images"];
- var m = images.length;
- for(var i=0;i<n;i++){
- // We search if images have been tagged with the current tag.
- var img_urls = "";
- for(var j=0;j<m;j++){
- kws = images[j]["keywords"];
- var nb_kws = kws.length;
- for(var k=0;k<nb_kws;k++){
- if(keywords[i]==kws[k]){
- img_urls += ((img_urls=="") ? "" : ",") + images[j].url_height;
- }
- }
- }
- s += '<li><span class="clickable addable_tag" data="' + img_urls + '">' + keywords[i] + '</span></li>';
- }
- s += '</ul><span id="senseetive_tags" class="right clickable">+ {% trans 'Add all Senseetive keywords to yours' %}</span>'
- +'</div><div id="tabs-2" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
- +'<ul>';
- // Add pictures
- for(var i=0;i<m;i++){
- s += '<li class="senapi_li"><img src="' + images[i].url_width + '" class="senapi_img" alt="' + images[i].title + '"/>'
- + '<span class="senapi_text">' + images[i].title + '</span>'
- + '<br/><span class="senapi_tags">';
- kws = images[i]["keywords"];
- var nb_kws = kws.length;
- for(var k=0;k<nb_kws;k++){
- s += ((k==0) ? "" : ", ") + '<span class="clickable addable_tag">' + kws[k] + '</span>';
- }
- s +='</span></li>';
- }
- s += '</ul>'
- +'</div></div>';
- $("#senseetive_holder").html(s);
- // Init tabs
- $("#tabs").tabs();
- // Function to add one tag
- $("#senseetive_holder .addable_tag").click(function() {
- addTags([$(this).text()]);
- });
- // Functions to add all tags from senseetive
- $("#senseetive_tags").click(function() {
- $(".addable_tag").each(function() {
- addTags([this.textContent]);
- });
- });
- // Functions to show tag's images
- $("#add_senseetive_tags .addable_tag").hover(
- function(e){
- urls = $(this).attr("data").split(",");
- var s = "";
- var n = urls.length;
- for(i=0;i<n;i++){
- s += '<img src="' + urls[i] + '" alt=""/>';
- }
- $("#info_tag").html(s);
- $("#info_tag").css({'top':e.pageY-110,'right':$(window).width()-e.pageX});
- $("#info_tag").show();
- },
- function(e){
- $("#info_tag").hide();
- }
- );
- }
- },
- error: function(jqXHR, textStatus, errorThrown) {
- $("#senseetive_holder").html("<strong>ERROR</strong> : " + jqXHR.responseText);
- }
- });
- }
- });
- }
- }
- 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(', '));
- });
- }
- // Check if path is not empty ("" or "MZ")
- $(".fragment-path").change(function() {
- if($("#senseetive_holder").children()[0].id!="senseetive_click"){
- $("#senseetive_holder").html("<p id=\"senseetive_click\" class=\"add-button-grey\">{% trans 'Request keywords from Senseetive API' %}</p>");
- init_sensitive_click();
- }
- var v = $(".fragment-path").val();
- if(v!="" && v!="MZ"){
- $("#senseetive_click").removeClass("add-button-grey");
- $("#senseetive_click").addClass("clickable add-button");
- }
- else{
- $("#senseetive_click").addClass("add-button-grey");
- $("#senseetive_click").removeClass("clickable add-button");
- }
- });
- // 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 to add one tag
- $(".addable_tag").click(function() {
- addTags([$(this).text()]);
- });
-
- // Init senseetive api request
- init_sensitive_click();
- };
- function addTags(tags){
- nt = tags.length;
- for(var i=0; i<nt; i++){
- $('#user_keywords').tagit('createTag', tags[i]);
- }
- }
- </script>
+ <link rel="stylesheet" href="{% static 'egonomy/lib/jquery-ui/themes/base/minified/jquery-ui.min.css' %}">
+ <link rel="stylesheet" href="{% static 'egonomy/lib/tag-it/css/jquery.tagit.css' %}">
{% endblock %}
{% block content %}
+ <div class="title-page">
+ <h2><a href="{% url 'annotate_picture' image_id=img.id %}">{{ img.metadata.titre|default:_("No title") }}</a> <span class="fs-normal">/ {% if frg_to_modify %}{{ frg_data.title }}{% else %}{% trans 'New fragment' %}{% endif %}</span></h2>
+ </div>
+ <div class="bar-tools clearfix">
+ <ul class="clearfix left">
+ <li><a class="go-to mosaic" href="#"></a></li>
+ <li><a class="go-to search" href="#"></a></li>
+ </ul>
+ <!--ul class="clearfix">
+ <li>
+ <a class="icon plus" href="#">Ajouter à ma collection</a>
+ </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">
+ <form action="{% url 'save_fragment' %}" method="POST">
+ <div class="slideshow box-edition">
+ <div class="image-wrap">
+ <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>
+ <div class="center-image">
+ <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="476" height="476" 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="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_data %}{{ frg_data.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_data.pk }}" />{% endif %}
+ {% csrf_token %}
+ </div>
+ <!--div class="arrow-wrap left-arrow">
+ <a class="arrow" href="#"></a>
+ </div>
+ <div class="arrow-wrap right-arrow">
+ <a class="arrow" href="#"></a>
+ </div>
+ <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 '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" placeholder="{% trans "Fragment's title" %}" name="fragment_title" id="fragment_title" {% if frg_data %}value="{{ frg_data.title }}"{% endif %}/></td>
+ </tr>
+ <tr>
+ <th class="va-top">{% trans "Fragment's description" %} :</th>
+ <td><textarea class="fragment-description" name="fragment_description" id="fragment_description">{% if frg_data %}{{ frg_data.description }}{% endif %}</textarea></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="box-edition clearfix">
+ <table>
+ <tr>
+ <th class="va-top">{% trans "Fragment's keywords" %} :</th>
+ <td><input id="user_keywords" name="user_keywords" class="tag-it" type="text" {% if frg_data %}value="{{ frg_data.tags }}"{% endif %}></td>
+ </tr>
+ <tr>
+ <th class="pt-6 va-top">{% trans "Source picture's keywords" %} :</th>
+ <td class="pt-6">
+ <ul class="list-key-add list-keywords no-before clearfix">
+ {% for t in img.metadata.tags %}
+ {% if t != "" %}<li><a data-tag="{{ t }}" class="box-shadow-2" href="#">{{ t }}</a></li>{% endif %}
+ {% endfor %}
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <th class="va-top">{% trans "Senseetive keywords" %} :</th>
+ <td id="senseetive_holder"><p id="senseetive_click" class="btn inactive">{% trans 'Request keywords from Senseetive API' %}</p></td>
+ </tr>
+ </table>
+ <div class="buttons f-right">
+ <input class="btn" type="submit" value="{% trans 'Save the fragment' %}">
+ </div>
+ </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>Collections liées à cette image :</h3>
+ <p class="null">{% trans "No collection" %}</p>
+ </div>
+ </form>
+ </article>
+{% endblock %}
+
+{% comment %}
<div class="fullwidth">
<form action="{% url 'save_fragment' %}" method="POST">
<div class="column column-half">
@@ -222,7 +193,7 @@
</tr>
<tr>
<th>{% trans 'Users keywords' %} :</th>
- <td><input id="user_keywords" name="user_keywords" class="user-keywords" {% if frg_data %}value="{{ frg_data.tags }}"{% endif %}></ul>
+ <td><input id="user_keywords" name="user_keywords" class="user-keywords" {% if frg_data %}value="{{ frg_data.tags }}"{% endif %}></td>
</tr>
{% if img.metadata.mots_cles %}
<tr>
@@ -285,5 +256,125 @@
<div id="info_tag" style="display:none;">
<p>coucou</p>
</div>
+{% endcomment %}
+
+{% block js_page %}
+ <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/ui/minified/jquery-ui.min.js' %}"></script>
+ <script type="text/javascript" src="{% static 'egonomy/lib/tag-it/js/tag-it.min.js' %}"></script>
+ <script type="text/javascript">
+ $(function() {
+ $(".search-type").change(function() {
+ $(".search-form").attr("action", $(this).val());
+ if ($(".search-field").val()) {
+ $(".search-form").submit();
+ }
+ });
+ });
+
+ // Senseetive api management
+ function init_sensitive_click(){
+ // Init senseetive api request
+ if($("#senseetive_click")){
+ $("#senseetive_click").click(function() {
+ var v = $(".fragment-path").val();
+ if(v!="" && v!="MZ" && !$("#senseetive_click").hasClass("loader")){
+ $("#senseetive_click").addClass("loader");
+ var data_obj = { "image":"{{ img.id }}", "path":$("#fragment_path").val() };
+ $.ajax({
+ url: '{% url "senseetive_api" %}',
+ data: data_obj,
+ dataType: "json",
+ success: function(data, status, request){
+ var keywords = data["keywords"];
+ var n = keywords.length;
+ if(n>0){
+ s = '<div id="tabs" style="height: 320px;"><ul><li><a href="#tabs-1">Mots-clés</a></li><li><a href="#tabs-2">Images</a></li></ul>'
+ + '<div id="tabs-1" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
+ + '<ul class="list-key-add list-keywords no-before clearfix">';
+ var images = data["images"];
+ var m = images.length;
+ for(var i=0;i<n;i++){
+ // We search if images have been tagged with the current tag.
+ var img_urls = "";
+ for(var j=0;j<m;j++){
+ kws = images[j]["keywords"];
+ var nb_kws = kws.length;
+ for(var k=0;k<nb_kws;k++){
+ if(keywords[i]==kws[k]){
+ img_urls += ((img_urls=="") ? "" : ",") + images[j].url_height;
+ }
+ }
+ }
+ //s += '<li><span class="clickable addable_tag" data="' + img_urls + '">' + keywords[i] + '</span></li>';
+ s += '<li><a class="box-shadow-2" data="' + img_urls + '" data-tag="' + keywords[i] + '" href="#">' + keywords[i] + '</a></li>';
+ }
+ s += '</ul><span id="senseetive_tags" class="right clickable">+ {% trans 'Add all Senseetive keywords to yours' %}</span>'
+ +'</div><div id="tabs-2" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
+ +'<ul>';
+ // Add pictures
+ for(var i=0;i<m;i++){
+ s += '<li class="senapi_li"><img src="' + images[i].url_width + '" class="senapi_img" alt="' + images[i].title + '"/>'
+ + '<span class="senapi_text">' + images[i].title + '</span>'
+ + '<br/><span class="senapi_tags">';
+ kws = images[i]["keywords"];
+ var nb_kws = kws.length;
+ for(var k=0;k<nb_kws;k++){
+ s += ((k==0) ? "" : ", ") + '<span class="clickable addable_tag">' + kws[k] + '</span>';
+ }
+ s +='</span></li>';
+ }
+ s += '</ul>'
+ +'</div></div>';
+ $("#senseetive_holder").html(s);
+ // Init tabs
+ $("#tabs").tabs();
+ // Functions to show tag's images
+ $("#add_senseetive_tags .addable_tag").hover(
+ function(e){
+ urls = $(this).attr("data").split(",");
+ var s = "";
+ var n = urls.length;
+ for(i=0;i<n;i++){
+ s += '<img src="' + urls[i] + '" alt=""/>';
+ }
+ $("#info_tag").html(s);
+ $("#info_tag").css({'top':e.pageY-110,'right':$(window).width()-e.pageX});
+ $("#info_tag").show();
+ },
+ function(e){
+ $("#info_tag").hide();
+ }
+ );
+ }
+ },
+ error: function(jqXHR, textStatus, errorThrown) {
+ $("#senseetive_holder").html("<strong>ERROR</strong> : " + jqXHR.responseText);
+ }
+ });
+ }
+ });
+ }
+ }
+ window.onload = function() {
+ // Check if path is not empty ("" or "MZ")
+ $(".fragment-path").change(function() {
+ if($("#senseetive_holder").children()[0].id!="senseetive_click"){
+ $("#senseetive_holder").html("<p id=\"senseetive_click\" class=\"btn inactive\">{% trans 'Request keywords from Senseetive API' %}</p>");
+ init_sensitive_click();
+ }
+ var v = $(".fragment-path").val();
+ if(v!="" && v!="MZ"){
+ $("#senseetive_click").removeClass("inactive");
+ }
+ else{
+ $("#senseetive_click").addClass("inactive");
+ }
+ });
+
+ // Init senseetive api request
+ init_sensitive_click();
+ };
+ </script>
{% endblock %}
-