textanalyser: switch to div, update to create blue and red spans (Fixes #118 almost entirely)

Missing:
 - no placeholder text now (since div doesn't support it). Will need to
   implement it myself, there are plenty of examples

And code wise:
 - need to split out a component graph_input.js which will hide
   the underlying implementation.

1 files changed, 15 insertions, 0 deletions

diff --git a/src/client/textanalysis.ui.js b/src/client/textanalysis.ui.js
index 95c9903f..913395cc 100644
--- a/src/client/textanalysis.ui.js
+++ b/src/client/textanalysis.ui.js
@@ -245,6 +245,21 @@ var analyze_element_text = function()
         finalize: false,
     });
     input.push({where: consts.INPUT_WHERE_TEXTANALYSIS, input: text});
+    selection_start = selectionStart(element_raw);
+    value(element_raw, ''); // this removes span elements as well
+    // here we stop treating the element as an input, this only works on a div/other "normal" element
+    base_parts = spaced_text.split(/  /)
+    parts = 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>');
+    }
+    parts.map(function (part, index) {
+        element.append(span(part, index % 2 == 0 ? 'blue' : 'red'));
+    });
+    setSelection(element_raw, selection_start, selection_start);
     stretch_input_to_text_size();
 }