From 8fe8c15e6d80d8e757c88f8ef4611a1f34e16540 Mon Sep 17 00:00:00 2001 From: Jimmy Miller Date: Sat, 7 Feb 2015 00:01:35 -0500 Subject: [PATCH] Rework javascript api to match README --- package.json | 2 +- src/Layout-test-utils.js | 44 +++++++-------------- src/Layout.js | 77 ++++++++++++++++++++++++++---------- src/__tests__/Layout-test.js | 36 +++++++++++++++++ src/main.js | 24 +++++++++++ src/transpile.js | 9 ++++- 6 files changed, 138 insertions(+), 54 deletions(-) create mode 100644 src/main.js diff --git a/package.json b/package.json index 541ee749ef..28b8c570be 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index c316d8caa7..dc9da52362 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -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)}); diff --git a/src/Layout.js b/src/Layout.js index 28cdcb8fad..6f6a63abc5 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -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) diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index f8543322cb..9fbb7d4204 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -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({ diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000000..d34443e22b --- /dev/null +++ b/src/main.js @@ -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; + } +})); \ No newline at end of file diff --git a/src/transpile.js b/src/transpile.js index 093c1a2b88..6354f40e29 100644 --- a/src/transpile.js +++ b/src/transpile.js @@ -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 */ };