added options to describe vendor prefixing values/properties and upda…

…ted components

.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
 /test/bundle.js
+npm-debug.log

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

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 `<Box style={styles.box}>Text in Box</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 &hearts; by [@rofrischmann](http://rofrischmann.de) at [Unverschämt](http://unverschaemt.net).

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": {

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 <div {...props} style={styles}>{props.children}</div>;
+    }
+});
+
+module.exports = Box;

src/Fit.react.js → 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 <div {...props} style={styles}>{props.children}</div>;
     }

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 <div {...props} style={styles}>{props.children}</div>;
+    }
+});
+
+module.exports = Item;

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 <div {...props} style={styles}>{props.children}</div>;
+    }
+});
+
+module.exports = Page;

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'
+    }
+}

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;

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: []
+        }
+    }
+}