Added styles to application

app/controllers.js

@@ -4,6 +4,7 @@
         $dispatcher:null,
         onViewAttached: function () {
             var d = this.$dispatcher;
+            this.viewElement.focus();
             this.viewElement.addEventListener('keyup', function (args) {
                 if (args.keyCode != 13) {
                     return;
@@ -17,20 +18,23 @@
     });
 
     app.service('resultView', {
+       $html: null,
        clear: function (){
            this.viewElement.innerHTML = '';
        },
-       display: function (htmlElement) {
+       onViewAttached: function(el) {
-           if(typeof htmlElement.tagName == "undefined") {
+           var r = 1;
-                htmlElement = app.buildViewFor(htmlElement);
+       },
-           }
+       display: function (input, model) {
+           var result = new app.models.DisplayResult(input, model);
+           var view = app.buildViewFor(result);
 
            var vw = this.viewElement;
            if(vw.childNodes.length == 0) {
-               vw.appendChild(htmlElement);
+               vw.appendChild(view);
            }
            else {
-               vw.insertBefore(htmlElement, vw.childNodes[0]);
+               vw.insertBefore(view, vw.childNodes[0]);
            }
        }
     });

app/models.js

@@ -19,9 +19,15 @@
         this.commands = commands;
     }
 
+    function DisplayResult (input, payload) {
+        this.input = input;
+        this.payload = payload;
+    }
+
     app.models.BitwiseOperation = BitwiseOperation;
     app.models.BitwiseNumbers = BitwiseNumbers;
     app.models.ErrorResult = ErrorResult;
     app.models.HelpResult = HelpResult;
+    app.models.DisplayResult = DisplayResult;
 
 })(window.app);

app/services.js

@@ -4,12 +4,12 @@
         builder: function () {
             return new HtmlBuilder();
         },
-        view: function (tml, model) {
+
-            var func = template.compile(tml);
+        element: function(template, model) {
-            return HtmlBuilder.createElement(func(model));
+            return HtmlBuilder.createElement(template, model);
         }
     });
-
+/*
     var template = {
         compile: function (template) {
             var regex = /(?:{([^}]+)})/g;
@@ -44,4 +44,5 @@
     function normalize(str) {
         return str.replace(/(\r|\n)+/g, '').replace("'", "\\\'");
     }
+ */
 })(window.app, window.HtmlBuilder);

app/views.js

@@ -62,7 +62,7 @@
         renderView: function(model) {
             var hb = this.$html.builder();
             var commands = model.commands;
-            hb.element('ul', { class: 'result' }, function() {
+            hb.element('ul', { class: 'help' }, function() {
                 commands.forEach(function(c) {
                     hb.element('li', c.name + " — " + c.description);
                 });});
@@ -70,5 +70,27 @@
         }
     });
 
+    app.modelView(app.models.ErrorResult, {
+        $html: null,
+        renderView: function(model) {
+            return this.$html.element('<div class="error">{message}</div>', model);
+        }
+    });
+
+    app.modelView(app.models.DisplayResult, {
+        $html: null,
+        renderView: function(model) {
+            var resultView = this.$html.element(
+                '<div class="result">' +
+                    '<div class="input">{input}</div>' +
+                    '<div class="payload"></div>' +
+                '</div>', model);
+
+            var payloadView = app.buildViewFor(model.payload);
+            resultView.childNodes[1].appendChild(payloadView);
+            return resultView;
+        }
+    });
+
 })(window.app);
 

components/htmlBuilder.js

@@ -38,7 +38,17 @@
         return HtmlBuilder.createElement(this.toString());
     };
 
-    HtmlBuilder.createElement = function(html) {
+    HtmlBuilder.createElement = function(template, model) {
+        var regex = /(?:{([^}]+)})/g, html;
+
+        if(model == null){
+            html = template;
+        } else {
+            html =  template.replace(regex, function(m, g1) {
+                return HtmlBuilder.escapeHtml(model[g1]);
+            });
+        }
+
         var el = document.createElement('div');
         el.innerHTML = html;
         return el.children[0];
@@ -53,12 +63,21 @@
         for(var key in attr) {
             if(key == 'html')
                 continue;
-            str.push(key + '="' + attr[key] + '"');
+            str.push(key + '="' + HtmlBuilder.escapeHtml(attr[key]) + '"');
         }
 
         return str.join(' ');
     }
 
+    HtmlBuilder.escapeHtml = function(html) {
+            return html
+                .replace(/&/g, "&")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+    };
+
     window.HtmlBuilder = HtmlBuilder;
 
 })();

css/styles.css

@@ -1,10 +1,18 @@
+body { font-family: Verdana; font-size: 0.8em }
+
+.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
+
+.result { margin: 10px 10px 20px; }
+.result .input { font-style: italic; margin-bottom: 10px; }
+.result .payload { padding-left: 10px}
+
 .expression .label { font-weight:  bold; padding-right: 5px }
 .expression .one { color: #6d9ad3 }
 .expression .zero { color: #70d351 }
-.expression .result td { border-top: solid 1px }
+.expression .result td { border-top: dotted 1px gray; }
+.expression td { padding: 3px; }
+.expression { font-size: 1.2em; }
 
 .error { color: maroon; }
 
-.result { margin: 10px;}
-
 #view { padding: 10px}

index.html

@@ -22,18 +22,16 @@
     <script type="text/javascript" src="app/views.js"></script>
 
     <script type="text/javascript" src="app/dispatcher.js"></script>
-    <script type="text/javascript" src="app/controllers.js"></script>
     <script type="text/javascript" src="app/services.js"></script>
-
+    <script type="text/javascript" src="app/controllers.js"></script>
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
 </head>
 <body id="rootView">
-<input id="in" type="text" data-controller="expressionInputCtrl"/>
-<div id="out" type="text" data-controller="resultViewCtrl"></div>
 
+<h2>Bitwise Operations Visualised</h2>
+<input id="in" type="text" class="expressionInput" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' for the "/>
 
-<div id="output">
+<div id="output" data-controller="resultView">
-
 </div>
 
 <script type="text/javascript">
@@ -54,7 +52,7 @@
                     return;
                 }
 
-                this.$resultView.display(expr);
+                this.$resultView.display(cmdArgs.input, expr);
 
                 cmdArgs.commandHandled = true;
             }
@@ -73,7 +71,7 @@
 
             var model = new app.models.HelpResult(commands);
 
-            resultView.display(model);
+            resultView.display(cmdArgs.input, model);
             cmdArgs.commandHandled = true;
         });
 
@@ -90,12 +88,8 @@
 
         // Unknown Expression
         app.command('dispatchInput', function(cmdArgs){
-            var hb = html.builder();
-            hb.element('div', { class: "result error", html: "Unknown expression: " + cmdArgs.input });
-
-            resultView.display(hb.toHtmlElement());
-
             cmdArgs.commandHandled = true;
+            resultView.display(cmdArgs.input, new app.models.ErrorResult("Unknown expression: " + cmdArgs.input))
         });
 
         app.bootstrap(document.getElementById('rootView'));