diff --git a/.gitignore b/.gitignore index 0382c0e..56fd008 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,11 @@ -/dist/ -/node_modules/ -/npm-debug.log +node_modules +npm-debug.log + +docs + +/*.js +/*.js.map +/components +/dom-renderables +/lib +/webgl-renderables diff --git a/tools/publish/amd/README.md b/.npmignore similarity index 100% rename from tools/publish/amd/README.md rename to .npmignore diff --git a/examples/README.md b/examples/README.md deleted file mode 100644 index 03c5a42..0000000 --- a/examples/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Examples - - gulp examples --port 8080 - -* [http://localhost:8080](http://localhost:8080) diff --git a/examples/components/App.jsx b/examples/components/App.jsx deleted file mode 100644 index 0281583..0000000 --- a/examples/components/App.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { RouteHandler } from 'react-router'; - -import Menu from './Menu'; - -const EXAMPLES = { - modifiers: [ - 'Draggable' - ], - surfaces: [ - 'CanvasSurface', - 'ContainerSurface', - 'ImageSurface', - 'VideoSurface' - ], - views: [ - 'Deck', - 'EdgeSwapper', - 'FlexibleLayout', - 'Flipper', - 'GridLayout', - 'HeaderFooterLayout', - 'Lightbox', - 'RenderController', - 'ScrollContainer', - 'Scrollview', - 'SequentialLayout', - 'SizeAwareView' - ], - test: [ - 'Animations', - 'CommentBox', - 'HelloWorld', - 'HelloWorldDynamic', - 'Layout', - 'ReactNode', - 'Seed' - ] -}; - -export default class extends React.Component { - render() { - return ( -
- -
- -
-
- ); - } -}; diff --git a/examples/components/Home.jsx b/examples/components/Home.jsx deleted file mode 100644 index c66b212..0000000 --- a/examples/components/Home.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import Transform from 'famous/core/Transform'; -import Easing from 'famous/transitions/Easing'; -import Timer from 'famous/utilities/Timer'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import StateModifier from 'react-famous/modifiers/StateModifier'; - -class Home extends React.Component { - componentDidMount() { - let stateModifier = this.refs.stateModifier.getFamous(); - - FamousScheduler.schedule(() => { - function animate() { - stateModifier.halt(); - stateModifier.setTransform(Transform.translate(-50, 0), { - duration: 250 - }, () => { - stateModifier.setTransform(Transform.translate(0, 0), { - duration: 500 - }, () => { - Timer.setTimeout(animate, 1250); - }); - }); - } - - animate(); - }); - } - - render() { - return ( -
- - - - react-famous - examples - - - - - ←   Please select an example. - - - -
- ); - } -} - -export default Home; diff --git a/examples/components/Menu.jsx b/examples/components/Menu.jsx deleted file mode 100644 index 4ece001..0000000 --- a/examples/components/Menu.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import isEqual from 'lodash/lang/isEqual'; -import React from 'react'; -import { Link } from 'react-router'; - -class Menu extends React.Component { - shouldComponentUpdate(nextProps, nextState) { - return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); - } - - render() { - let examples = Object.keys(this.props.examples).reduce((result, group, idx) => { - let listItems = this.props.examples[group].map((member, idx) => { - return ( -
  • - {member} -
    • - ); - }); - result.push( -
    -
    {group}
    - -
    - ); - return result; - }, []); - - return ( -
    - - {examples} -
    - ); - } -} - -Menu.propTypes = { - examples: React.PropTypes.object.isRequired -}; - -export default Menu; diff --git a/examples/components/modifiers/Draggable/App.jsx b/examples/components/modifiers/Draggable/App.jsx deleted file mode 100644 index c0d41f2..0000000 --- a/examples/components/modifiers/Draggable/App.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import Draggable from 'react-famous/modifiers/Draggable'; - -export default class extends React.Component { - componentDidMount() { - let draggable = this.refs.draggable.getFamous(); - let surface = this.refs.surface.getFamous(); - - draggable.subscribe(surface); - } - - render() { - let draggableOptions = { - snapX: 40, - snapY: 40, - xRange: [-220, 220], - yRange: [-220, 220] - }; - - let gridOptions = { - size: [481, 481], - properties: { - backgroundColor: 'black', - backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px), linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px), linear-gradient(transparent 3px, black 3px, black 238px, transparent 238px), linear-gradient(90deg, white 3px, transparent 3px, transparent 238px, white 238px)', - backgroundSize: '40px 40px, 240px 240px, 40px 40px, 240px 240px, 240px 240px, 240px 240px' - } - }; - - let surfaceOptions = { - size: [40, 40], - content: 'drag', - properties: { - backgroundColor: 'red', - color: 'white', - cursor: 'pointer', - lineHeight: '40px', - textAlign: 'center' - } - }; - - return ( - - - - - - - - - ); - } -}; diff --git a/examples/components/surfaces/CanvasSurface/App.jsx b/examples/components/surfaces/CanvasSurface/App.jsx deleted file mode 100644 index 26ba74c..0000000 --- a/examples/components/surfaces/CanvasSurface/App.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import CanvasSurface from 'react-famous/surfaces/CanvasSurface'; - -let CANVAS_SIZE = [400, 400]; - -export default class extends React.Component { - componentDidMount() { - let canvas = this.refs.canvas.getFamous(); - let ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgb(200, 0, 0)'; - ctx.fillRect(50, 50, 200, 200); - - ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; - ctx.fillRect(150, 150, 200, 200); - } - - render() { - return ( - - - Shapes are drawn on a canvas surface. - - - - - - ); - } -}; diff --git a/examples/components/surfaces/ContainerSurface/App.jsx b/examples/components/surfaces/ContainerSurface/App.jsx deleted file mode 100644 index d5e35b6..0000000 --- a/examples/components/surfaces/ContainerSurface/App.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import startsWith from 'lodash/string/startsWith'; -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import ContainerSurface from 'react-famous/surfaces/ContainerSurface'; -import Scrollview from 'react-famous/views/Scrollview'; - -const NUM_SURFACES = 100; -const SURFACE_REF_PREFIX = 'surface_'; - -export default class extends React.Component { - componentDidMount() { - let scrollview = this.refs.scrollview.getFamous(); - - Object.keys(this.refs) - .filter((key) => startsWith(key, SURFACE_REF_PREFIX)) - .map((key) => this.refs[key].getFamous()) - .forEach((surface) => surface.pipe(scrollview)); - } - - render() { - let surfaces = range(NUM_SURFACES).map((idx) => { - let options = { - properties: { - backgroundColor: 'rgba(255, 0, 0, 0.5)', - color: 'white', - lineHeight: '50px', - textAlign: 'center' - }, - size: [undefined, 50] - }; - return ( - - I am surface: {idx + 1} - - ); - }); - - return ( - - - Scrollview is created inside a container surface. - - - - - {surfaces} - - - - - ); - } -}; diff --git a/examples/components/surfaces/ImageSurface/App.jsx b/examples/components/surfaces/ImageSurface/App.jsx deleted file mode 100644 index f66ed78..0000000 --- a/examples/components/surfaces/ImageSurface/App.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import ImageSurface from 'react-famous/surfaces/ImageSurface'; - -const IMAGE_URL = 'http://code.famo.us/assets/famous.jpg'; - -export default class extends React.Component { - render() { - return ( - - - The image is created with ImageSurface. - - - - - - ); - } -}; diff --git a/examples/components/surfaces/VideoSurface/App.jsx b/examples/components/surfaces/VideoSurface/App.jsx deleted file mode 100644 index 22414d5..0000000 --- a/examples/components/surfaces/VideoSurface/App.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import VideoSurface from 'react-famous/surfaces/VideoSurface'; - -const VIDEO_URL = 'http://video.webmfiles.org/big-buck-bunny_trailer.webm'; - -export default class extends React.Component { - render() { - return ( - - - The video is created with VideoSurface. - - - - - - ); - } -}; diff --git a/examples/components/test/Animations/App.jsx b/examples/components/test/Animations/App.jsx deleted file mode 100644 index 7099441..0000000 --- a/examples/components/test/Animations/App.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; - -import BouncyBox from './BouncyBox'; -import CrazyBox from './CrazyBox'; -import DraggableBox from './DraggableBox'; -import DroppingBox from './DroppingBox'; -import RotatingBox from './RotatingBox'; - -export default class extends React.Component { - render() { - return ( - - - - - - - - - - - - - - - - ); - } -}; diff --git a/examples/components/test/Animations/BouncyBox.jsx b/examples/components/test/Animations/BouncyBox.jsx deleted file mode 100644 index 0b22a31..0000000 --- a/examples/components/test/Animations/BouncyBox.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import SnapTransition from 'famous/transitions/SnapTransition'; -import Transitionable from 'famous/transitions/Transitionable'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -Transitionable.registerMethod('spring', SnapTransition); - -export default class extends React.Component { - componentWillMount() { - this._position = new Transitionable([0, 0]); - } - - componentDidMount() { - let position = this._position; - let clickSurface = this.refs.clickSurface.getFamous(); - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - - sync.on('update', (data) => { - let currentPosition = position.get(); - position.set([ - currentPosition[0] + data.delta[0], - currentPosition[1] + data.delta[1] - ]); - }); - - sync.on('end', (data) => { - let velocity = data.velocity; - position.set([0, 0], { - method: 'spring', - period: 150, - velocity: data.velocity - }); - }); - - clickSurface.pipe(sync); - } - - render() { - let position = this._position; - - let modifierOptions = { - proportions: [0.2, 0.2], - transform: () => { - let currentPosition = position.get(); - return Transform.translate(currentPosition[0], currentPosition[1]); - } - }; - - return ( - - - - - Bouncy - - - - - - - ); - } -}; diff --git a/examples/components/test/Animations/CrazyBox.jsx b/examples/components/test/Animations/CrazyBox.jsx deleted file mode 100644 index 0c0047a..0000000 --- a/examples/components/test/Animations/CrazyBox.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import random from 'lodash/number/random'; -import Transform from 'famous/core/Transform'; -import Easing from 'famous/transitions/Easing'; -import TweenTransition from 'famous/transitions/TweenTransition'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import StateModifier from 'react-famous/modifiers/StateModifier'; - -const EASING_NAMES = Object.keys(Easing); - -EASING_NAMES.forEach((name) => TweenTransition.registerCurve(name, Easing[name])); - -export default class extends React.Component { - componentDidMount() { - let stateModifier = this.refs.stateModifier.getFamous(); - - function rotate() { - stateModifier.setTransform(Transform.rotate(Math.random(), Math.random(), Math.random()), { - curve: EASING_NAMES[random(EASING_NAMES.length)], - duration: 300 - }, () => { - stateModifier.setTransform(Transform.rotate(0, 0, 0), { - duration: 50 - }, rotate); - }); - } - - FamousScheduler.schedule(rotate); - } - - render() { - return ( - - - - - Crazy - - - - ); - } -}; diff --git a/examples/components/test/Animations/DraggableBox.jsx b/examples/components/test/Animations/DraggableBox.jsx deleted file mode 100644 index b00f884..0000000 --- a/examples/components/test/Animations/DraggableBox.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -export default class extends React.Component { - componentWillMount() { - this._position = [0, 0]; - } - - componentDidMount() { - let position = this._position; - let clickSurface = this.refs.clickSurface.getFamous(); - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - - sync.on('update', (data) => { - position[0] += data.delta[0]; - position[1] += data.delta[1]; - }); - - clickSurface.pipe(sync); - } - - render() { - let position = this._position; - - let modifierOptions = { - proportions: [0.2, 0.2], - transform: () => { - return Transform.translate(position[0], position[1]); - } - }; - - return ( - - - - - Draggable - - - - - - - ); - } -}; diff --git a/examples/components/test/Animations/DroppingBox.jsx b/examples/components/test/Animations/DroppingBox.jsx deleted file mode 100644 index 40a90e2..0000000 --- a/examples/components/test/Animations/DroppingBox.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import Transitionable from 'famous/transitions/Transitionable'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; - -export default class extends React.Component { - componentWillMount() { - this._transitionable = new Transitionable([0, 0]); - } - - componentDidMount() { - FamousScheduler.schedule(() => { - this._transitionable.set([0, 1], { - duration: 1000, - curve: 'easeInOut' - }); - }); - } - - render() { - let transitionable = this._transitionable; - - let modifierOptions = { - align: () => transitionable.get(), - opacity: 0.7, - origin: () => transitionable.get(), - proportions: [1, 0.1] - }; - - return ( - - - - - Dropping - - - - ); - } -}; diff --git a/examples/components/test/Animations/RotatingBox.jsx b/examples/components/test/Animations/RotatingBox.jsx deleted file mode 100644 index f4e0244..0000000 --- a/examples/components/test/Animations/RotatingBox.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import Transform from 'famous/core/Transform'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; - -export default class extends React.Component { - componentDidMount() { - let modifier = this.refs.modifier.getFamous(); - let angle = 0; - - FamousScheduler.schedule(() => { - modifier.transformFrom(() => { - angle += 0.03; - return Transform.rotateZ(angle); - }); - }); - } - - render() { - return ( - - - - - Rotating - - - - ); - } -}; diff --git a/examples/components/test/Animations/index.js b/examples/components/test/Animations/index.js deleted file mode 100644 index 79342de..0000000 --- a/examples/components/test/Animations/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import 'famous/core/famous.css'; -import React from 'react'; - -import App from './components/App'; - -React.render(React.createElement(App), document.body); diff --git a/examples/components/test/CommentBox/App.jsx b/examples/components/test/CommentBox/App.jsx deleted file mode 100644 index 95a71fb..0000000 --- a/examples/components/test/CommentBox/App.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; - -import CommentBox from './CommentBox'; - -export default class extends React.Component { - render() { - return ( - - - - ); - } -}; diff --git a/examples/components/test/CommentBox/Comment.jsx b/examples/components/test/CommentBox/Comment.jsx deleted file mode 100644 index 891e48a..0000000 --- a/examples/components/test/CommentBox/Comment.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FlexibleLayout from 'react-famous/views/FlexibleLayout'; - -class Component extends React.Component { - render() { - return ( - - - - {this.props.author} - - - - - - {this.props.text} - - - - ); - } -} - -Component.propTypes = { - author: React.PropTypes.string, - text: React.PropTypes.string -}; - -export default Component; diff --git a/examples/components/test/CommentBox/CommentBox.jsx b/examples/components/test/CommentBox/CommentBox.jsx deleted file mode 100644 index e127fa4..0000000 --- a/examples/components/test/CommentBox/CommentBox.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import range from 'lodash/utility/range'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FlexibleLayout from 'react-famous/views/FlexibleLayout'; - -import CommentForm from './CommentForm'; -import CommentList from './CommentList'; - -export default class extends React.Component { - constructor(...args) { - super(...args); - - this.state = { - data: range(5).map(() => { - return { - author: '@pilwon', - text: 'Hello react-famous!' - }; - }) - }; - } - - render() { - return ( - - - - Comments - - - - - - ); - } -}; diff --git a/examples/components/test/CommentBox/CommentForm.jsx b/examples/components/test/CommentBox/CommentForm.jsx deleted file mode 100644 index 089d1e0..0000000 --- a/examples/components/test/CommentBox/CommentForm.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import Utility from 'famous/utilities/Utility'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FormContainerSurface from 'react-famous/surfaces/FormContainerSurface'; -import InputSurface from 'react-famous/surfaces/InputSurface'; -import SubmitInputSurface from 'react-famous/surfaces/SubmitInputSurface'; -import SequentialLayout from 'react-famous/views/SequentialLayout'; - -export default class extends React.Component { - render() { - return ( - - - - - - - - - - - - - - - - ); - } -}; diff --git a/examples/components/test/CommentBox/CommentList.jsx b/examples/components/test/CommentBox/CommentList.jsx deleted file mode 100644 index 7c7cb0c..0000000 --- a/examples/components/test/CommentBox/CommentList.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import Transform from 'famous/core/Transform'; -import Transitionable from 'famous/transitions/Transitionable'; -import React from 'react'; -import Modifier from 'react-famous/core/Modifier'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import Scrollview from 'react-famous/views/Scrollview'; - -import Comment from './Comment'; - -class Component extends React.Component { - componentWillMount() { - this._transitionables = this.props.data.map(() => new Transitionable(0)); - } - - componentDidMount() { - let transitionables = this._transitionables; - - FamousScheduler.schedule(() => { - this.props.data.forEach((comment, idx) => { - let modifier = this.refs[`modifier_${idx}`].getFamous(); - let transitionable = transitionables[idx]; - transitionable.set(1, { - curve: 'easeInOut', - duration: (idx + 1) * (1500 / this.props.data.length) - }); - }); - }); - } - - render() { - let transitionables = this._transitionables; - - let commentNodes = this.props.data.map((comment, idx) => { - let transitionable = transitionables[idx]; - let modifierOptions = { - opacity: () => { - return transitionable.get(); - }, - size: [undefined, 50], - transform: () => { - return Transform.translate(300 * (1 - transitionable.get()), 0); - } - }; - - return ( - - - - ); - }); - - return ( - - - - {commentNodes} - - - - ); - } -} - -Component.propTypes = { - data: React.PropTypes.array -}; - -export default Component; diff --git a/examples/components/test/HelloWorld/App.jsx b/examples/components/test/HelloWorld/App.jsx deleted file mode 100644 index 59d12f7..0000000 --- a/examples/components/test/HelloWorld/App.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; - -export default class extends React.Component { - render() { - let options = { - size: [150, 100], - properties: { - backgroundColor: '#000099', - color: '#fff', - textAlign: 'center', - lineHeight: '100px' - } - }; - - return ( - - - - Hello World - - - - ); - } -}; diff --git a/examples/components/test/HelloWorldDynamic/App.jsx b/examples/components/test/HelloWorldDynamic/App.jsx deleted file mode 100644 index 0a4a22a..0000000 --- a/examples/components/test/HelloWorldDynamic/App.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; - -export default class extends React.Component { - constructor(...args) { - super(...args); - - this.state = { - count: 0 - }; - } - - componentWillUnmount() { - clearInterval(this._intervalId); - } - - componentDidMount() { - FamousScheduler.schedule(() => { - this._intervalId = setInterval(() => { - this.setState((state) => ({ - count: state.count + 1 - })); - }, 100); - }); - } - - _textCharUpper(text, position) { - let str = text.toLowerCase(); - let idx = position % str.length; - return str.substr(0, idx) + str[idx].toUpperCase() + str.substr(idx + 1); - } - - render() { - let properties = { - backgroundColor: this.state.count % 2 ? '#990000' : '#ff0000', - color: '#fff', - textAlign: 'center', - lineHeight: '100px' - }; - let text = this._textCharUpper('Hello World', this.state.count); - - return ( - - - - {text} - - - - ); - } -}; diff --git a/examples/components/test/Layout/App.jsx b/examples/components/test/Layout/App.jsx deleted file mode 100644 index d517203..0000000 --- a/examples/components/test/Layout/App.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import GridLayout from 'react-famous/views/GridLayout'; -import HeaderFooterLayout from 'react-famous/views/HeaderFooterLayout'; - -export default class extends React.Component { - render() { - let views = range(2).map((i) => { - let options = { - size: [100, 100], - properties: { - backgroundColor: '#fa5c4f', - color: 'white', - lineHeight: '100px', - textAlign: 'center' - } - }; - - return ( - - - content {i + 1} - - - ); - }); - - return ( - - - - - Header - - - - - {views} - - - - - Footer - - - - - ); - } -}; diff --git a/examples/components/test/ReactNode/App.jsx b/examples/components/test/ReactNode/App.jsx deleted file mode 100644 index 18c0219..0000000 --- a/examples/components/test/ReactNode/App.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import RenderNode from 'react-famous/core/RenderNode'; -import Surface from 'react-famous/core/Surface'; -import ReactNode from 'react-famous/lib/ReactNode'; -import GridLayout from 'react-famous/views/GridLayout'; - -import EdgeSwapperApp from '../../views/EdgeSwapper/App'; -import FlexibleLayoutApp from '../../views/FlexibleLayout/App'; -import FlipperApp from '../../views/Flipper/App'; -import GridLayoutApp from '../../views/GridLayout/App'; -import HeaderFooterLayoutApp from '../../views/HeaderFooterLayout/App'; -import ScrollviewApp from '../../views/Scrollview/App'; -import AnimationsApp from '../Animations/App'; -import CommentBoxApp from '../CommentBox/App'; -import HelloWorldDynamicApp from '../HelloWorldDynamic/App'; - -export default class extends React.Component { - render() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - } -}; diff --git a/examples/components/test/Seed/App.jsx b/examples/components/test/Seed/App.jsx deleted file mode 100644 index a9372b2..0000000 --- a/examples/components/test/Seed/App.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import Transform from 'famous/core/Transform'; -import Easing from 'famous/transitions/Easing'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import StateModifier from 'react-famous/modifiers/StateModifier'; - -const GROUND_RATIO = 0.35; -const INITIAL_MODIFIER_OPTIONS = {align: [0.5, 0], origin: [0.5, 1]}; -const URL = 'https://github.com/pilwon/react-famous'; - -export default class extends React.Component { - componentDidMount() { - let beanModifier = this.refs.beanModifier.getFamous(); - - function drop() { - return new Promise((resolve) => { - beanModifier.setAlign([0.5, 1 - GROUND_RATIO], { - curve: Easing.outBounce, - duration: 2500 - }, resolve); - }); - } - - function moveLeft() { - return new Promise((resolve) => { - return Promise.all([ - new Promise((resolve) => { - beanModifier.setAlign([0.05, 1 - GROUND_RATIO], { - curve: Easing.outElastic, - duration: 1000 - }, resolve); - }), - new Promise((resolve) => { - beanModifier.setOrigin([0, 1], { - curve: Easing.outElastic, - duration: 1000 - }, resolve); - }) - ]).then(() => setTimeout(resolve, 300)); - }); - } - - function disappear() { - return new Promise((resolve) => { - beanModifier.setAlign([1, 1 - GROUND_RATIO], { - curve: Easing.inExpo, - duration: 500 - }, () => setTimeout(resolve, 1000)); - }); - } - - function reset() { - beanModifier.setAlign(INITIAL_MODIFIER_OPTIONS.align); - beanModifier.setOrigin(INITIAL_MODIFIER_OPTIONS.origin); - return Promise.resolve(); - } - - FamousScheduler.schedule(function loop() { - drop().then(moveLeft).then(disappear).then(reset).then(loop); - }); - } - - render() { - let beanOptions = { - properties: { - backgroundColor: '#F2EEB3', - borderRadius: '50px', - fontSize: '2em', - fontWeight: 'bold', - padding: '30px 50px' - }, - size: [true, true] - }; - - let groundOptions = { - properties: { - backgroundColor: '#8C6954', - borderBottom: '25px solid #260126', - borderRadius: '200px 200px 0 0', - borderTop: '30px solid #59323C' - } - }; - - return ( - - - - Hello react-famous! - - - - - - - ); - } -}; diff --git a/examples/components/views/Deck/App.jsx b/examples/components/views/Deck/App.jsx deleted file mode 100644 index 159c221..0000000 --- a/examples/components/views/Deck/App.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import range from 'lodash/utility/range'; -import SpringTransition from 'famous/transitions/SpringTransition'; -import Transitionable from 'famous/transitions/Transitionable'; -import Timer from 'famous/utilities/Timer'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import Deck from 'react-famous/views/Deck'; - -Transitionable.registerMethod('spring', SpringTransition); - -export default class extends React.Component { - constructor(...args) { - super(...args); - - this._onSurfaceClick = this._onSurfaceClick.bind(this); - } - - _onSurfaceClick(eventKey) { - let deck = this.refs.deck.getFamous(); - - console.log('Clicked surface #' + eventKey); - deck.toggle(); - } - - render() { - let surfaces = range(5).map((i) => { - let options = { - properties: { - backgroundColor: 'hsla(' + ((i * 5 + i) * 15 % 360) + ', 60%, 50%, 0.8)', - color: 'white', - lineHeight: '200px', - textAlign: 'center' - }, - size: [100, 200] - }; - return ( - - {i} - - ); - }); - - let deckOptions = { - itemSpacing: 10, - transition: { - method: 'spring', - period: 300, - dampingRatio: 0.5 - }, - stackRotation: 0.02 - }; - - return ( - - - Open the developer console, then click the deck. - - - - {surfaces} - - - - ); - } -}; diff --git a/examples/components/views/EdgeSwapper/App.jsx b/examples/components/views/EdgeSwapper/App.jsx deleted file mode 100644 index 55e8d04..0000000 --- a/examples/components/views/EdgeSwapper/App.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import RenderNode from 'react-famous/core/RenderNode'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import EdgeSwapper from 'react-famous/views/EdgeSwapper'; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -export default class extends React.Component { - componentDidMount() { - let clickSurface = this.refs.clickSurface.getFamous(); - let edgeSwapper = this.refs.edgeSwapper.getFamous(); - let primary = this.refs.primary.getFamous(); - let secondary = this.refs.secondary.getFamous(); - let showing = true; - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - - sync.on('end', (data) => { - if (showing) { - edgeSwapper.show(secondary); - } else { - edgeSwapper.show(primary); - } - showing = !showing; - }); - - clickSurface.pipe(sync); - - FamousScheduler.schedule(() => { - edgeSwapper.show(primary); - }); - } - - render() { - let surfaceOptions = { - size: [true, true], - properties: { - color: 'white', - fontSize: '2em' - } - }; - - return ( - - - - - - - Primary - - - - - - - - Secondary - - - - - - - - - ); - } -}; diff --git a/examples/components/views/FlexibleLayout/App.jsx b/examples/components/views/FlexibleLayout/App.jsx deleted file mode 100644 index 233ffa8..0000000 --- a/examples/components/views/FlexibleLayout/App.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FlexibleLayout from 'react-famous/views/FlexibleLayout'; - -const COLORS = [ - 'rgba(255, 0, 0, .7)', - 'rgba(0, 255, 0, .7)', - 'rgba(0, 0, 255, .7)', - 'rgba(255, 0, 0, .7)', - 'rgba(0, 255, 0, .7)', - 'rgba(0, 0, 255, .7)', - 'rgba(255, 0, 0, .7)', - 'rgba(0, 255, 0, .7)' -]; -const INITIAL_RATIOS = [1, true, 1, true, 1, true, 1, true]; -const FINAL_RATIOS = [4, true, 1, true, 0, true, 7, true]; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -export default class extends React.Component { - componentDidMount() { - let clickSurface = this.refs.clickSurface.getFamous(); - let flexibleLayout = this.refs.flexibleLayout.getFamous(); - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - let toggle = false; - - sync.on('end', (data) => { - let ratios = toggle ? INITIAL_RATIOS : FINAL_RATIOS; - flexibleLayout.setRatios(ratios, { - curve: 'easeOut', - duration: 500 - }); - toggle = !toggle; - }); - - clickSurface.pipe(sync); - } - - render() { - let surfaces = range(COLORS.length).map((idx) => { - let options = { - properties: { - backgroundColor: COLORS[idx] - }, - size: (idx % 2 === 0) ? [undefined, undefined] : [10, undefined] - }; - return ( - - ); - }); - - return ( - - - - {surfaces} - - - - - - - ); - } -}; diff --git a/examples/components/views/Flipper/App.jsx b/examples/components/views/Flipper/App.jsx deleted file mode 100644 index 48d6a99..0000000 --- a/examples/components/views/Flipper/App.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import Flipper from 'react-famous/views/Flipper'; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -export default class extends React.Component { - componentDidMount() { - let clickSurface = this.refs.clickSurface.getFamous(); - let flipper = this.refs.flipper.getFamous(); - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - let toggle = false; - - sync.on('end', (data) => { - let angle = toggle ? 0 : Math.PI; - flipper.setAngle(angle, { - curve: 'easeOutBounce', - duration: 500 - }); - toggle = !toggle; - }); - - clickSurface.pipe(sync); - } - - render() { - return ( - - - Click anywhere on the screen. - - - - - - - - - Front - - - - - - - - - - Back - - - - - - - - - - - ); - } -}; diff --git a/examples/components/views/GridLayout/App.jsx b/examples/components/views/GridLayout/App.jsx deleted file mode 100644 index a8dbd97..0000000 --- a/examples/components/views/GridLayout/App.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import RenderNode from 'react-famous/core/RenderNode'; -import Surface from 'react-famous/core/Surface'; -import GridLayout from 'react-famous/views/GridLayout'; - -export default class extends React.Component { - render() { - return ( - - - - - - -

    Red

    -     -     -     - - Green - - - Blue - - - Pink - - - Purple - - - - Navy - - - Brown - - - Khaki - - - Maroon - - -     -     - ); - } -}; diff --git a/examples/components/views/HeaderFooterLayout/App.jsx b/examples/components/views/HeaderFooterLayout/App.jsx deleted file mode 100644 index afabf95..0000000 --- a/examples/components/views/HeaderFooterLayout/App.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import Transform from 'famous/core/Transform'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import HeaderFooterLayout from 'react-famous/views/HeaderFooterLayout'; - -export default class extends React.Component { - render() { - let modifierOptions = { - align: [.5, .5], - origin: [.5, .5], - proportions: [0.5, 0.7], - transform: Transform.rotateZ(.2) - }; - - return ( - - - - - - - - Header - - - - - - - - Content - - - - - - - - Footer - - - - - - - ); - } -}; diff --git a/examples/components/views/Lightbox/App.jsx b/examples/components/views/Lightbox/App.jsx deleted file mode 100644 index 2fd653d..0000000 --- a/examples/components/views/Lightbox/App.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import Transform from 'famous/core/Transform'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import Lightbox from 'react-famous/views/Lightbox'; - -export default class extends React.Component { - componentDidMount() { - let lightbox = this.refs.lightbox.getFamous(); - let red = this.refs.red.getFamous(); - let green = this.refs.green.getFamous(); - let blue = this.refs.blue.getFamous(); - - function showRed() { - lightbox.show(red, {duration: 1500}, showGreen); - } - - function showGreen() { - lightbox.show(green, {duration: 1500}, showBlue); - } - - function showBlue() { - lightbox.show(blue, {duration: 1500}, showRed); - } - - FamousScheduler.schedule(showRed); - } - - render() { - let lightboxOptions = { - inAlign: [0, 0.5], - inOpacity: 0.5, - inOrigin: [0, 0.5], - inTransform: Transform.scale(0.5, 0.5, 0.5), - outAlign: [1, 0.5], - outOpacity: 0, - outOrigin: [1, 0.5], - outTransform: Transform.scale(0.001, 0.001, 0.001), - overlap: true - }; - - return ( - - - Lightbox showing and hiding renderables. - - - - - - - - - - ); - } -}; diff --git a/examples/components/views/RenderController/App.jsx b/examples/components/views/RenderController/App.jsx deleted file mode 100644 index 65fdb85..0000000 --- a/examples/components/views/RenderController/App.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import Transform from 'famous/core/Transform'; -import GenericSync from 'famous/inputs/GenericSync'; -import MouseSync from 'famous/inputs/MouseSync'; -import TouchSync from 'famous/inputs/TouchSync'; -import startsWith from 'lodash/string/startsWith'; -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import FamousScheduler from 'react-famous/lib/FamousScheduler'; -import RenderController from 'react-famous/views/RenderController'; - -const NUM_SURFACES = 10; -const SURFACE_REF_PREFIX = 'surface_'; - -GenericSync.register({ - mouse: MouseSync, - touch: TouchSync -}); - -export default class extends React.Component { - componentDidMount() { - let clickSurface = this.refs.clickSurface.getFamous(); - let renderController = this.refs.renderController.getFamous(); - let surfaces = Object.keys(this.refs) - .filter((key) => startsWith(key, SURFACE_REF_PREFIX)) - .map((key) => this.refs[key].getFamous()); - let sync = new GenericSync({ - mouse: {}, - touch: {} - }); - let counter = 0; - - sync.on('end', (data) => { - let next = (counter + 1) % surfaces.length; - renderController.show(surfaces[next]); - counter += 1; - }); - - clickSurface.pipe(sync); - - FamousScheduler.schedule(() => { - if (surfaces[0]) { - renderController.show(surfaces[0]); - } - }); - } - - render() { - let surfaces = range(NUM_SURFACES).map((i) => { - let options = { - size: [200, 200], - properties: { - backgroundColor: 'hsl(' + (i * 360 / NUM_SURFACES) + ', 100%, 50%)', - lineHeight: '200px', - textAlign: 'center' - } - }; - return ( - - Surface: {i + 1} - - ); - }); - - return ( - - - Click anywhere on the screen. - - - - {surfaces} - - - - - - - ); - } -}; diff --git a/examples/components/views/ScrollContainer/App.jsx b/examples/components/views/ScrollContainer/App.jsx deleted file mode 100644 index 33b56da..0000000 --- a/examples/components/views/ScrollContainer/App.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import startsWith from 'lodash/string/startsWith'; -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import ScrollContainer from 'react-famous/views/ScrollContainer'; - -const NUM_SURFACES = 40; -const SURFACE_REF_PREFIX = 'surface_'; - -export default class extends React.Component { - componentDidMount() { - let scrollContainer = this.refs.scrollContainer.getFamous(); - - Object.keys(this.refs) - .filter((key) => startsWith(key, SURFACE_REF_PREFIX)) - .map((key) => this.refs[key].getFamous()) - .forEach((surface) => surface.pipe(scrollContainer.scrollview)); - } - - render() { - let surfaces = range(NUM_SURFACES).map((idx) => { - let surfaceOptions = { - size: [undefined, 50], - properties: { - backgroundColor: 'hsl(' + (idx * 360 / NUM_SURFACES) + ', 100%, 50%)', - lineHeight: '50px', - textAlign: 'center' - } - }; - return ( - - Surface {idx + 1} - - ); - }); - - return ( - - - Surfaces are clipped by ScrollContainer. - - - - {surfaces} - - - - ); - } -}; diff --git a/examples/components/views/Scrollview/App.jsx b/examples/components/views/Scrollview/App.jsx deleted file mode 100644 index 4c2ee71..0000000 --- a/examples/components/views/Scrollview/App.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import startsWith from 'lodash/string/startsWith'; -import range from 'lodash/utility/range'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Surface from 'react-famous/core/Surface'; -import Scrollview from 'react-famous/views/Scrollview'; - -const NUM_SURFACES = 40; -const SURFACE_REF_PREFIX = 'surface_'; - -export default class extends React.Component { - componentDidMount() { - let scrollview = this.refs.scrollview.getFamous(); - - Object.keys(this.refs) - .filter((key) => startsWith(key, SURFACE_REF_PREFIX)) - .map((key) => this.refs[key].getFamous()) - .forEach((surface) => surface.pipe(scrollview)); - } - - render() { - let surfaces = range(NUM_SURFACES).map((idx) => { - let options = { - properties: { - backgroundColor: 'hsl(' + (idx * 360 / NUM_SURFACES) + ', 100%, 50%)', - lineHeight: '100px', - textAlign: 'center' - }, - size: [undefined, 100] - }; - return ( - - Surface {idx + 1} - - ); - }); - - return ( - - - {surfaces} - - - ); - } -}; diff --git a/examples/components/views/SequentialLayout/App.jsx b/examples/components/views/SequentialLayout/App.jsx deleted file mode 100644 index 2727843..0000000 --- a/examples/components/views/SequentialLayout/App.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import Utility from 'famous/utilities/Utility'; -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import RenderNode from 'react-famous/core/RenderNode'; -import Surface from 'react-famous/core/Surface'; -import SequentialLayout from 'react-famous/views/SequentialLayout'; - -export default class extends React.Component { - render() { - return ( - - - - - - - -

    Red

    -     -     -     -     - - Green - - - - Blue - - - - - - Navy - - - Brown - - - - Khaki - - - - - Maroon - - - - -     -     - ); - } -}; diff --git a/examples/components/views/SizeAwareView/App.jsx b/examples/components/views/SizeAwareView/App.jsx deleted file mode 100644 index b029591..0000000 --- a/examples/components/views/SizeAwareView/App.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import Context from 'react-famous/core/Context'; -import Modifier from 'react-famous/core/Modifier'; -import Surface from 'react-famous/core/Surface'; -import SizeAwareView from 'react-famous/views/SizeAwareView'; - -export default class extends React.Component { - componentDidMount() { - let sizeAwareView = this.refs.sizeAwareView.getFamous(); - let surface = this.refs.surface.getFamous(); - - sizeAwareView._eventInput.on('parentResize', ([width, height]) => { - surface.setContent(`Parent Size: ${width}px x ${height}px`); - }); - } - - render() { - return ( - - - - - - - - ); - } -}; diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index 02c466f..0000000 --- a/examples/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - react-famous: React bridge to Famo.us - - - - - diff --git a/examples/index.js b/examples/index.js deleted file mode 100644 index 7dc2a63..0000000 --- a/examples/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import './styles/index.less'; - -import 'famous/inputs/FastClick'; -import './lib/overscroll'; - -import React from 'react'; -import Router from 'react-router'; - -import routes from './routes'; - -Router.run(routes, function (Handler) { - React.render(React.createElement(Handler), document.body); -}); diff --git a/examples/lib/createContent.jsx b/examples/lib/createContent.jsx deleted file mode 100644 index 7b6947a..0000000 --- a/examples/lib/createContent.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import isEqual from 'lodash/lang/isEqual'; -import React from 'react'; - -export default (group, member) => { - return class extends React.Component { - shouldComponentUpdate(nextProps, nextState) { - return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); - } - - render() { - let Component = require(`react-proxy!../components/${group}/${member}/App`); - - return ( -
    -
    - - Source Code - -
    - -
    - ); - } - } -}; diff --git a/examples/lib/overscroll.js b/examples/lib/overscroll.js deleted file mode 100644 index 5a12c76..0000000 --- a/examples/lib/overscroll.js +++ /dev/null @@ -1,72 +0,0 @@ -// -// A workarround to prevent iOS overscroll but allows overscroll on children elements. -// https://github.com/pinadesign/overscroll -// - -// JavaScript Document -(function(){ - // Declare variables - var touch_x, touch_y, obj_x, obj_y, speed_x=0, speed_y=0, scrollanim; - - document.addEventListener('touchstart', function(e) { - clearInterval(scrollanim); - // Get Touch target - obj_x = e.target - obj_y = e.target - // Get the target parent that is scrollable - while ((window.getComputedStyle(obj_x)['overflow-x'] != "auto" && window.getComputedStyle(obj_x)['overflow-x'] != "scroll") || obj_x.parentNode == null) { - obj_x = obj_x.parentNode - } - while ((window.getComputedStyle(obj_y)['overflow-y'] != "auto" && window.getComputedStyle(obj_y)['overflow-y'] != "auto") || obj_y.parentNode == null) { - obj_y = obj_y.parentNode - } - // Get if no scrollable parents are present set null - if (obj_x.parentNode == null) obj_x = null; - if (obj_y.parentNode == null) obj_y = null; - - // Get the touch starting point - var touch = e.touches[0]; - touch_x = touch.pageX; - touch_y = touch.pageY; - }, false); - - document.addEventListener('touchmove', function(e) { - // Clear animation - clearInterval(scrollanim); - - // Prevent window scrolling - e.preventDefault(); - - // Scroll according to movement - var touch = e.touches[0]; - obj_x.scrollLeft = obj_x.scrollLeft - (touch.pageX - touch_x) - obj_y.scrollTop = obj_y.scrollTop - (touch.pageY - touch_y) - - // Set speed speed - speed_x = (touch.pageX - touch_x) - speed_y = (touch.pageY - touch_y) - - // Set new positon - touch_x = touch.pageX; - touch_y = touch.pageY; - }, false); - - // Add a final animation as in iOS - document.addEventListener('touchend', function(e) { - // Clear previous animations - clearInterval(scrollanim); - - // Animate - scrollanim = setInterval(function() { - obj_x.scrollLeft = obj_x.scrollLeft - speed_x - obj_y.scrollTop = obj_y.scrollTop - speed_y - // Decelerate - speed_x = speed_x * 0.9; - speed_y = speed_y * 0.9; - - // Stop animation at the end - if (speed_x < 1 && speed_x > -1 && speed_y < 1 && speed_y > -1) clearInterval(scrollanim) - },15) - - }, false); -})(); \ No newline at end of file diff --git a/examples/routes.jsx b/examples/routes.jsx deleted file mode 100644 index 23c85a9..0000000 --- a/examples/routes.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Route, DefaultRoute } from 'react-router'; - -import App from './components/App'; -import Home from './components/Home'; -import createContent from './lib/createContent'; -import Pass from './routes/Pass'; - -export default ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/examples/routes/Pass.jsx b/examples/routes/Pass.jsx deleted file mode 100644 index 5baf63a..0000000 --- a/examples/routes/Pass.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { RouteHandler } from 'react-router'; - -export default class extends React.Component { - render() { - return ; - } -}; diff --git a/examples/styles/index.less b/examples/styles/index.less deleted file mode 100644 index 06e4767..0000000 --- a/examples/styles/index.less +++ /dev/null @@ -1,98 +0,0 @@ -@import '~famous/core/famous.css'; - -html, body { - height: 100%; - margin: 0; - padding: 0; - width: 100%; -} - -body { - font-family: Tahoma, Geneva, sans-serif; - font-size: 14px; - overflow: hidden; - opacity: .999999; /* ios8 hotfix */ - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; -} - -a { - color: #111; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.app { - > .menu { - background-color: #eee; - border-right: 1px solid #c8c8c8; - bottom: 0; - height: 100%; - left: 0; - overflow-y: auto; - position: absolute; - top: 0; - width: 170px; - z-index: 1000; - - > nav { - font-size: 1.5em; - font-weight: bold; - padding: 17px 0; - text-align: center; - } - - section.group { - margin-bottom: 10px; - - > header { - background-color: #c8c8c8; - font-size: 1.2em; - text-align: center; - padding: 5px; - } - - > ul { - list-style-type: none; - padding: 0; - - > li { - padding: 3px 15px; - } - } - } - } - - > .content { - height: 100%; - left: 170px; - position: absolute; - right: 0; - - .home { - a { - background-color: #eee; - padding: 7px 15px; - } - } - - .example { - .source-code { - background-color: rgba(0, 0, 0, 0.5); - padding: 10px 15px; - position: absolute; - right: 0; - text-align: center; - top: 0; - z-index: 999; - - a { - color: #eee; - } - } - } - } -} diff --git a/examples/webpack.config.js b/examples/webpack.config.js deleted file mode 100644 index d1e02c8..0000000 --- a/examples/webpack.config.js +++ /dev/null @@ -1,40 +0,0 @@ -var path = require('path'); - -var webpack = require('webpack'); - -module.exports = { - debug: true, - devtool: 'source-map', - entry: { - main: path.join(__dirname, 'index.js') - }, - module: { - loaders: [ - {test: /\.js$/, loader: 'babel?blacklist[]=react', exclude: /node_modules/}, - {test: /\.jsx$/, loaders: ['imports?React=react', 'react-hot', 'babel']}, - {test: /\.css$/, loader: 'style!css'}, - {test: /\.less$/, loader: 'style!css!less'} - ] - }, - output: { - filename: '[name].js', - path: path.join(__dirname, '../dist/examples'), - publicPath: '/_assets/' - }, - plugins: [ - new webpack.DefinePlugin({ - __DEV__: true - }) - ], - resolve: { - alias: { - 'react-famous': path.join(__dirname, '../src') - }, - extensions: [ - '', - '.js', - '.jsx' - ], - root: __dirname - } -}; diff --git a/examples/webpack.config.prod.js b/examples/webpack.config.prod.js deleted file mode 100644 index f4dc168..0000000 --- a/examples/webpack.config.prod.js +++ /dev/null @@ -1,50 +0,0 @@ -var path = require('path'); - -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var webpack = require('webpack'); - -module.exports = { - entry: { - main: path.join(__dirname, 'index.js') - }, - module: { - loaders: [ - {test: /\.js$/, loader: 'babel?blacklist[]=react', exclude: /node_modules/}, - {test: /\.jsx$/, loaders: ['imports?React=react', 'react-hot', 'babel']}, - {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')}, - {test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')} - ] - }, - output: { - chunkFilename: 'js/[name].js?[chunkhash]', - filename: 'js/[name].js?[chunkhash]', - path: path.join(__dirname, '../dist/examples') - }, - plugins: [ - new webpack.DefinePlugin({ - '__DEV__': false, - 'process.env': { - NODE_ENV: JSON.stringify('production') - } - }), - new webpack.optimize.UglifyJsPlugin({ - output: { - comments: false - } - }), - new webpack.optimize.DedupePlugin(), - new webpack.NoErrorsPlugin(), - new ExtractTextPlugin('css/[name].css?[contenthash]') - ], - resolve: { - alias: { - 'react-famous': path.join(__dirname, '../src') - }, - extensions: [ - '', - '.js', - '.jsx' - ], - root: __dirname - } -}; diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 2cf76c6..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,127 +0,0 @@ -var path = require('path'); -var util = require('util'); - -var gulp = require('gulp-help')(require('gulp')); -var gulpBabel = require('gulp-babel'); -var gulpRename = require('gulp-rename'); -var gulpShell = require('gulp-shell'); -var gulpUtil = require('gulp-util'); -var mergeStream = require('merge-stream'); -var merge = require('lodash/object/merge'); -var minimist = require('minimist'); - -gulp.task('clean', 'Clean built files.', function (cb) { - var del = require('del'); - del('dist', cb); -}); - -gulp.task('build', 'Build for all targets.', [ - 'build-amd', - 'build-cjs', - 'build-examples' -]); - -gulp.task('build-amd', 'Build for AMD.', function () { - var gulpWrapAMD = require('gulp-wrap-amd'); - - var copy = gulp - .src('tools/copy/amd/**') - .pipe(gulp.dest('dist/amd')); - - var src = gulp - .src('src/**/*.{js,jsx}') - .pipe(gulpBabel()) - .pipe(gulpWrapAMD()) - .pipe(gulpRename({extname: '.js'})) - .pipe(gulp.dest('dist/amd')); - - return mergeStream(copy, src); -}); - -gulp.task('build-cjs', 'Build for CommonJS.', function () { - var copy = gulp - .src('tools/publish/cjs/**') - .pipe(gulp.dest('dist/cjs')); - - var src = gulp - .src('src/**/*.{js,jsx}') - .pipe(gulpBabel()) - .pipe(gulpRename({extname: '.js'})) - .pipe(gulp.dest('dist/cjs')); - - return mergeStream(copy, src); -}); - -gulp.task('build-examples', 'Build examples.', function () { - var build = gulp.src('') - .pipe(gulpShell([ - 'node_modules/.bin/webpack', - '--colors', - '--config examples/webpack.config.prod.js', - '--profile', - '--progress' - ].join(' '), {cwd: __dirname})); - - var copy = gulp - .src('tools/publish/examples/**') - .pipe(gulp.dest('dist/examples')); - - return mergeStream(build, copy); -}); - -gulp.task('examples', 'Run examples.', function () { - var options = minimist(process.argv.slice(2), { - alias: { - p: 'port' - }, - default: { - port: 8080 - } - }); - - gulpUtil.log('[webpack-dev-server]', util.format('http://localhost:%d/', options.port)); - - return gulp.src('') - .pipe(gulpShell([ - 'node_modules/.bin/webpack-dev-server', - '--colors', - '--config examples/webpack.config.js', - '--content-base examples', - '--hot', - '--inline', - util.format('--port %d', options.port), - '--progress' - ].join(' '), {cwd: __dirname})); -}, { - options: { - 'port ': 'port (default: 8080)' - } -}); - -gulp.task('publish', 'Publish all targets.', [ - 'publish-amd', - 'publish-cjs' -]); - -gulp.task('publish-amd', 'Publish AMD.', function () { -}); - -gulp.task('publish-cjs', 'Publish CommonJS.', function () { - return gulp.src('') - .pipe(gulpShell([ - 'npm publish dist/cjs' - ], {cwd: __dirname})); -}); - -gulp.task('publish-examples', 'Publish Examples.', function () { - return gulp.src('') - .pipe(gulpShell([ - 'git init', - 'git add .', - 'git commit -m Publish', - 'git remote add origin git@github.com:react-famous/react-famous.github.io.git', - 'git push -fu origin master' - ].join('&&'), {cwd: path.join(__dirname, 'dist/examples')})); -}); - -gulp.task('default', false, ['help']); diff --git a/package.json b/package.json index af49cab..af0d239 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,53 @@ { - "private": true, + "name": "reacfamo", + "description": "React bridge to Famo.us", + "version": "0.1.7-1", + "homepage": "https://github.com/pilwon/react-famous", + "author": "Pilwon Huh ", + "license": "MIT", + "main": "index.js", + "repository": { + "type": "git", + "url": "pilwon/react-famous" + }, + "bugs": { + "url": "https://github.com/pilwon/react-famous/issues" + }, + "scripts": { + "test": "echo 'TODO: Test script' && exit 1", + "clean": "mkdir save && mv webpack.config.js save && rm -rf ./*.js ./*.js.map components dom-renderables lib webgl-renderables && mv save/* . && rmdir save", + "prepublish": "npm run build-cjs", + "postpublish": "npm run clean", + "build-umd": "babel src --source-maps --optional runtime --out-dir . --modules umd", + "build-cjs": "babel src --source-maps --optional runtime --out-dir . --modules common", + "build-amd": "babel src --source-maps --optional runtime --out-dir . --modules amd", + "build-global": "webpack --progress --colors --output-library-target umd --output-library reactFamous src/index.js react-famous.js" + }, "dependencies": { - "babel": "^4.7.3", - "babel-core": "^4.7.3", - "babel-loader": "^4.1.0", - "css-loader": "^0.9.1", - "del": "^1.1.1", - "extract-text-webpack-plugin": "^0.3.8", - "famous": "^0.3.5", - "gulp": "^3.8.11", - "gulp-babel": "^4.0.0", - "gulp-help": "^1.3.3", - "gulp-rename": "^1.2.0", - "gulp-shell": "^0.3.0", - "gulp-util": "^3.0.4", - "gulp-wrap-amd": "^0.4.1", - "imports-loader": "^0.6.3", - "less": "^2.4.0", - "less-loader": "^2.1.0", - "lodash": "^3.4.0", - "merge-stream": "^0.1.7", - "minimist": "^1.1.0", - "react": "^0.13.1", - "react-hot-loader": "^1.1.7", - "react-proxy-loader": "^0.3.3", - "react-router": "^0.13.2", - "style-loader": "^0.8.3", - "webpack": "^1.7.2", - "webpack-dev-server": "^1.7.0" - } + "infamous-engine": "^0.7.1-webpack.0", + "react": "^0.13.1" + }, + "devDependencies": { + "babel": "^5.6.6", + "babel-loader": "^5.3.2", + "babel-runtime": "^5.8.24", + "babelify": "^6.3.0", + "browserify": "^11.1.0", + "glslify-loader": "^1.0.2", + "raw-loader": "^0.5.1", + "webpack": "^1.12.1" + }, + "jspm": { + "registry": "jspm", + "directories": { + "lib": "src" + } + }, + "browserify": {}, + "keywords": [ + "react", + "react-component", + "famo.us", + "famous" + ] } diff --git a/src/Node.jsx b/src/Node.jsx index c26d09c..8005c76 100644 --- a/src/Node.jsx +++ b/src/Node.jsx @@ -1,4 +1,5 @@ import isEqual from 'lodash/lang/isEqual'; +import React from 'react'; import FamousUtil from './lib/FamousUtil'; diff --git a/src/Scene.jsx b/src/Scene.jsx index ef0a957..422c266 100644 --- a/src/Scene.jsx +++ b/src/Scene.jsx @@ -2,6 +2,7 @@ import FamousEngine from 'famous/core/FamousEngine'; import isEqual from 'lodash/lang/isEqual'; import merge from 'lodash/object/merge'; import uniqueId from 'lodash/utility/uniqueId'; +import React from 'react'; import FamousUtil from './lib/FamousUtil'; diff --git a/src/components/Align.jsx b/src/components/Align.jsx index 88abe1d..97a523c 100644 --- a/src/components/Align.jsx +++ b/src/components/Align.jsx @@ -1,4 +1,5 @@ import FamousAlign from 'famous/components/Align'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Camera.jsx b/src/components/Camera.jsx index 423fdb1..337bc9c 100644 --- a/src/components/Camera.jsx +++ b/src/components/Camera.jsx @@ -1,4 +1,5 @@ import FamousCamera from 'famous/components/Camera'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/MountPoint.jsx b/src/components/MountPoint.jsx index a0b3c49..fa06450 100644 --- a/src/components/MountPoint.jsx +++ b/src/components/MountPoint.jsx @@ -1,4 +1,5 @@ import FamousMountPoint from 'famous/components/MountPoint'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Opacity.jsx b/src/components/Opacity.jsx index 5e362db..f2af510 100644 --- a/src/components/Opacity.jsx +++ b/src/components/Opacity.jsx @@ -1,4 +1,5 @@ import FamousOpacity from 'famous/components/Opacity'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Origin.jsx b/src/components/Origin.jsx index 353d8df..07b9a42 100644 --- a/src/components/Origin.jsx +++ b/src/components/Origin.jsx @@ -1,4 +1,5 @@ import FamousOrigin from 'famous/components/Origin'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Position.jsx b/src/components/Position.jsx index 5c8a5bf..44e1ecf 100644 --- a/src/components/Position.jsx +++ b/src/components/Position.jsx @@ -1,4 +1,5 @@ import FamousPosition from 'famous/components/Position'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Rotation.jsx b/src/components/Rotation.jsx index d084989..2969fb4 100644 --- a/src/components/Rotation.jsx +++ b/src/components/Rotation.jsx @@ -1,4 +1,5 @@ import FamousRotation from 'famous/components/Rotation'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Scale.jsx b/src/components/Scale.jsx index 7ea1fd2..a711950 100644 --- a/src/components/Scale.jsx +++ b/src/components/Scale.jsx @@ -1,4 +1,5 @@ import FamousScale from 'famous/components/Scale'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Size.jsx b/src/components/Size.jsx index fd8a0aa..60e91da 100644 --- a/src/components/Size.jsx +++ b/src/components/Size.jsx @@ -1,4 +1,5 @@ import FamousSize from 'famous/components/Size'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/components/Transform.jsx b/src/components/Transform.jsx index 7530748..0f1afa8 100644 --- a/src/components/Transform.jsx +++ b/src/components/Transform.jsx @@ -1,4 +1,5 @@ import FamousTransform from 'famous/components/Transform'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/dom-renderables/DOMElement.jsx b/src/dom-renderables/DOMElement.jsx index e6463b0..b2379d9 100644 --- a/src/dom-renderables/DOMElement.jsx +++ b/src/dom-renderables/DOMElement.jsx @@ -2,6 +2,7 @@ import FamousEngine from 'famous/core/FamousEngine'; import FamousDOMElement from 'famous/dom-renderables/DOMElement'; import isEqual from 'lodash/lang/isEqual'; import isUndefined from 'lodash/lang/isUndefined'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; import FamousContextWrapper from '../lib/FamousContextWrapper'; diff --git a/src/index.js b/src/index.js index 406d419..0dff647 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,8 @@ import components from './components'; import domRenderables from './dom-renderables'; import webglRenderables from './webgl-renderables'; +import lib from './lib'; + import Node from './Node'; import Scene from './Scene'; @@ -10,6 +12,8 @@ export default { domRenderables, webglRenderables, + lib, + Node, Scene, }; diff --git a/src/lib/FamousComponent.jsx b/src/lib/FamousComponent.jsx index 56ef6d7..a1fbc83 100644 --- a/src/lib/FamousComponent.jsx +++ b/src/lib/FamousComponent.jsx @@ -1,4 +1,5 @@ import isEqual from 'lodash/lang/isEqual'; +import React from 'react'; import FamousUtil from '../lib/FamousUtil'; import Scene from '../Scene'; diff --git a/src/lib/FamousContextWrapper.jsx b/src/lib/FamousContextWrapper.jsx index 9a9c9c5..7cea786 100644 --- a/src/lib/FamousContextWrapper.jsx +++ b/src/lib/FamousContextWrapper.jsx @@ -1,4 +1,5 @@ import FamousUtil from './FamousUtil'; +import React from 'react'; class FamousContextWrapper extends React.Component { getChildContext() { diff --git a/src/lib/index.js b/src/lib/index.js new file mode 100644 index 0000000..00cdd6f --- /dev/null +++ b/src/lib/index.js @@ -0,0 +1,10 @@ + +import FamousComponent from './FamousComponent' +import FamousContextWrapper from './FamousContextWrapper' +import FamousUtil from './FamousUtil' + +export default { + FamousComponent, + FamousContextWrapper, + FamousUtil, +} diff --git a/src/webgl-renderables/Mesh.jsx b/src/webgl-renderables/Mesh.jsx index 4044b09..0196190 100644 --- a/src/webgl-renderables/Mesh.jsx +++ b/src/webgl-renderables/Mesh.jsx @@ -1,6 +1,7 @@ import FamousColor from 'famous/utilities/Color'; import FamousGeometry from 'famous/webgl-geometries/Geometry'; import FamousMesh from 'famous/webgl-renderables/Mesh'; +import React from 'react'; import FamousComponent from '../lib/FamousComponent'; diff --git a/src/webgl-renderables/lights/AmbientLight.jsx b/src/webgl-renderables/lights/AmbientLight.jsx index a8051ba..e0406b7 100644 --- a/src/webgl-renderables/lights/AmbientLight.jsx +++ b/src/webgl-renderables/lights/AmbientLight.jsx @@ -1,5 +1,6 @@ import FamousColor from 'famous/utilities/Color'; import FamousAmbientLight from 'famous/webgl-renderables/lights/AmbientLight'; +import React from 'react'; import FamousComponent from '../../lib/FamousComponent'; diff --git a/src/webgl-renderables/lights/PointLight.jsx b/src/webgl-renderables/lights/PointLight.jsx index 16e5f22..100bb6d 100644 --- a/src/webgl-renderables/lights/PointLight.jsx +++ b/src/webgl-renderables/lights/PointLight.jsx @@ -1,5 +1,6 @@ import FamousColor from 'famous/utilities/Color'; import FamousPointLight from 'famous/webgl-renderables/lights/PointLight'; +import React from 'react'; import FamousComponent from '../../lib/FamousComponent'; diff --git a/tools/publish/amd/package.json b/tools/publish/amd/package.json deleted file mode 100644 index 2c63c08..0000000 --- a/tools/publish/amd/package.json +++ /dev/null @@ -1,2 +0,0 @@ -{ -} diff --git a/tools/publish/cjs/README.md b/tools/publish/cjs/README.md deleted file mode 100644 index d084067..0000000 --- a/tools/publish/cjs/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# react-famous - -Add [Famo.us](http://famo.us) interactions and animations to any [React](http://facebook.github.io/react/) application and build **Famo.us** applications with **React**. - -Using `react-famous`, you can: - -* Create **Famo.us** apps using familiar **React** component specs and lifecycle. -* Bring rich **Famo.us** animations to new or existing **React** apps. -* Easily integrate **Famo.us** and **React** apps. - -Please visit [the project page](https://github.com/pilwon/react-famous) for more information. diff --git a/tools/publish/cjs/package.json b/tools/publish/cjs/package.json deleted file mode 100644 index 7850910..0000000 --- a/tools/publish/cjs/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "react-famous", - "description": "React bridge to Famo.us", - "version": "0.1.7", - "homepage": "https://github.com/pilwon/react-famous", - "keywords": [ - "react", - "react-component", - "famo.us", - "famous" - ], - "author": "Pilwon Huh ", - "license": "MIT", - "repository": { - "type": "git", - "url": "pilwon/react-famous" - }, - "bugs": { - "url": "https://github.com/pilwon/react-famous/issues" - }, - "peerDependencies": { - "famous": ">=0.3.5", - "react": ">=0.13.1" - } -} diff --git a/tools/publish/examples/index.html b/tools/publish/examples/index.html deleted file mode 100644 index 72a4d13..0000000 --- a/tools/publish/examples/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - react-famous: React bridge to Famo.us - - - - - - -