Add highlightjs editor to view files

app/main.js

@@ -5,10 +5,11 @@ requirejs.config({
 		'plugins'				: '../lib/durandal/js/plugins',
 		'transitions'			: '../lib/durandal/js/transitions',
 		'knockout'				: '../lib/knockout.js/knockout',
-		'knockout.mapping'	: '../lib/bower-knockout-mapping/dist/knockout.mapping.min',
-		'knockout.validation': '../lib/knockout-validation/dist/knockout.validation.min',
-		'jquery'					: '../lib/jquery/jquery.min',
-		'perfect.scrollbar'	: '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery'
+		'knockout.mapping'		: '../lib/bower-knockout-mapping/dist/knockout.mapping.min',
+		'knockout.validation'	: '../lib/knockout-validation/dist/knockout.validation.min',
+		'jquery'				: '../lib/jquery/jquery.min',
+		'perfect.scrollbar'		: '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery',
+		'highlightjs'			: '../lib/highlightjs/highlight.pack'
 	},
 	shim: {
 		'knockout.mapping': {

app/shell.html

@@ -1,13 +1,15 @@
 <div class="row-fluid">
 	<aside class="col-md-3" id="filebrowser">
-    <div data-bind="widget: {kind:'filebrowser'}"></div>
-  </aside>
-  <main class="col-md-6" id="main">
-     <div class="scrollable" id="mainOutput">
-
-    </div>
-  </main> 
-  <aside class="col-md-3" id="helpPane">
-  
-  </aside>
+		<div data-bind="widget: {kind:'filebrowser'}"></div>
+	</aside>
+	
+	<main class="col-md-6" id="main">
+		<pre data-bind="visible: content">
+			<code data-bind="attr: {css: type}, text: content" id="editor"></code>
+		</pre>
+		<span class="text-center" data-bind="visible: !content()">Open file to view it.</span>
+	</main> 
+	
+	<aside class="col-md-3" id="helpPane">
+	</aside>
 </div>

app/shell.js

@@ -1,7 +1,26 @@
-define(function (require) {
-  var app = require('durandal/app'),
-      ko = require('knockout');
- 
-  return {
-   };
+define(['durandal/app', 'knockout', 'highlightjs'], function (app, ko) {
+	var type = ko.observable(),
+		content = ko.observable();
+	
+	var sub = app.on('filebrowser:open_file').then(function(message) {
+		type(message.type);
+		if( message.type === "json" ) {
+			content(ko.utils.stringifyJson(message.content));
+		} else {
+        	content(message.content);
+        }
+        hljs.highlightBlock($('#editor')[0]);
+    }, this);
+
+
+	return {
+		attached: function () {
+			hljs.configure({
+			  tabReplace: '  '
+			});
+			hljs.initHighlighting();
+		},
+		type: type,
+		content: content
+	};
 });

app/widgets/filebrowser/view.html

@@ -3,7 +3,8 @@
 		<!-- ko let: { loopRoot: $data } -->
 			<ul data-bind="template: { name: 'tree-template', foreach: folder().children() }" class="tree-file"></ul>
 		<!-- /ko -->
-	<!-- /ko -->
+	<!-- /ko -->
+	<span data-bind="visible: !folder()" class="text-center">Loading workspace...</span>
 
 	<script id="tree-template" type="text/html">
 		<!-- ko if: $data.type() === "folder" -->

app/widgets/filebrowser/viewmodel.js

@@ -37,8 +37,15 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
     };
 
     ctor.prototype.openFile = function(object, event) {
-        console.log('File dblclick ', arguments);
-    };
+        var type = arguments[0].extra();
+        http.get(arguments[0].path()).then(function(response) {
+	        app.trigger('filebrowser:open_file', {
+	        	type: type,
+	        	content: response
+	        });
+	   });
+    };
+    
     ctor.prototype.select = function(object, event) {
         if( !event.ctrlKey ) {
             $('li > span.select').removeClass('select');
@@ -72,7 +79,7 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
         posX = Math.min(posX - 45, windowWidth - menuWidth - 15);
         posY = Math.min(posY - 80, windowHeight - menuHeight - 10);
 
-        // affichage
+        // display
         contextMenu.css({
             left : posX + 'px',
             top : posY + 'px'
@@ -126,10 +133,9 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
     /** End of Context Menu */
 
   	http.get('/data/filesystem.json').then(function(response) {
-     	console.log(response);
         folder(ko.mapping.fromJS(response));
         $('#filebrowser').perfectScrollbar();
    });
-
+
     return ctor;
 });