gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3776 from FreeCodeCamp/feature/add-chat-to-challenges

Browse Source 
Add Gitter help chat directly in challenges
This commit is contained in:
Quincy Larson
2015-10-16 16:51:19 -07:00
parent b7ed38fc4d 4589b9ae39
commit ff74690eb6
13 changed files with 205 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/less/chat.less Normal file
View File

@ -0,0 +1,24 @@
.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%);
}

7
client/less/main.less
View File

@ -951,6 +951,11 @@ code {
margin: 0!important;
}
// gitter chat
.gitter-chat-embed {
z-index: 20000 !important;
}
//uncomment this to see the dimensions of all elements outlined in red
//* {
// border-color: red;
@ -1058,3 +1063,5 @@ code {
transform: rotate(0deg);
}
}
@import "chat.less";

102
client/main.js
View File

@ -4,6 +4,105 @@ main.mapShareKey = 'map-shares';
main.ga = window.ga || function() {};
main = (function(main) {
// 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) {
roomTitle = roomTitle || 'Waypoint Help';
$('body').append(
'<aside id="chat-embed-help" class="gitter-chat-embed is-collapsed" />'
);
main.chat.helpChat = new main.chat.GitterChat({
room: 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;
$('#chat-embed-main > .gitter-chat-embed-action-bar').prepend(
'<div class="chat-embed-main-title">' +
'<span>Free Code Camp\'s Main Chat</span>' +
'</div>'
);
});
$('#nav-chat-btn').on('click', function() {
if (!main.chat.isOpen) {
main.chat.mainChat.toggleChat(true);
}
});
});
return main;
}(main));
var lastCompleted = typeof lastCompleted !== 'undefined' ?
lastCompleted :
'';
@ -38,9 +137,10 @@ function setMapShare(id) {
$(document).ready(function() {
var challengeName = typeof challengeName !== 'undefined' ?
challengeName :
'Untitled';
'';
if (challengeName) {
ga('send', 'event', 'Challenge', 'load', challengeName);

3
gulpfile.js
View File

@ -79,6 +79,7 @@ var paths = {
],
less: './client/less/main.less',
lessFiles: './client/less/*.less',
manifest: 'server/manifests/',
@ -392,7 +393,7 @@ var watchDependents = [
];
gulp.task('watch', watchDependents, function() {
gulp.watch(paths.less, ['less']);
gulp.watch(paths.lessFiles, ['less']);
gulp.watch(paths.js, ['js']);
gulp.watch(paths.challenges, ['test-challenges']);
gulp.watch(paths.js, ['js', 'dependents']);

1
server/middlewares/csp.js
View File

@ -55,6 +55,7 @@ export default function csp() {
return helmet.csp({
defaultSrc: trusted,
scriptSrc: [
'https://*.gitter.im',
'*.optimizely.com',
'*.aspnetcdn.com',
'*.d3js.org',

15
server/views/coursewares/showBonfire.jade
View File

@ -52,7 +52,7 @@ block content
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
label.btn.btn-success#challenge-help-btn
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
@ -122,7 +122,14 @@ block content
a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel
include ../partials/challenge-modals
script.
var MDNlinks = !{JSON.stringify(MDNlinks)};
if (!MDNlinks.length) {
$('#MDN-links').addClass('collapse');
document.addEventListener('gitter-sidecar-ready', function(e) {
if (window.main) {
window.main.chat.createHelpChat('freecodecamp/helpbonfires', '#challenge-help-btn', 'Bonfires Help');
}
});
var MDNlinks = !{JSON.stringify(MDNlinks)};
if (!MDNlinks.length) {
$('#MDN-links').addClass('collapse');
}

12
server/views/coursewares/showHTML.jade
View File

@ -38,7 +38,11 @@ block content
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
label.btn.btn-success.hidden-sm.hidden-md.hidden-lg
a(href='//gitter.im/freecodecamp/help')
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success.hidden-xs#challenge-help-btn
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
@ -95,3 +99,9 @@ block content
else
a.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge
include ../partials/challenge-modals
script.
document.addEventListener('gitter-sidecar-ready', function(e) {
if (window.main) {
window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
}
});

13
server/views/coursewares/showJS.jade
View File

@ -43,7 +43,7 @@ block content
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
label.btn.btn-success#challenge-help-btn
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
@ -98,7 +98,12 @@ block content
a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge
include ../partials/challenge-modals
script.
var MDNlinks = !{JSON.stringify(MDNlinks)};
if (!MDNlinks.length) {
$('#MDN-links').addClass('collapse');
var MDNlinks = !{JSON.stringify(MDNlinks)};
if (!MDNlinks.length) {
$('#MDN-links').addClass('collapse');
}
document.addEventListener('gitter-sidecar-ready', function(e) {
if (window.main) {
window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
}
});

16
server/views/coursewares/showVideo.jade
View File

@ -24,7 +24,7 @@ block content
var userLoggedIn = true;
.button-spacer
.btn-group.input-group.btn-group-justified
.btn.btn-success.btn-big#trigger-help-modal
.btn.btn-success.btn-big#challenge-help-btn
i.fa.fa-medkit
| &nbsp; Get help
.btn.btn-success.btn-big#trigger-issue-modal
@ -74,8 +74,14 @@ block content
script.
$('body').bind('keypress', controlEnterHandler);
script.
var challenge_Id = !{JSON.stringify(challengeId)};
var challenge_Name = !{JSON.stringify(name)};
var challengeType = !{JSON.stringify(challengeType)};
var dashedName = !{JSON.stringify(dashedName)};
var challenge_Id = !{JSON.stringify(challengeId)};
var challenge_Name = !{JSON.stringify(name)};
var challengeType = !{JSON.stringify(challengeType)};
var dashedName = !{JSON.stringify(dashedName)};
document.addEventListener('gitter-sidecar-ready', function(e) {
if (window.main) {
window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
}
});
include ../partials/challenge-modals

22
server/views/coursewares/showZiplineOrBasejump.jade
View File

@ -24,7 +24,7 @@ block content
a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
.btn.btn-success.btn-big#trigger-help-modal
.btn.btn-success.btn-big#challenge-help-btn
i.fa.fa-medkit
| &nbsp; Help
.btn.btn-success.btn-big#trigger-issue-modal
@ -96,3 +96,23 @@ block content
script.
$('body').on('keypress', controlEnterHandler);
include ../partials/challenge-modals
script.
document.addEventListener('gitter-sidecar-ready', function(e) {
var challengeType = !{JSON.stringify(challengeType)};
var room = 'freecodecamp/help';
var title;
if (challengeType === '4') {
room = 'freecodecamp/helpBasejumps';
title = 'Basejump Help';
}
if (challengeType === '3') {
room = 'freecodecamp/helpZiplines';
title = 'Zipline Help';
}
if (window.main) {
window.main.chat.createHelpChat(room, '#challenge-help-btn', title);
}
});

14
server/views/partials/challenge-modals.jade
View File

@ -10,20 +10,6 @@
a.btn.btn-lg.btn-primary.btn-block#report-issue(name='_csrf', value=_csrf) Create my GitHub issue
a.btn.btn-lg.btn-info.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel
#help-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeIn.fast-animation
.modal-content
.modal-header.challenge-list-header Need some help?
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body.text-center
h3 Remember to use &thinsp;
a(href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck', target='_blank') Read-Search-Ask
| .
h3 If you've already read the errors and searched Google, you should ask for help.
h3 This will take you to our help room.
a.btn.btn-lg.btn-primary.btn-block.close-modal(href='https://gitter.im/FreeCodeCamp/help', target='_blank') Take me to the help room
a.btn.btn-lg.btn-info.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel
#reset-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeInUp.fast-animation
.modal-content

3
server/views/partials/footer.jade
View File

@ -22,3 +22,6 @@
span.sr-only Free Code Camp on Twitter
a.ion-locked(href="//github.com/FreeCodeCamp/freecodecamp/wiki/Free-Code-Camp's-Privacy-Policy")
span.sr-only Free Code Camp's Privacy Policy
// scripts should be moved here
script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

6
server/views/partials/navbar.jade
View File

@ -11,8 +11,10 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
a.learn-btn(href='#') Learn
li
a(href='/map') Map
li
a(href='//gitter.im/FreeCodeCamp/FreeCodeCamp', target='_blank') Chat
li.hidden-xs
a#nav-chat-btn(href='#' onclick="return false") Chat
li.visible-xs
a(href="//gitter.im/freecodecamp/freecodecamp" target="_blank") Chat
li
a(href='/news', target='_blank') News
li