Evolution #122: Tags ajouté par l'utilisateurs: nouvelle approche

app/Resources/translations/userui.fr.yml

@@ -34,6 +34,13 @@ tags:
   search:
     message_found:  "Tags correspondant à \"%string%\":"
     display_more:   Afficher les autres résultats
+  add:
+    title:          Ajouter un nouveau tag
+    text:           Ce tag n'est pas encore connu de Muzi.ch, mais vous pouvez proposer son ajout. Cependant sa validation sera soumise a l'équipe de modération du site.
+    argument:       "Vous pouvez argumenter votre demande:"
+    inputs:
+      cancel:       Annuler
+      submit:       Faire la demande
            
 filter:
   network: "Résultats de "

src/Muzich/AdminBundle/Resources/views/Moderate/tags.html.twig

@@ -33,6 +33,10 @@
             
         </form>
           
+        <p>
+          {{ tag.arguments }}
+        </p>
+          
       </li>
     {% endfor %}
   </ul>

src/Muzich/CoreBundle/Controller/CoreController.php

@@ -354,7 +354,7 @@ class CoreController extends Controller
   /**
    * Ajout d'un tag en base.
    */
-  public function addTagAction($name)
+  public function addTagAction($name, $arguments = null)
   {
     if ($this->getUser() == 'anon.')
     {
@@ -404,6 +404,7 @@ class CoreController extends Controller
         $privatesids[] = (string)$this->getUserId();
       }
       $tag->setPrivateids(json_encode($privatesids));
+      $tag->setArguments($tag->getArguments(). " ****" . $this->getUser()->getName()."****: " .$arguments);
       
       $this->getDoctrine()->getEntityManager()->persist($tag);
       $this->getDoctrine()->getEntityManager()->flush();
@@ -421,6 +422,7 @@ class CoreController extends Controller
       $tag->setName(ucfirst(strtolower($name)));
       $tag->setTomoderate(true);
       $tag->setPrivateids(json_encode(array((string)$this->getUserId())));
+      $tag->setArguments(" ****" . $this->getUser()->getName()."****: " .$arguments);
       
       $this->getDoctrine()->getEntityManager()->persist($tag);
       $this->getDoctrine()->getEntityManager()->flush();

src/Muzich/CoreBundle/Entity/Tag.php

@@ -86,7 +86,16 @@ class Tag
    * @ORM\Column(type="text", nullable=true)
    * @var type string
    */
-  protected $privateids = "";
+  protected $privateids;
+  
+  /**
+   * Lorsque le tag est a modérer on stocke ici les argumentations pour 
+   * l'ajout du tag.
+   * 
+   * @ORM\Column(type="text", nullable=true)
+   * @var type string
+   */
+  protected $arguments;
   
   /**
    * 
@@ -221,4 +230,15 @@ class Tag
   {
     return $this->privateids;
   }
+  
+  public function getArguments()
+  {
+    return $this->arguments;
+  }
+  
+  public function setArguments($arguments)
+  {
+    $this->arguments = $arguments;
+  }
+  
 }

src/Muzich/CoreBundle/Resources/config/routing.yml

@@ -48,6 +48,10 @@ ajax_add_tag:
   pattern: /ajax/add-tag/{name}
   defaults: { _controller: MuzichCoreBundle:Core:addTag, name: null }
   
+ajax_add_tag_arguments:
+  pattern: /ajax/add-tag/{name}/{arguments}
+  defaults: { _controller: MuzichCoreBundle:Core:addTag, name: null, arguments: null }
+  
 
 ####
 

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

@@ -28,6 +28,11 @@
     string_follow_following = "{{ 'user.following'|trans({}, 'users') }}";
     string_follow_follow = "{{ 'user.follow'|trans({}, 'users') }}";
     string_tag_prompt_input_help = "{{ 'tags.inputtext.help'|trans({}, 'userui') }}";
+    string_tag_add_title = "{{ 'tags.add.title'|trans({}, 'userui') }}";
+    string_tag_add_text = "{{ 'tags.add.text'|trans({}, 'userui') }}";
+    string_tag_add_argument = "{{ 'tags.add.argument'|trans({}, 'userui') }}";
+    string_tag_add_inputs_cancel = "{{ 'tags.add.inputs.cancel'|trans({}, 'userui') }}";
+    string_tag_add_inputs_submit = "{{ 'tags.add.inputs.submit'|trans({}, 'userui') }}";
     
     url_index = "{{ path('index') }}";
     url_search_tag = "{{ path('search_tag') }}";

web/bundles/muzichcore/css/main.css

@@ -822,4 +822,89 @@ ul#favorite_tags li
 a.more
 {
   margin-top: 5px;
-}
+}
+
+
+
+/*  POPIN BLOCK  */
+
+
+#fade { /*--Masque opaque noir de fond--*/
+	display: none; /*--masqué par défaut--*/
+	background: #000;
+	position: fixed; left: 0; top: 0;
+	width: 100%; height: 100%;
+	opacity: .80;
+	z-index: 9999;
+}
+.popin_block{
+	background: #fff;
+	padding: 10px;
+	border: 10px solid #ddd;
+	float: left;
+	font-size: 1.2em;
+	position: fixed;
+	top: 50%; left: 50%;
+	z-index: 99999;
+	/*--Les différentes définitions de Box Shadow en CSS3--*/
+	-webkit-box-shadow: 0px 0px 20px #000;
+	-moz-box-shadow: 0px 0px 20px #000;
+	box-shadow: 0px 0px 20px #000;
+	/*--Coins arrondis en CSS3--*/
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.popin_block h2
+{
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.popin_block p
+{
+  margin-top: 5px;
+  margin-bottom: 2px;
+}
+
+.popin_block div.tag
+{
+  text-align: center;
+}
+
+.popin_block div.inputs
+{
+  text-align: center;
+}
+
+.popin_block div.tag ul
+{
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.popin_block div.inputs input
+{
+  margin: 3px;
+}
+
+.popin_block textarea
+{
+  width: 100%;
+  height: 60px;
+}
+
+img.btn_close {
+	float: right;
+	margin: -55px -55px 0 0;
+}
+/*--Gérer la position fixed pour IE6--*/
+* html #fade {
+position: absolute;
+}
+* html .popup_block {
+position: absolute;
+}

web/bundles/muzichcore/js/muzich.js

@@ -787,41 +787,109 @@ $(document).ready(function(){
             // Si le tag ne semble pas connu en base
             if (!data.same_found)
             {
+              // Cette variable nous permettra de stocker le lien nouveau tag
+              link_add_tag = null;
+              
               li_tag = 
-                $('<li>').append(
+                $('<li>').addClass('new').append(
                   $('<a>').attr('href','#new#'+$.trim(input.val()))
                   // qui réagit quand on clique dessus
                   .click(function(e){
-                    // On récupère le nom du tag
-                    name = $(this).attr('href').substr(1,$(this).attr('href').length);
-                    name = name.substr(strpos(name, '#')+1, name.length);
                     
-                    $(this).parent('li').parent('ul').parent('div').find('img.tag_loader').show();
+                    // Effet fade-in du fond opaque
+                    $('body').append($('<div>').attr('id', 'fade')); 
+                    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
+                    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
+                    
+                    // On met le lien cliqué dans la variabke prévu
+                    link_add_tag = $(this);
+                    
+                    // En premier lieux on fait apparaître la fenêtre de confirmation
+                    popup = $('<div>')
+                    .attr('id', 'add_tag')
+                    .addClass('popin_block')
+                    .css('width', '400px')
+                      //.append($('<h2>').append(string_tag_add_title))
+                      .append($('<div>').addClass('tag')
+                        .append($('<ul>')
+                          .append($('<li>').addClass('button')
+                            .append($(this).text()))))
+                      .append($('<p>').append(string_tag_add_text))
+                      .append($('<p>').append(string_tag_add_argument))
+                      .append($('<textarea>').attr('name', 'argument'))
+                      .append($('<div>').addClass('inputs')
+                        .append($('<input>')
+                          .attr('type', 'button')
+                          .attr('value', string_tag_add_inputs_cancel)
+                          .addClass('button')
+                          .click(function(){
+                            $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+                            $('#add_tag').remove();
+                            
+                            return false;
+                          })
+                        )
+                        .append($('<input>')
+                          .attr('type', 'button')
+                          .attr('value', string_tag_add_inputs_submit)
+                          .addClass('button')
+                          .click(function(){
+                            
+                            var arguments = $('#add_tag textarea').val();
+                            
+                            $('#fade').fadeOut(400, function(){$('#fade').remove();});
+                            $('#add_tag').remove();
+                            
+                            // On récupère le nom du tag
+                            name = link_add_tag.attr('href').substr(1,link_add_tag.attr('href').length);
+                            name = name.substr(strpos(name, '#')+1, name.length);
 
-                    // La on fait l'ajout en base en tant que nouveau tag
-                    $.getJSON(url_add_tag+'/'+name, function(response){
-      
-                      if (response.status == 'mustbeconnected')
-                      {
-                        $(location).attr('href', url_index);
-                      }
-                      
-                      tag_id   = response.tag_id;
-                      tag_name = response.tag_name;
-                      
-                      $('input#tags_selected_tag_'+form_name).val(tag_id);
-                      inputTag.val(tag_name);
-                      // Et on execute l'évènement selectTag de l'input
-                      inputTag.trigger("selectTag");
-                      // On cache la liste puisque le choix vient d'être fait
-                      divtags.hide();
-                      inputTag.val(tag_text_help); 
-                      
-                      $(this).parent('li').parent('ul').parent('div').find('img.tag_loader').hide();
-                    });
+                            link_add_tag.parent('li').parent('ul').parent('div').find('img.tag_loader').show();
 
+                            // La on fait l'ajout en base en tant que nouveau tag
+                            $.getJSON(url_add_tag+'/'+name+'/'+arguments, function(response){
+
+                              if (response.status == 'mustbeconnected')
+                              {
+                                $(location).attr('href', url_index);
+                              }
+
+                              tag_id   = response.tag_id;
+                              tag_name = response.tag_name;
+
+                              $('input#tags_selected_tag_'+form_name).val(tag_id);
+                              inputTag.val(tag_name);
+                              // Et on execute l'évènement selectTag de l'input
+                              inputTag.trigger("selectTag");
+                              // On cache la liste puisque le choix vient d'être fait
+                              divtags.hide();
+                              inputTag.val(tag_text_help); 
+
+                              link_add_tag.parent('li').parent('ul').parent('div').find('img.tag_loader').hide();
+                            });
+                            
+                            return false;
+                          })
+                        )
+                      )
+                    ;
+                    
+                    // Il faut ajouter le popup au dom avant de le positionner en css
+                    // Sinon la valeur height n'est pas encore calculable
+                    $('body').prepend(popup);
+                    
+                    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
+                    var popMargTop = (popup.height() + 50) / 2;
+                    var popMargLeft = (popup.width() + 50) / 2;
+                    
+                    //On affecte le margin
+                    $(popup).css({
+                      'margin-top' : -popMargTop,
+                      'margin-left' : -popMargLeft
+                    });
                     
                     return false;
+                    
                   })
                   .append($.trim(input.val()))
               );