almost there, only need to re-render menu example on add example

css/styles.css

@@ -438,7 +438,7 @@ input {
   margin: 10px 0;
 }
 .details-div .left {
-  width: 270px;
+  width: 310px;
 }
 .bold {
   font-weight: bold;

html/index.mustache.html

@@ -29,7 +29,7 @@
               <div class="pure-u-1">
                 <span class="cat-title">{{_.exampleCollections}}</span>
                 <ul class="nav-menu">{{#menuRepo}}
-                  <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
+                  <li><a href="/{{path}}">{{title}}</a></li>{{/menuRepo}}
                 </ul>
               </div>
             </div>
@@ -53,7 +53,7 @@
               <div class="inline-block left">
                 <section id="shortcut-repo"{{#repo}} class="hidden"{{/repo}}>
                   <div class="bold">{{_.exampleCollections}}</div><ul>{{#menuRepo}}
-                    <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
+                    <li><a href="/{{path}}">{{title}}</a></li>{{/menuRepo}}
                   </ul>
                 </section>
                 <section id="details-repo" class="inline-block">
@@ -75,7 +75,7 @@
 
             <div class="details-div">
               <div class="inline-block left">
-                <section id="shortcut-example"{{#example}} class="hidden"{{/example}}>
+                <section id="shortcut-example"{{^showShortcutExample}} class="hidden"{{/showShortcutExample}}>
                   <div class="bold">{{_.examplesInCollection}}</div>{{#menuExample}}
                   <span class="cat-title">{{category.title}}</span>
                   <ul data-id="{{category.slug}}">{{#examples}}
@@ -169,10 +169,19 @@
 
 <script data-tmpl-for="shortcut-repo" type="text/x-mustache-tmpl">
   <div class="bold">{{_.exampleCollections}}</div><ul>{{#repos}}
-    <li><a href="/{{slug}}">{{title}}</a></li>{{/repos}}
+    <li><a href="/{{path}}">{{title}}</a></li>{{/repos}}
   </ul>
 </script>
 
+<script data-tmpl-for="menu-repo" type="text/x-mustache-tmpl">
+  <div class="pure-u-1">
+    <span class="cat-title">{{_.exampleCollections}}</span>
+    <ul class="nav-menu">{{#repos}}
+      <li><a href="/{{path}}">{{title}}</a></li>{{/repos}}
+    </ul>
+  </div>
+</script>
+
 <script data-tmpl-for="shortcut-example" type="text/x-mustache-tmpl">
   <div class="bold">{{_.examplesInCollection}}</div>{{#menuExample}}
   <span class="cat-title">{{category.title}}</span>

js/ws-editor.js

@@ -104,15 +104,14 @@ $(document).ready(function() {
       console.log('render editor', this);
       setDefaultEditorContent();
       $editorWrapper.show();
+      this.$elem.removeClass('hidden');
     }
   });
 
   _ws.makeView('sandbox-iframe', {
-    render: function(navState) {
-      console.log('change iframe src', '/examples/' + navState.repo + '/' + navState.example);
-      this.$elem.prop('src',
-        '/examples/' + navState.repo + '/' + navState.example
-      );
+    render: function(src) {
+      // console.log('change iframe src', '/examples/' + navState.repo + '/' + navState.example);
+      this.$elem.prop('src', src);
     }
   });
 

js/ws-forms.js

@@ -73,23 +73,21 @@ function checkPropsExist(obj, props) {
         this.$form  = this.$elem.find('form');
         this.$input = this.$form.find('input[name="title"]');
         callbacks.forEach(function(cbName) {
-          console.log('binding cb', cbName);
           self[cbName] = options[cbName].bind(self);
         });
         if(options.postInit) {
           (options.postInit.bind(this))();
         }
-        console.log('init add repo form', this.$elem.prop('id'))
       },
 
       reset: function() {
+        console.log('reset', this);
         this.$btn.addClass('in');
         this.$form.removeClass('in');
-        this.$input.val();
+        this.$input.val('');
       },
 
       render: function() {
-        console.log('render form add ', this.$elem.prop('id'));
         this.$btn.removeClass('in');
         this.$form.addClass('in');
         this.$input.focus();
@@ -138,7 +136,8 @@ function checkPropsExist(obj, props) {
       return rp.post('/repos', { title: title });
     },
     onAddSuccess: function(repo) {
-      console.log('****** onAddSuccess repo', repo);
+      _ws.repos.push(repo);
+      _ws.ui.menuRepo.render({ repos: _ws.repos });
       _ws.notify('success', 'Collection créée: ' + repo.title);
       _ws.navigateTo('/' + repo.path);
     },
@@ -152,7 +151,6 @@ function checkPropsExist(obj, props) {
       return rp.post('/' + _ws.repo.path + '/examples', { title: title });
     },
     onAddSuccess: function(example) {
-      console.log('****** onAddSuccess example', example);
       _ws.notify('success', 'Exemple crée: ' + example.title);
       _ws.navigateTo('/' + _ws.repo.path + '/' + example.slug);
     },

js/ws-menu.js

@@ -85,18 +85,32 @@
         }
       }
       else if(navState.example !== prevNavState.example) {
-        rp.get('/parts/' + navState.repo + '/' + navState.example, 'json')
-        .then(function(parts) {
-          console.log('nav: example changed', parts);
-          _ws.example = parts.example;
-          _ws.files = parts.files;
-          console.log(_ws.ui);
-          // renderDetailsExample(parts);
-          _ws.ui.detailsExample.render(parts);
-          _ws.ui.editor.render(parts);
-          _ws.ui.tabs.render(parts);
-          _ws.ui.sandboxIframe.render(navState);
-        });
+        if(navState.example !== '') {
+          rp.get('/parts/' + navState.repo + '/' + navState.example, 'json')
+          .then(function(parts) {
+            console.log('nav: example changed', parts);
+            _ws.example = parts.example;
+            _ws.files = parts.files;
+            console.log(_ws.ui);
+            // renderDetailsExample(parts);
+            $('#editor-wrapper').show();
+            _ws.ui.shortcutExample.hide();
+            _ws.ui.detailsExample.render(parts);
+            _ws.ui.editor.render(parts);
+            _ws.ui.tabs.render(parts);
+            _ws.ui.addFile.show();
+            console.log('#### render iframe with navState', navState);
+            _ws.ui.sandboxIframe.render('/examples/' + navState.repo + '/' + navState.example);
+          });
+        }
+        else {
+          $('#editor-wrapper').hide();
+          _ws.ui.shortcutExample.show();
+          _ws.ui.editor.hide();
+          _ws.ui.tabs.hide();
+          _ws.ui.addFile.hide();
+          _ws.ui.sandboxIframe.render('/html/start-iframe.html');
+        }
       }
     }
 
@@ -131,12 +145,30 @@
       }
     });
 
+
+    /**
+     * Initialize menu-repo view
+     */
+    _ws.makeView('menu-repo', {
+      events: {
+        'click a': menuItemClicked
+      }
+    });
+
+
+    /**
+     * Initialize shortcut-repo view
+     */
     _ws.makeView('shortcut-repo', {
       events: {
         'click a': shortcutItemClicked
       }
     });
 
+
+    /**
+     * Initialize shortcut-example view
+     */
     _ws.makeView('shortcut-example', {
       events: {
         'click a': shortcutItemClicked
@@ -146,18 +178,9 @@
 
 
     /**
-     * Initialize menu-example view
-     */
-    // _ws.makeView('menu-repo', {
-    //   events: {
-    //     'click a': menuItemClicked
-    //   }
-    // });
-
-    /**
      * Handle click on links outside #menu-example
      */
-    $('#menu-repo a').click(menuItemClicked);
+    // $('#menu-repo a').click(menuItemClicked);
     $('#nav-back-home').click(function(e) {
       e.preventDefault();
       $mainMenu.removeClass('in');

lib/ExampleStore.js

@@ -79,7 +79,7 @@ ExampleStore.prototype.getList = function(path) {
 
 ExampleStore.prototype.getRepoMenu = function(path) {
   return this.repos.map(
-    ({ title, path }) => ({ title, slug: path }) 
+    ({ title, path }) => ({ title, path })
   )
 };
 

lib/indexHandlers.js

@@ -86,6 +86,7 @@ module.exports = function(exStore, exDir, testMode) {
         data.showEditor = true;
       }
     }
+    data.showShortcutExample = data.repo && ! data.example;
 
     // Mustache.render(indexTpml, data);
     return (