modif exemple, messages serveur

css/styles.css

@@ -138,6 +138,7 @@ body {
   display: inline-block;
 }
 #notification {
+  color: black;
   position: absolute;
   top: -100px;
   right: 10px;
@@ -164,6 +165,10 @@ a {
   text-decoration: none;
   color: #59d;
 }
+a:hover {
+  text-decoration: none;
+  color: #37b;
+}
 button a {
   color: #fff;
 }
@@ -293,6 +298,19 @@ a.active {
   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 {

exemples/validation-de-formulaires-bootstrap/contenu.html

@@ -1,30 +1,22 @@
-<ul id="onglets">
-    <li style="display:inline;">
+<ul id="onglets" class="tab-nav">
+    <li>
         <a data-tab-id="tab-login" id="onglet1" class="active" href="#">Login</a>
     </li>
-    <li style="display:inline;">
+    <li class="tab-nav">
         <a data-tab-id="tab-register" id="onglet2" href="#">Register</a>
     </li>
 
 </ul>
 <div class="tab" id="tab-login">
-    <h2>Panneau 1</h2>
-</div>
-<div class="tab" id="tab-register" style="display:none">
-    <h2>Register</h2>
     <form>
       <div class="form-group">
-        <label for="exampleInputUsername1">Username</label>
-        <input type="text" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
-      </div>
-      <div class="form-group">
-        <label for="exampleInputEmail1">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <label for="loginInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="loginInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
         <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
       <div class="form-group">
-        <label for="exampleInputPassword1">Password</label>
-        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+        <label for="loginInputPassword1">Password</label>
+        <input type="password" class="form-control" id="loginInputPassword1" placeholder="Password">
       </div>
       <div class="form-check">
         <label class="form-check-label">
@@ -35,4 +27,23 @@
       <button type="submit" class="btn btn-primary">Submit</button>
     </form>
 </div>
+<div class="tab" id="tab-register" style="display:none">
+    <form>
+      <div class="form-group">
+        <label for="registerInputUsername1">Username</label>
+        <input type="text" class="form-control" id="registerInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
+      </div>
+      <div class="form-group">
+        <label for="registerInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="registerInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+      </div>
+      <div class="form-group">
+        <label for="registerInputPassword1">Password</label>
+        <input type="password" class="form-control" id="registerInputPassword1" placeholder="Password">
+      </div>
+
+      <button type="submit" class="btn btn-primary">Register</button>
+    </form>
+</div>
 

exemples/validation-de-formulaires-bootstrap/script.js

@@ -1,4 +1,4 @@
-$('#exampleInputUsername1')
+$('#registerInputUsername1')
 .change(function(e) {
     var inputUsername = $(this);
     var username = inputUsername.val();

index.html

@@ -33,7 +33,7 @@
             <nav id="tabs">
                 <ul>
                     <li><button id="show-html">HTML</button></li>
-                    <li><button id="show-javascript">JavaScript</button></li>
+                    <li><button id="show-javascript">JS</button></li>
                 </ul>
             </nav>
             <button id="save-changes" class="icon-cloud-upload green"></button>

js/editor.js

@@ -17,7 +17,8 @@ $(document).ready(function() {
   var currentHash; 
   var editor;
   var editorStorage = new LocalStorageDraft();
-  var saveTimeout;
+  var saveTimeout1;
+  var saveTimeout2;
   var exampleList;
 
   $leftPanel.resizable({
@@ -42,6 +43,7 @@ $(document).ready(function() {
   editor.getSession().setUseWrapMode(true);
 
   function setCurrentHash(slug) {
+    console.log('setCurrentHash', slug)
     if(slug) {
       // console.log('save current hash', slug);
       window.location.hash = currentHash = slug;
@@ -65,10 +67,13 @@ $(document).ready(function() {
   }
 
   function editorContentChanged() {
-    if(saveTimeout) {
-      clearTimeout(saveTimeout);
+    console.log('editorContent changed')
+    if(saveTimeout1 || saveTimeout2) {
+      clearTimeout(saveTimeout1);
+      clearTimeout(saveTimeout2);
     }
-    saveTimeout = setTimeout(saveToLocalStorage, 1000);
+    saveTimeout1 = setTimeout(saveToLocalStorage, 500);
+    // saveTimeout2 = setTimeout(saveChanges, 1000);
   }
 
   editor.getSession().on('change', editorContentChanged);
@@ -81,11 +86,9 @@ $(document).ready(function() {
     $('#' + elementId).addClass('active');
     var ed = $('#editor-' + mode);
     setEditorMode(mode);
+    editor.getSession().off('change');
     editor.getSession().setValue(ed[0].innerHTML);
-    // var value = editorStorage.hasSource(mode) ?
-    //   editorStorage.getSource(mode) : ed[0].innerHTML;
-    // editor.getSession().setValue(value);
-
+    editor.getSession().on('change', editorContentChanged);
   }
 
   $('#tabs button').click(function() {
@@ -110,6 +113,7 @@ $(document).ready(function() {
   }
 
   function loadExample(exampleSlug) {
+    console.log('loadExample', exampleSlug);
     var serverPath = 'exemples/' + exampleSlug + '/';
     loadAsync(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))
@@ -129,9 +133,9 @@ $(document).ready(function() {
     .then(() => {
       var item = _.find(exampleList, { slug: exampleSlug });
       // console.log(item.test ? 'test' : 'no test');
-      loadJS('exemples/' + item.slug + '/test.js', function() {
-        $('#tests').show();
-      });
+      // loadJS('exemples/' + item.slug + '/test.js', function() {
+      //   $('#tests').show();
+      // });
     });
 
   }
@@ -147,7 +151,7 @@ $(document).ready(function() {
   function loadExampleList() {
     $.get('exemples/liste.json', function(_exampleList) {
       exampleList = _exampleList;
-      var didRestore;
+      var restoredDraft;
       exampleList.forEach(addFileSelectItem);
       if(currentHash) {
         $fileSelect.val(currentHash);
@@ -164,11 +168,11 @@ $(document).ready(function() {
           setHtmlContent(restoredDraft.sources.html);
           $editorJs.html(restoredDraft.sources.javascript);
           loadJS('exemples/' + item.slug + '/script.js');
-          if(item.test) {
-            loadJS('exemples/' + item.slug + '/test.js', function() {
-              $('#tests').show();
-            });
-          }
+          // if(item.test) {
+          //   loadJS('exemples/' + item.slug + '/test.js', function() {
+          //     $('#tests').show();
+          //   });
+          // }
           setActiveTab('html');
         }
       }

server.js

@@ -48,9 +48,11 @@ app.put('/examples/:slug', function(req, res) {
   if(req.body.javascript) {
     fs.writeFileSync(targetDir + '/script.js', req.body.javascript);
   }
+  var theDate = new Date();
+  console.log(theDate.getHours() + ':' + theDate.getMinutes() + " - Sauvegarde de l'exemple '" + existing.title + " effectuée'");
   res.json({ success: true });
 });
 
 
-
+console.log('Le serveur écoute sur le port 3000. Laissez cette console ouverte !')
 app.listen(3000);