added webpack and some basic components
This commit is contained in:
bill bittner
parent
551ae3ec09
commit
bbae477a34
|
|
@ -9,7 +9,9 @@
|
|||
"start": "node speech.js",
|
||||
"lint": "eslint .",
|
||||
"fix": "eslint . --fix",
|
||||
"precommit": "eslint ."
|
||||
"precommit": "eslint .",
|
||||
"babel": "babel",
|
||||
"webpack": "webpack"
|
||||
},
|
||||
"repository": {
|
||||
"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">
|
||||
<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>
|
||||
<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 id="react-uploader"></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