| 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 |