camel-components
Version:
Camel Components
181 lines (167 loc) • 8.76 kB
JSX
require('./demo-assets/style.less')
require('./demo-assets/codemirror.css')
require('./demo-assets/codemirror-neo.css')
require('./node_modules/codemirror/mode/jsx/jsx');
import ReactDOM from 'react-dom';
import React from 'react';
import Codemirror from 'react-codemirror'
import { FakeTyping } from './camelComponents/fakeTyping.jsx'
import { AnimationWindow } from './camelComponents/animationWindow.jsx'
const options = {
lineNumbers: true,
mode: {
name: 'application/javascript',
json: true
},
readOnly: true,
theme: 'neo'
}
class App extends React.Component {
componentWillMount () {
let page = window.location.hash
if (page === '') {
page = '#component-AnimationWindow'
}
this.setState({
page
})
}
render () {
const {page} = this.state
const content = () => {
switch (page) {
case '#component-FakeTyping':
return (
<div>
<div style={{padding: '50px 40px'}}>
<h2>Component: "Fake Typing"</h2>
<p>Eyecatcher for important stuff, listings.<br />Example:</p>
<FakeTyping
timeAfterCharacter={50}
timeAfterWord={4000}
lines={[
'Lorem Ipsum is simply dummy text..',
'Sed ut perspiciatis unde omnis iste natus.',
'1914 translation by H. Rackham'
]}
/>
</div>
<div className="sectionCode">
<Codemirror className="fakeTypingCode" value={require("raw!./demo-assets/fakeTypingCode.txt")} onChange={() => {}} options={options} style={{height: '350px !important'}} />
</div>
</div>
)
case '#component-AnimationWindow':
return (
<div>
<div style={{padding: '50px 40px'}}>
<h2>Component: "Animation Window"</h2>
<p>CSS3 Transition based animation window. You can create different scenes and animations inside this scenes.<br />Example:</p>
<AnimationWindow
frameSpeed={45} // in ms
frameStart={'toggle bubbles'} // scene name or frame number
animation={true} // false to freeze frame for easy scene creation
transitionSpeed={800} // default transition speed, overwritten by element styles
windowStyles={{position: 'relative', height: 400, width: 400, background: 'rgba(0.0.0.0)'}}
stopOnEnd={false} // optional: false (default) => endless set repetition, true => set will run once
scenes={[
{name: 'social login', frames: 10, elements: {
bar: {style: {top: '35%', left: '20%', height: '30%', width: '60%', background: 'rgba(255, 255, 255, 0.1)', border: 'rgba(255, 255, 255, 0.2) 1px solid'}},
wording: {style: {top: '40%', left: '10%', height: '10%', width: '80%', fontSize: 17}, content: 'social login'},
avatar: {style: {top: '19%', left: '44%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-1.svg)'}},
facebook: {style: {top: '51%', left: '46%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/facebook.svg)', zIndex: '20'}},
googlePlus: {style: {top: '51%', left: '36%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/google-plus.svg)'}},
twitter: {style: {top: '51%', left: '56%', height: '8%', width: '8%', backgroundImage: 'url(./socialnetwork/twitter.svg)'}},
}},
{name: 'facebook trigger', frames: 4, elements: {
facebook: {styleUpdate: {top: '47%', left: '42%', height: '16%', width: '16%', transition: 'all 400ms cubic-bezier(0.250, 1.085, 0.785, 1.650)'}},
}},
{name: 'logged in', frames: 12, elements: {
bar: {styleUpdate: {top: '10%', left: '10%', height: '10%', width: '80%'}},
wording: {removeAfterScene: true, styleUpdate: {opacity: '0'}}, //fade out
avatar: {styleUpdate: {top: '12%', left: '78%', height: '5%', width: '5%'}},
facebook: {styleUpdate: {top: '12%', left: '84%', height: '5%', width: '5%', zIndex: '20', transition: 'default'}},
googlePlus: {removeAfterScene: true, styleUpdate: {top: '49%', left: '16%', height: '12%', width: '12%', opacity: '0'}}, //fade out
twitter: {removeAfterScene: true, styleUpdate: {top: '49%', left: '76%', height: '12%', width: '12%', opacity: '0', zIndex: '18'}}, //fade out
user1: {style: {top: '79%', left: '16%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-18.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
user2: {style: {top: '79%', left: '46%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/girl-3.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
user3: {style: {top: '79%', left: '76%', height: '12%', width: '12%', backgroundImage: 'url(./avatar/boy-12.svg)', opacity: '0', zIndex: '18'}}, // invisible add user
wording2: {style: {top: '40%', left: '10%', height: '10%', width: '80%', fontSize: 17, opacity: '0'}, content: 'realtime collaboration'}, // invisible new text
}},
{name: 'show users', frames: 12, elements: {
user1: {styleUpdate: {top: '60%', left: '27%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
user2: {styleUpdate: {top: '60%', left: '47%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
user3: {styleUpdate: {top: '60%', left: '67%', height: '10%', width: '10%', opacity: '1'}}, // invisible add user
wording2: {styleUpdate: {opacity: '1'}}, // fade in
}},
{name: 'speech bubbling', frames: 3, elements: {
speechBubble1: {style: {top: '50%', left: '61%', height: '10%', width: '10%', backgroundImage: 'url(./communication/speech-bubble.svg)'}},
}},
{name: 'speech bubbling2', frames: 3, elements: {
speechBubble2: {style: {top: '50%', left: '35%', height: '10%', width: '10%', backgroundImage: 'url(./communication/speech-bubble.svg)', transform: 'scaleX(-1)'}},
}},
{name: 'toggle bubbles', frames: 10, elements: {
speechBubble1: {styleUpdate: {left: '20%'}},
speechBubble2: {styleUpdate: {left: '74%'}},
}},
]}
/>
</div>
<div className="sectionCode">
<Codemirror className="animationWindowCode" value={require("raw!./demo-assets/animationWindowCode.txt")} onChange={() => {}} options={options} style={{height: '350px !important'}} />
</div>
</div>
)
}
return (
<span>Hallo</span>
)
}
const setPage = (page) => {
history.pushState(null, null, page);
this.setState({page})
}
return (
<div className="sectionCamelComponents">
<div className="sectionNavigation">
<div>
<h1 onClick={() => {setPage('#component-AnimationWindow')}}>camel<br />components</h1>
<p>React animation components</p>
<div className="installation">
<span>npm install camel-components --save</span>
</div>
<div>
<a href="https://www.npmjs.com/package/camel-components">npm</a>
<a href="https://github.com/musemind/camel-components">Github</a>
</div>
<div style={{marginTop: 40}}>
Components:
<div
className={`nagivation-item ${(this.state.page === '#component-AnimationWindow') ? 'active' : ''}`}
onClick={() => {setPage('#component-AnimationWindow')}}
>
Animation Window
</div>
<div
className={`nagivation-item ${(this.state.page === '#component-FakeTyping') ? 'active' : ''}`}
onClick={() => {setPage('#component-FakeTyping')}}
>
Fake Typing
</div>
</div>
</div>
<div style={{paddingTop: 30}}>
"camel components" are free to use in any project. created by <a href="https://github.com/musemind">musemind</a>
</div>
</div>
<div className="sectionContent">
{content()}
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.querySelector("#appRoot")
)