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

Contact Page Finally Implemented

Browse Source
This commit is contained in:
Dominic Masters
2018-07-08 20:49:09 +10:00
parent 07ba3bd671
commit 95dbba839f
10 changed files with 403 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/input/Input.jsx
View File

@ -25,13 +25,44 @@ import React from 'react';
import Button from './button/Button';
import ButtonGroup from './button/ButtonGroup';
import Form from './form/Form';
import Form, { FormManager } from './form/Form';
import InputGroup from './group/InputGroup';
import Label from './label/Label';
export default class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.value
};
}
onChange(e, a, b) {
//Self explanitory
if(this.props.onChange) {
if(this.props.onChange(e) === false) return false;
}
if(this.props.manager) {
if(this.props.manager.onChange(this, e) === false) return false;
}
this.setState({
value: e.target.value
});
}
componentDidMount() {
if(this.props.manager) {
this.props.manager.addInput(this);
}
}
componentWillUnmount() {
if(this.props.manager) {
this.props.manager.removeInput(this);
}
}
render() {
@ -80,11 +111,28 @@ export default class Input extends React.Component {
//First we need to switch things like submit and reset
if(type == "submit" || type == "reset" || type == "button") {
return <Button {...this.props} />;
return (<Button
{...this.props}
className={this.props.className}
value={this.state.value}
/>);
} else if(type == "textarea") {
element = <textarea {...this.props} className={innerClazzes}>{ value }</textarea>
element = (<textarea
{...this.props}
className={innerClazzes}
onChange={this.onChange.bind(this)}
>{ this.state.value }</textarea>
);
} else {
element = <ElementType {...this.props} type={type} className={innerClazzes} />
element = (<ElementType
{...this.props}
onChange={this.onChange.bind(this)}
type={type}
value={ this.state.value }
className={innerClazzes}
/>);
}
return (
@ -103,6 +151,7 @@ export {
Button,
ButtonGroup,
Form,
FormManager,
InputGroup,
TextArea,
Label

82
public/input/form/Form.jsx
View File

@ -23,6 +23,7 @@
import React from 'react';
import Loader, { LoaderBackdrop } from './../../loading/Loader';
import Input, { InputGroup, TextArea } from './../Input';
export default class Form extends React.Component {
constructor(props) {
@ -34,7 +35,8 @@ export default class Form extends React.Component {
loader: props.loader || false,
loading: false,
onSubmit: props.onSubmit,
contentType: props.contentType || props.encType || "application/x-www-form-urlencoded"
contentType: props.contentType || props.encType || "application/x-www-form-urlencoded",
manager: props.manager
};
//Determine action and method based off the internals
@ -71,10 +73,25 @@ export default class Form extends React.Component {
submitting: true
});
//Prepare our data
let data;
if(this.props.manager) {
data = this.props.manager.getFormData();
}
if(this.state.contentType == "application/json") {
let dataJson = {};
data.forEach(function(value, key) {
dataJson[key] = value;
});
data = JSON.stringify(dataJson);
}
//Prepare our request.
fetch(this.state.action, {
method: this.state.method,
mode: this.state.mode,
body: data,
headers: {
"Content-Type": this.state.contentType
}
@ -87,21 +104,40 @@ export default class Form extends React.Component {
}
onSubmitted(response) {
let method = 'text';
let isJson = response.headers.get("Content-Type").toLowerCase().indexOf("application/json") !== -1;
if(isJson) method = 'json';
if(!response.ok) {
throw Error(response.statusText);
let is4xx = Math.floor(response.status / 400) === 1;
if(is4xx) {
return response[method]()
.then(this.onErrorText.bind(this))
.catch(this.onError.bind(this))
;
} else {
throw Error(response.statusText);
}
}
if(this.props.onData) return this.props.onData(response);
//Handle the old fashioned way (expect json)
response.json().then(this.onJSON.bind(this)).catch(this.onError.bind(this));
response[method]()
.then(this.onData.bind(this))
.catch(this.onError.bind(this))
;
}
onJSON(response) {
if(this.props.onJSON) return this.props.onJSON(response);
onData(response) {
if(this.props.onSuccess) return this.props.onSuccess(response);
console.log(response);
}
onErrorText(e,a,b) {
this.onError(e,a,b);
}
onError(e, a, b) {
this.setState({
loading: false,
@ -142,3 +178,39 @@ export default class Form extends React.Component {
);
}
}
//FormManager
class FormManager {
constructor() {
this.forms = [];
this.inputs = [];
}
addInput(input) {
this.inputs.push(input);
}
removeInput(input) {
let i = this.forms.indexOf(input);
if(i === -1) return;
this.inputs.splice(i, 1);
}
onChange(input, event) {
}
getFormData() {
let data = new FormData();
for(let i = 0; i < this.inputs.length; i++) {
let input = this.inputs[i];
data.append(input.props.name, input.state.value);
}
return data;
}
}
export {
FormManager
};

41
public/keyboard/Keyboard.jsx Normal file
View File

@ -0,0 +1,41 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const KEY_ESCAPE = 27;
class Keyboard {
constructor(){}
isKeyOrCode(evt, key, code) {
if (typeof evt.key !== typeof undefined) {
return evt.key.toLowerCase() === key.toLowerCase();
}
return evt.keyCode === code;
}
isEscape(e) {
return this.isKeyOrCode(e, "Escape", KEY_ESCAPE);
}
}
export default new Keyboard();

13
public/language/en-AU.jsx
View File

@ -26,7 +26,6 @@ module.exports = {
},
"pages": {
"about": {
"title": "About Me",
"banner": {
@ -147,7 +146,13 @@ module.exports = {
},
"send": "Send",
"reset": "Reset"
"reset": "Reset",
"error": "An error has occured!",
"success": {
"heading": "Message sent!",
"paragraph": "Your email was sent! I should respond shortly, thanks for your patience!"
}
},
"privacy": {
@ -157,6 +162,10 @@ module.exports = {
}
},
"modal": {
"close": "Close"
},
"window": {
"address": "Address:"
}

86
public/modal/Modal.jsx
View File

@ -26,42 +26,89 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Button } from './../input/Input';
import Language from './../language/Language';
import { openModal, closeModal } from './../actions/ModalActions';
import { Heading4 } from './../typography/Typography';
import Keyboard from './../keyboard/Keyboard';
class Modal extends React.Component {
constructor(props) {
super(props);
this.onKeyDownBound = this.onKeyDown.bind(this);
}
componentDidMount() {
document.addEventListener('keydown', this.onKeyDownBound);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeyDownBound);
}
onKeyDown(e) {
if(!Keyboard.isEscape(e)) return;
e.preventDefault();
e.stopPropagation();
this.props.closeModal();
}
render() {
let junk = [];
for(let x = 0; x < 1000; x++) {
junk.push(<div key={x}>Hello World</div>);
}
//Add necessary buttons
let buttons;
if(this.props.buttons) buttons = this.props.button;
let buttons = [];
if(this.props.buttons) {
if(Array.isArray(buttons)) {
buttons.concat(this.props.buttons);
} else {
buttons.push(this.props.buttons);
}
}
if(this.props.close) {
buttons.push(<Button key="close" onClick={this.props.closeModal}>{ Language.get("modal.close") }</Button>);
}
//Inner divs
let heading,body,footer;
if(this.props.title) {
heading = (
<div className="o-modal__box-heading">
<Heading4 className="o-modal__title">
{ this.props.title }
</Heading4>
</div>
);
}
if(this.props.children) {
body = (
<div className="o-modal__box-body">
{ this.props.children }
</div>
);
}
if(buttons) {
footer = (
<div className="o-modal__box-footer">
{ buttons }
</div>
);
}
//Create our modal contents
let contents = (
<div className="o-modal">
<div className="o-modal__inner">
{/* Provides both a good overlay, and a nice clickable area */}
<div className="o-modal__backdrop" onClick={this.props.closeModal}>
</div>
<div className="o-modal__box">
<div className="o-modal__box-inner">
<div className="o-modal__box-body">
<div className="o-modal__box-body-inner">
{ junk }
</div>
</div>
<div className="o-modal__box-footer">
{ buttons }
</div>
</div>
{/* Box itself, has a background and a shadow */}
<div className={"o-modal__box" + (this.props.large ? " is-large":"")}>
{ heading }
{ body }
{ footer }
</div>
</div>
</div>
@ -96,7 +143,8 @@ class Modal extends React.Component {
const mapStateToProps = (state) => {
return {
modal: state.modal
modal: state.modal,
language: state.language
};
}

170
public/page/contact/ContactPage.jsx
View File

@ -23,33 +23,142 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Page, { PageBoundary } from './../Page';
import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input';
import Language from './../../language/Language';
import ElementScrollFader from './../../animation/fade/ElementScrollFader';
import ContentBox from './../../content/ContentBox';
import { Title, Paragraph } from './../../typography/Typography';
import { Title, Heading1, Paragraph } from './../../typography/Typography';
import Forms from './../../../common/Forms';
import Input, {
Form,
FormManager,
InputGroup,
TextArea,
Label,
ButtonGroup
} from './../../input/Input';
import Section, {
BodySection,
ClearSection,
SplitSection,
Split
} from './../../section/Section';
import { openModal } from './../../actions/ModalActions';
import Modal from './../../modal/Modal';
class ContactPage extends React.Component {
constructor(props) {
super(props);
//Form Manager (For the form and elements)
this.manager = new FormManager();
this.state = {
sent: false
};
}
onSuccess(data) {
if(data !== true) return this.onError(data);
this.setState({
sent: true
});
}
onError(e, a, b) {
this.props.openModal(
<Modal close title={Language.get("pages.contact.error")}>
{ e }
</Modal>
);
}
render() {
//Form
let inners;
if(this.state.sent) {
//Sent Display
inners = (
<ElementScrollFader from="bottom">
<ContentBox box className="u-text-center">
<Heading1>{ Language.get("pages.contact.success.heading") }</Heading1>
<Paragraph>{ Language.get("pages.contact.success.paragraph") }</Paragraph>
</ContentBox>
</ElementScrollFader>
);
} else {
//Form
inners = (
<ElementScrollFader from="right">
<BodySection>
<Form
post="/api/contact/send"
contentType="application/json"
ajax
loader
onSuccess={ this.onSuccess.bind(this) }
onError={ this.onError.bind(this) }
manager={ this.manager }
>
<InputGroup test="First Group">
<Label htmlFor="name">
{ Language.get("pages.contact.name.label") }
</Label>
<Input
name="name"
type="text"
placeholder={ Language.get("pages.contact.name.placeholder") }
required={ Forms.contact.name.required }
maxLength={ Forms.contact.name.maxLength }
manager={ this.manager }
/>
</InputGroup>
<InputGroup >
<Label htmlFor="email">
{ Language.get("pages.contact.email.label") }
</Label>
<Input
name="email"
type="email"
placeholder={ Language.get("pages.contact.email.placeholder") }
required={ Forms.contact.email.required }
maxLength={ Forms.contact.email.maxLength }
manager={ this.manager }
/>
</InputGroup>
<InputGroup>
<Label> htmlFor="message">
{ Language.get("pages.contact.message.label") }
</Label>
<TextArea
name="message"
placeholder={ Language.get("pages.contact.message.placeholder") }
rows="8"
className="p-contact-page__message"
required={ Forms.contact.message.required }e
maxLength={ Forms.contact.message.maxLength }
manager={ this.manager }
/>
</InputGroup>
<ButtonGroup>
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
<Input type="reset" value={ Language.get("pages.contact.reset") } />
</ButtonGroup>
</Form>
</BodySection>
</ElementScrollFader>
);
}
return (
<Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
<ClearSection />
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box className="u-text-center">
<Title>{ Language.get("pages.contact.heading") }</Title>
@ -62,49 +171,8 @@ class ContactPage extends React.Component {
<br />
<br />
<ElementScrollFader from="right">
<BodySection>
<Form post="/api/contact/send" ajax loader>
<InputGroup>
<Label>{ Language.get("pages.contact.name.label") }</Label>
<Input
type="text"
placeholder={ Language.get("pages.contact.name.placeholder") }
required={ Forms.contact.name.required }
maxLength={ Forms.contact.name.maxLength }
/>
</InputGroup>
<InputGroup >
<Label>{ Language.get("pages.contact.email.label") }</Label>
<Input
type="email"
placeholder={ Language.get("pages.contact.email.placeholder") }
required={ Forms.contact.email.required }
maxLength={ Forms.contact.email.maxLength }
/>
</InputGroup>
<InputGroup>
<Label>{ Language.get("pages.contact.message.label") }</Label>
<TextArea
placeholder={ Language.get("pages.contact.message.placeholder") }
rows="8"
className="p-contact-page__message"
required={ Forms.contact.message.required }
maxLength={ Forms.contact.message.maxLength }
/>
</InputGroup>
<ButtonGroup>
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
<Input type="reset" value={ Language.get("pages.contact.reset") } />
</ButtonGroup>
</Form>
</BodySection>
</ElementScrollFader>
{ inners }
</PageBoundary>
<ClearSection />
</Page>
);
@ -117,4 +185,10 @@ const mapStateToProps = function(state) {
}
}
export default connect(mapStateToProps)(ContactPage);
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
openModal: openModal
},dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactPage);

2
public/page/home/Homepage.jsx
View File

@ -42,7 +42,7 @@ class Homepage extends React.Component {
testModal() {
console.log("oof");
this.props.openModal(
<Modal>
<Modal close>
Hello Modal
</Modal>
);

4
public/styles/components/_app.scss
View File

@ -14,4 +14,8 @@
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
&.is-modal-open {
overflow: hidden;
}
}

71
public/styles/objects/_modal.scss
View File

@ -12,7 +12,6 @@
*/
$o-modal--backdrop: rgba(0, 0, 0, 0.7);
$o-modal--background: white;
$o-modal--padding: 0.5em;
$o-modal--transition: 0.2s $s-animation--ease-out;
@ -28,10 +27,11 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
&__backdrop {
position: absolute;
position: fixed;
left: 0;
top: 0;
width: 100%;
@ -44,60 +44,41 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
}
&__box {
@include t-absolute-center-x-y();
@extend %t-dp--shadow;
background: $o-modal--background;
position: relative;
width: 100%;
height: 100%;
max-width: 95%;
max-height: 95%;
margin: 5em auto;
&-inner {
position: relative;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
@include t-flex-direction(column);
@include t-align-items(flex-start);
@include t-align-content(flex-start);
@extend %t-dp--shadow;
width: 100%;
height: 100%;
background: $o-modal--background;
//Transition properties
transition: all #{$o-modal--transition};
@include t-scale(0.4);
opacity: 0;
}
&-body {
position: relative;
@include t-flex-grow(1);
width: 100%;
/* Unfortunately flex can only get us half way there */
&-inner {//Hacks our content so it will never overflow its container.
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding: $o-modal--padding;
}
}
//Transition properties
transition: all #{$o-modal--transition};
@include t-scale(0.4);
opacity: 0;
&-heading,
&-body,
&-footer {
width: 100%;
padding: $o-modal--padding;
padding: 1em;
}
}
&__title {
margin: 1em 0 0.5em;
}
//Media Queries
@include t-media-query($s-xsmall-up) {
&__box {
width: 800px;
height: 600px;
max-width: 600px;
&.is-large {
max-width: 900px;
}
}
}
//Transition related
&__transition {
&-container {}//Top level container
@ -112,7 +93,7 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
opacity: 1;
}
.o-modal__box-inner {
.o-modal__box {
@include t-scale(1);
opacity: 1;
}

2
public/typography/Heading.jsx
View File

@ -31,7 +31,7 @@ const Heading = (props) => {
return (
<CustomTag className={clazz} {...props} />
<CustomTag {...props} className={clazz} />
);
}
export default Heading;