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.mapping'		: '../lib/bower-knockout-mapping/dist/knockout.mapping.min',
-		'knockout.validation': '../lib/knockout-validation/dist/knockout.validation.min',
+		'knockout.validation'	: '../lib/knockout-validation/dist/knockout.validation.min',
-		'jquery'					: '../lib/jquery/jquery.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

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

bower.json

@@ -1,5 +1,6 @@
 {
-  "name": "filebrowser-durandal-widget",
+  "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",
+		         		"type":"folder",
-		               "extra":false
+		         		"children": [
-		            },
+			         		{
-		            {
+				               "name":"newItemModal.html",
-		               "name":"icon.ico",
+				               "uuid":"newItemModalhtml",
-		               "uuid":"icon.ico",
+				               "type":"code",
-		               "type":"image",
+				               "extra":"html",
-		               "extra":false
+				               "path": "/app/widgets/filebrowser/newItemModal.html"
-		            },
+				            },
-		            {
+			         		{
-		               "name":"picture.png",
+				               "name":"newItemModal.js",
-		               "uuid":"picture.png",
+				               "uuid":"newItemModaljs",
-		               "type":"image",
+				               "type":"code",
-		               "extra":false
+				               "extra":"javascript",
-		            }
+				               "path": "/app/widgets/filebrowser/newItemModal.js"
+				            },
+			         		{
+				               "name":"renameModal.html",
+				               "uuid":"renameModalhtml",
+				               "type":"code",
+				               "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":"readme.txt",
+	               "name":"main.js",
-               "uuid":"readme.txt",
+	               "uuid":"mainjs",
-               "type":"text",
+	               "type":"code",
-               "extra":false
+	               "extra":"javascript",
-            },
+				   "path": "/app/main.js"
-            {
+	            },
-               "name":"slideshow.mov",
+	            {
-               "uuid":"slideshow.mov",
+	               "name":"shell.html",
-               "type":"video",
+	               "uuid":"shellhtml",
-               "extra":false
+	               "type":"code",
-            },
+	               "extra":"html",
-            {
+				   "path": "/app/shell.html"
-               "name":"slideshow.ppt",
+	            },
-               "uuid":"slideshow.ppt",
+	            {
-               "type":"powerpoint",
+	               "name":"shell.js",
-               "extra":false
+	               "uuid":"shelljs",
-            },
+	               "type":"code",
-            {
+	               "extra":"javascript",
-               "name":"slideshow.docx",
+				   "path": "/app/shell.js"
-               "uuid":"slideshow.docx",
+	            }
-               "type":"word",
-               "extra":false
-            }
          ]
       },
       {
-         "uuid":"structural",
+         "uuid":"data",
-         "name":"structural",
+         "name":"data",
          "type":"folder",
          "children":[
             {
-               "name":"structure.json",
+               "name":"filesystem.json",
-               "uuid":"structure.json",
+               "uuid":"filesystemjson",
                "type":"code",
-               "extra":"json"
+               "extra":"json",
-            },
+				"path": "/data/filesystem.json"
-            {
-               "name":"structure.xml",
-               "uuid":"structure.xml",
-               "type":"code",
-               "extra":"xml"
-            },
-            {
-               "name":"structure.csv",
-               "uuid":"structure.csv",
-               "type":"code",
-               "extra":"csv"
             }
          ]
-      }
+      },
+      {
+      	"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

@@ -4,34 +4,36 @@
 		<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css"/>
 		<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/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" />
+		<link rel="stylesheet" href="style/starterkit.css" />
-     
+		<link rel="stylesheet/less" href="style/filebrowser.less" />
-     	<script>
+	 
-        less = {
+		<script>
-          env: "development"
+			less = {
-        };
+				env: "development"
-      </script>
+			};
-     	<script src="lib/less.js/dist/less.min.js"></script>
+		</script>
+		<script src="lib/less.js/dist/less.min.js"></script>
 	</head>
 	<body>
-     	<nav class="navbar navbar-default">
+		<nav class="navbar navbar-default">
-        	<div class="container-fluid">
+			<div class="container-fluid">
-           <div class="navbar-header">
+				<div class="navbar-header">
 					<a class="navbar-brand" href="#">Filebrowser Durandal Widget</a>             	
-           </div>
+				</div>
-        </div>
+			</div>
-      </nav>
+		</nav>
+		
 		<div id="applicationHost">
-			 <div class="splash">
+			<div class="splash">
-	            <h1 class="message">Filebrowser Durandal widget</h1>
+				<h1 class="message">Filebrowser Durandal widget</h1>
-	            <i class="fa fa-spinner fa-2x fa-spin active"></i>
+				<i class="fa fa-spinner fa-2x fa-spin active"></i>
-	        </div>
+			</div>
 		</div>
-
+	
-     
+		<script src="lib/requirejs/require.js" data-main="app/main"></script>
-		<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;