Major refactoring, add better debug build flags. Utilize npm run

README.md

@@ -7,4 +7,9 @@ http://lint.neo.yt
 ### Installation Instructions
 * `git clone`
 * ensure `public_html` is in your vhost document root
-* run `npm run-script build`
+* run `npm run build`
+
+
+### Debugging Instructions
+* `git clone`
+* run `npm run build:dev`

debug.js

@@ -0,0 +1,5 @@
+/**
+ * Created by apanesar on 3/17/17.
+ */
+
+window.doTheDebugDo = true;

index.html

@@ -19,12 +19,21 @@
         </div>
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-                <li id="html_tab" class="active"><a href="#">HTML</a></li>
-                <li id="json_tab"><a href="#">JSON</a></li>
-                <li id="xml_tab"><a href="#">XML</a></li>
-                <li id="js_tab"><a href="#">JavaScript</a></li>
-                <li id="css_tab"><a href="#">CSS</a></li>
-                <li id="sql_tab"><a href="#">SQL</a></li>
+                <li id="html_tab" data-name="HTML Linter" class="active"><a href="#">HTML</a></li>
+                <li id="json_tab" data-name="JSON Linter"><a href="#">JSON</a></li>
+                <li id="xml_tab" data-name="XML Linter"><a href="#">XML</a></li>
+                <li id="js_tab" data-name="JavaScript Linter"><a href="#">JavaScript</a></li>
+                <li id="css_tab" data-name="CSS Linter"><a href="#">CSS</a></li>
+                <li id="sql_tab" data-name="SQL Linter"><a href="#">SQL</a></li>
+                <li id="encode_decode_tab" class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Encode/Decode <span class="caret"></span></a>
+                    <ul class="dropdown-menu" role="menu">
+                        <li id="urlencode_tab" data-extra-highlight="encode_decode_tab" data-name="URL Encoder"><a href="#">URLEncode</a></li>
+                        <li id="urldecode_tab" data-extra-highlight="encode_decode_tab" data-name="URL Decoder"><a href="#">URLDecode</a></li>
+                        <li id="base64encode_tab" data-extra-highlight="encode_decode_tab" data-name="Base64 Encoder"><a href="#">Base64Encode</a></li>
+                        <li id="base64decode_tab" data-extra-highlight="encode_decode_tab" data-name="Base64 Decoder"><a href="#">Base64Decode</a></li>
+                    </ul>
+                </li>
             </ul>
         </div><!-- /.nav-collapse -->
     </div><!-- /.container -->

index.js

@@ -13,6 +13,7 @@ require('bootstrap');
 // use hasher for application page management
 var hasher = require('hasher');
 hasher.prependHash = '!';
+hasher.separator = '/';
 
 // include/configure highlight.js
 var hljs = require('highlight.js');
@@ -34,11 +35,32 @@ var beautify_xml = require('xml-beautifier');
 // sql-formatter library
 var beautify_sql = require('sql-formatter');
 
+// debugging assistance
+var debug = (window.doTheDebugDo) ? {
+    log: window.console.log.bind(window.console, '%s'),
+    type: window.console.log.bind(window.console, '%s: %s'),
+    error: window.console.error.bind(window.console, 'error: %s'),
+    info: window.console.info.bind(window.console, 'info: %s'),
+    warn: window.console.warn.bind(window.console, 'warn: %s')
+} : {
+    log: function() {},
+    type: function() {},
+    error: function() {},
+    warn: function() {},
+    info: function() {}
+};
 
 $('window').ready(function () {
 
-    // JSON linting!
-    var jsonLint = function (json) {
+    // main I/O
+    var input = $('#input');
+    var output = $('#output');
+
+    /**
+     * JSON linting!
+     * @param json
+     */
+    var jsonLint = function(json) {
         if (typeof json !== 'string') {
             return JSON.stringify(json, undefined, 4);
         } else {
@@ -46,8 +68,20 @@ $('window').ready(function () {
         }
     };
 
-    // hasher page changer function
-    var changeType = function(type) {
+    /**
+     * hasher page changer function
+     * @param type
+     * @param setHash
+     */
+    var changeType = function(type, setHash)
+    {
+        setHash = typeof setHash === 'undefined' ? true : setHash;
+
+        var hash = hasher.getHashAsArray();
+
+        var code = hash[1];
+        code = typeof code === 'undefined' ? '' : code;
+
         switch (type) {
             case 'html':
             case 'xml':
@@ -55,53 +89,84 @@ $('window').ready(function () {
             case 'js':
             case 'css':
             case 'sql':
-                $('#navbar').find('>ul>li.active').removeClass('active');
-                $('#'+type+'_tab').addClass('active');
+            case 'urlencode':
+            case 'urldecode':
+            case 'base64encode':
+            case 'base64decode':
+                debug.type('changeType()', type);
 
-                $('#header').text(type.toUpperCase() + ' Linter');
+                $('#navbar').find('.active').removeClass('active');
+                var tab = $('#'+type+'_tab');
+                tab.addClass('active');
 
-                hasher.setHash(type);
+                if (tab.data('extra-highlight') !== '') {
+                    $('#'+tab.data('extra-highlight')).addClass('active');
+                }
+
+                $('#header').text(tab.data('name'));
+
+                if (setHash) {
+                    debug.type('changeType()', 'Calling hasher.sethash with {'+ type +'} : {'+ code +'}');
+                    hasher.setHash(type, code);
+                } else {
+                    debug.type('changeType()', 'Not calling hasher.sethash');
+                }
                 break;
 
             default:
-                hasher.setHash('html');
+                debug.type('changeType()', 'Default Case: Calling hasher.sethash with {html} : {'+ code +'}');
+                hasher.setHash('html', code);
         }
+
     };
 
-    // hasher setup (now that the function exists)
-    hasher.changed.add(changeType);
-    hasher.initialized.add(changeType);
-    hasher.init();
-
-    var beautify = function (type) {
-        var stringIn = input.val();
+    /**
+     * Beautify! Call all our syntax beautifiers
+     * @param type
+     * @param code
+     */
+    var beautify = function (type, code) {
+        code = typeof code === 'undefined' ? '' : code;
         var stringOut = '';
         try {
             switch(type) {
                 case 'html':
-                    htmlLint(stringIn).then(function (lintOutput) {
-                        console.log(lintOutput);
+                    htmlLint(code).then(function (lintOutput) {
+                        debug.log(lintOutput);
                     }, function(e) {
-                        console.log(e);
+                        debug.log(e);
                     }).catch(function (e) {
-                        console.log(e);
+                        debug.log(e);
                     });
-                    stringOut = hljs.highlightAuto(beautify_html(stringIn)).value;
+                    stringOut = hljs.highlightAuto(beautify_html(code)).value;
                     break;
                 case 'xml':
-                    stringOut = hljs.highlightAuto(beautify_xml(stringIn)).value;
+                    stringOut = hljs.highlightAuto(beautify_xml(code)).value;
                     break;
                 case 'json':
-                    stringOut = hljs.highlightAuto(jsonLint(stringIn)).value;
+                    stringOut = hljs.highlightAuto(jsonLint(code)).value;
                     break;
                 case 'js':
-                    stringOut = hljs.highlightAuto(beautify_js(stringIn)).value;
+                    stringOut = hljs.highlightAuto(beautify_js(code)).value;
                     break;
                 case 'css':
-                    stringOut = hljs.highlightAuto(beautify_css(stringIn)).value;
+                    stringOut = hljs.highlightAuto(beautify_css(code)).value;
                     break;
                 case 'sql':
-                    stringOut = hljs.highlightAuto(beautify_sql.format(stringIn)).value;
+                    stringOut = hljs.highlightAuto(beautify_sql.format(code)).value;
+                    break;
+                case 'urlencode':
+                    stringOut = hljs.highlightAuto(encodeURIComponent(code)).value;
+                    break;
+                case 'urldecode':
+                    stringOut = hljs.highlightAuto(decodeURIComponent(code)).value;
+                    break;
+                case 'base64encode':
+                    stringOut = hljs.highlightAuto(btoa(code)).value;
+                    break;
+                case 'base64decode':
+                    stringOut = hljs.highlightAuto(atob(code)).value;
+                    break;
             }
         } catch (e) {
             stringOut = 'Error: Unable to parse ' + type + '<br>' + e;
@@ -109,20 +174,69 @@ $('window').ready(function () {
         output.html(stringOut);
     };
 
+    // hasher setup (now that the function exists)
+    hasher.changed.add(function(newVal, oldVal) {
+        debug.type('hasher.changed()', 'Old Val: ' + oldVal + ' New Val: ' + newVal);
+
+        var doChangeType = true;
+
+        if (oldVal.split(hasher.separator, 1)[0] === newVal.split(hasher.separator, 1)[0]) {
+            doChangeType = false;
+        }
+
+        var hash = hasher.getHashAsArray();
+        var type = hash[0];
+        var code = hash[1];
+
+        changeType(type, doChangeType);
+
+        code = typeof code === 'undefined' ? '' : code;
+        code = decodeURIComponent(code);
+
+        debug.type('hasher.changed()', 'Set input value to {'+ code +'}');
+        input.val(code);
+    });
+    hasher.initialized.add(function() {
+        debug.type('hasher.initialized()', 'Start');
+
+        var hash = hasher.getHashAsArray();
+        var type = hash[0];
+        var code = hash[1];
+
+        changeType(type, false);
+
+        code = typeof code === 'undefined' ? '' : code;
+        code = decodeURIComponent(code);
+
+        input.val(code);
+
+        debug.type('hasher.initialized()', 'Calling beautify with {'+ type +'} : {'+ code +'}');
+        beautify(type, code)
+    });
+    hasher.init();
+
     // hook into the navbar tabs and use hasher for them
-    $('#navbar').find('>ul>li').click(function(e) {
+    var navbar = $('#navbar');
+    navbar.find('>ul>li:not(.dropdown)').click(function(e) {
+        e.preventDefault();
+        changeType(this.id.replace('_tab', ''));
+    });
+    navbar.find('.dropdown>ul>li').click(function(e) {
         e.preventDefault();
         changeType(this.id.replace('_tab', ''));
     });
 
-
-    // main I/O
-    var input = $('#input');
-    var output = $('#output');
-
     // function main ()
-    input.change(function() {
-        beautify(hasher.getHash())
+    input.change(function(e) {
+        var hash = hasher.getHashAsArray();
+
+        var type = hash[0];
+        var code = input.val();
+        code = typeof code === 'undefined' ? '' : code;
+
+        debug.type('input.change', 'Calling beautify with {'+ type +'} : {'+ code +'}');
+
+        beautify(type, code);
     });
 
 });

package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "prebuild": "npm install",
     "build": "browserify -g uglifyify -o app.js index.js",
-    "postbuild": "mkdir -p public_html/ && cp app.js public_html/ && cp index.html public_html/"
+    "postbuild": "mkdir -p public_html/ && cp app.js public_html/ && cp index.html public_html/",
+    "prebuild:dev": "npm run prebuild",
+    "build:dev": "browserify -o app.js debug.js index.js",
+    "postbuild:dev": "npm run postbuild"
   },
   "author": "Amrit Panesar <neo@neo.yt>",
   "license": "MIT",
@@ -18,6 +21,7 @@
     "browserify-css": "^0.10.0",
     "browserify-shim": "^3.8.13",
     "bulkify": "^1.4.2",
+    "crypto-js": "^3.1.9-1",
     "hasher": "^1.2.0",
     "highlight.js": "^9.9.0",
     "html": "^1.0.0",