YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reset, reset

Browse Source
This commit is contained in:
Dominic Masters
2018-04-28 17:13:56 +10:00
parent 63d1e21b9a
commit 5eb4d7ee4f
124 changed files with 0 additions and 5899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/components/Footer.jsx
View File

@ -1,47 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_header.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import { Link } from 'react-router-dom';
const FooterLink = function(props) {
return (
<span className="c-footer__link">
<Link to={props.to} className="c-footer__link-link">
{props.children}
</Link>
</span>
)
}
class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
let year = new Date().getFullYear();
return (
<footer className="c-footer">
<span className="c-footer__copyright">
2012 ~ {year} | Dominic Masters.
</span>
<nav className="c-footer__links">
<FooterLink to="/privacy-policy">Privacy Policy</FooterLink>
</nav>
</footer>
)
}
}
export default Footer;

31
public/components/Header.jsx
View File

@ -1,31 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_header.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import Navbar from './navigation/Navbar';
class Header extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<header className="c-header">
<Navbar />
</header>
)
}
}
export default Header;

31
public/components/Page.jsx
View File

@ -1,31 +0,0 @@
/*
* Page
* Simple Page wrapper/container.
*
* Dependencies:
* styles/components/_page.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
class Page extends React.Component {
constructor(props) {
super(props);
}
render() {
let clazz = "c-page";
if(this.props.className) clazz += " " + this.props.className;
return (
<main className={clazz}>
{this.props.children}
</main>
)
}
}
export default Page;

34
public/components/Section.jsx
View File

@ -1,34 +0,0 @@
/*
* Section
* Simple Page Section.
*
* Dependencies:
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
class Section extends React.Component {
constructor(props) {
super(props);
}
render() {
let clazz = "c-section";
if(this.props.section) clazz += " c-section--style-"+this.props.section;
if(this.props.full) clazz += " c-section--full-width";
if(this.props.className) clazz += " " + this.props.className;
return (
<section className={ clazz }>
{ this.props.children }
</section>
)
}
}
export default Section;

26
public/components/background/BackgroundLayer.jsx
View File

@ -1,26 +0,0 @@
/*
* Background Layer
* Simple Background Layer.
*
* Dependencies:
* styles/components/_background-layer.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
class BackgroundLayer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class={"c-background-layer c-background-layer--" + this.props.layer} ref="layer">
</div>
);
}
}
export default BackgroundLayer;

64
public/components/background/BackgroundLayers.jsx
View File

@ -1,64 +0,0 @@
/*
* Background Layers
* Wrapper for the background layer's, provides logic in a cost efficient manner.
*
* Dependencies:
* ./BackgrundLayer.jsx
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import BackgroundLayer from './BackgroundLayer';
class BackgroundLayers extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.layerMounted = true;
this.onFrame();
}
componentWillUnmount() {
this.layerMounted = false;
}
onFrame() {
if(this.layerMounted) {
requestAnimationFrame(this.onFrame.bind(this));
}
//https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript
let h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
for(var i = 0; i < this.props.layers.length; i++) {
let layerContainer = this.refs["layer-"+i];
let layer = layerContainer.refs.layer;
layer.style["transform"] = "translateY(-"+(percent/4)+"%) translateZ(0)";
}
}
render() {
let layers = [];
for(var i = 0; i < this.props.layers.length; i++) {
let l = this.props.layers[i];
let e = <BackgroundLayer layer={l.layer} key={"layer-"+i} ref={"layer-"+i} />
layers.push(e);
}
return (
<div class="c-background-layers" ref="">
{layers}
</div>
);
}
}
export default BackgroundLayers;

66
public/components/components/Button.jsx
View File

@ -1,66 +0,0 @@
/*
* Button
* Button
*
* Dependencies:
* styles/objects/_button.scss
*
* Version:
* 1.0.0 - 2018/03/07
*/
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
let element;
let elementType = "button";
let children = this.props.children;
let type = "button";
let clazz = "o-button";
let props = Object.assign({}, this.props);
//Determine Button type
if(props.submit) {
type = "submit";
delete props.submit;
}
if(props.reset) {
type = "reset";
delete props.reset;
}
props.type = type;//Set onto type
//Link?
if(typeof props.to !== typeof undefined) {
elementType = NavLink;
delete props.type;
}
if(typeof props.href !== typeof undefined) {
elementType = "a";
delete props.type;
}
//Clazzes
if(this.props.style) clazz += " o-button--style-" + this.props.style;
if(this.props.className) clazz += " " + this.props.className;
props.className = clazz;
//Create element
element = React.createElement(
elementType,
props,
children
);
return element;
}
}
export default Button;

48
public/components/forms/ContactForm.jsx
View File

@ -1,48 +0,0 @@
/*
* Contact Form
* Contact form.
*
* Version:
* 1.0.0 - 2018/03/06
*/
import React from 'react';
import { Form, InputGroup, TextInput } from './Form';
import Button from './../components/Button';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class ContactForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Form className={this.props.className}>
<InputGroup title={Language.get("contact.form.name.label")} >
<TextInput placeholder={Language.get("contact.form.name.placeholder")} />
</InputGroup>
<InputGroup title={Language.get("contact.form.email.label")}>
<TextInput type="email" placeholder={Language.get("contact.form.email.placeholder")} />
</InputGroup>
<InputGroup title={Language.get("contact.form.message.label")}>
<TextInput multiline placeholder={Language.get("contact.form.message.placeholder")} />
</InputGroup>
<Button submit>{Language.get("contact.form.submit")}</Button>
</Form>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ContactForm);

84
public/components/forms/Form.jsx
View File

@ -1,84 +0,0 @@
/*
* Form
* Form.
*
* Version:
* 1.0.0 - 2018/03/06
*/
import React from 'react';
//Form
class Form extends React.Component {
constructor(props) {
super(props);
}
render() {
let clazz = "c-form";
if(this.props.className) clazz += " " + this.props.className;
return (
<form className={clazz}>
{this.props.children}
</form>
)
}
}
//InputGroup
class InputGroup extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="c-form__group">
<label className="c-form__label">{this.props.title}</label>
{ this.props.children }
</div>
);
}
}
//Input
class TextInput extends React.Component {
constructor(props) {
super(props);
}
render() {
let element;
let elementType = "input";
let children;
let props = Object.assign({
}, this.props);
let clazz = "c-form-input ";;
if(this.props.multiline) {
elementType = "textarea";
children = this.props.value;
clazz += "c-form-input--multiline ";
delete props.type;
delete props.multiline;
} else {
props.value = this.props.value;
}
if(this.props.className) clazz += this.props.className;
props.className = clazz;
element = React.createElement(
elementType,
props,
children
);
return element;
}
}
export { Form, InputGroup, TextInput };

130
public/components/navigation/Menu.jsx
View File

@ -1,130 +0,0 @@
/*
* Menu
* Simple expandable menu.
*
* Dependencies:
* styles/components/_menu.scss
*
* Version:
* 1.0.0 - 2018/03/01
*/
import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { NavLink } from 'react-router-dom';
import { faBars } from '@fortawesome/fontawesome-free-solid'
import { connect } from 'react-redux';
import Language from './../../language/Language';
const MenuItems = {
"navbar.contact.title": {
"navbar.contact.about": "/about",
"navbar.contact.programming": "/about/programming",
"navbar.contact.api": "/about/api",
"navbar.contact.other": "/about/other",
"navbar.contact.contact": "/contact"
},
"navbar.legal.title": {
"navbar.legal.privacy": "/privacy-policy"
}
}
const MenuGroup = function(props) {
return (
<nav className="c-menu__group">
<h1 className="c-menu__group-title">{props.title}</h1>
{props.children}
</nav>
)
}
const MenuItem = function(props) {
return (
<NavLink className="c-menu__item" to={props.to} onClick={props.onClick}>
{props.children}
</NavLink>
)
}
class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
toggleMenu() {
this.setState({
open: !this.state.open
});
}
openMenu() {
this.setState({
open: true
});
}
closeMenu() {
this.setState({
open: false
})
}
render() {
if(this.state.open) {
document.body.classList.add('is-menu-open');
} else {
document.body.classList.remove('is-menu-open');
}
let menu = [];
let keys = Object.keys(MenuItems);
for(var i = 0; i < keys.length; i++) {
let k = keys[i];
let sKeys = Object.keys(MenuItems[k]);
let menuItems = [];
for(var x = 0; x < sKeys.length; x++) {
let sKey = sKeys[x];
console.log(sKey);
menuItems.push(<MenuItem to={MenuItems[k][sKey]} onClick={this.closeMenu.bind(this)} key={x+"-"+i}>{Language.get(sKey)}</MenuItem>)
}
menu.push(
<MenuGroup title={Language.get(k)} key={i}>
{menuItems}
</MenuGroup>
);
}
return (
<nav className="c-menu__wrapper open">
<div className="c-menu">
<div className="c-menu__fix">
<div className={"c-menu__container" + (this.state.open === true ? " open": "")}>
<div className="c-menu__body">
<div className="c-menu__fix c-menu__groups">
{menu}
</div>
</div>
</div>
</div>
</div>
<button type="button" className="c-menu__button" onClick={this.toggleMenu.bind(this)}>
<FontAwesomeIcon icon={faBars} />
</button>
</nav>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Menu);

49
public/components/navigation/Navbar.jsx
View File

@ -1,49 +0,0 @@
/*
* Header
* Header for page, contains navbar as well as other consistant top of page
* elements.
*
* Dependencies:
* styles/components/_navbar.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import Menu from './Menu';
const NavbarLink = function(props) {
return (
<NavLink exact to={props.to} className="c-navbar__link" activeClassName="active">
<span className="c-navbar__link-text">{props.children}</span>
</NavLink>
)
}
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<nav className="c-navbar">
<Menu open />
<Link to="/" className="c-navbar__logo-container">
<img src={ require('./../../images/logo.svg') } className="c-navbar__logo" alt="domsPlace" />
</Link>
<div className="c-navbar__links">
<NavbarLink exact to="/">Home</NavbarLink>
<NavbarLink to="/about">About</NavbarLink>
<NavbarLink to="/contact">Contact</NavbarLink>
</div>
</nav>
)
}
}
export default Navbar;

41
public/components/pages/AboutPage.jsx
View File

@ -1,41 +0,0 @@
/*
* About Page
* About that one lad.
*
* Dependencies:
* styles/components/_page--style-about.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import TitleSection from './../sections/TitleSection';
import BodySection from './../sections/BodySection';
import AboutScene from './../../3d/scenes/AboutScene';
class AboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-about">
<TitleSection
title="about.titles.me"
scene={<AboutScene />}
/>
<BodySection>
Test
</BodySection>
</Page>
);
}
}
export default AboutPage;

54
public/components/pages/ContactPage.jsx
View File

@ -1,54 +0,0 @@
/*
* Contact Page
* Not the Homepage.
*
* Dependencies:
* styles/components/_page--style-contact.scss
*
* Version:
* 1.0.0 - 2018/03/03
*/
import React from 'react';
import Page from './../Page';
import BodySection from './../sections/BodySection';
import TitleSection from './../sections/TitleSection';
import ContactForm from './../forms/ContactForm';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class ContactPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<TitleSection title="contact.form.title" />
<BodySection>
<div className="c-page--style-container__split">
<ContactForm className="c-page--style-container__split-part" />
<div className="c-page--style-container__split-part">
<p>
{Language.get("contact.form.info")}
</p>
</div>
</div>
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ContactPage);

48
public/components/pages/IndexPage.jsx
View File

@ -1,48 +0,0 @@
/*
* Index Page
* Homepage.
*
* Dependencies:
* styles/components/_page--style-index.scss
*
* Version:
* 1.0.1 - 2018/03/01
*/
import React from 'react';
import Page from './../Page';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class IndexPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<SplitSection left={
"test"
} right={
"tost"
}
/>
<BodySection>
<h1>Lorem</h1>
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(IndexPage);

158
public/components/pages/KitchenSinkPage.jsx
View File

@ -1,158 +0,0 @@
import React from 'react';
import Page from './../Page';
import BodySection from './../sections/BodySection';
class KitchenSinkPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<BodySection>
<h1>This is the primary heading and there should only be one of these per page</h1>
<p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
<ul>
<li>This is a list item</li>
<li>So is this - there could be more</li>
<li>Make sure to style list items to:
<ul>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
</ul></li>
<li>A couple more</li>
<li>top level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<table class="t1" summary="Top 10 downloaded movies in 2011 using BitTorrent, in descending order, listing number of downloads and worldwide cinema grosses">
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
<h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<blockquote>
<p><em>This is a properly formatted blockquote, btw.</em> Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
<footer>
— <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
<h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<blockquote>
<p>
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
</p>
</blockquote>
</BodySection>
</Page>
)
}
}
export default KitchenSinkPage;

84
public/components/pages/OldAboutPage.jsx
View File

@ -1,84 +0,0 @@
/*
* About Page
* About that one lad.
*
* Dependencies:
* styles/components/_page--style-about.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Page from './../Page';
import BodySection from './../sections/BodySection';
import SplitSection from './../sections/SplitSection';
import VideoTitle from './../title/VideoTitle';
import Window95 from './../w95/Window95';
import domsHead from './../../images/profile.png';
import aboutMP4 from './../../videos/about/about.mp4';
import programmingMP4 from './../../videos/about/programming.mp4';
import apiMP4 from './../../videos/about/api.mp4';
import otherMP4 from './../../videos/about/other.mp4';
class AboutPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-about">
{/* Bio */}
<SplitSection
className="c-page--style-about__bio-section"
leftClass="c-page--style-about__profile-container"
left={ <img src={domsHead} className="c-page--style-about__profile" /> }
right={
<Window95 title="Bio" className="c-window--style-about">
<div className="c-text-field">
<p>{ Language.get("about.descriptions.welcome") }</p>
</div>
</Window95>
}
rightClass="c-page--style-about__blurb"
/>
{/* About Me */}
<BodySection
className="c-about-page__body-section"
title={
<VideoTitle
title="about.titles.me" mp4={aboutMP4}
/>
}
>
{ Language.get("about.descriptions.me") }
</BodySection>
{/* Programming */}
<BodySection className="c-about-page__body-section" title={[
<VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
<VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
<VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
]}></BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(AboutPage);

33
public/components/pages/PrivacyPolicyPage.jsx
View File

@ -1,33 +0,0 @@
import React from 'react';
import Page from './../Page';
import BlankPromo from './../sections/BlankPromo';
import BodySection from './../sections/BodySection';
import { connect } from 'react-redux';
import Language from './../../language/Language';
class PrivacyPolicyPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<BlankPromo />
<BodySection>
<h1>{Language.get("privacy.title")}</h1>
{Language.get("privacy.policy")}
</BodySection>
</Page>
)
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(PrivacyPolicyPage);

61
public/components/pages/about/APIPage.jsx
View File

@ -1,61 +0,0 @@
/*
* API Page
* About that one lad.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import apiMP4 from './../../../videos/about/api.mp4';
class APIPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-api-skills">
<BodySection
title={
<VideoTitle
title="about.titles.apis" mp4={apiMP4}
/>
}
>
<p>{ Language.get("about.descriptions.apis") }</p>
<div className="o-skill-box__container">
<SkillBox language="gl" />
<SkillBox language="node" />
<SkillBox language="react" />
<SkillBox language="shopify" />
<SkillBox language="neto" />
<SkillBox language="jquery" />
<SkillBox language="nodecg" />
<SkillBox language="phonegap" />
<SkillBox language="other" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(APIPage);

58
public/components/pages/about/OtherSkillsPage.jsx
View File

@ -1,58 +0,0 @@
/*
* Other Skills Page
* About that one lad.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import otherMP4 from './../../../videos/about/other.mp4';
class OtherSkillsPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-other-skills">
<BodySection
title={
<VideoTitle
title="about.titles.other" mp4={otherMP4}
/>
}
>
<p>{ Language.get("about.descriptions.other") }</p>
<div className="o-skill-box__container">
<SkillBox language="video" />
<SkillBox language="animation" />
<SkillBox language="graphics" />
<SkillBox language="networking" />
<SkillBox language="software" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(OtherSkillsPage);

64
public/components/pages/about/ProgrammingPage.jsx
View File

@ -1,64 +0,0 @@
/*
* Programming Page
* About that one lad.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../../language/Language';
import Page from './../../Page';
import BodySection from './../../sections/BodySection';
import VideoTitle from './../../title/VideoTitle';
import SkillBox from './SkillBox';
import programmingMP4 from './../../../videos/about/programming.mp4';
class ProgrammingPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page className="c-page--style-programming">
<BodySection
title={
<VideoTitle
title="about.titles.programming" mp4={programmingMP4}
/>
}
>
<p>{ Language.get("about.descriptions.programming") }</p>
<div className="o-skill-box__container">
<SkillBox language="csharp" />
<SkillBox language="java" />
<SkillBox language="javascript" />
<SkillBox language="html" />
<SkillBox language="php" />
<SkillBox language="vb" />
<SkillBox language="sql" />
<SkillBox language="lua" />
<SkillBox language="actionscript" />
<SkillBox language="ruby" />
<SkillBox language="python" />
</div>
</BodySection>
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(ProgrammingPage);

18
public/components/pages/about/SkillBox.jsx
View File

@ -1,18 +0,0 @@
import React from 'react';
import Language from './../../../language/Language';
const SkillBox = function(props) {
return (
<div className={"o-skill-box o-skill-box--" + props.language}>
<h2 className="o-skill-box__heading">
{Language.get("about."+props.language+".name")}
</h2>
<p className="o-skill-box__description">
{Language.get("about."+props.language+".description")}
</p>
</div>
)
}
module.exports = SkillBox;

28
public/components/sections/BlankPromo.jsx
View File

@ -1,28 +0,0 @@
/*
* BlankPromo
* Blank Promo section.
*
* Dependencies:
* styles/components/_section--style-blank-promo.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import Section from './../Section';
class BlankPromo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="blank-promo" full>
</Section>
)
}
}
export default BlankPromo;

46
public/components/sections/BodySection.jsx
View File

@ -1,46 +0,0 @@
/*
* Body Section
* Section for content bodies.
*
* Dependencies:
* styles/components/_section--style-body.scss
*
* Version:
* 1.0.0 - 2018/03/01
*/
import React from 'react';
import Section from './../Section';
class BodySection extends React.Component {
constructor(props) {
super(props);
}
render() {
let children;
if(this.props.children) {
if(this.props.unpadded) {
children = this.props.children;
} else {
children = (
<div className="c-body-section__wrapper">
{this.props.children}
</div>
);
}
}
return (
<Section section="body" className={this.props.className}>
<div className="c-section--style-body__inner">
{ this.props.title }
{ children }
</div>
</Section>
)
}
}
export default BodySection;

47
public/components/sections/SplitSection.jsx
View File

@ -1,47 +0,0 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-split.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
import React from 'react';
import Section from './../Section';
const SplitSectionSection = function(props) {
let clazz = "c-section--style-split__split-part";
if(typeof props.className !== typeof undefined) clazz += " " + props.className;
return (
<div className={clazz}>
{props.children}
</div>
);
}
class SplitSection extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="split" full={this.props.full ? true : false} className={this.props.className}>
<SplitSectionSection className={this.props.leftClass}>
{this.props.left}
</SplitSectionSection>
<SplitSectionSection className={this.props.rightClass}>
{this.props.right}
</SplitSectionSection>
</Section>
);
}
}
export default SplitSection;

50
public/components/sections/TitleSection.jsx
View File

@ -1,50 +0,0 @@
/*
* Title Section
* Simple title section used for most pages.
*
* Dependencies:
* styles/components/_section--style-title.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Section from './../Section';
class TitleSection extends React.Component {
constructor(props) {
super(props);
}
render() {
let children = [];
if(this.props.scene) {
//3D Model to add to the title, naisu
children.push(
<div className="c-section--style-title__model-container" key="model">
{ this.props.scene }
</div>
);
}
return (
<Section section="title">
<h1 className="c-section--style-title__title">
{ Language.get(this.props.title) }
</h1>
{ children }
</Section>
)
}
}
const mapStateToProps = function(state) {
return { code: state.language.code }
}
export default connect(mapStateToProps)(TitleSection);

49
public/components/title/VideoTitle.jsx
View File

@ -1,49 +0,0 @@
/*
* Video Title
* Video title.
*
* Dependencies:
* styles/components/_video-title.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
import React from 'react';
import { connect } from 'react-redux';
import { Link, NavLink } from 'react-router-dom';
import Language from './../../language/Language';
const VideoTitle = function(props) {
let children = ([
<video autoPlay className="o-video-title__video" loop key="video">
<source src={ props.mp4 } type="video/mp4" />
</video>,
<h2 className="o-video-title__heading" key="title">
{ Language.get(props.title) }
</h2>
]);
let clazz = "o-video-title";
if(props.to) {
return (
<NavLink to={props.to} exact activeClassName="active" className={clazz}>
{children}
</NavLink>
);
}
return (
<div className={clazz}>
{children}
</div>
);
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(VideoTitle);

88
public/components/w95/ContextButton.jsx
View File

@ -1,88 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
import ContextMenuButton from './ContextMenuButton';
class ContextButton extends Component {
constructor(props) {
super(props);
this.handleClick = function(e) {
if(this.isOpen()) {
//Already active, close menu.
this.props.menu.closeMenu();
} else {
this.props.menu.openMenu(this.props.selfRef, this);
}
e.stopPropagation();
}.bind(this);
this.handleHover = function() {
this.props.menu.hoverMenu(this.props.selfRef, this);
}.bind(this);
}
componentDidMount() {
let e = this.refs[this.props.selfRef];
e.addEventListener('click', this.handleClick);
e.addEventListener('mouseover', this.handleHover);
}
componentWillUmount() {
let e = this.refs[this.props.selfRef];
e.removeEventListener('click', this.handleClick);
e.removeEventListener('mouseover', this.handleHover);
}
open() {
if(this.isDisabled()) return this.hide();
this.refs[this.props.selfRef].addClass("active");
}
isDisabled() {return this.refs[this.props.selfRef].hasClass("disabled");}
hide() {
this.refs[this.props.selfRef].removeClass("active");
}
isOpen() {
return this.refs[this.props.selfRef].hasClass("active");
}
render() {
let cls = "c-context-menu__btn";
let options = [];
if(this.props.data === "disabled") {
cls += " disabled";
} else {
let opts = Object.keys(this.props.data);
for(let i = 0; i < opts.length; i++) {
let k = opts[i];
let o = this.props.data[k];
//options.push(<div className="menu-option">{k}</div>);
options.push(<ContextMenuButton ref={k} key={k} selfRef={k} data={o} button={this} title={k} />);
}
}
let menu = <div></div>;
if(options.length > 0) {
menu = (
<div className="c-context-menu__menu">
{options}
</div>
);
}
return (
<div className={cls} ref={this.props.selfRef}>
{this.props.title}
{menu}
</div>
)
}
}
export default ContextButton;

69
public/components/w95/ContextMenu.jsx
View File

@ -1,69 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
import ContextButton from './ContextButton';
import ContextMenuButton from './ContextMenuButton';
class ContextMenu extends Component {
constructor(props) {
super(props);
this.handleClickOutside = function(e) {
this.closeMenu();
e.stopPropagation();
}.bind(this);
}
isOpen() {
return this.open;
}
openMenu(ref, el) {
let keys = Object.keys(this.refs);
for(let i = 0; i < keys.length; i++) {
this.refs[keys[i]].hide(ref, el);
}
el.open();
this.open = true;
}
closeMenu() {
let keys = Object.keys(this.refs);
for(let i = 0; i < keys.length; i++) {
this.refs[keys[i]].hide();
}
this.open = false;
}
hoverMenu(ref, el) {
if(!this.isOpen()) return;
this.openMenu(ref, el);
}
componentDidMount() {
document.addEventListener('click', this.handleClickOutside);
}
componentWillUmount() {
document.removeEventListener('click', this.handleClickOutside);
}
render() {
let contextButtons = [];
let btnKeys = Object.keys(this.props.menu);
for(let i = 0; i < btnKeys.length; i++) {
let key = btnKeys[i];
var b = this.props.menu[key];
if(b === false) continue;
contextButtons.push(<ContextButton data={b} title={key} menu={this} ref={key} key={key} selfRef={key} />);
}
return (
<div className="c-context-menu">
{contextButtons}
</div>
);
}
}
export default ContextMenu;

45
public/components/w95/ContextMenuButton.jsx
View File

@ -1,45 +0,0 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
class ContextMenuButton extends Component {
constructor(props) {
super(props);
this.handleClick = function(e) {
e.stopPropagation();
if(this.isDisabled()) return;
this.props.button.props.menu.closeMenu();
this.clicked();
}.bind(this);
}
clicked() {
if(typeof this.props.data === 'function') {
this.props.data();
}
}
componentDidMount() {
this.refs.option.addEventListener('click', this.handleClick);
}
componentWillUmount() {
this.refs.option.removeEventListener('click', this.handleClick);
}
isDisabled() {return this.props.data === "disabled";}
render() {
let cls = "c-context-menu__menu-option";
if(this.isDisabled()) cls += " disabled";
return (
<div className={cls} ref="option">
{this.props.title}
</div>
);
}
}
export default ContextMenuButton;

75
public/components/w95/Window95.jsx
View File

@ -1,75 +0,0 @@
import React, { Component } from 'react';
import ContextMenuButton from './ContextMenuButton';
import ContextButton from './ContextButton';
import ContextMenu from './ContextMenu';
const defaultButtons = {
maximize: false,
minimize: "disabled",
close: true
};
const defaultMenus = {
"File": {
"New...": true,
"Open...": "disabled",
"Exit": true,
},
"Edit": "disabled",
"Help": {
"View Help...": true,
"About domsPlace();": true
}
};
class Window95 extends Component {
constructor(props) {
super(props);
this.state = {
title: this.props.title ? this.props.title : "Untitled",
buttons: this.props.buttons ? this.props.buttons : defaultButtons,
menu: this.props.menu ? this.props.menu : defaultMenus
};
}
render() {
let btns = [];
let btnKeys = Object.keys(this.state.buttons);
for(let i = 0; i < btnKeys.length; i++) {
let key = btnKeys[i];
var b = this.state.buttons[key];
if(b === false) continue;
let cls = "c-window-btn " + btnKeys[i];
if(b !== true && b !== false) cls += " " + b;
btns.push(<div className={cls} key={i}></div>);
}
let menu = <div></div>
if(this.state.menu !== "false") {
menu = <ContextMenu menu={this.state.menu} />;
}
let clss = "c-window";
if(this.props.className) clss += " " + this.props.className;
return (
<div className={clss}>
<div className="load_me_stuff"></div>
<div className="c-title-bar">
{this.state.title}
<div className="c-window-buttons">
{btns}
</div>
</div>
{menu}
{this.props.children}
</div>
);
}
}
export default Window95;