Evolution #375: Pages avec nuage de tags

app/Resources/translations/userui.fr.yml

@@ -64,6 +64,10 @@ tags:
     has_news_link:  cliquez ici pour les afficher
     has_news_link_one:  cliquez ici pour l'afficher
     has_news_link_more_x:  cliquez ici pour en afficher %x%
+  cloud:
+    display_more:           Des tags ont été cachés, cliquez ici pour les afficher tous
+    filter:
+      text:                 Chercher un tag parmis la liste
            
 filter:
   network: "Résultats de "

src/Muzich/CoreBundle/Resources/views/Tag/tagsList.favorite.html.twig

@@ -1,16 +1,28 @@
 {% if tags|length %}
+
+  <label for="cloud_tags_filter" >{{ 'tags.cloud.filter.text'|trans({}, 'userui') }}</label>
+  <input type="text" id="cloud_tags_filter" />
+
   <input type="hidden" id="get_elements_url" value="{{ path('favorite_get', {
     'user_id': user_id, 
     'tags_ids_json' : ''
   }) }}" />
   <ul id="favorite_tags">
     {% for tag in tags %}
-      <li>
+      <li {% if loop.index0 > cloud_tags_limit_to_display %}style="display: none;"{% endif %}>
         <a id="filtering_tag_{{ tag.id }}" href="#" class="button tag">
           {{ tag.name }}
         </a>
       </li>
     {% endfor %}
   </ul>
+  
+  {% if tags|length > cloud_tags_limit_to_display %}
+  <div style="clear: both;"></div>
+    <a href="#" id="display_all_cloud_tag" >
+      {{ 'tags.cloud.display_more'|trans({}, 'userui') }}
+    </a>
+  {% endif %}
+  
   <div class="clearboth" ></div>
 {% endif %}

web/bundles/muzichcore/css/main.css

@@ -1282,4 +1282,9 @@ li.element.shadows
    -moz-box-shadow: 3px 3px 3px #4F4F4F;
    -webkit-box-shadow: 3px 3px 3px #4F4F4F;
    box-shadow: 3px 3px 3px #4F4F4F;
+}
+
+ul#favorite_tags a.button.highlight
+{
+  color: blue;
 }

web/bundles/muzichcore/js/muzich.js

@@ -2224,4 +2224,33 @@ $(document).ready(function(){
     }
   });
 
+  /*
+   * Cloud tags
+   */
+  
+  $('a#display_all_cloud_tag').click(function(){
+    $('ul#favorite_tags li').show();
+    $(this).hide();
+  });
+  
+  $('input#cloud_tags_filter').keyup(function(){
+    var search_string = $(this).val();
+    
+    $('ul#favorite_tags li a').removeClass('highlight');
+    
+    if (search_string.length > 1)
+    {
+      $('ul#favorite_tags li a').each(function(){
+
+        if ($(this).text().toUpperCase().search(search_string.toUpperCase()) != -1)
+        {
+          $(this).addClass('highlight')
+        }
+
+      });
+    }
+    
+  });
+
+
 });