Add identifiers to chat embed divs

client/less/chat.less

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

client/less/main.less

@@ -1063,3 +1063,5 @@ code {
     transform: rotate(0deg);
   }
 }
+
+@import "chat.less";

client/main.js

@@ -21,9 +21,15 @@ main = (function(main) {
     main.chat.GitterChat = e.detail.Chat;
 
     main.chat.createHelpChat = function(room, helpChatBtnClass) {
+
+      $('body').append(
+        '<aside id="chat-embed-help" class="gitter-chat-embed is-collapsed" />'
+      );
+
       main.chat.helpChat = new main.chat.GitterChat({
         room: room,
-        activationElement: document.createElement('div')
+        activationElement: false,
+        targetElement: $('#chat-embed-help')
       });
 
       $(helpChatBtnClass).on('click', function() {
@@ -31,18 +37,22 @@ main = (function(main) {
       });
     };
 
+    $('body').append(
+      '<aside id="chat-embed-main" class="gitter-chat-embed is-collapsed" />'
+    );
+
     main.chat.mainChat = new main.chat.GitterChat({
       room: 'freecodecamp/freecodecamp',
-      activationElement: document.createElement('div')
+      activationElement: false,
+      targetElement: $('#chat-embed-main')
     });
 
-      $('#nav-chat-btn').on('click', function() {
-        console.log('Create');
-        if (!main.chat.isOpen) {
+    $('#nav-chat-btn').on('click', function() {
+      if (!main.chat.isOpen) {
 
-          main.chat.mainChat.toggleChat(true);
-        }
-      });
+        main.chat.mainChat.toggleChat(true);
+      }
+    });
   });
 
   return main;

gulpfile.js

@@ -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']);