styling and translations

css/styles.css

@@ -196,6 +196,28 @@ button.active {
 button:hover {
   opacity: 0.6;
 }
+button.btn-lg {
+  font-size: 120%;
+}
+textarea,
+select,
+input {
+  border: 1px solid #ddd;
+  padding: 8px;
+  border-radius: 3px;
+}
+.blue {
+  background: #24d;
+  color: #fff;
+}
+.red {
+  background: #d42;
+  color: #fff;
+}
+.green {
+  background: #4b2;
+  color: #fff;
+}
 #editor-js,
 #editor-html,
 #editor-css {
@@ -207,16 +229,21 @@ button:hover {
 /**
  * Styles pour l'éditeur Ace
  */
+#editor-wrapper,
 #editor {
-  font-size: 90%;
   position: absolute;
-  top: 120px;
-  /*right: 500px;*/
   bottom: 0;
-  left: 0;
   width: 100%;
+}
+#editor-wrapper {
+  top: 120px;
+}
+
+#editor {
+  font-size: 90%;
   border-top: 1px solid #aaa;
-  border-bottom: 1px solid #aaa;
+  top: 22px;
+  left: 0;
 }
 
 #navbar {
@@ -290,9 +317,10 @@ button:hover {
 
 #tabs {
   /*font-size: 16px;*/
-  position: absolute;
-  top: 70px;
-  left: 0;
+  position: relative;
+  vertical-align: bottom;
+  margin: 0;
+  padding-left: 10px;
 }
 #tabs li {
   border-top: 1px solid #ddd;

html/index.mustache.html

@@ -7,7 +7,6 @@
 <!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
     <link rel="stylesheet" href="/css/vendor/pure-grids-min.css">
     <link rel="stylesheet" href="/css/vendor/pure-grids-responsive-min.css">
-    <!-- <link rel="stylesheet" href="/css/vendor/styles.css"> -->
     <link rel="stylesheet" href="/css/styles.css">
 <style type="text/css" media="screen">
 
@@ -51,27 +50,27 @@
 
 
         {{#showControls}}
-            <button id="add-example-btn" class="icon-plus rounded blue"></button>
+            <button id="add-example-btn" class="btn-lg blue"><span class="icon-plus rounded"></span> {{_.add}}</button>
             <form id="add-example-form" style="display: none;">
-                <input type="text" name="title" class="input-sm" value="" />
+                <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
                 <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
                 --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
             </form>
-            <button id="save-changes" class="icon-cloud-upload green"></button>
+            <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
         {{/showControls}}
 
+        </div>
+
         {{#showEditor}}
+        <div id="editor-wrapper">
             <ul id="tabs">{{#files}}
                 <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
             {{/files}}
             <li>+</li>
             </ul>
-        {{/showEditor}}
+            <div id="editor"></div>
         </div>
 
-        {{#showEditor}}
-        <div id="editor"></div>
-
         <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
         <script type="text/html" id="editor-css"></script>

js/editor.js

@@ -10,6 +10,7 @@ $(document).ready(function() {
   var $fileSelect    = $('#file-select');
   var $addExampleBtn = $('#add-example-btn');
   var $exampleForm   = $('#add-example-form');
+  var $exampleFormIn = $exampleForm.find('input')
   var $exampleSave   = $('#add-example-save');
   var $exampleCancel = $('#add-example-cancel');
   var $saveChanges   = $('#save-changes');
@@ -257,33 +258,33 @@ $(document).ready(function() {
   //   }, 3000);
   // }
 
-  // function toggleEditor() {
-  //   $addExampleBtn.toggle();
-  //   $selectorNav.toggle();
-  //   $exampleForm.toggle();
-  // }
+  function toggleEditor() {
+    $addExampleBtn.toggle();
+    $selectorNav.toggle();
+    $exampleForm.toggle();
+  }
 
 
-  // /**
-  //  * Save new example
-  //  */
-  // function saveExample(e) {
-  //   e.preventDefault();
-  //   var title = $(this).find('input[name="title"]').val();
-  //   rp.post('/examples', { title: title })
-  //   .then(function(newExample) {
-  //     clearAndCloseEditor();
-  //     $fileSelect.append(makeFileSelectOption(newExample));
-  //     $fileSelect.val(newExample.slug);
-  //     notify('success', "Exemple créé !");
-  //   })
-  //   .catch(errText => notify('error', 'Erreur: ' + errText));
-  // }
+  /**
+   * Add new example
+   */
+  function addExample(e) {
+    e.preventDefault();
+    var title = $(this).find('input[name="title"]').val();
+    rp.post('/examples', { title: title })
+    .then(function(newExample) {
+      clearAndCloseEditor();
+      $fileSelect.append(makeFileSelectOption(newExample));
+      $fileSelect.val(newExample.slug);
+      notify('success', "Exemple créé !");
+    })
+    .catch(errText => notify('error', 'Erreur: ' + errText));
+  }
 
-  // function clearAndCloseEditor() {
-  //   $exampleForm.find('input').val('');
-  //   toggleEditor();
-  // }
+  function clearAndCloseEditor() {
+    $exampleFormIn.val('');
+    toggleEditor();
+  }
 
   // function revertEditor() {
   //   editorStorage.reset();
@@ -307,10 +308,10 @@ $(document).ready(function() {
   // $fileSelect.change(function() {
   //   loadExample($(this).val());
   // });
-  // $addExampleBtn.click(toggleEditor);
-  // $exampleCancel.click(clearAndCloseEditor);
+  $addExampleBtn.click(toggleEditor);
+  $exampleCancel.click(clearAndCloseEditor);
   // $saveChanges.click(saveChanges);
-  // $exampleForm.submit(saveExample);
+  $exampleForm.submit(addExample);
   // $revertEditor.click(revertEditor);
   // $.get('/menu', menu => $('#site-menu').html(menu), 'html');
   // loadExampleList();

languages/en-US.json

@@ -1,5 +1,7 @@
 {
   "home": "Home",
   "repoNotFound": "Example collection `%s` not found",
-  "exampleNotFound": "Example `%s/%s` not found"
+  "exampleNotFound": "Example `%s/%s` not found",
+  "add": "Add",
+  "exampleName": "Example name"
 }

languages/fr-FR.json

@@ -1,5 +1,7 @@
 {
   "home": "Accueil",
   "repoNotFound": "Collection d'exemples `%s` introuvable",
-  "exampleNotFound": "Exemple `%s/%s` introuvable"
+  "exampleNotFound": "Exemple `%s/%s` introuvable",
+  "add": "Ajouter",
+  "exampleName": "Nom de l'exemple"
 }

lib/indexHandlers.js

@@ -46,7 +46,8 @@ module.exports = function(exStore, exDir) {
 
     // Initialize view data
     let data = {
-      menuRepo: exStore.getRepoMenu()
+      menuRepo: exStore.getRepoMenu(),
+      _: translator.getAll(locale)
     }
 
     // Fetch example repository if needed
@@ -54,7 +55,7 @@ module.exports = function(exStore, exDir) {
       repo = exStore.getRepo(repoSlug);
       if(! repo) {
         // return res.status(404).send('Repo ' + req.params.repoSlug + ' not found');
-        data.errorMessage = translator.get(locale, "repoNotFound", [repoSlug]); //'Repo ' + params.repoSlug + ' not found';
+        data.errorMessage = translator.getOne(locale, "repoNotFound", [repoSlug]); //'Repo ' + params.repoSlug + ' not found';
         statusCode = 404;
       }
       else {
@@ -68,7 +69,7 @@ module.exports = function(exStore, exDir) {
       example = _.find(repo.examples, { slug: exampleSlug });
       if(! example) {
         // return res.status(404).send('Example ' + req.params.repoSlug + '/' + req.params.exampleSlug + ' not found');
-        data.errorMessage = translator.get(locale, "exampleNotFound", [repoSlug, exampleSlug]);
+        data.errorMessage = translator.getOne(locale, "exampleNotFound", [repoSlug, exampleSlug]);
         statusCode = 404;
       }
       else {

lib/translator.js

@@ -10,9 +10,13 @@ var langs    = locales.reduce((carry, locale) =>
 );
 
 module.exports = {
-  get: function(locale, string, args) {
+  getOne: function(locale, string, args) {
     locale = locales.indexOf(locale) > -1 ? locale : 'en-US';
     const translation = langs[locale][string];
     return translation ? vsprintf(translation, args) : 'N/A';
+  },
+  getAll: function(locale) {
+    locale = locales.indexOf(locale) > -1 ? locale : 'en-US';
+    return langs[locale];
   }
 };