Merge pull request #3241 from sandhose/snow

Ajout de neige pour Noël

assets/js/snow.js

@@ -0,0 +1,118 @@
+var LetItSnow = function(element) {
+    this._parent = element;
+
+    this._canvas = document.createElement("canvas");
+    this.resize();
+
+    this._canvas.style.zIndex = -1;
+    this._canvas.style.position = "absolute";
+    this._canvas.style.top = this._canvas.style.left = this._canvas.style.right = this._canvas.style.bottom = 0;
+
+    this._canvas.style.background = window
+        .getComputedStyle(this._parent)
+        .getPropertyValue("background-color");
+    this._parent.style.background = "transparent";
+
+    // Append the canvas...
+    if(this._parent.children.length > 0) { // As first element if there is other children
+        this._parent.insertBefore(this._canvas, this._parent.children[0]);
+    }
+    else {
+        this._parent.appendChild(this._canvas);
+    }
+
+    this._ctx = this._canvas.getContext("2d");
+
+    this.setup();
+};
+
+LetItSnow.prototype = {
+    PARTICLES_COLOR: "rgba(255, 255, 255, 0.8)", // Color
+    MAX_PARTICLES: 25, // Particles limits
+    SPAWN_RATE: 100, // time (ms) between two particles spawns
+    PARTICLES_SPEED: 15, // Base speed
+    PARTICLES_SIZE: 2, // Base size
+    TURBULENCES_X: 1, // Turbulences amount (X)
+    TURBULENCES_Y: 0.5, // Turbulences amount (Y)
+    TURBULENCES_SPEED: 1, // Turbulences speed
+    MAX_TIMESHIFT: Math.PI / 3, // Max time shifting (turbulences) between two particles
+
+    setup: function() {
+        this.particles = [];
+        this._lastSpawn = this._lastLoop = Date.now();
+        this.loop();
+
+        window.addEventListener("resize", this.resize.bind(this));
+    },
+
+    resize: function() {
+        var rect = this._parent.getBoundingClientRect();
+
+        this.H = rect.height;
+        this.W = rect.width;
+
+        this._canvas.height = this.H;
+        this._canvas.width = this.W;
+    },
+
+    spawnParticle: function() {
+        this.particles.push({
+            x: Math.random() * this.W,
+            y: - this.PARTICLES_SIZE,
+            d: Math.random() + 1, // Density (affects speed and size)
+            s: Math.random() * this.MAX_TIMESHIFT // Time shift
+        });
+    },
+
+    loop: function() {
+        this.update();
+        this.draw();
+
+        requestAnimationFrame(this.loop.bind(this));
+    },
+
+    update: function() {
+        var p, now = Date.now(), delta = now - this._lastLoop;
+        for(var i in this.particles) {
+            p = this.particles[i];
+            p.y += (delta / 1000) * (this.PARTICLES_SPEED * p.d * (1.5 + Math.sin(now * this.TURBULENCES_SPEED / 1000 + p.s) * this.TURBULENCES_Y));
+            p.x += (delta / 1000) * (this.PARTICLES_SPEED * p.d * (Math.cos(now * this.TURBULENCES_SPEED / 1000 + p.s) * this.TURBULENCES_X));
+
+            if(p.y - (p.d * 4) > this.H || p.x - (p.d * 4) > this.W || p.x + (p.d * 4) < 0) {
+                this.particles.splice(i, 1);
+            }
+        }
+
+        if(this._lastSpawn <= now - this.SPAWN_RATE && this.particles.length < this.MAX_PARTICLES) {
+            this._lastSpawn = now;
+            this.spawnParticle();
+        }
+
+        this._lastLoop = now;
+    },
+
+    draw: function() {
+        this._ctx.clearRect(0, 0, this.W, this.H);
+
+        this._ctx.fillStyle = this.PARTICLES_COLOR;
+        this._ctx.beginPath();
+
+        var p;
+        for(var i in this.particles) {
+            p = this.particles[i];
+
+            this._ctx.moveTo(p.x, p.y);
+            this._ctx.arc(p.x, p.y, p.d * this.PARTICLES_SIZE, 0, Math.PI*2, true);
+        }
+
+        this._ctx.fill();
+    }
+};
+
+window.addEventListener("DOMContentLoaded", function() {
+    if(document.body.className.split(" ").indexOf("vc-snow") !== -1) { // No jQuery here
+        setTimeout(function() {
+            window.snow = new LetItSnow(document.querySelector(".header-container > header"));
+        }, 1000); // to be sure to have the DOM completely ready
+    }
+});

assets/scss/base/_high-pixel-ratio.scss

@@ -34,5 +34,11 @@
 
     .home .home-search-box::before {
         background-image: url('../images/home-clem@2x.png');
+
+        @at-root {
+            body.vc-clem-christmas.home .home-search-box::before {
+                background-image: url('../images/home-clem-christmas@2x.png');
+            }
+        }
     }
 }

assets/scss/pages/_home.scss

@@ -223,6 +223,12 @@ $content-width: 1145px;
             background-size: 100%;
             width: 68px;
             height: 134px;
+
+            @at-root {
+                body.vc-clem-christmas.home .home-search-box::before {
+                    background-image: url('../images/home-clem-christmas@2x.png');
+                }
+            }
         }
 
         label, input {

doc/source/front-end/elements-specifiques-au-site.rst

@@ -231,3 +231,41 @@ Pour y remédier, il faut toujours mettre à la fin de votre liste d'articles tr
    Voici trois tutoriels sur deux colonnes sans le problème
 
 (Pour l'explication technique, c'est dû à l'utilisation de *flexbox*.)
+
+Ajouter un design temporaire
+============================
+
+Il y a dans le fichier ``settings.py`` un tableau ``ZDS_APP.visual_changes``. Ce tableau de chaînes de caractères est injecté sous forme de classes au body, avec comme prefixe ``vc-`` (si l'utilisateur n'as pas bloqué les designs temporaires dans ses paramètres).
+
+Il suffit donc, dans le style et dans les scripts si le ``body`` a la classe ``vc-{...}`` correspondante au changement visuel.
+
+.. sourcecode:: scss
+
+    .element {
+        color: #FFF;
+        body.vc-clem-christmas & { // Donnera donc body.vc-clem-christmas .element
+          color #F00;
+        }
+    }
+
+.. sourcecode:: javascript
+
+    if($("body").hasClass("vc-snow")) {
+        // ...
+    }
+
+
+Changements visuels disponibles
+-------------------------------
+
+Les changements visuels disponibles sont:
+
+  - ``snow``: ajoute de la neige dans le header
+  - ``clem-christmas``: ajoute un bonnet à la Clem de la page d'accueil
+
+Par exemple, pour activer les changements ``snow`` et ``clem-christmas``, il faut ajouter au ``settings_prod.py``:
+
+.. sourcecode:: python
+
+    ZDS_APP['visual_changes'] = ['snow', 'clem-christmas']
+

templates/base.html

@@ -113,7 +113,12 @@
     {# OpenSearch plugin autodiscovery #}
     <link rel="search" type="application/opensearchdescription+xml" title="{{ app.site.litteral_name }}" href="{% url "zds.search.views.opensearch" %}">
 </head>
-<body class="{% block body_class %}{% endblock %}"
+
+{% if not user.is_authenticated or user.profile.allow_temp_visual_changes %}
+    {% set app.visual_changes as visual_changes %}
+{% endif %}
+
+<body class="{% block body_class %}{% endblock %}{% for vc in visual_changes %} vc-{{ vc }}{% endfor %}"
       itemscope
       itemtype="http://schema.org/WebPage"
 >

zds/member/api/serializers.py

@@ -80,7 +80,7 @@ class Meta:
         model = Profile
         fields = ('id', 'username', 'email', 'is_active', 'date_joined',
                   'site', 'avatar_url', 'biography', 'sign', 'show_email',
-                  'show_sign', 'hover_or_click', 'email_for_answer', 'last_visit')
+                  'show_sign', 'hover_or_click', 'allow_temp_visual_changes', 'email_for_answer', 'last_visit')
 
     def __init__(self, *args, **kwargs):
         """

zds/member/api/tests.py

@@ -352,6 +352,7 @@ def test_detail_of_the_member(self):
         self.assertFalse(response.data.get('show_email'))
         self.assertEqual(profile.show_sign, response.data.get('show_sign'))
         self.assertEqual(profile.hover_or_click, response.data.get('hover_or_click'))
+        self.assertEqual(profile.allow_temp_visual_changes, response.data.get('allow_temp_visual_changes'))
         self.assertEqual(profile.email_for_answer, response.data.get('email_for_answer'))
 
     def test_detail_of_the_member_not_authenticated(self):

zds/member/commons.py

@@ -32,7 +32,8 @@ def create_profile(self, data):
         user.set_password(password)
         user.is_active = False
         user.backend = 'django.contrib.auth.backends.ModelBackend'
-        profile = Profile(user=user, show_email=False, show_sign=True, hover_or_click=True, email_for_answer=False)
+        profile = Profile(user=user, show_email=False, show_sign=True, hover_or_click=True,
+                          allow_temp_visual_changes=True, email_for_answer=False)
         return profile
 
     def save_profile(self, profile):

zds/member/forms.py

@@ -293,6 +293,7 @@ class ProfileForm(MiniProfileForm):
             ('show_email', _(u"Afficher mon adresse courriel publiquement")),
             ('show_sign', _(u"Afficher les signatures")),
             ('hover_or_click', _(u"Cochez pour dérouler les menus au survol")),
+            ('allow_temp_visual_changes', _(u"Activer les changements visuels temporaires")),
             ('email_for_answer', _(u'Recevez un courriel lorsque vous '
                                    u'recevez une réponse à un message privé')),
         ),
@@ -318,6 +319,9 @@ def __init__(self, *args, **kwargs):
         if 'hover_or_click' in initial and initial['hover_or_click']:
             self.fields['options'].initial += 'hover_or_click'
 
+        if 'allow_temp_visual_changes' in initial and initial['allow_temp_visual_changes']:
+            self.fields['options'].initial += 'allow_temp_visual_changes'
+
         if 'email_for_answer' in initial and initial['email_for_answer']:
             self.fields['options'].initial += 'email_for_answer'
 

zds/member/migrations/0004_profile_allow_temp_visual_changes.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import models, migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('member', '0003_auto_20151019_2333'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='allow_temp_visual_changes',
+            field=models.BooleanField(default=True, verbose_name=b'Activer les changements visuels temporaires'),
+            preserve_default=True,
+        ),
+    ]

zds/member/models.py

@@ -66,6 +66,8 @@ class Meta:
     # TODO: Change this name. This is a boolean: "true" is "hover" or "click" ?!
     hover_or_click = models.BooleanField('Survol ou click ?', default=False)
 
+    allow_temp_visual_changes = models.BooleanField('Activer les changements visuels temporaires', default=True)
+
     email_for_answer = models.BooleanField('Envoyer pour les réponse MP', default=False)
 
     # SdZ tutorial IDs separated by columns (:).

zds/member/views.py

@@ -115,6 +115,7 @@ def get_form(self, form_class):
             'show_email': profile.show_email,
             'show_sign': profile.show_sign,
             'hover_or_click': profile.hover_or_click,
+            'allow_temp_visual_changes': profile.allow_temp_visual_changes,
             'email_for_answer': profile.email_for_answer,
             'sign': profile.sign
         })
@@ -143,6 +144,7 @@ def update_profile(self, profile, form):
         profile.show_email = 'show_email' in cleaned_data_options
         profile.show_sign = 'show_sign' in cleaned_data_options
         profile.hover_or_click = 'hover_or_click' in cleaned_data_options
+        profile.allow_temp_visual_changes = 'allow_temp_visual_changes' in cleaned_data_options
         profile.email_for_answer = 'email_for_answer' in cleaned_data_options
         profile.avatar_url = form.data['avatar_url']
         profile.sign = form.data['sign']

zds/settings.py

@@ -177,7 +177,7 @@
     'zds.gallery',
     'zds.mp',
     'zds.article',
-    
+
     'zds.forum',
     'zds.tutorial',
     'zds.tutorialv2',
@@ -500,7 +500,8 @@
     },
     'paginator': {
         'folding_limit': 4
-    }
+    },
+    'visual_changes': []
 }
 
 LOGIN_REDIRECT_URL = "/"