Javascript pour afficher/cacher le lecteur embed.

app/Resources/translations/elements.fr.yml

@@ -8,4 +8,7 @@ element:
     remove:             Retirer de mes favoris
   add:
     group:
-      will_be_in:       L'élément sera ajouté dans le groupe
+      will_be_in:       L'élément sera ajouté dans le groupe
+  show:
+    close_embed:        Cacher le lecteur
+    open_embed:         Afficher le lecteur

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

@@ -1,14 +1,31 @@
 
 {% if elements|length %}
-  <ul>
+  <ul class="elements">
     {% for element in elements %} 
-      <li id="element_{{ element.id }}">
+      <li class="element" id="element_{{ element.id }}">
+        
+        {% if element.embed %}
+          <img src="{{ asset('bundles/muzichcore/img/1324917083_player.png') }}" alt="player" />
+        {% else %}
+          <img src="{{ asset('bundles/muzichcore/img/1324917097_link.png') }}" alt="link" />
+        {% endif %}
+        
         {% if element.group %}
-          <b>({{ element.group.name }})</b>
+          <b class="element_group">
+            (<a href="{{ path('show_group', {'slug': element.group.slug}) }}">{{ element.group.name }}</a>)
+          </b>
         {% endif %}
-        {{ element.name }} ({{ element.owner.username }})
-          <a href="{{ element.url }}" target="_blank">link</a>
           
+        <span class="element_name">
+          {{ element.name }}
+        </span> 
+        
+        <span class="element_author">
+          (<a href="{{ path('show_group', {'slug': element.owner.slug}) }}">{{ element.owner.name }}</a>)
+        </span>
+        
+        <a class="element_link" href="{{ element.url }}" target="_blank">link</a>
+                  
           {% if element.getCountFavorite %}
             | <a href="{{ path('favorite_remove', { 'id': element.id, 'token': user.personalHash }) }}" >
               {{ 'element.favorite.remove'|trans({}, 'elements') }}
@@ -19,18 +36,29 @@
             </a>
           {% endif %}
           
-          <ul>
+          {% if element.embed %}
+            {% autoescape false %}
+              <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
+                {{ element.embed }}
+              </div>
+            {% endautoescape %}
+          {% endif %}
+          
+          <ul class="element_tags">
             {% for tag in element.tags %} 
-              <li>
+              <li class="element_tag">
                 {{ tag.name }}
               </li>
             {% endfor %} 
           </ul>
-
+            
           {% if element.embed %}
-            {% autoescape false %}
-              {{ element.embed }}
-            {% endautoescape %}
+          <a href="#" class="element_embed_close_link" style="display: none;">
+            {{ 'element.show.close_embed'|trans({}, 'elements') }}
+          </a>
+          <a href="#" class="element_embed_open_link">
+            {{ 'element.show.open_embed'|trans({}, 'elements') }}
+          </a>
           {% endif %}
 
       </li>

web/bundles/muzichcore/css/main.css

@@ -292,7 +292,7 @@ ul.inline li
 }
 
 
-/*  (TMP) Debut CSS pour tags */
+/*  Debut CSS pour tags */
 
 pre code {background: #ccc; padding:2px 0; display: block; margin-top:4px;}
 .ui-autocomplete {
@@ -370,4 +370,21 @@ background-position: 7px;
 } 
 
 
-/* Fin CSS pour tags */
+/* Fin CSS pour tags */
+
+/* Debut CSS pour elements */
+
+.elements ul.element_tags
+{
+  margin-left: 10px;
+  margin-top: 0px;
+}
+  
+.elements ul.element_tags li
+{
+  display: inline;
+  font-size: 90%;
+}
+
+
+/* FIN CSS pour elements */

web/bundles/muzichhome/js/home.js

@@ -1,16 +1,43 @@
 $(document).ready(function(){
    
+   // Ouverture de la zone "ajouter un element""
    $('#element_add_link').click(function(){
      $('#element_add_box').slideDown("slow");
      $('#element_add_link').hide();
      return false;
    });   
    
+   // Fermeture de la zone "ajouter un element""
    $('#element_add_close_link').click(function(){
      $('#element_add_box').slideUp("slow");
      $('#element_add_link').show();
      return false;
    }); 
    
+//   // Affichage du/des embed si existant
+//   $('li.element').hover(function(){     
+//     $(this).find('div.element_embed').each(function(i){ 
+//       if ($(this).css('display') == 'none')
+//       {
+//         $(this).show();        
+//       }
+//     });
+//   }, function(){});
+
+   // Affichage du/des embed
+   $('a.element_embed_open_link').click(function(){
+     $('a.element_embed_open_link').hide();
+     $('a.element_embed_close_link').show();
+     $(this).parent('li.element').find('div.element_embed').show();
+     return false;
+   });
+   
+   // Fermeture du embed si demandé
+   $('a.element_embed_close_link').click(function(){
+     $('a.element_embed_open_link').show();
+     $('a.element_embed_close_link').hide();
+     $(this).parent('li.element').find('div.element_embed').hide();
+     return false;
+   });
    
  });