highlight current file tab

js/test/ws.test.js

@@ -73,7 +73,7 @@ function getId() {
       var done = assert.async();
       assert.equal( window.location.pathname, '/', "location should be / at first" );
       $linkToRepo1.trigger('click');
-      assert.equal( window.location.pathname, '/example-repo1', "location should be /example-repo1" );
+      assert.equal( window.location.pathname, '/example-repo-1', "location should be /example-repo-1" );
       timeoutAsync(() => {
         assert.equal( ($menuExample.find('a')).length, 1, "menu example should contain 1 entry" );
         assert.equal( $menuExample.find('a:first').html(), "Test Example", "link to 1st example should be labelled 'Test Example'" );
@@ -87,11 +87,11 @@ function getId() {
     QUnit.test( "test nav to example", function( assert ) {
       var done = assert.async();
       $linkToRepo1.trigger('click');
-      assert.equal( window.location.pathname, '/example-repo1', "location should be /example-repo1" );
+      assert.equal( window.location.pathname, '/example-repo-1', "location should be /example-repo-1" );
       assert.equal( ($menuExample.find('a')).length, 1, "menu example should contain 1 entry" );
       var $linkToExmp1 = $menuExample.find('a:first');
       $linkToExmp1.trigger('click');
-      assert.equal( window.location.pathname, '/example-repo1/repo1-example1', "location should be /example-repo1/repo1-example1" );
+      assert.equal( window.location.pathname, '/example-repo-1/repo1-example1', "location should be /example-repo-1/repo1-example1" );
       timeoutAsync(() => {
         assert.ok( $editor.is(':visible'), "editor visible" );
         assert.equal( _ws.files.length, 2, "_ws.files should hold 2 files" );

js/ws-editor.js

@@ -18,6 +18,7 @@ $(document).ready(function() {
   var $detailsExmp   = $('#details-example');
   var $window        = $(window);
   var activeMode     = 'html';
+  var currentFileIdx;
 
   var editor;
   var editorSession;
@@ -61,6 +62,10 @@ $(document).ready(function() {
     if(_ws.files.length > 0) {
       editorSession.setMode("ace/mode/html");
       var firstHtml = _ws.files.find(f => (f.type === 'html'));
+      currentFileIdx = _ws.files.indexOf(firstHtml);
+      _ws.ui.tabs.$elem
+      .find('li:eq(' + currentFileIdx + ')')
+      .addClass('bold');
       editorSession.setValue(firstHtml.content);
     }
   }
@@ -82,6 +87,13 @@ $(document).ready(function() {
     editorSession.setMode("ace/mode/" + mapTypes[type]);
     var name = clickedItem.html();
     var file = _ws.files.find(f => (f.name === name));
+    _ws.ui.tabs.$elem
+    .find('li:eq(' + currentFileIdx + ')')
+    .removeClass('bold');
+    currentFileIdx = _ws.files.indexOf(file);
+    _ws.ui.tabs.$elem
+    .find('li:eq(' + currentFileIdx + ')')
+    .addClass('bold');
     editorSession.setValue(file.content);
     // saveToLocalStorage();
     // var mode = $(this).prop('id').substr(5);
@@ -90,16 +102,43 @@ $(document).ready(function() {
   }
 
 
-  initEditor();
+  _ws.makeView('tabs', {
+    setCurrentFile: function(name) {
 
+    },
+    getCurrentTab: function() {
 
-  _ws.makeView('tabs', {
+    },
     events: {
       'click li[data-type]': onTabClicked
     }
   })
 
+  initEditor();
+
+
   _ws.makeView('editor', {
+    aceEditor: editor,
+    aceSession: editor.getSession(),
+
+    init: function() {
+      this.aceSession.on('change', this.editorContentChanged);
+    },
+
+    /**
+     * React to changes in editor by saving a copy
+     */
+    editorContentChanged: function() {
+      console.log('editorContent changed')
+      // if(saveTimeout1 || saveTimeout2) {
+      //   clearTimeout(saveTimeout1);
+      //   clearTimeout(saveTimeout2);
+      // }
+      // saveTimeout1 = setTimeout(saveToLocalStorage, 500);
+      // // saveTimeout2 = setTimeout(saveChanges, 1000);
+    },
+
+
     render: function() {
       console.log('render editor', this);
       setDefaultEditorContent();
@@ -134,20 +173,7 @@ $(document).ready(function() {
   // }
 
 
-  // /**
-  //  * React to changes in editor by saving a copy
-  //  */
-  // function editorContentChanged() {
-  //   // console.log('editorContent changed')
-  //   if(saveTimeout1 || saveTimeout2) {
-  //     clearTimeout(saveTimeout1);
-  //     clearTimeout(saveTimeout2);
-  //   }
-  //   saveTimeout1 = setTimeout(saveToLocalStorage, 500);
-  //   // saveTimeout2 = setTimeout(saveChanges, 1000);
-  // }
 
-  // editor.getSession().on('change', editorContentChanged);
 
 
   // function revertEditor() {

js/ws-ui-parts.js

@@ -126,8 +126,7 @@
 
       // Init if an init function was provided
       if(typeof v.props.init === 'function') {
-        var initFunc = v.props.init.bind(v);
-        initFunc();
+        (v.props.init.bind(v))();
       }
 
     };

test/integration/test-examples/example-repo-1/repo1-example1/config.json

@@ -2,7 +2,7 @@
   "title": "Test Example",
   "category": "test-stuff",
   "html": [ "example.html" ],
-  "js": [ "script.js" ],
+  "js": [ "script.js", "script-ja09bcew.js", "script-ja09cgm1.js", "script-ja09da79.js" ],
   "css": [],
   "libsJs": [],
   "libsCss": [ "styles.css" ]