Show collection&example details

css/styles.css

@@ -236,12 +236,12 @@ input {
   width: 100%;
 }
 #editor-wrapper {
-  top: 120px;
+  top: 140px;
 }
 
 #editor {
   font-size: 90%;
-  border-top: 1px solid #aaa;
+  border-top: 3px solid #ddd;
   top: 22px;
   left: 0;
 }

html/index.mustache.html

@@ -48,9 +48,19 @@
             <div class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
+        {{#repo}}
+            <div id="details-repo" data-slug="{{path}}">
+                <strong>{{_.collection}} </strong><span>{{title}}</span>
+                <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
+            </div>
+        {{/repo}}
+        {{#example}}
+            <div id="details-example" data-slug="{{slug}}">
+                <strong>{{_.example}} </strong><span>{{title}}</span>
+            </div>
+        {{/example}}
 
         {{#showControls}}
-            <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="" placeholder="{{_.exampleName}}" required />
                 <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--

js/editor.js

@@ -20,6 +20,8 @@ $(document).ready(function() {
   var $panelRight    = $('.panel-right');
   var $panelWrap     = $('.panel-container');
   var $tabItems      = $('#tabs li');
+  var $detailsRepo   = $('details-repo');
+  var $detailsExmp   = $('details-example');
   var $window        = $(window);
   var activeMode     = 'html';
   var currentHash; 
@@ -270,8 +272,9 @@ $(document).ready(function() {
    */
   function addExample(e) {
     e.preventDefault();
+    var repoSlug = $detailsRepo.data('slug');
     var title = $(this).find('input[name="title"]').val();
-    rp.post('/examples', { title: title })
+    rp.post('/' + repoSlug + '/examples', { title: title })
     .then(function(newExample) {
       clearAndCloseEditor();
       $fileSelect.append(makeFileSelectOption(newExample));
@@ -308,7 +311,9 @@ $(document).ready(function() {
   // $fileSelect.change(function() {
   //   loadExample($(this).val());
   // });
+  console.log($addExampleBtn);
   $addExampleBtn.click(toggleEditor);
+  $addExampleBtn.click(console.log);
   $exampleCancel.click(clearAndCloseEditor);
   // $saveChanges.click(saveChanges);
   $exampleForm.submit(addExample);

languages/en-US.json

@@ -3,5 +3,7 @@
   "repoNotFound": "Example collection `%s` not found",
   "exampleNotFound": "Example `%s/%s` not found",
   "add": "Add",
-  "exampleName": "Example name"
+  "exampleName": "Example name",
+  "collection": "Collection:",
+  "example": "Example:"
 }

languages/fr-FR.json

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

lib/indexHandlers.js

@@ -11,7 +11,7 @@ var {
   readFilesAsync
 }                 = require('../lib/fsio');
 var translator    = require('../lib/translator');
-
+var passLog       = require('../lib/passLog');
 
 // One-liner for current directory, ignores .dotfiles
 chokidar.watch('./html', {ignored: /(^|[\/\\])\../}).on('all', (event, path) => {
@@ -40,34 +40,33 @@ module.exports = function(exStore, exDir) {
     // Extract repoSlug and exampleSlug from req.params
     const { locale, params: { repoSlug, exampleSlug } } = req;
     let repo;
-    let example;
     let menuExample;
     let statusCode;
 
-    // Initialize view data
+    // Initialize vie data
     let data = {
       menuRepo: exStore.getRepoMenu(),
       _: translator.getAll(locale)
-    }
+    };
 
     // Fetch example repository if needed
     if(withRepo) {
-      repo = exStore.getRepo(repoSlug);
-      if(! repo) {
+      data.repo = exStore.getRepo(repoSlug);
+      if(! data.repo) {
         // return res.status(404).send('Repo ' + req.params.repoSlug + ' not found');
         data.errorMessage = translator.getOne(locale, "repoNotFound", [repoSlug]); //'Repo ' + params.repoSlug + ' not found';
         statusCode = 404;
       }
       else {
-        data.menuExample = exStore.getExampleMenu(repo.path);
+        data.menuExample = exStore.getExampleMenu(data.repo.path);
         data.showControls = true;
       }
     }
 
     // Fetch example if needed
-    if(withExample && repo) {
-      example = _.find(repo.examples, { slug: exampleSlug });
-      if(! example) {
+    if(withExample && data.repo) {
+      data.example = _.find(data.repo.examples, { slug: exampleSlug });
+      if(! data.example) {
         // return res.status(404).send('Example ' + req.params.repoSlug + '/' + req.params.exampleSlug + ' not found');
         data.errorMessage = translator.getOne(locale, "exampleNotFound", [repoSlug, exampleSlug]);
         statusCode = 404;
@@ -79,12 +78,13 @@ module.exports = function(exStore, exDir) {
 
     // Mustache.render(indexTpml, data);
     return (
-      exampleSlug && example ?
-        readExampleFiles(repoSlug, exampleSlug, example) : Promise.resolve([])
+      exampleSlug && data.example ?
+        readExampleFiles(repoSlug, exampleSlug, data.example) : Promise.resolve([])
     ).then(files =>
       ({ files, filesJSON: JSON.stringify(files) })
     )
     .then(({ files, filesJSON }) => Object.assign(data, { files, filesJSON }))
+    .then(passLog('data before rendering, path: ' + req.path))
     .then(data => ({
       html: Mustache.render(indexTpml, data),
       code: statusCode ? statusCode : 200

lib/passLog.js

@@ -0,0 +1,6 @@
+module.exports = function(label) {
+  return function(o) {
+    console.log('####', label, o);
+    return o;
+  }
+}

sandboxApp.js

@@ -37,7 +37,10 @@ exStore.init();
 
 
 /**
- * Initialize Express app: root folder as static, body parsers
+ * Initialize Express app:
+ *   - root folder as static
+ *   - body parsers
+ *   - browser language detection middleware
  */
 app.use(express.static(__dirname));
 app.use(bodyParser.json());
@@ -55,10 +58,6 @@ function readConfigJson(exampleSlug) {
 }
 
 
-
-
-
-
 /**
  * Index page: render with only repo list in menu
  */

test/integration/render-index.test.js

@@ -42,9 +42,9 @@ describe('render index', () => {
    */
   it('without selected repo nor example', () => {
 
-    const { statusCode, $ } = invokeHandler('/', indexHandlers.getIndexBare);
+    const { statusCode, body, $ } = invokeHandler('/', indexHandlers.getIndexBare);
     statusCode.should.equal(200);
-
+console.log(body);
     const inlineJsData = "let window = {};" +
       $('#inline-js-data').html();
     try {