mirror of
https://github.com/BorysLevytskyi/BitwiseCmd.git
synced 2025-12-16 01:42:19 +01:00
React boilerplate
This commit is contained in:
Borys_Levytskyi
@@ -3,17 +3,17 @@ module.exports = function(config) {
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
files: [
|
||||
'src/js/core/core.js',
|
||||
'src/js/core/is.js',
|
||||
'src/js/core/di.js',
|
||||
'src/js/core/should.js',
|
||||
'src/js/core/htmlBuilder.js',
|
||||
'src/js/core/should.js',
|
||||
'src/js/core/appShell.js',
|
||||
'src/js/core/observable.js',
|
||||
'src/js/app.js',
|
||||
'src/js/components/*.js',
|
||||
'src/js/app/**/*.js',
|
||||
'src.old/js/core/core.js',
|
||||
'src.old/js/core/is.js',
|
||||
'src.old/js/core/di.js',
|
||||
'src.old/js/core/should.js',
|
||||
'src.old/js/core/htmlBuilder.js',
|
||||
'src.old/js/core/should.js',
|
||||
'src.old/js/core/appShell.js',
|
||||
'src.old/js/core/observable.js',
|
||||
'src.old/js/app.js',
|
||||
'src.old/js/components/*.js',
|
||||
'src.old/js/app/**/*.js',
|
||||
'tests/unit/**/*.js'
|
||||
]
|
||||
});
|
||||
|
||||
14
package.json
14
package.json
@@ -17,6 +17,10 @@
|
||||
},
|
||||
"homepage": "https://github.com/BorysLevytskyi/BitwiseCmd",
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.18.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.8.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"grunt-contrib-clean": "latest",
|
||||
"grunt-contrib-copy": "latest",
|
||||
"grunt-contrib-cssmin": "latest",
|
||||
@@ -31,7 +35,13 @@
|
||||
"dependencies": {
|
||||
"@types/react": "^0.14.44",
|
||||
"@types/react-dom": "^0.14.18",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2"
|
||||
"babel-core": "^6.18.2",
|
||||
"babel-loader": "^6.2.8",
|
||||
"babel-plugin-transform-class-properties": "^6.19.0",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"body-parser": "^1.15.2",
|
||||
"react": "^15.4.0",
|
||||
"react-dom": "^15.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
103
src.old/css/styles.css
Normal file
103
src.old/css/styles.css
Normal file
@@ -0,0 +1,103 @@
|
||||
body { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; }
|
||||
code { font-size: 1.2em; font-weight: bold; }
|
||||
|
||||
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
|
||||
.top-links li { float: left; }
|
||||
.top-links a { display: inline-block; padding: 10px 15px}
|
||||
.top-links .icon { margin-right: 5px; }
|
||||
|
||||
.mono { font-family: monospace; font-size: 1.3em }
|
||||
.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
|
||||
|
||||
.result { margin: 10px 10px 30px; }
|
||||
.result .input { margin-bottom: 10px; }
|
||||
.result .content { padding-left: 10px}
|
||||
.result .cur { margin-right: 5px; }
|
||||
|
||||
.hashLink { text-decoration: none; margin-left: 5px; visibility: hidden }
|
||||
.hashLink:hover { text-decoration: underline; margin-left: 5px; }
|
||||
.input:hover .hashLink { visibility: visible }
|
||||
|
||||
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; }
|
||||
.expression .bin { letter-spacing: 3px; }
|
||||
.expression .flipable { cursor: pointer; opacity: 1 }
|
||||
.expression .flipable:hover { opacity: 0.8 }
|
||||
.expression .byte { margin: 0 3px; }
|
||||
.expression .flipable { cursor: pointer; opacity: 1 }
|
||||
.expression .flipable:hover { opacity: 0.8 }
|
||||
.expression-result td { border-top: dotted 1px gray; }
|
||||
.expression { font-size: 1.5em; font-family: monospace }
|
||||
.expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
|
||||
.expression .other { font-size: 0.9em}
|
||||
.expression .sign { text-align: right}
|
||||
|
||||
.hex .prefix { display: inline; }
|
||||
|
||||
.help { padding: 10px; }
|
||||
.help ul { list-style-type: none; margin: 0; padding: 0; }
|
||||
.help p { margin-top: 0 }
|
||||
|
||||
.indicator { padding: 2px 5px; font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
|
||||
.error { color: maroon; }
|
||||
|
||||
#view { padding: 10px}
|
||||
|
||||
.cur { color: lightgray; }
|
||||
|
||||
.icon { width: 16px; height: 16px; display: inline-block; }
|
||||
.light .twitter { background: url('../img/twitter-light.png') }
|
||||
.dark .twitter { background: url('../img/twitter-dark.png') }
|
||||
|
||||
.light .feedback { background: url('../img/feedback-light.png') }
|
||||
.dark .feedback { background: url('../img/feedback-dark.png') }
|
||||
|
||||
.dark .github { background: url('../img/github-dark.png') }
|
||||
.light .github { background: url('../img/github-light.png') }
|
||||
|
||||
/* Light */
|
||||
.light { background: #fafafa; }
|
||||
.light a, .light a:visited { color: #222; }
|
||||
.light .one { color: black; }
|
||||
.light .zero { color: #888; }
|
||||
.light .indicator { color: #ddd; }
|
||||
.light .on { color: #121212; }
|
||||
.light .prefix { color: #888}
|
||||
.light .other { color: #bbb }
|
||||
.light .hashLink, .light .hashLink:visited { color: #ddd }
|
||||
.light .hashLink:hover { color: #888 }
|
||||
.light ul.top-links li:hover { background: #ddd }
|
||||
|
||||
/* Dark */
|
||||
.dark { background: #121212; color: white;}
|
||||
.dark .expressionInput { background: #121212; color: white; }
|
||||
.dark a, .dark a:visited { color: white; }
|
||||
.dark .indicator { color: #555; }
|
||||
.dark .on { color: white; }
|
||||
.dark .zero { color: #999;}
|
||||
.dark .prefix { color: #999}
|
||||
.dark .other { color: #444;}
|
||||
.dark .hashLink, .dark .hashLink:visited { color: #333 }
|
||||
.dark .hashLink:hover { color: #999 }
|
||||
.dark ul.top-links li:hover { background: #333 }
|
||||
|
||||
/* Top Links Shrink */
|
||||
@media (max-width: 800px) {
|
||||
|
||||
.top-links .link-text { display: none }
|
||||
}
|
||||
|
||||
/* Remove margin space on body. Inline top links with header */
|
||||
@media (max-width: 700px) {
|
||||
body { padding: 10px; }
|
||||
.expressionInput { width: 500px; }
|
||||
}
|
||||
|
||||
/* Further shrink */
|
||||
@media (max-width: 500px) {
|
||||
.expressionInput { width: 350px; }
|
||||
.top-links a { display: inline-block; padding: 5px 10px}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.expressionInput { width: 200px; }
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 470 B After Width: | Height: | Size: 470 B |
|
Before Width: | Height: | Size: 605 B After Width: | Height: | Size: 605 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
182
src.old/index.html
Normal file
182
src.old/index.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Bitwise Calculator. Visualised Bitwise Operations.">
|
||||
|
||||
<title>BitwiseCmd</title>
|
||||
<link rel="shortcut icon" href="http://bitwisecmd.com/favicon.ico">
|
||||
|
||||
<!-- build:js js/bitwisecmd.js -->
|
||||
<script type="text/javascript" src="js/core/core.js"></script>
|
||||
<script type="text/javascript" src="js/core/is.js"></script>
|
||||
<script type="text/javascript" src="js/core/should.js"></script>
|
||||
<script type="text/javascript" src="js/core/di.js"></script>
|
||||
<script type="text/javascript" src="js/core/appShell.js"></script>
|
||||
<script type="text/javascript" src="js/core/htmlBuilder.js"></script>
|
||||
<script type="text/javascript" src="js/core/observable.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/components/controllersFeature.js"></script>
|
||||
<script type="text/javascript" src="js/components/viewsFeature.js"></script>
|
||||
<script type="text/javascript" src="js/components/templatesFeature.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/bitwise/calc.js"></script>
|
||||
<script type="text/javascript" src="js/app/bitwise/expression.js"></script>
|
||||
<script type="text/javascript" src="js/app/bitwise/formatter.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/models.js"></script>
|
||||
<script type="text/javascript" src="js/app/modelViews.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/cmd/cmd.js"></script>
|
||||
<script type="text/javascript" src="js/app/services.js"></script>
|
||||
<script type="text/javascript" src="js/app/controllers.js"></script>
|
||||
<script type="text/javascript" src="js/app/cmd/commands.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/run.js"></script>
|
||||
<!-- /build -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||
</head>
|
||||
<body id="rootView" class="dark">
|
||||
|
||||
<header>
|
||||
<div class="header">
|
||||
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
|
||||
|
||||
<ul class="top-links">
|
||||
<li>
|
||||
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github"> </i><span class="link-text">Project on GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/BitwiseCmd"><i class="icon twitter"> </i><span class="link-text">Twitter</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:bitwisecmd@gmail.com?subject=Feedback"><i class="icon feedback"> </i><span class="link-text">Send Feedback</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="expressionInput-container">
|
||||
<input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
|
||||
|
||||
<span data-controller="configPanelCtrl" class="configPnl">
|
||||
<span id="emphasizeBytes" data-cmd="em" class="indicator on" title="Emphasize Bytes">[em]</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="output" data-controller="cmdController">
|
||||
</div>
|
||||
|
||||
<script data-template="helpResultTpl" type="text/template">
|
||||
<div class="help helpResultTpl">
|
||||
<div style="overflow: hidden">
|
||||
<div style="float: left; margin-right: 20px">
|
||||
<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>
|
||||
<li><code>dark</code> — set Dark theme</li>
|
||||
<li><code>light</code> — set Light theme</li>
|
||||
<li><code>about</code> — about the app</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="float:left">
|
||||
<p class="section">
|
||||
<strong>Supported Bitwise Operations</strong><br/>
|
||||
<small>
|
||||
<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">
|
||||
as implemented in JavaScript engine
|
||||
</a>
|
||||
</small>
|
||||
<ul>
|
||||
<li><code>&</code> — bitwise AND</li>
|
||||
<li><code>|</code> — bitwise inclusive OR</li>
|
||||
<li><code>^</code> — bitwise exclusive XOR</li>
|
||||
<li><code>~</code> — bitwise NOT</li>
|
||||
<li><code><<</code> — left shift</li>
|
||||
<li><code>>></code> — sign propagating right shift</li>
|
||||
<li><code>>>></code> — zero-fill right shift</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-style: italic">
|
||||
<strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
|
||||
</p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="aboutTpl" type="text/template">
|
||||
<div class="aboutTpl">
|
||||
<p> Created by <a href="http://boryslevytskyi.github.io/">Borys Levytskyi</a></p>
|
||||
<p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:bitwisecmd@gmail.com?subject=Feedback">bitwisecmd@gmail.com</a> or tweet on <a href="http://twitter.com/BitwiseCmd">@BitwiseCmd</a>. Your feedback is greatly appreciated.</p>
|
||||
<p><a href="https://github.com/BorisLevitskiy/BitwiseCmd">Project on <strong>GitHub</strong></a></p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="resultView" data-compiled="" type="text/template">
|
||||
<div class="result">
|
||||
<div class="input mono"><span class="cur">></span>{m.input}<a class="hashLink" title="Link for this expression" href="{window.location.pathname}#{m.inputHash}">#</a></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="bitwiseExpressionView" data-compiled="" type="text/template">
|
||||
<table class="expression" cellspacing="0">
|
||||
{each itm in m.items}
|
||||
<tr class="{itm.css}">
|
||||
<td class="sign">{itm.sign}</td>
|
||||
<td class="label">{itm.label}</td>
|
||||
<td class="bin">{itm.bin.padLeft(m.maxNumberOfBits, '0')}</td>
|
||||
<td class="other">{itm.other}</td>
|
||||
</tr>
|
||||
{/}
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script data-template="numbersList" data-compiled="" type="text/template">
|
||||
<table class="expression" cellspacing="0">
|
||||
{each op in m.operands}
|
||||
<tr data-kind="{op.kind}">
|
||||
<td class="label">{op.input}</td>
|
||||
<td class="bin">{op.bin.padLeft(m.bitsSize, '0')}</td>
|
||||
<td class="other">{op.other}</td>
|
||||
</tr>
|
||||
{/}
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var app = window.app;
|
||||
app.bootstrap(document.getElementById('rootView'));
|
||||
|
||||
var cmd = app.get('cmd');
|
||||
var hashArgs = app.get('hashArgs');
|
||||
|
||||
if(hashArgs.commands.length > 0) {
|
||||
hashArgs.commands.forEach(cmd.execute.bind(cmd));
|
||||
}
|
||||
else {
|
||||
cmd.execute('help');
|
||||
cmd.execute('1|2&6');
|
||||
cmd.execute('1<<0x2a');
|
||||
cmd.execute('2 4 8 16 32');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- build:js js/analytics.js -->
|
||||
<!-- /build -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,6 @@
|
||||
body { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; }
|
||||
body { padding:0; margin:0; height: 100% }
|
||||
html { height: 100% }
|
||||
#root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100% }
|
||||
code { font-size: 1.2em; font-weight: bold; }
|
||||
|
||||
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
|
||||
|
||||
177
src/index.html
177
src/index.html
@@ -1,182 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Bitwise Calculator. Visualised Bitwise Operations.">
|
||||
|
||||
<title>BitwiseCmd</title>
|
||||
<link rel="shortcut icon" href="http://bitwisecmd.com/favicon.ico">
|
||||
|
||||
<!-- build:js js/bitwisecmd.js -->
|
||||
<script type="text/javascript" src="js/core/core.js"></script>
|
||||
<script type="text/javascript" src="js/core/is.js"></script>
|
||||
<script type="text/javascript" src="js/core/should.js"></script>
|
||||
<script type="text/javascript" src="js/core/di.js"></script>
|
||||
<script type="text/javascript" src="js/core/appShell.js"></script>
|
||||
<script type="text/javascript" src="js/core/htmlBuilder.js"></script>
|
||||
<script type="text/javascript" src="js/core/observable.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/components/controllersFeature.js"></script>
|
||||
<script type="text/javascript" src="js/components/viewsFeature.js"></script>
|
||||
<script type="text/javascript" src="js/components/templatesFeature.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/bitwise/calc.js"></script>
|
||||
<script type="text/javascript" src="js/app/bitwise/expression.js"></script>
|
||||
<script type="text/javascript" src="js/app/bitwise/formatter.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/models.js"></script>
|
||||
<script type="text/javascript" src="js/app/modelViews.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/cmd/cmd.js"></script>
|
||||
<script type="text/javascript" src="js/app/services.js"></script>
|
||||
<script type="text/javascript" src="js/app/controllers.js"></script>
|
||||
<script type="text/javascript" src="js/app/cmd/commands.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/app/run.js"></script>
|
||||
<!-- /build -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||
</head>
|
||||
<body id="rootView" class="dark">
|
||||
|
||||
<header>
|
||||
<div class="header">
|
||||
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
|
||||
|
||||
<ul class="top-links">
|
||||
<li>
|
||||
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github"> </i><span class="link-text">Project on GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/BitwiseCmd"><i class="icon twitter"> </i><span class="link-text">Twitter</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:bitwisecmd@gmail.com?subject=Feedback"><i class="icon feedback"> </i><span class="link-text">Send Feedback</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="expressionInput-container">
|
||||
<input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
|
||||
|
||||
<span data-controller="configPanelCtrl" class="configPnl">
|
||||
<span id="emphasizeBytes" data-cmd="em" class="indicator on" title="Emphasize Bytes">[em]</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="output" data-controller="cmdController">
|
||||
</div>
|
||||
|
||||
<script data-template="helpResultTpl" type="text/template">
|
||||
<div class="help helpResultTpl">
|
||||
<div style="overflow: hidden">
|
||||
<div style="float: left; margin-right: 20px">
|
||||
<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>
|
||||
<li><code>dark</code> — set Dark theme</li>
|
||||
<li><code>light</code> — set Light theme</li>
|
||||
<li><code>about</code> — about the app</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="float:left">
|
||||
<p class="section">
|
||||
<strong>Supported Bitwise Operations</strong><br/>
|
||||
<small>
|
||||
<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">
|
||||
as implemented in JavaScript engine
|
||||
</a>
|
||||
</small>
|
||||
<ul>
|
||||
<li><code>&</code> — bitwise AND</li>
|
||||
<li><code>|</code> — bitwise inclusive OR</li>
|
||||
<li><code>^</code> — bitwise exclusive XOR</li>
|
||||
<li><code>~</code> — bitwise NOT</li>
|
||||
<li><code><<</code> — left shift</li>
|
||||
<li><code>>></code> — sign propagating right shift</li>
|
||||
<li><code>>>></code> — zero-fill right shift</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-style: italic">
|
||||
<strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
|
||||
</p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="aboutTpl" type="text/template">
|
||||
<div class="aboutTpl">
|
||||
<p> Created by <a href="http://boryslevytskyi.github.io/">Borys Levytskyi</a></p>
|
||||
<p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:bitwisecmd@gmail.com?subject=Feedback">bitwisecmd@gmail.com</a> or tweet on <a href="http://twitter.com/BitwiseCmd">@BitwiseCmd</a>. Your feedback is greatly appreciated.</p>
|
||||
<p><a href="https://github.com/BorisLevitskiy/BitwiseCmd">Project on <strong>GitHub</strong></a></p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="resultView" data-compiled="" type="text/template">
|
||||
<div class="result">
|
||||
<div class="input mono"><span class="cur">></span>{m.input}<a class="hashLink" title="Link for this expression" href="{window.location.pathname}#{m.inputHash}">#</a></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script data-template="bitwiseExpressionView" data-compiled="" type="text/template">
|
||||
<table class="expression" cellspacing="0">
|
||||
{each itm in m.items}
|
||||
<tr class="{itm.css}">
|
||||
<td class="sign">{itm.sign}</td>
|
||||
<td class="label">{itm.label}</td>
|
||||
<td class="bin">{itm.bin.padLeft(m.maxNumberOfBits, '0')}</td>
|
||||
<td class="other">{itm.other}</td>
|
||||
</tr>
|
||||
{/}
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script data-template="numbersList" data-compiled="" type="text/template">
|
||||
<table class="expression" cellspacing="0">
|
||||
{each op in m.operands}
|
||||
<tr data-kind="{op.kind}">
|
||||
<td class="label">{op.input}</td>
|
||||
<td class="bin">{op.bin.padLeft(m.bitsSize, '0')}</td>
|
||||
<td class="other">{op.other}</td>
|
||||
</tr>
|
||||
{/}
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var app = window.app;
|
||||
app.bootstrap(document.getElementById('rootView'));
|
||||
|
||||
var cmd = app.get('cmd');
|
||||
var hashArgs = app.get('hashArgs');
|
||||
|
||||
if(hashArgs.commands.length > 0) {
|
||||
hashArgs.commands.forEach(cmd.execute.bind(cmd));
|
||||
}
|
||||
else {
|
||||
cmd.execute('help');
|
||||
cmd.execute('1|2&6');
|
||||
cmd.execute('1<<0x2a');
|
||||
cmd.execute('2 4 8 16 32');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- build:js js/analytics.js -->
|
||||
<!-- /build -->
|
||||
<body>
|
||||
<div id="root" class="dark">Doesn't work</div>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
35
src/index.jsx
Normal file
35
src/index.jsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
var rootView = <div>
|
||||
<div className="header">
|
||||
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
|
||||
|
||||
<ul className="top-links">
|
||||
<li>
|
||||
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github"> </i><span className="link-text">Project on GitHub</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/BitwiseCmd"><i className="icon twitter"> </i><span className="link-text">Twitter</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:bitwisecmd@gmail.com?subject=Feedback"><i className="icon feedback"> </i><span className="link-text">Send Feedback</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="expressionInput-container">
|
||||
<input id="in" type="text" className="expressionInput mono" placeholder="type expression like '1>>2' or 'help' "/>
|
||||
|
||||
<span className="configPnl">
|
||||
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="output">
|
||||
</div>
|
||||
|
||||
</div>;
|
||||
|
||||
|
||||
ReactDOM.render(rootView, document.getElementById('root'));
|
||||
@@ -8,7 +8,7 @@
|
||||
"jsx": "react"
|
||||
},
|
||||
"files": [
|
||||
"./src/components/Hello.tsx",
|
||||
"./src/index.tsx"
|
||||
"./src.old/components/Hello.tsx",
|
||||
"./src.old/index.tsx"
|
||||
]
|
||||
}
|
||||
29
webpack.config.js
Normal file
29
webpack.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
module.exports = {
|
||||
entry: __dirname + "/src/index.jsx",
|
||||
output: {
|
||||
fileame: 'bundle.js',
|
||||
path: __dirname + '/src',
|
||||
publicPath: 'http://localhost:8080/'
|
||||
},
|
||||
devtool: 'source-maps',
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.jsx$/,
|
||||
loader: 'babel',
|
||||
//exclude: /node-modules/,
|
||||
output: { path: __dirname + '/src', filename: 'bundle.js' },
|
||||
query: {
|
||||
presets: ['es2015', 'react'],
|
||||
plugins: ['transform-class-properties']
|
||||
}
|
||||
}]
|
||||
},
|
||||
// externals: {
|
||||
// //don't bundle the 'react' npm package with our bundle.js
|
||||
// //but get it from a global 'React' variable
|
||||
// 'react': 'React'
|
||||
// },
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.jsx']
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user