From fab8668993605bfbc47ae68c1c8c1496d6d0b9eb Mon Sep 17 00:00:00 2001 From: Borys Levytskyi Date: Sat, 4 Apr 2015 17:00:06 +0300 Subject: [PATCH] Implemented indicators --- app/controllers.js | 14 +++++++---- app/dispatcher.js | 4 ++++ app/services.js | 3 ++- app/views.js | 1 - core/bindr.js | 58 +++++++++++++++++++++++++++++----------------- core/observable.js | 22 ++++++++++++++++-- css/styles.css | 2 ++ index.html | 14 ++++++----- 8 files changed, 82 insertions(+), 36 deletions(-) diff --git a/app/controllers.js b/app/controllers.js index 7e39660..8729f04 100644 --- a/app/controllers.js +++ b/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'; } }); diff --git a/app/dispatcher.js b/app/dispatcher.js index a82345c..aea14cf 100644 --- a/app/dispatcher.js +++ b/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; }); }); diff --git a/app/services.js b/app/services.js index 93911fa..446da4a 100644 --- a/app/services.js +++ b/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) { diff --git a/app/views.js b/app/views.js index be241d1..cf73626 100644 --- a/app/views.js +++ b/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; } diff --git a/core/bindr.js b/core/bindr.js index 25ba1a2..6b0ba84 100644 --- a/core/bindr.js +++ b/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; }); } diff --git a/core/observable.js b/core/observable.js index d655b4f..12bae9e 100644 --- a/core/observable.js +++ b/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); } }; diff --git a/css/styles.css b/css/styles.css index 57b79cf..40d1b8b 100644 --- a/css/styles.css +++ b/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} \ No newline at end of file diff --git a/index.html b/index.html index 387568a..1bf5806 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ + @@ -39,12 +40,12 @@ App on GitHub - -
- +
+ + + + Emphasize Bytes +
@@ -59,6 +60,7 @@
  • 23 34 — type one or more numbers to see their binary representations
  • clear — clear output pane
  • help — display this help
    • +
  • em — Turn On/Off Emphasize Bytes