re-render parts of the UI on nav

html/index.mustache.html

@@ -49,15 +49,15 @@
         {{/errorMessage}}
 
             <div id="details-repo" data-slug="{{path}}">
-        {{#repo}}
+            {{#repo}}
                 <strong>{{_.collection}} </strong><span>{{title}}</span>
                 <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
-        {{/repo}}
+            {{/repo}}
             </div>
             <div id="details-example" data-slug="{{slug}}">
-        {{#example}}
+            {{#example}}
                 <strong>{{_.example}} </strong><span>{{title}}</span>
-        {{/example}}
+            {{/example}}
             </div>
 
             <form id="add-example-form" style="display: none;">
@@ -93,12 +93,27 @@
 
 {{=<% %>=}}
 <script id="menu-example-tmpl" type="text/x-mustache-tmpl">
-{{#menuExample}}
+  {{#menuExample}}
   <div class="pure-u-1 pure-u-md-1-2">
-  <span class="cat-title">{{category.title}}</span>
-  <ul data-id="{{category.slug}}">{{#examples}}
-  <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
-</div>{{/menuExample}}
+    <span class="cat-title">{{category.title}}</span>
+    <ul data-id="{{category.slug}}">{{#examples}}
+      <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}
+    </ul>
+  </div>{{/menuExample}}
+</script>
+
+<script id="details-example-tmpl" type="text/x-mustache-tmpl">
+  {{#example}}
+    <strong>{{_.example}} </strong><span>{{title}}</span>
+  {{/example}}
+</script>
+
+<script id="tabs-tmpl" type="text/x-mustache-tmpl">
+  <ul id="tabs">{{#files}}
+    <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
+  {{/files}}
+  <li>+</li>
+  </ul>
 </script>
 <%={{ }}=%>
 

js/menu.js

@@ -56,41 +56,71 @@
       var oldNav = this.nav;
       this.nav = this.parsePath();
       console.log(this.nav, oldNav);
-      if(this.nav.repo === oldNav.repo && this.nav.example === oldNav.example) {
-        console.log('nav: nop');
-      }
-      // else if(this.nav.repo !== oldNav.repo && this.nav.example !== oldNav.example) {
-      //   console.log('nav: repo&example');
-      // }
-      else if(this.nav.repo === oldNav.repo) {
-        if(this.nav.example === '') {
-          console.log('nav: example empty');
-          console.log(_ws.events);
-          _ws.events.emit('navToRepoRoot');
-        }
-        else {
-          console.log('nav: example changed');
-          _ws.events.emit('navToExample', this.nav.repo); 
-        }
+
+      if(this.nav.repo !== oldNav.repo) {
+        console.log('nav: repo changed');
+        _ws.events.emit('navToRepo', this.nav.repo);
+        rp.get('/parts/' + this.nav.repo, 'json')
+        .then(function(parts) {
+          renderMenuExample(parts.menuExample);
+        });
       }
-      else if(this.nav.example === oldNav.example) {
-        if(this.nav.repo === '') {
-          console.log('nav: repo empty');
-          _ws.events.emit('navToRoot');
-        }
-        else {
-          console.log('nav: repo changed');
-          _ws.events.emit('navToRepo', this.nav.repo);
-          rp.get('/parts/' + this.nav.repo, 'json')
-          .then(function(parts) {
-            renderMenuExample(parts.menuExample);
-          });
-        }
+      else if(this.nav.example !== oldNav.example) {
+        console.log('nav: example changed');
+        _ws.events.emit('navToExample', this.nav.example);
+        rp.get('/parts/' + this.nav.repo + '/' + this.nav.example, 'json')
+        .then(function(parts) {
+          console.log(parts);
+          renderExample(parts);
+
+
+        });
       }
 
+
+      // if(this.nav.repo === oldNav.repo && this.nav.example === oldNav.example) {
+      //   console.log('nav: nop');
+      // }
+      // // else if(this.nav.repo !== oldNav.repo && this.nav.example !== oldNav.example) {
+      // //   console.log('nav: repo&example');
+      // // }
+      // else if(this.nav.repo === oldNav.repo) {
+      //   if(this.nav.example === '') {
+      //     console.log('nav: example empty');
+      //     console.log(_ws.events);
+      //     _ws.events.emit('navToRepoRoot');
+      //   }
+      //   else {
+      //     console.log('nav: example changed');
+      //     _ws.events.emit('navToExample', this.nav.repo); 
+      //   }
+      // }
+      // else if(this.nav.example === oldNav.example) {
+      //   if(this.nav.repo === '') {
+      //     console.log('nav: repo empty');
+      //     _ws.events.emit('navToRoot');
+      //   }
+      //   else {
+      //   }
+      // }
+
     };
 
+    function renderInto(id, parts) {
+      var tmpl = $('#' + id + '-tmpl').html();
+      console.log(tmpl);
+      $('#' + id).html( Mustache.render( tmpl, parts ) );
+    }
+
+    function renderTabs() {
+      renderInto('tabs', parts);
+    }
 
+    function renderExample(parts) {
+      var tmpl = $('#details-example-tmpl').html();
+      console.log(tmpl);
+      $('#details-example').html( Mustache.render( tmpl, parts ) );
+    }
     function renderMenuExample(menuExample) {
       var tmpl = $('#menu-example-tmpl').html();
       console.log(tmpl);

lib/partHandlers.js

@@ -0,0 +1,102 @@
+/* global __dirname */
+"use strict";
+var _             = require('lodash');
+var Mustache      = require('mustache');
+var path          = require('path');
+var fs            = require('fs');
+var {
+  readFilesAsync
+}                 = require('../lib/fsio');
+var translator    = require('../lib/translator');
+var passLog       = require('../lib/passLog');
+
+
+module.exports = function(exStore, exDir) {
+
+  function readExampleFiles(repoSlug, exampleSlug, config) {
+    const exampleDir = exDir + '/' + repoSlug + '/' + exampleSlug;
+    const libsCssDir = path.normalize(__dirname + '/../css/vendor');
+    const libsJsDir  = path.normalize(__dirname + '/../js/vendor');
+    const { html, js, css } = config; // libsCss, libsJs 
+
+    const files = [].concat(html, js, css);
+    return readFilesAsync(exampleDir, files);
+  }
+
+  function renderPart(req, withRepo, withExample) {
+
+    // Extract repoSlug and exampleSlug from req.params
+    const { locale, params: { repoSlug, exampleSlug } } = req;
+    let repo;
+    let menuExample;
+    let statusCode;
+
+    // Initialize view data
+    let data = {
+      // menuRepo: exStore.getRepoMenu(),
+      _: translator.getAll(locale)
+    };
+
+    // Fetch example repository if needed
+    if(withRepo) {
+      data.repo = exStore.getRepo(repoSlug);
+      if(! data.repo) {
+        // return res.status(404).send('Repo ' + req.params.repoSlug + ' not found');
+        data.errorMessage = translator.getOne(locale, "repoNotFound", [repoSlug]); //'Repo ' + params.repoSlug + ' not found';
+        statusCode = 404;
+      }
+      else {
+        data.menuExample = exStore.getExampleMenu(data.repo.path);
+      }
+    }
+
+    // Fetch example if needed
+    if(withExample && data.repo) {
+      data.example = _.find(data.repo.examples, { slug: exampleSlug });
+      if(! data.example) {
+        // return res.status(404).send('Example ' + req.params.repoSlug + '/' + req.params.exampleSlug + ' not found');
+        data.errorMessage = translator.getOne(locale, "exampleNotFound", [repoSlug, exampleSlug]);
+        statusCode = 404;
+      }
+    }
+
+    // Mustache.render(indexTpml, data);
+    return (
+      exampleSlug && data.example ?
+        readExampleFiles(repoSlug, exampleSlug, data.example) : Promise.resolve([])
+    ).then(files => Object.assign(data, { files }))
+    .then(passLog('data before rendering parts, path: ' + req.path));
+  }
+
+  return {
+
+
+    /**
+     * Get bare index without repo or examples
+     */
+    // getIndexBare: function(req, res) {
+    //   renderIndex(req)
+    //   .then(({ html, code }) => res.send(html));
+    // },
+
+
+    /**
+     * Get index with repo selected only
+     */
+    getPartsRepo: function(req, res) {
+      renderPart(req, true)
+      .then(data => res.json(data));
+    },
+
+
+    /**
+     * Get index with selected repo&example
+     */
+    getPartsExample: function(req, res) {
+      renderPart(req, true, true)
+      .then(data => res.json(data));
+    }
+
+  };
+
+};

sandboxApp.js

@@ -74,9 +74,15 @@ function mapObjToArray(obj, key, value) {
 }
 
 /**
- * Get repo menu
+ * Get repo parts
  */
- app.get('/parts/:repoSlug', getPartsRepo);
+app.get('/parts/:repoSlug', getPartsRepo);
+
+/**
+ * Get example parts
+ */
+app.get('/parts/:repoSlug/:exampleSlug', getPartsExample);
+
 
 /**
  * Index page: render with only repo list in menu