Created
July 20, 2016 04:52
-
-
Save pranavkaushik9/a4b07f72b0c166c9f4b782625f5a500c to your computer and use it in GitHub Desktop.
Horizontal splitter in Angular 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}); | |
} | |
}; | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment