Merge pull request #11593 from BerkeleyTrue/feat/no-sidecar-map
feat(nav): remove sidecar
This commit is contained in:
Quincy Larson
GitHub
@ -1,25 +0,0 @@
|
||||
.chat-embed-help-title,
|
||||
.chat-embed-main-title {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding-left: 31px;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.gitter-chat-embed {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 60%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
|
||||
}
|
||||
|
||||
.gitter-chat-embed.is-collapsed:not(.is-loading) {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
/*
|
||||
* based off of https://github.com/gitterHQ/sidecar
|
||||
* license: MIT
|
||||
*/
|
||||
.drawer {
|
||||
width:500px;
|
||||
|
||||
z-index: 20000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
background-color: @body-bg;
|
||||
border-left: 1px solid #ddd;
|
||||
box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
|
||||
|
||||
transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
|
||||
|
||||
&.is-collapsed:not(.is-loading) {
|
||||
-webkit-transform: translateX(110%);
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
/* Add some "extension" so that there isn't a gap
|
||||
* when we translate(via animation) more than 100% */
|
||||
&:after {
|
||||
content: '';
|
||||
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
|
||||
background-color: @body-bg;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h2 > a {
|
||||
font-size: 20px;
|
||||
}
|
||||
a > h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-left: 32px !important;
|
||||
}
|
||||
> .challenge-block-time {
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-action-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
padding-bottom: 5px;
|
||||
padding-right:10px;
|
||||
padding-top:5px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.drawer-action-item {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
/* main axis */
|
||||
justify-content: center;
|
||||
/* cross axis */
|
||||
align-items: center;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
opacity: 0.65;
|
||||
background: none;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 22px 22px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: hue-rotate(80deg) saturate(150);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-action-pop-out {
|
||||
margin-right: -4px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)
|
||||
}
|
||||
|
||||
.drawer-action-collapse {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
|
||||
}
|
||||
|
||||
.night {
|
||||
.drawer {
|
||||
background-color: @night-body-bg;
|
||||
}
|
||||
.drawer-action-item{
|
||||
filter: brightness(4) saturate(0);
|
||||
-webkit-filter: brightness(4) saturate(0);
|
||||
}
|
||||
}
|
||||
@ -1195,11 +1195,9 @@ and (max-width : 400px) {
|
||||
}
|
||||
|
||||
|
||||
@import "chat.less";
|
||||
@import 'code-mirror.less';
|
||||
@import "code-mirror.less";
|
||||
@import "challenge.less";
|
||||
@import "toastr.less";
|
||||
@import "map.less";
|
||||
@import "drawers.less";
|
||||
@import "sk-wave.less";
|
||||
@import "classic-modal.less";
|
||||
|
||||
@ -224,57 +224,10 @@
|
||||
}
|
||||
|
||||
|
||||
.map-aside-body {
|
||||
.map-fixed-header {
|
||||
p {
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.row.map-buttons {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
button {
|
||||
width: 300px;
|
||||
}
|
||||
.input-group {
|
||||
width: 300px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-buttons:first-of-type {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.map-accordion {
|
||||
top: 160px;
|
||||
h2 {
|
||||
margin: 15px 0;
|
||||
a {
|
||||
padding: 10px 0;
|
||||
padding-left: 50px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
h3 > a {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night {
|
||||
.map-fixed-header {
|
||||
background-color: @night-body-bg;
|
||||
}
|
||||
.map-aside {
|
||||
border-left-color:#222;
|
||||
&-action-item {
|
||||
filter: brightness(2) saturate(0);
|
||||
-webkit-filter: brightness(2) saturate(0);
|
||||
}
|
||||
}
|
||||
#map-filter, .input-group-addon {
|
||||
border-color: #292929;
|
||||
background-color: #666;
|
||||
|
||||
130
client/main.js
130
client/main.js
@ -2,136 +2,6 @@ var main = window.main || {};
|
||||
|
||||
main.ga = window.ga || function() {};
|
||||
|
||||
main = (function(main, global) {
|
||||
const { Mousetrap } = global;
|
||||
|
||||
// should be set before gitter script loads
|
||||
((window.gitter = {}).chat = {}).options = {
|
||||
disableDefaultChat: true
|
||||
};
|
||||
// wait for sidecar to load
|
||||
|
||||
main.chat = {};
|
||||
main.chat.isOpen = false;
|
||||
main.chat.createHelpChat = function createHelpChat() {
|
||||
throw new Error('Sidecar chat has not initialized');
|
||||
};
|
||||
|
||||
document.addEventListener('gitter-sidecar-ready', function(e) {
|
||||
main.chat.GitterChat = e.detail.Chat;
|
||||
|
||||
main.chat.createHelpChat = function(room, helpChatBtnClass, roomTitle) {
|
||||
// room is always in PascalCase
|
||||
roomTitle = room
|
||||
.replace(/([A-Z])/g, ' $1')
|
||||
.replace('Java Script', 'JavaScript');
|
||||
|
||||
$('body').append(
|
||||
'<aside id="chat-embed-help" class="gitter-chat-embed is-collapsed" />'
|
||||
);
|
||||
|
||||
main.chat.helpChat = new main.chat.GitterChat({
|
||||
room: `freecodecamp/${room}`,
|
||||
activationElement: false,
|
||||
targetElement: $('#chat-embed-help')
|
||||
});
|
||||
|
||||
$(helpChatBtnClass).on('click', function() {
|
||||
// is button already pressed?
|
||||
// no? open chat
|
||||
// yes? close chat
|
||||
var shouldChatBeOpen = !$(this).hasClass('active');
|
||||
main.chat.helpChat.toggleChat(shouldChatBeOpen);
|
||||
if (shouldChatBeOpen) {
|
||||
$(helpChatBtnClass).addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
var helpTitleAdd = false;
|
||||
$('#chat-embed-help').on('gitter-chat-toggle', function(e) {
|
||||
var shouldButtonBePressed = !!e.originalEvent.detail.state;
|
||||
|
||||
if (!helpTitleAdd) {
|
||||
helpTitleAdd = true;
|
||||
$('#chat-embed-help > .gitter-chat-embed-action-bar').prepend(
|
||||
'<div class="chat-embed-main-title">' +
|
||||
'<span>' +
|
||||
roomTitle +
|
||||
'</span>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldButtonBePressed) {
|
||||
return $(helpChatBtnClass).addClass('active');
|
||||
}
|
||||
return $(helpChatBtnClass).removeClass('active');
|
||||
});
|
||||
};
|
||||
|
||||
$('body').append(
|
||||
'<aside id="chat-embed-main" class="gitter-chat-embed is-collapsed" />'
|
||||
);
|
||||
|
||||
main.chat.mainChat = new main.chat.GitterChat({
|
||||
room: 'freecodecamp/freecodecamp',
|
||||
activationElement: false,
|
||||
targetElement: $('#chat-embed-main')
|
||||
});
|
||||
|
||||
var mainChatTitleAdded = false;
|
||||
$('#chat-embed-main').on('gitter-chat-toggle', function() {
|
||||
if (mainChatTitleAdded) {
|
||||
return null;
|
||||
}
|
||||
mainChatTitleAdded = true;
|
||||
if ($('body').hasClass('night')) {
|
||||
$('#chat-embed-main').addClass('night');
|
||||
}
|
||||
$('#chat-embed-main > .gitter-chat-embed-action-bar').prepend(
|
||||
'<div class="chat-embed-main-title">' +
|
||||
'<span>Free Code Camp\'s Main Chat</span>' +
|
||||
'</div>'
|
||||
);
|
||||
return null;
|
||||
});
|
||||
|
||||
|
||||
$('#nav-chat-btn').on('click', function(event) {
|
||||
if (!(event.ctrlKey || event.metaKey)) {
|
||||
toggleMainChat();
|
||||
}
|
||||
window.ga('send', 'event', 'Nav', 'clicked', 'Nav chat opened');
|
||||
});
|
||||
|
||||
function showMainChat() {
|
||||
if (!main.chat.isOpen) {
|
||||
main.chat.mainChat.toggleChat(true);
|
||||
}
|
||||
}
|
||||
|
||||
function collapseMainChat() {
|
||||
$('#chat-embed-main').addClass('is-collapsed');
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
function toggleMainChat() {
|
||||
var isCollapsed = $('#chat-embed-main').hasClass('is-collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
showMainChat();
|
||||
} else {
|
||||
collapseMainChat();
|
||||
}
|
||||
}
|
||||
|
||||
// keyboard shortcuts: open main chat
|
||||
Mousetrap.bind('g c', toggleMainChat);
|
||||
});
|
||||
|
||||
return main;
|
||||
}(main, window));
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
const { Observable } = window.Rx;
|
||||
|
||||
@ -1,178 +0,0 @@
|
||||
import { Subject, Observable } from 'rx';
|
||||
import Chat from 'gitter-sidecar';
|
||||
import types from '../../common/app/redux/types';
|
||||
import {
|
||||
openHelpChat,
|
||||
closeHelpChat,
|
||||
toggleMainChat
|
||||
} from '../../common/app/redux/actions';
|
||||
|
||||
export function createHeader(room, title, document) {
|
||||
const type = room === 'freecodecamp' ? 'main' : 'help';
|
||||
const div = document.createElement('div');
|
||||
const span = document.createElement('span');
|
||||
const actionBar = document.querySelector(
|
||||
`#chat-embed-${type}> .gitter-chat-embed-action-bar`
|
||||
);
|
||||
span.appendChild(document.createTextNode(title));
|
||||
div.className = `chat-embed-${type}-title`;
|
||||
div.appendChild(span);
|
||||
actionBar.insertBefore(div, actionBar.firstChild);
|
||||
}
|
||||
|
||||
export function createHelpContainer(document) {
|
||||
const container = document.createElement('aside');
|
||||
container.id = 'chat-embed-help';
|
||||
container.className = 'gitter-chat-embed is-collapsed';
|
||||
document.body.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
export function createMainChat(getState, document) {
|
||||
let mainChatTitleAdded = false;
|
||||
const mainChatContainer = document.createElement('aside');
|
||||
mainChatContainer.id = 'chat-embed-main';
|
||||
mainChatContainer.className = 'gitter-chat-embed is-collapsed';
|
||||
document.body.appendChild(mainChatContainer);
|
||||
const mainChat = new Chat({
|
||||
room: 'freecodecamp/freecodecamp',
|
||||
activationElement: false,
|
||||
targetElement: mainChatContainer
|
||||
});
|
||||
|
||||
const toggle$ = Observable.fromEventPattern(
|
||||
h => mainChatContainer.addEventListener('gitter-chat-toggle', h),
|
||||
h => mainChatContainer.removeEventListener('gitter-chat-toggle', h)
|
||||
)
|
||||
.map(e => {
|
||||
const { isMainChatOpen } = getState().app;
|
||||
if (!mainChatTitleAdded) {
|
||||
mainChatTitleAdded = true;
|
||||
createHeader('freecodecamp', 'Free Code Camp\'s Main Chat', document);
|
||||
}
|
||||
if (isMainChatOpen === e.detail.state) {
|
||||
return null;
|
||||
}
|
||||
return toggleMainChat();
|
||||
});
|
||||
return {
|
||||
mainChat,
|
||||
toggle$
|
||||
};
|
||||
}
|
||||
|
||||
// only one help room may be alive at once
|
||||
export function createHelpChat(room, container, proxy, document) {
|
||||
const title = room.replace(/([A-Z])/g, ' $1');
|
||||
let isTitleAdded = false;
|
||||
const chat = new Chat({
|
||||
room: `freecodecamp/${room}`,
|
||||
activationElement: false,
|
||||
targetElement: container
|
||||
});
|
||||
// return subscription to toggle stream
|
||||
// dispose when rooms switch
|
||||
const subscription = Observable.fromEventPattern(
|
||||
h => container.addEventListener('gitter-chat-toggle', h),
|
||||
h => container.removeEventListener('gitter-chat-toggle', h)
|
||||
)
|
||||
.map(e => {
|
||||
if (!isTitleAdded) {
|
||||
isTitleAdded = true;
|
||||
createHeader(room, title, document);
|
||||
}
|
||||
const gitterState = e.detail.state;
|
||||
return gitterState ? openHelpChat() : closeHelpChat();
|
||||
})
|
||||
// use subject proxy to dispatch actions
|
||||
.subscribe(proxy);
|
||||
return { chat, subscription };
|
||||
}
|
||||
|
||||
export const cache = {};
|
||||
export function toggleHelpChat(isOpen, room, proxy, document) {
|
||||
// check is container is already created
|
||||
if (!cache['container']) {
|
||||
cache['container'] = createHelpContainer(document);
|
||||
}
|
||||
const { container } = cache;
|
||||
if (!cache['chat']) {
|
||||
const {
|
||||
chat,
|
||||
subscription
|
||||
} = createHelpChat(room, container, proxy, document);
|
||||
cache.chat = chat;
|
||||
// make sure we clear out old subscription
|
||||
if (cache.subscription && cache.subscription.dispose) {
|
||||
cache.subscription.dispose();
|
||||
}
|
||||
cache.subscription = subscription;
|
||||
cache.currentRoom = room;
|
||||
}
|
||||
// have we switched rooms?
|
||||
if (!cache.currentRoom === room) {
|
||||
// room has changed, if chat object exist, destroy it
|
||||
// and end subscription to toggle
|
||||
try {
|
||||
cache.chat.destroy();
|
||||
cache.subscription.dispose();
|
||||
// chat and subscription may not exist at first so we catch errors here
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
// create new chat room and cache
|
||||
const {
|
||||
chat,
|
||||
subscription
|
||||
} = createHelpChat(room, container, proxy, document);
|
||||
cache.chat = chat;
|
||||
cache.subscription = subscription;
|
||||
cache.currentRoom = room;
|
||||
}
|
||||
// all goes well pull chat object from cache
|
||||
const { chat } = cache;
|
||||
chat.toggleChat(isOpen);
|
||||
}
|
||||
|
||||
export default function gitterSaga(actions$, getState, { document }) {
|
||||
const helpToggleProxy = new Subject();
|
||||
const {
|
||||
mainChat,
|
||||
toggle$: mainChatToggle$
|
||||
} = createMainChat(getState, document);
|
||||
return Observable.merge(
|
||||
mainChatToggle$,
|
||||
helpToggleProxy,
|
||||
actions$
|
||||
.filter(({ type }) => (
|
||||
type === types.openMainChat ||
|
||||
type === types.closeMainChat ||
|
||||
type === types.toggleMainChat ||
|
||||
type === types.toggleHelpChat
|
||||
))
|
||||
.map(({ type }) => {
|
||||
const state = getState();
|
||||
let shouldBlur = false;
|
||||
if (type === types.toggleHelpChat) {
|
||||
const {
|
||||
app: { isHelpChatOpen },
|
||||
challengesApp: { helpChatRoom }
|
||||
} = state;
|
||||
shouldBlur = !isHelpChatOpen;
|
||||
toggleHelpChat(
|
||||
isHelpChatOpen,
|
||||
helpChatRoom,
|
||||
helpToggleProxy,
|
||||
document
|
||||
);
|
||||
}
|
||||
const { isMainChatOpen } = state.app;
|
||||
mainChat.toggleChat(isMainChatOpen);
|
||||
shouldBlur = !isMainChatOpen;
|
||||
if (!shouldBlur) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
return null;
|
||||
})
|
||||
);
|
||||
}
|
||||
@ -5,7 +5,6 @@ import windowSaga from './window-saga';
|
||||
import executeChallengeSaga from './execute-challenge-saga';
|
||||
import frameSaga from './frame-saga';
|
||||
import codeStorageSaga from './code-storage-saga';
|
||||
import gitterSaga from './gitter-saga';
|
||||
import mouseTrapSaga from './mouse-trap-saga';
|
||||
import analyticsSaga from './analytics-saga';
|
||||
import nightModeSaga from './night-mode-saga';
|
||||
@ -18,7 +17,6 @@ export default [
|
||||
executeChallengeSaga,
|
||||
frameSaga,
|
||||
codeStorageSaga,
|
||||
gitterSaga,
|
||||
mouseTrapSaga,
|
||||
analyticsSaga,
|
||||
nightModeSaga
|
||||
|
||||
@ -3,12 +3,10 @@ import MouseTrap from 'mousetrap';
|
||||
import { push } from 'react-router-redux';
|
||||
import {
|
||||
toggleNightMode,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
hardGoTo
|
||||
} from '../../common/app/redux/actions';
|
||||
|
||||
function bindKey$(key, actionCreator) {
|
||||
function bindKey(key, actionCreator) {
|
||||
return Observable.fromEventPattern(
|
||||
h => MouseTrap.bind(key, h),
|
||||
h => MouseTrap.unbind(key, h)
|
||||
@ -27,18 +25,16 @@ const softRedirects = {
|
||||
export default function mouseTrapSaga(actions$) {
|
||||
const traps$ = [
|
||||
...Object.keys(softRedirects)
|
||||
.map(key => bindKey$(key, () => push(softRedirects[key]))),
|
||||
bindKey$(
|
||||
.map(key => bindKey(key, () => push(softRedirects[key]))),
|
||||
bindKey(
|
||||
'g n r',
|
||||
() => hardGoTo('https://github.com/freecodecamp/freecodecamp')
|
||||
),
|
||||
bindKey$(
|
||||
bindKey(
|
||||
'g n w',
|
||||
() => hardGoTo('http://forum.freecodecamp.com')
|
||||
),
|
||||
bindKey$('g m', toggleMapDrawer),
|
||||
bindKey$('g t n', toggleNightMode),
|
||||
bindKey$('g c', toggleMainChat)
|
||||
bindKey('g t n', toggleNightMode)
|
||||
];
|
||||
return Observable.merge(traps$).takeUntil(actions$.last());
|
||||
}
|
||||
|
||||
@ -3,13 +3,10 @@ import { Button, Row } from 'react-bootstrap';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import MapDrawer from './components/Map-Drawer.jsx';
|
||||
import {
|
||||
fetchUser,
|
||||
initWindowHeight,
|
||||
updateNavHeight,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
updateAppLang,
|
||||
trackEvent,
|
||||
loadCurrentChallenge
|
||||
@ -26,8 +23,6 @@ const mapDispatchToProps = {
|
||||
updateNavHeight,
|
||||
fetchUser,
|
||||
submitChallenge,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
updateAppLang,
|
||||
trackEvent,
|
||||
loadCurrentChallenge
|
||||
@ -37,23 +32,17 @@ const mapStateToProps = createSelector(
|
||||
userSelector,
|
||||
state => state.app.isSignInAttempted,
|
||||
state => state.app.toast,
|
||||
state => state.app.isMapDrawerOpen,
|
||||
state => state.app.isMapAlreadyLoaded,
|
||||
state => state.challengesApp.toast,
|
||||
(
|
||||
{ user: { username, points, picture } },
|
||||
isSignInAttempted,
|
||||
toast,
|
||||
isMapDrawerOpen,
|
||||
isMapAlreadyLoaded,
|
||||
) => ({
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
toast,
|
||||
showLoading: !isSignInAttempted,
|
||||
isMapDrawerOpen,
|
||||
isMapAlreadyLoaded,
|
||||
isSignedIn: !!username
|
||||
})
|
||||
);
|
||||
@ -68,10 +57,6 @@ const propTypes = {
|
||||
updateNavHeight: PropTypes.func,
|
||||
initWindowHeight: PropTypes.func,
|
||||
submitChallenge: PropTypes.func,
|
||||
isMapDrawerOpen: PropTypes.bool,
|
||||
isMapAlreadyLoaded: PropTypes.bool,
|
||||
toggleMapDrawer: PropTypes.func,
|
||||
toggleMainChat: PropTypes.func,
|
||||
fetchUser: PropTypes.func,
|
||||
showLoading: PropTypes.bool,
|
||||
params: PropTypes.object,
|
||||
@ -79,7 +64,6 @@ const propTypes = {
|
||||
trackEvent: PropTypes.func.isRequired,
|
||||
loadCurrentChallenge: PropTypes.func.isRequired
|
||||
};
|
||||
const contextTypes = { router: PropTypes.object };
|
||||
|
||||
// export plain class for testing
|
||||
export class FreeCodeCamp extends React.Component {
|
||||
@ -112,30 +96,19 @@ export class FreeCodeCamp extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { router } = this.context;
|
||||
const {
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
updateNavHeight,
|
||||
isMapDrawerOpen,
|
||||
isMapAlreadyLoaded,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
showLoading,
|
||||
params: { lang },
|
||||
trackEvent,
|
||||
loadCurrentChallenge
|
||||
} = this.props;
|
||||
const navProps = {
|
||||
isOnMap: router.isActive(`/${lang}/map`),
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
updateNavHeight,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
showLoading,
|
||||
trackEvent,
|
||||
loadCurrentChallenge
|
||||
};
|
||||
@ -146,11 +119,6 @@ export class FreeCodeCamp extends React.Component {
|
||||
<Row>
|
||||
{ this.props.children }
|
||||
</Row>
|
||||
<MapDrawer
|
||||
isAlreadyLoaded={ isMapAlreadyLoaded }
|
||||
isOpen={ isMapDrawerOpen }
|
||||
toggleMapDrawer={ toggleMapDrawer }
|
||||
/>
|
||||
<Toasts />
|
||||
</div>
|
||||
);
|
||||
@ -158,7 +126,6 @@ export class FreeCodeCamp extends React.Component {
|
||||
}
|
||||
|
||||
FreeCodeCamp.displayName = 'FreeCodeCamp';
|
||||
FreeCodeCamp.contextTypes = contextTypes;
|
||||
FreeCodeCamp.propTypes = propTypes;
|
||||
|
||||
export default connect(
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
export default class Drawer extends React.Component {
|
||||
static displayName = 'Drawer';
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
isOpen: PropTypes.bool,
|
||||
closeDrawer: PropTypes.func,
|
||||
closeAria: PropTypes.string,
|
||||
newTabLink: PropTypes.string,
|
||||
newTabAria: PropTypes.string
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
isOpen,
|
||||
closeDrawer,
|
||||
closeAria,
|
||||
children,
|
||||
newTabAria,
|
||||
newTabLink
|
||||
} = this.props;
|
||||
const drawerClass = classnames({
|
||||
drawer: true,
|
||||
'is-collapsed': !isOpen
|
||||
});
|
||||
return (
|
||||
<aside className={ drawerClass }>
|
||||
<div className='drawer-action-bar'>
|
||||
<a
|
||||
aria-label={ newTabAria }
|
||||
className='drawer-action-item drawer-action-pop-out'
|
||||
href={ newTabLink }
|
||||
target='_blank'
|
||||
/>
|
||||
<button
|
||||
aria-label={ closeAria }
|
||||
className='drawer-action-item drawer-action-collapse'
|
||||
onClick={ closeDrawer }
|
||||
/>
|
||||
</div>
|
||||
<div className='drawer-content'>
|
||||
{ children }
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Alert } from 'react-bootstrap';
|
||||
|
||||
export default React.createClass({
|
||||
displayName: 'FlashQueue',
|
||||
|
||||
propTypes: {
|
||||
messages: PropTypes.array
|
||||
},
|
||||
|
||||
renderMessages(messages) {
|
||||
return messages.map(() => {
|
||||
return (
|
||||
<Alert />
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
const { messages = [] } = this.props;
|
||||
return (
|
||||
<div>
|
||||
{ this.renderMessages(messages) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,33 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import NoSSR from 'react-no-ssr';
|
||||
|
||||
import Drawer from './Drawer.jsx';
|
||||
import ShowMap from '../routes/challenges/components/map/Map.jsx';
|
||||
|
||||
export default class MapDrawer extends React.Component {
|
||||
static displayName = 'MapDrawer';
|
||||
static propTypes = {
|
||||
isOpen: PropTypes.bool,
|
||||
isAlreadyLoaded: PropTypes.bool,
|
||||
toggleMapDrawer: PropTypes.func
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isOpen, isAlreadyLoaded, toggleMapDrawer } = this.props;
|
||||
return (
|
||||
<Drawer
|
||||
closeAria='close map aside'
|
||||
closeDrawer={ toggleMapDrawer }
|
||||
isOpen={ isOpen }
|
||||
newTabAria='open map in new tab'
|
||||
newTabLink='/map'
|
||||
>
|
||||
<NoSSR>
|
||||
<div>
|
||||
{ isAlreadyLoaded || isOpen ? <ShowMap /> : null }
|
||||
</div>
|
||||
</NoSSR>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,6 @@ import {
|
||||
|
||||
import navLinks from './links.json';
|
||||
import AvatarPointsNavItem from './Avatar-Points-Nav-Item.jsx';
|
||||
import NoPropsPassthrough from '../../utils/No-Props-Passthrough.jsx';
|
||||
|
||||
const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
|
||||
|
||||
@ -34,10 +33,7 @@ const propTypes = {
|
||||
picture: PropTypes.string,
|
||||
signedIn: PropTypes.bool,
|
||||
username: PropTypes.string,
|
||||
isOnMap: PropTypes.bool,
|
||||
updateNavHeight: PropTypes.func,
|
||||
toggleMapDrawer: PropTypes.func,
|
||||
toggleMainChat: PropTypes.func,
|
||||
showLoading: PropTypes.bool,
|
||||
trackEvent: PropTypes.func.isRequired,
|
||||
loadCurrentChallenge: PropTypes.func.isRequired
|
||||
@ -80,59 +76,6 @@ export default class FCCNav extends React.Component {
|
||||
this.props.loadCurrentChallenge();
|
||||
}
|
||||
|
||||
renderMapLink(isOnMap, toggleMapDrawer) {
|
||||
if (isOnMap) {
|
||||
return (
|
||||
<NoPropsPassthrough>
|
||||
<li role='presentation'>
|
||||
<a
|
||||
href='#'
|
||||
onClick={ this.handleMapClickOnMap }
|
||||
>
|
||||
Map
|
||||
</a>
|
||||
</li>
|
||||
</NoPropsPassthrough>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<LinkContainer
|
||||
eventKey={ 1 }
|
||||
to='/map'
|
||||
>
|
||||
<NavItem
|
||||
onClick={ e => {
|
||||
if (!(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
toggleMapDrawer();
|
||||
}
|
||||
}}
|
||||
target='/map'
|
||||
>
|
||||
Map
|
||||
</NavItem>
|
||||
</LinkContainer>
|
||||
);
|
||||
}
|
||||
|
||||
renderChat(toggleMainChat) {
|
||||
return (
|
||||
<NavItem
|
||||
eventKey={ 2 }
|
||||
href='//gitter.im/freecodecamp/freecodecamp'
|
||||
onClick={ e => {
|
||||
if (!(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
toggleMainChat();
|
||||
}
|
||||
}}
|
||||
target='_blank'
|
||||
>
|
||||
Chat
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
|
||||
renderLinks() {
|
||||
return navLinks.map(({ content, link, react, target }, index) => {
|
||||
if (react) {
|
||||
@ -195,9 +138,6 @@ export default class FCCNav extends React.Component {
|
||||
username,
|
||||
points,
|
||||
picture,
|
||||
isOnMap,
|
||||
toggleMapDrawer,
|
||||
toggleMainChat,
|
||||
showLoading
|
||||
} = this.props;
|
||||
|
||||
@ -227,8 +167,6 @@ export default class FCCNav extends React.Component {
|
||||
navbar={ true }
|
||||
pullRight={ true }
|
||||
>
|
||||
{ this.renderMapLink(isOnMap, toggleMapDrawer) }
|
||||
{ this.renderChat(toggleMainChat) }
|
||||
{ this.renderLinks() }
|
||||
{ this.renderSignIn(username, points, picture, showLoading) }
|
||||
</Nav>
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
[{
|
||||
"content": "Map",
|
||||
"link": "/map",
|
||||
"react": true
|
||||
},{
|
||||
"content": "Chat",
|
||||
"link": "https://gitter.im/freecodecamp/home",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "Forum",
|
||||
"link": "http://forum.freecodecamp.com/",
|
||||
"link": "https://forum.freecodecamp.com/",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "About",
|
||||
|
||||
@ -136,63 +136,6 @@ export const doActionOnError = actionCreator => error => Observable.of(
|
||||
actionCreator()
|
||||
);
|
||||
|
||||
|
||||
// drawers
|
||||
export const toggleMapDrawer = createAction(
|
||||
types.toggleMapDrawer,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Nav',
|
||||
action: 'toggled',
|
||||
label: 'Map drawer toggled'
|
||||
})
|
||||
);
|
||||
export const closeMapDrawer = createAction(
|
||||
types.closeMapDrawer,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Nav',
|
||||
action: 'clicked',
|
||||
label: 'Map drawer closed'
|
||||
})
|
||||
);
|
||||
export const toggleMainChat = createAction(
|
||||
types.toggleMainChat,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Nav',
|
||||
action: 'toggled',
|
||||
label: 'Main chat toggled'
|
||||
})
|
||||
);
|
||||
export const toggleHelpChat = createAction(
|
||||
types.toggleHelpChat,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Challenge',
|
||||
action: 'toggled',
|
||||
label: 'help chat toggled'
|
||||
})
|
||||
);
|
||||
export const openHelpChat = createAction(
|
||||
types.openHelpChat,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Challenge',
|
||||
action: 'opened',
|
||||
label: 'help chat opened'
|
||||
})
|
||||
);
|
||||
export const closeHelpChat = createAction(
|
||||
types.closeHelpChat,
|
||||
null,
|
||||
() => createEventMeta({
|
||||
category: 'Challenge',
|
||||
action: 'closed',
|
||||
label: 'help chat closed'
|
||||
})
|
||||
);
|
||||
|
||||
export const toggleNightMode = createAction(
|
||||
types.toggleNightMode,
|
||||
// we use this function to avoid hanging onto the eventObject
|
||||
|
||||
@ -9,8 +9,6 @@ const initialState = {
|
||||
csrfToken: '',
|
||||
windowHeight: 0,
|
||||
navHeight: 0,
|
||||
isMainChatOpen: false,
|
||||
isHelpChatOpen: false,
|
||||
theme: 'default'
|
||||
};
|
||||
|
||||
@ -51,31 +49,6 @@ export default handleActions(
|
||||
...state,
|
||||
navHeight
|
||||
}),
|
||||
[types.toggleMapDrawer]: state => ({
|
||||
...state,
|
||||
isMapAlreadyLoaded: true,
|
||||
isMapDrawerOpen: !state.isMapDrawerOpen
|
||||
}),
|
||||
[types.closeMapDrawer]: state => ({
|
||||
...state,
|
||||
isMapDrawerOpen: false
|
||||
}),
|
||||
[types.toggleMainChat]: state => ({
|
||||
...state,
|
||||
isMainChatOpen: !state.isMainChatOpen
|
||||
}),
|
||||
[types.toggleHelpChat]: state => ({
|
||||
...state,
|
||||
isHelpChatOpen: !state.isHelpChatOpen
|
||||
}),
|
||||
[types.openHelpChat]: state => ({
|
||||
...state,
|
||||
isHelpChatOpen: true
|
||||
}),
|
||||
[types.closeHelpChat]: state => ({
|
||||
...state,
|
||||
isHelpChatOpen: false
|
||||
}),
|
||||
[types.delayedRedirect]: (state, { payload }) => ({
|
||||
...state,
|
||||
delayedRedirect: payload
|
||||
|
||||
@ -30,20 +30,6 @@ export default createTypes([
|
||||
'updateChallengesData',
|
||||
'updateHikesData',
|
||||
|
||||
// drawers
|
||||
'toggleMapDrawer',
|
||||
'closeMapDrawer',
|
||||
'toggleWikiDrawer',
|
||||
|
||||
// chat
|
||||
'openMainChat',
|
||||
'closeMainChat',
|
||||
'toggleMainChat',
|
||||
|
||||
'openHelpChat',
|
||||
'closeHelpChat',
|
||||
'toggleHelpChat',
|
||||
|
||||
// night mode
|
||||
'toggleNightMode',
|
||||
'updateTheme',
|
||||
|
||||
@ -16,13 +16,11 @@ import {
|
||||
unlockUntrustedCode
|
||||
} from '../../redux/actions';
|
||||
import { makeToast } from '../../../../toasts/redux/actions';
|
||||
import { toggleHelpChat } from '../../../../redux/actions';
|
||||
|
||||
const bindableActions = {
|
||||
const mapDispatchToProps = {
|
||||
makeToast,
|
||||
executeChallenge,
|
||||
updateHint,
|
||||
toggleHelpChat,
|
||||
openBugModal,
|
||||
unlockUntrustedCode
|
||||
};
|
||||
@ -34,6 +32,7 @@ const mapStateToProps = createSelector(
|
||||
state => state.challengesApp.output,
|
||||
state => state.challengesApp.hintIndex,
|
||||
state => state.challengesApp.isCodeLocked,
|
||||
state => state.challengesApp.helpChatRoom,
|
||||
(
|
||||
{
|
||||
challenge: {
|
||||
@ -47,7 +46,8 @@ const mapStateToProps = createSelector(
|
||||
tests,
|
||||
output,
|
||||
hintIndex,
|
||||
isCodeLocked
|
||||
isCodeLocked,
|
||||
helpChatRoom
|
||||
) => ({
|
||||
title,
|
||||
description,
|
||||
@ -55,7 +55,8 @@ const mapStateToProps = createSelector(
|
||||
tests,
|
||||
output,
|
||||
hint: hints[hintIndex],
|
||||
isCodeLocked
|
||||
isCodeLocked,
|
||||
helpChatRoom
|
||||
})
|
||||
);
|
||||
|
||||
@ -69,17 +70,18 @@ export class SidePanel extends PureComponent {
|
||||
static propTypes = {
|
||||
description: PropTypes.arrayOf(PropTypes.string),
|
||||
height: PropTypes.number,
|
||||
helpChatRoom: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
isCodeLocked: PropTypes.bool,
|
||||
output: PropTypes.string,
|
||||
tests: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string,
|
||||
output: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
updateHint: PropTypes.func,
|
||||
makeToast: PropTypes.func,
|
||||
toggleHelpChat: PropTypes.func,
|
||||
|
||||
executeChallenge: PropTypes.func,
|
||||
openBugModal: PropTypes.func,
|
||||
makeToast: PropTypes.func,
|
||||
unlockUntrustedCode: PropTypes.func,
|
||||
isCodeLocked: PropTypes.bool,
|
||||
executeChallenge: PropTypes.func
|
||||
updateHint: PropTypes.func
|
||||
};
|
||||
|
||||
renderDescription(description = [ 'Happy Coding!' ], descriptionRegex) {
|
||||
@ -119,7 +121,7 @@ export class SidePanel extends PureComponent {
|
||||
executeChallenge,
|
||||
updateHint,
|
||||
makeToast,
|
||||
toggleHelpChat,
|
||||
helpChatRoom,
|
||||
openBugModal,
|
||||
isCodeLocked,
|
||||
unlockUntrustedCode
|
||||
@ -150,11 +152,11 @@ export class SidePanel extends PureComponent {
|
||||
</div>
|
||||
<ToolPanel
|
||||
executeChallenge={ executeChallenge }
|
||||
helpChatRoom={ helpChatRoom }
|
||||
hint={ hint }
|
||||
isCodeLocked={ isCodeLocked }
|
||||
makeToast={ makeToast }
|
||||
openBugModal={ openBugModal }
|
||||
toggleHelpChat={ toggleHelpChat }
|
||||
unlockUntrustedCode={ unlockUntrustedCode }
|
||||
updateHint={ updateHint }
|
||||
/>
|
||||
@ -168,5 +170,5 @@ export class SidePanel extends PureComponent {
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
bindableActions
|
||||
mapDispatchToProps
|
||||
)(SidePanel);
|
||||
|
||||
@ -9,25 +9,24 @@ const unlockWarning = (
|
||||
</h4>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const propTypes = {
|
||||
executeChallenge: PropTypes.func.isRequired,
|
||||
helpChatRoom: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
isCodeLocked: PropTypes.bool,
|
||||
makeToast: PropTypes.func.isRequired,
|
||||
openBugModal: PropTypes.func.isRequired,
|
||||
unlockUntrustedCode: PropTypes.func.isRequired,
|
||||
updateHint: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default class ToolPanel extends PureComponent {
|
||||
constructor(...props) {
|
||||
super(...props);
|
||||
this.makeHint = this.makeHint.bind(this);
|
||||
this.makeReset = this.makeReset.bind(this);
|
||||
}
|
||||
static displayName = 'ToolPanel';
|
||||
|
||||
static propTypes = {
|
||||
executeChallenge: PropTypes.func.isRequired,
|
||||
updateHint: PropTypes.func.isRequired,
|
||||
hint: PropTypes.string,
|
||||
isCodeLocked: PropTypes.bool,
|
||||
unlockUntrustedCode: PropTypes.func.isRequired,
|
||||
toggleHelpChat: PropTypes.func.isRequired,
|
||||
openBugModal: PropTypes.func.isRequired,
|
||||
makeToast: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
makeHint() {
|
||||
this.props.makeToast({
|
||||
message: this.props.hint,
|
||||
@ -93,10 +92,10 @@ export default class ToolPanel extends PureComponent {
|
||||
|
||||
render() {
|
||||
const {
|
||||
executeChallenge,
|
||||
helpChatRoom,
|
||||
hint,
|
||||
isCodeLocked,
|
||||
executeChallenge,
|
||||
toggleHelpChat,
|
||||
openBugModal,
|
||||
unlockUntrustedCode
|
||||
} = this.props;
|
||||
@ -126,8 +125,9 @@ export default class ToolPanel extends PureComponent {
|
||||
<Button
|
||||
bsSize='large'
|
||||
bsStyle='primary'
|
||||
componentClass='label'
|
||||
onClick={ toggleHelpChat }
|
||||
componentClass='a'
|
||||
href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
|
||||
target='_blank'
|
||||
>
|
||||
Help
|
||||
</Button>
|
||||
@ -145,3 +145,6 @@ export default class ToolPanel extends PureComponent {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ToolPanel.displayName = 'ToolPanel';
|
||||
ToolPanel.propTypes = propTypes;
|
||||
|
||||
@ -9,9 +9,21 @@ import debug from 'debug';
|
||||
import { updateCurrentChallenge } from '../../redux/actions';
|
||||
import { makePanelHiddenSelector } from '../../redux/selectors';
|
||||
import { userSelector } from '../../../../redux/selectors';
|
||||
import { closeMapDrawer } from '../../../../redux/actions';
|
||||
|
||||
const bindableActions = { closeMapDrawer, updateCurrentChallenge };
|
||||
const propTypes = {
|
||||
block: PropTypes.string,
|
||||
challenge: PropTypes.object,
|
||||
dashedName: PropTypes.string,
|
||||
isComingSoon: PropTypes.bool,
|
||||
isCompleted: PropTypes.bool,
|
||||
isDev: PropTypes.bool,
|
||||
isHidden: PropTypes.bool,
|
||||
isLocked: PropTypes.bool,
|
||||
isRequired: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
updateCurrentChallenge: PropTypes.func.isRequired
|
||||
};
|
||||
const mapDispatchToProps = { updateCurrentChallenge };
|
||||
const makeMapStateToProps = () => createSelector(
|
||||
userSelector,
|
||||
(_, props) => props.dashedName,
|
||||
@ -48,24 +60,8 @@ export class Challenge extends PureComponent {
|
||||
super(...args);
|
||||
this.handleChallengeClick = this.handleChallengeClick.bind(this);
|
||||
}
|
||||
static displayName = 'Challenge';
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
dashedName: PropTypes.string,
|
||||
block: PropTypes.string,
|
||||
isLocked: PropTypes.bool,
|
||||
isRequired: PropTypes.bool,
|
||||
isComingSoon: PropTypes.bool,
|
||||
isCompleted: PropTypes.bool,
|
||||
isDev: PropTypes.bool,
|
||||
isHidden: PropTypes.bool,
|
||||
challenge: PropTypes.object,
|
||||
updateCurrentChallenge: PropTypes.func.isRequired,
|
||||
closeMapDrawer: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
handleChallengeClick() {
|
||||
this.props.closeMapDrawer();
|
||||
this.props.updateCurrentChallenge(this.props.challenge);
|
||||
}
|
||||
|
||||
@ -161,4 +157,10 @@ export class Challenge extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(makeMapStateToProps, bindableActions)(Challenge);
|
||||
Challenge.propTypes = propTypes;
|
||||
Challenge.dispalyName = 'Challenge';
|
||||
|
||||
export default connect(
|
||||
makeMapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Challenge);
|
||||
|
||||
@ -15,40 +15,40 @@ import {
|
||||
simpleProject,
|
||||
frontEndProject
|
||||
} from '../../../../utils/challengeTypes';
|
||||
import { toggleHelpChat } from '../../../../redux/actions';
|
||||
|
||||
const bindableActions = {
|
||||
const propTypes = {
|
||||
isSignedIn: PropTypes.bool,
|
||||
isSimple: PropTypes.bool,
|
||||
isFrontEnd: PropTypes.bool,
|
||||
isSubmitting: PropTypes.bool,
|
||||
helpChatRoom: PropTypes.string.isRequired,
|
||||
openBugModal: PropTypes.func.isRequired,
|
||||
submitChallenge: PropTypes.func.isRequired
|
||||
};
|
||||
const mapDispatchToProps = {
|
||||
submitChallenge,
|
||||
toggleHelpChat,
|
||||
openBugModal
|
||||
};
|
||||
const mapStateToProps = createSelector(
|
||||
challengeSelector,
|
||||
state => state.app.isSignedIn,
|
||||
state => state.challengesApp.isSubmitting,
|
||||
state => state.challengesApp.helpChatRoom,
|
||||
(
|
||||
{ challenge: { challengeType = simpleProject } },
|
||||
isSignedIn,
|
||||
isSubmitting
|
||||
isSubmitting,
|
||||
helpChatRoom,
|
||||
) => ({
|
||||
isSignedIn,
|
||||
isSubmitting,
|
||||
helpChatRoom,
|
||||
isSimple: challengeType === simpleProject,
|
||||
isFrontEnd: challengeType === frontEndProject
|
||||
})
|
||||
);
|
||||
|
||||
export class ToolPanel extends PureComponent {
|
||||
static propTypes = {
|
||||
isSignedIn: PropTypes.bool,
|
||||
isSimple: PropTypes.bool,
|
||||
isFrontEnd: PropTypes.bool,
|
||||
isSubmitting: PropTypes.bool,
|
||||
toggleHelpChat: PropTypes.func.isRequired,
|
||||
openBugModal: PropTypes.func.isRequired,
|
||||
submitChallenge: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
renderSubmitButton(isSignedIn, submitChallenge) {
|
||||
const buttonCopy = isSignedIn ?
|
||||
'Submit and go to my next challenge' :
|
||||
@ -71,8 +71,8 @@ export class ToolPanel extends PureComponent {
|
||||
isSimple,
|
||||
isSignedIn,
|
||||
isSubmitting,
|
||||
helpChatRoom,
|
||||
submitChallenge,
|
||||
toggleHelpChat,
|
||||
openBugModal
|
||||
} = this.props;
|
||||
|
||||
@ -89,8 +89,9 @@ export class ToolPanel extends PureComponent {
|
||||
<Button
|
||||
bsStyle='primary'
|
||||
className='btn-primary-ghost btn-big'
|
||||
componentClass='div'
|
||||
onClick={ toggleHelpChat }
|
||||
componentClass='a'
|
||||
href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
|
||||
target='_blank'
|
||||
>
|
||||
Help
|
||||
</Button>
|
||||
@ -108,7 +109,10 @@ export class ToolPanel extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
ToolPanel.propTypes = propTypes;
|
||||
ToolPanel.displayName = 'ToolPanel';
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
bindableActions
|
||||
mapDispatchToProps
|
||||
)(ToolPanel);
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
// scripts should be moved here
|
||||
script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
|
||||
script(src="https://cdn.optimizely.com/js/999692993.js")
|
||||
|
||||
@ -9,12 +9,10 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
|
||||
ul.nav.navbar-nav.navbar-right.hamburger-dropdown
|
||||
li
|
||||
a(href='/map') Map
|
||||
li.hidden-xs
|
||||
a#nav-chat-btn(href='//gitter.im/freecodecamp/freecodecamp' onclick="if (!(event.ctrlKey || event.metaKey)) {return false;}") Chat
|
||||
li.visible-xs
|
||||
a(href="//gitter.im/freecodecamp/freecodecamp" target="_blank") Chat
|
||||
li
|
||||
a(href='http://forum.freecodecamp.com', target='_blank') Forum
|
||||
a(href='https://gitter.im/freecodecamp/home' target='_blank') Chat
|
||||
li
|
||||
a(href='https://forum.freecodecamp.com', target='_blank') Forum
|
||||
li
|
||||
a(href='/about') About
|
||||
li
|
||||
|
||||
Reference in New Issue
Block a user