mirror of
https://github.com/BorysLevytskyi/BitwiseCmd.git
synced 2026-01-06 03:52:39 +01:00
160 lines
5.3 KiB
HTML
160 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
|
|
<title></title>
|
|
|
|
<script type="text/javascript" src="core/core.js"></script>
|
|
<script type="text/javascript" src="core/is.js"></script>
|
|
<script type="text/javascript" src="core/should.js"></script>
|
|
<script type="text/javascript" src="core/di.js"></script>
|
|
<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>
|
|
|
|
<script type="text/javascript" src="components/controllersFeature.js"></script>
|
|
<script type="text/javascript" src="components/viewsFeature.js"></script>
|
|
<script type="text/javascript" src="components/templatesFeature.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>
|
|
|
|
<script type="text/javascript" src="app/models.js"></script>
|
|
<script type="text/javascript" src="app/views.js"></script>
|
|
|
|
<script type="text/javascript" src="app/dispatcher.js"></script>
|
|
<script type="text/javascript" src="app/services.js"></script>
|
|
<script type="text/javascript" src="app/controllers.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
|
</head>
|
|
<body id="rootView">
|
|
|
|
<h2>Bitwise Operations Visualised</h2>
|
|
|
|
<div class="links">
|
|
<a href="https://github.com/BorisLevitskiy/BitwiseCmd">App on GitHub</a>
|
|
</div>
|
|
|
|
<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">
|
|
</div>
|
|
|
|
<script data-template="helpResultTpl" type="text/template">
|
|
<div class="help">
|
|
<p class="section">
|
|
<strong>Supported Commands</strong>
|
|
<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>
|
|
<li><code>em</code> — Turn On/Off Emphasize Bytes</li>
|
|
</ul>
|
|
</p>
|
|
|
|
|
|
<p class="section">
|
|
<strong>Supported Bitwise Operations</strong>
|
|
<ul>
|
|
<li><code>&</code> — bitwise AND</li>
|
|
<li><code>|</code> — bitwise inclusive OR</li>
|
|
<li><code>^</code> — bitwise exclusive XOR</li>
|
|
<li><code><<</code> — left shift</li>
|
|
<li><code>>></code> — right shift</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<p style="font-style: italic">
|
|
<strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
|
|
</p>
|
|
</div>
|
|
</script>
|
|
|
|
<script data-template="resultView" type="text/template">
|
|
<div class="result">
|
|
<div class="input"><span class="cur">></span>{input}</div>
|
|
<div class="content"></div>
|
|
</div>
|
|
</script>
|
|
|
|
<script data-template="shiftExpressionView" type="text/template">
|
|
<table class="expression">
|
|
<tr>
|
|
<td class="label">{operand1}</td>
|
|
<td class="bin">{operand1Binary}</td>
|
|
</tr>
|
|
<tr class="result">
|
|
<td class="label">{operand1}{sign}{operand2}={result}</td>
|
|
<td class="bin">{resultBinary}</td>
|
|
</tr>
|
|
</table>
|
|
</script>
|
|
|
|
<script data-template="binaryExpressionView" type="text/template">
|
|
<table class="expression">
|
|
<tr>
|
|
<td></td>
|
|
<td class="label">{operand1}</td>
|
|
<td class="bin">{operand1Binary}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{sign}</td>
|
|
<td class="label">{operand2}</td>
|
|
<td class="bin">{operand2Binary}</td>
|
|
</tr>
|
|
<tr class="result">
|
|
<td>=</td>
|
|
<td class="label">{result}</td>
|
|
<td class="bin">{resultBinary}</td>
|
|
</tr>
|
|
</table>
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var app = window.app;
|
|
|
|
app.run(function(){
|
|
|
|
var dispatcher = app.get('dispatcher');
|
|
|
|
dispatcher.command('help', function() {
|
|
return new app.models.HelpResult();
|
|
});
|
|
|
|
// TODO: Make as function
|
|
dispatcher.command({
|
|
$expression:null,
|
|
canHandle: function(input) { return app.get('expression').canParse(input); },
|
|
handle: function(input) {
|
|
return app.get('expression').parse(input);
|
|
}
|
|
});
|
|
|
|
app.emphasizeBytes = true; // TODO: Make into model
|
|
app.debugMode = true;
|
|
|
|
});
|
|
|
|
app.bootstrap(document.getElementById('rootView'));
|
|
app.get('dispatcher').dispatch('help');
|
|
app.get('dispatcher').dispatch('1|2');
|
|
app.get('dispatcher').dispatch('1 2');
|
|
|
|
</script>
|
|
</body>
|
|
</html> |