diff --git a/.gitignore b/.gitignore
index e8e52f0..8156b0c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
/node_modules/
/test/bundle.js
+npm-debug.log
diff --git a/LICENSE b/LICENSE
index 35f76d0..70fec2f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-
diff --git a/README.md b/README.md
index c3d7482..989374c 100644
--- a/README.md
+++ b/README.md
@@ -10,12 +10,12 @@ Information according the need of vendor prefixes were taken from [Richard Brads
For further information about Flexbox check [Flexbox.md](Flexbox.md).
## Usage
-Install via `npm`. Use `-save` if you'd like to add it to your *package.json*.
+Install via `npm`. Use `-save` if you'd like to add it to your *package.json*.
```sh
npm install obscene-layout
```
-
-
+
+
Now you can *require* it within your React code.
```javascript
var ObsceneLayout = require('obscene-layout');
@@ -38,6 +38,7 @@ var styles = Layout.createStylesheet({
}
});
```
+
You may then refer to your styles like this `Text in Box`. If using Mozilla Firefox this will automatically add `MozBoxSizing : 'border-box'` to your styles since it is recommended to use in this case.
If you'd like to add vendor prefixes to a given single style object you may use `Layout.generateStyles({STYLES_OBJECT})`;
@@ -66,5 +67,5 @@ For detail information see [Flexbox props](Flexbox.md#props)
Obscene including all repositories listed above is licensed under the [MIT License](http://opensource.org/licenses/MIT).
## Contributing
-Feel free to contribute.
+Feel free to contribute.
Created with ♥ by [@rofrischmann](http://rofrischmann.de) at [Unverschämt](http://unverschaemt.net).
diff --git a/package.json b/package.json
index e701548..31945f2 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
{
"name": "obscene-layout",
- "version": "0.1.1",
- "description": "Layouting library for React.js based on flexbox",
- "main": "src/components.js",
+ "version": "0.2.0",
+ "description": "Layouting library for React.js with full-featured vendor prefixes and flexbox",
+ "main": "src/obscene-layout.js",
"files": [
- "LICENSE",
- "README.md",
- "src/"
- ],
+ "LICENSE",
+ "README.md",
+ "src/"
+ ],
"directories": {
"example": "test"
},
@@ -24,12 +24,13 @@
"layout",
"flexbox",
"styling",
- "flex"
+ "flex",
+ "vendor"
],
"author": "Robin Frischmann",
"license": "MIT",
"dependencies": {
- "object-assign": "^2.0.0",
+ "object-assign": "^3.0.0",
"react": "^0.13.0"
},
"devDependencies": {
diff --git a/src/Box.react.js b/src/Box.react.js
deleted file mode 100644
index 1f58c92..0000000
--- a/src/Box.react.js
+++ /dev/null
@@ -1,37 +0,0 @@
-var React = require('react');
-var objectAssign = require('object-assign');
-var FlexLayout = require('./flexlayout');
-
-var Box = React.createClass({
- render: function () {
- var props = this.props;
- var vendorStyles = [];
- var vendor = FlexLayout.getVendorPrefix();
-
- var flex = (props.inline ? 'inline-flex' : 'flex')
- var styles = {
- display: (vendor == 'webkit' ? '-webkit-' + flex : (vendor == 'ms' ? '-ms-' + flex + 'box' : flex))
- };
- //direction
- var flexDir = (props.reverse ? '-reverse' : '');
- var flexOrient = (props.column ? 'column' : 'row');
- vendorStyles.push(FlexLayout.flexDirection(flexOrient + flexDir));
-
- props.justifyContent && vendorStyles.push(FlexLayout.justifyContent(props.justifyContent));
- props.alignItems && vendorStyles.push(FlexLayout.alignItems(props.alignItems));
- props.alignContent && vendorStyles.push(FlexLayout.alignContent(props.alignContent));
- props.wrap && vendorStyles.push(FlexLayout.wrap('wrap'));
- props.wrapReverse && vendorStyles.push(FlexLayout.wrap('wrapReverse'));
- props.flexFlow && vendorStyles.push(FlexLayout.flexFlow('flexFlow'));
-
- vendorStyles.forEach(function(item){
- styles = objectAssign(styles, item);
- });
- if (props.style){
- styles = objectAssign(styles, props.style);
- }
- return {props.children}
;
- }
-});
-
-module.exports = Box;
diff --git a/src/Item.react.js b/src/Item.react.js
deleted file mode 100644
index 96e4261..0000000
--- a/src/Item.react.js
+++ /dev/null
@@ -1,31 +0,0 @@
-var React = require('react');
-var objectAssign = require('object-assign');
-var FlexLayout = require('./flexlayout');
-
-var Item = React.createClass({
- render: function () {
- var props = this.props;
- var vendorStyles = [];
- var styles = {};
- if (props.flex) {
- vendorStyles.push(FlexLayout.flex(props.flex));
- } else {
- styles = objectAssign(styles, FlexLayout.flex('1 0 auto'));
- };
- props.flexBasis && vendorStyles.push(FlexLayout.flexBasis(props.flexBasis));
- props.flexGrow && vendorStyles.push(FlexLayout.flexGrow(props.flexGrow));
- props.flexShrink && vendorStyles.push(FlexLayout.flexShrink(props.flexShrink));
- props.flexOrder && vendorStyles.push(FlexLayout.flexOrder(props.flexOrder));
- props.alignSelf && vendorStyles.push(FlexLayout.alignSelf(props.alignSelf));
-
- vendorStyles.forEach(function (item) {
- styles = objectAssign(styles, item);
- });
- if (props.style) {
- styles = objectAssign(styles, props.style);
- }
- return {props.children}
;
- }
-});
-
-module.exports = Item;
diff --git a/src/Page.react.js b/src/Page.react.js
deleted file mode 100644
index 520a959..0000000
--- a/src/Page.react.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var React = require('react');
-var objectAssign = require('object-assign');
-
-var Page = React.createClass({
- render: function () {
- var props = this.props;
- var styles = {
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- position: 'absolute'
- };
- if (props.style) {
- objectAssign(styles, props.style)
- }
- return {props.children}
;
- }
-});
-
-module.exports = Page;
diff --git a/src/component/Box.react.js b/src/component/Box.react.js
new file mode 100644
index 0000000..74eb082
--- /dev/null
+++ b/src/component/Box.react.js
@@ -0,0 +1,34 @@
+var React = require('react');
+var Layout = require('../core/layout');
+var objectAssign = require('object-assign');
+
+var Box = React.createClass({
+ render: function () {
+ var props = this.props;
+ var vendor = Layout.getVendorPrefix();
+ var vendorStyles = {};
+ var flex = (props.inline ? 'inline-flex' : 'flex');
+ var flexDir = (props.reverse ? '-reverse' : '');
+ var flexOrient = (props.column ? 'column' : 'row');
+
+ vendorStyles['display'] = (vendor == 'Webkit' ? '-webkit-' + flex : (vendor == 'ms' ? '-ms-' + flex + 'box' : flex))
+ vendorStyles['flexDirection'] = flexOrient + flexDir;
+
+ props.wrap && (vendorStyles['wrap'] = 'wrap');
+ props.wrapReverse && (vendorStyles['wrap'] = 'wrapReverse');
+
+ var properties = ['justifyContent', 'alignItems', 'alignContent', 'flexFlow'];
+
+ properties.forEach(function(item){
+ props[item] && (vendorStyles[item] = props[item]);
+ });
+
+ var styles = Layout.generateStyles(vendorStyles);
+ if (props.style){
+ styles = objectAssign(styles, props.style);
+ }
+ return {props.children}
;
+ }
+});
+
+module.exports = Box;
diff --git a/src/Fit.react.js b/src/component/Fit.react.js
similarity index 72%
rename from src/Fit.react.js
rename to src/component/Fit.react.js
index 5c91e93..60b64a3 100644
--- a/src/Fit.react.js
+++ b/src/component/Fit.react.js
@@ -1,15 +1,17 @@
var React = require('react');
+var Layout = require('../core/layout');
var objectAssign = require('object-assign');
var Fit = React.createClass({
render: function () {
var props = this.props;
+
var styles = {
height: '100%',
width: '100%'
- };
- if (props.style) {
- objectAssign(styles, props.style)
+ }
+ if (props.style){
+ styles = objectAssign(styles, props.style);
}
return {props.children}
;
}
diff --git a/src/component/Item.react.js b/src/component/Item.react.js
new file mode 100644
index 0000000..0b76a3a
--- /dev/null
+++ b/src/component/Item.react.js
@@ -0,0 +1,25 @@
+var React = require('react');
+var Layout = require('../core/layout');
+var objectAssign = require('object-assign');
+
+var Item = React.createClass({
+ render: function () {
+ var props = this.props;
+ var vendorStyles = {};
+ props.flex && (vendorStyles['flex'] = (props.flex ? props.flex : '0 1 auto'));
+
+ var properties = ['flexBasis', 'flexGrow', 'flexShrink', 'order', 'alignSelf'];
+
+ properties.forEach(function (item){
+ props[item] && (vendorStyles[item] = props[item]);
+ });
+
+ var styles = Layout.generateStyles(vendorStyles);
+ if (props.style){
+ styles = objectAssign(styles, props.style);
+ }
+ return {props.children}
;
+ }
+});
+
+module.exports = Item;
diff --git a/src/component/Page.react.js b/src/component/Page.react.js
new file mode 100644
index 0000000..baf027e
--- /dev/null
+++ b/src/component/Page.react.js
@@ -0,0 +1,24 @@
+var React = require('react');
+var Layout = require('../core/layout');
+var objectAssign = require('object-assign');
+
+var Page = React.createClass({
+ render: function () {
+ var props = this.props;
+
+ var styles ={
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ position: 'absolute'
+ };
+
+ if (props.style){
+ styles = objectAssign(styles, props.style);
+ }
+ return {props.children}
;
+ }
+});
+
+module.exports = Page;
diff --git a/src/components.js b/src/components.js
deleted file mode 100644
index 5608c65..0000000
--- a/src/components.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var Box = require('./Box.react');
-var Item = require('./Item.react');
-var Fit = require('./Fit.react');
-var Page = require('./Page.react');
-
-module.exports = {
- Box: Box,
- Item: Item,
- Page: Page,
- Fit : Fit
-};
diff --git a/src/core/equivalent.js b/src/core/equivalent.js
new file mode 100644
index 0000000..1957291
--- /dev/null
+++ b/src/core/equivalent.js
@@ -0,0 +1,14 @@
+module.exports = {
+ property: {
+ 'alignSelf': 'flexItemAlign',
+ 'alignItems': 'flexAlign',
+ 'alignContent': 'flexLinePack',
+ 'justifyContent': 'flexPack',
+ },
+ value: {
+ 'space-between': 'justify',
+ 'space-around': 'distribute',
+ 'flex-start': 'start',
+ 'flex-end': 'end'
+ }
+}
diff --git a/src/core/layout.js b/src/core/layout.js
new file mode 100644
index 0000000..c5c7366
--- /dev/null
+++ b/src/core/layout.js
@@ -0,0 +1,48 @@
+var options = require('./options');
+var equivalent = require('./equivalent');
+
+var Layout = {
+ caplitalizeString: function(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+ },
+ getEquivalent: function(string, type) {
+ return equivalent[type][string];
+ },
+ getVendorPrefix: function() {
+ var userAgent = navigator.userAgent.toLowerCase();
+ var vendorPrefixes = {
+ firefox: 'Moz',
+ chrome: 'Webkit',
+ safari: 'Webkit',
+ opera: 'O',
+ msie: 'ms'
+ };
+ var browserMatch = userAgent.match('opera') || userAgent.match('msie') || userAgent.match('firefox') || userAgent.match("safari|chrome");
+ return vendorPrefixes[browserMatch[0]];
+ },
+ getVendorStyle: function(vendor, style, equivalent) {
+ return vendor + this.caplitalizeString(equivalent > -1 ? this.getEquivalent(style, 'property') : style);
+ },
+ generateStyles: function(styles) {
+ var vendor = this.getVendorPrefix();
+ var opts = options[vendor.toLowerCase()];
+
+ var style;
+ for (style in styles) {
+ if (opts.prefix.indexOf(style) > -1) {
+ var value = styles[style];
+ styles[this.getVendorStyle(vendor, style, opts.equivalent.property.indexOf(style))] = (opts.equivalent.value.indexOf(value) > -1 ? this.getEquivalent(value, 'value') : value)
+ }
+ }
+ return styles;
+ },
+ createStylesheet : function(styles){
+ var i;
+ for (i in styles){
+ styles[i] = this.generateStyles(styles[i]);
+ }
+ return styles;
+ }
+};
+
+module.exports = Layout;
diff --git a/src/core/options.js b/src/core/options.js
new file mode 100644
index 0000000..84b1a11
--- /dev/null
+++ b/src/core/options.js
@@ -0,0 +1,30 @@
+module.exports = {
+ 'webkit': {
+ prefix: ['alignContent', 'alignItems', 'alignSelf', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexFlow', 'flexShrink', 'flexWrap', 'justifyContent', 'order'],
+ equivalent: {
+ value: [],
+ property: []
+ }
+ },
+ 'ms': {
+ prefix: ['alignItems', 'alignSelf', 'alignContent', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexFlow', 'flexShrink', 'flexWrap', 'justifyContent', 'order'],
+ equivalent: {
+ value: ['flex-end', 'flex-start', 'space-between', 'space-around'],
+ property: ['alignContent', 'alignItems', 'alignSelf', 'justifyContent']
+ }
+ },
+ 'moz': {
+ prefix: [],
+ equivalent: {
+ value: [],
+ property: []
+ }
+ },
+ 'o': {
+ prefix: [],
+ equivalent: {
+ value: [],
+ porperty: []
+ }
+ }
+}
diff --git a/src/flexlayout.js b/src/flexlayout.js
deleted file mode 100644
index cb378fd..0000000
--- a/src/flexlayout.js
+++ /dev/null
@@ -1,84 +0,0 @@
-var FlexLayout = {
- msEquivalent: {
- property: {
- 'alignSelf': 'flexItemAlign',
- 'alignItems': 'flexAlign',
- 'alignContent': 'flexLinePack',
- 'justifyContent': 'flexPack',
- },
- value: {
- 'space-between': 'justify',
- 'space-around': 'distribute',
- 'flex-start': 'start',
- 'flex-end': 'end'
- }
- },
- caplitalizeString: function(string) {
- return string.charAt(0).toUpperCase() + string.slice(1);
- },
- getMsEquivalent: function(string, type) {
- return (string in this.msEquivalent[type] ? this.msEquivalent[type][string] : string);
- },
- getVendorPrefix: function() {
- var ua = navigator.userAgent.toLowerCase(),
- match = /opera/.exec(ua) || /msie/.exec(ua) || /firefox/.exec(ua) || /(chrome|safari)/.exec(ua),
- vendors = {
- firefox: 'moz',
- chrome: 'webkit',
- safari: 'webkit',
- opera: 'o',
- msie: 'ms'
- };
-
- return vendors[match[0]];
- },
- getVendorStyle: function(style, value) {
- var styles = {};
- styles[style] = value;
-
- styles['Webkit' + this.caplitalizeString(style)] = value;
- styles['ms' + this.caplitalizeString(this.getMsEquivalent(style, 'property'))] = this.getMsEquivalent(value, 'value');
- return styles;
- },
- //container
- alignItems: function(value) {
- return this.getVendorStyle('alignItems', value);
- },
- alignContent: function(value) {
- return this.getVendorStyle('alignContent', value);
- },
- justifyContent: function(value) {
- return this.getVendorStyle('justifyContent', value);
- },
- flexDirection: function(value) {
- return this.getVendorStyle('flexDirection', value);
- },
- flexflow: function(value) {
- return this.getVendorStyle('flexFlow', value);
- },
-
- //item
- alignSelf: function(value) {
- return this.getVendorStyle('alignSelf', value);
- },
- flex: function(value) {
- return this.getVendorStyle('flex', value);
- },
- flexShrink: function(value) {
- return this.getVendorStyle('flexShrink', value);
- },
- flexGrow: function(value) {
- return this.getVendorStyle('flexGrow', value);
- },
- flexBasis: function(value) {
- return this.getVendorStyle('flexBasis', value);
- },
- order: function(value) {
- return this.getVendorStyle('order', value);
- },
- wrap: function(value) {
- return this.getVendorStyle('flexWrap', value);
- }
-};
-
-module.exports = FlexLayout;
diff --git a/src/obscene-layout.js b/src/obscene-layout.js
new file mode 100644
index 0000000..2152be9
--- /dev/null
+++ b/src/obscene-layout.js
@@ -0,0 +1,13 @@
+var Box = require('./component/Box.react');
+var Item = require('./component/Item.react');
+var Fit = require('./component/Fit.react');
+var Page = require('./component/Page.react');
+var Layout = require('./core/layout.js')
+
+module.exports = {
+ Box: Box,
+ Item: Item,
+ Page: Page,
+ Fit: Fit,
+ Layout: Layout
+};
diff --git a/test/LayoutTest.react.js b/test/LayoutTest.react.js
index 01c00bb..994fffc 100644
--- a/test/LayoutTest.react.js
+++ b/test/LayoutTest.react.js
@@ -1,12 +1,13 @@
var React = require('react');
-var Layout = require('../src/components.js');
-var Box = Layout.Box;
-var Page = Layout.Page;
-var Item = Layout.Item;
-var Bla = Layout.Bla;
+var ObsceneLayout = require('../src/obscene-layout.js');
+var Layout = ObsceneLayout.Layout;
+var Box = ObsceneLayout.Box;
+var Page = ObsceneLayout.Page;
+var Item = ObsceneLayout.Item;
+
var LayoutTest = React.createClass({
render: function () {
- var styles = {
+ var styles = Layout.createStylesheet({
box: {
backgroundColor: "blue",
padding: 20,
@@ -20,15 +21,16 @@ var LayoutTest = React.createClass({
borderStyle: "solid",
backgroundColor: "green",
padding: 30,
- "color": "white"
+ color: "white",
+ borderRadius : 10
},
page: {
backgroundColor: "blue"
}
- };
+ });
return (
-
+
- ASD
- AS
- SAD