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

Rework javascript api to match README

Browse Source
This commit is contained in:
Jimmy Miller
2015-02-07 00:01:35 -05:00
parent ce81ef793a
commit 8fe8c15e6d
6 changed files with 138 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "css-layout",
"version": "0.0.1",
"description": "Reimplementation of CSS layout using pure JavaScript",
"main": "src/Layout.js",
"main": "src/main.js",
"scripts": {
"test": "./node_modules/karma/bin/karma start ./karma.conf.js --single-run"
},

44
src/Layout-test-utils.js
View File

@@ -99,8 +99,10 @@ var layoutTestUtils = (function() {
getIframe();
}
if (typeof computeLayout === 'function') {
var realComputeLayout = computeLayout;
if (typeof computeLayout === 'object') {
var fillNodes = computeLayout.fillNodes;
var extractNodes = computeLayout.extractNodes;
var realComputeLayout = computeLayout.computeLayout;
}
function roundLayout(layout) {
@@ -142,34 +144,6 @@ var layoutTestUtils = (function() {
}
function computeCSSLayout(rootNode) {
function fillNodes(node) {
node.layout = {
width: undefined,
height: undefined,
top: 0,
left: 0
};
if (!node.style) {
node.style = {};
}
if (!node.children || node.style.measure) {
node.children = [];
}
node.children.forEach(fillNodes);
}
function extractNodes(node) {
var layout = node.layout;
delete node.layout;
if (node.children.length > 0) {
layout.children = node.children.map(extractNodes);
} else {
delete node.children;
}
return layout;
}
fillNodes(rootNode);
realComputeLayout(rootNode);
return roundLayout(extractNodes(rootNode));
@@ -256,6 +230,14 @@ var layoutTestUtils = (function() {
return namedLayout;
}
function testFillNodes(node, filledNode) {
expect(fillNodes(node)).toEqual(filledNode);
}
function testExtractNodes(node, extractedNode) {
expect(extractNodes(node)).toEqual(extractedNode);
}
function testNamedLayout(name, layoutA, layoutB) {
expect(nameLayout(name, layoutA))
.toEqual(nameLayout(name, layoutB));
@@ -400,6 +382,8 @@ var layoutTestUtils = (function() {
testNamedLayout('expected-dom', expectedLayout, domLayout);
testNamedLayout('layout-dom', layout, domLayout);
},
testFillNodes: testFillNodes,
testExtractNodes: testExtractNodes,
testRandomLayout: function(node, i) {
expect({node: node, layout: computeCSSLayout(node)})
.toEqual({node: node, layout: computeDOMLayout(node)});

77
src/Layout.js
View File

@@ -7,6 +7,7 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
var computeLayout = (function() {
function capitalizeFirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
@@ -25,6 +26,34 @@ var computeLayout = (function() {
return 0;
}
function fillNodes(node) {
node.layout = {
width: undefined,
height: undefined,
top: 0,
left: 0
};
if (!node.style) {
node.style = {};
}
if (!node.children || node.style.measure) {
node.children = [];
}
node.children.forEach(fillNodes);
return node;
}
function extractNodes(node) {
var layout = node.layout;
delete node.layout;
if (node.children && node.children.length > 0) {
layout.children = node.children.map(extractNodes);
} else {
delete node.children;
}
return layout;
}
function getPositiveSpacing(node, type, suffix, location) {
var key = type + capitalizeFirst(location) + suffix;
@@ -188,26 +217,7 @@ var computeLayout = (function() {
return b;
}
var CSS_UNDEFINED = undefined;
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center';
var CSS_JUSTIFY_FLEX_END = 'flex-end';
var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
var CSS_ALIGN_FLEX_START = 'flex-start';
var CSS_ALIGN_CENTER = 'center';
var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';
var CSS_POSITION_ABSOLUTE = 'absolute';
return function layoutNode(node, parentMaxWidth) {
function layoutNode(node, parentMaxWidth) {
var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
CSS_FLEX_DIRECTION_COLUMN :
@@ -649,7 +659,32 @@ var computeLayout = (function() {
}
}
}
};
}
var CSS_UNDEFINED = undefined;
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center';
var CSS_JUSTIFY_FLEX_END = 'flex-end';
var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
var CSS_ALIGN_FLEX_START = 'flex-start';
var CSS_ALIGN_CENTER = 'center';
var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';
var CSS_POSITION_ABSOLUTE = 'absolute';
return {
computeLayout: layoutNode,
fillNodes: fillNodes,
extractNodes: extractNodes
}
})();
// UMD (Universal Module Definition)

36
src/__tests__/Layout-test.js
View File

@@ -9,10 +9,46 @@
/* globals layoutTestUtils */
var testLayout = layoutTestUtils.testLayout;
var testFillNodes = layoutTestUtils.testFillNodes;
var testExtractNodes = layoutTestUtils.testExtractNodes;
var text = layoutTestUtils.text;
var texts = layoutTestUtils.texts;
var textSizes = layoutTestUtils.textSizes;
describe('Javascript Only', function() {
it('should fill root node with layout, style, and children', function() {
testFillNodes(
{},
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
)
})
it('should fill root and child node with layout, style, and children', function() {
testFillNodes(
{children: [{}]},
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: [
{layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
]}
)
})
it('should pull out just the layout object from root', function() {
testExtractNodes(
{layout: {width: undefined, height: undefined, top: 0, left: 0}},
{width: undefined, height: undefined, top: 0, left: 0}
)
})
it('should pull out just the layout object from root and children', function() {
testExtractNodes(
{layout: {width: undefined, height: undefined, top: 0, left: 0}, children: [
{layout: {width: undefined, height: undefined, top: 0, left: 0}}
]},
{width: undefined, height: undefined, top: 0, left: 0, children: [
{width: undefined, height: undefined, top: 0, left: 0}
]}
)
})
});
describe('Layout', function() {
it('should layout a single node with width and height', function() {
testLayout({

24
src/main.js Normal file
View File

@@ -0,0 +1,24 @@
// UMD (Universal Module Definition)
// See https://github.com/umdjs/umd for reference
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
var layout = require('./Layout.js');
return function(node) {
node = layout.fillNodes(node);
layout.computeLayout(node);
node = layout.extractNodes(node);
return node;
}
}));

9
src/transpile.js
View File

@@ -8,7 +8,8 @@
*/
var layoutTestUtils = require('./Layout-test-utils.js');
var computeLayout = require('./Layout.js');
var computeLayout = require('./Layout.js').computeLayout;
var fillNodes = require('./Layout.js').fillNodes;
var fs = require('fs');
var JavaTranspiler = require('./JavaTranspiler.js');
@@ -30,7 +31,11 @@ global.layoutTestUtils = {
textSizes: layoutTestUtils.textSizes
};
global.describe = function(name, cb) { cb(); };
global.describe = function(name, cb) {
if(name == 'Layout') {
cb();
}
};
global.it = function(name, cb) { currentTest = name; cb(); };
global.xit = function() { /* ignore skipped tests */ };