Implemented ability to emphasize bytes

app/controllers.js

@@ -74,4 +74,14 @@
     app.component('resultView', resultViewController);
     app.controller('resultViewCtrl', resultViewController);
 
+    app.controller('configPanelCtrl', {
+        onViewAttached: function (){
+            var chk = this.viewElement.querySelector('#displayBytes');
+            chk.checked = app.emphasizeBytes;
+            chk.addEventListener('change', function(evt){
+                app.emphasizeBytes = evt.srcElement.checked === true;
+            })
+        }
+    });
+
 })(window.app, window.is);

app/views.js

@@ -9,7 +9,7 @@
         $html:null,
         $calc:null,
         renderView: function(expr) {
-            var maxLen = this.$calc.maxNumberOfBits([expr.operand1, expr.operand2, expr.result]);
+            var maxLen = getBinaryLength([expr.operand1, expr.operand2, expr.result]);
             var $html = app.component('html');
 
             expr.operand1Binary = formatter.toBinaryString(expr.operand1, maxLen);
@@ -29,9 +29,15 @@
         $html:null,
         $calc:null,
         renderView: function(model) {
-            var maxLen = this.$calc.maxNumberOfBits(model.numbers);
+            var maxLen = getBinaryLength(model.numbers);
             var table = this.$html.element('<table class="expression"></table>');
 
+            if(app.emphasizeBytes) {
+                if(maxLen % 8 != 0) {
+                    maxLen += Math.floor(maxLen / 8) + 8;
+                }
+            }
+
             model.numbers.forEach(function(o){
 
                 var row = table.insertRow();
@@ -77,11 +83,26 @@
         }
     });
 
+    function getBinaryLength(arr) {
+        var bits = calc.maxNumberOfBits(arr);
+        if(app.emphasizeBytes && bits % 8 != 0) {
+            if(bits < 8) {
+                return 8;
+            }
+
+            var n = bits - (bits % 8);
+            return n + 8;
+        }
+        return bits;
+    }
+
     function colorizeBits(container) {
         var list = container.querySelectorAll('.bin');
         Array.prototype.forEach.call(list, function(el){
             var bin = el.innerText;
+
             el.innerHTML = bin
+                .replace(/(\d{8})/g, '<span class="byte">$1</span>')
                 .replace(/0/g, '<span class="zero">0</span>')
                 .replace(/1/g, '<span class="one">1</span>');
         });

components/viewsFeature.js

@@ -18,4 +18,5 @@
         var str = func.toString();
         return str.substr(8, str.indexOf('(') - 8).trim();
     }
+
 })(window.app, window.is);

css/styles.css

@@ -5,13 +5,14 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
 
-.result { margin: 10px 10px 20px; }
+.result { margin: 10px 10px 30px; }
 .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; text-align: right; }
 .expression .bin { letter-spacing: 3px; }
+.expression .byte { margin: 0 3px; }
 .expression .one { color: black }
 .expression .zero { color: #848586 }
 .expression .result td { border-top: dotted 1px gray; }

index.html

@@ -34,6 +34,12 @@
 </div>
 
 <input id="in" type="text" class="expressionInput" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
+<div data-controller="configPanelCtrl">
+    <label>
+        <input id="displayBytes" type="checkbox">
+        Emphasize Bytes
+    </label>
+</div>
 
 <div id="output" data-controller="resultView">
 </div>
@@ -128,14 +134,13 @@
            }
         });
 
+        app.emphasizeBytes = true; // TODO: Make into model
+
         app.bootstrap(document.getElementById('rootView'));
 
         app.debugMode = true;
 
         dispatcher.dispatch('help');
-        dispatcher.dispatch('1 2 3 4 5 6 7 8');
-        dispatcher.dispatch('3 << 4');
-        dispatcher.dispatch('233 | 322');
 
     })();