Skip to content

Commit 59c0f22

Browse files
JunIceJunIce
committed
chore fix demo, event
1 parent efd1a86 commit 59c0f22

File tree

8 files changed

+368
-114
lines changed

8 files changed

+368
-114
lines changed

‎bower.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "angularjs-collapse-pane",
3+
"version": "0.0.1",
4+
"description": "angularjs collapse pane",
5+
"homepage": "https://github.com/JunIce/angularjs-collapse-pane.git",
6+
"authors": [
7+
"east.qrj@gmail.com"
8+
],
9+
"main": [
10+
"src/collapse.js",
11+
"src/collapse.css"
12+
],
13+
"keywords": [
14+
"AngularJS",
15+
"Split Pane",
16+
"Responsive",
17+
"draggable pane"
18+
],
19+
"license": "MIT",
20+
"ignore": [
21+
"**/.*",
22+
"node_modules",
23+
"bower_components",
24+
"docs/bower_components"
25+
],
26+
"dependencies": {
27+
"angular": ">=1.3.0 <1.5"
28+
}
29+
}
30+

‎collapse-pane.js‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎collapse-pane.css‎ renamed to ‎example/collapse-pane.css‎

File renamed without changes.

‎example/collapse-pane.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
(function () {
2+
'use strict';
3+
angular.module('angular-collapse-pane', [])
4+
.directive('vDivider', function () {
5+
return {
6+
restrict: 'EA',
7+
replace: true,
8+
require: 'vContainer',
9+
template: `<div class='multipane-resizer'></div>`
10+
}
11+
})
12+
.directive('vContainer', function () {
13+
return {
14+
restrict: 'EA',
15+
transclude: true,
16+
replace: true,
17+
scope: {
18+
layout: '@',
19+
resizeStart: '&',
20+
resizeing: '&',
21+
resizeStop: '&',
22+
},
23+
template: `<div ng-transclude></div>`,
24+
link: function ($scope, element) {
25+
var LAYOUT_HORIZONTAL = 'horizontal';
26+
var LAYOUT_VERTICAL = 'vertical';
27+
28+
element.addClass('multipane');
29+
30+
$scope.isResizing = false;
31+
32+
var layout = $scope.layout || 'vertical';
33+
element.addClass('layout-' + layout.slice(0, 1));
34+
35+
36+
element.on('mousedown', onMouseDown)
37+
38+
function onMouseDown(e) {
39+
var target = e.target;
40+
var initialPageX = e.pageX;
41+
var initialPageY = e.pageY;
42+
if (angular.element(target).hasClass('multipane-resizer')) {
43+
var container = e.target.previousElementSibling;
44+
var containerWidth = container.offsetWidth;
45+
var containerHeight = container.offsetHeight;
46+
47+
let usePercentage = !!(container.style.width + '').match('%')
48+
function resize(initialSize, offset) {
49+
var elementClientWidth = element[0].clientWidth;
50+
var elementClientHeight = element[0].clientHeight;
51+
52+
if (layout === LAYOUT_VERTICAL) {
53+
var value = usePercentage ? (initialSize + offset) / elementClientWidth * 100 + '%' : initialSize + offset + 'px';
54+
angular.element(container).css('width', value);
55+
}
56+
57+
if (layout === LAYOUT_HORIZONTAL) {
58+
var value = usePercentage ? (initialSize + offset) / elementClientHeight * 100 + '%' : initialSize + offset + 'px';
59+
angular.element(container).css('height', value);
60+
}
61+
}
62+
63+
$scope.isResizing = true;
64+
65+
$scope.resizeStart && $scope.resizeStart({
66+
$element: element,
67+
$container: container
68+
});
69+
70+
function onMouseMove(event) {
71+
var initialSize = layout === LAYOUT_VERTICAL ? containerWidth : containerHeight;
72+
var offset = layout === LAYOUT_VERTICAL ? event.pageX - initialPageX : event.pageY - initialPageY;
73+
resize(initialSize, offset);
74+
$scope.resizeing && $scope.resizeing({
75+
$element: element,
76+
$container: container
77+
});
78+
}
79+
80+
function onMouseUp() {
81+
var initialSize = layout === LAYOUT_VERTICAL ? container.clientWidth : container.clientHeight;
82+
resize(initialSize, 0);
83+
$scope.isResizing = false;
84+
$scope.resizeStop && $scope.resizeStop({
85+
$element: element,
86+
$container: container
87+
});
88+
window.removeEventListener('mousemove', onMouseMove);
89+
window.removeEventListener('mousemove', onMouseUp);
90+
}
91+
92+
window.addEventListener('mousemove', onMouseMove);
93+
window.addEventListener('mouseup', onMouseUp);
94+
}
95+
}
96+
}
97+
};
98+
})
99+
})()

‎example/index.html‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,120 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Collapse Pane</title>
7+
<title>Angularjs Collapse Pane</title>
88
<style>
9-
table, th, tr, td{
10-
border: 1px solid #000;
9+
body {
10+
padding: 20px;
11+
}
12+
.container{
13+
width: 800px;
14+
margin: auto;
15+
}
16+
.center{
17+
text-align: center;
1118
}
1219
.box{
1320
height: 400px;
1421
background-color: #f4f4f4;
1522
border: 1px solid #ccc;
1623
}
17-
.hresizer{
24+
.code{
25+
background-color: #1c2b2d;
26+
color: #ffffff;
27+
padding: 10px 12px;
28+
border-radius: 4px;
29+
}
30+
.component{
31+
padding: 10px;
32+
box-sizing: border-box;
33+
overflow: hidden;
34+
}
35+
.vertical-resize{
1836
width: 10px;
1937
border-left: 1px solid #ccc;
2038
}
39+
.horizontal-resize{
40+
height: 10px;
41+
border-bottom: 1px solid #ccc;
42+
}
43+
44+
.vertical-box .component:not(:first-child){
45+
border-left: 1px solid #ccc;
46+
}
47+
48+
.horizontal-box .component:not(:first-child){
49+
border-top: 1px solid #ccc;
50+
}
2151
</style>
22-
<link rel="stylesheet" href="../collapse-pane.css">
52+
<link rel="stylesheet" href="./collapse-pane.css">
2353
</head>
2454

2555
<body data-ng-app="myapp">
26-
<div>
27-
<div class="box">
28-
<div v-container style="height: 100%;">
29-
<div style="width: 200px; min-width: 150px; max-width: 200px;">
30-
<h1>123</h1>
56+
<div class="container">
57+
<h1 class="center">Angularjs Collapse Pane</h1>
58+
<hr/>
59+
<h2>Layout Vertical</h2>
60+
<div class="box" ng-controller="myCtrl">
61+
<div v-container style="height: 100%;" class="vertical-box" resize-start="resizeStart($element, $container)" resizeing="resizeing($element, $container)" resize-stop="resizeStop($element, $container)">
62+
<div style="width: 200px; min-width: 150px; max-width: 200px;" class="component">
63+
<p>with limit size</p>
64+
<div class="code">width: 200px; min-width: 150px; max-width: 200px;</div>
65+
</div>
66+
<div v-divider></div>
67+
<div style="width: 20%; max-width: 30%" class="component">
68+
<p>with percent size</p>
69+
<div class="code">width: 20%; max-width: 30%</div>
3170
</div>
32-
<div v-divider class="hresizer"></div>
33-
<div style="flex-grow: 1">
34-
<h1>sdafsd</h1>
71+
<div v-divider></div>
72+
<div style="flex-grow: 1" class="component">
73+
<p>remaining space</p>
74+
<div class="code">flex-grow: 1</div>
3575
</div>
3676
</div>
3777
</div>
78+
<hr/>
79+
80+
<h2>Layout Horizontal</h2>
81+
<div class="box">
82+
<v-container layout="horizontal" style="height: 100%;" class="horizontal-box">
83+
<div style="height: 50px; min-height: 30px; max-height: 100px;" class="component">
84+
<p>with limit size</p>
85+
<div class="code">height: 50px; min-height: 30px; max-height: 100px;</div>
86+
</div>
87+
<v-divider></v-divider>
88+
<div style="height: 20%; min-height: 15%; max-height: 30%" class="component">
89+
<p>with percent size</p>
90+
<div class="code">height: 20%; min-height: 15%; max-height: 30%</div>
91+
</div>
92+
<v-divider></v-divider>
93+
<div style="flex-grow: 1" class="component">
94+
<p>remaining space</p>
95+
<div class="code">flex-grow: 1</div>
96+
</div>
97+
</v-container>
98+
</div>
3899
</div>
39100

40101
<script src="https://cdn.jsdelivr.net/npm/angular@1.8.2/angular.min.js"></script>
41-
<script src="../collapse-pane.js"></script>
102+
<script src="./collapse-pane.js"></script>
42103
<script type="text/javascript">
43-
angular.module('myapp', ['volcan0.collapse-pane'])
104+
var app = angular.module('myapp', ['angular-collapse-pane'])
105+
106+
app.controller('myCtrl', function($scope){
107+
108+
109+
$scope.resizeStart = function(e, container) {
110+
console.log('resize-start', e, container)
111+
}
112+
113+
$scope.resizeing = function(e, container) {
114+
console.log('resize-ing', e, container)
115+
}
116+
117+
$scope.resizeStop = function(e, container) {
118+
console.log('resize-stop', e, container)
119+
}
120+
});
44121
</script>
45122
</body>
46-
47123
</html>

‎package.json‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "angularjs-collapse-pane",
3-
"version": "1.0.0",
3+
"version": "0.0.1",
44
"description": "angularjs collapse pane",
5-
"main": "index.js",
6-
"homepage": "https://github.com/JunIce/angularjs-collapse-pane",
5+
"main": "src/collapse-pane.js",
6+
"homepage": "https://junice.github.io/angularjs-collapse-pane",
77
"repository": {
88
"type": "git",
99
"url": "git+https://github.com/JunIce/angularjs-collapse-pane.git"
@@ -12,19 +12,17 @@
1212
"deploy": "gh-pages -d example"
1313
},
1414
"keywords": [
15-
"split",
16-
"pane",
17-
"draggable",
18-
"pane",
19-
"collapsible",
20-
"pane"
15+
"AngularJS",
16+
"Split Pane",
17+
"Responsive",
18+
"draggable pane"
2119
],
2220
"author": "east.qrj@gmail.com",
23-
"license": "ISC",
21+
"license": "MIT",
2422
"bugs": {
2523
"url": "https://github.com/JunIce/angularjs-collapse-pane/issues"
2624
},
27-
"homepage": "https://github.com/JunIce/angularjs-collapse-pane#readme",
25+
"homepage": "https://github.com/JunIce/angularjs-collapse-pane",
2826
"devDependencies": {
2927
"gh-pages": "^3.1.0"
3028
}

0 commit comments

Comments
 (0)