d2-ui
Version:
59 lines (34 loc) • 18.4 kB
JavaScript
webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\nvar Home, React;\n\nReact = __webpack_require__(1);\n\n__webpack_require__(152);\n\nHome = __webpack_require__(396);\n\nReact.render(React.createElement(Home), document.getElementById('root'));\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/index.coffee\n ** module id = 0\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/index.coffee?");
/***/ },
/***/ 396:
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\nvar Home, HomeBody, HomeFeature, React, Shell,\n extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },\n hasProp = {}.hasOwnProperty;\n\nReact = __webpack_require__(1);\n\nShell = __webpack_require__(157).Shell;\n\nHomeBody = __webpack_require__(397);\n\nHomeFeature = __webpack_require__(400);\n\nmodule.exports = Home = (function(superClass) {\n extend(Home, superClass);\n\n function Home() {\n return Home.__super__.constructor.apply(this, arguments);\n }\n\n Home.prototype.render = function() {\n return React.createElement(Shell, {\n \"feature\": HomeFeature,\n \"body\": HomeBody,\n \"nav\": \"about\"\n });\n };\n\n return Home;\n\n})(React.Component);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/components/home/Home.cjsx\n ** module id = 396\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/components/home/Home.cjsx?");
/***/ },
/***/ 397:
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\nvar Animate, Container, Grid, HomeBody, Markdown, React, ReactCSS, afterCode, beforeCode, ref, ref1,\n extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },\n hasProp = {}.hasOwnProperty;\n\nReact = __webpack_require__(1);\n\nReactCSS = __webpack_require__(159);\n\nref = __webpack_require__(157), Container = ref.Container, Grid = ref.Grid;\n\nref1 = __webpack_require__(371), Markdown = ref1.Markdown, Animate = ref1.Animate;\n\nbeforeCode = __webpack_require__(398);\n\nafterCode = __webpack_require__(399);\n\nmodule.exports = HomeBody = (function(superClass) {\n extend(HomeBody, superClass);\n\n function HomeBody() {\n return HomeBody.__super__.constructor.apply(this, arguments);\n }\n\n HomeBody.contextTypes = {\n mobile: React.PropTypes.bool\n };\n\n HomeBody.prototype.classes = function() {\n return {\n 'default': {\n sideBySide: {\n marginTop: '-48px'\n },\n callouts: {\n padding: '40px 0 20px'\n },\n star: {\n position: 'absolute',\n right: '-23px',\n zIndex: '2',\n top: '9px'\n },\n code: {\n position: 'relative',\n paddingBottom: '20px'\n },\n block: {\n paddingBottom: '40px'\n },\n headline: {\n fontSize: '22px',\n color: 'rgba(0, 0, 0, .47)'\n },\n copy: {\n marginTop: '20px',\n fontSize: '16px',\n lineHeight: '24px',\n color: 'rgba(0, 0, 0, .37)'\n }\n }\n };\n };\n\n HomeBody.prototype.render = function() {\n return React.createElement(\"div\", {\n \"style\": (this.styles().homeBody)\n }, React.createElement(Container, null, React.createElement(\"div\", {\n \"style\": (this.styles().sideBySide)\n }, (this.context.mobile ? React.createElement(Animate, {\n \"inStartTransform\": \"translateY(20px)\",\n \"inEndTransform\": \"translateY(0)\",\n \"inDelay\": 400.\n }, React.createElement(\"div\", {\n \"style\": (this.styles().star)\n }, React.createElement(\"iframe\", {\n \"style\": {\n paddingTop: '5px'\n },\n \"src\": \"https://ghbtns.com/github-btn.html?user=casesandberg&repo=reactcss&type=star&count=true&size=small\",\n \"scrolling\": \"0\",\n \"width\": \"120px\",\n \"height\": \"30px\",\n \"frameBorder\": \"0\"\n })), React.createElement(Markdown, {\n \"condensed\": true\n }, afterCode + beforeCode)) : React.createElement(Grid, null, React.createElement(Animate, {\n \"inStartTransform\": \"translateY(20px)\",\n \"inEndTransform\": \"translateY(0)\",\n \"inDelay\": 400.\n }, React.createElement(\"div\", {\n \"style\": (this.styles().code)\n }, React.createElement(Markdown, {\n \"condensed\": true\n }, beforeCode))), React.createElement(Animate, {\n \"inStartTransform\": \"translateY(20px)\",\n \"inEndTransform\": \"translateY(0)\",\n \"inDelay\": 400.\n }, React.createElement(\"div\", {\n \"style\": (this.styles().code)\n }, React.createElement(\"div\", {\n \"style\": (this.styles().star)\n }, React.createElement(\"iframe\", {\n \"src\": \"https://ghbtns.com/github-btn.html?user=casesandberg&repo=reactcss&type=star&count=true&size=large\",\n \"scrolling\": \"0\",\n \"width\": \"160px\",\n \"height\": \"30px\",\n \"frameBorder\": \"0\"\n })), React.createElement(Markdown, {\n \"condensed\": true\n }, afterCode)))))), React.createElement(\"div\", {\n \"style\": (this.styles().callouts)\n }, React.createElement(Grid, null, React.createElement(\"div\", {\n \"style\": (this.styles().block)\n }, React.createElement(\"div\", {\n \"style\": (this.styles().headline)\n }, \"Class-based Data\"), React.createElement(\"div\", {\n \"style\": (this.styles().copy)\n }, \"Use a class-based data structure, similar to traditional modifier css, that can be applied conditionally.\")), React.createElement(\"div\", {\n \"style\": (this.styles().block)\n }, React.createElement(\"div\", {\n \"style\": (this.styles().headline)\n }, \"Styles In One Place\"), React.createElement(\"div\", {\n \"style\": (this.styles().copy)\n }, \"Keep html and components styles together. Separate the style logic from the display and business logic.\")), React.createElement(\"div\", {\n \"style\": (this.styles().block)\n }, React.createElement(\"div\", {\n \"style\": (this.styles().headline)\n }, \"Easy to Attach\"), React.createElement(\"div\", {\n \"style\": (this.styles().copy)\n }, \"Use the \\\"is\\\" syntax to effortlessly attach inline styles to html elements and spreads to custom components.\"))))));\n };\n\n return HomeBody;\n\n})(ReactCSS.Component);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/components/home/HomeBody.cjsx\n ** module id = 397\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/components/home/HomeBody.cjsx?");
/***/ },
/***/ 398:
/***/ function(module, exports) {
eval("module.exports = \"```javascript\\n---\\nfileName: Before.jsx\\n---\\nvar React = require('react');\\nvar merge = require('merge');\\n\\nclass Button extends React.Component {\\n\\n render() {\\n var style = {\\n button: {\\n background: '#4A90E2'\\n },\\n Icon: {\\n fill: '#fff'\\n },\\n disButton: {\\n background: '#bbb'\\n },\\n disSpan: {\\n color: '#999'\\n },\\n disIcon: {\\n fill: '#999'\\n }\\n }\\n var iconProps = style.Icon;\\n if (this.props.disabled) {\\n iconProps = merge( style.Icon,\\n style.disIcon )\\n }\\n\\n return (\\n <div style={ merge( style.button,\\n this.props.disabled && style.disButton)}>\\n <Icon {...iconProps }\\n name={ this.props.icon } />\\n <span style={ this.props.disabled &&\\n style.disSpan }>\\n { this.props.label }\\n </span>\\n </div>\\n )\\n }\\n}\\n```\\n\";\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/docs/00-home-before.md\n ** module id = 398\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/docs/00-home-before.md?");
/***/ },
/***/ 399:
/***/ function(module, exports) {
eval("module.exports = \"```javascript\\n---\\nfileName: After.jsx\\n---\\nvar React = require('react');\\nvar ReactCSS = require('reactcss');\\n\\nclass Button extends ReactCSS.Component {\\n\\n classes() {\\n return {\\n 'default': {\\n button: {\\n background: '#4A90E2'\\n },\\n Icon: {\\n fill: '#fff',\\n name: this.props.icon\\n }\\n },\\n 'disabled-true': {\\n button: {\\n background: '#bbb'\\n },\\n span: {\\n color: '#999'\\n },\\n Icon: {\\n fill: '#999'\\n }\\n }\\n }\\n }\\n\\n render() {\\n return (\\n <div is=\\\"button\\\">\\n <Icon is=\\\"Icon\\\" />\\n <span is=\\\"span\\\">\\n { this.props.label }\\n </span>\\n </div>\\n )\\n }\\n}\\n```\\n\";\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/docs/00-home-after.md\n ** module id = 399\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/docs/00-home-after.md?");
/***/ },
/***/ 400:
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\nvar Animate, Container, HomeFeature, Particles, React, ReactCSS,\n extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },\n hasProp = {}.hasOwnProperty;\n\nReact = __webpack_require__(1);\n\nReactCSS = __webpack_require__(159);\n\nContainer = __webpack_require__(157).Container;\n\nAnimate = __webpack_require__(371).Animate;\n\nParticles = __webpack_require__(401);\n\nmodule.exports = HomeFeature = (function(superClass) {\n extend(HomeFeature, superClass);\n\n function HomeFeature() {\n return HomeFeature.__super__.constructor.apply(this, arguments);\n }\n\n HomeFeature.contextTypes = {\n mobile: React.PropTypes.bool\n };\n\n HomeFeature.prototype.classes = function() {\n return {\n 'default': {\n homeFeature: {\n background: '#4A90E2',\n height: '100%'\n },\n inside: {\n textAlign: 'center',\n zIndex: '2',\n position: 'relative'\n },\n headline: {\n paddingLeft: '10px',\n paddingRight: '10px',\n paddingTop: '130px',\n fontSize: '34px',\n color: 'rgba(255, 255, 255, .87)',\n WebkitFontSmoothing: 'antialiased'\n },\n install: {\n marginTop: '70px',\n display: 'inline-block',\n padding: '0 18px',\n height: '54px',\n lineHeight: '54px',\n boxShadow: 'inset 0 0 0 2px rgba(255, 255, 255, .87)',\n borderRadius: '4px',\n fontSize: '20px',\n color: 'rgba(255, 255, 255, .87)',\n fontWeight: '200',\n background: '#4A90E2',\n zIndex: '2'\n },\n dollar: {\n paddingRight: '10px',\n color: 'rgba(255, 255, 255, .27)',\n userSelect: 'none'\n },\n particles: {\n Absolute: 'auto 0 0 0',\n height: '130px'\n }\n },\n 'mobile': {\n install: {\n marginTop: '50px'\n }\n }\n };\n };\n\n HomeFeature.prototype.styles = function() {\n return this.css({\n 'mobile': this.context.mobile\n });\n };\n\n HomeFeature.prototype.render = function() {\n return React.createElement(\"div\", {\n \"style\": (this.styles().homeFeature)\n }, React.createElement(Container, null, React.createElement(\"div\", {\n \"style\": (this.styles().inside)\n }, React.createElement(Animate, null, React.createElement(\"div\", {\n \"style\": (this.styles().headline)\n }, \"Bringing Classes to Inline Styles\")), React.createElement(Animate, {\n \"inStartTransform\": \"translateY(70px)\",\n \"inEndTransform\": \"translateY(0)\",\n \"inDelay\": 400.\n }, React.createElement(\"div\", {\n \"style\": (this.styles().install)\n }, React.createElement(\"span\", {\n \"style\": (this.styles().dollar)\n }, \"$\"), \"npm install reactcss\")))), React.createElement(\"div\", {\n \"style\": (this.styles().particles)\n }, React.createElement(Particles, null)));\n };\n\n return HomeFeature;\n\n})(ReactCSS.Component);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/components/home/HomeFeature.cjsx\n ** module id = 400\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/components/home/HomeFeature.cjsx?");
/***/ },
/***/ 401:
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\nvar Node, Particles, React, ReactCSS,\n extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },\n hasProp = {}.hasOwnProperty;\n\nReact = __webpack_require__(1);\n\nReactCSS = __webpack_require__(159);\n\nNode = __webpack_require__(402);\n\nmodule.exports = Particles = (function(superClass) {\n extend(Particles, superClass);\n\n function Particles() {\n return Particles.__super__.constructor.apply(this, arguments);\n }\n\n Particles.prototype.classes = function() {\n return {\n 'default': {\n particles: {\n Absolute: '0 0 0 0'\n }\n }\n };\n };\n\n Particles.prototype.componentDidMount = function() {\n return this.paint();\n };\n\n Particles.prototype.paint = function() {\n var canvasContext, canvasNode, column, i, j, k, l, len, len1, len2, m, node, nodes, otherNode, randomBetween, ref, ref1, results, row, tileSize, tilesTall, tilesWide, wrapHeight, wrapNode, wrapWidth;\n canvasNode = React.findDOMNode(this.refs.canvas);\n canvasContext = canvasNode.getContext('2d');\n wrapNode = React.findDOMNode(this.refs.wrap);\n wrapWidth = wrapNode.clientWidth;\n wrapHeight = wrapNode.clientHeight;\n canvasNode.width = wrapWidth * 2;\n canvasNode.height = wrapHeight * 2;\n canvasNode.style.width = wrapWidth + 'px';\n canvasNode.style.height = wrapHeight + 'px';\n canvasContext.scale(2, 2);\n canvasContext.clearRect(0, 0, wrapWidth, wrapHeight);\n randomBetween = function(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n };\n nodes = [];\n tileSize = 75;\n tilesWide = Math.ceil(wrapWidth / tileSize);\n tilesTall = Math.ceil(wrapHeight / tileSize);\n for (column = i = -1, ref = tilesWide + 2; -1 <= ref ? i <= ref : i >= ref; column = -1 <= ref ? ++i : --i) {\n for (row = j = 0, ref1 = tilesTall + 1; 0 <= ref1 ? j <= ref1 : j >= ref1; row = 0 <= ref1 ? ++j : --j) {\n nodes.push(new Node(randomBetween(0, tileSize) + (tileSize * column), randomBetween(0, tileSize) + (tileSize * row) + 10, randomBetween(2 + row, 4 + row), column + \"-\" + row, '#427CC0', '#4A90E2'));\n }\n }\n for (k = 0, len = nodes.length; k < len; k++) {\n node = nodes[k];\n for (l = 0, len1 = nodes.length; l < len1; l++) {\n otherNode = nodes[l];\n if (node.distanceTo(otherNode) < 110 && !node.isConnectedTo(otherNode)) {\n node.connectTo(otherNode, canvasContext);\n }\n }\n }\n results = [];\n for (m = 0, len2 = nodes.length; m < len2; m++) {\n node = nodes[m];\n results.push(node.draw(canvasContext));\n }\n return results;\n };\n\n Particles.prototype.render = function() {\n return React.createElement(\"div\", {\n \"style\": (this.styles().particles),\n \"ref\": \"wrap\"\n }, React.createElement(\"canvas\", {\n \"ref\": \"canvas\"\n }));\n };\n\n return Particles;\n\n})(ReactCSS.Component);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/components/home/Particles.cjsx\n ** module id = 401\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/components/home/Particles.cjsx?");
/***/ },
/***/ 402:
/***/ function(module, exports) {
eval("var Node;\n\nNode = function(x, y, size, id, color, background) {\n this.id = id;\n this.position = [x, y];\n this.size = size;\n this.color = color;\n return this.background = background;\n};\n\nNode.prototype = {\n distanceTo: function(otherNode) {\n var diff;\n diff = [this.position[0] - otherNode.position[0], this.position[1] - otherNode.position[1]];\n return Math.abs(Math.sqrt((diff[0] * diff[0]) + (diff[1] * diff[1])));\n },\n isConnectedTo: function(otherNode) {\n var ref, ref1;\n return ((ref = this.connected) != null ? ref[otherNode.id] : void 0) === true || ((ref1 = otherNode.connected) != null ? ref1[this.id] : void 0) === true;\n },\n connectTo: function(otherNode, context) {\n if (!this.connected) {\n this.connected = {};\n }\n if (!otherNode.connected) {\n otherNode.connected = {};\n }\n this.connected[otherNode.id] = true;\n otherNode.connected[this.id] = true;\n return this.drawLineTo(otherNode, context);\n },\n drawLineTo: function(otherNode, context) {\n context.beginPath();\n context.moveTo(this.position[0], this.position[1]);\n context.lineTo(otherNode.position[0], otherNode.position[1]);\n context.strokeStyle = this.color;\n return context.stroke();\n },\n draw: function(context) {\n context.beginPath();\n context.arc(this.position[0], this.position[1], this.size, 0, Math.PI * 2);\n context.fillStyle = this.color;\n context.fill();\n context.lineWidth = 2;\n context.strokeStyle = this.background;\n return context.stroke();\n }\n};\n\nmodule.exports = Node;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./docs/helpers/Node.coffee\n ** module id = 402\n ** module chunks = 1\n **/\n//# sourceURL=webpack:///./docs/helpers/Node.coffee?");
/***/ }
});