add category in examples config

css/styles.css

@@ -128,14 +128,15 @@ body {
 }
 .panel-left nav,
 #add-example-form {
-  display: inline-block;
+  /*display: inline-block;*/
 }
+#site-menu{ position: fixed;top:0;right:0; }
 .panel-left nav ul {
   padding-left: 0;
   margin: 0;
 }
 .panel-left nav ul li {
-  display: inline-block;
+  /*display: inline-block;*/
 }
 #notification {
   color: black;

exemples/jquery/ajax-donnees-page-produit/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Données - page produit",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/ajax-envoi-formulaire-par-get/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Envoi formulaire par GET",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/ajax-envoi-formulaire-par-post/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Envoi formulaire par POST",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/ajax-exemple-simple/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Exemple simple",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/ajax-requete-randomuserme/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Requête randomuser.me",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/ajax-requete-themoviedborg/config.json

@@ -1,9 +1,9 @@
 {
   "title": "AJAX - Requête themoviedb.org",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/cibler-un-element-enfant/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Cibler un élément enfant",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/evenements-1-click-submit/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Evènements 1 : click et submit",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/evenements-2-change/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Evènements 2 : change",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/evenements-3-keyup/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Evènements 3 : keyup",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/exercice-1-verifier-un-formulaire/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Exercice 1 : vérifier un formulaire",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/onglets/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Onglets",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/selecteurs-basiques/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Sélecteurs basiques",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/selecteurs-filtres-2/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Sélecteurs : filtres 2",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/selecteurs-filtres/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Sélecteurs : filtres",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/selecteurs-multiples/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Sélecteurs multiples",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

exemples/jquery/validation-de-formulaires-bootstrap/config.json

@@ -1,9 +1,9 @@
 {
   "title": "Validation de formulaires Bootstrap",
+  "category": "misc",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],
-  "libsCss": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
-  "category": "misc"
+  "libsCss": [ "styles.css" ]
 }

html/template.mustache.html

@@ -11,7 +11,7 @@
     {{/libsCss}}
     <!-- Example's CSS -->
     {{#css}}
-    <link rel="stylesheet" href="../exemples/{{ slug }}/{{ . }}">
+    <link rel="stylesheet" href="../exemples/jquery/{{ slug }}/{{ . }}">
     {{/css}}
     <style type="text/css" media="screen">
     body {
@@ -34,7 +34,7 @@
     {{/libsJs}}
     <!-- Example's JS -->
     {{#js}}
-    <script src="../exemples/{{ slug }}/{{ . }}"></script>
+    <script src="../exemples/jquery/{{ slug }}/{{ . }}"></script>
     {{/js}}
 
   </body>

index.html

@@ -24,6 +24,9 @@
                 <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>
+            <nav id="site-menu">
+
+            </nav>
             <nav id="selector">
                 <select id="file-select">
                     <option value="-">&mdash;</option>

js/editor.js

@@ -127,7 +127,7 @@ $(document).ready(function() {
 
   function loadExample(exampleSlug) {
     // console.log('loadExample', exampleSlug);
-    var serverPath = 'exemples/' + exampleSlug + '/';
+    var serverPath = 'exemples/jquery/' + exampleSlug + '/';
     rp.get(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))
     .then(() => rp.get(serverPath + 'example.html', 'text'))
@@ -181,7 +181,7 @@ $(document).ready(function() {
   }
 
   function loadExampleList() {
-    rp.get('exemples/liste.json', 'json')
+    rp.get('/list/jquery', 'json')
     .then(function(_exampleList) {
       exampleList = _exampleList;
       var restoredDraft;
@@ -284,5 +284,6 @@ $(document).ready(function() {
   $saveChanges.click(saveChanges);
   $exampleForm.submit(saveExample);
   $revertEditor.click(revertEditor);
+  $.get('/menu', menu => $('#site-menu').html(menu), 'html');
   loadExampleList();
 });

sandboxApp.js

@@ -68,10 +68,26 @@ ExampleStore.prototype.loadRepository = function(repoPath) {
 ExampleStore.prototype.loadExample = function(repo, slug) {
   const exampleConfig = require(repo.fullPath + '/' + slug + '/config.json');
   repo.examples.push(Object.assign({ slug }, exampleConfig));
+  return exampleConfig;
 };
 
+ExampleStore.prototype.getList = function(path) {
+  return _.find(this.repos, { path });
+}
+
+ExampleStore.prototype.getMenu = function(path) {
+  const self = this;
+  return '<ul>' + self.repos.reduce((menu, repo) => {
+    return '<li>'+ repo.title + '<ul>' + repo.examples.reduce((submenu, example) =>
+      (submenu + '<li><a href="#' + repo.path + '/' + example.slug  + '">' + example.title + '</a></li>'),
+    '') + '</ul></li>';
+  }, '') + '</ul>';
+}
+
+
 var es = new ExampleStore(__dirname + '/exemples');
-es.init();
+es.init()
+.then(() => console.log(es.getMenu()));
 
 
 function addExample(slug, title) {
@@ -81,7 +97,7 @@ function addExample(slug, title) {
 
 function readConfigJson(exampleSlug) {
   console.log(exampleSlug);
-  return require('./exemples/' + exampleSlug + '/config.json');
+  return require('./exemples/jquery/' + exampleSlug + '/config.json');
 }
 
 function readFileAsync(file) {
@@ -141,6 +157,23 @@ app.get('/examples/:slug', function(req, res) {
   .then(html => res.send(html));
 });
 
+app.get('/menu', (rea, res) => {
+  res.send(es.getMenu());
+});
+
+app.get('/list/:repoPath', function(req, res) {
+  const { repoPath } = req.params;
+  const repo = es.getList(repoPath);
+  if(! repo) {
+    return res.status(404).send('Repo ' + repoPath + ' not found');
+  }
+  console.log('found repo', repo);
+  const data = repo.examples.map(e => (
+    { slug: e.slug, title: e.title }
+  ));
+  res.json(data);
+});
+
 app.put('/examples/:slug', function(req, res) {
   var slug = req.params.slug;
   var existing = _.find(examples, { slug: slug });

utils/migrate_old.js

@@ -68,7 +68,8 @@ function gitMvAsync(src, dst) {
 
 function writeExampleConfig(slug) {
   var config = require(examplesDir + '/' + slug + '/config.json');
-  config.category = "misc";
+  var { title, category, html, js, css, libsJs, libsCss } = config;
+  config = { title, category, html, js, css, libsJs, libsCss };
   // console.log(exampleConfig)
   // return new Promise((resolve, reject) => {
   //   const { slug, title } = example;