added webpack and some basic components
This commit is contained in:
bill bittner
parent
551ae3ec09
commit
bbae477a34
8 changed files with 18479 additions and 51 deletions
|
|
@ -9,7 +9,9 @@
|
||||||
"start": "node speech.js",
|
"start": "node speech.js",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"fix": "eslint . --fix",
|
"fix": "eslint . --fix",
|
||||||
"precommit": "eslint ."
|
"precommit": "eslint .",
|
||||||
|
"babel": "babel",
|
||||||
|
"webpack": "webpack"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
||||||
18297
public/bundle/bundle.js
Normal file
18297
public/bundle/bundle.js
Normal file
File diff suppressed because it is too large
Load diff
53
react/app.js
Normal file
53
react/app.js
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import Dropzone from './components/dropzone.jsx';
|
||||||
|
import PublishDetails from './components/publishDetails.jsx';
|
||||||
|
import PublishStatus from './components/publishStatus.jsx';
|
||||||
|
|
||||||
|
const WAITING = 'WAITING';
|
||||||
|
const READY = 'READY';
|
||||||
|
const PUBLISHING = 'PUBLISHING';
|
||||||
|
|
||||||
|
class Uploader extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
componentStatus : WAITING, // WAITING, DETAILS, or PUBLISHING
|
||||||
|
publishingStatus: 'starting status',
|
||||||
|
files : [],
|
||||||
|
};
|
||||||
|
// bind class methods with `this`
|
||||||
|
this.handleClick = this.handleClick.bind(this);
|
||||||
|
this.updateComponentStatus = this.updateComponentStatus.bind(this);
|
||||||
|
}
|
||||||
|
handleClick (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('The link was clicked.');
|
||||||
|
}
|
||||||
|
updateComponentStatus (newStatus) {
|
||||||
|
this.setState({componentStatus: newStatus});
|
||||||
|
}
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<input class="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onchange="publishFileFunctions.previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||||
|
</form>
|
||||||
|
{ this.state.componentStatus === WAITING &&
|
||||||
|
<Dropzone/>
|
||||||
|
}
|
||||||
|
{ this.state.componentStatus === READY &&
|
||||||
|
<PublishDetails />
|
||||||
|
}
|
||||||
|
{ this.state.componentStatus === PUBLISHING &&
|
||||||
|
<PublishStatus status={this.state.publishingStatus} />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Uploader />,
|
||||||
|
document.getElementById('react-uploader')
|
||||||
|
);
|
||||||
21
react/components/dropzone.jsx
Normal file
21
react/components/dropzone.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class Dropzone extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
|
||||||
|
<div id="primary-dropzone-instructions">
|
||||||
|
<p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
|
||||||
|
<p>Drag & drop image or video here to publish</p>
|
||||||
|
<p class="fine-print">OR</p>
|
||||||
|
<p class="blue--underlined">CHOOSE FILE</p>
|
||||||
|
</div>
|
||||||
|
<div id="dropbzone-dragover" class="hidden">
|
||||||
|
<p class="blue">Drop it.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Dropzone;
|
||||||
62
react/components/publishDetails.jsx
Normal file
62
react/components/publishDetails.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class Title extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<input type="text" id="publish-title" class="input-text text--large input-text--full-width" placeholder="Give your post a title..." />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Preview extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
|
||||||
|
<div id="asset-preview-dropzone-instructions" class="hidden">
|
||||||
|
<p>Drag & drop image or video here</p>
|
||||||
|
<p class="fine-print">OR</p>
|
||||||
|
<p class="blue--underlined">CHOOSE FILE</p>
|
||||||
|
</div>
|
||||||
|
<div id="asset-preview-target"></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
class Details extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
{{> publishForm-Channel}}
|
||||||
|
{{> publishForm-Url}}
|
||||||
|
{{> publishForm-Thumbnail}}
|
||||||
|
{{> publishForm-Details}}
|
||||||
|
{{> publishForm-Submit}}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PublishDetails extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div id="publish-form" class="hidden">
|
||||||
|
<div class="row row--padded row--no-bottom">
|
||||||
|
<div class="column column--10">
|
||||||
|
<Title />
|
||||||
|
</div>
|
||||||
|
<div class="column column--5 column--sml-10" >
|
||||||
|
<div class="row row--padded">
|
||||||
|
<Preview />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column column--5 column--sml-10 align-content-top">
|
||||||
|
<div id="publish-active-area" class="row row--padded">
|
||||||
|
<Details />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = PublishDetails;
|
||||||
18
react/components/publishStatus.jsx
Normal file
18
react/components/publishStatus.jsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class PublishStatus extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div id="publish-status" class="hidden">
|
||||||
|
<div class="row row--margined">
|
||||||
|
<div id="publish-update" class="row align-content-center"></div>
|
||||||
|
<div id="publish-progress-bar" class="row align-content-center"></div>
|
||||||
|
<div id="upload-percent" class="row align-content-center"></div>
|
||||||
|
<div>{this.props.status}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = PublishStatus;
|
||||||
|
|
@ -1,52 +1,5 @@
|
||||||
<div class="row row--tall flex-container--column">
|
<div class="row row--tall flex-container--column">
|
||||||
<form>
|
<div id="react-uploader"></div>
|
||||||
<input class="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onchange="publishFileFunctions.previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
|
||||||
</form>
|
|
||||||
<div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
|
|
||||||
<div id="primary-dropzone-instructions">
|
|
||||||
<p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
|
|
||||||
<p>Drag & drop image or video here to publish</p>
|
|
||||||
<p class="fine-print">OR</p>
|
|
||||||
<p class="blue--underlined">CHOOSE FILE</p>
|
|
||||||
</div>
|
|
||||||
<div id="dropbzone-dragover" class="hidden">
|
|
||||||
<p class="blue">Drop it.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="publish-form" class="hidden">
|
|
||||||
<div class="row row--padded row--no-bottom">
|
|
||||||
<div class="column column--10">
|
|
||||||
<!-- title input -->
|
|
||||||
<input type="text" id="publish-title" class="input-text text--large input-text--full-width" placeholder="Give your post a title...">
|
|
||||||
</div>
|
|
||||||
<div class="column column--5 column--sml-10" >
|
|
||||||
<!-- preview -->
|
|
||||||
<div class="row row--padded">
|
|
||||||
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="publishFileFunctions.triggerFileChooser('file_input', event)">
|
|
||||||
<div id="asset-preview-dropzone-instructions" class="hidden">
|
|
||||||
<p>Drag & drop image or video here</p>
|
|
||||||
<p class="fine-print">OR</p>
|
|
||||||
<p class="blue--underlined">CHOOSE FILE</p>
|
|
||||||
</div>
|
|
||||||
<div id="asset-preview-target"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><div class="column column--5 column--sml-10 align-content-top">
|
|
||||||
<div id="publish-active-area" class="row row--padded">
|
|
||||||
{{> publishForm-Channel}}
|
|
||||||
{{> publishForm-Url}}
|
|
||||||
{{> publishForm-Thumbnail}}
|
|
||||||
{{> publishForm-Details}}
|
|
||||||
{{> publishForm-Submit}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="publish-status" class="hidden">
|
|
||||||
<div class="row row--margined">
|
|
||||||
<div id="publish-update" class="row align-content-center"></div>
|
|
||||||
<div id="publish-progress-bar" class="row align-content-center"></div>
|
|
||||||
<div id="upload-percent" class="row align-content-center"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="/bundle/bundle.js"></script>
|
||||||
|
|
|
||||||
22
webpack.config.js
Normal file
22
webpack.config.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry : './react/app.js',
|
||||||
|
output: {
|
||||||
|
path : path.join(__dirname, '/public/bundle/'),
|
||||||
|
filename: 'bundle.js',
|
||||||
|
},
|
||||||
|
watch : true,
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test : /.jsx?$/,
|
||||||
|
loader : 'babel-loader',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
query : {
|
||||||
|
presets: ['es2015', 'react'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue