Removed ugly html building logic.

app/bitwise/expression.js

@@ -30,7 +30,7 @@
         var m = new app.models.BitwiseOperation();
         m.operand1 = o1;
         m.operand2 = o2;
-        m.sing = matches[2];
+        m.sign = matches[2];
         m.string = matches.input;
         m.result = eval(matches.input);
 

app/services.js

@@ -1,14 +1,6 @@
 (function(app, HtmlBuilder){
 
-    app.component('html', {
-        builder: function () {
-            return new HtmlBuilder();
-        },
-
-        element: function(template, model) {
-            return HtmlBuilder.createElement(template, model);
-        }
-    });
+    app.component('html', HtmlBuilder);
 /*
     var template = {
         compile: function (template) {

app/views.js

@@ -4,59 +4,50 @@
     var formatter = app.component('formatter');
     var calc = app.component('calc');
 
+
     app.modelView(app.models.BitwiseOperation, {
         $html:null,
-        renderView: function(model) {
-            return renderCalculableExpression(model, this.$html.builder());
+        $calc:null,
+        renderView: function(expr) {
+            var maxLen = this.$calc.maxNumberOfBits([expr.operand1, expr.operand2, expr.result]);
+            var $html = app.component('html');
+
+            expr.operand1Binary = formatter.toBinaryString(expr.operand1, maxLen);
+            expr.operand2Binary = formatter.toBinaryString(expr.operand2, maxLen);
+            expr.resultBinary = formatter.toBinaryString(expr.result, maxLen);
+
+            var templateId = /<<|>>/.test(expr.sign) ? 'shiftExpressionView' : 'binaryExpressionView';
+
+            var html = document.getElementById(templateId).innerHTML;
+            return $html.element(html, expr);
         }
     });
 
     app.modelView(app.models.BitwiseNumbers, {
         $html:null,
+        $calc:null,
         renderView: function(model) {
-            return renderListOfNumbers(model.numbers, this.$html.builder());
+            var maxLen = this.$calc.maxNumberOfBits(model.numbers);
+            var table = this.$html.element('<table class="expression"></table>');
+
+            model.numbers.forEach(function(o){
+
+                var row = table.insertRow();
+                var decCell = row.insertCell();
+
+                decCell.className = 'label';
+
+                var binCell = row.insertCell();
+                binCell.className = 'bin';
+
+                decCell.innerText = o;
+                binCell.innerText = formatter.toBinaryString(o, maxLen);
+            });
+
+            return table;
         }
     });
 
-    function renderCalculableExpression(expr, hb) {
-        var maxLen = calc.maxNumberOfBits([expr.operand1, expr.operand2, expr.result]);
-
-        hb.element('table', { class: "expression", cellspacing: "0"}, function () {
-            buildRow(hb, expr.operand1, formatter.toBinaryString(expr.operand1, maxLen));
-            buildRow(hb, expr.operand2, formatter.toBinaryString(expr.operand2, maxLen));
-            buildRow(hb, expr.result, formatter.toBinaryString(expr.result, maxLen), { class: 'result'});
-        });
-
-        return hb.toHtmlElement();
-    }
-
-    function renderListOfNumbers(numbers, hb) {
-        var maxLen = calc.maxNumberOfBits(numbers);
-
-        hb.element('table', { class: "expression", cellspacing: "0"}, function () {
-            numbers.forEach(function(o){
-                buildRow(hb, o, formatter.toBinaryString(o, maxLen));
-            });
-        });
-
-        return hb.toHtmlElement();
-    }
-
-    function buildRow(hb, label, binaryStr, attrs) {
-        hb.element('tr', attrs, function() {
-            hb.element('td', { class: "label"}, label);
-            appendBinaryColumns(hb, binaryStr);
-        });
-    }
-
-    function appendBinaryColumns(hb, binaryStr) {
-        var css;
-        for(var i=0;i<binaryStr.length;i++) {
-            css = binaryStr[i] == '1' ? 'one' : 'zero';
-            hb.element('td', { class: css }, binaryStr[i]);
-        }
-    }
-
     app.modelView(app.models.HelpResult, {
         $html: null,
         renderView: function(model) {

components/htmlBuilder.js

@@ -1,47 +1,15 @@
 (function(){
 
-    function HtmlBuilder() {
-        this.sb = [];
-    }
+    var HtmlBuilder = {};
 
-    HtmlBuilder.prototype.element = function(tagName, arg1, arg2) {
-        var attrs, elementContent;
-
-        if(typeof arg1 == "object") {
-            attrs = arg1;
-        }
-        else if(typeof arg1 == "string") {
-            attrs = { html: arg1 };
-        }
-        else {
-            attrs = {};
-        }
-
-        elementContent = attrs.html || arg2;
-
-        this.sb.push('<' + tagName + ' ' + getAttributesStr(attrs) + ">");
-
-        if(typeof elementContent == 'function')   {
-            elementContent();
-        } else if (elementContent != null) {
-            this.sb.push(elementContent.toString());
-        }
-
-        this.sb.push('</' + tagName + '>');
+    HtmlBuilder.element = function(template, model) {
+        var el = document.createElement('div');
+        el.innerHTML = HtmlBuilder.template(template, model);
+        return el.children[0];
     };
 
-    HtmlBuilder.prototype.toString = function () {
-        return this.sb.join('\r\n');
-    };
-
-    HtmlBuilder.prototype.toHtmlElement = function (){
-        return HtmlBuilder.createElement(this.toString());
-    };
-
-    HtmlBuilder.createElement = function(template, model) {
-
-        should.beString(template, "template")
-
+    HtmlBuilder.template = function(template, model) {
+        should.beString(template, "template");
         var regex = /(?:{([^}]+)})/g, html;
 
         if(model == null){
@@ -52,9 +20,7 @@
             });
         }
 
-        var el = document.createElement('div');
-        el.innerHTML = html;
-        return el.children[0];
+        return html;
     };
 
     function getAttributesStr(attr) {
@@ -72,14 +38,16 @@
         return str.join(' ');
     }
 
-    HtmlBuilder.escapeHtml = function(html) {
-            if(html == null) {
-                return html;
+    HtmlBuilder.escapeHtml = function(obj) {
+            if(obj == null) {
+                return obj;
             }
 
-            should.beString(html);
+            if(typeof obj != 'string') {
+                obj = obj.toString();
+            }
 
-            return html
+            return obj
                 .replace(/&/g, "&amp;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")

css/styles.css

@@ -6,16 +6,15 @@ code { font-size: 1.2em; font-weight: bold; }
 .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
 
 .result { margin: 10px 10px 20px; }
-.result .input { font-style: italic; margin-bottom: 10px;
-}
+.result .input { font-style: italic; margin-bottom: 10px; }
 .result .content { padding-left: 10px}
 .result .cur { color: lightgray; margin-right: 5px }
 
 .expression .label { font-weight:  bold; padding-right: 5px }
+.expression .bin { letter-spacing: 3px; }
 .expression .one { color: #6d9ad3 }
 .expression .zero { color: #70d351 }
 .expression .result td { border-top: dotted 1px gray; }
-.expression td { padding: 3px; }
 .expression { font-size: 1.5em; font-family: monospace }
 
 .help { padding: 10px; background: #e0e0e0; }

index.html

@@ -40,12 +40,28 @@
 
 <script id="helpView" type="text/template">
     <div class="help">
-        <ul>
-            <li><code>23 ^ 34</code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
-            <li><code>23 34</code> — type one or more numbers to see their binary representations</li>
-            <li><code>clear</code> — clear output pane</li>
-            <li><code>help</code> — display this help</li>
-        </ul>
+        <p class="section">
+            <strong>Supported Commands</strong>
+            <ul>
+                <li><code>23 ^ 34</code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
+                <li><code>23 34</code> — type one or more numbers to see their binary representations</li>
+                <li><code>clear</code> — clear output pane</li>
+                <li><code>help</code> — display this help</li>
+            </ul>
+        </p>
+
+
+        <p class="section">
+            <strong>Supportd Bitwise Operations</strong>
+           <ul>
+                <li><code>&</code> — bitwise AND</li>
+                <li><code>|</code> — bitwise inclusive OR</li>
+                <li><code>^</code> — bitwise exclusive XOR</li>
+                <li><code><<</code> — left shift</li>
+                <li><code>>></code> — right shift</li>
+                <li><code>~</code> — bitwise NOT (one's complement) (unary)</li>
+             </ul>
+        </p>
 
         <p style="font-style: italic">
             <strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
@@ -60,6 +76,41 @@
     </div>
 </script>
 
+<script id="shiftExpressionView" type="text/template">
+    <table class="expression">
+        <tr>
+            <td class="label">{operand1}</td>
+            <td class="bin">{operand1Binary}</td>
+        </tr>
+        <tr>
+            <td class="label">{operand1}{sign}{operand2}</td>
+            <td class="bin">{resultBinary}</td>
+        </tr>
+    </table>
+</script>
+
+<script id="binaryExpressionView" type="text/template">
+    <table class="expression">
+        <tr>
+            <td></td>
+            <td class="label">{operand1}</td>
+            <td class="bin">{operand1Binary}</td>
+        </tr>
+        <tr>
+            <td>{sign}</td>
+            <td class="label">{operand2}</td>
+            <td class="bin">{operand2Binary}</td>
+        </tr>
+        <tr>
+            <td>=</td>
+            <td class="label">{result}</td>
+            <td class="bin">{resultBinary}</td>
+        </tr>
+    </table>
+</script>
+
+
+
 <script type="text/javascript">
 
     (function(){
@@ -83,7 +134,8 @@
         app.debugMode = true;
 
         dispatcher.dispatch('help');
-        dispatcher.dispatch('3 ^ 4');
+        dispatcher.dispatch('3 << 4');
+        dispatcher.dispatch('233 | 322');
 
     })();