mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity

Implemented templated views in script tags

Browse Source
This commit is contained in:
Borys Levytskyi
2015-04-03 20:25:40 +03:00
parent 665bedbc85
commit 9a40c1e3bd
5 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.idea/

19
app/views.js
View File

@@ -60,13 +60,8 @@
app.modelView(app.models.HelpResult, {
$html: null,
renderView: function(model) {
var hb = this.$html.builder();
var commands = model.commands;
hb.element('ul', { class: 'help' }, function() {
commands.forEach(function(c) {
hb.element('li', c.name + " — " + c.description);
});});
return hb.toHtmlElement();
var template = document.getElementById('helpView').innerHTML;
return this.$html.element(template);
}
});
@@ -80,14 +75,10 @@
app.modelView(app.models.DisplayResult, {
$html: null,
renderView: function(model) {
var resultView = this.$html.element(
'<div class="result">' +
'<div class="input"><span class="cur">&gt;</span>{input}</div>' +
'<div class="content"></div>' +
'</div>', model);
var resultView = this.$html.element(document.getElementById('resultView').innerHTML, model);
var contentView = app.buildViewFor(model.content);
resultView.childNodes[1].appendChild(contentView);
resultView.querySelector('.content').appendChild(contentView);
return resultView;
}
});

4
components/modelViewsFeature.js → components/viewsFeature.js
View File

@@ -1,4 +1,4 @@
(function(app){
(function(app, is){
app.modelView = function (modelCtor, builder) {
var name = getKey(modelCtor);
app.di.register(name, builder);
@@ -18,4 +18,4 @@
var str = func.toString();
return str.substr(8, str.indexOf('(') - 8).trim();
}
})(window.app);
})(window.app, window.is);

7
css/styles.css
View File

@@ -1,4 +1,8 @@
body { font-family: Verdana; font-size: 0.8em }
code { font-size: 1.2em; font-weight: bold; }
.links { float: right; position: absolute; right: 10px; top: 10px; }
.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
@@ -15,6 +19,9 @@ body { font-family: Verdana; font-size: 0.8em }
.expression td { padding: 3px; }
.expression { font-size: 1.2em; }
.help { padding: 10px; background: #e0e0e0; }
.help ul { list-style-type: none; margin: 0; padding: 0; }
.error { color: maroon; }
#view { padding: 10px}

44
index.html
View File

@@ -12,7 +12,7 @@
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="components/controllersFeature.js"></script>
<script type="text/javascript" src="components/modelViewsFeature.js"></script>
<script type="text/javascript" src="components/viewsFeature.js"></script>
<script type="text/javascript" src="app/bitwise/calc.js"></script>
<script type="text/javascript" src="app/bitwise/expression.js"></script>
<script type="text/javascript" src="app/bitwise/formatter.js"></script>
@@ -28,11 +28,38 @@
<body id="rootView">
<h2>Bitwise Operations Visualised</h2>
<div class="links">
<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 id="output" data-controller="resultView">
</div>
<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 style="font-style: italic">
<strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
</p>
</div>
</script>
<script id="resultView" type="text/template">
<div class="result">
<div class="input"><span class="cur">&gt;</span>{input}</div>
<div class="content"></div>
</div>
</script>
<script type="text/javascript">
(function(){
@@ -40,13 +67,7 @@
var dispatcher = app.get('dispatcher');
dispatcher.command('help', function() {
var commands = [
{ name: '1>>2', description: 'Displays result of expression'},
{ name: 'help', description: 'Displays help'},
{ name: 'clear', description: 'Clears console'}
];
return new app.models.HelpResult(commands);
return new app.models.HelpResult();
});
dispatcher.command({
@@ -59,9 +80,16 @@
app.bootstrap(document.getElementById('rootView'));
app.debugMode = true;
dispatcher.dispatch('help');
dispatcher.dispatch('3 ^ 4');
})();
</script>
</body>
</html>