sketchfab · florianboudot · Jan 24, 2017 · Jan 24, 2017 · Jan 24, 2017 · Jan 24, 2017
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Bref, votre mission consiste à achever le GSCV et rétablir la paix et l'harmon
 - Une bibliothèque de widgets vous est également fournie pour réaliser l'éditeur
 - A priori, seuls les fichiers `index.html`, `style.css` et `app.js` ont besoin d'être modifiés
 - Si vous trouvez et fixez un bug dans le dossier `apis`, c'est super-tip-top ☺
-- Vous êtes libres d'ajouter ce que vous souhaitez à l'application. Quelques examples :
+- Vous êtes libre d'ajouter ce que vous souhaitez à l'application. Quelques exemples :
     - Permettre de modifier le nom et la profession (conseillé ... ;)
         - Vous aurez probablement besoin de créer un ou plusieurs nouveaux widgets pour l'éditeur. Prenez exemple sur le modèle de ceux déjà présents dans le dossier `apis`.
     - Changer la couleur des textes, du fond de la carte, les tailles des polices ...

diff --git a/index.html b/index.html
@@ -1,31 +1,58 @@
 <!DOCTYPE HTML>
 <html>
+<head>
+    <meta charset="UTF-8">
 
-    <head>
+    <!-- TITLE -->
+    <title>
+        Florian Boudot | Générateur Sketchfab de Cartes de Visites
+    </title>
 
-        <meta charset="UTF-8">
-        <title>Sketchfab Widgets</title>
+    <!-- STYLES -->
+    <link rel="stylesheet" href="sources/vendors/Normalize.css"/>
+    <link rel="stylesheet" href="sources/vendors/editor.css"/>
+    <link rel="stylesheet" href="style.css"/>
 
-        <link rel="stylesheet" href="sources/vendors/Normalize.css" />
-        <link rel="stylesheet" href="sources/vendors/editor.css" />
-        <style>.editor-panel, .editor-view { padding-top: 0 }</style>
-        <link rel="stylesheet" href="style.css" />
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            var htmlTag = document.getElementsByTagName('html')[0];
+            htmlTag.className = (htmlTag.className + ' ' || '') + 'ready';
+        });
+    </script>
+</head>
 
-        <script data-main="sources/main" src="sources/vendors/require.2.1.13.js"></script>
 
-    </head>
+<body>
 
-    <body>
-        <div class="editor">
-            <div class="editor-panel">
-            </div>
-            <div class="editor-view">
-                <div class="card">
-                    <div class="name">Maël Nison</div>
-                    <div class="job">Frontend Developer</div>
+<!-- EDITOR -->
+<div class="editor">
+
+    <!-- PANEL -->
+    <div class="editor-panel"></div>
+
+    <!-- VIEW -->
+    <div class="editor-view">
+        <div class="flip-container">
+            <div class="flipper card">
+                <div class="front">
+                    <div class="name" contenteditable="true">
+                        Florian Boudot
+                    </div>
+                    <div class="job" contenteditable="true">
+                        Front-end Developer
+                    </div>
+                </div>
+                <div class="back">
+                    back
                 </div>
             </div>
         </div>
-    </body>
 
+    </div>
+</div>
+
+<!-- SCRIPTS -->
+<script data-main="sources/main" src="sources/vendors/require.2.1.13.js"></script>
+
+</body>
 </html>
diff --git a/sources/apis/editor/API.js b/sources/apis/editor/API.js
@@ -2,18 +2,17 @@ define( [
 
     'vendors/Underscore',
 
-    'apis/editor/widgets/Vertical',
     'apis/editor/defaultWidgets'
 
-], function ( _, VerticalWidget ) {
+], function ( _, widgets ) {
 
     'use strict';
 
     return {
 
         start: function ( environment, options ) {
 
-            var widget = VerticalWidget.reify( null, _.extend( {
+            var widget = widgets.Vertical.reify( null, _.extend( {
 
                 environment: _.extend( {}, environment, {
                     popupStack: []

diff --git a/sources/app.js b/sources/app.js
@@ -1,54 +1,122 @@
 /*global define*/
 
-define( [
+define([
 
     'vendors/Backbone',
     'vendors/JQuery',
 
     'editor'
 
-], function ( Backbone, $, editor ) {
+], function (Backbone, $, editor) {
 
-    var Card = Backbone.Model.extend( {
-
-        defaults : {
-            radius : 10
+    var Card = Backbone.Model.extend({
+        defaults: {
+            radius: localStorage.getItem('radius') * 1 || 10,
+            bgcolor: JSON.parse(localStorage.getItem('background-color')) || {r: 0, g: 0, b: 1}, // default color not working yet !
+            textcolor: JSON.parse(localStorage.getItem('text-color')) || {r: 0, g: 1, b: 1}
         }
+    });
+
+    var View = Backbone.View.extend({
+
+        initialize: function () {
+            this.$el.find('[contenteditable=true]').on('input', this.onTextChange);
+            this.$el.find('[contenteditable=true]').each(function () {
+                var def_text = localStorage.getItem(this.getAttribute('class'));
+                if (def_text) {
+                    this.innerHTML = def_text;
+                }
+            });
+
+            this.model.on('change:radius', this.onRadiusChange, this);
+            this.model.on('change:textcolor', this.onTextColorChange, this);
+            this.model.on('change:toggleback', this.onToggleBack, this);
+            this.model.on('change:bgcolor', this.onBgColorChange, this);
+        },
+
+        render: function () {
+            this.onRadiusChange();
+            //this.onTextColorChange();
+            //this.onBgColorChange();
+        },
+
 
-    } );
+        toRgb:function (obj_color) {
+            return Object.values(obj_color).map(function (color) {
+                return Math.floor(color * 255);
+            }).join(',')
+        },
 
-    var View = Backbone.View.extend( {
+        onRadiusChange: function () {
+            var radius = this.model.get('radius');
+            this.$el.find('.front, .back').css('border-radius', radius);
+            localStorage.setItem('radius', radius)
+        },
 
-        initialize : function ( ) {
-            this.model.on( 'change:radius', this.onRadiusChange, this );
+        onToggleBack: function () {
+            this.$el.toggleClass('hover');
         },
 
-        render : function ( ) {
-            this.onRadiusChange( );
+        onTextChange: function () {
+            localStorage.setItem(this.getAttribute('class'), this.innerHTML);
         },
 
-        onRadiusChange : function ( ) {
-            this.$el.css( 'border-radius', this.model.get( 'radius' ) );
+        onTextColorChange: function () {
+            var color = this.model.get('textcolor');
+            localStorage.setItem('text-color', JSON.stringify(color));
+            var rgb = this.toRgb(color);
+            this.$el.find('.front').css('color', 'rgb(' + rgb + ')');
+        },
+
+        onBgColorChange: function () {
+            var color = this.model.get('bgcolor');
+            localStorage.setItem('background-color', JSON.stringify(color));
+            var rgb = this.toRgb(color);
+            this.$el.find('.front').css('background-color', 'rgb(' + rgb + ')');
         }
 
-    } );
+    });
 
     // --- --- --- --- --- --- --- --- ---
 
-    var card = new Card( );
-    var view = new View( { model : card, el : $( '.card' ) } );
+    var card = new Card();
+    var view = new View({model: card, el: $('.card')});
 
-    view.render( );
+    view.render();
 
     // --- --- --- --- --- --- --- --- ---
 
-    var appearance = editor.createWidget( 'Group', {
-        label : 'Card Appearance'
-    } );
-
-    appearance.createWidget( 'Border radius', 'NumberedSlider', {
-        model : card,
-        name  : 'radius'
-    } );
 
-} );
+    editor.createWidget('Group', {
+        label: 'Corners'
+    }).createWidget('', 'NumberedSlider', {
+        model: card,
+        name: 'radius'
+    });
+
+    editor.createWidget('Group', {
+        label: 'Front Text Color',
+        opened : false
+    }).createWidget('', 'Color', {
+        model: card,
+        name: 'textcolor'
+    });
+
+    editor.createWidget('Group', {
+        label: 'Front Background Color',
+        opened : false
+    }).createWidget('', 'Color', {
+        model: card,
+        name: 'bgcolor'
+    });
+
+    editor.createWidget('Group', {
+        label: 'back',
+        opened : false
+    }).createWidget('', 'ToggleSwitch', {
+        model: card,
+        label:'flip card',
+        name: 'toggleback'
+    });
+
+});
diff --git a/sources/vendors/editor.css b/sources/vendors/editor.css
@@ -88,15 +88,15 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url("../vendors/font-awesome/fonts//fontawesome-webfont.eot?v=4.0.3");
-  src: url("../vendors/font-awesome/fonts//fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../vendors/font-awesome/fonts//fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../vendors/font-awesome/fonts//fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../vendors/font-awesome/fonts//fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
+  src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3");
+  src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }
 
 /* line 4, ../../../static/vendors/font-awesome/scss/_core.scss */
 .fa, .popup-signup-finalize .icon-twitter, .popup-signup-finalize .icon-google, .popup-signup-finalize .icon-facebook, .editor .popup-wrapper .popup .popup-header .popup-actions .popup-action-close, .viewer .infos .bt-prev, .viewer .infos .bt-next {
   display: inline-block;
-  font-family: FontAwesome;
+    font-family: 'FontAwesome', serif;
   font-style: normal;
   font-weight: normal;
   line-height: 1;

diff --git a/sources/vendors/font-awesome/fonts/FontAwesome.otf b/sources/vendors/font-awesome/fonts/FontAwesome.otf
diff --git a/sources/vendors/font-awesome/fonts/fontawesome-webfont.eot b/sources/vendors/font-awesome/fonts/fontawesome-webfont.eot