105 lines
No EOL
5.1 KiB
Handlebars
105 lines
No EOL
5.1 KiB
Handlebars
<!-- 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;
|
|
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> |