Evolution #566: Gestion de l'avatar

.gitignore

@@ -10,3 +10,5 @@ nbproject
 .debug
 .scripts
 muzich.komodoproject
+web/files/avatars/*
+web/cache/*

app/AppKernel.php

@@ -24,6 +24,7 @@ class AppKernel extends Kernel
             new Sonata\BluePrintBundle\SonataBluePrintBundle(),
             new Sonata\AdminBundle\SonataAdminBundle(),
             new Knp\Bundle\MenuBundle\KnpMenuBundle(),
+            new Gregwar\ImageBundle\GregwarImageBundle(),
             new Muzich\CoreBundle\MuzichCoreBundle(),
             new Muzich\UserBundle\MuzichUserBundle(),
             new Muzich\IndexBundle\MuzichIndexBundle(),

app/Resources/translations/userui.fr.yml

@@ -53,6 +53,12 @@ my_account:
         nocountry:  Veuillez saisir le pays
   help_clicks:      |
                     Cliquez sur les titres ci-dessous pour accèder aux autres paramètres
+  avatar:
+    title:          Mon avatar
+    submit:         Mettre à jour
+    help:           'Choisissez une image puis préssez le bouton "Mettre à jour"'
+    success:        Votre avatar a bien été mis à jour
+    error:          Une erreur est survenue lors de la mise à jour de votre avatar
   
 connexion:
   password_lost:    Mot de passe perdu ?

app/autoload.php

@@ -15,7 +15,7 @@ $loader->registerNamespaces(array(
     'Assetic'          => __DIR__.'/../vendor/assetic/src',
     'Metadata'         => __DIR__.'/../vendor/metadata/src',
     'FOS'              => __DIR__.'/../vendor/bundles',
-    //'Muzich'           => __DIR__.'/../vendor/src',
+    'Gregwar'          => __DIR__.'/../vendor/bundles',
     'Doctrine\\Common\\DataFixtures' => __DIR__.'/../vendor/doctrine-fixtures/lib',
     'Doctrine\\Common' => __DIR__.'/../vendor/doctrine-common/lib',
     'Stof'  => __DIR__.'/../vendor/bundles',

src/Muzich/CoreBundle/Entity/User.php

@@ -216,6 +216,16 @@ class User extends BaseUser
   private $tags_favorites_quick;
   
   /**
+   * @Assert\Image(maxSize="6000000")
+   */
+  public $avatar;
+    
+  /**
+   * @ORM\Column(type="text", length=255, nullable=true)
+   */
+  public $avatar_path;
+  
+  /**
    * 
    */
   public function __construct()
@@ -917,4 +927,63 @@ class User extends BaseUser
     $this->setDatas($datas);
   }
   
+  public function getAvatarAbsolutePath()
+  {
+    return null === $this->avatar_path
+      ? null
+      : $this->getAvatarUploadRootDir().'/'.$this->avatar_path;
+  }
+
+  public function getAvatarWebPath()
+  {
+    return null === $this->avatar_path
+      ? null
+      : $this->getAvatarUploadDir().'/'.$this->avatar_path;
+  }
+
+  protected function getAvatarUploadRootDir()
+  {
+    return __DIR__.'/../../../../web/'.$this->getAvatarUploadDir();
+  }
+
+  protected function getAvatarUploadDir()
+  {
+    return 'files/avatars';
+  }
+    
+   /**
+    * @ORM\PrePersist()
+    * @ORM\PreUpdate()
+    */
+   public function preUploadAvatar()
+   {
+      if (null !== $this->avatar) {
+         $this->avatar_path = $this->getPersonalHash($this->avatar->getClientOriginalName()).'.'.$this->avatar->guessExtension();
+      }
+   }
+   
+  /**
+   * @ORM\PostPersist()
+   * @ORM\PostUpdate()
+   */
+  public function uploadAvatar()
+  {
+    if (null === $this->avatar) {
+      return;
+    }
+    
+    $this->avatar->move($this->getAvatarUploadRootDir(), $this->avatar_path);
+    $this->avatar = null;
+  }
+  
+  /**
+   * @ORM\PostRemove()
+   */
+  public function removeUpload()
+  {
+    if ($file = $this->getAvatarAbsolutePath()) {
+      unlink($file);
+    }
+  }
+  
 }

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

@@ -37,6 +37,13 @@
     {% endif %}
     
     <div class="reputation">
+      
+      {% if viewed_user.avatar_path %}
+        <img alt="avatar" src="{{ image(viewed_user.avatarWebPath).resize(48,50,'#000000') }}" />
+      {% else %}
+        <img alt="default_avatar" src="{{ asset('/img/1360770994_user_48_50.png') }}" />
+      {% endif %}
+      
       {{ 'user.reputation.name'|trans({}, 'users') }}: 
       <span class="score">{{ viewed_user.reputation }}</span>
       {{ 'user.reputation.txt'|trans({}, 'users') }}

src/Muzich/UserBundle/Controller/UserController.php

@@ -10,6 +10,7 @@ use FOS\UserBundle\Model\UserInterface;
 use Muzich\CoreBundle\Form\Tag\TagFavoritesForm;
 use Symfony\Component\Validator\Constraints\Email;
 use Symfony\Component\Validator\Constraints\Collection;
+use Symfony\Component\HttpFoundation\Request;
 
 class UserController extends Controller
 {
@@ -88,10 +89,19 @@ class UserController extends Controller
       'form_tags_favorites'      => $form_tags_favorites->createView(),
       'form_tags_favorites_name' => $form_tags_favorites->getName(),
       'favorite_tags_id'         => $this->getTagsFavorites(),
-      'change_email_form'        => $change_email_form->createView()
+      'change_email_form'        => $change_email_form->createView(),
+      'avatar_form'              => $this->getAvatarForm()->createView()
     );
   }
   
+  protected function getAvatarForm()
+  {
+    return $this->createFormBuilder($this->getUser())
+      ->add('avatar')
+      ->getForm()
+    ;
+  }
+  
   /**
    * Un bug étrange empêche la mise ne place de contraintes sur le formulaire
    * d'inscription. On effectue alors les vérifications ici.
@@ -572,5 +582,27 @@ class UserController extends Controller
       'status' => 'success'
     ));
   }
+  
+  public function updateAvatarAction(Request $request)
+  {
+    $form = $this->getAvatarForm();
+    $form->bindRequest($request);
+    
+    if ($form->isValid()) {
+      $em = $this->getEntityManager();
+      $form->getData()->preUploadAvatar();
+      $form->getData()->uploadAvatar();
+      $em->persist($form->getData());
+      $em->flush();
+
+      $this->setFlash('success',
+        $this->trans('my_account.avatar.success', array(), 'userui'));
+      return $this->redirect($this->generateUrl('my_account'));
+    }
     
+    $this->setFlash('error',
+      $this->trans('my_account.avatar.error', array(), 'userui'));
+    return $this->redirect($this->generateUrl('my_account'));
+  }
+  
 }

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

@@ -44,3 +44,9 @@ event_delete:
   requirements:
     _method:  GET
     message_id: \d+
+  
+user_update_avatar:
+  pattern:  /account/update-avatar
+  defaults: { _controller: MuzichUserBundle:User:updateAvatar }
+  requirements:
+    _method:  POST

src/Muzich/UserBundle/Resources/views/Info/bar.html.twig

@@ -1,7 +1,11 @@
 
 <div class="user_score">
   <div class="user_avatar">
-    <img src="{{ asset('/img/avatar_test.png') }}" />
+    {% if app.user.avatar_path %}
+      <img alt="avatar" src="{{ image(app.user.avatarWebPath).resize(130,137,'#000000') }}" />
+    {% else %}
+      <img alt="default_avatar" src="{{ asset('/img/1360770994_user.png') }}" />
+    {% endif %}
   </div>
   <div class="score blackgradiant">
     {{ app.user.reputation }}

src/Muzich/UserBundle/Resources/views/User/account.html.twig

@@ -83,5 +83,24 @@
     </div>
     <div style="clear:both;"></div>
   
+    <h2 data-open="myaccount_avatar">{{ 'my_account.avatar.title'|trans({}, 'userui') }}</h2>
+  
+    <div id="myaccount_avatar" class="myaccount_part"
+       style="display: none;"
+    >
+      <form
+          action="{{ path('user_update_avatar') }}"
+          method="post" {{ form_enctype(avatar_form) }}
+        >
+        
+          <p class="help">{{ 'my_account.avatar.help'|trans({}, 'userui') }}</p>
+          {% include "MuzichUserBundle:User:avatar_form.html.twig" with { 
+            'form': avatar_form
+          } %}
+      
+          <input type="submit" class="button" value="{{ 'my_account.avatar.submit'|trans({}, 'userui') }}" />
+      </form>
+    </div>
+    
   </div>
 {% endblock %}

src/Muzich/UserBundle/Resources/views/User/avatar_form.html.twig

@@ -0,0 +1,9 @@
+{% form_theme form 'MuzichCoreBundle:Form:errors.html.twig' %}
+
+{{ form_errors(form) }}
+    
+  {{ form_errors(form.avatar) }}
+  {{ form_label(form.avatar, '') }}
+  {{ form_widget(form.avatar, {'attr':{'class':'niceinput'}}) }}
+
+{{ form_rest(form) }}

vendor/bundles/Gregwar/ImageBundle/DependencyInjection/GregwarImageExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Gregwar\ImageBundle\DependencyInjection;
+
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
+use Symfony\Component\Config\FileLocator;
+
+/**
+ * Loading configuration
+ *
+ * @author Gregwar <g.passault@gmail.com>
+ */
+class GregwarImageExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $cacheDir = 'cache';
+
+        $config = array();
+        foreach ($configs as $subConfig) {
+            $config = array_merge($config, $subConfig);
+        }
+
+        if (isset($config['cache_dir']))
+            $cacheDir = $config['cache_dir'];
+
+        $container->setParameter('gregwar_image.cache_dir', $cacheDir);
+
+        $loader = new YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
+        $loader->load('services.yml');
+    }
+}
+

vendor/bundles/Gregwar/ImageBundle/Extensions/ImageTwig.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Gregwar\ImageBundle\Extensions;
+
+use Symfony\Component\Templating\EngineInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+use Symfony\Component\Form\FormView;
+
+/**
+ * ImageTwig extension
+ *
+ * @author Gregwar <g.passault@gmail.com>
+ * @author bzikarsky <benjamin.zikarsky@perbility.de>
+ */
+class ImageTwig extends \Twig_Extension
+{
+    private $container;
+    private $environment;
+
+    public function __construct(ContainerInterface $container)
+    {
+        $this->container = $container;
+    }
+    
+    public function initRuntime(\Twig_Environment $environment)
+    {
+        $this->environment = $environment;
+    }
+
+    public function getFunctions()
+    {
+        return array(
+            'image' => new \Twig_Function_Method($this, 'image', array('is_safe' => array('html'))),
+            'new_image' => new \Twig_Function_Method($this, 'newImage', array('is_safe' => array('html')))
+        );
+    }
+
+    public function image($path)
+    {
+        return $this->container->get('image.handling')->open($path);
+    }
+    
+    public function newImage($width, $height)
+    {
+        return $this->container->get('image.handling')->create($width, $height);
+    }
+
+    public function getName()
+    {
+        return 'image';
+    }
+}
+

vendor/bundles/Gregwar/ImageBundle/GregwarImageBundle.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Gregwar\ImageBundle;
+
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+class GregwarImageBundle extends Bundle
+{
+}

vendor/bundles/Gregwar/ImageBundle/ImageColor.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace Gregwar\ImageBundle;
+
+/**
+ * Color manipulation class
+ */
+class ImageColor
+{
+    private static $colors = array(
+        'black'     =>  0x000000,
+        'silver'    =>  0xc0c0c0,
+        'gray'      =>  0x808080,
+        'teal'      =>  0x008080,
+        'aqua'      =>  0x00ffff,
+        'blue'      =>  0x0000ff,
+        'navy'      =>  0x000080,
+        'green'     =>  0x008000,
+        'lime'      =>  0x00ff00,
+        'white'     =>  0xffffff,
+        'fuschia'   =>  0xff00ff,
+        'purple'    =>  0x800080,
+        'olive'     =>  0x808000,
+        'yellow'    =>  0xffff00,
+        'orange'    =>  0xffA500,
+        'red'       =>  0xff0000,
+        'maroon'    =>  0x800000,
+        'transparent' => 0x7fffffff
+    );
+
+    public static function parse($color)
+    {
+        // Direct color representation (ex: 0xff0000)
+        if (!is_string($color) && is_numeric($color))
+            return $color;
+
+        // Color name (ex: "red")
+        if (isset(self::$colors[$color]))
+            return self::$colors[$color];
+
+        if (is_string($color)) {
+            $color_string = str_replace(' ', '', $color);
+
+            // Color string (ex: "ff0000", "#ff0000" or "0xfff")
+            if (preg_match('/^(#|0x|)([0-9a-f]{3,6})/i', $color_string, $matches)) {
+                $col = $matches[2];
+
+                if (strlen($col) == 6)
+                    return hexdec($col);
+
+                if (strlen($col) == 3) {
+                    $r = '';
+                    for ($i=0; $i<3; $i++)
+                        $r.= $col[$i].$col[$i];
+                    return hexdec($r);
+                }
+            }
+            
+            // Colors like "rgb(255, 0, 0)"
+            if (preg_match('/^rgb\(([0-9]+),([0-9]+),([0-9]+)\)/i', $color_string, $matches)) {
+                $r = $matches[1];
+                $g = $matches[2];
+                $b = $matches[3];
+                if ($r>=0 && $r<=0xff && $g>=0 && $g<=0xff && $b>=0 && $b<=0xff) {
+                    return ($r << 16) | ($g << 8) | ($b);
+                }
+            }
+        }
+
+        throw new \InvalidArgumentException('Invalid color: '.$color);
+    }
+}

vendor/bundles/Gregwar/ImageBundle/ImageHandler.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Gregwar\ImageBundle;
+
+use Gregwar\ImageBundle\Image;
+
+/**
+ * Image manipulation class
+ *
+ * @author Gregwar <g.passault@gmail.com>
+ */
+class ImageHandler extends Image 
+{
+    protected $fileCallback = null;
+
+    /**
+     * Defines the callback to call to compute the new filename
+     */
+    public function setFileCallback($file)
+    {
+        $this->fileCallback = $file;
+    }
+
+    /**
+     * When processing the filename, call the callback
+     */
+    protected function getFilename($filename)
+    {
+        $callback = $this->fileCallback;
+
+        if (null === $callback)
+            return $filename;
+
+        return $callback($filename);
+    }
+}
+

vendor/bundles/Gregwar/ImageBundle/README.md

@@ -0,0 +1,146 @@
+Gregwar's ImageBundle
+=====================
+
+`GregwarImageBundle` provides easy Image manipulation and API for Symfony2 and Twig
+
+Installation
+============
+
+### Step 1: Download the GregwarImageBundle
+
+***Using the vendors script***
+
+Add the following lines to your `deps` file:
+
+```
+    [GregwarImageBundle]
+        git=http://github.com/Gregwar/ImageBundle.git
+        target=/bundles/Gregwar/ImageBundle
+```
+
+Now, run the vendors script to download the bundle:
+
+``` bash
+$ php bin/vendors install
+```
+
+***Using submodules***
+
+If you prefer instead to use git submodules, then run the following:
+
+``` bash
+$ git submodule add git://github.com/Gregwar/ImageBundle.git vendor/bundles/Gregwar/ImageBundle
+$ git submodule update --init
+```
+
+***Using Composer***
+
+Add the following to the "require" section of your `composer.json` file:
+
+```
+    "gregwar/image-bundle": "dev-master"
+```
+
+You can also choose a version number, (tag, commit ...)
+
+And update your dependencies
+
+```
+    php composer.phar update
+```
+
+### Step 2: Configure the Autoloader
+
+If you use composer, you can skip this step.
+
+Add it to your `autoload.pp` :
+
+```php
+<?php
+...
+'Gregwar' => __DIR__.'/../vendor/bundles',
+```
+
+### Step 3: Enable the bundle
+
+Registers the bundle in your `app/AppKernel.php`:
+
+```php
+<?php
+...
+public function registerBundles()
+{
+    $bundles = array(
+        ...
+        new Gregwar\ImageBundle\GregwarImageBundle(),
+        ...
+    );
+...
+```
+
+### Step 4: Configure the bundle and set up the directories
+
+Adds the following configuration to your `app/config/config.yml`:
+
+    gregwar_image: ~
+
+If you want to customize the cache directory name, you can specify it:
+
+    gregwar_image:
+        cache_dir:  my_cache_dir
+
+Creates the cache directory and change the permissions so the web server can write 
+in it:
+
+    mkdir web/cache
+    chmod 777 web/cache
+
+Usage
+=====
+
+Basics
+------
+
+This bundle is based on the [Gregwar's Image](http://github.com/Gregwar/Image) class and
+provides simple but powerful Twig extension. You can for instance use it this way:
+
+    <img src="{{ image('linux.jpg').resize(100,100).negate }}" />
+
+And that's all ! The helper will automatically create the cached file on-the-fly if it 
+doesn't exists yet.
+
+The available methods are the same as the [Gregwar's Image](http://github.com/Gregwar/Image).
+
+Using Image API
+---------------
+
+The image instance provides also a simple API, you can call some methods to get informations
+about the handled image:
+
+    Image width: {{ image('linux.jpg').width }}px
+
+Manipulating Image in Controllers
+---------------------------------
+
+The Image Handler is accessible via a service called image.handling. So you can do in your
+controllers:
+
+```php
+<?php
+...
+$this->get('image.handling')->open('linux.jpg')
+    ->grayscale()
+    ->rotate(12)
+    ->save('out.jpg')
+```
+
+Requirements
+============
+
+`GregwarImageBundle` needs [GD](http://php.net/gd)
+and [exif](http://php.net/exif) extension for PHP to be installed on the web server
+
+License
+=======
+
+This bundle is under MIT license

vendor/bundles/Gregwar/ImageBundle/Resources/config/services.yml

@@ -0,0 +1,18 @@
+
+parameters:
+    image.handling.class: Gregwar\ImageBundle\Services\ImageHandling
+    image.handler.class: Gregwar\ImageBundle\ImageHandler
+
+services:
+    # Image handling factory
+    image.handling:
+        class: %image.handling.class%
+        arguments: [%gregwar_image.cache_dir%, %image.handler.class%, @service_container]
+
+    # Helper Twig
+    twig.extension.image:
+        class: Gregwar\ImageBundle\Extensions\ImageTwig
+        arguments: [@service_container]
+        tags:
+            - { name: twig.extension }
+

vendor/bundles/Gregwar/ImageBundle/Services/ImageHandling.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace Gregwar\ImageBundle\Services;
+
+use Gregwar\ImageBundle\ImageHandler;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Image manipulation service
+ *
+ * @author Gregwar <g.passault@gmail.com>
+ */
+class ImageHandling
+{
+    private $cache_dir;
+    private $container;
+    private $handler_class;
+
+    public function __construct($cache_dir, $handler_class, ContainerInterface $container)
+    {
+        $this->cache_dir = $cache_dir;
+        $this->handler_class = $handler_class;
+        $this->container = $container;
+    }
+
+    /**
+     * Get a manipulable image instance
+     *
+     * @param string $file the image path
+     *
+     * @return object a manipulable image instance
+     */
+    public function open($file)
+    {
+        return $this->createInstance($file);
+    }
+
+    /**
+     * Get a new image
+     *
+     * @param $w the width
+     * @param $h the height
+     *
+     * @return object a manipulable image instance
+     */
+    public function create($w, $h)
+    {
+        return $this->createInstance(null, $w, $h);
+    }
+
+    /**
+     * Creates an instance defining the cache directory
+     */
+    private function createInstance($file, $w = null, $h = null)
+    {
+        $asset = $this->container->get('templating.helper.assets');
+
+        $handler_class = $this->handler_class;
+        $image = new $handler_class($file, $w, $h);
+
+        $image->setCacheDir($this->cache_dir);
+
+        $image->setFileCallback(function($file) use ($asset) {
+            return $asset->getUrl($file);
+        });
+
+        return $image;
+    }
+}

vendor/bundles/Gregwar/ImageBundle/composer.json

@@ -0,0 +1,25 @@
+{
+    "name": "gregwar/image-bundle",
+    "type": "symfony-bundle",
+    "description": "Image handling bundle",
+    "keywords": ["symfony2", "image"],
+    "homepage": "https://github.com/Gregwar/ImageBundle",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Grégoire Passault",
+            "email": "g.passault@gmail.com",
+            "homepage": "http://www.gregwar.com/"
+        }
+    ],
+    "require": {
+        "php": ">=5.3.0",
+        "ext-gd": "*"
+    },
+    "autoload": {
+        "psr-0": {
+            "Gregwar\\ImageBundle": ""
+        }
+    },
+    "target-dir": "Gregwar/ImageBundle"
+}

web/bundles/muzichcore/css/old.css

@@ -1161,7 +1161,6 @@ li.element td.right span.score
 
 div.reputation
 {
-  padding-left: 15px;
   font-size: 110%;
 }
 

web/css/main.css

@@ -609,8 +609,8 @@ div.user_score div.score
   font-size: 18px;
   padding-top: 5px;
   margin-bottom: 4px;
-  margin-left: 4px;
-  margin-right: 4px;
+  margin-left: 3px;
+  margin-right: 5px;
 }
 
 ul.user_events_infos
@@ -1642,4 +1642,17 @@ div.element_embed div.jp-playlist ul
   text-align: left;
 }
 
-.placeholder { color:#999; }
+.placeholder { color:#999; }
+
+div.reputation img
+{
+  float: left;
+  margin: 4px;
+  margin-right: 8px;
+  margin-top: 8px;
+}
+
+p.show_info
+{
+  margin-top: 0px;
+}