Filebrowser Component

bower.json

@@ -25,7 +25,10 @@
     "jquery-fullscreen": "~1.1.4",
     "cjs": "*",
     "ace": "~1.2.2",
-    "browserfs": "0.5.8"
+    "browserfs": "0.5.8",
+    "ace": "~1.2.2",
+    "bootstrap-contextmenu": "^0.3.4",
+    "bootbox.js": "^4.4.0"
   },
   "devDependencies": {},
   "resolutions": {

gulp-tasks/build-js.js

@@ -53,6 +53,7 @@ const requireJsOptimizerFilesConfig = [
             'components/vm-state-label/vm-state-label',
             'components/compiler-state-label/compiler-state-label',
             'components/not-found-page/not-found-page',
+            'components/file-browser/file-browser',
             'ace/mode/c_cpp',
             'ace/theme/monokai',
             'ace/theme/terminal',

src/app/require.config.js

@@ -29,6 +29,9 @@ require.config({
         "FileSaver":            "bower_modules/FileSaver/FileSaver.min", // exports window global "saveAs"
         "Blob":                 "bower_modules/Blob/Blob", // exports window global "Blob"
         "browserfs":            "bower_modules/browserfs/dist/browserfs.min",
+        "bootstrap-contextmenu":"bower_modules/bootstrap-contextmenu/bootstrap-contextmenu",
+        "bootbox":              "bower_modules/bootbox.js/bootbox",
+
 
         // Application-specific modules
         "app/config":           "app/config/config.dev" // overridden to 'config.dist' in build config
@@ -38,7 +41,9 @@ require.config({
         "jquery-ui": { deps: ["jquery"] },
         "jquery-ui-layout": { deps: ["jquery", "jquery-ui"] },
         "jquery-fullscreen": { deps: ["jquery"] },
-        "typeahead-jquery": { deps: ["jquery"] }
+        "typeahead-jquery": { deps: ["jquery"] },
+        "bootbox": { deps: ["jquery"] },
+        "bootstrap-contextmenu": { deps: ["bootstrap"] }
     },
     packages: [
         {

src/app/startup.js

@@ -38,6 +38,7 @@ ko.components.register('playground-footer', { require: 'components/playground-fo
 ko.components.register('vm-state-label', { require: 'components/vm-state-label/vm-state-label' });
 ko.components.register('compiler-state-label', { require: 'components/compiler-state-label/compiler-state-label' });
 ko.components.register('not-found-page', { require: 'components/not-found-page/not-found-page' });
+ko.components.register('file-browser', { require: 'components/file-browser/file-browser' });
 // [Scaffolded component registrations will be inserted here. To retain this feature, don't remove this comment.]
 
 // Start the application

src/app/sys-global-observables.js

@@ -15,4 +15,9 @@ export var gccErrorCount = ko.observable(0);
 export var gccWarningCount = ko.observable(0);
 export var editorAnnotations = ko.observableArray([]);
 
+export var currentFileName = ko.observable('untitled');
+export var currentFilePath = ko.observable('');
+
 export var projectLicense = ko.observable('');
+
+export var Editor = {};

src/components/editor/editor.html

@@ -9,7 +9,11 @@
                 <label class="control-label sr-only" for="editor-font-size">font size (in pixels)</label>
                 <input data-bind="value: prefs.fontSize" id="editor-font-size" type="number" class="form-control input-sm">
             </div>
-            <div class="col-md-2"></div>
+            <div class="col-md-2">
+                <button id="current-code-btn" type="button" class="btn btn-default btn-sm center-block">
+                    <span class="glyphicon glyphicon-file"></span> <span class="file-name" data-bind="text: currentFileName">untitled</span>
+                </button>
+            </div>
             <div class="col-md-2">
                 <button id="autoindent-code-btn" type="button" class="btn btn-default btn-sm center-block">
                     <span class="glyphicon glyphicon-indent-left"></span> Indent code

src/components/editor/editor.js

@@ -6,6 +6,7 @@ import 'bloodhound';
 import TokenHighlighter from 'components/editor/token-highlighter';
 import 'Blob';
 import 'FileSaver';
+import * as SysGlobalObservables from 'app/sys-global-observables';
 
 class Editor {
     constructor(params) {
@@ -18,6 +19,8 @@ class Editor {
         prefs.fontSize = params.fontSize;
         this.prefs = prefs;
 
+        this.currentFileName = SysGlobalObservables.currentFileName;
+
         this.availableThemes = ko.observableArray(['monokai', 'terminal', 'tomorrow', 'xcode']);
 
         this.annotations = params.annotations;
@@ -42,8 +45,8 @@ class Editor {
 
         $('#download-file-btn').click(() => {
             var text = this.getText();
-            var blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
-            saveAs(blob, 'program.c');
+            var blob = new Blob([text]);
+            saveAs(blob, SysGlobalObservables.currentFileName());
         });
 
         $('#autoindent-code-btn').click(() => {
@@ -54,6 +57,8 @@ class Editor {
         $(window).resize(this.resize.bind(this));
 
         params.editorTextGetter(this.getText.bind(this));
+
+        SysGlobalObservables.Editor = this;
     }
 
     initAce(editorDivId) {
@@ -227,6 +232,14 @@ class Editor {
         return this.aceEditor.getSession().getValue();
     }
 
+    setFile(path, filename, text) {
+        var session = this.aceEditor.getSession();
+
+        session.setValue(text);
+
+        return;
+    }
+
     resize() {
         // We resize after a timeout because when the window resize handler is called,
         // the window may not have resized completely, and hence the calculation below would

src/components/file-browser/file-browser.html

@@ -0,0 +1,7 @@
+<div id="file-browser">
+    <div id="file-browser-context-menu">
+        <ul class="dropdown-menu" role="menu">
+        </ul>
+    </div>
+    <div id="file-browser-body"><span class="loading">Loading...</span></div>
+</div>