Add loglevel

package.json

@@ -4,11 +4,11 @@
   "description": "Bitwise Operations Console",
   "main": "index.js",
   "scripts": {
-    "build": "webpack -p && rm -rf ./BitwiseCmdPages/* && cp ./src/index.html ./BitwiseCmdPages && cp ./src/*.js ./BitwiseCmdPages && cp ./src/bundle.js.map ./BitwiseCmdPages && cp -r ./src/css ./BitwiseCmdPages && cp -r ./src/img ./BitwiseCmdPages",
+    "build": "webpack -p && rm -rf ./react/* && cp ./src/index.html ./react && cp ./src/*.js ./react && cp ./src/bundle.js.map ./react && cp -r ./src/css ./react && cp -r ./src/img ./react",
     "serv": "webpack-dev-server --content-base ./src",
     "e2e": "protractor ./tests/e2e.chrome.js --params.appUrl='http://localhost:8080/#clear'",
     "e2e_build": "protractor ./tests/e2e.chrome.js --params.appUrl='http://localhost:3000/#clear'",
-    "e2e_remote": "protractor ./tests/e2e.chrome.js --params.appUrl='http://bitwisecmd.com/react/#clear'",
+    "e2e_remote": "protractor ./tests/e2e.chrome.js --params.appUrl='http://bitwisecmd.com/react/#clear||-notrack'",
     "test": "karma start"
   },
   "repository": {
@@ -49,6 +49,7 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "body-parser": "^1.15.2",
+    "loglevel": "^1.4.1",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
   }

react/analytics.js

@@ -0,0 +1,15 @@
+(function() {
+
+    if(window.location.host != 'bitwisecmd.com' ||  window.location.hash.indexOf('-notrack') > -1) {
+        console.log("Analytics not tracked")
+        return;
+    }
+
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-61569164-1', 'auto');
+    ga('send', 'pageview');
+})();

react/css/styles.css

@@ -0,0 +1,109 @@
+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 }
+
+/* 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; }
+}

react/index.html

@@ -2,14 +2,34 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <meta name="description" content="Bitwise Calculator. Visualised Bitwise Operations.">
+        <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>
+
+        <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>
+            
+            <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>
 </html>

src/app/components/results/BitwiseOperationExpressionView.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import * as expression from '../../expression';
 import formatter from '../../formatter';
 import BinaryStringView from './BinaryStringView';
-import BitwiseExpressionViewModel from './models/BitwiseExpressionViewModel'
+import BitwiseExpressionViewModel from './models/BitwiseExpressionViewModel';
+import log from 'loglevel';
 
 export default class BitwiseOperationEpxressionView extends React.Component {
     render() {
@@ -23,12 +24,13 @@ export default class BitwiseOperationEpxressionView extends React.Component {
 
         if(expr instanceof expression.SingleOperandExpression) {
             const m = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
+            log.info('Render model', m);
             return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
         }
 
         if(expr instanceof expression.MultipleOperandsExpression) {
             const m = BitwiseExpressionViewModel.buildMultiple(expr, { emphasizeBytes: this.props.emphasizeBytes });
-            console.log('Render model', m);
+            log.info('Render model', m);
             return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
         }
 

src/app/index.jsx

@@ -7,25 +7,45 @@ import cmd from './cmd';
 import commands from './commands';
 import AppRoot from './components/AppRoot';
 import hash from './hash';
+import log from 'loglevel';
 
+setupLogger();
 
-var stateData = appStateStore.getPersistedData();
-const appState = new AppState(stateData);
-
-appStateStore.watch(appState);
+const appState = createAppState();
 
 commands.initialize(cmd, appState);
 
-console.log("appState", appState);
-
-var hashArgs = hash.getArgs(window.location.hash);
-var startupCommands = ['help', '1|2&6','1<<0x2a','2 4 8 16 32'];
-
-if(hashArgs.commands.length > 0) {
-    startupCommands = hashArgs.commands;
-}
-
-startupCommands.forEach(cmd.execute.bind(cmd));
+executeStartupCommands();
 
 var root = <AppRoot appState={appState} />;
 ReactDOM.render(root, document.getElementById('root'));
+
+log.debug("started");
+
+function createAppState() {
+    var stateData = appStateStore.getPersistedData();
+    const appState = new AppState(stateData);
+    appStateStore.watch(appState);
+    log.debug("appState", appState);
+    return appState;
+}
+
+function setupLogger() {
+    if(window.location.host != 'bitwisecmd.com' ||  window.location.hash.indexOf('-debug') > -1) {
+        log.setLevel("trace");
+    } else {
+        log.setLevel("warn");
+    }
+}
+
+function executeStartupCommands() {
+    var hashArgs = hash.getArgs(window.location.hash);
+
+    var startupCommands = ['help', '1|2&6','1<<0x2a','2 4 8 16 32'];
+
+    if(hashArgs.commands.length > 0) {
+        startupCommands = hashArgs.commands;
+    }
+
+    startupCommands.forEach(cmd.execute.bind(cmd));
+}