Bootstrap Resizable Panel

Bootstrap Resizable Panel

by Yassar Khan

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="exampleInputFile">File Input</label>
      <input type="file" class="form-control" id="exampleInputFile">
    </div>
  </form>
  <div class="panel panel-default">
    <div class="panel-heading">File Preview</div>
    <div class="panel-body preview-panel" id="filePreview"></div>
  </div>
</div>

CSS

.preview-panel {
  white-space: pre-line;
  overflow-y: scroll;
  min-height: 100px;
}

JavaScript

function initializeFilePreview() {
  $("#filePreview").resizable({
    handles: "n, s",
    minHeight: 100,
    resize: function(event, ui) {
      adjustHandlePosition();
    }
  });
}
initializeFilePreview();

$("#filePreview").on('scroll', function() {
  adjustHandlePosition();
});

function adjustHandlePosition() {
	var offset = 27;
  if ($('#filePreview')[0].scrollWidth > $('#filePreview')[0].clientWidth) {
  	offset = 0;
  }
  $('.ui-resizable-s').css('top', ($("#filePreview").scrollTop() + $('.preview-panel').height() + offset) + "px");
}

function readFile(file) {
  var reader = new FileReader();
  reader.onload = readSuccess;

  function readSuccess(evt) {
    $('#filePreview').resizable('destroy');
    $('#filePreview').text(evt.target.result);
    initializeFilePreview();
  };
  reader.readAsText(file);
}

$(document).on('change', '#exampleInputFile', function() {
  readFile(this.files[0]);
});