Re-implemented flip bits functionality

src/css/styles.css

@@ -21,6 +21,8 @@ code { font-size: 1.2em; font-weight: bold; }
 .expression .label { font-weight:  bold; padding-right: 5px; text-align: right; }
 .expression .bin { letter-spacing: 3px; }
 .expression .byte { margin: 0 3px; }
+.expression .flipable { cursor: pointer; opacity: 1 }
+.expression .flipable:hover { opacity: 0.8 }
 .expression-result td { border-top: dotted 1px gray; }
 .expression { font-size: 1.5em; font-family: monospace }
 .expression .prefix { font-weight: normal; display: none; font-size: 0.9em }

src/index.html

@@ -147,7 +147,7 @@
 <script data-template="numbersList" data-compiled="" type="text/template">
     <table class="expression">
         {each op in m.operands}
-        <tr>
+        <tr data-kind="{op.kind}">
             <td class="label">{op.input}</td>
             <td class="bin">{op.bin.padLeft(m.bitsSize, '0')}</td>
             <td class="other">{op.other}</td>

src/js/app/bitwise/expression.js

@@ -36,6 +36,7 @@ app.set('expression', function() {
         addFactory: function(factory) {
           this.factories.push(factory);
         },
+        Operand:Operand,
         TwoOperandExpression: TwoOperandExpression,
         SingleOperandExpression: SingleOperandExpression,
         ListOfNumbersExpression: ListOfNumbersExpression,
@@ -207,5 +208,27 @@ app.set('expression', function() {
         return this.sign + this.operand1.toString();
     };
 
+    Operand.toKindString = function(value, kind) {
+        switch(kind) {
+            case 'hex':
+                var hexVal = Math.abs(value).toString(16);
+                return value >= 0 ? '0x' + hexVal : '-0x' + hexVal;
+            case 'bin':
+                return (value>>>0).toString(2);
+            case 'dec':
+                return value.toString(10);
+            default:
+                throw new Error("Unexpected kind: " + kind)
+        }
+    };
+
+    Operand.getOtherKind = function(kind) {
+        switch(kind) {
+            case 'dec': return 'hex';
+            case 'hex': return 'dec';
+            default : throw new Error(kind + " kind doesn't have opposite kind")
+        }
+    };
+
     return expression;
 });

src/js/app/modelViews.js

@@ -23,7 +23,16 @@ app.compose(function () {
     app.modelView(app.models.BitwiseNumbersViewModel, {
         renderView: function(model) {
             model.bitsSize = getBinaryLength(model.numbers);
-            return colorizeBits(app.template('numbersList').render(model));
+            var templateElement = colorizeBits(app.template('numbersList').render(model));
+            var list = templateElement.querySelectorAll('.bit');
+
+            Array.prototype.forEach.call(list, function(el) {
+                el.classList.add('flipable');
+                el.setAttribute('title', 'Click to flip this bit');
+                el.addEventListener('click', flipBits);
+            });
+
+            return templateElement;
         }
     });
 
@@ -72,20 +81,39 @@ app.compose(function () {
             }
 
             el.innerHTML = bin
-                .replace(/0/g, '<span class="zero">0</span>')
-                .replace(/1/g, '<span class="one">1</span>');
+                .replace(/0/g, '<span class="bit zero">0</span>')
+                .replace(/1/g, '<span class="bit one">1</span>');
         });
         return container;
     }
 
-    function getResultMode(operands) {
-        for(var i=0; i<operands.length; i++) {
-            if(operands[i] != null && operands[i].kind == 'hex') {
-                return 'hex';
-            }
+    function flipBits(evt) {
+        var el = evt.target;
+        var content = el.textContent;
+        if(content == '0') {
+            el.innerHTML = '1';
+            el.classList.remove('zero');
+            el.classList.add('one');
+        } else {
+            el.innerHTML = '0';
+            el.classList.add('zero');
+            el.classList.remove('one');
         }
 
-        return 'dec';
+        var row = findParent(el, 'TR');
+        var value = parseInt(row.cells[1].textContent, 2);
+        var kind = row.dataset.kind;
+
+        row.cells[0].innerHTML = expression.Operand.toKindString(value, kind);
+        row.cells[2].innerHTML = expression.Operand.toKindString(value, expression.Operand.getOtherKind(kind));
+    }
+
+    function findParent(el, tagName) {
+        var parent = el.parentNode;
+        while(parent.tagName != tagName) {
+            parent = parent.parentNode;
+        }
+        return parent;
     }
 });