From 00c4716b8783754363c1558005bd33601c1c0876 Mon Sep 17 00:00:00 2001
From: ZitRo <zitros.lab@gmail.com>
Date: Tue, 26 May 2015 17:44:13 +0300
Subject: [PATCH] basic COS syntax highlighting feature

---
 README.md           |  2 +-
 package.json        |  2 +-
 web/css/syntax.css  | 27 +++++++++++++
 web/index.html      |  1 +
 web/js/ClassView.js |  2 +-
 web/js/Lib.js       | 97 +++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 web/css/syntax.css

diff --git a/README.md b/README.md
index e52151b..00cebdb 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ An UML Class explorer for InterSystems Caché.
 + Build diagrams for any package or subpackage;
 + Edit diagrams after build;
 + Export diagrams as an image;
-+ View class methods code;
++ View class methods code with syntax highlighting;
 + Zoom in and out, explore big packages and more.
 
 ## Screenshots
diff --git a/package.json b/package.json
index 89f55a7..b439bca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"
diff --git a/web/css/syntax.css b/web/css/syntax.css
new file mode 100644
index 0000000..a092b39
--- /dev/null
+++ b/web/css/syntax.css
@@ -0,0 +1,27 @@
+.syntax-comment {
+    color: green;
+}
+
+.syntax-string {
+    color: #394;
+}
+
+.syntax-vars, .syntax-keyword {
+    color: #00b;
+}
+
+.syntax-names {
+    color: #299;
+}
+
+.syntax-functions {
+    color: #986;
+}
+
+.syntax-global {
+    color: #800;
+}
+
+.syntax-other {
+    color: red;
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 52b7658..e243e9b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css/interface.css"/>
     <link rel="stylesheet" href="css/treeView.css"/>
     <link rel="stylesheet" href="css/extras.css"/>
+    <link rel="stylesheet" href="css/syntax.css"/>
     <link rel="stylesheet" href="css/classView.css"/>
     <link rel="stylesheet" href="css/joint.min.css"/>
     <link rel="stylesheet" href="css/methodCodeView.css"/>
diff --git a/web/js/ClassView.js b/web/js/ClassView.js
index b2f2985..0fe49fa 100644
--- a/web/js/ClassView.js
+++ b/web/js/ClassView.js
@@ -340,7 +340,7 @@ ClassView.prototype.showMethodCode = function (className, methodName) {
             + (data["arguments"] || "").replace(/,/g, ", ").replace(/:/g, ": ") + ")"
             + (data["returns"] ? ": " + data["returns"] : "");
         els.methodDescription.innerHTML = data["description"] || "";
-        els.methodCode.textContent = data["code"] || "";
+        els.methodCode.innerHTML = lib.highlightCOS(data["code"] || "");
         els.methodViewBounds.style.height =
             els.classView.offsetHeight - els.methodViewBounds.offsetTop + "px";
         els.methodCodeView.classList.add("active");
diff --git a/web/js/Lib.js b/web/js/Lib.js
index 6df7342..f61916a 100644
--- a/web/js/Lib.js
+++ b/web/js/Lib.js
@@ -49,6 +49,103 @@ Lib.prototype.capitalize = function (string) {
     return string[0].toUpperCase() + string.substr(1);
 };
 
+Lib.prototype.keyWords = {
+    "break": 0,
+    "catch": 0,
+    "close": 0,
+    "continue": 0,
+    "do": 0,
+    "d": 0,
+    "else": 0,
+    "elseif": 0,
+    "for": 0,
+    "goto": 0,
+    "halt": 0,
+    "hang": 0,
+    "h": 0,
+    "if": 0,
+    "job": 0,
+    "j": 0,
+    "kill": 0,
+    "k": 0,
+    "lock": 0,
+    "l": 0,
+    "merge": 0,
+    "new": 0,
+    "open": 0,
+    "quit": 0,
+    "q": 0,
+    "read": 0,
+    "r": 0,
+    "return": 0,
+    "set": 0,
+    "s": 0,
+    "tcommit": 0,
+    "throw": 0,
+    "trollback": 0,
+    "try": 0,
+    "tstart": 0,
+    "use": 0,
+    "view": 0,
+    "while": 0,
+    "write": 0,
+    "w": 0,
+    "xecute": 0,
+    "x": 0,
+    "zkill": 0,
+    "znspace": 0,
+    "zn": 0,
+    "ztrap": 0,
+    "zwrite": 0,
+    "zw": 0,
+    "zzdump": 0,
+    "zzwrite": 0,
+    "print": 0,
+    "zbreak": 0,
+    "zinsert": 0,
+    "zload": 0,
+    "zprint": 0,
+    "zremove": 0,
+    "zsave": 0,
+    "zzprint": 0,
+    "mv": 0,
+    "mvcall": 0,
+    "mvcrt": 0,
+    "mvdim": 0,
+    "mvprint": 0,
+    "zquit": 0,
+    "zsync": 0,
+    "ascii": 0
+};
+
+/**
+ * Highlight Caché Object Script code.
+ * @param {string} code
+ */
+Lib.prototype.highlightCOS = function (code) {
+    var self = this;
+    return code.replace(/[<>&]/g, function (r) {
+            return r === "<" ? "&lt;" : r === ">" ? "&gt;" : "&amp;"
+        }).replace(/(\/\/[^\n]*)\n|("[^"]*")|([\$#]{1,3}[a-zA-Z][a-zA-Z0-9]*)|\((%?[a-zA-Z0-9\.]+)\)\.|(%?[a-zA-Z][a-zA-Z0-9]*)\(|([a-zA-Z]+)|(\/\*[^]*?\*\/)|(\^%?[a-zA-Z][a-zA-Z0-9]*)/g, function (part) {
+            var i = -1, c;
+            [].slice.call(arguments, 1, arguments.length - 2).every(function (e) {
+                i++;
+                return e === undefined;
+            });
+            switch (i) {
+                case 0: c = "comment"; break;
+                case 1: c = "string"; break;
+                case 2: c = "vars"; break;
+                case 3: c = "names"; break;
+                case 4: c = "functions"; break;
+                case 5: c = self.keyWords.hasOwnProperty(part.toLowerCase()) ? "keyword" : "word"; break;
+                case 6: c = "comment"; break;
+                default: c = "other"
+            }
+            return part.replace(arguments[i+1], function (p) { return "<span class=\"syntax-" + c + "\">" + p + "</span>" });
+        });
+};
+
 /**
  * Contains graphic base64s for the application.
  */