Add highlightjs editor to view files

app/main.js

@@ -8,7 +8,8 @@ requirejs.config({
 		'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'
+		'perfect.scrollbar'		: '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery',
+		'highlightjs'			: '../lib/highlightjs/highlight.pack'
 	},
 	shim: {
 		'knockout.mapping': {

app/shell.html

@@ -2,12 +2,14 @@
 	<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">
+		<pre data-bind="visible: content">
-
+			<code data-bind="attr: {css: type}, text: content" id="editor"></code>
-    </div>
+		</pre>
+		<span class="text-center" data-bind="visible: !content()">Open file to view it.</span>
 	</main> 
-  <aside class="col-md-3" id="helpPane">
 	
+	<aside class="col-md-3" id="helpPane">
 	</aside>
 </div>

app/shell.js

@@ -1,7 +1,26 @@
-define(function (require) {
+define(['durandal/app', 'knockout', 'highlightjs'], function (app, ko) {
-  var app = require('durandal/app'),
+	var type = ko.observable(),
-      ko = require('knockout');
+		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

@@ -4,6 +4,7 @@
 			<ul data-bind="template: { name: 'tree-template', foreach: folder().children() }" class="tree-file"></ul>
 		<!-- /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,7 +133,6 @@ 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();
    });

bower.json

@@ -1,5 +1,6 @@
 {
   "name": "filebrowser-durandal-widget",
+  "version": "0.0.1-SNAPSHOT",
   "dependencies" : {
     "durandal" 					: "~2.1.0",
     "knockout-validation"		: "~2.0.2",
@@ -9,6 +10,6 @@
     "fontawesome"				: "~4.3.0",
     "less.js"					: "~2.4.0",
     "lesshat"					: "~3.0.2",
-    "ace-min-noconflict"		: "~1.1.8"
+    "highlightjs"				: "~8.4.0"
   }
 }

data/filesystem.json

@@ -1,88 +1,147 @@
 {
-   "uuid":"folder1",
+   "uuid":"workspace",
-   "name":"root",
+   "name":"workspace",
    "type":"folder",
    "children":[
       {
-         "uuid":"docs",
+         "uuid":"app",
-         "name":"docs",
+         "name":"app",
          "type":"folder",
          "children":[
 		      {
-		         "uuid":"multimedia",
+		         "uuid":"widgets",
-		         "name":"multimedia",
+		         "name":"widgets",
 		         "type":"folder",
 		         "children":[
 		         	{
-		               "name":"movie.mov",
+		         		"uuid":"filebrowser",
-		               "uuid":"movie.mov",
+		         		"name":"filebrowser",
-		               "type":"video",
-		               "extra":false
-		            },
-		            {
-		               "name":"icon.ico",
-		               "uuid":"icon.ico",
-		               "type":"image",
-		               "extra":false
-		            },
-		            {
-		               "name":"picture.png",
-		               "uuid":"picture.png",
-		               "type":"image",
-		               "extra":false
-		            }
-		         ]
-		      },
-            {
-               "name":"readme.txt",
-               "uuid":"readme.txt",
-               "type":"text",
-               "extra":false
-            },
-            {
-               "name":"slideshow.mov",
-               "uuid":"slideshow.mov",
-               "type":"video",
-               "extra":false
-            },
-            {
-               "name":"slideshow.ppt",
-               "uuid":"slideshow.ppt",
-               "type":"powerpoint",
-               "extra":false
-            },
-            {
-               "name":"slideshow.docx",
-               "uuid":"slideshow.docx",
-               "type":"word",
-               "extra":false
-            }
-         ]
-      },
-      {
-         "uuid":"structural",
-         "name":"structural",
 		         		"type":"folder",
 		         		"children": [
 			         		{
-               "name":"structure.json",
+				               "name":"newItemModal.html",
-               "uuid":"structure.json",
+				               "uuid":"newItemModalhtml",
 				               "type":"code",
-               "extra":"json"
+				               "extra":"html",
+				               "path": "/app/widgets/filebrowser/newItemModal.html"
 				            },
 			         		{
-               "name":"structure.xml",
+				               "name":"newItemModal.js",
-               "uuid":"structure.xml",
+				               "uuid":"newItemModaljs",
 				               "type":"code",
-               "extra":"xml"
+				               "extra":"javascript",
+				               "path": "/app/widgets/filebrowser/newItemModal.js"
 				            },
 			         		{
-               "name":"structure.csv",
+				               "name":"renameModal.html",
-               "uuid":"structure.csv",
+				               "uuid":"renameModalhtml",
 				               "type":"code",
-               "extra":"csv"
+				               "extra":"html",
+				               "path": "/app/widgets/filebrowser/renameModal.html"
+				            },
+			         		{
+				               "name":"renameModal.js",
+				               "uuid":"renameModaljs",
+				               "type":"code",
+				               "extra":"javascript",
+				               "path": "/app/widgets/filebrowser/renameModal.js"
+				            },
+			         		{
+				               "name":"view.html",
+				               "uuid":"viewhtml",
+				               "type":"code",
+				               "extra":"html",
+				               "path": "/app/widgets/filebrowser/view.html"
+				            },
+			         		{
+				               "name":"viewmodel.js",
+				               "uuid":"viewmodeljs",
+				               "type":"code",
+				               "extra":"javascript",
+				               "path": "/app/widgets/filebrowser/viewmodel.js"
 				            }
 		         		]
 		         	}
 		         ]
+		      },
+		      {
+	               "name":"main.js",
+	               "uuid":"mainjs",
+	               "type":"code",
+	               "extra":"javascript",
+				   "path": "/app/main.js"
+	            },
+	            {
+	               "name":"shell.html",
+	               "uuid":"shellhtml",
+	               "type":"code",
+	               "extra":"html",
+				   "path": "/app/shell.html"
+	            },
+	            {
+	               "name":"shell.js",
+	               "uuid":"shelljs",
+	               "type":"code",
+	               "extra":"javascript",
+				   "path": "/app/shell.js"
+	            }
+         ]
+      },
+      {
+         "uuid":"data",
+         "name":"data",
+         "type":"folder",
+         "children":[
+            {
+               "name":"filesystem.json",
+               "uuid":"filesystemjson",
+               "type":"code",
+               "extra":"json",
+				"path": "/data/filesystem.json"
+            }
+         ]
+      },
+      {
+      	"uuid": "style",
+      	"name": "style",
+      	"type": "folder",
+      	"children": [
+      		{
+      			"name": "filebrowser.less",
+      			"uuid": "filebrowserless",
+      			"type": "code",
+      			"extra": "less",
+				"path": "/style/filebrowser.less"
+      		},
+      		{
+      			"name": "starterkit.css",
+      			"uuid": "starterkitcss",
+      			"type": "code",
+      			"extra": "less",
+				"path": "/style/starterkit.css"
+      		}
+      	]
+      },
+      {
+	      "uuid": "bowerrc",
+	      "name": ".bowerrc",
+	      "type": "code",
+	      "extra": "json",
+	      "path": "/.bowerrc"
+	  },
+      {
+	      "uuid": "bowerjson",
+	      "name": "bower.json",
+	      "type": "code",
+	      "extra": "json",
+	      "path": "/bower.json"
+	  },
+      {
+	      "uuid": "indexhtml",
+	      "name": "index.html",
+	      "type": "code",
+	      "extra": "html",
+	      "path": "/index.html"
+	  }
+   ]
 }

index.html

@@ -5,6 +5,7 @@
 		<link rel="stylesheet" href="lib/fontawesome/css/font-awesome.css"/>
 		<link rel="stylesheet" href="lib/durandal/css/durandal.css"/>
 		<link rel="stylesheet" href="lib/perfect-scrollbar/css/perfect-scrollbar.css" />
+		<link rel="stylesheet" href="lib/highlightjs/styles/github.css" />
 		  
 		<link rel="stylesheet" href="style/starterkit.css" />
 		<link rel="stylesheet/less" href="style/filebrowser.less" />
@@ -24,6 +25,7 @@
 				</div>
 			</div>
 		</nav>
+		
 		<div id="applicationHost">
 			<div class="splash">
 				<h1 class="message">Filebrowser Durandal widget</h1>
@@ -31,7 +33,7 @@
 			</div>
 		</div>
 	
-     
 		<script src="lib/requirejs/require.js" data-main="app/main"></script>
+		
 	</body>
 </html>

style/filebrowser.less

@@ -1,8 +1,7 @@
 @import "../lib/lesshat/build/lesshat.less";
 
 .filebrowser {
-	width: 300px;
+	max-height: 500px;
-	height: 500px;
 
 	
 	position: relative;