first releasable version

partials/dump.html

@@ -1,9 +1,20 @@
<!--<div id="drop-zone" style="height: 5em; width: 80%; border: 1px dashed #000; background-color: #fff;">Drop a file here!</div>-->
<div id="drop-zone"><span>{{instructions}}</span></div>
<tabs>
    <pane ng-repeat="file in files" title="{{file.name}}">
    	<div class="lineNumber" style="display: inline-block;">Line Numbers</div>
    	<div class="lineHex" style="display: inline-block;">Line Hex</div>
    	<div class="lineCharacters" style="display: inline-block;">Line Characters</div>
    </pane>
</tabs>
<div style="text-align: center; padding: 1em;">
    <label>Columns</label>
    <select ng-model="columns">
        <option>16</option>
        <option>32</option>
        <option>64</option>
        <option>128</option>
        <option>256</option>
    </select>
    <label>Hex Uppercase</label>
    <input type="checkbox" ng-model="uppercaseHex" />
</div>
<div id="terminal" class="mono">
    <div id="lineNumbers"></div>
    <div id="lineHex"></div>
    <div id="lineCharacters"></div>
</div>

scripts/components.js

@@ -22,7 +22,7 @@ angular.module('hexmeh', [])
                };
            }
        };
    });
    })
    .directive('tabs', function () {
        return {
            restrict: 'E',

scripts/controllers.js

@@ -45,27 +45,29 @@ function MainController($scope, $routeParams) {
function DumpController($scope, $routeParams) {
  $scope.columns = 16;
  $scope.fileApi = false;
  $scope.files = [];
  
  $scope.showFiles = function () {
    return $scope.files;
  };
  $scope.instructions = "Drop a file here!";
  $scope.uppercaseHex = false;
  
  // Check for the various File API support.
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    // Great success! All the File APIs are supported.
    $(window).bind("dragover", function (e) {
    $("#drop-zone").bind("dragover", function (e) {
      e.stopPropagation();
      e.preventDefault();
      e.originalEvent.dataTransfer.dropEffect = 'copy';
    });
    
    $(window).bind("drop", function(e) {
    $("#drop-zone").bind("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();
      
      // Remove previous output.
      $("#lineNumbers, #lineHex, #lineCharacters").empty();
      
      // Retrieve the files.
      var files = e.originalEvent.dataTransfer.files;
      
      // Iterate though each file.
      for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        
@@ -73,21 +75,30 @@ function DumpController($scope, $routeParams) {
        reader.onload = (function(theFile) {
          return function(e) {
            var bytes = new Uint8Array(e.target.result);
            
            $scope.files.push({
              "name": theFile.name,
              "bytes": bytes
            });
            /*var c = 0;
            for (var i = 0; i < bytes.length; i++) {
              if (c++ >= 16) {
                $("#tabFile1").append("<br>");
                c = 0;
              if (i % $scope.columns === 0) {
                // Add a break line.
                $("#lineNumbers, #lineHex, #lineCharacters").append("<br>");
                
                // Get the line number.
                var lineNumber = padLeft(i.toString(16), 6);
                if ($scope.uppercaseHex) {
                  lineNumber = lineNumber.toUpperCase();
                }
                $("#lineNumbers").append("<span class='number'>" + lineNumber + "</span><span class='symbol'>:</span>");
              }
              
              // Get the hex string.
              var hexString = padLeft(bytes[i].toString(16), 2);
              if ($scope.uppercaseHex) {
                  hexString = hexString.toUpperCase();
              }
              
              $("#tabFile1").append(bytes[i].toString(16) + " ");
            }*/
              // Output the remaining lines.
              $("#lineHex").append("<span class='hex'>" + hexString + "</span>&nbsp;");
              $("#lineCharacters").append("<span class='char'>" + String.fromCharCode(bytes[i]) + "</span>");
            }
          };
        })(f);
        
@@ -97,6 +108,7 @@ function DumpController($scope, $routeParams) {
    });
  } else {
    $scope.fileApi = false;
    $scope.instructions = "Sorry, your browser needs to go to an old folks home.";
    alert('The File APIs are not fully supported in this browser.');
  }
}

styles/hexmeh.css

@@ -79,6 +79,66 @@ div[role="main"] {
    background-color: #eee;
}
.mono {
    font-family: Fixed, monospace;
}
#drop-zone {
    /*width: 80%;*/
    border: 1px dashed #000; 
    background-color: #fff; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    padding-top: 2em; 
    padding-bottom: 2em;
}
#lineNumbers {
    display: inline-block; 
    padding-right: 1em;
    text-align: left;
    vertical-align: text-top;
}
#lineHex {
    display: inline-block; 
    padding-right: 1em;
    text-align: left;
    vertical-align: text-top;
}
#lineCharacters {
    display: inline-block;
    text-align: left;
    vertical-align: text-top;
}
#terminal {
    text-align: center; 
    min-height: 20em;
    background-color: #000;
    color: #00A300;
    border-radius: 24px;
    text-shadow: 1px 1px #333;
}
.number {
    color: #6B6B6B;
}
.symbol {
    color: #A30000;
}
.hex {
}
.char {
    color: #A35200;
}
/**
 * Buttons
 */