Implemented indicators

app/controllers.js

@@ -79,11 +79,15 @@ app.compose(function() {
 
     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;
-            })
+            var self = this;
+            self.update();
+            app.cmdConfig.observe(function(){
+                self.update();
+            });
+        },
+        update: function () {
+            var emIndicator = this.viewElement.querySelector('#emphasizeBytes');
+            emIndicator.style.display = app.cmdConfig.emphasizeBytes ? '' : 'none';
         }
     });
 

app/dispatcher.js

@@ -83,6 +83,10 @@ app.compose(function() {
             app.controller('resultViewCtrl').clear();
         });
 
+        dispatcher.command('em', function() {
+            app.cmdConfig.emphasizeBytes = !app.cmdConfig.emphasizeBytes;
+        });
+
         return dispatcher;
     });
 });

app/services.js

@@ -2,7 +2,8 @@
 
     app.set('html', core.HtmlBuilder);
     app.set('is', core.is);
-    app.set('should', core.should)
+    app.set('should', core.should);
+    app.set('bindr', core.bindr);
 /*
     var template = {
         compile: function (template) {

app/views.js

@@ -69,7 +69,6 @@ app.compose(function () {
         renderView: function(model) {
             var resultView = app.template('resultView').render(model);
             var contentView = app.buildViewFor(model.content);
-
             resultView.querySelector('.content').appendChild(contentView);
             return resultView;
         }

core/bindr.js

@@ -1,19 +1,13 @@
 (function(){
     var bindr = {};
 
-  bindr.bindElement = function(element, model, propertyName) {
-        if(element.bindr != null) {
-            return;
-        }
+    bindr.bindChildren = function(container, model) {
+         var elements = container.querySelectorAll('[data-bind]');
+         Array.prototype.call(elements, function(el){
+         });
+    };
 
-        if(element.tagName == "INPUT") {
-            bindInput(model, element, propertyName);
-        }
-        else {
-            bindHtmlElement(model, element, propertyName);
-        }
-
-        element.bindr = {}; // will be used later
+    bindr.bind = function(element, model, propertyName) {
     };
 
     bindr.attachView = function(viewElement, model) {
@@ -28,25 +22,47 @@
 
     };
 
+
     function bindInput(model, intput, propertyName) {
-        intput.addEventListener('keyup', function(e){
-            model[propertyName] = e.srcElement.value;
+        bindTextInput(intput, model, propertyName);
+    }
+
+    function bindCheckBox(element, model, propertyName) {
+        element.checked = model[propertyName];
+
+        element.addEventListener('changed', function (e) {
+            model[propertyName] = e.srcElement.checked == true;
         });
 
-        model.observe(function(property, value){
-            if(window.event && window.event.srcElement == intput) {
+        model.observe(propertyName, function (property, value) {
+            if (window.event && window.event.srcElement == element) {
                 return;
             }
 
-            intput.value = value;
+            element.checked = value;
+        });
+    }
+
+
+    function bindTextInput(input, model, propertyName) {
+        input.value = model[propertyName];
+
+        input.addEventListener('keyup', function (e) {
+            model[propertyName] = e.srcElement.value;
+        });
+
+        model.observe(propertyName, function (property, value) {
+            if (window.event && window.event.srcElement == input) {
+                return;
+            }
+
+            input.value = value;
         });
     }
 
     function bindHtmlElement(model, el, propertyName) {
-        model.observe(function(propery, value){
-            if(propery == propertyName) {
-                el.innerHTML = value;
-            }
+        model.observe(propertyName, function(propery, value){
+            el.innerHTML = value;
         });
     }
 

core/observable.js

@@ -1,4 +1,6 @@
 (function(core){
+    var is = core.is;
+
     function ObservableObject () {
         this.executionHandlers = [];
     }
@@ -33,9 +35,25 @@
         }
     };
 
-    ObservableObject.prototype.observe = function (handler){
+    ObservableObject.prototype.observe = function (property, handler){
+        var func;
+        if(is.aFunction(property)) {
+            func = property;
+        }
+        else if(is.string(property) && is.aFunction(handler)) {
+            func = function (p, v) {
+                if(p === property) {
+                    handler(p, v)
+                }
+            }
+        }
+        else {
+            console.warn('Unsupported set of arguments: ', arguments);
+            return;
+        }
+
         var handlers = this.executionHandlers;
-        var index = handlers.push(handler);
+        var index = handlers.push(func);
         return function () { handlers.splice(1, index); }
     };
 

css/styles.css

@@ -21,6 +21,8 @@ code { font-size: 1.2em; font-weight: bold; }
 .help { padding: 10px; background: #e0e0e0; }
 .help ul { list-style-type: none; margin: 0; padding: 0;  }
 
+.configPnl .indicator { font-size: 0.7em; background: darkblue; color: white; padding: 2px; }
+
 .error { color: maroon; }
 
 #view { padding: 10px}

index.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="core/appShell.js"></script>
     <script type="text/javascript" src="core/htmlBuilder.js"></script>
     <script type="text/javascript" src="core/observable.js"></script>
+    <script type="text/javascript" src="core/bindr.js"></script>
 
     <script type="text/javascript" src="app/app.js"></script>
 
@@ -39,12 +40,12 @@
     <a href="https://github.com/BorisLevitskiy/BitwiseCmd">App on GitHub</a>
 </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>
+    <input id="in" type="text" class="expressionInput" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
+
+    <span data-controller="configPanelCtrl" class="configPnl">
+         <span id="emphasizeBytes" class="indicator">Emphasize Bytes<span>
+    </span>
 </div>
 
 <div id="output" data-controller="resultViewCtrl">
@@ -59,6 +60,7 @@
                 <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>
+                <li><code>em</code> — Turn On/Off Emphasize Bytes</li>
             </ul>
         </p>