OLD | NEW |
1 SKY MODULE | 1 SKY MODULE |
2 <import src="sky:core" as="sky"/> | 2 <import src="sky:core" as="sky"/> |
3 <script> | 3 <script> |
4 // display: toolbar; | 4 // display: toolbar; |
5 // toolbar-spacing: <length> | 5 // toolbar-spacing: <length> |
6 // display: spring; // remaining space is split equally amongst the springs | 6 // display: spring; // remaining space is split equally amongst the springs |
7 // children are vertically centered, layout out left-to-right with toolbar-spac
ing space between them | 7 // children are vertically centered, layout out left-to-right with toolbar-spac
ing space between them |
8 // last child is hidden by default unless there's not enough room for the other
s, then it's shown last, right-aligned | 8 // last child is hidden by default unless there's not enough room for the other
s, then it's shown last, right-aligned |
9 module.exports.SpringLayoutManager = class SpringLayoutManager extends sky.Layo
utManager { } | 9 module.exports.SpringLayoutManager = class SpringLayoutManager extends sky.Layo
utManager { } |
10 sky.registerLayoutManager('spring', module.exports.SpringLayoutManager); | 10 sky.registerLayoutManager('spring', module.exports.SpringLayoutManager); |
11 sky.registerProperty({ | 11 sky.registerProperty({ |
12 name: 'toolbar-spacing', | 12 name: 'toolbar-spacing', |
13 type: sky.PositiveLengthStyleGrammar, | 13 type: sky.PositiveLengthStyleGrammar, |
14 inherits: true, | 14 inherits: true, |
15 initialValue: 8, | 15 initialValue: 8, |
16 needsLayout: true, | 16 needsLayout: true, |
17 }); | 17 }); |
18 module.exports.ToolbarLayoutManager = class ToolbarLayoutManager extends sky.La
youtManager { | 18 module.exports.ToolbarLayoutManager = class ToolbarLayoutManager extends sky.La
youtManager { |
19 constructor (styleNode) { | 19 constructor (styleNode) { |
20 super(styleNode); | 20 super(styleNode); |
21 this.showingOverflow = false; | 21 this.showingOverflow = false; |
22 this.firstSkippedChild = null; | 22 this.firstSkippedChild = null; |
23 this.overflowChild = null; | 23 this.overflowChild = null; |
24 } | 24 } |
25 function layout(width, height) { | 25 function layout(width, height) { |
26 this.markAsLaidOut(); | |
27 let children = null; | 26 let children = null; |
28 let loop = null; | 27 let loop = null; |
29 if (height == null) | 28 if (height == null) |
30 height = this.getIntrinsicHeight().value; | 29 height = this.getIntrinsicHeight().value; |
31 if (width == null) | 30 if (width == null) |
32 this.assumeDimensions(0, height); | 31 this.assumeDimensions(0, height); |
33 else | 32 else |
34 this.assumeDimensions(width, height); | 33 this.assumeDimensions(width, height); |
35 let spacing = this.node.getProperty('toolbar-spacing'); | 34 let spacing = this.node.getProperty('toolbar-spacing'); |
36 if (typeof spacing != 'number') | 35 if (typeof spacing != 'number') |
(...skipping 14 matching lines...) Expand all Loading... |
51 if (child.layoutManager instanceof module.exports.SpringLayoutManager) { | 50 if (child.layoutManager instanceof module.exports.SpringLayoutManager) { |
52 springCount += 1; | 51 springCount += 1; |
53 pendingSpacing = spacing; // not +=, because we only have one extra spa
cing per batch of springs | 52 pendingSpacing = spacing; // not +=, because we only have one extra spa
cing per batch of springs |
54 } else { | 53 } else { |
55 if (child.needsLayout || child.descendantNeedsLayout) { | 54 if (child.needsLayout || child.descendantNeedsLayout) { |
56 childHeight = child.layoutManager.getIntrinsicHeight(); | 55 childHeight = child.layoutManager.getIntrinsicHeight(); |
57 if (childHeight.value < height) | 56 if (childHeight.value < height) |
58 childHeight = childHeight.value; | 57 childHeight = childHeight.value; |
59 else | 58 else |
60 childHeight = height; | 59 childHeight = height; |
61 dims = child.layoutManager.layout(width, height); | 60 dims = child.layoutManager.layout(null, height); |
62 this.setChildSize(child, dims.width, dims.height); | 61 this.setChildSize(child, dims.width, dims.height); |
63 } else { | 62 } else { |
64 dims = { | 63 dims = { |
65 width: child.width, | 64 width: child.width, |
66 height: child.height, | 65 height: child.height, |
67 }; | 66 }; |
68 } | 67 } |
69 loop = children.next(); | 68 loop = children.next(); |
70 if (!loop.done) { | 69 if (!loop.done) { |
71 if (minX > 0) | 70 if (minX > 0) |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
118 } else { | 117 } else { |
119 // assert: this.showingOverflow == false | 118 // assert: this.showingOverflow == false |
120 } | 119 } |
121 } | 120 } |
122 } | 121 } |
123 if (this.showingOverflow) | 122 if (this.showingOverflow) |
124 this.setChildPosition(this.overflowChild, width-this.overflowChild.width,
(height - this.overflowChild.height)/2); | 123 this.setChildPosition(this.overflowChild, width-this.overflowChild.width,
(height - this.overflowChild.height)/2); |
125 else | 124 else |
126 this.firstSkippedChild = this.overflowChild; | 125 this.firstSkippedChild = this.overflowChild; |
127 | 126 |
| 127 this.markAsLaidOut(); |
128 return { | 128 return { |
129 width: width, | 129 width: width, |
130 height: height, | 130 height: height, |
131 } | 131 } |
132 } | 132 } |
| 133 function layoutDescendants() { |
| 134 this.layout(node.width, node.height); |
| 135 } |
133 function getIntrinsicWidth() { | 136 function getIntrinsicWidth() { |
134 let width = this.node.getProperty('width'); | 137 let width = this.node.getProperty('width'); |
135 if (typeof width != 'number') { | 138 if (typeof width != 'number') { |
136 let spacing = this.node.getProperty('toolbar-spacing'); | 139 let spacing = this.node.getProperty('toolbar-spacing'); |
137 if (typeof spacing != 'number') | 140 if (typeof spacing != 'number') |
138 spacing = 0; | 141 spacing = 0; |
139 width = 0; | 142 width = 0; |
140 let children = this.walkChildren(); | 143 let children = this.walkChildren(); |
141 let loop = children.next(); | 144 let loop = children.next(); |
142 // we exclude the last child because at our ideal width we wouldn't need
it | 145 // we exclude the last child because at our ideal width we wouldn't need
it |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
202 if (this.inChild(loop.value, x, y)) | 205 if (this.inChild(loop.value, x, y)) |
203 return loop.value; | 206 return loop.value; |
204 if (this.showingOverflow) | 207 if (this.showingOverflow) |
205 if (this.inChild(this.overflowChild, x, y)) | 208 if (this.inChild(this.overflowChild, x, y)) |
206 return this.overflowChild; | 209 return this.overflowChild; |
207 return this.node; | 210 return this.node; |
208 } | 211 } |
209 } | 212 } |
210 sky.registerLayoutManager('toolbar', module.exports.ToolbarLayoutManager); | 213 sky.registerLayoutManager('toolbar', module.exports.ToolbarLayoutManager); |
211 </script> | 214 </script> |
OLD | NEW |