Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit e3461bb

Browse files
BobbieBarkerBobbieBarker
committed
Merge pull request #154 from petrsimon/pr-toggle-and-resize
feat: Programmatically toggle containers
2 parents 06ffdf9 + 24664b4 commit e3461bb

File tree

10 files changed

+974
-135
lines changed

10 files changed

+974
-135
lines changed

‎README.md‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ Default: `false`
100100

101101
Like `disableToggle` above but only removes the arrows on mobile devices (max-device-width: 480px).
102102

103+
103104
## Child Attributes
104105

105106
### uiLayoutContainer
@@ -113,6 +114,39 @@ Required on all child elements of the ui-layout element.
113114
</div>
114115
```
115116

117+
### Options
118+
A string value `'central'` can be passed to the directive:
119+
```xml
120+
<div ui-layout>
121+
<div ui-layout-container></div>
122+
<div ui-layout-container="central"></div>
123+
<div ui-layout-container></div>
124+
</div>
125+
```
126+
127+
The `'central'` container takes up all the remaining space during resizing, regardless of previous state, e.g. after splitbar drag.
128+
129+
### collapsed [collapsed]
130+
Type: `boolean`
131+
132+
```xml
133+
<div ui-layout>
134+
<div ui-layout-container collapsed="true"></div>
135+
<div ui-layout-container collapsed="layout.mycontainer"></div>
136+
</div>
137+
```
138+
139+
Controls collapsed state of the container. Application can store the state of the layout e.g. like so:
140+
```javascript
141+
$scope.layout {
142+
toolbar: true,
143+
leftSidebar: false,
144+
mycontainer: false
145+
}
146+
```
147+
148+
Changing those values will toggle container. See also [`ui.layout.toggle`][event-toggle].
149+
116150
### size
117151
Type: `String`
118152

@@ -171,9 +205,63 @@ percentage
171205

172206
Events are broadcast on the scope where ui-layout is attached. This means they are available to any controller inside of a ui-layout container.
173207

174-
### ui.layout.toggle
208+
### ui.layout.loaded
209+
Returns: `string` or `null`
210+
211+
212+
Dispatched when the layout container finished loading. It returns the value of the attribute, e.g. `ui-layout-loaded="my-loaded-message"`, or `null`. The `null` also means that the layout has finished collapsing all the containers that should be collapsed (per application request when setting the [`collapsed`][collapsed] attribute).
175213

176-
Dispatched when a container is opened or closed using the chevron buttons.
214+
Collapsing container on application load currently goes through these steps:
215+
1. layout is first loaded with all containers uncollapsed (disregarding user set values), then
216+
2. containers are collapsed either:
217+
- _automatically_: application has not set a string return value for the `ui.layout.loaded` event.
218+
- _manually_: application sets collapsed flags in the callback passed to `ui.layout.loaded`
219+
220+
All this means that the user will notice a flicker. If the flicker is not desirable, hide the layout behind an overlay, wait for the `ui.layout.loaded` event. In the "automatic" mode, all is done and the layout should be presentable. In the "manual" mode it is up to the application to count the `ui.layout.toggle` events.
221+
222+
223+
224+
```xml
225+
<div id="main-container" ui-layout ui-layout-loaded>
226+
<div ui-layout-container>
227+
<div ui-layout ui-layout-loaded="child-container">
228+
<div ui-layout-container>
229+
230+
</div>
231+
</div>
232+
</div>
233+
</div>
234+
```
235+
236+
```javascript
237+
$scope.$on('ui.layout.loaded', function(evt, id) => {
238+
switch (id) {
239+
case 'main-container':
240+
...
241+
break;
242+
case 'child-container':
243+
...
244+
break;
245+
default:
246+
break;
247+
}
248+
});
249+
```
250+
251+
Note: the value of the attribute is not evaluated, so:
252+
253+
```
254+
$scope.layout = {
255+
mySidebar: {someKey: 'some value'}
256+
}
257+
258+
<div id='my-sidebar' ui-layout ui-layout-loaded="layout.mySidebar.someKey"></div>
259+
// $scope.$on will receive the string 'layout.mySidebar.someKey'
260+
```
261+
262+
### ui.layout.toggle [event-toggle]
263+
264+
Dispatched when a container is opened or closed. Element can be identified `container.id`, which is the same as `element.id` if provided, otherwise it is `null`.
177265

178266
```javascript
179267
$scope.$on('ui.layout.toggle', function(e, container){
@@ -183,6 +271,9 @@ $scope.$on('ui.layout.toggle', function(e, container){
183271
});
184272
```
185273

274+
Manually toggling (clicking the arrow button on the splitbar) will not update the `collapsed` attribute.
275+
If the application is using the `collapsed` attribute of `ui-layout-container` to programmatically control the collapsed state, the application should update it's state when this event occurs to stay in sync with the UI.
276+
186277
### ui.layout.resize
187278

188279
Dispatched as a splitbar is dragged, debounced to occur only every 50ms.

‎demo/demo2.html‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width">
66

7-
<title></title>
7+
<title>Angular UI Layout Demo 2</title>
88

99
<!-- Le css -->
10-
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
10+
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
1111
<link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>
1212

1313
<!-- Le javascript -->
@@ -16,10 +16,33 @@
1616
<script type="application/javascript">
1717

1818
var app = angular.module('x', ['ui.layout']);
19-
app.controller('DemoController', function($scope) {
19+
app.controller('DemoController', function($scope, $timeout) {
2020
$scope.config = {
2121
flow: 'column'
22+
};
23+
24+
$scope.layout = {
25+
one: false,
26+
four: false
27+
};
28+
29+
$scope.toggle = function(which) {
30+
$scope.layout[which] = !$scope.layout[which];
31+
};
32+
33+
$scope.close = function(which) {
34+
$scope.layout[which] = true;
35+
};
36+
37+
$scope.open = function(which) {
38+
$scope.layout[which] = false;
2239
}
40+
41+
$scope.$on('ui.layout.loaded', function(){
42+
$timeout(function(){
43+
$scope.layout.one = true;
44+
});
45+
})
2346
});
2447

2548
</script>
@@ -38,26 +61,40 @@
3861
}
3962
</style>
4063
</head>
41-
<body ng-controller="DemoController">
42-
<div ui-layout="config">
43-
<div ui-layout-container max-size="50%">
64+
<body ng-controller="DemoController" >
65+
<div ui-layout="config" ui-layout-loaded>
66+
<div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
4467
One
4568
<br/>
4669
<button ng-click="updateDisplay()">Update Display</button>
4770
</div>
48-
<div ui-layout-container>Two</div>
71+
<div ui-layout-container>Two
72+
<p>
73+
<button ng-click="toggle('one')">Toggle One</button></br>
74+
<button ng-click="close('one')">Close One</button></br>
75+
<button ng-click="open('one')">Open One</button></br>
76+
</p>
77+
78+
<p>
79+
<button ng-click="toggle('four')">Toggle Four</button></br>
80+
<button ng-click="close('four')">Close Four</button></br>
81+
<button ng-click="open('four')">Open Four</button></br>
82+
</p>
83+
</div>
4984
<div ui-layout-container>
5085
<!--Three-->
5186
<div ui-layout="{ flow:'row', dividerSize:'12' }">
52-
<div ui-layout-container>Three</div>
87+
<div ui-layout-container>Three-One</div>
5388
<div ui-layout-container>
89+
Three-Two
5490
<div ng-include="demo/testinclude.html"></div>
5591
</div>
5692
</div>
5793
</div>
58-
<div ui-layout-container>
94+
<div ui-layout-container collapsed="layout.four">
5995
Four
6096
</div>
6197
</div>
98+
6299
</body>
63100
</html>

‎demo/demo3.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html ng-app="x">
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
7+
<title>Angular UI Layout Demo 2</title>
8+
9+
<link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>
10+
11+
<script type="application/javascript" src="../bower_components/angular/angular.js"></script>
12+
<script type="application/javascript" src="../src/ui-layout.js"></script>
13+
<script type="application/javascript">
14+
15+
var app = angular.module('x', ['ui.layout']);
16+
app.controller('DemoController', function($scope, $timeout) {
17+
$scope.config = {
18+
flow: 'column'
19+
};
20+
21+
22+
$scope.layout = {
23+
top: true,
24+
one: true,
25+
four: false
26+
};
27+
28+
$scope.cloak = Object.keys($scope.layout).map(function(k) {return $scope.layout[k]}).includes(true);
29+
30+
$scope.toggle = function(which) {
31+
$scope.layout[which] = !$scope.layout[which];
32+
};
33+
34+
$scope.close = function(which) {
35+
$scope.layout[which] = true;
36+
};
37+
38+
$scope.open = function(which) {
39+
$scope.layout[which] = false;
40+
}
41+
42+
$scope.$on('ui.layout.loaded', function(evt, id){
43+
console.error('loaded', typeof id, id)
44+
if (id === null) {
45+
$timeout(function(){
46+
$scope.cloak = false;
47+
}, 500)
48+
} else {
49+
$timeout(function(){
50+
$scope.layout.one = true;
51+
$scope.layout.top = true;
52+
});
53+
}
54+
55+
});
56+
57+
$scope.$on('ui.layout.toggle', function(){
58+
console.error("toggle", new Date())
59+
})
60+
});
61+
62+
</script>
63+
<style>
64+
.red {
65+
background-color: red;
66+
}
67+
.green {
68+
background-color: green;
69+
}
70+
.ui-splitbar {
71+
background-color: red;
72+
}
73+
.ui-layout-container {
74+
background-color: rgba(255, 175, 89, 0.23);
75+
}
76+
77+
.cloak {
78+
position: absolute;
79+
top: 0;
80+
bottom:0;
81+
left: 0;
82+
right: 0;
83+
z-index: 10;
84+
background-color: cornflowerblue;
85+
}
86+
87+
</style>
88+
</head>
89+
<body ng-controller="DemoController" >
90+
<div class="cloak" ng-if="cloak"></div>
91+
<div ui-layout="{flow: 'row'}" ui-layout-loaded>
92+
<div id="top" ui-layout-container collapsed="layout.top" size="50px">TOP</div>
93+
<div ui-layout-container>
94+
<div ui-layout="config" >
95+
<div id="one" ui-layout-container size="100px" max-size="50%" min-size="100px" collapsed="layout.one">
96+
<div ui-layout="{flow: 'row'}">
97+
<div ui-layout-container>One-One</div>
98+
<div ui-layout-container>One-Two</div>
99+
<div ui-layout-container>One-Three</div>
100+
</div>
101+
</div>
102+
<div ui-layout-container>Two
103+
104+
</div>
105+
<div ui-layout-container>
106+
<!--Three-->
107+
<div ui-layout="{ flow:'row', dividerSize:'12' }">
108+
<div ui-layout-container>Three-One one={{ layout.one }}, top={{ layout.top }}</div>
109+
<div ui-layout-container min-size="50px">
110+
Three-Two
111+
<div ng-include="demo/testinclude.html"></div>
112+
</div>
113+
</div>
114+
</div>
115+
<div ui-layout-container collapsed="layout.four">
116+
Four
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)