allow multiple css, js files and libs per example

css/styles.css

@@ -199,136 +199,3 @@ button:hover {
   border-top: 1px solid #aaa;
   border-bottom: 1px solid #aaa;
 }
-
-.container {
-  margin: 20px auto;
-	background: #fff;
-	border: 1px solid #ddd;
-	padding: 30px;
-  width: 96%;
-  border-radius: 4px;
-  box-sizing: border-box;
-	/*max-width: 600px;*/
-}
-input[type="submit"],
-button {
-  padding: 10px;
-  color: white;
-  border: none;
-  border-radius: 3px;
-}
-.blue {
-  background: #24d;
-}
-.red {
-  background: #d42;
-}
-.green {
-  background: #4b2;
-}
-.gray {
-  background: #888;
-}
-textarea,
-select,
-input {
-  border: 1px solid #ddd;  
-  padding: 12px;
-  border-radius: 3px;
-}
-input.input-sm {
-  padding: 6px;
-  font-size: 70%;
-}
-select {
-  background: #fcfcfc;
-}
-a,
-button {
-  margin: 5px;
-  box-sizing: border-box;
-}
-.bordure-flashy {
-  border: 2px solid red;
-}
-
-#html-content h5 {
-  margin: 20px 0 5px 0;
-}
-#html-content p {
-  margin: 10px 0;
-}
-button.d {
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-}
-
-/**
- * Styles communs pour les différents exemples
- */
-a.active {
-  font-weight: bold;
-  color: #48c;
-}
-.cyan {
-  background: #6ff;
-}
-.magenta {
-  background: #f6f;
-}
-.yellow {
-  background: #ff6;
-  color: #444;
-}
-.orange {
-  background: #eb6;
-}
-.bold-text {
-  font-weight: bold;
-}
-.underlined-text {
-  text-decoration: underline;
-}
-.text-green {
-  color: #4b2;
-}
-.text-red {
-  color: #b42;
-}
-.table {
-  border-collapse: collapse;
-}
-.table tr td {
-  border: 1px solid #aaa;
-  padding: 2px;
-}
-ul.tab-nav {
-   padding-left: 5px;
-   padding-bottom: 4px;
-   border-bottom: 1px solid #eee;
-}
-ul.tab-nav li {
-  display:inline;
-  padding: 6px 10px;
-  margin-right: 5px;
-  border-top:1px solid #ccc;
-  border-left:1px solid #ccc;
-  border-right:1px solid #ccc;
-}
-
-#qunit-header,
-#qunit-testrunner-toolbar {
-  display: none;
-}
-#revert-editor {
-  background: none;
-  border: none;
-  position: absolute;
-  padding: 0 3px;
-  top: 0;
-  left: 0;
-  color: red;
-  font-size: 11px;
-}

css/vendor/styles.css

@@ -0,0 +1,133 @@
+
+.container {
+  margin: 20px auto;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 30px;
+  width: 96%;
+  border-radius: 4px;
+  box-sizing: border-box;
+  /*max-width: 600px;*/
+}
+input[type="submit"],
+button {
+  padding: 10px;
+  color: white;
+  border: none;
+  border-radius: 3px;
+}
+.blue {
+  background: #24d;
+}
+.red {
+  background: #d42;
+}
+.green {
+  background: #4b2;
+}
+.gray {
+  background: #888;
+}
+textarea,
+select,
+input {
+  border: 1px solid #ddd;  
+  padding: 12px;
+  border-radius: 3px;
+}
+input.input-sm {
+  padding: 6px;
+  font-size: 70%;
+}
+select {
+  background: #fcfcfc;
+}
+a,
+button {
+  margin: 5px;
+  box-sizing: border-box;
+}
+.bordure-flashy {
+  border: 2px solid red;
+}
+
+#html-content h5 {
+  margin: 20px 0 5px 0;
+}
+#html-content p {
+  margin: 10px 0;
+}
+button.d {
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+}
+
+/**
+ * Styles communs pour les différents exemples
+ */
+a.active {
+  font-weight: bold;
+  color: #48c;
+}
+.cyan {
+  background: #6ff;
+}
+.magenta {
+  background: #f6f;
+}
+.yellow {
+  background: #ff6;
+  color: #444;
+}
+.orange {
+  background: #eb6;
+}
+.bold-text {
+  font-weight: bold;
+}
+.underlined-text {
+  text-decoration: underline;
+}
+.text-green {
+  color: #4b2;
+}
+.text-red {
+  color: #b42;
+}
+.table {
+  border-collapse: collapse;
+}
+.table tr td {
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+ul.tab-nav {
+   padding-left: 5px;
+   padding-bottom: 4px;
+   border-bottom: 1px solid #eee;
+}
+ul.tab-nav li {
+  display:inline;
+  padding: 6px 10px;
+  margin-right: 5px;
+  border-top:1px solid #ccc;
+  border-left:1px solid #ccc;
+  border-right:1px solid #ccc;
+}
+
+#qunit-header,
+#qunit-testrunner-toolbar {
+  display: none;
+}
+#revert-editor {
+  background: none;
+  border: none;
+  position: absolute;
+  padding: 0 3px;
+  top: 0;
+  left: 0;
+  color: red;
+  font-size: 11px;
+}

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

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

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

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

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

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

exemples/ajax-exemple-simple/config.json

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

exemples/ajax-requete-randomuserme/config.json

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

exemples/ajax-requete-themoviedborg/config.json

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

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

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

exemples/cibler-un-element-enfant/contenu.html

@@ -0,0 +1,14 @@
+<div id="main">
+  <p>Paragraphe 1</p>
+  <div class="section">
+    <p>Paragraphe 2</p>
+    <div><p>Paragraphe 3</p></div>
+    <div><div>Div très imbriquée</div></div>
+  </div>
+  <div class="section">
+    <p>Paragraphe 4</p>
+    <div><p>Paragraphe 5</p></div>
+  </div>
+  <div class="pas-une-section">
+  </div>
+</div>

exemples/cibler-un-element-enfant/script.js

@@ -0,0 +1,3 @@
+$('#main > div').addClass('gray')    // div DIRECTEMENT sous #main
+$('.section > p').addClass('blue')   // paragraphes 2 et 4 seulement
+$('.section > div').addClass('red')  // div contenant les paragraphes 2 et 4

exemples/cibler-un-element-enfant/styles.css

@@ -0,0 +1 @@
+div {}

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

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

exemples/evenements-2-change/config.json

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

exemples/evenements-3-keyup/config.json

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

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

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

exemples/liste.json

@@ -21,5 +21,6 @@
   { "slug": "ajax-exemple-simple", "title": "AJAX - Exemple simple" },
   { "slug": "ajax-envoi-formulaire-par-get", "title": "AJAX - Envoi formulaire par GET" },
   { "slug": "ajax-envoi-formulaire-par-post", "title": "AJAX - Envoi formulaire par POST" },
-  { "slug": "ajax-donnees-page-produit", "title": "AJAX - Données - page produit" }
+  { "slug": "ajax-donnees-page-produit", "title": "AJAX - Données - page produit" },
+  { "slug": "cibler-un-element-enfant", "title": "Cibler un élément enfant" }
 ]

exemples/onglets/config.json

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

exemples/selecteurs-basiques/config.json

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

exemples/selecteurs-filtres-2/config.json

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

exemples/selecteurs-filtres/config.json

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

exemples/selecteurs-multiples/config.json

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

exemples/template.html

@@ -1,27 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<title>Sandbox iframe</title>
+  <head>
+  <title>{{ title }} - Sandbox iframe</title>
+    <!-- HTML5 Boilerplate CSS -->
     <link rel="stylesheet" href="../css/normalize.css">
     <link rel="stylesheet" href="../css/main.css">
-    <link rel="stylesheet" href="../css/styles.css">
-    <link rel="stylesheet" href="../css/bootstrap.min.css">
-<style type="text/css" media="screen">
-body {
-    font-family: Arial, Helvetica;
-}
-</style>
-</head>
-<body>
+    <!-- Vendor CSS -->
+    {{#libsCss}}
+    <link rel="stylesheet" href="../css/vendor/{{ . }}">
+    {{/libsCss}}
+    <!-- Example's CSS -->
+    {{#css}}
+    <link rel="stylesheet" href="../exemples/{{ slug }}/{{ . }}">
+    {{/css}}
+    <style type="text/css" media="screen">
+    body {
+        font-family: Arial, Helvetica;
+    }
+    </style>
+  </head>
+  <body>
 
-<div class="container">
-    __body__
-</div>
+    <div class="container">
+        {{{ body }}}
+    </div>
 
+    <!-- HTML5 Boilerplate JS -->
+    <script src="../js/vendor/modernizr-3.5.0.min.js"></script>
+    <script src="../js/plugins.js"></script>
+    <!-- Vendor JS -->
+    {{#libsJs}}
+    <script src="../js/vendor/{{ . }}" ></script>
+    {{/libsJs}}
+    <!-- Example's JS -->
+    {{#js}}
+    <script src="../exemples/{{ slug }}/{{ . }}"></script>
+    {{/js}}
 
-<script src="../js/vendor/modernizr-3.5.0.min.js"></script>
-<script src="../js/vendor/jquery-3.2.1.min.js" ></script>
-<script src="../js/plugins.js"></script>
-<script src="../exemples/__slug__/script.js"></script>
-</body>
+  </body>
 </html>

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

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

index.html

@@ -5,9 +5,8 @@
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
 <!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
-    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/vendor/styles.css">
     <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="css/bootstrap.min.css">
 <style type="text/css" media="screen">
 
 </style>

js/editor.js

@@ -130,7 +130,7 @@ $(document).ready(function() {
     var serverPath = 'exemples/' + exampleSlug + '/';
     rp.get(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))
-    .then(() => rp.get(serverPath + 'contenu.html', 'text'))
+    .then(() => rp.get(serverPath + 'example.html', 'text'))
     .then(() => rp.get(serverPath + 'styles.css', 'text')
       .then(css => $editorCss.html(css))
       .catch(err => {

package.json

@@ -7,6 +7,7 @@
     "express": "^4.16.2",
     "json-beautify": "^1.0.1",
     "lodash": "^4.17.4",
+    "mustache": "^2.3.0",
     "slug": "^0.9.1"
   }
 }

sandboxApp.js

@@ -1,3 +1,6 @@
+/* global __dirname */
+/* jshint strict:false */
+"use strict";
 var express      = require('express');
 var bodyParser   = require('body-parser');
 var slug         = require('slug');
@@ -5,6 +8,7 @@ var beautify     = require("json-beautify");
 var _            = require('lodash');
 var fs           = require('fs');
 var Promise      = require('bluebird');
+var Mustache     = require('mustache');
 var app          = express();
 var examplesJSON = __dirname + '/exemples/liste.json';
 var sandboxTpml  = fs.readFileSync(__dirname + '/exemples/template.html').toString();
@@ -21,6 +25,37 @@ function addExample(slug, title) {
   return fs.writeFileAsync(examplesJSON, beautify(examples, null, 2, 100));
 }
 
+function readConfigJson(exampleSlug) {
+  console.log(exampleSlug);
+  return require('./exemples/' + exampleSlug + '/config.json');
+}
+
+function readFileAsync(file) {
+  return fs.readFileAsync(file)
+  .then(buf => (buf.toString()));
+}
+
+// function readFilesAsync(path, files) {
+//   // console.log('reading files', files, 'from path', path);
+//   return Promise.map(files,
+//     f => readFileAsync(path + '/' + f)
+//   );
+// }
+
+// function readExampleFiles(slug, config) {
+//   const exampleDir = __dirname + '/exemples/' + slug;
+//   const libsCssDir = __dirname + '/css/vendor';
+//   const libsJsDir  = __dirname + '/js/vendor';
+//   const { html, js, css, libsCss, libsJs } = config;
+//   return Promise.all([
+//     readFilesAsync(exampleDir, html),
+//     readFilesAsync(exampleDir, js),
+//     readFilesAsync(exampleDir, css),
+//     readFilesAsync(libsJsDir, libsJs),
+//     readFilesAsync(libsCssDir, libsCss),
+//   ]);
+// }
+
 app.post('/examples', function(req, res) {
   var title = req.body.title;
   if(! req.body.title) {
@@ -42,14 +77,13 @@ app.post('/examples', function(req, res) {
 });
 
 app.get('/examples/:slug', function(req, res) {
-  var slug = req.params.slug;
-  fs.readFileAsync(__dirname + '/exemples/' + slug + '/contenu.html')
-  .then(buf => buf.toString())
-  .then(body => (
-    sandboxTpml
-    .replace('__body__', body)
-    .replace('__slug__', slug)
-  ))
+  const { slug } = req.params;
+  const config = readConfigJson(slug);
+  const { title, html, js, css, libsCss, libsJs } = config;
+  readFileAsync(__dirname + '/exemples/' + slug + '/' + html[0])
+  .then(body =>
+    Mustache.render(sandboxTpml, { body, slug, title, js, css, libsCss, libsJs })
+  )
   .then(html => res.send(html));
 });
 

utils/migrate_old.js

@@ -3,7 +3,8 @@ const path        = require('path');
 const { exec }    = require('child_process');
 const Promise     = require('bluebird');
 const examplesDir = path.normalize(__dirname + '/../exemples');
-const listJson    = require('./exemples/liste.json');
+const listJson    = require('../exemples/liste.json');
+const beautify    = require("json-beautify");
 Promise.promisifyAll(fs);
 
 // Promisified exec
@@ -33,6 +34,7 @@ function gitMvAsync(src, dst) {
   });  
 }
 
+// Promisified exec of git status
 // execAsync('git status')
 // .then(({stdout, stderr}) => {
 //   console.log(`stdout: ${stdout}`);
@@ -62,4 +64,24 @@ function gitMvAsync(src, dst) {
 //     gitMvAsync(src, dst)
 //   })
 // )
-// .catch(console.error);
+// .catch(console.error);
+
+function writeExampleConfig(example) {
+  // return new Promise((resolve, reject) => {
+    const { slug, title } = example;
+    const config = {
+      title,
+      html: ['example.html'],
+      js: ['script.js'],
+      css: [],
+      libsCss: ['styles.css'],
+      libsJs: ['jquery-3.2.1.min.js']
+    };
+    const configJson = beautify(config, null, 2, 100);
+    // resolve(configJson);
+  return fs.writeFileAsync(examplesDir + '/' + slug + '/config.json', configJson);
+  // });
+}
+
+Promise.map(listJson, writeExampleConfig)
+.then(filesPerExample => console.log(filesPerExample));