DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

justifyContent

Browse Source
This commit is contained in:
Christopher Chedeau
2014-04-06 17:39:30 -07:00
parent 0b939a2eba
commit ad30eb7d60
2 changed files with 117 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
spec/LayoutSpec.js
View File

@@ -41,6 +41,7 @@ function computeDOMLayout(node) {
transfer(div, node, 'marginRight', 'px');
transfer(div, node, 'flexDirection');
transfer(div, node, 'flex');
transfer(div, node, 'justifyContent');
parent.appendChild(div);
(node.children || []).forEach(function(child) {
renderNode(div, child);
@@ -254,7 +255,7 @@ describe('Layout', function() {
});
});
it('should layout node with targetted margin', function() {
it('should layout node with targeted margin', function() {
testLayout({
style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5},
children: [
@@ -271,5 +272,85 @@ describe('Layout', function() {
});
});
it('should layout node with justifyContent: flex-start', function() {
testLayout({
style: {width: 1000, height: 1000, justifyContent: 'flex-start'},
children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]
}, {
width: 1000, height: 1000, top: 0, left: 0,
children: [
{width: 100, height: 100, top: 0, left: 0},
{width: 100, height: 100, top: 100, left: 0}
]
});
});
it('should layout node with justifyContent: flex-end', function() {
testLayout({
style: {width: 1000, height: 1000, justifyContent: 'flex-end'},
children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]
}, {
width: 1000, height: 1000, top: 0, left: 0,
children: [
{width: 100, height: 100, top: 800, left: 0},
{width: 100, height: 100, top: 900, left: 0}
]
});
});
it('should layout node with justifyContent: space-between', function() {
testLayout({
style: {width: 1000, height: 1000, justifyContent: 'space-between'},
children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]
}, {
width: 1000, height: 1000, top: 0, left: 0,
children: [
{width: 100, height: 100, top: 0, left: 0},
{width: 100, height: 100, top: 900, left: 0}
]
});
});
it('should layout node with justifyContent: space-around', function() {
testLayout({
style: {width: 1000, height: 1000, justifyContent: 'space-around'},
children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]
}, {
width: 1000, height: 1000, top: 0, left: 0,
children: [
{width: 100, height: 100, top: 200, left: 0},
{width: 100, height: 100, top: 700, left: 0}
]
});
});
it('should layout node with justifyContent: center', function() {
testLayout({
style: {width: 1000, height: 1000, justifyContent: 'center'},
children: [
{style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}
]
}, {
width: 1000, height: 1000, top: 0, left: 0,
children: [
{width: 100, height: 100, top: 400, left: 0},
{width: 100, height: 100, top: 500, left: 0}
]
});
});
});

44
src/Layout.js
View File

@@ -42,6 +42,13 @@ function computeLayout(node) {
return 0;
}
function getJustifyContent(node) {
if ('justifyContent' in node.style) {
return node.style.justifyContent;
}
return 'flex-start';
}
var axis = {
left: 'horizontal',
right: 'horizontal',
@@ -88,21 +95,40 @@ function computeLayout(node) {
}
});
var flexibleMainDim =
(node.layout[dim[mainAxis]] - mainContentDim) / flexibleChildrenCount;
children.forEach(function(child) {
if (child.style.flex) {
child.layout[dim[mainAxis]] = flexibleMainDim;
layoutNode(child);
var remainingMainDim = node.layout[dim[mainAxis]] - mainContentDim;
var leadingMainDim = 0;
var betweenMainDim = 0;
if (flexibleChildrenCount) {
var flexibleMainDim = remainingMainDim / flexibleChildrenCount;
children.forEach(function(child) {
if (child.style.flex) {
child.layout[dim[mainAxis]] = flexibleMainDim;
layoutNode(child);
}
});
} else {
var justifyContent = getJustifyContent(node);
if (justifyContent == 'flex-start') {
// Do nothing
} else if (justifyContent === 'flex-end') {
leadingMainDim = remainingMainDim;
} else if (justifyContent === 'center') {
leadingMainDim = remainingMainDim / 2;
} else if (justifyContent === 'space-between') {
betweenMainDim = remainingMainDim / (children.length - 1);
} else if (justifyContent === 'space-around') {
betweenMainDim = remainingMainDim / children.length;
leadingMainDim = betweenMainDim / 2;
}
});
}
var mainPos = 0;
var mainPos = leadingMainDim;
children.forEach(function(child) {
child.layout[pos[mainAxis]] += mainPos;
mainPos += child.layout[dim[mainAxis]] +
getMargin(leading[mainAxis], child) +
getMargin(trailing[mainAxis], child);
getMargin(trailing[mainAxis], child) +
betweenMainDim;
});
if (node.layout[dim[mainAxis]] === undefined && !mainDimInStyle) {