Add chat to challenges!

client/commonFramework.js

@@ -49,6 +49,14 @@ var common = (function() {
     });
   };
 
+  // this will overwrite if gitter object is already present
+  common.createGitterOptions = function createGitterOptions(room) {
+    ((window.gitter = {}).chat = {}).options = {
+      room: room,
+      activationElement: document.createElement('div')
+    };
+  };
+
   return common;
 })();
 

client/less/main.less

@@ -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;

server/middlewares/csp.js

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

server/views/coursewares/showBonfire.jade

@@ -52,7 +52,7 @@ block content
                     label.btn.btn-success#trigger-reset-modal
                         i.fa.fa-refresh
                             |   Reset
-                    label.btn.btn-success#trigger-help-modal
+                    label.btn.btn-success.js-gitter-toggle-chat-button
                         i.fa.fa-medkit
                             |   Help
                     label.btn.btn-success#trigger-issue-modal
@@ -122,7 +122,13 @@ 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)};
+      // requires common framework
-        if (!MDNlinks.length) {
+      if (window.common) {
-            $('#MDN-links').addClass('collapse');
+        window.common.createGitterOptions('freecodecamp/helpbonfires', 'challenge-help-chat-btn');
-        }
+      }
+
+      var MDNlinks = !{JSON.stringify(MDNlinks)};
+      if (!MDNlinks.length) {
+          $('#MDN-links').addClass('collapse');
+      }
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/coursewares/showHTML.jade

@@ -38,7 +38,7 @@ block content
                         label.btn.btn-success#trigger-reset-modal
                             i.fa.fa-refresh
                                 |   Reset
-                        label.btn.btn-success#trigger-help-modal
+                        label.btn.btn-success.js-gitter-toggle-chat-button
                             i.fa.fa-medkit
                                 |   Help
                         label.btn.btn-success#trigger-issue-modal
@@ -95,3 +95,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.
+      // requires common framework
+      if (window.common) {
+        window.common.createGitterOptions('freecodecamp/help');
+      }
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/coursewares/showJS.jade

@@ -43,7 +43,7 @@ block content
                         label.btn.btn-success#trigger-reset-modal
                             i.fa.fa-refresh
                                 |   Reset
-                        label.btn.btn-success#trigger-help-modal
+                        label.btn.btn-success.js-gitter-toggle-chat-button
                             i.fa.fa-medkit
                                 |   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)};
+      // requires common framework
-        if (!MDNlinks.length) {
+      if (window.common) {
-            $('#MDN-links').addClass('collapse');
+        window.common.createGitterOptions('freecodecamp/help');
-        }
+      }
+      var MDNlinks = !{JSON.stringify(MDNlinks)};
+      if (!MDNlinks.length) {
+          $('#MDN-links').addClass('collapse');
+      }
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/coursewares/showStep.jade

@@ -32,6 +32,7 @@ block content
     script(src=rev('/js', 'commonFramework.js'))
     script.
       var common = window.common || { init: [] };
+      common.createGitterOptions('freecodecamp/help');
       common.challengeId = !{JSON.stringify(challengeId)};
       common.challengeName = !{JSON.stringify(name)};
       common.challengeType = 7;
@@ -40,3 +41,4 @@ block content
       common.isFrontEndCert = !{JSON.stringify(isFrontEndCert || false)};
       common.isFullStackCert = !{JSON.stringify(isFullStackCert || false)};
       common.challengeSeed = !{JSON.stringify(challengeSeed || [])};
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/coursewares/showVideo.jade

@@ -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.js-gitter-toggle-chat-button
                     i.fa.fa-medkit
                         |   Get help
                 .btn.btn-success.btn-big#trigger-issue-modal
@@ -74,8 +74,12 @@ block content
         script.
             $('body').bind('keypress', controlEnterHandler);
     script.
-        var challenge_Id = !{JSON.stringify(challengeId)};
+      var challenge_Id = !{JSON.stringify(challengeId)};
-        var challenge_Name = !{JSON.stringify(name)};
+      var challenge_Name = !{JSON.stringify(name)};
-        var challengeType = !{JSON.stringify(challengeType)};
+      var challengeType = !{JSON.stringify(challengeType)};
-        var dashedName = !{JSON.stringify(dashedName)};
+      var dashedName = !{JSON.stringify(dashedName)};
+      if (window.common) {
+        window.common.createGitterOptions('freecodecamp/help');
+      }
     include ../partials/challenge-modals
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/coursewares/showZiplineOrBasejump.jade

@@ -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.js-gitter-toggle-chat-button
                     i.fa.fa-medkit
                         |   Help
                 .btn.btn-success.btn-big#trigger-issue-modal
@@ -96,3 +96,12 @@ block content
         script.
             $('body').on('keypress', controlEnterHandler);
     include ../partials/challenge-modals
+    script.
+      if (window.common) {
+        window.common.createGitterOptions(
+          !{JSON.stringify(challengeType)} === 3 ?
+            'freecodecamp/helpZiplines' :
+            'freecodecamp/helpBonfires'
+        );
+      }
+    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)

server/views/partials/challenge-modals.jade

@@ -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  
-                    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