Finalisation du nettoyage des script de gestion de tags js.

src/Muzich/CoreBundle/Resources/views/Tag/tagsPrompt.html.twig

@@ -16,47 +16,46 @@
     value=""
     placeholder="{{ 'tags.inputtext.help'|trans({}, 'userui') }}"
   />
+  <img id="tag_prompt_loader_{{ form_name }}" class="tag_loader" style="display: none;"
+    src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
    
-   <input class="tags_prompt_list" name="tags" value="" /> 
-   <input class="tag_prompt_selected_ids" id="tags_selected_tag_{{ form_name }}" type="hidden" value="" />
-   
-   <div id="search_tag_{{ form_name }}" class="search_tag_list" style="display: none;">
-     <span class="info"></span>
-     <div class="tag_loader_div">
-       <img id="tag_loader_{{ form_name }}" class="tag_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
-     </div>
-     <ul class="search_tag_list"></ul>
-     <a class="more button" href="#" style="display: none;">
-       {{ 'tags.search.display_more'|trans({}, 'userui') }}
-     </a>
-   </div>
+  <div id="search_tag_{{ form_name }}" class="search_tag_list" style="display: none;">
+    <span class="info"></span>
+    <div class="tag_loader_div">
+      <img id="tag_loader_{{ form_name }}" class="tag_loader" style="display: none;"
+        src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+    </div>
+    <ul class="search_tag_list"></ul>
+    <a class="more button" href="#" style="display: none;">
+      {{ 'tags.search.display_more'|trans({}, 'userui') }}
+    </a>
+  </div>
+  
+  <ul class="tagbox"></ul>
+  
 </div>
 
 <script language="javascript" type="text/javascript">
-  
-  var taginit = new Array();
-  {% if search_tags is defined %}
-    {% for tid, tname in search_tags %}
-      taginit[{{ loop.index0 }}] = {"id":"{{ tid }}", "name":"{{ tname }}"};
-    {% endfor %}
-  {% endif %}
-  
-  var options = new Array();
-  options.form_name  = "{{ form_name }}";
-  options.tag_init   = taginit;
-  
-  // tags_prompt_list_
-  $("div#tags_prompt_{{ form_name }} input.tags_prompt_list").tagBox(options);
-  
-  // text help en cas de rafraichissement de la page (nav. comme firefox 
-  // garde la valeur de l'input)
   $(document).ready(function(){
-    $('div#tags_prompt_{{ form_name }} ul.tagbox li.input input[type="text"]')
-      .attr('placeholder', "{{ 'tags.inputtext.help'|trans({}, 'userui') }}");
-  });
-  
-  // On détruit la variable taginit
-  delete taginit;
     
+    $('form[name="{{ form_name }}"] input.tag_prompt').val('');
     
+    window.{{ form_name }}_tag_prompt_connector = new TagPromptConnector(
+      $('form[name="{{ form_name }}"] input.tag_prompt'),
+      $('form[name="{{ form_name }}"] input.tagBox_tags_ids'),
+      $('form[name="{{ form_name }}"] div.search_tag_list'),
+      $('form[name="{{ form_name }}"] ul.tagbox'),
+      $('#tag_prompt_loader_{{ form_name }}')
+    );
+    
+    var {{ form_name }}_taginit = new Array();
+    {% if search_tags is defined %}
+      {% for tid, tname in search_tags %}
+        {{ form_name }}_taginit[{{ loop.index0 }}] = {"id":"{{ tid }}", "name":"{{ tname }}"};
+      {% endfor %}
+    {% endif %}
+    
+    window.{{ form_name }}_tag_prompt_connector.initializeTags({{ form_name }}_taginit);
+  
+  });
 </script>

src/Muzich/HomeBundle/Resources/views/Show/showGroup.html.twig

@@ -75,7 +75,6 @@
 
         {% include "MuzichCoreBundle:Element:form.add.html.twig" with { 'form': add_form, 'form_name': add_form_name } %}
 
-        <input type="submit" class="button" >
       </form>
       
     </div>

web/bundles/muzichcore/js/muzich.js

@@ -230,8 +230,8 @@ function explode (delimiter, string, limit) {
 function remove_tags(form_name)
 {
   //tagsAddeds[form_name] = new Array();
-  $('form[name="'+form_name+'"] ul.tagbox li.tag').remove();
-  $('form[name="'+form_name+'"] input.tagBox_tags_ids').val('');
+  //$('form[name="'+form_name+'"] ul.tagbox li.tag').remove();
+  //$('form[name="'+form_name+'"] input.tagBox_tags_ids').val('');
   
 }
 
@@ -280,9 +280,11 @@ $(document).ready(function(){
     $('img.elements_more_loader').show();
     $('ul.elements').html('');
     // On initialise la liste de tags déjà ajouté
-    tagsAddeds['search'] = new Array;
+    window.search_tag_prompt_connector.initializeTags([]);
+    $('div.no_elements').hide();
+    //tagsAddeds['search'] = new Array;
     var form = $('form[name="search"]');
-    remove_tags(form.attr('name'));
+    //remove_tags(form.attr('name'));
     form.submit();
   });
   
@@ -291,8 +293,6 @@ $(document).ready(function(){
     
     $('img.elements_more_loader').show();
     $('ul.elements').html('');
-    // On initialise la liste de tags déjà ajouté
-    tagsAddeds['search'] = new Array;
     
     var form = $(this).parents('form[name="search"]');
     
@@ -302,22 +302,15 @@ $(document).ready(function(){
         $(location).attr('href', url_index);
       }
       
-      remove_tags(form.attr('name'));
-//      if (tags.length)
-//      {
-        var inputTag = $("div#tags_prompt_"+form.attr('name')+" input.form-default-value-processed");
+        var tags = [];
         for (i in response.tags)
         {
-          $('input#tags_selected_tag_'+form.attr('name')).val(i);
-          inputTag.val(response.tags[i]);
-                                        
-          // Et on execute l'évènement selectTag de l'input
-          inputTag.trigger("selectTag");
+          var tag = new Tag(i, response.tags[i]);
+          tags.push(tag);
         }
         
+        window.search_tag_prompt_connector.initializeTags(tags);
         form.submit();
-      //}
-      
     });
   });
   
@@ -326,9 +319,6 @@ $(document).ready(function(){
     // Si il y a une liste de tags (comme sur la page favoris, profil)
     var id;
     
-    // On initialise la liste de tags déjà ajouté
-    tagsAddeds['search'] = new Array;
-    
     if ($('ul#favorite_tags').length)
     {
       id = str_replace('element_tag_', '', $(this).attr('id'));
@@ -340,13 +330,13 @@ $(document).ready(function(){
     {
       $('img.elements_more_loader').show();
       $('ul.elements').html('');
+      
       var form = $('form[name="search"]');
       id = str_replace('element_tag_', '', $(this).attr('id'));
-      remove_tags('search');
-      var inputTag = $("div#tags_prompt_search input.form-default-value-processed");
-      $('input#tags_selected_tag_search').val(id);
-      inputTag.val($(this).html());
-      inputTag.trigger("selectTag");
+      var tag = new Tag(id, $(this).text());
+      
+      window.search_tag_prompt_connector.initializeTags([tag]);
+      
       form.submit();
     }
   });
@@ -724,378 +714,378 @@ $(document).ready(function(){
   });
  
   ////////////////// TAG PROMPT ///////////////
- 
-  var ajax_query_timestamp = null;
- 
-  // Les deux clicks ci-dessous permettent de faire disparaitre
-  // la div de tags lorsque l'on clique ailleurs
-  $('html').click(function() {
-    if ($("div.search_tag_list").is(':visible'))
-    {
-      $("div.search_tag_list").hide();
-    }
-  });
-
-  $("div.search_tag_list, div.search_tag_list a.more").live('click', function(event){
-    event.stopPropagation();
-    $("div.search_tag_list").show();
-  });
-
-  function autocomplete_tag(input, form_name)
-  {
-    // Il doit y avoir au moin un caractère
-    if (input.val().length > 0) 
-    {
-
-      // on met en variable l'input
-      var inputTag = input;
-      
-      // On récupére la div de tags
-      var divtags = $("#search_tag_"+form_name);
-
-      // Si la fenêtre de tags est caché
-      if (!divtags.is(':visible'))
-      {
-        // On la replace
-        var position = input.position();
-        divtags.css('left', Math.round(position.left) + 5);
-        divtags.css('top', Math.round(position.top) + 28);
-        // Et on l'affiche
-        divtags.show();
-      }
-      // On affiche le loader
-      $('#tag_loader_'+form_name).show();
-      // On cache la liste de tags
-      var search_tag_list = divtags.find('ul.search_tag_list');
-      // On supprime les anciens li
-      search_tag_list.find('li').remove();
-      search_tag_list.hide();
-      // Et on affiche une info
-      var span_info = divtags.find('span.info');
-      span_info.show();
-      // TODO: multilingue !
-      span_info.text(str_replace('%string_search%', input.val(), string_search_tag_title));
-
-      // C'est en fonction du nb de resultats qu'il sera affiché
-      divtags.find('a.more').hide();
-
-      // On récupère le timestamp pour reconnaitre la dernière requête effectué
-      ajax_query_timestamp = new Date().getTime();
-      
-      // Récupération des tags correspondants
-      $.ajax({
-        type: 'POST',
-        url: url_search_tag+'/'+ajax_query_timestamp,
-        dataType: 'json',
-        data: {'string_search':input.val()},
-        success: function(data) {
-        if (data.status == 'mustbeconnected')
-        {
-          $(location).attr('href', url_index);
-        }
-        
-        // Ce contrôle permet de ne pas continuer si une requete
-        // ajax a été faite depuis.
-        if (data.timestamp == ajax_query_timestamp)
-        {
-          var status = data.status;
-          var tags   = data.data;
-
-          // Si on spécifie une erreur
-          if (status == 'error')
-          {
-            // On l'affiche a l'utilisateur
-            span_info.text(data.error);
-          }
-          // Si c'est un succés
-          else if (status == 'success')
-          {
-            if (tags.length > 0)
-            {
-              var more = false;
-              // Pour chaque tags retournés
-              for (i in tags)
-              {
-                var tag_name = tags[i]['name'];
-                var tag_id = tags[i]['id'];
-                var t_string = tag_name
-                // On construit un li
-                
-                var r_string = $.trim(input.val());
-                var re = new RegExp(r_string, "i");
-                t_string = t_string.replace(re,"<strong>" + r_string + "</strong>");
-                
-                                
-                var li_tag = 
-                  $('<li>').append(
-                    $('<a>').attr('id','searched_tag_'+tag_id)
-                      .attr('href', '#')
-                    // qui réagit quand on clique dessus
-                    .click(function(e){
-                      
-                      var id = str_replace('searched_tag_', '', $(this).attr('id'));
-                      var name = $('span#tag_prompt_tag_'+id+'_name').html();
-                                            
-                      $('input#tags_selected_tag_'+form_name).val(id);
-                      inputTag.val(name);
-                      // Et on execute l'évènement selectTag de l'input
-                      inputTag.trigger("selectTag");
-                      // On cache la liste puisque le choix vient d'être fait
-                      divtags.hide();
-                      // On vide le champs de saisie du tag
-                      $('input.form-default-value-processed').val('');
-                      return false;
-                    })
-                    .append(t_string)
-                ).append($('<span style="display: none;" id="tag_prompt_tag_'+tag_id+'_name">'+tag_name+'</span>'));
-
-                // Si on depasse les 30 tags
-                if (i > 30)
-                {
-                  more = true;
-                  // On le cache
-                  li_tag.hide();
-                }
-
-                // On ajout ce li a la liste
-                search_tag_list.append(li_tag);
-              } 
-
-              if (more)
-              {
-                divtags.find('a.more').show();
-              }
-              
-              span_info.show();
-              span_info.text(data.message);
-              // Et on affiche la liste
-              search_tag_list.show();
-            }
-            else
-            {
-              span_info.show();
-              span_info.text(data.message);
-              search_tag_list.show();
-              
-              // Dans ce cas ou aucun tag n'a été trouvé, la proposition 
-              // d'ajout s'affichecf en dessous
-              
-              //span_info.text("Aucun tag de trouvé pour \""+inputTag.val()+"\"");
-            }
-            
-            // Si le tag ne semble pas connu en base
-            if (!data.same_found)
-            {
-              li_tag = 
-                $('<li>').addClass('new').append(
-                  $('<a>').attr('href','#new#'+$.trim(input.val()))
-                  // qui réagit quand on clique dessus
-                  .click({
-                    inputTag: inputTag,
-                    form_name: form_name,
-                    divtags: divtags
-                  }, event_click_new_tag_proposition)
-                  .append($.trim(input.val()))
-              );
-              search_tag_list.append(li_tag);
-            }
-            
-          }
-
-          // On cache le loader
-          $('#tag_loader_'+form_name).hide();
-        }
-      }
-      });
-      
-      
-      //$.getJSON(url_search_tag+'/'+input.val()+'/'+ajax_query_timestamp, );
-      
-    }
-  }
-  
-  function event_click_new_tag_proposition(event)
-  {
-    form_add_open_dialog_for_new_tag($(event.target), event.data.inputTag, event.data.form_name, event.data.divtags);
-  }
- 
-  function form_add_open_dialog_for_new_tag(link_add_tag, inputTag, form_name, divtags)
-  {       
-    
-    
-    // Effet fade-in du fond opaque
-    $('body').append($('<div>').attr('id', 'fade')); 
-    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
-    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
-    
-    // En premier lieux on fait apparaître la fenêtre de confirmation
-    var popup = $('<div>')
-    .attr('id', 'add_tag')
-    .addClass('popin_block')
-    .css('width', '400px')
-      //.append($('<h2>').append(string_tag_add_title))
-    .append($('<form>')
-      .attr('action', url_add_tag)
-      .attr('method', 'post')
-      .attr('name', 'add_tag')
-      .ajaxForm(function(response) {
-        /*
-        *
-        */
-
-        if (response.status == 'mustbeconnected')
-        {
-          $(location).attr('href', url_index);
-        }
-
-        if (response.status == 'success')
-        {
-          var tag_id   = response.tag_id;
-          var tag_name = response.tag_name;
-
-          $('input#tags_selected_tag_'+form_name).val(tag_id);
-          inputTag.val(tag_name);
-          // Et on execute l'évènement selectTag de l'input
-          inputTag.trigger("selectTag");
-          // On cache la liste puisque le choix vient d'être fait
-          divtags.hide();
-
-          link_add_tag.parents('div.search_tag_list').find('img.tag_loader').hide();
-
-          $('#fade').fadeOut(400, function(){$('#fade').remove();});
-          $('#add_tag').remove();
-        }
-
-        if (response.status == 'error')
-        {
-          $('form[name="add_tag"]').find('ul.error_list').remove();
-          var ul_errors = $('<ul>').addClass('error_list');
-
-          for (i in response.errors)
-          {
-            ul_errors.append($('<li>').append(response.errors[i]));
-          }
-
-          $('form[name="add_tag"]').prepend(ul_errors);
-        }
-
-        return false;
-      })
-
-      .append($('<div>').addClass('tag')
-        .append($('<ul>')
-          .append($('<li>').addClass('button')
-            .append(link_add_tag.text()))))
-      .append($('<p>').append(string_tag_add_text))
-      .append($('<p>').append(string_tag_add_argument))
-      .append($('<textarea>').attr('name', 'argument'))
-      .append($('<div>').addClass('inputs')
-        .append($('<input>')
-          .attr('type', 'button')
-          .attr('value', string_tag_add_inputs_cancel)
-          .addClass('button')
-          .click(function(){
-            $('#fade').fadeOut(1000, function(){$('#fade').remove();});
-            $('#add_tag').remove();
-
-            return false;
-          })
-        )
-        .append($('<input>')
-          .attr('type', 'submit')
-          .attr('value', string_tag_add_inputs_submit)
-          .addClass('button')
-          .click(function(){
-
-            link_add_tag.parents('div.search_tag_list').find('img.tag_loader').show();
-
-          })
-        )
-        .append($('<input>').attr('type', 'hidden').attr('name', 'tag_name').val(link_add_tag.text()))
-      ))
-    ;
-
-    // Il faut ajouter le popup au dom avant de le positionner en css
-    // Sinon la valeur height n'est pas encore calculable
-    $('body').prepend(popup);
-
-    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
-    var popMargTop = (popup.height() + 50) / 2;
-    var popMargLeft = (popup.width() + 50) / 2;
-
-    //On affecte le margin
-    $(popup).css({
-      'margin-top' : -popMargTop,
-      'margin-left' : -popMargLeft
-    });
-
-    return false;
-  }
- 
-  var last_keypress = 0;
-  
-  function check_timelaps_and_search(input, form_name, time_id, timed, info)
-  {
-    if (!timed)
-    {
-      // C'est une nouvelle touche (pas redirigé) on lui donne un id
-      // et on met a jour l'id de la dernière pressé
-      last_keypress = new Date().getTime(); 
-      var this_time_id = last_keypress;
-    }
-    else
-    {
-      // Si elle a été redirigé, on met son id dans cette variable
-      var this_time_id = time_id;
-    }
-    
-    // C'est une touche redirigé dans le temps qui a été suivit d'une autre touche
-    if (time_id != last_keypress && timed)
-    {
-      // elle disparait
-    }
-    else
-    {
-      //
-      if ((new Date().getTime() - last_keypress) < 600 || timed == false)
-      {
-        // Si elle vient d'être tapé (timed == false) elle doit attendre (au cas ou une autre touche soit tapé)
-        // Si c'est une redirigé qui n'a pas été remplacé par une nouvelle lettre
-        // elle doit attendre au cas ou soit pressé.
-        setTimeout(function(){check_timelaps_and_search(input, form_name, this_time_id, true, info)}, 700);
-      }
-      else
-      {
-        // il n'y a plus a attendre, on envoie la demande de tag.
-        autocomplete_tag(input, form_name);
-      }
-    }
-  }
-  
-  // Autocompletion de tags
-  $("div.tags_prompt ul.tagbox li.input input").live('keypress', function(e){
-    
-    var form_name = $(this).parents('form').attr('name');
-    var code = (e.keyCode ? e.keyCode : e.which);
-
-    if ((e.which !== 0 && e.charCode !== 0) || (code == 8 || code == 46))
-    {
-      check_timelaps_and_search($(this), form_name, new Date().getTime(), false, $(this).val());
-    }
-     
-  });
-  
-  // Un click sur ce lien affiche tout les tags cachés de la liste
-  $('div.search_tag_list a.more').live('click', function(){
-    jQuery.each( $(this).parent('div').find('ul.search_tag_list li') , function(){
-      $(this).show();
-    });
-    $(this).hide();
-    return false;
-  });
-  
-  $('ul.tagbox li.input input[type="text"]').formDefaults();
- 
+  //
+  //var ajax_query_timestamp = null;
+  //
+  //// Les deux clicks ci-dessous permettent de faire disparaitre
+  //// la div de tags lorsque l'on clique ailleurs
+  //$('html').click(function() {
+  //  if ($("div.search_tag_list").is(':visible'))
+  //  {
+  //    $("div.search_tag_list").hide();
+  //  }
+  //});
+  //
+  //$("div.search_tag_list, div.search_tag_list a.more").live('click', function(event){
+  //  event.stopPropagation();
+  //  $("div.search_tag_list").show();
+  //});
+  //
+  //function autocomplete_tag(input, form_name)
+  //{
+  //  // Il doit y avoir au moin un caractère
+  //  if (input.val().length > 0) 
+  //  {
+  //
+  //    // on met en variable l'input
+  //    var inputTag = input;
+  //    
+  //    // On récupére la div de tags
+  //    var divtags = $("#search_tag_"+form_name);
+  //
+  //    // Si la fenêtre de tags est caché
+  //    if (!divtags.is(':visible'))
+  //    {
+  //      // On la replace
+  //      var position = input.position();
+  //      divtags.css('left', Math.round(position.left) + 5);
+  //      divtags.css('top', Math.round(position.top) + 28);
+  //      // Et on l'affiche
+  //      divtags.show();
+  //    }
+  //    // On affiche le loader
+  //    $('#tag_loader_'+form_name).show();
+  //    // On cache la liste de tags
+  //    var search_tag_list = divtags.find('ul.search_tag_list');
+  //    // On supprime les anciens li
+  //    search_tag_list.find('li').remove();
+  //    search_tag_list.hide();
+  //    // Et on affiche une info
+  //    var span_info = divtags.find('span.info');
+  //    span_info.show();
+  //    // TODO: multilingue !
+  //    span_info.text(str_replace('%string_search%', input.val(), string_search_tag_title));
+  //
+  //    // C'est en fonction du nb de resultats qu'il sera affiché
+  //    divtags.find('a.more').hide();
+  //
+  //    // On récupère le timestamp pour reconnaitre la dernière requête effectué
+  //    ajax_query_timestamp = new Date().getTime();
+  //    
+  //    // Récupération des tags correspondants
+  //    $.ajax({
+  //      type: 'POST',
+  //      url: url_search_tag+'/'+ajax_query_timestamp,
+  //      dataType: 'json',
+  //      data: {'string_search':input.val()},
+  //      success: function(data) {
+  //      if (data.status == 'mustbeconnected')
+  //      {
+  //        $(location).attr('href', url_index);
+  //      }
+  //      
+  //      // Ce contrôle permet de ne pas continuer si une requete
+  //      // ajax a été faite depuis.
+  //      if (data.timestamp == ajax_query_timestamp)
+  //      {
+  //        var status = data.status;
+  //        var tags   = data.data;
+  //
+  //        // Si on spécifie une erreur
+  //        if (status == 'error')
+  //        {
+  //          // On l'affiche a l'utilisateur
+  //          span_info.text(data.error);
+  //        }
+  //        // Si c'est un succés
+  //        else if (status == 'success')
+  //        {
+  //          if (tags.length > 0)
+  //          {
+  //            var more = false;
+  //            // Pour chaque tags retournés
+  //            for (i in tags)
+  //            {
+  //              var tag_name = tags[i]['name'];
+  //              var tag_id = tags[i]['id'];
+  //              var t_string = tag_name
+  //              // On construit un li
+  //              
+  //              var r_string = $.trim(input.val());
+  //              var re = new RegExp(r_string, "i");
+  //              t_string = t_string.replace(re,"<strong>" + r_string + "</strong>");
+  //              
+  //                              
+  //              var li_tag = 
+  //                $('<li>').append(
+  //                  $('<a>').attr('id','searched_tag_'+tag_id)
+  //                    .attr('href', '#')
+  //                  // qui réagit quand on clique dessus
+  //                  .click(function(e){
+  //                    
+  //                    var id = str_replace('searched_tag_', '', $(this).attr('id'));
+  //                    var name = $('span#tag_prompt_tag_'+id+'_name').html();
+  //                                          
+  //                    $('input#tags_selected_tag_'+form_name).val(id);
+  //                    inputTag.val(name);
+  //                    // Et on execute l'évènement selectTag de l'input
+  //                    inputTag.trigger("selectTag");
+  //                    // On cache la liste puisque le choix vient d'être fait
+  //                    divtags.hide();
+  //                    // On vide le champs de saisie du tag
+  //                    $('input.form-default-value-processed').val('');
+  //                    return false;
+  //                  })
+  //                  .append(t_string)
+  //              ).append($('<span style="display: none;" id="tag_prompt_tag_'+tag_id+'_name">'+tag_name+'</span>'));
+  //
+  //              // Si on depasse les 30 tags
+  //              if (i > 30)
+  //              {
+  //                more = true;
+  //                // On le cache
+  //                li_tag.hide();
+  //              }
+  //
+  //              // On ajout ce li a la liste
+  //              search_tag_list.append(li_tag);
+  //            } 
+  //
+  //            if (more)
+  //            {
+  //              divtags.find('a.more').show();
+  //            }
+  //            
+  //            span_info.show();
+  //            span_info.text(data.message);
+  //            // Et on affiche la liste
+  //            search_tag_list.show();
+  //          }
+  //          else
+  //          {
+  //            span_info.show();
+  //            span_info.text(data.message);
+  //            search_tag_list.show();
+  //            
+  //            // Dans ce cas ou aucun tag n'a été trouvé, la proposition 
+  //            // d'ajout s'affichecf en dessous
+  //            
+  //            //span_info.text("Aucun tag de trouvé pour \""+inputTag.val()+"\"");
+  //          }
+  //          
+  //          // Si le tag ne semble pas connu en base
+  //          if (!data.same_found)
+  //          {
+  //            li_tag = 
+  //              $('<li>').addClass('new').append(
+  //                $('<a>').attr('href','#new#'+$.trim(input.val()))
+  //                // qui réagit quand on clique dessus
+  //                .click({
+  //                  inputTag: inputTag,
+  //                  form_name: form_name,
+  //                  divtags: divtags
+  //                }, event_click_new_tag_proposition)
+  //                .append($.trim(input.val()))
+  //            );
+  //            search_tag_list.append(li_tag);
+  //          }
+  //          
+  //        }
+  //
+  //        // On cache le loader
+  //        $('#tag_loader_'+form_name).hide();
+  //      }
+  //    }
+  //    });
+  //    
+  //    
+  //    //$.getJSON(url_search_tag+'/'+input.val()+'/'+ajax_query_timestamp, );
+  //    
+  //  }
+  //}
+  //
+  //function event_click_new_tag_proposition(event)
+  //{
+  //  form_add_open_dialog_for_new_tag($(event.target), event.data.inputTag, event.data.form_name, event.data.divtags);
+  //}
+  //
+  //function form_add_open_dialog_for_new_tag(link_add_tag, inputTag, form_name, divtags)
+  //{       
+  //  
+  //  
+  //  // Effet fade-in du fond opaque
+  //  $('body').append($('<div>').attr('id', 'fade')); 
+  //  //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
+  //  $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
+  //  
+  //  // En premier lieux on fait apparaître la fenêtre de confirmation
+  //  var popup = $('<div>')
+  //  .attr('id', 'add_tag')
+  //  .addClass('popin_block')
+  //  .css('width', '400px')
+  //    //.append($('<h2>').append(string_tag_add_title))
+  //  .append($('<form>')
+  //    .attr('action', url_add_tag)
+  //    .attr('method', 'post')
+  //    .attr('name', 'add_tag')
+  //    .ajaxForm(function(response) {
+  //      /*
+  //      *
+  //      */
+  //
+  //      if (response.status == 'mustbeconnected')
+  //      {
+  //        $(location).attr('href', url_index);
+  //      }
+  //
+  //      if (response.status == 'success')
+  //      {
+  //        var tag_id   = response.tag_id;
+  //        var tag_name = response.tag_name;
+  //
+  //        $('input#tags_selected_tag_'+form_name).val(tag_id);
+  //        inputTag.val(tag_name);
+  //        // Et on execute l'évènement selectTag de l'input
+  //        inputTag.trigger("selectTag");
+  //        // On cache la liste puisque le choix vient d'être fait
+  //        divtags.hide();
+  //
+  //        link_add_tag.parents('div.search_tag_list').find('img.tag_loader').hide();
+  //
+  //        $('#fade').fadeOut(400, function(){$('#fade').remove();});
+  //        $('#add_tag').remove();
+  //      }
+  //
+  //      if (response.status == 'error')
+  //      {
+  //        $('form[name="add_tag"]').find('ul.error_list').remove();
+  //        var ul_errors = $('<ul>').addClass('error_list');
+  //
+  //        for (i in response.errors)
+  //        {
+  //          ul_errors.append($('<li>').append(response.errors[i]));
+  //        }
+  //
+  //        $('form[name="add_tag"]').prepend(ul_errors);
+  //      }
+  //
+  //      return false;
+  //    })
+  //
+  //    .append($('<div>').addClass('tag')
+  //      .append($('<ul>')
+  //        .append($('<li>').addClass('button')
+  //          .append(link_add_tag.text()))))
+  //    .append($('<p>').append(string_tag_add_text))
+  //    .append($('<p>').append(string_tag_add_argument))
+  //    .append($('<textarea>').attr('name', 'argument'))
+  //    .append($('<div>').addClass('inputs')
+  //      .append($('<input>')
+  //        .attr('type', 'button')
+  //        .attr('value', string_tag_add_inputs_cancel)
+  //        .addClass('button')
+  //        .click(function(){
+  //          $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+  //          $('#add_tag').remove();
+  //
+  //          return false;
+  //        })
+  //      )
+  //      .append($('<input>')
+  //        .attr('type', 'submit')
+  //        .attr('value', string_tag_add_inputs_submit)
+  //        .addClass('button')
+  //        .click(function(){
+  //
+  //          link_add_tag.parents('div.search_tag_list').find('img.tag_loader').show();
+  //
+  //        })
+  //      )
+  //      .append($('<input>').attr('type', 'hidden').attr('name', 'tag_name').val(link_add_tag.text()))
+  //    ))
+  //  ;
+  //
+  //  // Il faut ajouter le popup au dom avant de le positionner en css
+  //  // Sinon la valeur height n'est pas encore calculable
+  //  $('body').prepend(popup);
+  //
+  //  //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
+  //  var popMargTop = (popup.height() + 50) / 2;
+  //  var popMargLeft = (popup.width() + 50) / 2;
+  //
+  //  //On affecte le margin
+  //  $(popup).css({
+  //    'margin-top' : -popMargTop,
+  //    'margin-left' : -popMargLeft
+  //  });
+  //
+  //  return false;
+  //}
+  //
+  //var last_keypress = 0;
+  //
+  //function check_timelaps_and_search(input, form_name, time_id, timed, info)
+  //{
+  //  if (!timed)
+  //  {
+  //    // C'est une nouvelle touche (pas redirigé) on lui donne un id
+  //    // et on met a jour l'id de la dernière pressé
+  //    last_keypress = new Date().getTime(); 
+  //    var this_time_id = last_keypress;
+  //  }
+  //  else
+  //  {
+  //    // Si elle a été redirigé, on met son id dans cette variable
+  //    var this_time_id = time_id;
+  //  }
+  //  
+  //  // C'est une touche redirigé dans le temps qui a été suivit d'une autre touche
+  //  if (time_id != last_keypress && timed)
+  //  {
+  //    // elle disparait
+  //  }
+  //  else
+  //  {
+  //    //
+  //    if ((new Date().getTime() - last_keypress) < 600 || timed == false)
+  //    {
+  //      // Si elle vient d'être tapé (timed == false) elle doit attendre (au cas ou une autre touche soit tapé)
+  //      // Si c'est une redirigé qui n'a pas été remplacé par une nouvelle lettre
+  //      // elle doit attendre au cas ou soit pressé.
+  //      setTimeout(function(){check_timelaps_and_search(input, form_name, this_time_id, true, info)}, 700);
+  //    }
+  //    else
+  //    {
+  //      // il n'y a plus a attendre, on envoie la demande de tag.
+  //      autocomplete_tag(input, form_name);
+  //    }
+  //  }
+  //}
+  //
+  //// Autocompletion de tags
+  //$("div.tags_prompt ul.tagbox li.input input").live('keypress', function(e){
+  //  
+  //  var form_name = $(this).parents('form').attr('name');
+  //  var code = (e.keyCode ? e.keyCode : e.which);
+  //
+  //  if ((e.which !== 0 && e.charCode !== 0) || (code == 8 || code == 46))
+  //  {
+  //    check_timelaps_and_search($(this), form_name, new Date().getTime(), false, $(this).val());
+  //  }
+  //   
+  //});
+  //
+  //// Un click sur ce lien affiche tout les tags cachés de la liste
+  //$('div.search_tag_list a.more').live('click', function(){
+  //  jQuery.each( $(this).parent('div').find('ul.search_tag_list li') , function(){
+  //    $(this).show();
+  //  });
+  //  $(this).hide();
+  //  return false;
+  //});
+  //
+  //$('ul.tagbox li.input input[type="text"]').formDefaults();
+  //
   ////////////////// FIN TAG PROMPT ///////////////
  
   // Suppression d'un element
@@ -1367,15 +1357,12 @@ $(document).ready(function(){
     
     var form_name = "add";
     var tag_id = str_replace('#', '', $(this).attr('href'));
-    var input_tag = $("div.tags_prompt ul.tagbox li.input input");
     
     // Si on connait le tag id (pas un nouveau tag donc)
     if (tag_id)
     {
-      $('input#tags_selected_tag_'+form_name).val(tag_id);
-      input_tag.val($(this).text());
-      // Et on execute l'évènement selectTag de l'input
-      input_tag.trigger("selectTag");
+      var tag = new Tag(tag_id, $(this).text());
+      window.add_tag_prompt_connector.addTagToTagPrompt(tag);
     }
     else
     {

web/js/lib/TagPrompt.js

@@ -1,13 +1,16 @@
-function TagPrompt()
+function TagPrompt(select_tag_callback, tag_prompt_connector)
 {
   
   /* @var tags_selected array of Tag */
-  var tags_selected = new Array();
+  var tags_selected = [];
   /* @var tags_proposed array of Tag */
-  var tags_proposed = new Array();
+  var tags_proposed = [];
+  var _select_tag_callback = select_tag_callback;
+  var _tag_prompt_connector = tag_prompt_connector;
   
   this.getProposedTagsForString = function(search_string, callback_success, callback_error)
   {
+    tags_proposed = [];
     JQueryJson(url_search_tag, {'string_search': search_string}, function(response){
       if (response.status == 'error')
       {
@@ -19,38 +22,241 @@ function TagPrompt()
         {
           var tag = new Tag(
             response.data[i].id,
-            response.data[i].name,
-            true
+            response.data[i].name
           );
           tags_proposed.push(tag);
         }
-        callback_success(tags_proposed, search_string);
+        callback_success(tags_proposed, search_string, response.message, response.same_found);
       }
     });
   }
   
-  this.selectProposedTag = function (tag_id)
+  this.selectProposedTag = function (tag_id, tag_name)
   {
-    // Selection d'un tag dans la liste de propositions
+    if (!tag_id)
+    {
+      openTagSubmission(tag_name);
+    }
+    else
+    {
+      addTagToSelectedTags(findTagInProposedList(tag_id));
+      _select_tag_callback(tags_selected);
+    }
   }
   
-  this.openTagSubmission = function (tag_string)
+  var openTagSubmission = function (tag_name)
   {
-    // Ouverture du dialogue pour proposer un nouveau tag
+    // TODO : Cette partie du code n'est pas encore refactorisé
+    
+    // Effet fade-in du fond opaque
+    $('body').append($('<div>').attr('id', 'fade')); 
+    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
+    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
+    
+    // En premier lieux on fait apparaître la fenêtre de confirmation
+    var popup = $('<div>')
+    .attr('id', 'add_tag')
+    .addClass('popin_block')
+    .css('width', '400px')
+      //.append($('<h2>').append(string_tag_add_title))
+    .append($('<form>')
+      .attr('action', url_add_tag)
+      .attr('method', 'post')
+      .attr('name', 'add_tag')
+      .ajaxForm(function(response) {
+        /*
+        *
+        */
+  
+        if (response.status == 'mustbeconnected')
+        {
+          $(location).attr('href', url_index);
+        }
+  
+        if (response.status == 'success')
+        {
+          var tag = new Tag(response.tag_id, response.tag_name);
+          addTagToProposedTags(tag);
+          addTagToSelectedTags(tag);
+          _tag_prompt_connector.updateOutput(tags_selected);
+  
+          $('#fade').fadeOut(400, function(){$('#fade').remove();});
+          $('#add_tag').remove();
+        }
+  
+        if (response.status == 'error')
+        {
+          $('form[name="add_tag"]').find('ul.error_list').remove();
+          var ul_errors = $('<ul>').addClass('error_list');
+  
+          for (i in response.errors)
+          {
+            ul_errors.append($('<li>').append(response.errors[i]));
+          }
+  
+          $('form[name="add_tag"]').prepend(ul_errors);
+        }
+  
+        return false;
+      })
+  
+      .append($('<div>').addClass('tag')
+        .append($('<ul>')
+          .append($('<li>').addClass('button')
+            .append(tag_name))))
+      .append($('<p>').append(string_tag_add_text))
+      .append($('<p>').append(string_tag_add_argument))
+      .append($('<textarea>').attr('name', 'argument'))
+      .append($('<div>').addClass('inputs')
+        .append($('<input>')
+          .attr('type', 'button')
+          .attr('value', string_tag_add_inputs_cancel)
+          .addClass('button')
+          .click(function(){
+            $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+            $('#add_tag').remove();
+  
+            return false;
+          })
+        )
+        .append($('<input>')
+          .attr('type', 'submit')
+          .attr('value', string_tag_add_inputs_submit)
+          .addClass('button')
+          .click(function(){
+  
+            // TODO: loader gif
+  
+          })
+        )
+        .append($('<input>').attr('type', 'hidden').attr('name', 'tag_name').val(tag_name))
+      ))
+    ;
+  
+    // Il faut ajouter le popup au dom avant de le positionner en css
+    // Sinon la valeur height n'est pas encore calculable
+    $('body').prepend(popup);
+  
+    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
+    var popMargTop = (popup.height() + 50) / 2;
+    var popMargLeft = (popup.width() + 50) / 2;
+  
+    //On affecte le margin
+    $(popup).css({
+      'margin-top' : -popMargTop,
+      'margin-left' : -popMargLeft
+    });
+  
+    return false;
   }
   
-  this.submitTag = function (tag_string, tag_arguments)
+  var addTagToSelectedTags = function(tag)
   {
-    // Propotion d'un tag
+    var found = false;
+    for (i in tags_selected)
+    {
+      if (tags_selected[i].id == tag.id)
+      {
+        found = true;
+      }
+    }
+    if (!found)
+    {
+      tags_selected.push(tag);
+    }
   }
+  
+  var addTagToProposedTags = function(tag)
+  {
+    var found = false;
+    for (i in tags_proposed)
+    {
+      if (tags_proposed[i].id == tag.id)
+      {
+        found = true;
+      }
+    }
+    if (!found)
+    {
+      tags_proposed.push(tag);
+    }
+  }
+  
+  this.addTag = function(tag)
+  {
+    addTagToSelectedTags(tag);
+    addTagToProposedTags(tag);
+  }
+  
+  var findTagInProposedList = function(tag_id)
+  {
+    for (i in tags_proposed)
+    {
+      if (tags_proposed[i].id == tag_id)
+      {
+        return tags_proposed[i];
+      }
+    }
+    throw new Error("Unable to find the tag !")
+  }
+  
+  this.removeSelectedTag = function(tag_id)
+  {
+    var new_tags_selected = [];
+    for (i in tags_selected)
+    {
+      if (tags_selected[i].id != tag_id)
+      {
+        new_tags_selected.push(tags_selected[i]);
+      }
+    }
+    tags_selected = new_tags_selected;
+  }
+  
+  this.getSelectedTags = function()
+  {
+    return tags_selected;
+  }
+  
+  this.setSelectedTags = function(tags)
+  {
+    tags_selected = tags;
+  }
+  
 }
 
-function TagPromptConnector(input, output, proposition_list)
+function TagPromptConnector(input, output, proposition_list, tag_box, prompt_loader)
 {
   var _input = input;
   var _output = output;
-  var _tag_prompt = new TagPrompt();
-  var _tag_proposition_list = new TagPromptPropositionList(proposition_list);
+  var _tag_box_manager = new TagBoxManager(tag_box, this);
+  var _prompt_loader = prompt_loader;
+  
+  this.updateOutput = function(tags)
+  {
+    _output.val(array2json(tagsToArrayIds(tags)));
+    _tag_proposition_list.hide();
+    _tag_box_manager.update(tags);
+    cleanInput();
+  }
+  
+  var _tag_prompt = new TagPrompt(this.updateOutput, this);
+  var _tag_proposition_list = new TagPromptPropositionList(proposition_list, _tag_prompt.selectProposedTag, this);
+  
+  var cleanInput = function()
+  {
+    _input.val('');
+  }
+  
+  var showPromptLoader = function()
+  {
+    _prompt_loader.show();
+  }
+  
+  this.hidePromptLoader = function()
+  {
+    _prompt_loader.hide();
+  }
   
   var launchSearchTagsIdLastKeystroke = function(search_string)
   {
@@ -63,7 +269,7 @@ function TagPromptConnector(input, output, proposition_list)
   var displayTagsProposedSearchTags = function()
   {
     var string_search = _input.val();
-    tags = _tag_prompt.getProposedTagsForString(
+    _tag_prompt.getProposedTagsForString(
       string_search,
       _tag_proposition_list.displayTagsPropositions,
       _tag_proposition_list.displayError
@@ -71,14 +277,92 @@ function TagPromptConnector(input, output, proposition_list)
   }
   
   $(_input).bind('keyup', function() {
-    setTimeout(launchSearchTagsIdLastKeystroke, 1000, [_input.val()]);
+    if ($(this).val().length > 0)
+    {
+      showPromptLoader();
+      setTimeout(launchSearchTagsIdLastKeystroke, 1000, [_input.val()]);
+    }
   });
+  
+  var tagsToArrayIds = function(tags)
+  {
+    var tags_ids = [];
+    for (i in tags)
+    {
+      tags_ids.push(tags[i].id);
+    }
+    return tags_ids;
+  }
+  
+  this.removeSelectedTag = function(tag_id)
+  {
+    _tag_prompt.removeSelectedTag(tag_id);
+    this.updateOutput(_tag_prompt.getSelectedTags());
+  }
+  
+  this.initializeTags = function(tags)
+  {
+    _tag_prompt.setSelectedTags(tags);
+    this.updateOutput(_tag_prompt.getSelectedTags());
+  }
+  
+  this.addTagToTagPrompt = function(tag)
+  {
+    _tag_prompt.addTag(tag);
+    this.updateOutput(_tag_prompt.getSelectedTags());
+  }
+  
+}
+
+function TagBoxManager(tag_box, tag_prompt_connector)
+{
+  var _tag_prompt_connector = tag_prompt_connector;
+  var _tag_box = tag_box;
+  
+  this.update = function(tags)
+  {
+    _tag_box.find('li').remove();
+    for (i in tags)
+    {
+      _tag_box.append(getTagLine(tags[i]));
+    }
+  }
+  
+  var getTagLine = function (tag)
+  {
+    var line = $('<li>');
+    line.addClass('tag');
+    line.text(tag.name);
+    line.append(getCloseLink(tag));
+    
+    return line;
+  }
+  
+  var getCloseLink = function(tag)
+  {
+    var close_link = $('<a>');
+    close_link.addClass('close');
+    close_link.attr('href', '#');
+    close_link.data('tag_id', tag.id);
+    close_link.data('tag_name', tag.name);
+    close_link.text('close');
+    close_link.bind('click', function(){
+      _tag_prompt_connector.removeSelectedTag($(this).data('tag_id'));
+      return false;
+    });
+    
+    return close_link;
+  }
+  
 }
 
-function TagPromptPropositionList(proposition_list, string_search)
+function TagPromptPropositionList(proposition_list, click_tag_callback, tag_prompt_connector)
 {
   var _proposition_list = proposition_list;
   var _list;
+  var _limit_display_tags = 30;
+  var _click_tag_callback = click_tag_callback;
+  var _tag_prompt_connector = tag_prompt_connector;
   
   this.displayError = function(error_string)
   {
@@ -87,19 +371,23 @@ function TagPromptPropositionList(proposition_list, string_search)
     span_info.text(error_string);
   }
   
-  this.displayTagsPropositions = function(tags, string_search)
+  this.displayTagsPropositions = function(tags, search_string, message, same_found)
   {
     initializeList();
-    displayMessage(str_replace('%string_search%', string_search, string_search_tag_title));
+    displayMessage(message);
     for (i in tags)
     {
-      addTagToList(tags[i]);
-      // Bouton afficher tout les tags, tag hiddent quoi
+      addTagToList(tags[i], search_string);
+    }
+    if (!same_found)
+    {
+      addTagPropositionToList(new Tag(null, search_string));
     }
   }
   
   var initializeList = function()
   {
+    _tag_prompt_connector.hidePromptLoader();
     $(_proposition_list).show();
     _list = _proposition_list.find('ul.search_tag_list');
     _list.find('li').remove();
@@ -112,33 +400,85 @@ function TagPromptPropositionList(proposition_list, string_search)
     span_info.text(message);
   }
   
-  var addTagToList = function(tag)
+  var addTagToList = function(tag, search_string)
+  {
+    var line = '';
+    if (_list.find('li').length > _limit_display_tags)
+    {
+      line = getListLine(tag, true);
+      _proposition_list.find('a.more').show();
+    }
+    else
+    {
+      line = getListLine(tag, false);
+    }
+    
+    line = strongifySearchedLetters(line, search_string);
+    _list.append(line);
+  }
+  
+  var getListLine = function(tag, hide)
+  {
+    if (hide)
+    {
+      var line = $('<li style="display: none;">');
+    }
+    else
+    {
+      var line = $('<li>');
+    }
+    
+    return line.append(getTagLink(tag));
+  }
+  
+  var getTagLink = function(tag)
+  {
+    link = $('<a>');
+    link.attr('href', '#');
+    link.data('tag_id', tag.id);
+    link.data('tag_name', tag.name);
+    link.text(tag.name);
+    link.bind('click', function(){
+      _click_tag_callback($(this).data('tag_id'), $(this).data('tag_name'));
+      return false;
+    });
+    return link;
+  }
+  
+  var strongifySearchedLetters = function(line, search_string)
+  {
+    var name = line.find('a').text();
+    line.find('a').html(name.replace(new RegExp(search_string, "i"), "<strong>" + search_string + "</strong>"));
+    return line;
+  }
+  
+  var addTagPropositionToList = function(tag)
   {
-    _list.append(getListLine(tag));
+    var line = getListLine(tag);
+    line.addClass('new');
+    _list.append(line);
   }
   
-  var getListLine = function(tag)
+  this.hide = function()
   {
-    return '<li>'+tag.name+'</li>';
+    _proposition_list.hide();
   }
   
 }
 
-function Tag(id, name, knew)
+function Tag(id, name)
 {
   /* @var _id int */
   this.id = id;
   /* @var _name string */
   this.name = name;
-  /* @var _knew boolean */
-  this.knew = knew;
 }
 
 Tag.prototype =
 {
   isKnew: function()
   {
-    if (this.knew)
+    if (this.id)
     {
       return true;
     }
@@ -147,11 +487,24 @@ Tag.prototype =
 }
 
 $(document).ready(function(){
-  $('input.tag_prompt').each(function(){
-    new TagPromptConnector(
-      $(this),
-      $(this).parents('form').find('input.tag_prompt_selected_ids'),
-      $(this).parents('form').find('div.search_tag_list')
-   );
+  // Ce code permet la fermeture de la propositions de tags lors d'un click sur la page
+  $('html').click(function() {
+    if ($("div.search_tag_list").is(':visible'))
+    {
+      $("div.search_tag_list").hide();
+    }
   });
+  $("div.search_tag_list, div.search_tag_list a.more").live('click', function(event){
+    event.stopPropagation();
+    $("div.search_tag_list").show();
+  });
+  
+  $('div.search_tag_list a.more').live('click', function(){
+    $(this).parents('div.search_tag_list ').find('ul.search_tag_list li').show();
+    $(this).hide();
+    return false;
+  });
+  
 });
+
+// loaders