Add main chat window on nav bar chat click

avastu · Oct 16, 2015 · 35219cd · 35219cd
1 parent a018295
commit 35219cd
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 44 deletions.
diff --git a/client/commonFramework.js b/client/commonFramework.js
@@ -49,14 +49,6 @@ 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;
 })();
 

diff --git a/client/main.js b/client/main.js
@@ -4,6 +4,50 @@ main.mapShareKey = 'map-shares';
 
 main.ga = window.ga || function() {};
 
+main = (function(main) {
+
+  ((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) {
+      main.chat.helpChat = new main.chat.GitterChat({
+        room: room,
+        activationElement: document.createElement('div')
+      });
+
+      $(helpChatBtnClass).on('click', function() {
+        main.chat.helpChat.toggleChat(true);
+      });
+    };
+
+    main.chat.mainChat = new main.chat.GitterChat({
+      room: 'freecodecamp/freecodecamp',
+      activationElement: document.createElement('div')
+    });
+
+      $('#nav-chat-btn').on('click', function() {
+        console.log('Create');
+        if (!main.chat.isOpen) {
+
+          main.chat.mainChat.toggleChat(true);
+        }
+      });
+  });
+
+  return main;
+}(main));
+
 var lastCompleted = typeof lastCompleted !== 'undefined' ?
   lastCompleted :
   '';
@@ -38,9 +82,10 @@ function setMapShare(id) {
 
 $(document).ready(function() {
 
+
   var challengeName = typeof challengeName !== 'undefined' ?
     challengeName :
-    'Untitled';
+    '';
 
   if (challengeName) {
     ga('send', 'event',  'Challenge', 'load', challengeName);

diff --git a/server/views/coursewares/showBonfire.jade b/server/views/coursewares/showBonfire.jade
@@ -52,7 +52,7 @@ block content
                     label.btn.btn-success#trigger-reset-modal
                         i.fa.fa-refresh
                             | &nbsp; Reset
-                    label.btn.btn-success.js-gitter-toggle-chat-button
+                    label.btn.btn-success#challenge-help-btn
                         i.fa.fa-medkit
                             | &nbsp; Help
                     label.btn.btn-success#trigger-issue-modal
@@ -122,13 +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.
-      // requires common framework
-      if (window.common) {
-        window.common.createGitterOptions('freecodecamp/helpbonfires', 'challenge-help-chat-btn');
-      }
+
+      document.addEventListener('gitter-sidecar-ready', function(e) {
+        if (window.main) {
+          window.main.chat.createHelpChat('freecodecamp/helpbonfires', '#challenge-help-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)
diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade
@@ -38,7 +38,7 @@ block content
                         label.btn.btn-success#trigger-reset-modal
                             i.fa.fa-refresh
                                 | &nbsp; Reset
-                        label.btn.btn-success.js-gitter-toggle-chat-button
+                        label.btn.btn-success#challenge-help-btn
                             i.fa.fa-medkit
                                 | &nbsp; Help
                         label.btn.btn-success#trigger-issue-modal
@@ -96,8 +96,8 @@ block content
                                 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)
+      document.addEventListener('gitter-sidecar-ready', function(e) {
+        if (window.main) {
+          window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
+        }
+      });
diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade
@@ -43,7 +43,7 @@ block content
                         label.btn.btn-success#trigger-reset-modal
                             i.fa.fa-refresh
                                 | &nbsp; Reset
-                        label.btn.btn-success.js-gitter-toggle-chat-button
+                        label.btn.btn-success#challenge-help-btn
                             i.fa.fa-medkit
                                 | &nbsp; Help
                         label.btn.btn-success#trigger-issue-modal
@@ -98,12 +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.
-      // requires common framework
-      if (window.common) {
-        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)
+      document.addEventListener('gitter-sidecar-ready', function(e) {
+        if (window.main) {
+          window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
+        }
+      });
diff --git a/server/views/coursewares/showStep.jade b/server/views/coursewares/showStep.jade
@@ -32,7 +32,6 @@ 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;
@@ -41,4 +40,3 @@ 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)
diff --git a/server/views/coursewares/showVideo.jade b/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.js-gitter-toggle-chat-button
+                .btn.btn-success.btn-big#challenge-help-btn
                     i.fa.fa-medkit
                         | &nbsp; Get help
                 .btn.btn-success.btn-big#trigger-issue-modal
@@ -78,8 +78,10 @@ block content
       var challenge_Name = !{JSON.stringify(name)};
       var challengeType = !{JSON.stringify(challengeType)};
       var dashedName = !{JSON.stringify(dashedName)};
-      if (window.common) {
-        window.common.createGitterOptions('freecodecamp/help');
-      }
+      document.addEventListener('gitter-sidecar-ready', function(e) {
+        if (window.main) {
+          window.main.chat.createHelpChat('freecodecamp/help', '#challenge-help-btn');
+        }
+      });
     include ../partials/challenge-modals
-    script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+
diff --git a/server/views/coursewares/showZiplineOrBasejump.jade b/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.js-gitter-toggle-chat-button
+                .btn.btn-success.btn-big#challenge-help-btn
                     i.fa.fa-medkit
                         | &nbsp; Help
                 .btn.btn-success.btn-big#trigger-issue-modal
@@ -97,11 +97,13 @@ block content
             $('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)
+      document.addEventListener('gitter-sidecar-ready', function(e) {
+        if (window.main) {
+          window.main.chat.createHelpChat(
+            !{JSON.stringify(challengeType)} === 3 ?
+              'freecodecamp/helpZiplines' :
+              'freecodecamp/helpBonfires',
+            '#challenge-help-btn'
+          );
+        }
+      });
diff --git a/server/views/partials/footer.jade b/server/views/partials/footer.jade
@@ -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)
diff --git a/server/views/partials/navbar.jade b/server/views/partials/navbar.jade
@@ -12,7 +12,7 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
             li
                 a(href='/map') Map
             li
-                a(href='//gitter.im/FreeCodeCamp/FreeCodeCamp', target='_blank') Chat
+                a#nav-chat-btn(href='#' onclick="return false") Chat
             li
                 a(href='/news', target='_blank') News
             li