Horizontal splitter in Angular 1

Horizontal splitter in Angular 1.markdown

Horizontal splitter in Angular 1

A Pen by Pranav on CodePen.

License.

index.html

<div ng-app='sample'>
  <split-container>
    <split-leftpanel>This is panel 1</split-leftpanel>
    <split-rightpanel>This is panel 2</split-rightpanel>
  </split-container>
</div>

script.js

angular.module('sample', [])
.directive('splitContainer', function(){
  return {
    transclude: {
      leftpanel: 'splitLeftpanel',
      rightpanel: 'splitRightpanel',
    },
    restrict: 'E',
    template: '<div class="split-container noselect"><div><div class="split-container__panel split-container__panel--left"><div ng-transclude="leftpanel"></div><div class="split-container__splitter"></div></div><div class="split-container__panel split-container__panel--right" ng-transclude="rightpanel">test</div>',
    link: function(scope, el, attrs, controller, transFun){
      var self = this;
      var leftPanel = el.find(".split-container__panel--left");
      var rightPanel = el.find(".split-container__panel--right");
      var container = el.find(".split-container");
      el.on("mousedown", function(e){
        if(e.target.className === 'split-container__splitter'){
          self.drag = true;
        }
      });
      el.on("mouseup", function(e){
          self.drag = false;
      });
      el.on("mousemove", function(e){
          console.log(container.width()-e.clientX);
        if(self.drag===true){
          leftPanel.width(e.clientX-5);
          rightPanel.width(container.width()-e.clientX);
        }
      });
    }
  };
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

style.css

.split-container{
  width: 100%;
  height: auto;
}
.split-container__panel{
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  height:200px;
  margin: 0px;
  padding:0px;
  position: relative;
  overflow:auto;
  user-select: none;
}
.split-container__panel--left{
  background-color:blue;
}
.split-container__splitter{
  position: absolute;
  right: 0px;
  top:0px;
  height: 100%;
  width: 5px;
  background-color: #cecece;
  cursor: e-resize;
}
.split-container__panel--right{
  background-color:red;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}