Tentative mise en place crossfade sur le background

css/style.css

@@ -13,9 +13,6 @@ html, body {
   padding: 0;
   margin: 0;
   font-family: 'sawasdeeregular';
-  background-size: contain;
-  background-position: center;
-  background-color: rgb(34, 107, 160);
   width: 100%;
   height: 100%;
   color: white;
@@ -46,11 +43,6 @@ html, body {
 .launcher {
   display: flex;
   flex-direction: column;
-  background: url('../img/background.svg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
-  transition: background-image 250ms ease-in-out;
   position: absolute;
   left: 0;
   right: 0;
@@ -58,6 +50,27 @@ html, body {
   top: 0;
 }
 
+.launcher > .crossfade-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.launcher .crossfade-image > .top,
+.launcher .crossfade-image > .bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
 .launcher .main {
   flex-direction: row;
   display: flex;
@@ -319,6 +332,13 @@ html, body {
   100% { transform: scale(1); }
 }
 
+@-webkit-keyframes fade-out {
+  0% { opacity: 1; }
+  1% { opacity: 0.99; }
+  99% { opacity: 0.01; }
+  100% { opacity: 0; }
+}
+
 @-webkit-keyframes slide-in-left {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(0%); }

eleve.json

@@ -0,0 +1,334 @@
+{
+    "background": "./img/background2.jpg",
+    "items": [
+        {
+            "label": "Mathématiques",
+            "icon": "./icone-maths.png",
+            "items": [
+                {
+                    "label": "À nous les nombres",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/anous"
+                },
+                {
+                    "label": "Calcul mental",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/leterrier-calcul-mental"
+                },
+                {
+                    "label": "Calculs",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/calculs"
+                },
+                {
+                    "label": "Carmetal",
+                    "icon": "chromium-browser",
+                    "exec": "carmetal"
+                },
+                {
+                    "label": "Kig",
+                    "icon": "chromium-browser",
+                    "exec": "kig"
+                },
+                {
+                    "label": "Labyrinthe",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/labyrinthe"
+                },
+                {
+                    "label": "OOo4Kids",
+                    "icon": "chromium-browser",
+                    "exec": "ooo4kids1.3 -math"
+                },
+                {
+                    "label": "Opérations",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/operations"
+                },
+                {
+                    "label": "TuxMath",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/tuxmath"
+                }
+            ]
+        },
+        {
+            "label": "Français",
+            "icon": "./img/francais.png",
+            "items": [
+                {
+                    "label": "Aller",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/aller"
+                },
+                {
+                    "label": "Anki",
+                    "icon": "chromium-browser",
+                    "exec": "anki %f"
+                },
+                {
+                    "label": "Dicorime",
+                    "icon": "chromium-browser",
+                    "exec": "dicorime"
+                },
+                {
+                    "label": "Dictionnaire",
+                    "icon": "chromium-browser",
+                    "exec": "stardict"
+                },
+                {
+                    "label": "GConjugo",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/gconjugo"
+                },
+                {
+                    "label": "Kanagram",
+                    "icon": "chromium-browser",
+                    "exec": "kanagram"
+                },
+                {
+                    "label": "Verbiste",
+                    "icon": "chromium-browser",
+                    "exec": "verbiste"
+                }
+            ]
+        },
+        {
+            "label": "Histoire, géographie",
+            "icon": "./img/histoire-geo.png",
+            "items": [
+                {
+                    "label": "KGeography",
+                    "icon": "chromium-browser",
+                    "exec": "kgeography"
+                }
+            ]
+        },
+        {
+            "label": "Sciences",
+            "icon": "./img/sciences.png",
+            "items": [
+                {
+                    "label": "Celestia",
+                    "icon": "chromium-browser",
+                    "exec": "celestia-gnome"
+                },
+                {
+                    "label": "Kturtle",
+                    "icon": "chromium-browser",
+                    "exec": "kturtle"
+                },
+                {
+                    "label": "Stellarium",
+                    "icon": "chromium-browser",
+                    "exec": "stellarium"
+                },
+                {
+                    "label": "SunClock",
+                    "icon": "chromium-browser",
+                    "exec": "sunclock"
+                }
+            ]
+        },
+        {
+            "label": "Autres matières",
+            "icon": "./img/divers.png",
+            "items": [
+                {
+                    "label": "Childsplay",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/games/childsplay"
+                },
+                {
+                    "label": "GCompris",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/games/gcompris"
+                },
+                {
+                    "label": "GNU Solfege",
+                    "icon": "chromium-browser",
+                    "exec": "solfege"
+                },
+                {
+                    "label": "Mulot",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/mulot"
+                },
+                {
+                    "label": "MyPaint",
+                    "icon": "chromium-browser",
+                    "exec": "mypaint %f"
+                },
+                {
+                    "label": "Omnitux",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/omnitux"
+                },
+                {
+                    "label": "OOo4Kids Dessin",
+                    "icon": "chromium-browser",
+                    "exec": "ooo4kids1.3 -draw"
+                },
+                {
+                    "label": "TuxPaint",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/tuxpaint"
+                },
+                {
+                    "label": "TuxTyping",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/games/tuxtype"
+                }
+            ]
+        },
+        {
+            "label": "Internet & messagerie",
+            "icon": "./img/internet.png",
+            "items": [
+                {
+                    "label": "Thunderbird",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/thunderbird"
+                },
+                {
+                    "label": "Navigateur internet",
+                    "icon": "firefox",
+                    "exec": "/usr/bin/firefox"
+                }
+            ]
+        },
+        {
+            "label": "Bureautique",
+            "icon": "./img/bureautique.png",
+            "items": [
+                {
+                    "label": "LibreOffice Tableur",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/libreoffice --calc %U"
+                },
+                {
+                    "label": "LibreOffice Texte",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/libreoffice --impress %U"
+                },
+                {
+                    "label": "LibreOffice Présentation",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/libreoffice --impress %U"
+                },
+                {
+                    "label": "Lecteur PDF",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/evince"
+                },
+                {
+                    "label": "Diaporama",
+                    "icon": "chromium-browser",
+                    "exec": "ooo4kids1.3 -impress"
+                },
+                {
+                    "label": "Tableau",
+                    "icon": "chromium-browser",
+                    "exec": "ooo4kids1.3 -calc"
+                },
+                {
+                    "label": "Texte",
+                    "icon": "chromium-browser",
+                    "exec": "ooo4kids1.3 -writer"
+                }
+            ]
+        },
+        {
+            "label": "Outils",
+            "icon": "./img/logoutil.png",
+            "items": [
+                {
+                    "label": "Graveur de CD-DVD",
+                    "icon": "chromium-browser",
+                    "exec": "brasero"
+                },
+                {
+                    "label": "Capture d'écran",
+                    "icon": "chromium-browser",
+                    "exec": "gnome-screenshot --interactive"
+                },
+                {
+                    "label": "Créateur de diagrammes",
+                    "icon": "chromium-browser",
+                    "exec": "dia"
+                },
+                {
+                    "label": "Calculatrice",
+                    "icon": "chromium-browser",
+                    "exec": "gcalctool"
+                },
+                {
+                    "label": "Enregistreur de son",
+                    "icon": "chromium-browser",
+                    "exec": "gnome-sound-recorder"
+                },
+                {
+                    "label": "Éditeur d'images",
+                    "icon": "chromium-browser",
+                    "exec": "pinta"
+                },
+                {
+                    "label": "Table de caractères",
+                    "icon": "chromium-browser",
+                    "exec": "gucharmap"
+                },
+                {
+                    "label": "Lecteur Multimédia",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/vlc"
+                },
+                {
+                    "label": "Montage Vidéo",
+                    "icon": "chromium-browser",
+                    "exec": "openshot %F"
+                },
+                {
+                    "label": "Créer des DVD",
+                    "icon": "chromium-browser",
+                    "exec": "2ManDVD"
+                },
+                {
+                    "label": "Éditeur audio",
+                    "icon": "chromium-browser",
+                    "exec": "audacity %F"
+                },
+                {
+                    "label": "Créer des diaporamas",
+                    "icon": "chromium-browser",
+                    "exec": "imagination %F"
+                }
+            ]
+        },
+        {
+            "label": "Dossiers personnels",
+            "icon": "./img/dossier.png",
+            "items": [
+                {
+                    "label": "Documents",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/nautilus Documents/"
+                },
+                {
+                    "label": "Images",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/nautilus Images/"
+                },
+                {
+                    "label": "Musique",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/nautilus Musique/"
+                },
+                {
+                    "label": "Vidéos",
+                    "icon": "chromium-browser",
+                    "exec": "/usr/bin/nautilus Vidéos/"
+                }
+            ]
+        }
+    ]
+}

src/components/launcher/crossfade-image.js

@@ -0,0 +1,46 @@
+/* jshint node: true jsx: true */
+var React = require('react');
+var AnimateMixin = require('../mixins/animate');
+
+module.exports = React.createClass({
+
+  mixins: [AnimateMixin],
+
+  propTypes: {
+    src: React.PropTypes.string
+  },
+
+  getInitialState: function() {
+    return { currSrc: null, prevSrc: null };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
+  },
+
+  render: function() {
+
+    var topStyle = {};
+
+    if(this.state.prevSrc) {
+      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
+    }
+
+    var bottomStyle = {
+      backgroundImage: 'url('+this.state.currSrc+')'
+    };
+
+    return (
+      <div className="crossfade-image">
+        <div className="bottom" style={bottomStyle}></div>
+        <div ref="top" className="top" style={topStyle}></div>
+      </div>
+    );
+
+  },
+
+  componentDidUpdate: function() {
+    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
+  }
+
+});

src/components/launcher/launcher-view.js

@@ -6,9 +6,11 @@ var AnimateMixin = require('../mixins/animate');
 var actions = require('../../store/actions');
 var connect = require('react-redux').connect;
 var debug = require('../../util/debug')('launcher-view');
+var CrossfadeImage = require('./crossfade-image');
 var path = require('path');
 
 var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
+var DEFAULT_BACKGROUND = path.join(__dirname, '..', '..', '..', 'img', 'background.svg');
 
 var LauncherView = React.createClass({
 
@@ -52,14 +54,11 @@ var LauncherView = React.createClass({
       null
     ;
 
-    var style = {};
+    var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;
-
-    if(currentItem && currentItem.background) {
-      style.backgroundImage = 'url('+currentItem.background+')';
-    }
 
     return (
-      <div className="launcher" style={style}>
+      <div className="launcher">
+        <CrossfadeImage src={background} />
         {header}
         <div className="main">
           {nav}

src/components/mixins/animate.js

@@ -1,5 +1,6 @@
 var Events = {
-  ANIMATION_END: 'webkitAnimationEnd'
+  ANIMATION_END: 'webkitAnimationEnd',
+  TRANSITION_END: 'webkitTransitionEnd'
 };
 
 module.exports = {
@@ -13,10 +14,51 @@ module.exports = {
       el.style.webkitAnimation = animation;
 
       function onAnimEnd(evt) {
+        el.style.webkitAnimation = '';
         el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
         return resolve(el);
       }
 
+    });
+  },
+
+  transition: function(component, style, time, easing) {
+    return new Promise(function(resolve, reject) {
+
+      console.log('transition start', style, time);
+
+      time = time || '500ms';
+      easing = easing || 'linear';
+
+      var props = Object.keys(style);
+      var el = component.getDOMNode();
+
+      el.style.transition = null;
+
+      el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);
+
+      props.forEach(function(styleProp) {
+        el.style[styleProp] = style[styleProp].start;
+      });
+
+      var transition = '';
+      props.forEach(function(styleProp) {
+        if(transition) transition += ', ';
+        transition += styleProp + ' ' + time + ' ' + easing;
+      });
+      el.style.transition = transition;
+
+      props.forEach(function(styleProp) {
+        el.style[styleProp] = style[styleProp].end;
+      });
+
+      function onTransitionEnd(evt) {
+        console.log('transition end', evt);
+        el.style.transition = null;
+        el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
+        return resolve(el);
+      }
+
     });
   }