switching files works again

html/index.mustache.html

@@ -44,15 +44,9 @@
             <button id="save-changes" class="icon-cloud-upload green"></button>
 
 
-            <ul id="tabs">{{#html}}
-                <li class="tab-html">{{name}}</li>
-            {{/html}}
-            {{#js}}
-                <li class="tab-js">{{name}}</li>
-            {{/js}}
-            {{#css}}
-                <li class="tab-css">{{name}}</li>
-            {{/css}}
+            <ul id="tabs">{{#files}}
+                <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
+            {{/files}}
             <li>+</li>
             </ul>
         </div>
@@ -81,7 +75,7 @@
 <script src="/js/req-promise.js"></script>
 <script src="/js/editor-local-storage.js"></script>
 <script>
-window._webSandboxFiles = {{{files}}};
+window._webSandboxFiles = {{{filesJSON}}};
 console.log(window._webSandboxFiles);
 </script>
 <script src="/js/editor.js"></script>

js/editor.js

@@ -18,6 +18,7 @@ $(document).ready(function() {
   var $panelLeft     = $('.panel-left');
   var $panelRight    = $('.panel-right');
   var $panelWrap     = $('.panel-container');
+  var $tabItems      = $('#tabs li');
   var $window        = $(window);
   var activeMode     = 'html';
   var currentHash; 
@@ -27,7 +28,9 @@ $(document).ready(function() {
   var saveTimeout1;
   var saveTimeout2;
   var exampleList;
-
+  var mapTypes = {
+    html: 'html', js: 'javascript', css: 'css'
+  }
 
   $('#menu-btn').click(() => {
     $('#nav-menus').toggleClass('in');
@@ -64,11 +67,27 @@ $(document).ready(function() {
     editorSession.setUseWrapMode(true);
     if(_webSandboxFiles) {
       editorSession.setMode("ace/mode/html");
-      editorSession.setValue(_webSandboxFiles.html[0].content);
+      var firstHtml = _webSandboxFiles.find(f => (f.type === 'html'));
+      editorSession.setValue(firstHtml.content);
     }
   }
 
 
+  $tabItems.click(function() {
+    var clickedItem = $(this);
+    var type = clickedItem.data('type');
+    editorSession.setMode("ace/mode/" + mapTypes[type]);
+    var name = clickedItem.html();
+    var file = _webSandboxFiles.find(f => (f.name === name));
+    console.log(type, mapTypes[type], name, file);
+    editorSession.setValue(file.content);
+    // saveToLocalStorage();
+    // var mode = $(this).prop('id').substr(5);
+    // console.log( .html() );
+    // setActiveTab(mode);
+  })
+
+
 
 
   // /**
@@ -131,13 +150,6 @@ $(document).ready(function() {
   //   editor.getSession().on('change', editorContentChanged);
   // }
 
-  // $('#tabs button').click(function() {
-  //   saveToLocalStorage();
-  //   var mode = $(this).prop('id').substr(5);
-  //   setActiveTab(mode);
-  // })
-
-
 
   // function loadExample(exampleSlug) {
   //   // console.log('loadExample', exampleSlug);

sandboxApp.js

@@ -7,7 +7,7 @@ var slug         = require('slug');
 var beautify     = require("json-beautify");
 var _            = require('lodash');
 var fs           = require('fs');
-// var path         = require('path');
+var path         = require('path');
 var Promise      = require('bluebird');
 var Mustache     = require('mustache');
 var app          = express();
@@ -46,7 +46,7 @@ function readFilesAsync(fullPath, files) {
     (carry, f) => readFileAsync(fullPath + '/' + f)
       .then(content => 
         (carry.concat([{
-          // type: path.extname(f).substr(1),
+          type: path.extname(f).substr(1),
           name: f,
           content
         }]))
@@ -60,13 +60,8 @@ function readExampleFiles(repoSlug, exampleSlug, config) {
   const libsCssDir = __dirname + '/css/vendor';
   const libsJsDir  = __dirname + '/js/vendor';
   const { html, js, css } = config; // libsCss, libsJs 
-  return Promise.all([
-    readFilesAsync(exampleDir, html),
-    readFilesAsync(exampleDir, js),
-    readFilesAsync(exampleDir, css),
-    // readFilesAsync(libsJsDir, libsJs),
-    // readFilesAsync(libsCssDir, libsCss),
-  ]);
+  const files = [].concat(html, js, css);
+  return readFilesAsync(exampleDir, files);
 }
 
 
@@ -123,17 +118,14 @@ app.get('/:repoSlug/:exampleSlug',
     console.log(menuExample);
     const { repoSlug, exampleSlug } = req.params;
     readExampleFiles(repoSlug, exampleSlug, example)
-    .then(([ html, js, css ]) => {
-      console.log('example files', html, js, css);
+    .then(files => {
+      // console.log('example files', html, js, css);
       res.send(Mustache.render(indexTpml, {
         // title,
         menuRepo,
         menuExample,
-        html,
-        js,
-        css,
-        mainHtml: html[0].content,
-        files: JSON.stringify({ html, js, css })
+        files,
+        filesJSON: JSON.stringify(files)
       }));
     });
 });