client/textanalyser_input: use classes

3 files changed, 43 insertions, 14 deletions

diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss
index 6669aa93..0a4345c9 100644
--- a/res/client/css/partials/input-bar.scss
+++ b/res/client/css/partials/input-bar.scss
@@ -137,3 +137,19 @@
 .ui-helper-hidden-accessible > div {
     color: $dark-grey;
 }
+
+.analyser-span-node {
+    color: blue;
+}
+
+.analyser-span-link {
+    color: red;
+}
+
+.analyser-span-space-node-link {
+    color: black;
+}
+
+.analyser-span-space-link-node {
+    color: black;
+}
diff --git a/res/client/css/style.css b/res/client/css/style.css
index 4dab218f..c5f7498c 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -426,6 +426,18 @@ body.debug .debug-ui-right {
 .ui-helper-hidden-accessible > div {
   color: #363636; }
 
+.analyser-span-node {
+  color: blue; }
+
+.analyser-span-link {
+  color: red; }
+
+.analyser-span-space-node-link {
+  color: black; }
+
+.analyser-span-space-link-node {
+  color: black; }
+
 .type_selection {
   color: #363636;
   font-size: 18px;
@@ -495,7 +507,7 @@ body.debug .debug-ui-right {
   border-top: 6px solid #363636; }
 
 .info.type-project {
-  border-top: 6px solid #40C200; }
+  border-top: 6px solid #40c200; }
 
 .info .info-card-attr {
   display: block;
@@ -552,7 +564,7 @@ body.debug .debug-ui-right {
 
 .kbd-button {
   background-color: #f7f7f7;
-  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
   border-radius: 3px;
   border: 1px solid lightgray;
   display: inline-block;
@@ -585,8 +597,8 @@ body.debug .debug-ui-right {
   width: 100%;
   min-height: 48px;
   text-align: center;
-  background-color: #D3F2F8;
-  color: #1D6E7F;
+  background-color: #d3f2f8;
+  color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf; }
 
@@ -814,7 +826,7 @@ p {
   fill: #8b3ab0; }
 
 .circle.project {
-  fill: #40C200; }
+  fill: #40c200; }
 
 .circle.third-internship-proposal {
   fill: #33c2e0; }
@@ -1139,5 +1151,3 @@ p {
 
 svg text::selection {
   background: none; }
-
-/*# sourceMappingURL=style.css.map */
diff --git a/src/client/view/textanalyser_input.js b/src/client/view/textanalyser_input.js
index be7532f2..88590445 100644
--- a/src/client/view/textanalyser_input.js
+++ b/src/client/view/textanalyser_input.js
@@ -1,5 +1,5 @@
-define(['jquery', 'Bacon_wrapper', 'util', 'view/completer', 'rz_bus', 'textanalysis', 'consts'],
-function($,        Bacon,           util,        completer,   rz_bus,   textanalysis,   consts)
+define(['jquery', 'Bacon_wrapper', 'underscore', 'util', 'view/completer', 'rz_bus', 'textanalysis', 'consts'],
+function($,        Bacon,           _,            util,        completer,   rz_bus,   textanalysis,   consts)
 {
 // Aliases
 var value = util.value;
@@ -38,20 +38,23 @@ function textanalyser_input(spec) {
     {
         var parts,
             base_parts,
+            classes = ['analyser-span-node', 'analyser-span-space-node-link',
+                       'analyser-span-link', 'analyser-span-space-link-node'],
             cursor_location = (undefined === input_cursor_location ? selectionStart() : input_cursor_location);
 
-        base_parts = current_text.split(/  /)
-        parts = base_parts.slice(0, base_parts.length - 1).map(function (l) { return l + '  '; });
+        base_parts = current_text.split(/   */)
+        parts = _.flatten(base_parts.slice(0, base_parts.length - 1).map(function (l) { return [l, '  ']; }));
         if (base_parts[base_parts.length - 1].length != 0) {
             parts.push(base_parts[base_parts.length - 1]);
         }
-        function span(text, color) {
-            return $('<span style="color: ' + color + '">' + text.replace(/ /g, nbsp) + '</span>')[0];
+        console.log(parts);
+        function span(text, clazz) {
+            return $('<span class="' + clazz + '">' + text.replace(/ /g, nbsp) + '</span>')[0];
         };
 
         element.text('');
         parts.map(function (part, index) {
-           element.append(span(part, index % 2 == 0 ? 'blue' : 'red'));
+           element.append(span(part, classes[index % classes.length]));
         });
         util.setSelection(element_raw, cursor_location, cursor_location);
         stretch_input_to_text_size(current_text);