add support for .json, .css and .hxx files

vispa/extensions/codeeditor/static/js/editor.js

 define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEditorActions, require) {
-  
+
   var CodeEditor = Emitter._extend({
-    
+
     init: function init(view) {
       init._super.call(this);
       var self = this;
-  
+
       this.view = view;
-  
+
       this.path = undefined;
-  
+
       this.ace = null;
       this.originalAceCommands = null;
-  
+
       this.keyupMinTimeout = null;
       this.keyupMaxTimeout = null;
-  
+
       this.node = null;
       this.manualSyntax = false;
-  
+
       this.actions = new CodeEditorActions(this, view);
-      
+
       this.view.on("stateChange", function(key) {
         if (key == "path") {
           if (!self.node) return;
           var path = this.getState("path");
           if (!path) return;
           if (self.path == path) return;
-          
+
           self.actions.checkModifications();
           if (self.view.isModified()) {
             // set it back to the current one, a successfull load will set it later
@@ -44,17 +44,17 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
           self.ace.gotoLine(this.getState("line"));
         }
       });
-      
+
       require(["ace/ace", "ace/ext/language_tools"]);
     },
-  
+
     setup: function(node) {
       var self = this;
-  
+
       var leftNode = node.find(".codeeditor-left");
-  
+
       this.node = node.find(".codeeditor-ace");
-      
+
       this.view.setLoading(true);
       require(["ace/ace", "ace/ext/language_tools"], function(ace) {
         leftNode.keyup(function() {
@@ -63,7 +63,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
           self.keyupMinTimeout = setTimeout(check, vispa.device.hasTouch ? 1000 : 500);
           self.keyupMaxTimeout = self.keyupMaxTimeout || setTimeout(check, 1000);
         });
-        
+
         ace.require("ace/ext/language_tools");
         self.ace = ace.edit($(self.node).get(0));
         self.ace.setOptions({
@@ -71,9 +71,9 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
           enableLiveAutocompletion: true,
           enableSnippets: true,
         });
-        
+
         self.ace.selection.on('changeCursor', function() {
-          var line = self.ace.selection.getCursor().row+1;
+          var line = self.ace.selection.getCursor().row + 1;
           if (!isNaN(line) && !self.view.isLoading()) {
             self.view.setState("line", line, 60);
           }
@@ -81,61 +81,61 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
         self.ace.focus();
         if (vispa.device.hasTouch)
           this.addOwnScrollBar();
-    
+
         self.actions.watchSetup();
-        
+
         // store all original ace commands
         self.originalAceCommands = $.extend(true, {}, self.ace.commands.commands);
-        
+
         // trigger loading of state again since we can handle it now
         self.view.emit("stateChange", "path");
-    
+
         self.view.setLoading(false);
       });
-  
+
       return this;
     },
-    
+
     setContent: function(content) {
       this.ace.setValue(content);
       return this;
     },
-  
+
     getContent: function() {
       return this.ace ? this.ace.getValue() : "";
     },
-  
+
     append: function(content) {
       this.goToBottom();
       this.ace.insert(content + "\n");
       return this;
     },
-  
+
     reset: function() {
       this.ace.setValue("");
       return this;
     },
-  
+
     getLength: function() {
       return this.ace.session.getLength();
     },
-  
+
     addOwnScrollBar: function() {
       $("head link[rel='stylesheet']").last().after("<link rel='stylesheet'" +
         "href='/extensions/codeeditor/static/css/ownScrollBar.css' " +
         "type='text/css'>");
     },
-  
+
     addComment: function() {
       //only possible if path is set
       if (!this.path)
         return this;
-  
+
       var type = this.path.split(".").pop();
-  
+
       var currentline = this.ace.selection.getCursor().row + 1;
       this.ace.gotoLine(currentline);
-  
+
       var sign = null;
       switch (type) {
         case "py":
@@ -156,36 +156,36 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       this.ace.insert(sign);
       return this;
     },
-  
-  
+
+
     goToBottom: function() {
       this.ace.gotoLine(this.getLength());
       return this;
     },
-  
+
     goToTop: function() {
       this.ace.gotoPageUp();
       this.ace.gotoLine(1);
       return this;
     },
-  
+
     find: function(key) {
       return this.ace.find(key).start;
     },
-  
+
     setMode: function(path) {
       path = path || this.path;
       if (path == null)
         return this;
-  
+
       var label = path;
       if (!this.view.getState("writable"))
         label = label + " Read-Only";
-  
+
       this.view.setLabel(label, true);
-  
+
       var fileExtension = path.split(".").pop().toLowerCase();
-  
+
       //set the icon (as defined for each extension)
       if (!~this.view._extension.fileExtensions.indexOf(fileExtension)) {
         console.log("File extension '" + fileExtension + "' is not supported by the ACE framework!");
@@ -193,14 +193,14 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       } else {
         this.view.setIcon("icon-" + fileExtension);
       }
-  
+
       this.setSyntaxHighlighting();
       return this;
     },
-  
+
     setSyntaxHighlighting: function(fileExtension) {
       var self = this;
-  
+
       if (fileExtension === undefined) {
         if (!this.manualSyntax) {
           fileExtension = this.path.split(".").pop().toLowerCase();
@@ -215,7 +215,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
 
       return this;
     },
-  
+
     applyShortcuts: function() {
       if (!this.ace)
         return this;
@@ -226,41 +226,41 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       $.each(this.originalAceCommands, function(key, data) {
         this.ace.commands.addCommand(data);
       }.bind(this));
-  
+
       // overwrite with custom commands
       var shortcuts = $.extend(true, {}, this.view._shortcuts);
       var shortcutData = $.extend(true, {}, this.view._extension._defaultShortcuts.CodeEditor);
-  
-    //entries with incorrect syntax due to key even indication
-    var notAllowed = [];
+
+      //entries with incorrect syntax due to key even indication
+      var notAllowed = [];
       $.each(shortcuts, function(name, key) {
-      if (/^key(down|press|up)\:/.test(key)) {
-        notAllowed.push(name);
-        return;
-      }
+        if (/^key(down|press|up)\:/.test(key)) {
+          notAllowed.push(name);
+          return;
+        }
         this.ace.commands.addCommand({
           name: name,
           exec: shortcutData[name].callback.bind(this.view),
-        bindKey: {
-          mac: key.replace(/^(\w+\:)?meta\+/, "command+"),
-          win: key.replace(/^(\w+\:)?meta\+/, "LWin")
-        }
+          bindKey: {
+            mac: key.replace(/^(\w+\:)?meta\+/, "command+"),
+            win: key.replace(/^(\w+\:)?meta\+/, "LWin")
+          }
         });
-  
+
       }.bind(this));
-  
-    if (notAllowed.length > 0) {
-      var msg = "<html>The event indication must be removed from the following" +
-        " shortcuts:</br>";
-      for (var i = 0; i < notAllowed.length; i++) {
-        msg = msg + "- " + notAllowed[i] + "</br>";
+
+      if (notAllowed.length > 0) {
+        var msg = "<html>The event indication must be removed from the following" +
+          " shortcuts:</br>";
+        for (var i = 0; i < notAllowed.length; i++) {
+          msg = msg + "- " + notAllowed[i] + "</br>";
+        }
+        msg = msg + "</html>";
+        self.view.alert(msg);
       }
-      msg = msg + "</html>";
-      self.view.alert(msg);
-    }
       return this;
     },
-  
+
     listAceShortcuts: function() {
       var $node = $("<table/>");
       var $header = $("<tr/>")
@@ -269,7 +269,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
         .append($("<th/>").html(" Mac "));
       $node.append($("<thead/>").append($header));
       $node.append("<tbody/>");
-  
+
       $.each(this.ace.commands.commands, function(key, data) {
         if (data.bindKey === undefined)
           return;
@@ -285,7 +285,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       $node.find("tbody").find("tr").sort(function(a, b) {
         return $("td:first", a).text().localeCompare($("td:first", b).text());
       }).appendTo($node);
-  
+
       this.view.dialog({
         header: "<i class='glyphicon glyphicon-flag'></i>" +
           " Defined Ace Shortcuts ",
@@ -296,13 +296,13 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
         }).html("Ace website")
       });
     },
-  
+
     resize: function() {
       if (this.ace)
         setTimeout(this.ace.resize.bind(this.ace, true), 1000);
       return this;
     },
-  
+
     setTheme: function(theme) {
       if (this.ace) {
         theme = theme == null ? this.view.getPreference("theme") : theme;
@@ -310,7 +310,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     setFontSize: function(size) {
       if (this.ace) {
         size = size == null ? this.view.getPreference("fontSize") : size;
@@ -318,7 +318,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     setShowInvisibles: function(show) {
       if (this.ace) {
         show = show == null ? this.view.getPreference("showInvisibles") : show;
@@ -326,7 +326,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     setShowIndentationGuides: function(show) {
       if (this.ace) {
         show = show == null ? this.view.getPreference("indentationGuides") : show;
@@ -334,7 +334,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     setTabIndentation: function(useTabs) {
       if (this.ace) {
         useTabs = useTabs == null ? this.view.getPreference("tabIndent") : useTabs;
@@ -342,7 +342,7 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     setRuler: function(position) {
       if (this.ace) {
         position = position == null ? this.view.getPreference("ruler") : position;
@@ -350,14 +350,16 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
       }
       return this;
     },
-  
+
     getAceMode: function(fileExtension) {
       var mode = "ace/mode/";
       switch (fileExtension) {
         case "c":
         case "cc":
         case "cpp":
+        case "cxx":
         case "h":
+        case "hxx":
           mode += "c_cpp";
           break;
         case "xml":
@@ -375,19 +377,21 @@ define(["jquery", "emitter", "./action", "require"], function($, Emitter, CodeEd
         case "py":
           mode += "python";
           break;
-      case "r":
-        mode += "r";
-        break;
-      case "m":
-        mode += "matlab";
-        break;
+        case "r":
+          mode += "r";
+          break;
+        case "m":
+          mode += "matlab";
+          break;
         default:
           mode += "text";
           break;
+        case "json":
+          mode += "json";
       }
       return mode;
     }
-  
+
   });
 
   return CodeEditor;

vispa/extensions/codeeditor/static/js/extension.js

@@ -29,8 +29,8 @@ define(["vispa/extensions", "./view", "./prefs"], function(extensions, CodeEdito
       ];
 
       // register to listen to certain file extensions
-      this.fileExtensions = ["bsc", "c", "cc", "conf", "cpp", "csh", "css", "diff", "f", "f70",
-        "f90", "f95", "f03", "h", "hh", "hpp", "html", "ini", "java", "js", "less", "log", "json",
+      this.fileExtensions = ["bsc", "c", "cc", "conf", "cpp", "csh", "css", "cxx", "diff", "f", "f70",
+        "f90", "f95", "f03", "h", "hh", "hxx", "hpp", "html", "ini", "java", "js", "less", "log", "json",
         "m", "md", "orig", "php", "py", "r", "rb", "sh", "tex", "txt", "xml", "yml", "yaml", "zsh"
       ];
 

vispa/extensions/codeeditor/static/js/prefs.js

@@ -191,6 +191,11 @@ define(function() {
     callback: function() {
       this.editor.setSyntaxHighlighting("matlab");
     }
+  }, {
+    id: "JSON",
+    callback: function() {
+      this.editor.setSyntaxHighlighting("json");
+    }
   }, {
     id: "Text",
     callback: function() {
@@ -198,10 +203,10 @@ define(function() {
       this.editor.setSyntaxHighlighting("");
     }
   }];
-  
+
   return {
-    preferences : defaultPreferences,
-    shortcuts   : defaultShortcuts,
+    preferences: defaultPreferences,
+    shortcuts: defaultShortcuts,
     highlightModeEntries: highlightModeEntries,
   }