Moving BitwsieCmd to react as primary release

analytics.js

@@ -1,6 +1,7 @@
 (function() {
 
     if(window.location.host != 'bitwisecmd.com' ||  window.location.hash.indexOf('-notrack') > -1) {
+        console.log("Analytics not tracked")
         return;
     }
 

css/styles.css

@@ -1 +1,110 @@
-.help ul,.top-links{list-style-type:none}body{font-family:Verdana;font-size:.8em;margin:0;padding:20px 100px 0}.expression,.indicator,.mono{font-family:monospace}code{font-size:1.2em;font-weight:700}.social-container{position:fixed;bottom:10px;right:10px}.top-links{position:absolute;right:10px;top:10px;margin:0}.top-links li{float:left}.top-links a{display:inline-block;padding:10px 15px}.top-links .icon{margin-right:5px}.mono{font-size:1.3em}.expressionInput{width:500px;padding:3px;border:1px solid #d3d3d3}.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:700;padding-right:5px;text-align:right}.expression .bin{letter-spacing:3px}.expression .byte{margin:0 3px}.expression .flipable{cursor:pointer;opacity:1}.expression .flipable:hover{opacity:.8}.expression-result td{border-top:dotted 1px gray}.expression{font-size:1.5em}.expression .prefix{font-weight:400;display:none;font-size:.9em}.expression .other{font-size:.9em}.expression .sign{text-align:right}.hex .prefix{display:inline}.help{padding:10px}.help ul{margin:0;padding:0}.help p{margin-top:0}.indicator{padding:2px 5px;font-size:1.3em;background:0 0;border:none;cursor:pointer}.error{color:maroon}#view{padding:10px}.cur{color:#d3d3d3}.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{background:#fafafa}.light a,.light a:visited{color:#222}.light .one{color:#000}.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 .expressionInput{background:#121212;color:#fff}.dark a,.dark a:visited{color:#fff}.dark .indicator{color:#555}.dark .on{color:#fff}.dark .prefix,.dark .zero{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}@media (max-width:800px){.top-links .link-text{display:none}}@media (max-width:700px){body{padding:10px}.expressionInput{width:500px}}@media (max-width:500px){.expressionInput{width:350px}.top-links a{display:inline-block;padding:5px 10px}}@media (max-width:350px){.expressionInput{width:200px}}
+body { padding:0; margin:0; height: 100%; overflow: hidden; }
+html { height: 100% }
+
+.app-root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100%; overflow: auto; }
+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 .expression { 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 }
+.dark .error { color: mediumvioletred}
+
+/* Top Links Shrink */
+@media (max-width: 800px) {
+
+    .top-links .link-text { display: none }
+}
+
+.social-container{ position:fixed; bottom:10px; right:10px }
+
+/* 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; }
+}

index.html

@@ -1,175 +1,35 @@
-<!DOCTYPE html>
+<!DOCTYPE>
 <html>
-<head lang="en">
+    <head>
         <meta charset="UTF-8">
         <meta name="description" content="Free Text Online Bitwise Calculator">
 
         <title>BitwiseCmd</title>
         <link rel="shortcut icon" href="http://bitwisecmd.com/favicon.ico">
+        <link rel="stylesheet" type="text/css" href="css/styles.css" />
 
         <meta property="og:url"           content="http://bitwisecmd.com" />
         <meta property="og:type"          content="website" />
         <meta property="og:title"         content="BitwiseCmd" />
         <meta property="og:description"   content="Free Text Online Bitwise Calculator" />
         <meta property="og:image"         content="http://bitwisecmd.com/img/social-avatar.png" />
+    </head>
+    <body>
+        <div id="root">Ooops... Something went wrong ¯\_(ツ)_/¯</div>
+        <script src="bundle.js"></script>
+        <script src="analytics.js"></script>
 
-    <script src="js/bitwisecmd.js"></script>
-
-    <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>  <span>
-
-        </span></h1>
-
-        <ul class="top-links">
-            <li>
-                <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github">&nbsp;</i><span class="link-text">Project on GitHub</span></a>
-            </li>
-            <li>
-                <a href="https://twitter.com/BitwiseCmd"><i class="icon twitter">&nbsp;</i><span class="link-text">Twitter</span></a>
-            </li>
-            <li>
-                <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i class="icon feedback">&nbsp;</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>&lt;<</code> — left shift</li>
-                    <li><code>&gt;&gt;</code> — sign propagating right shift</li>
-                    <li><code>&gt;&gt;&gt;</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>. Please give it a like if BitwiseCmd has helped you in your work.</p>
-        <p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback">&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</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">&gt;</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>
-
-<script src="js/analytics.js"></script>
-
-<div id="fb-root"></div>
-<script>(function(d, s, id) {
+        <div id="fb-root"></div>
+            <script>(function(d, s, id) {
                 var js, fjs = d.getElementsByTagName(s)[0];
                 if (d.getElementById(id)) return;
                 js = d.createElement(s); js.id = id;
                 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
                 fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
+            }(document, 'script', 'facebook-jssdk'));</script>
             
-<div class="social-container">
+            <div class="social-container">
                 <div class="fb-like" data-href="http://bitwisecmd.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="true"></div>
-</div>
-
-</body>
+            </div>
+    </body>
 </html>