Evolution #97: Présentation des elments

app/Resources/translations/elements.fr.yml

     open_embed:         Afficher le lecteur
     open_link:          Ouvrir la page
   name:
-    who:                (envoyé par <a href="%owner_url%">%owner_name%</a>)
-    whoandgroup:        (envoyé par <a href="%owner_url%">%owner_name%</a> dans le groupe <a href="%group_url%">%group_name%</a>)
+    who:                envoyé par <a href="%owner_url%">%owner_name%</a>
+    whoandgroup:        envoyé par <a href="%owner_url%">%owner_name%</a> dans le groupe <a href="%group_url%">%group_name%</a>
   link:                 Ouvrir la page d'origine
   edit:
     link:               Modifier

src/Muzich/CoreBundle/ElementFactory/ElementManager.php

     {
       $site_factory = $this->getFactory();
       $this->element->setEmbed($site_factory->getEmbedCode());
+      $this->element->setThumbnailUrl($site_factory->getThumbnailUrl());
     }
     
   }

src/Muzich/CoreBundle/ElementFactory/Site/YoutubeFactory.php

     
     return null;
   }
+  
+  public function getThumbnailUrl()
+  {
+    $url_object = $this->getCleanedUrl();
+    $url = null;
+    
+    // http://youtu.be/9hQVA2sloGc
+    if (preg_match("#\/([a-zA-Z0-9]+)#", $url_object, $chaines))
+    {
+      $url = 'http://img.youtube.com/vi/'.$chaines[1].'/default.jpg';
+    }
+    
+    return $url;
+  }
 }
 
 ?>

src/Muzich/CoreBundle/ElementFactory/Site/YoutubecomFactory.php

     
     return null;
   }
+  
+  public function getThumbnailUrl()
+  {
+    $url_object = $this->getCleanedUrl();
+    $url = null;
+    
+    // '/watch?v=kOLQIV22JAs&feature=feedrec_grec_index'
+    if (preg_match("#(v\/|watch\?v=)([\w\-]+)#", $url_object, $chaines))
+    {
+      $url = 'http://img.youtube.com/vi/'.$chaines[2].'/default.jpg';
+    }
+    else if (preg_match("#(v=|watch\?v=)([\w\-]+)#", $url_object, $chaines))
+    {
+      $url = 'http://img.youtube.com/vi/'.$chaines[2].'/default.jpg';
+    }
+    
+    return $url;
+  }
 }
 
 ?>

src/Muzich/CoreBundle/ElementFactory/Site/base/BaseFactory.php

     return str_replace('http://'.$this->element->getType(), '', $url);
   }
   
+  public function getThumbnailUrl()
+  {
+    return null;
+  }
+  
 }
 
 ?>

src/Muzich/CoreBundle/Entity/Element.php

    */
   private $updated;
   
+  /**
+   * @var string $thumbnail_url
+   *
+   * @ORM\Column(type="string", length=512, nullable=true)
+   */
+  protected $thumbnail_url;
 
   /**
    * Get id
   {
       return $this->updated;
   }
+
+  /**
+   * Set thumbnail url
+   *
+   * @param string $thumbnail_url
+   */
+  public function setThumbnailUrl($thumbnail_url)
+  {
+      $this->thumbnail_url = $thumbnail_url;
+  }
+
+  /**
+   * Get thumbnail url
+   *
+   * @return datetime 
+   */
+  public function getThumbnailUrl()
+  {
+      return $this->thumbnail_url;
+  }
   
   /**
    * Etablie des relation vers des tags.

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

-{% if element.getCountFavorite %}
-  <a class="favorite_link" href="{{ path('favorite_remove', { 'id': element.id, 'token': app.user.personalHash }) }}" >
-    <img src="{{ asset('bundles/muzichcore/img/favorite.png') }}" title="{{ 'element.favorite.remove'|trans({}, 'elements') }}" alt="{{ 'element.favorite.remove'|trans({}, 'elements') }}"/>
-  </a>
-{% else %}
-  <a class="favorite_link" href="{{ path('favorite_add', { 'id': element.id, 'token': app.user.personalHash }) }}" >
-    <img src="{{ asset('bundles/muzichcore/img/favorite_bw.png') }}" title="{{ 'element.favorite.add'|trans({}, 'elements') }}" alt="{{ 'element.favorite.add'|trans({}, 'elements') }}" />
-  </a>
-{% endif %}
-
-<span class="element_name">
-  {{ element.name }}
-</span> 
-
-{% autoescape false %}
-  {% if element.group and no_group_name is not defined%}
-    {{ 'element.name.whoandgroup'|trans({
-      '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
-      '%owner_name%' : element.owner.name,
-      '%group_url%'  : path('show_group', {'slug': element.group.slug}),
-      '%group_name%' : element.group.name
-    }, 'elements') }}
-  {% else %}
-    {{ 'element.name.who'|trans({
-      '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
-      '%owner_name%' : element.owner.name
-    }, 'elements') }}
-  {% endif %}
-{% endautoescape %}
+<table>
+  <tr>
+    <td class="element_thumbnail">
+      {% if element.embed %}
+        <a href="#" class="element_open element_embed_open_link">
+          <img 
+            {% if element.thumbnailUrl %}
+              src="{{ element.thumbnailUrl }}" 
+            {% else %}
+              src="{{ asset('bundles/muzichcore/img/nothumb.png') }}" 
+            {% endif %}
+            title="{{ 'element.show.open_embed'|trans({}, 'elements') }}" 
+            alt="open"
+          />
+        </a>
+      {% else %}
+        <a href="{{ element.url }}" class="element_open" target="_blank">
+          <img 
+            {% if element.thumbnailUrl %}
+              src="{{ element.thumbnailUrl }}" 
+            {% else %}
+              src="{{ asset('bundles/muzichcore/img/nothumb.png') }}" 
+            {% endif %}
+            title="{{ 'element.show.open_embed'|trans({}, 'elements') }}" 
+            alt="open"
+          />
+        </a>
+      {% endif %}
+    </td>
+    <td class="element_content">
+      
+      {% if element.getCountFavorite %}
+        <a class="favorite_link" href="{{ path('favorite_remove', { 'id': element.id, 'token': app.user.personalHash }) }}" >
+          <img src="{{ asset('bundles/muzichcore/img/favorite.png') }}" title="{{ 'element.favorite.remove'|trans({}, 'elements') }}" alt="{{ 'element.favorite.remove'|trans({}, 'elements') }}"/>
+        </a>
+      {% else %}
+        <a class="favorite_link" href="{{ path('favorite_add', { 'id': element.id, 'token': app.user.personalHash }) }}" >
+          <img src="{{ asset('bundles/muzichcore/img/favorite_bw.png') }}" title="{{ 'element.favorite.add'|trans({}, 'elements') }}" alt="{{ 'element.favorite.add'|trans({}, 'elements') }}" />
+        </a>
+      {% endif %}
+      
+      <span class="element_name">
+        {% if element.embed %}
+          <a href="#" class="element_open element_name_embed_open_link">
+            {{ element.name }}
+          </a>
+        {% else %}
+          <a href="{{ element.url }}" class="element_open" target="_blank">
+            {{ element.name }}
+          </a>
+        {% endif %}
+      </span> 
+      
+      <a title="{{ 'element.link'|trans({}, 'elements') }}" class="element_link" href="{{ element.url }}" target="_blank">
+        <img src="{{ asset('bundles/muzichcore/img/1324917097_link.png') }}" alt="link" />
+      </a>
+      
+      {% if app.user.id == element.owner.id %}
+        <a title="{{ 'element.edit.link'|trans({}, 'elements') }}" class="element_edit_link" 
+           href="{{ path('element_edit', {'element_id' : element.id})  }}" style="display: none;"
+        >
+          <img src="{{ asset('bundles/muzichcore/img/1327151338_desktop.png') }}" alt="edit" />
+        </a>
 
+        <a title="{{ 'element.remove.link'|trans({}, 'elements') }}" class="element_remove_link" 
+           href="{{ path('element_remove', {'element_id' : element.id})  }}" style="display: none;"
+        >
+          <img src="{{ asset('bundles/muzichcore/img/1327168960_fileclose.png') }}" alt="delete" />
+        </a>
+      {% endif %}
+      
+      <br />
+      {% autoescape false %}
+        {% if element.group and no_group_name is not defined%}
+          {{ 'element.name.whoandgroup'|trans({
+            '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
+            '%owner_name%' : element.owner.name,
+            '%group_url%'  : path('show_group', {'slug': element.group.slug}),
+            '%group_name%' : element.group.name
+          }, 'elements') }}
+        {% else %}
+          {{ 'element.name.who'|trans({
+            '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
+            '%owner_name%' : element.owner.name
+          }, 'elements') }}
+        {% endif %}
+      {% endautoescape %}
+      
+      <div class="loader">
+        <img class="element_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+      </div>
+      
+      {% if element.tags|length %}
+      <ul class="element_tags">
+        {% for tag in element.tags %} 
+          <li class="element_tag">
+            {{ tag.name }}
+          </li>
+        {% endfor %} 
+      </ul>
+      {% endif %}
+      
+      <br />
+      <a href="#" class="element_open element_embed_open_link element_embed_open_link_text">
+        {{ 'element.show.open_embed'|trans({}, 'elements') }}
+      </a>
+      <a href="#" class="element_open element_embed_close_link" style="display: none;">
+        {{ 'element.show.close_embed'|trans({}, 'elements') }}
+      </a>
+      
+    </td>
+  </tr>
+</table>
 
-<a title="{{ 'element.link'|trans({}, 'elements') }}" class="element_link" href="{{ element.url }}" target="_blank">
-  <img src="{{ asset('bundles/muzichcore/img/1324917097_link.png') }}" alt="link" />
-</a>
-
-{% if app.user.id == element.owner.id %}
-  <a title="{{ 'element.edit.link'|trans({}, 'elements') }}" class="element_edit_link" 
-     href="{{ path('element_edit', {'element_id' : element.id})  }}" style="display: none;"
-  >
-    <img src="{{ asset('bundles/muzichcore/img/1327151338_desktop.png') }}" alt="edit" />
-  </a>
-
-  <a title="{{ 'element.remove.link'|trans({}, 'elements') }}" class="element_remove_link" 
-     href="{{ path('element_remove', {'element_id' : element.id})  }}" style="display: none;"
-  >
-    <img src="{{ asset('bundles/muzichcore/img/1327168960_fileclose.png') }}" alt="delete" />
-  </a>
-{% endif %}
-
-<div class="loader">
-  <img class="element_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
-</div>
-  
 {% if element.embed %}
   {% autoescape false %}
     <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
     </div>
   {% endautoescape %}
 {% endif %}
-
-<div>
-
-  {% if element.embed %}
-    <a href="#" class="element_open element_embed_close_link" style="display: none;">
-      {{ 'element.show.close_embed'|trans({}, 'elements') }}
-    </a>
-    <a href="#" class="element_open element_embed_open_link">
-      {{ 'element.show.open_embed'|trans({}, 'elements') }}
-    </a>
-  {% else %}
-    <a href="{{ element.url }}" class="element_open" target="_blank">
-      {{ 'element.show.open_link'|trans({}, 'elements') }}
-    </a>
-  {% endif %}
-
-  {% if element.tags|length %}
-  <ul class="element_tags">
-    {% for tag in element.tags %} 
-      <li class="element_tag">
-        {{ tag.name }}
-      </li>
-    {% endfor %} 
-  </ul>
-  {% else %}
-  <br />
-  {% endif %}
-
-</div>

web/bundles/muzichcore/css/main.css

 
 li.element
 {
+  list-style: none outside none;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 5px;
 
 li.element a.favorite_link
 {
-  float: right;
+  position: relative;
+  top: 0px;
+  left: 455px;
 }
 
 li.element a.element_open
 {
-  float: right;
   font-weight: bold;
 }
 
   text-align: center;
 }
 
+li.element td.element_content
+{
+  vertical-align: top;
+  padding-left: 5px;
+}
+
+li.element span.element_name
+{
+  margin-left: -20px;
+}
+
+#container li.element span.element_name a
+{
+  color: black;
+}
+
 ul.elements li.even
 {
   background-color: #d9f7ff;

web/bundles/muzichcore/js/muzich.js

 
   // Affichage un/des embed
   $('a.element_embed_open_link').live("click", function(){
-     $(this).parent().parent('li.element').find('a.element_embed_open_link').hide();
-     $(this).parent().parent('li.element').find('a.element_embed_close_link').show();
-     $(this).parent().parent('li.element').find('div.element_embed').show();
+    
+     li = $(this).parent('td').parent('tr').parent().parent().parent('li.element');
+     
+     li.find('a.element_embed_close_link').show();
+     li.find('a.element_embed_open_link_text').hide();
+     li.find('div.element_embed').show();
+     
+     return false;
+  });
+  
+  $('a.element_name_embed_open_link').live("click", function(){
+    
+     li = $(this).parent('span').parent('td').parent('tr').parent().parent().parent('li.element');
+     
+     li.find('a.element_embed_close_link').show();
+     li.find('a.element_embed_open_link_text').hide();
+     li.find('div.element_embed').show();
+     
      return false;
   });
 
   // Fermeture du embed si demandé
   $('a.element_embed_close_link').live("click", function(){
-     $(this).parent().parent('li.element').find('a.element_embed_open_link').show();
-     $(this).parent().parent('li.element').find('a.element_embed_close_link').hide();
-     $(this).parent().parent('li.element').find('div.element_embed').hide();
+    
+     li = $(this).parent('td').parent('tr').parent().parent().parent('li.element');
+    
+     li.find('div.element_embed').hide();
+     li.find('a.element_embed_open_link_text').show();
+     $(this).hide();
+     
      return false;
   });
 
     cancelAnswer : "Non",
     onYes: function(link){
       
-      li = link.parent('li.element');
+      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
       li.find('img.element_loader').show();
       $.getJSON(link.attr('href'), function(response){
         if (response.status == 'success')
       return false;
     },
     onOpen: function(link){
-      li = link.parent('li.element');
+      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
       li.find('a.element_edit_link').addClass('mustBeDisplayed');
       li.find('a.element_remove_link').addClass('mustBeDisplayed');
     },
     onClose: function(link){
-      li = link.parent('li.element');
+      li = link.parent('td').parent('tr').parent().parent().parent('li.element');
       li.find('a.element_edit_link').removeClass('mustBeDisplayed');
       li.find('a.element_remove_link').removeClass('mustBeDisplayed');
       li.find('a.element_edit_link').hide();
   $('a.element_edit_link').live('click', function(){
     
     link = $(this);
-    li = link.parent('li.element');
+    li = link.parent('td').parent('tr').parent().parent().parent('li.element');
     // On garde en mémoire l'élément édité en cas d'annulation
     elements_edited[li.attr('id')] = li.html();
     div_loader = li.find('div.loader');