File tree component

app/components/file-editor-column.js

@@ -26,6 +26,12 @@ export default Ember.Component.extend({
     return (this.get('col') | 0) === numColumns && numColumns < MAX_COLUMNS;
   }),
 
+  isFirstColumn: computed.equal('col', '1'),
+
+  showFileTreeOpenIcon: computed('isFirstColumn', 'fileTreeShown', function() {
+    return this.get('isFirstColumn') && !this.get('fileTreeShown');
+  }),
+
   focusIn () {
     this.sendAction('focusEditor', this);
   },
@@ -46,6 +52,10 @@ export default Ember.Component.extend({
 
     addColumn() {
       this.attrs.addColumn();
+    },
+
+    showFileTree() {
+      this.attrs.showFileTree();
     }
   }
 });

app/components/file-menu.js

@@ -31,7 +31,7 @@ export default Ember.Component.extend({
     },
     embed() {
       let src = window.location.href.split("?")[0];
-      src += "?numColumns=0";
+      src += "?fullScreen=true";
       let iframe = document.createElement("iframe");
       iframe.src = src;
       iframe.width = 800;

app/components/file-tree.js

@@ -0,0 +1,72 @@
+import Ember from "ember";
+import _ from 'lodash/lodash';
+
+const { computed } = Ember;
+
+export default Ember.Component.extend({
+  jsTreeActionReceiver: null,
+
+  /**
+   * Calculate data for file tree
+   */
+  fileTreeData: computed('model.files.[]', function() {
+    let seq = 0;
+    let treeData = this.get('model.files').map(function(file) {
+      let path = file.get('filePath');
+      let splitPath = path.split("/");
+      let parentPath = splitPath.slice(0, -1).join("/");
+      let fileName = splitPath[splitPath.length - 1];
+      if (parentPath === "") {
+        parentPath = "#";
+      }
+      return {
+        id: "node" + seq++,
+        text: fileName,
+        parent: parentPath,
+        icon: "glyphicon glyphicon-file light-gray",
+        path: path
+      };
+    });
+
+    let paths = _.uniq(_.pluck(treeData, 'text'));
+    let parents = _.uniq(_.pluck(treeData, 'parent'));
+    parents.forEach(function(parent) {
+      if (!paths.contains(parent) && parent !== "#") {
+        treeData.push({
+          id: "node" + seq++,
+          text: parent,
+          parent: "#",
+          icon: "glyphicon glyphicon-folder-open yellow"
+        });
+      }
+    });
+
+    let idMap = {};
+    treeData.forEach(function(node) {
+      idMap[node.text] = node.id;
+    });
+
+    treeData.forEach(function(node) {
+      if (node.parent !== "#") {
+        node.parent = idMap[node.parent];
+      }
+    });
+
+    return treeData;
+  }),
+
+  actions: {
+    handleSelectTreeNode(node) {
+      if (node.original.path) {
+        this.attrs.openFile(node.original.path);
+        return;
+      }
+      this.get('jsTreeActionReceiver').send('toggleNode', node.id);
+    },
+
+    hideFileTree() {
+      this.attrs.hideFileTree();
+    }
+  }
+
+});

app/gist/controller.js

@@ -17,8 +17,9 @@ export default Ember.Controller.extend({
   notify: inject.service('notify'),
   version: config.APP.version,
 
-  queryParams: ['numColumns'],
+  queryParams: ['numColumns', 'fullScreen'],
   numColumns: 2,
+  fullScreen: false,
 
   init() {
     this._super(...arguments);
@@ -72,6 +73,11 @@ export default Ember.Controller.extend({
    */
   isLiveReload: true,
 
+  /**
+   * Whether the file tree is currently shown
+   */
+  fileTreeShown: false,
+
   /**
    * Build the application and set the iframe code
    */
@@ -229,10 +235,26 @@ export default Ember.Controller.extend({
       this.set('activeFile', file);
     },
 
+    openFile(filePath) {
+      let file = this.get('model.files').findBy('filePath', filePath);
+      let activeCol = this.get('activeEditorCol') || '1';
+      this.setColumnFile(activeCol, file);
+      this.set('activeEditorCol', activeCol);
+      this.set('activeFile', file);
+    },
+
     runNow () {
       this.buildApp();
     },
 
+    showFileTree() {
+      this.set('fileTreeShown', true);
+    },
+
+    hideFileTree() {
+      this.set('fileTreeShown', false);
+    },
+
     deleteGist (gist) {
       if(confirm(`Are you sure you want to remove this gist from Github?\n\n${gist.get('description')}`)) {
         gist.destroyRecord();
@@ -333,6 +355,14 @@ export default Ember.Controller.extend({
       }).then(this.initializeColumns.bind(this));
     },
 
+    exitFullScreen() {
+      this.transitionToRoute({
+        queryParams: {
+          fullScreen: false
+        }
+      }).then(this.initializeColumns.bind(this));
+    },
+
     setEditorKeyMap (keyMap) {
       const settings = this.get('settings');
       settings.set('keyMap', keyMap);

app/gist/edit/route.js

@@ -12,7 +12,6 @@ export default GistRoute.extend({
     this._super.apply(this, arguments);
 
     let gistController = this.controllerFor('gist');
-    gistController.rebuildApp();
     Ember.run.schedule('afterRender', function() {
       gistController.set('unsaved', false);
     });

app/gist/template.hbs

@@ -31,23 +31,36 @@
 </div>
 
 <div class="row twiddle-panes">
-  {{#each columns as |column|}}
-    {{#if column.show}}
-      <div class="col-md-4 code {{if column.active 'active' ''}}">
-        {{file-editor-column col=column.col
-                             file=column.file
-                             allFiles=model.files
-                             keyMap=settings.keyMap
-                             numColumns=realNumColumns
-                             contentsChanged="contentsChanged"
-                             removeColumn=(action "removeColumn")
-                             addColumn=(action "addColumn")
+  {{#unless fullScreen}}
+    {{#if fileTreeShown}}
+      <div class="col-md-4 file-tree">
+        {{file-tree model=model
+                    openFile=(action "openFile")
+                    hideFileTree=(action "hideFileTree")
         }}
       </div>
     {{/if}}
-  {{/each}}
 
-  <div class="col-md-4 output">
+    {{#each columns as |column|}}
+      {{#if column.show}}
+        <div class="col-md-4 code {{if column.active 'active' ''}}">
+          {{file-editor-column col=column.col
+                               file=column.file
+                               allFiles=model.files
+                               keyMap=settings.keyMap
+                               numColumns=realNumColumns
+                               fileTreeShown=fileTreeShown
+                               contentsChanged="contentsChanged"
+                               removeColumn=(action "removeColumn")
+                               addColumn=(action "addColumn")
+                               showFileTree=(action "showFileTree")
+          }}
+        </div>
+      {{/if}}
+    {{/each}}
+  {{/unless}}
+
+  <div class="col-md-4 output {{if fullScreen 'full-screen'}}">
     <div class="header">
       {{#if noColumns}}
         <span class="glyphicon glyphicon-plus" {{action 'addColumn'}} title="Show an editor panel"></span>
@@ -62,6 +75,9 @@
       <div>{{applicationUrl}}</div>
     </div>
     {{dummy-demo-app html=buildOutput}}
+    {{#if fullScreen}}
+      <a class="exit-full-screen-link" {{action 'exitFullScreen'}}>Edit Twiddle</a>
+    {{/if}}
   </div>
 
 </div>

app/routes/gist-base-route.js

@@ -5,5 +5,6 @@ export default Ember.Route.extend({
     let gistController = this.controllerFor('gist');
     gistController.set('model', context);
     gistController.initializeColumns();
+    gistController.rebuildApp();
   }
 });

app/styles/app.scss

@@ -33,6 +33,14 @@ body {
   position: absolute;
 }
 
+.light-gray {
+  color: #cccccc;
+}
+
+.yellow {
+  color: #ffcc00;
+}
+
 .toolbar {
   height: $topbar-height;
   font-size: 13px;
@@ -241,24 +249,56 @@ body {
     background-color: #faf4f1;
     position: relative;
 
+    .nav-left {
+      position: absolute;
+      top: 18px;
+      left: 15px;
+    }
+
     .file-picker {
       margin-left: 15px;
       margin-top: 8px;
       margin-bottom: 0;
       position: absolute;
     }
 
+    .nav-left+.file-picker {
+      margin-left: 30px;
+    }
+
     .nav-right {
       position: absolute;
       top: 20px;
       right: 15px;
+    }
 
-      .glyphicon {
-        color: $navbar-default-link-color;
-        cursor: pointer;
-      }
+    .glyphicon {
+      color: $navbar-default-link-color;
+      cursor: pointer;
+    }
+  }
+
+  .full-screen {
+    .header {
+      display: none;
+    }
+
+    .run-or-live-reload {
+      display: none;
     }
   }
+
+  .exit-full-screen-link {
+    display: block;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    width: 100px;
+    margin-left: -50px;
+    text-align: center;
+    color: $dropdown-link-color;
+    cursor: pointer;
+  }
 }
 
 .dropdown {

app/templates/components/file-editor-column.hbs

@@ -1,4 +1,9 @@
 <div class="header">
+  {{#if showFileTreeOpenIcon}}
+    <span class="nav-left">
+      <span class="glyphicon glyphicon-chevron-right" {{action 'showFileTree'}} title="Show project explorer tree"></span>
+    </span>
+  {{/if}}
   <ul class="nav nav-pills file-picker">
     <li class="dropdown">
       {{#if allFiles.length}}

app/templates/components/file-tree.hbs

@@ -0,0 +1,9 @@
+<div class="header">
+  <div class="nav-right">
+    <span class="glyphicon glyphicon-chevron-left" {{action 'hideFileTree'}} title="Hide project explorer tree"></span>
+  </div>
+</div>
+{{ember-jstree data=fileTreeData
+               actionReceiver=jsTreeActionReceiver
+               eventDidSelectNode="handleSelectTreeNode"
+}}

bower.json

@@ -19,7 +19,8 @@
     "pretender": "~0.9.0",
     "ember-inflector": "~1.3.1",
     "lodash": "~3.10.0",
-    "Faker": "~3.0.0"
+    "Faker": "~3.0.0",
+    "jstree": "~3.2.0"
   },
   "resolutions": {
     "codemirror": "~5.6.0"