Evolution #90: Ajaxsification des actions: Suivre/ne plus suivre

app/Resources/translations/users.fr.yml

@@ -1,5 +1,9 @@
 
 user:
   follow:                       Suivre
+  following:                    Suivi
   notfollow:                    Ne plus suivre
-  view_favorites:               Voir les favoris
+  view_favorites:               Voir les favoris
+  stop_follow:                  Ne plus suivre
+  show:
+    title:                      Diffusions de %name%

src/Muzich/CoreBundle/Controller/CoreController.php

@@ -100,6 +100,7 @@ class CoreController extends Controller
       // L'utilisateur suis déjà, on doit détruire l'entité
       $em->remove($Follow);
       $em->flush();
+      $following = false;
     }
     // Sinon, c'est qu'il veut le suivre
     else
@@ -121,11 +122,15 @@ class CoreController extends Controller
       
       $em->persist($Follow);
       $em->flush();
+      $following = true;
     }
     
     if ($this->getRequest()->isXmlHttpRequest())
     {
-      
+      return $this->jsonResponse(array(
+        'status'    => 'success',
+        'following' => $following
+      ));
     }
     else
     {

src/Muzich/CoreBundle/Resources/views/layout.html.twig

@@ -23,6 +23,11 @@
   <script src="{{ asset('js/formdefault/jquery.formdefaults.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/jquery.form-2.14.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/jConfirmAction/jconfirmaction.jquery.js') }}" type="text/javascript"></script>
+  <script type="text/javascript">
+    string_follow_stop = "{{ 'user.stop_follow'|trans({}, 'users') }}";
+    string_follow_following = "{{ 'user.following'|trans({}, 'users') }}";
+    string_follow_follow = "{{ 'user.follow'|trans({}, 'users') }}";
+  </script>
   {% block js %}{% endblock %}
   
 </head>

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

@@ -4,24 +4,36 @@
 
 {% block content %}
 
-  <span class="follow_link following">
+  <!--<span class="follow_link following">
     
     <a href="{{ path('favorite_user_list', {'slug' : viewed_user.slug}) }}" >
       {{ 'user.view_favorites'|trans({}, 'users') }}
     </a>
     | 
+        
+    
+  </span>-->
+
+  <div class="show_options">
+    
+    <a class="button" href="{{ path('favorite_user_list', {'slug' : viewed_user.slug}) }}" >
+      {{ 'user.view_favorites'|trans({}, 'users') }}
+    </a>
+    
     <a href="{{ path('follow', { 'type': 'user', 'id': viewed_user.id, 'token': user.personalHash }) }}" 
-       class="follow_link {% if following %}following{% else %}notfollowing{% endif %}" >
+       class="follow_link button {% if following %}following{% else %}notfollowing{% endif %}" >
       {% if following %}
-        {{ 'user.notfollow'|trans({}, 'users') }}
+        {{ 'user.following'|trans({}, 'users') }}
       {% else %}
         {{ 'user.follow'|trans({}, 'users') }}
       {% endif %}
     </a>
     
-  </span>
+  </div>
+  
 
-  <h2>{{ viewed_user.name }}</h2>
+  <h2>{{ 'user.show.title'|trans({'%name%' : viewed_user.name}, 'users') }}</h2>
+  
   
   {% include "MuzichCoreBundle:SearchElement:default.html.twig" %}
     

web/bundles/muzichcore/css/main.css

@@ -32,6 +32,7 @@
 {
   margin-top: 5px;
   margin-bottom: 5px;
+  font-size: 1.7em;
   
   text-shadow: 1px 1px 2px #666;
 }
@@ -56,6 +57,7 @@
 	-webkit-border-radius: 5px;
 	-khtml-border-radius: 5px;
 	border-radius: 5px;
+  border: 1px solid #2b82ad;
 }
 input.button, button.button {
 	border: 0px none;
@@ -71,6 +73,11 @@ input.button, button.button {
   color: #00d0de;
 }
 
+#container a.button
+{
+  color: white;
+}
+
 #container a:hover
 {
   text-decoration: underline;
@@ -548,6 +555,7 @@ ul.tagbox input[type="text"]
 	-khtml-border-radius: 5px;
 	border-radius: 5px;
   background-color: #bdf1fe;
+  padding-left: 3px;
 }
 
 ul.tagbox li.input

web/bundles/muzichhome/css/home.css

@@ -1,8 +1,44 @@
 
+/*
+1328276321_add_small.png
+      1328276855_list-remove.png
+      1328276953_clean.png */
 
-#container .follow_link
+div.show_options
 {
   float: right;
+}
+
+#container .follow_link
+{
+  text-decoration: none;
+  width: 110px;
+  text-align: center;
+}
+
+#container a.following
+{
+  background: -moz-linear-gradient(top, #08ec00 0%, #10d400 39%, #0a9800 100%);
+  background: -webkit-linear-gradient(top, #08ec00 0%, #10d400 39%, #0a9800 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #08ec00), color-stop(0.39, #10d400), color-stop(1, #0a9800));
+  background: -o-linear-gradient(top, #08ec00 0%, #10d400 39%, #0a9800 100%);
+  background: -ms-linear-gradient(top, #08ec00 0%, #10d400 39%, #0a9800 100%);
+  background: linear-gradient(top, #08ec00 0%, #10d400 39%, #0a9800 100%);
+  
+  border: 1px solid #0a9800;
+  color: white;
+}
+
+#container a.following:hover
+{  
+  background: -moz-linear-gradient(top, #ff1e00 0%, #e50600 35%, #bf0a00 100%);
+  background: -webkit-linear-gradient(top, #ff1e00 0%, #e50600 35%, #bf0a00 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff1e00), color-stop(0.35, #e50600), color-stop(1, #bf0a00));
+  background: -o-linear-gradient(top, #ff1e00 0%, #e50600 35%, #bf0a00 100%);
+  background: -ms-linear-gradient(top, #ff1e00 0%, #e50600 35%, #bf0a00 100%);
+  background: linear-gradient(top, #ff1e00 0%, #e50600 35%, #bf0a00 100%);
+
+  border: 1px solid #bf0a00;
   text-decoration: none;
 }
 

web/bundles/muzichhome/js/home.js

@@ -16,4 +16,41 @@ $(document).ready(function(){
      return false;
    }); 
    
+   // Bouton suivre
+   $('div.show_options a.following').live({
+    mouseenter:
+      function()
+      {
+        $(this).html(string_follow_stop);
+      },
+    mouseleave:
+      function()
+      {
+       $(this).html(string_follow_following);
+      }
+    }
+  );
+    
+  $('div.show_options a.follow_link').live('click', function(){
+    link = $(this);
+    $.getJSON(link.attr('href'), function(response) {
+       if (response.status == 'success')
+       {
+         if (response.following)
+         {
+           link.html(string_follow_following);
+           link.removeClass('notfollowing');
+           link.addClass('following');
+         }
+         else
+         {
+           link.html(string_follow_follow);
+           link.addClass('notfollowing');
+           link.removeClass('following');
+         }
+       }
+     });
+     return false;
+  });
+   
  });