added anonymous/inChannel toggles to publish form
This commit is contained in:
bill bittner
parent
1d84728bb6
commit
ac0290ae15
5 changed files with 157 additions and 122 deletions
|
|
@ -1,10 +1,72 @@
|
|||
import React from 'react';
|
||||
|
||||
class ChannelSelector extends React.Component {
|
||||
const LOGIN = 'login';
|
||||
const CREATE = 'create';
|
||||
|
||||
class ChannelLoginForm extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h3>channel component</h3>
|
||||
<h4>Channel Login Form</h4>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ChannelCreateForm extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h4>Create Channel Form</h4>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ChannelSelector extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayCreateOrLogin: LOGIN,
|
||||
};
|
||||
this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
|
||||
}
|
||||
toggleCreateOrLogin (event) {
|
||||
const selectedOption = event.target.selectedOptions[0].value;
|
||||
if (selectedOption === 'login') {
|
||||
this.setState({ displayCreateOrLogin: LOGIN });
|
||||
} else {
|
||||
this.setState({ displayCreateOrLogin: CREATE });
|
||||
}
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
{ this.props.publishToChannel && (
|
||||
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
||||
|
||||
<p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
|
||||
|
||||
<div className="column column--3">
|
||||
<label className="label" htmlFor="channel-name-select">Channel:</label>
|
||||
</div><div className="column column--7">
|
||||
<select type="text" id="channel-name-select" className="select select--arrow" onChange={this.toggleCreateOrLogin}>
|
||||
{ this.props.loggedInChannel && <option value={this.props.loggedInChannel} id="publish-channel-select-channel-option">{this.props.loggedInChannel}</option> }
|
||||
<option value="login">Existing</option>
|
||||
<option value="create">New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{ (this.state.displayCreateOrLogin === LOGIN) ? <ChannelLoginForm /> : <ChannelCreateForm /> }
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,45 @@ import UrlInput from './urlInput.jsx';
|
|||
import ThumbnailInput from './thumbnailInput.jsx';
|
||||
import MetadataInputs from './metadataInputs.jsx';
|
||||
|
||||
class PublishDetails extends React.Component {
|
||||
class AnonymousOrChannelSelect extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
|
||||
}
|
||||
toggleAnonymousPublish (event) {
|
||||
const value = event.target.value;
|
||||
if (value === 'anonymous') {
|
||||
this.props.updateUploaderState('publishToChannel', false);
|
||||
} else {
|
||||
this.props.updateUploaderState('publishToChannel', true);
|
||||
}
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div className="row row--padded row--short row--wide">
|
||||
<div className="column column--10">
|
||||
<form>
|
||||
<div className="column column--3 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
|
||||
</div>
|
||||
<div className="column column--7 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PublishForm extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
channelError: null,
|
||||
}
|
||||
// set defaults
|
||||
this.updateUploaderState = this.updateUploaderState.bind(this);
|
||||
this.clearUploaderState = this.clearUploaderState.bind(this);
|
||||
|
|
@ -43,7 +79,15 @@ class PublishDetails extends React.Component {
|
|||
<div className="column column--5 column--sml-10 align-content-top">
|
||||
<div id="publish-active-area" className="row row--padded">
|
||||
|
||||
<ChannelSelector />
|
||||
<AnonymousOrChannelSelect publishToChannel={this.props.publishToChannel} updateUploaderState={this.props.updateUploaderState}/>
|
||||
|
||||
<ChannelSelector
|
||||
channel={this.props.channel}
|
||||
loggedInChannel={this.props.loggedInChannel}
|
||||
publishToChannel={this.props.publishToChannel}
|
||||
updateUploaderState={this.updateUploaderState}
|
||||
channelError={this.state.channelError}
|
||||
/>
|
||||
|
||||
<UrlInput file={this.props.file}/>
|
||||
|
||||
|
|
@ -71,4 +115,4 @@ class PublishDetails extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
module.exports = PublishDetails;
|
||||
module.exports = PublishForm;
|
||||
|
|
@ -1,6 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
class UrlInput extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.updateUrl = this.updateUrl.bind(this);
|
||||
}
|
||||
updateUrl (selectedOption) {
|
||||
const urlChannel = document.getElementById('url-channel');
|
||||
const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
|
||||
const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
|
||||
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
|
||||
urlChannel.hidden = true;
|
||||
urlNoChannelPlaceholder.hidden = true;
|
||||
urlChannelPlaceholder.hidden = false;
|
||||
} else if (selectedOption === 'anonymous'){
|
||||
urlChannel.hidden = true;
|
||||
urlNoChannelPlaceholder.hidden = false;
|
||||
urlChannelPlaceholder.hidden = true;
|
||||
} else {
|
||||
urlChannel.hidden = false;
|
||||
// show channel and short id
|
||||
const selectedChannel = getCookie('channel_name');
|
||||
const shortChannelId = getCookie('short_channel_id');
|
||||
urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
|
||||
urlNoChannelPlaceholder.hidden = true;
|
||||
urlChannelPlaceholder.hidden = true;
|
||||
}
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Dropzone from './components/dropzone.jsx';
|
||||
import PublishDetails from './components/publishDetails.jsx';
|
||||
import PublishForm from './components/publishForm.jsx';
|
||||
import PublishStatus from './components/publishStatus.jsx';
|
||||
|
||||
const DROPZONE = 'DROPZONE';
|
||||
const DETAILS = 'DETAILS';
|
||||
const STATUS = 'STATUS';
|
||||
const initialState = {
|
||||
showComponent: DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
|
||||
file : null,
|
||||
title : '',
|
||||
channel : '',
|
||||
url : '',
|
||||
thumbnail : '',
|
||||
description : '',
|
||||
license : '',
|
||||
nsfw : '',
|
||||
}
|
||||
showComponent : DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
|
||||
loggedInChannel : null,
|
||||
publishToChannel: false,
|
||||
file : null,
|
||||
title : '',
|
||||
channel : null,
|
||||
url : '',
|
||||
thumbnail : '',
|
||||
description : '',
|
||||
license : '',
|
||||
nsfw : '',
|
||||
};
|
||||
|
||||
class Uploader extends React.Component {
|
||||
constructor (props) {
|
||||
|
|
@ -29,6 +31,10 @@ class Uploader extends React.Component {
|
|||
this.showComponent = this.showComponent.bind(this);
|
||||
this.stageFileAndShowDetails = this.stageFileAndShowDetails.bind(this);
|
||||
}
|
||||
componentDidMount () {
|
||||
// check for whether a channel is logged in
|
||||
// if so, setState loggedInChannel to the channel name
|
||||
}
|
||||
updateUploaderState (name, value) {
|
||||
console.log(`updateUploaderState ${name} ${value}`);
|
||||
this.setState({[name]: value});
|
||||
|
|
@ -53,9 +59,11 @@ class Uploader extends React.Component {
|
|||
<Dropzone stageFileAndShowDetails={this.stageFileAndShowDetails}/>
|
||||
}
|
||||
{ this.state.showComponent === DETAILS &&
|
||||
<PublishDetails
|
||||
<PublishForm
|
||||
updateUploaderState={this.updateUploaderState}
|
||||
clearUploaderState={this.clearUploaderState}
|
||||
loggedInChannel={this.state.loggedInChannel}
|
||||
publishToChannel={this.state.publishToChannel}
|
||||
file={this.state.file}
|
||||
title={this.state.title}
|
||||
channel={this.state.channel}
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
<!-- select whether to publish anonymously or in a channel -->
|
||||
<div class="row row--padded row--short row--wide">
|
||||
<div class="column column--10">
|
||||
<form>
|
||||
<div class="column column--3 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" class="input-radio" value="anonymous" {{#unless user}}checked {{/unless}} onchange="toggleChannel(event.target.value)"/>
|
||||
<label class="label label--pointer" for="anonymous-radio">Anonymous</label>
|
||||
</div><div class="column column--7 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="channel-radio" class="input-radio" value="in a channel" {{#if user}}checked {{/if}} onchange="toggleChannel(event.target.value)"/>
|
||||
<label class="label label--pointer" for="channel-radio">In a channel</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
|
||||
<div class="row row--padded row--no-top row--no-bottom row--wide">
|
||||
<!--error display-->
|
||||
<p id="input-error-channel-select" class="info-message-placeholder info-message--failure"></p>
|
||||
<!--channel login/create select-->
|
||||
<div class="column column--3">
|
||||
<label class="label" for="channel-name-select">Channel:</label>
|
||||
</div><div class="column column--7">
|
||||
<select type="text" id="channel-name-select" class="select select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
|
||||
{{#if user}}
|
||||
<option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>
|
||||
{{/if}}
|
||||
<option value="login">Existing</option>
|
||||
<option value="new" >New</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- log into an existing channel -->
|
||||
<div id="channel-login-details" class="row row--padded row--short row--wide" {{#if user}}hidden="true"{{/if}}>
|
||||
{{> channelLoginForm}}
|
||||
</div>
|
||||
<!-- create a channel -->
|
||||
<div id="channel-create-details" class="row row--padded row--short row--wide" hidden="true">
|
||||
{{> channelCreationForm}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// show or hide the channel selection tools
|
||||
function toggleChannel (selectedOption) {
|
||||
const channelSelectOptions = document.getElementById('channel-select-options');
|
||||
// show/hide the login and new channel forms
|
||||
if (selectedOption === 'anonymous') {
|
||||
channelSelectOptions.hidden = true;
|
||||
channelSelectOptions.hidden = true;
|
||||
// update url
|
||||
updateUrl(selectedOption);
|
||||
} else if (selectedOption === 'in a channel') {
|
||||
channelSelectOptions.hidden = false;
|
||||
// update url
|
||||
let selectedChannel = document.getElementById('channel-name-select').selectedOptions[0].value
|
||||
toggleSelectedChannel(selectedChannel);
|
||||
} else {
|
||||
console.log('selected option was not recognized');
|
||||
}
|
||||
|
||||
}
|
||||
// show or hide the channel create/login tool
|
||||
function toggleSelectedChannel (selectedChannel) {
|
||||
const createChannelTool = document.getElementById('channel-create-details');
|
||||
const loginToChannelTool = document.getElementById('channel-login-details');
|
||||
// show/hide the login and new channel forms
|
||||
if (selectedChannel === 'new') {
|
||||
createChannelTool.hidden = false;
|
||||
loginToChannelTool.hidden = true;
|
||||
} else if (selectedChannel === 'login') {
|
||||
loginToChannelTool.hidden = false;
|
||||
createChannelTool.hidden = true;
|
||||
} else {
|
||||
// hide the login and new channel forms
|
||||
loginToChannelTool.hidden = true;
|
||||
createChannelTool.hidden = true;
|
||||
validationFunctions.hideError(document.getElementById('input-error-channel-select'));
|
||||
}
|
||||
// update url
|
||||
updateUrl(selectedChannel);
|
||||
}
|
||||
function updateUrl (selectedOption) {
|
||||
const urlChannel = document.getElementById('url-channel');
|
||||
const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
|
||||
const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
|
||||
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
|
||||
urlChannel.hidden = true;
|
||||
urlNoChannelPlaceholder.hidden = true;
|
||||
urlChannelPlaceholder.hidden = false;
|
||||
} else if (selectedOption === 'anonymous'){
|
||||
urlChannel.hidden = true;
|
||||
urlNoChannelPlaceholder.hidden = false;
|
||||
urlChannelPlaceholder.hidden = true;
|
||||
} else {
|
||||
urlChannel.hidden = false;
|
||||
// show channel and short id
|
||||
const selectedChannel = getCookie('channel_name');
|
||||
const shortChannelId = getCookie('short_channel_id');
|
||||
urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
|
||||
urlNoChannelPlaceholder.hidden = true;
|
||||
urlChannelPlaceholder.hidden = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue