save before refactoring&testing editor

css/styles.css

@@ -178,7 +178,9 @@ button.active {
 button:hover {
   opacity: 0.6;
 }
-#editor-js,#editor-html {
+#editor-js,
+#editor-html,
+#editor-css {
   /*display: none;*/
   position: absolute;
   top: 510px;
@@ -224,6 +226,9 @@ button {
 .green {
   background: #4b2;
 }
+.gray {
+  background: #888;
+}
 textarea,
 select,
 input {

exemples/selecteurs-multiples/contenu.html

@@ -1,5 +1,5 @@
 <h5>Sélection de boutons </h5>
-<p>Boutons cyan et magenta&nbsp;: enlève toutes les classes sur event clic</p>
+<p>Boutons cyan et magenta&nbsp;: enlève toutes les classes sur event click</p>
 <div>
   <button class="cyan bold-text">Cyan 1</button>
   <button class="cyan">Cyan 2</button>

index.html

@@ -34,6 +34,7 @@
                 <ul>
                     <li><button id="show-html">HTML</button></li>
                     <li><button id="show-javascript">JS</button></li>
+                    <li><button id="show-css">CSS</button></li>
                 </ul>
             </nav>
             <button id="save-changes" class="icon-cloud-upload green"></button>
@@ -41,6 +42,7 @@
         <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>
         <button id="revert-editor">!</button>
     </div>
 

js/editor.js

@@ -1,8 +1,10 @@
+"use strict";
 $(document).ready(function() {
 
   var $editor        = $('#editor');
   var $editorJs      = $('#editor-javascript');
   var $editorHtml    = $('#editor-html');
+  var $editorCss     = $('#editor-css');
   var $htmlContent   = $('#html-content');
   var $selectorNav   = $('#selector');
   var $fileSelect    = $('#file-select');
@@ -15,6 +17,7 @@ $(document).ready(function() {
   var $revertEditor  = $('#revert-editor');
   var $panelLeft     = $('.panel-left');
   var $panelRight    = $('.panel-right');
+  var $panelWrap     = $('.panel-container');
   var $window        = $(window);
   var activeMode     = 'html';
   var currentHash; 
@@ -24,6 +27,10 @@ $(document).ready(function() {
   var saveTimeout2;
   var exampleList;
 
+
+  /**
+   * Make the left panel resizable
+   */
   $panelLeft.resizable({
     handleSelector: ".splitter",
     resizeHeight: false,
@@ -31,12 +38,17 @@ $(document).ready(function() {
       $editor.width($panelLeft.width());
     }
   });
-  $window.resize(function() {
+
+
+  /**
+   * Handle window resize
+   */
+  function onResize() {
     $editor.width($panelLeft.width());
-    $(".panel-container").height($(window).height());
-  });
-  $(".panel-container").height($(window).height());
-  $editor.width($panelLeft.width());
+    $panelWrap.height($window.height());
+  }
+  $window.resize(onResize);
+  onResize();
 
 
   editor = ace.edit("editor");
@@ -44,30 +56,42 @@ $(document).ready(function() {
   editor.$blockScrolling = Infinity;
   editor.getSession().setUseWrapMode(true);
 
+
+  /**
+   * Set the current hash. If none given, take it from lococation.hash
+   */
   function setCurrentHash(slug) {
-    // console.log('setCurrentHash', slug)
     if(slug) {
-      // console.log('save current hash', slug);
       window.location.hash = currentHash = slug;
     }
     else {
       currentHash = window.location.hash ?
           window.location.hash.substr(1) : undefined;
-      // if(currentHash) console.log('restored current hash', currentHash);
     }
   }
 
+
+  /**
+   * Set editor mode (html, javascript, css)
+   */
   function setEditorMode(mode) {
     editor.getSession().setMode("ace/mode/" + mode);
   }
 
+
+  /**
+   * Save a copy in localStorage
+   */
   function saveToLocalStorage() {
     var editorContent =  editor.getSession().getValue();
-    // console.log('saveToLocalStorage', activeMode, editorContent.substr(0, 10) + '[...]');
     editorStorage.saveSource(activeMode, editorContent);
-    saveTimeout = undefined;
+    saveTimeout1 = undefined;
   }
 
+
+  /**
+   * React to changes in editor by saving a copy
+   */
   function editorContentChanged() {
     // console.log('editorContent changed')
     if(saveTimeout1 || saveTimeout2) {
@@ -81,7 +105,7 @@ $(document).ready(function() {
   editor.getSession().on('change', editorContentChanged);
 
   function setActiveTab(mode) {
-    // console.log('setting mode', mode);
+    console.log('setting mode', mode);
     var elementId = 'show-' + mode;
     $('#show-' + activeMode).removeClass('active');
     activeMode = mode;
@@ -119,10 +143,15 @@ $(document).ready(function() {
     var serverPath = 'exemples/' + exampleSlug + '/';
     loadAsync(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))
-    .then(() => loadAsync(serverPath + '/contenu.html', 'text'))
+    .then(() => loadAsync(serverPath + 'contenu.html', 'text'))
+    .then(() => loadAsync(serverPath + 'styles.css', 'text')
+      .then(css => $editorCss.html(css))
+      .catch(err => {
+        return '';
+      })
+    )
     .then(html => {
       $editorHtml.html(html);
-      // setHtmlContent(html);
       $('iframe.panel-right')
       .prop('src', '/examples/' + exampleSlug)
       setActiveTab('html');
@@ -132,7 +161,6 @@ $(document).ready(function() {
         javascript: $editorJs.html()
       };
       editorStorage.init(exampleSlug, sources);
-      // loadJS(serverPath + 'script.js');
     })
     .then(() => {
       var item = _.find(exampleList, { slug: exampleSlug });
@@ -168,8 +196,9 @@ $(document).ready(function() {
           loadExample(item.slug);
         }
         else {
+          console.log('restore', item.slug, restoredDraft.sources);
           $editorHtml.html(restoredDraft.sources.html);
-          // setHtmlContent(restoredDraft.sources.html);
+          $editorCss.html(restoredDraft.sources.css);
           $editorJs.html(restoredDraft.sources.javascript);
           $('iframe.panel-right')
           .prop('src', '/examples/' + item.slug)
@@ -187,11 +216,6 @@ $(document).ready(function() {
     }, 'json');
   }
 
-  function setHtmlContent(html) {
-    $htmlContent.empty();
-    $htmlContent.html(html);
-  }
-
   function notify(type, text) {
     $notification
     .addClass(type)
@@ -222,7 +246,7 @@ $(document).ready(function() {
         clearAndCloseEditor();
         addFileSelectItem(newExample);
         $fileSelect.val(newExample.slug);
-        $fileSelect.trigger('change');
+        // $fileSelect.trigger('change');
         notify('success', "Exemple créé !");
       },
       error: function(jqXHR, textStatus, errorThrown ) {