Fixed left

├── .gitignore ├── package.json ├── bower.json ├── LICENSE ├── examples ├── fixed-left.html ├── fixed-right.html ├── percent-left.html ├── percent-top.html ├── fixed-top.html ├── percent-right.html ├── fixed-bottom.html ├── percent-bottom.html ├── pretty.html ├── nested.html └── set-component-size.html ├── README.md └── angular-split-pane.js /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@shagstrom/angular-split-pane", 3 | "main": "split-pane.js", 4 | "version": "1.3.2", 5 | "homepage": "https://github.com/shagstrom/angular-split-pane", 6 | "repository" :{ 7 | "type" : "git", 8 | "url" : "https://github.com/shagstrom/angular-split-pane.git" 9 | }, 10 | "author": "Simon Hagström ", 11 | "description": "An AngularJS Split Pane directive", 12 | "license": "MIT", 13 | "dependencies":{ 14 | "@shagstrom/split-pane": "0.9.4", 15 | "angular": "^1.2.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-split-pane", 3 | "main": [ 4 | "angular-split-pane.js" 5 | ], 6 | "version": "1.3.2", 7 | "homepage": "https://github.com/shagstrom/angular-split-pane", 8 | "authors": [ 9 | "Simon Hagström " 10 | ], 11 | "description": "An AngularJS Split Pane directive", 12 | "license": "MIT", 13 | "dependencies": { 14 | "split-pane": "0.9.4", 15 | "angular": "^1.2.0" 16 | }, 17 | "ignore": [ 18 | "**/.*", 19 | "examples", 20 | "README.md", 21 | "bower_components" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Simon Hagström 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /examples/fixed-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fixed left 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

left

37 |

38 |

right

39 |

40 | 43 | 44 | -------------------------------------------------------------------------------- /examples/fixed-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fixed right 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

left

37 |

38 |

right

39 |

40 | 43 | 44 | -------------------------------------------------------------------------------- /examples/percent-left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Percent left 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

left

37 |

38 |

right

39 |

40 | 43 | 44 | -------------------------------------------------------------------------------- /examples/percent-top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Percent top 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

top

37 |

38 |

bottom

39 |

40 | 43 | 44 | -------------------------------------------------------------------------------- /examples/fixed-top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fixed top 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

top

37 |

38 |

bottom

39 |

40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/percent-right.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Percent right 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

left

37 |

38 |

right

39 |

40 | 43 | 44 | -------------------------------------------------------------------------------- /examples/fixed-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fixed bottom 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

top

37 |

38 |

bottom

39 |

40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/percent-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Percent bottom 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

top

37 |

38 |

bottom

39 |

40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/pretty.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic Example 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |

25 |

26 |

27 |

28 |

top component

29 |

In this example I have added style from pretty-split-pane.css. Feel free to use it or style things your own way.

30 |

31 |

32 |

33 |

34 |

35 |

bottom component

36 |

37 |

38 |

39 |

40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/nested.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nested and pretty 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |

25 |

26 |

27 |

top

28 |

29 |

30 |

31 |

32 |

33 |

left

34 |

35 |

36 |

37 |

38 |

39 |

top

40 |

41 |

42 |

43 |

bottom

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /examples/set-component-size.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Set component size 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |

36 |

37 |

Left

38 |

39 | 40 |

41 |

Left component size {{splitPaneProperties.firstComponentSize}}px

42 |

Right component size {{splitPaneProperties.lastComponentSize}}px

43 |

44 |

45 |

46 |

Right

47 |

48 | 49 |

50 |

Left component size {{splitPaneProperties.firstComponentSize}}px

51 |

Right component size {{splitPaneProperties.lastComponentSize}}px

52 |

53 |

54 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-split-pane 2 | ================== 3 | 4 | An AngularJS Split Pane directive 5 | 6 | [Demo](http://www.dreamchain.com/static/angular-split-pane/examples/nested.html) 7 | 8 | The directive should work in IE8 and above as well as in Chrome, Safari and Firefox. 9 | 10 | You can add angular-split-pane.js by to you project by installing with bower 11 | 12 | bower install angular-split-pane 13 | 14 | or with npm 15 | 16 | npm install @shagstrom/angular-split-pane 17 | 18 | You can get and set component sizes in the object specified by attribute "split-pane-properties". 19 | 20 | Below is a basic example on how to use the directive: 21 | 22 | [Basic Demo](http://www.dreamchain.com/static/angular-split-pane/examples/fixed-left.html) 23 | 24 | 25 | 26 | 27 | 28 | 29 | Fixed left 30 | 31 | 32 | 33 | 34 | 35 | 42 | 43 | 44 |

45 |

left

46 |

47 |

right

48 |

49 | 52 | 53 | 54 | 55 | Here is an example where we are getting and setting component sizes: 56 | 57 | [Set component size Demo](http://www.dreamchain.com/static/angular-split-pane/examples/set-component-size.html) 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | Fixed left 66 | 67 | 68 | 69 | 70 | 71 | 78 | 79 | 80 |

81 |

82 |

Left

83 |

84 | 85 |

86 |

Left component size {{splitPaneProperties.firstComponentSize}}px

87 |

Right component size {{splitPaneProperties.lastComponentSize}}px

88 |

89 |

90 |

91 |

Right

92 |

93 | 94 |

95 |

Left component size {{splitPaneProperties.firstComponentSize}}px

96 |

Right component size {{splitPaneProperties.lastComponentSize}}px

97 |

98 |

99 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /angular-split-pane.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | AngularJS Split Pane directive v1.3.0 4 | 5 | Copyright (c) 2014-2016 Simon Hagström 6 | 7 | Released under the MIT license 8 | https://raw.github.com/shagstrom/split-pane/master/LICENSE 9 | 10 | */ 11 | angular.module('shagstrom.angular-split-pane', []) 12 | .directive('splitPane', function() { 13 | return { 14 | restrict: 'EA', 15 | replace: true, 16 | transclude: true, 17 | scope: { 18 | splitPaneProperties: '=' 19 | }, 20 | controller: ['$scope', function($scope) { 21 | $scope.components = []; 22 | this.addComponent = function(attributes) { 23 | $scope.components.push(attributes); 24 | }; 25 | this.addDivider = function(attributes) { 26 | $scope.divider = attributes; 27 | }; 28 | }], 29 | link: function($scope, element, attrs) { 30 | var $firstComponent = element.children('.split-pane-component:first'), 31 | $divider = element.children('.split-pane-divider'), 32 | $lastComponent = element.children('.split-pane-component:last'); 33 | if ($scope.components[0].width && $scope.components[0].width.match(/%$/)) { 34 | element.addClass('vertical-percent'); 35 | var rightPercent = (100 - parseFloat($scope.components[0].width.match(/(\d+)%$/)[1])) + "%" ; 36 | $firstComponent.css({ right: rightPercent, marginRight: $scope.divider.width }); 37 | $divider.css({ right: rightPercent, width: $scope.divider.width }); 38 | $lastComponent.css({ width: rightPercent }); 39 | } else if ($scope.components[0].width) { 40 | element.addClass('fixed-left'); 41 | $firstComponent.css({ width: $scope.components[0].width }); 42 | $divider.css({ left: $scope.components[0].width, width: $scope.divider.width }); 43 | $lastComponent.css({ left: $scope.components[0].width, marginLeft: $scope.divider.width }); 44 | } else if ($scope.components[1].width && $scope.components[1].width.match(/%$/)) { 45 | element.addClass('vertical-percent'); 46 | $firstComponent.css({ right: $scope.components[1].width, marginRight: $scope.divider.width }); 47 | $divider.css({ right: $scope.components[1].width, width: $scope.divider.width }); 48 | $lastComponent.css({ width: $scope.components[1].width }); 49 | } else if ($scope.components[1].width) { 50 | element.addClass('fixed-right'); 51 | $firstComponent.css({ right: $scope.components[1].width, marginRight: $scope.divider.width }); 52 | $divider.css({ right: $scope.components[1].width, width: $scope.divider.width }); 53 | $lastComponent.css({ width: $scope.components[1].width }); 54 | } else if ($scope.components[0].height && $scope.components[0].height.match(/%$/)) { 55 | element.addClass('horizontal-percent'); 56 | var bottomPercent = (100 - parseFloat($scope.components[0].height.match(/(\d+)%$/)[1])) + "%" ; 57 | $firstComponent.css({ bottom: bottomPercent, marginBottom: $scope.divider.height }); 58 | $divider.css({ bottom: bottomPercent, height: $scope.divider.height }); 59 | $lastComponent.css({ height: bottomPercent }); 60 | } else if ($scope.components[0].height) { 61 | element.addClass('fixed-top'); 62 | $firstComponent.css({ height: $scope.components[0].height }); 63 | $divider.css({ top: $scope.components[0].height, height: $scope.divider.height }); 64 | $lastComponent.css({ top: $scope.components[0].height, marginTop: $scope.divider.height }); 65 | } if ($scope.components[1].height && $scope.components[1].height.match(/%$/)) { 66 | element.addClass('horizontal-percent'); 67 | $firstComponent.css({ bottom: $scope.components[1].height, marginBottom: $scope.divider.height }); 68 | $divider.css({ bottom: $scope.components[1].height, height: $scope.divider.height }); 69 | $lastComponent.css({ height: $scope.components[1].height }); 70 | } else if ($scope.components[1].height) { 71 | element.addClass('fixed-bottom'); 72 | $firstComponent.css({ bottom: $scope.components[1].height, marginBottom: $scope.divider.height }); 73 | $divider.css({ bottom: $scope.components[1].height, height: $scope.divider.height }); 74 | $lastComponent.css({ height: $scope.components[1].height }); 75 | } 76 | element.splitPane(); 77 | var localFirstComponentSize, localLastComponentSize; 78 | element.on('splitpaneresize', function (event, splitPaneProperties) { 79 | if ($scope.splitPaneProperties && event.target === element[0] && 80 | localFirstComponentSize !== splitPaneProperties.firstComponentSize && 81 | localLastComponentSize !== splitPaneProperties.lastComponentSize) { 82 | $scope.$apply(function () { 83 | localFirstComponentSize = splitPaneProperties.firstComponentSize; 84 | $scope.splitPaneProperties.firstComponentSize = splitPaneProperties.firstComponentSize; 85 | localLastComponentSize = splitPaneProperties.lastComponentSize; 86 | $scope.splitPaneProperties.lastComponentSize = splitPaneProperties.lastComponentSize; 87 | }); 88 | } 89 | }); 90 | $scope.$watch('splitPaneProperties.firstComponentSize', function (firstComponentSize) { 91 | if ((firstComponentSize || firstComponentSize === 0) && firstComponentSize !== localFirstComponentSize) { 92 | localFirstComponentSize = firstComponentSize; 93 | element.splitPane('firstComponentSize', firstComponentSize); 94 | } 95 | }); 96 | $scope.$watch('splitPaneProperties.lastComponentSize', function (lastComponentSize) { 97 | if ((lastComponentSize || lastComponentSize === 0) && lastComponentSize !== localLastComponentSize) { 98 | localLastComponentSize = lastComponentSize; 99 | element.splitPane('lastComponentSize', lastComponentSize); 100 | } 101 | }); 102 | }, 103 | template: '

' 104 | }; 105 | }) 106 | .directive('splitPaneComponent', function() { 107 | return { 108 | restrict: 'EA', 109 | replace: true, 110 | transclude: true, 111 | require: '^splitPane', 112 | link: function($scope, element, attrs, paneCtrl) { 113 | paneCtrl.addComponent({ width: attrs.width, height: attrs.height }); 114 | }, 115 | template: '

' 116 | }; 117 | }) 118 | .directive('splitPaneDivider', function() { 119 | return { 120 | restrict: 'EA', 121 | replace: true, 122 | transclude: true, 123 | require: '^splitPane', 124 | link: function($scope, element, attrs, paneCtrl) { 125 | paneCtrl.addDivider({ width: attrs.width, height: attrs.height }); 126 | }, 127 | template: '

' 128 | }; 129 | }); 130 | --------------------------------------------------------------------------------