Evolution #115: Ajax sur tag et filtre

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

       <ul class="element_tags">
         {% for tag in element.tags %} 
           <li class="element_tag">
-            {{ tag.name }}
+            <a href="#{{ tag.id }}" class="element_tag button">{{ tag.name }}</a>
           </li>
         {% endfor %} 
       </ul>

web/bundles/muzichcore/css/main.css

 
 .elements ul.element_tags
 {
-  margin-left: 10px;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 3px;
+  margin-left: 0px;
 }
   
 .elements ul.element_tags li
   font-size: 90%;
 }
 
+ul.element_tags .button
+{
+  padding: 2px 4px 2px 4px;
+  font-size: 95%;
+}
+
 
 /* FIN CSS pour elements */
 

web/bundles/muzichcore/js/muzich.js

   }
   
   // Bouton de personalisation du filtre
+  // Aucun tags
   $('.tags_prompt input.clear, a.filter_clear_url').live("click", function(){
     $('img.elements_more_loader').show();
     $('ul.elements').html('');
     remove_tags(form.attr('name'));
     form.submit();
   });
+  
+  // tags préférés
   $('.tags_prompt input.mytags').live("click", function(){
     
     $('img.elements_more_loader').show();
       
     });
   });
+  
+  // Tag cliqué dans la liste d'éléments
+  $('ul.element_tags li a.element_tag').live('click', function(){
+    // Si il y a une liste de tags (comme sur la page favoris, profil)
+    if ($('ul#favorite_tags').length)
+    {
+      id = str_replace('#', '', $(this).attr('href'));
+      link = $('ul#favorite_tags li a[href="#'+id+'"]');
+      list_tag_clicked(link, true);
+    }
+    
+    if ($('form[name="search"]').length)
+    {
+      $('img.elements_more_loader').show();
+      $('ul.elements').html('');
+      form = $('form[name="search"]');
+      id = str_replace('#', '', $(this).attr('href'));
+      remove_tags('search');
+      inputTag = $("div#tags_prompt_search input.form-default-value-processed");
+      $('input#tags_selected_tag_search').val(id);
+      inputTag.val($(this).html());
+      inputTag.trigger("selectTag");
+      form.submit();
+    }
+  });
 
   // Affichage un/des embed
   // 1328283150_media-playback-start.png
     
     return false;
   }
-   
-  $('ul#favorite_tags a.tag').click(function(){
-    // Ensuite on l'active ou le désactive'
-    if ($(this).hasClass('active'))
+  
+  function list_tag_clicked(link, erease)
+  {
+    if (erease)
+    {
+      $('ul#favorite_tags a.tag').removeClass('active');
+    }
+    
+    // Ensuite on l'active ou le désactive
+    if (link.hasClass('active'))
     {
-      $(this).removeClass('active');
+      link.removeClass('active');
     }
     else
     {
-      $(this).addClass('active');
+      link.addClass('active');
     }
     
     // On construit notre liste de tags
     tags_ids = new Array();
     $('ul#favorite_tags a.tag.active').each(function(index){
-      id = str_replace('#', '', $(this).attr('href'));
+      id = str_replace('#', '', link.attr('href'));
       tags_ids[id] = id;
     });
     
     a_more = $('a.elements_more');
     a_more.attr('href', $('input#more_elements_url').val()+'/'+array2json(tags_ids));
     
-    return check_timelaps_and_find_with_tags($(this), new Date().getTime(), false);
+    return check_timelaps_and_find_with_tags(link, new Date().getTime(), false);
+  }
+   
+  $('ul#favorite_tags a.tag').click(function(){
+    list_tag_clicked();
   });
   
   last_keypress = 0;