start integrating SyntaxHighlighter

scm-webapp/src/main/webapp/resources/css/style.css

@@ -42,6 +42,10 @@
    Syntax recommendation http://www.w3.org/TR/REC-CSS2/
 */
 
+body {
+  font-size: 12px;
+}
+
 a {
   color: #004077;
   text-decoration: none;
@@ -63,6 +67,7 @@ a:visited {
   color: #004077;
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
   margin-top: 20px;
+  font-size: 14px;
 }
 
 #appTitle h1 {

scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.repositorybrowser.js

@@ -39,9 +39,16 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
   iconDocument: 'resources/images/document.gif',
   templateIcon: '<img src="{0}" alt="{1}" title="{2}" />',
   templateLink: '<a class="scm-browser" rel="{1}" href="#">{0}</a>',
+  
+  syntaxes: null,
 
   initComponent: function(){
     
+    this.syntaxes = new Array();
+    this.syntaxes['java'] = 'resources/syntaxhighlighter/scripts/shBrushJava.js';
+    this.syntaxes['xml'] = 'resources/syntaxhighlighter/scripts/shBrushXml.js';
+    this.syntaxes['txt'] = 'resources/syntaxhighlighter/scripts/shBrushPlain.js';
+    
     var browserStore = new Sonia.rest.JsonStore({
       proxy: new Ext.data.HttpProxy({
         url: restUrl + 'repositories/' + this.repository.id  + '/browse.json',
@@ -105,7 +112,8 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
         click: {
           fn: this.onClick,
           scope: this
-        }
+        },
+        afterRender: this.afterRender
       }
     };
     
@@ -113,6 +121,14 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
     Sonia.repository.RepositoryBrowser.superclass.initComponent.apply(this, arguments);
   },
   
+  afterRender: function(){
+    // preload syntaxhighlighter
+    main.loadScript('resources/syntaxhighlighter/scripts/shCore.js');
+    main.loadStylesheet('resources/syntaxhighlighter/styles/shCore.css');
+    // theme onfigureable ??
+    main.loadStylesheet('resources/syntaxhighlighter/styles/shCoreDefault.css');
+  },
+  
   loadStore: function(store, records, extra){
     var path = extra.params.path;
     if ( path != null && path.length > 0 ){
@@ -170,10 +186,30 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
     return name
   },
   
+  getExtension: function(path){
+    var ext = null;
+    var index = path.lastIndexOf('.');
+    if ( index > 0 ){
+      ext = path.substr(index + 1, path.length);
+    }
+    return ext;
+  },
+  
   openFile: function(path){
     if ( debug ){
       console.debug( 'open file: ' + path );
     }
+    
+    var ext = this.getExtension( path );
+    var url = this.syntaxes[ext];
+    if ( url == null ){
+      // load plain on default
+      ext = "plain";
+      url = this.syntaxes['txt'];
+    }
+    
+    main.loadScript(url);
+    
     main.addTab({
       id: this.repository.id + "-b-"  + path,
       xtype: 'panel',
@@ -186,7 +222,8 @@ Sonia.repository.RepositoryBrowser = Ext.extend(Ext.grid.GridPanel, {
             Ext.Ajax.request({
               url: restUrl + 'repositories/' + this.repository.id  + '/content?path=' + path,
               success: function(response){
-                panel.update('<pre>' + Ext.util.Format.htmlEncode(response.responseText) + '</pre>');
+                panel.update('<pre class="brush: ' + ext + '">' + Ext.util.Format.htmlEncode(response.responseText) + '</pre>');
+                SyntaxHighlighter.highlight({}, panel.body.el);
               },
               failure: function(){
                 // TODO

scm-webapp/src/main/webapp/resources/js/sonia.scm.js

@@ -68,6 +68,8 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
   mainTabPanel: null,
   
   infoPanels: [],
+  scripts: [],
+  stylesheets: [],
 
   constructor : function(config) {
     this.addEvents('login', 'logout', 'init');
@@ -372,6 +374,27 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
         icon:Ext.MessageBox.ERROR
       });
     }
+  },
+  
+  loadScript: function(url){
+    if ( this.scripts.indexOf(url) < 0 ){
+      var js = document.createElement('script');
+      js.type = "text/javascript";
+      js.src = url;
+      document.head.appendChild(js);
+      this.scripts.push(url);
+    }
+  },
+  
+  loadStylesheet: function(url){
+    if ( this.stylesheets.indexOf(url) < 0 ){
+      var css = document.createElement('link');
+      css.rel = 'stylesheet';
+      css.type = 'text/css';
+      css.href = url;
+      document.head.appendChild(css);
+      this.stylesheets.push(url);
+    }
   }
 
 });