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 support of modes in views

Browse Source
This commit is contained in:
Borys Levytskyi
2015-04-11 20:08:32 +03:00
parent b1836272cc
commit ae39fef6bd
3 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/styles.css
View File

@@ -15,6 +15,8 @@ code { font-size: 1.2em; font-weight: bold; }
.expression .byte { margin: 0 3px; } .expression .byte { margin: 0 3px; }
.expression .result td { border-top: dotted 1px gray; } .expression .result td { border-top: dotted 1px gray; }
.expression { font-size: 1.5em; font-family: monospace } .expression { font-size: 1.5em; font-family: monospace }
.expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
.hex .prefix { display: inline; }
.help { padding: 10px; } .help { padding: 10px; }
.help ul { list-style-type: none; margin: 0; padding: 0; } .help ul { list-style-type: none; margin: 0; padding: 0; }
@@ -31,6 +33,7 @@ code { font-size: 1.2em; font-weight: bold; }
.light .zero { color: #888; } .light .zero { color: #888; }
.light .indicator { color: #ddd; } .light .indicator { color: #ddd; }
.light .on { color: #121212; } .light .on { color: #121212; }
.light .prefix { color: #888}
/* Dark */ /* Dark */
.dark { background: #121212; color: white;} .dark { background: #121212; color: white;}
@@ -39,5 +42,6 @@ code { font-size: 1.2em; font-weight: bold; }
.dark .indicator { color: #555; } .dark .indicator { color: #555; }
.dark .on { color: white; } .dark .on { color: white; }
.dark .zero { color: #999;} .dark .zero { color: #999;}
.dark .prefix { color: #999}

10
src/index.html
View File

@@ -118,11 +118,11 @@
<script data-template="shiftExpressionView" type="text/template"> <script data-template="shiftExpressionView" type="text/template">
<table class="expression"> <table class="expression">
<tr> <tr>
<td class="label">{operand1}</td> <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
<td class="bin">{operand1Binary}</td> <td class="bin">{operand1Binary}</td>
</tr> </tr>
<tr class="result"> <tr class="result">
<td class="label">{operand1}{sign}{operand2}={result}</td> <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}{sign}<span class="prefix">0x</span>{operand2}=<span class="prefix">0x</span>{resultStr}</td>
<td class="bin">{resultBinary}</td> <td class="bin">{resultBinary}</td>
</tr> </tr>
</table> </table>
@@ -132,17 +132,17 @@
<table class="expression"> <table class="expression">
<tr> <tr>
<td></td> <td></td>
<td class="label">{operand1Str}</td> <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
<td class="bin">{operand1Binary}</td> <td class="bin">{operand1Binary}</td>
</tr> </tr>
<tr> <tr>
<td>{sign}</td> <td>{sign}</td>
<td class="label">{operand2Str}</td> <td class="label {mode}"><span class="prefix">0x</span>{operand2Str}</td>
<td class="bin">{operand2Binary}</td> <td class="bin">{operand2Binary}</td>
</tr> </tr>
<tr class="result"> <tr class="result">
<td>=</td> <td>=</td>
<td class="label">{resultStr}</td> <td class="label {mode}"><span class="prefix">0x</span>{resultStr}</td>
<td class="bin">{resultBinary}</td> <td class="bin">{resultBinary}</td>
</tr> </tr>
</table> </table>

11
src/js/app/modelViews.js
View File

@@ -13,7 +13,7 @@ app.compose(function () {
var maxLen = getBinaryLength([expr.operand1, expr.operand2, result]); var maxLen = getBinaryLength([expr.operand1, expr.operand2, result]);
var model = Object.create(expr); var model = Object.create(expr);
model.mode = cmdConfig.mode;
model.resultStr = formatter.formatString(result, cmdConfig.mode); model.resultStr = formatter.formatString(result, cmdConfig.mode);
model.operand1Str = formatter.formatString(expr.operand1, cmdConfig.mode); model.operand1Str = formatter.formatString(expr.operand1, cmdConfig.mode);
model.operand2Str = formatter.formatString(expr.operand2, cmdConfig.mode); model.operand2Str = formatter.formatString(expr.operand2, cmdConfig.mode);
@@ -24,7 +24,7 @@ app.compose(function () {
console.log(model); console.log(model);
var templateId = /<<|>>/.test(model.sign) ? 'shiftExpressionView' : 'binaryExpressionView'; var templateId = /<<|>>/.test(model.sign) ? 'shiftExpressionView' : 'binaryExpressionView';
var template = app.template(templateId) var template = app.template(templateId);
var el = template.render(model); var el = template.render(model);
colorizeBits(el); colorizeBits(el);
@@ -35,19 +35,20 @@ app.compose(function () {
app.modelView(app.models.BitwiseNumbers, { app.modelView(app.models.BitwiseNumbers, {
renderView: function(model) { renderView: function(model) {
var maxLen = getBinaryLength(model.numbers); var maxLen = getBinaryLength(model.numbers);
var table = html.element('<table class="expression"></table>'); var table = html.element('<table class="expression {mode}"></table>');
model.numbers.forEach(function(n){ model.numbers.forEach(function(n){
var row = table.insertRow(); var row = table.insertRow();
var decCell = row.insertCell(); var decCell = row.insertCell();
decCell.className = 'label'; decCell.classList.add('label');
decCell.classList.add(cmdConfig.mode);
var binCell = row.insertCell(); var binCell = row.insertCell();
binCell.className = 'bin'; binCell.className = 'bin';
decCell.textContent = formatter.formatString(n, cmdConfig.mode); decCell.innerHTML = html.template('<span class="prefix">0x</span>{n}', { n: formatter.formatString(n, cmdConfig.mode) });
binCell.textContent = formatter.padLeft(formatter.formatString(n), maxLen); binCell.textContent = formatter.padLeft(formatter.formatString(n), maxLen);
}); });