Hack to display the chat

index.php

@@ -34,5 +34,57 @@
       <?php require_once('src/html/channels.html'); ?>
       <?php require_once('src/html/channel.html'); ?>
     </main>
+
+    <!-- This is a hack : https://git.happy-dev.fr/happy-dev/xmpp-chat-component/issues/24 -->
+    <hd-chat-window
+        id="chat-singleton"
+        data-authentication="anonymous"
+        data-auto-login="true"
+        data-bosh-service-url="https://conversejs.org/http-bind/"
+        data-debug="true"
+        data-jid="nomnom.im"
+        data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
+        data-room-jid="anonymous@conference.nomnom.im">
+    </hd-chat-window>
+    <script>
+      // Store url on load
+      var currentRoute  = getCurrentRoute();
+      console.log(currentRoute);
+      var chatSingleton = document.querySelector("#chat-singleton");
+      var body          = document.querySelector("body");
+
+      function getCurrentRoute() {
+        var pathnameSegments = window.location.pathname.split("/");
+
+        return pathnameSegments[1];
+      }
+
+      // Listen for changes
+      setInterval(function() {
+          if (currentRoute != window.location.href) {
+            currentRoute = getCurrentRoute();
+
+            insertChatIfNeeded();
+          }
+      }, 150);
+
+      // Inserts a chat in the current view if needed
+      function insertChatIfNeeded() {
+        if (["project", "project-chat", "channel", "channel-chat", "member", "member-chat"].indexOf(currentRoute) > -1) {
+          if (currentRoute.indexOf("chat") == -1) {
+            currentRoute += "-chat";
+          }
+          console.log(currentRoute);
+          var currentView = document.querySelector("#" + currentRoute);
+          if (currentView.querySelector("hd-chat-window") == null) {
+            currentView.appendChild(chatSingleton);
+            currentView.style.display = 'block';
+          }
+        }
+        else {
+          body.appendChild(chatSingleton);
+        }
+      }
+    </script>
   </body>
 </html>

src/html/channel.html

@@ -29,6 +29,7 @@
     </ldp-route>
   </ldp-router>
 
+  <div id="channel-chat" class="chat-wrapper"></div>
 
   <div id="channel-detail" style="display: none">
     <ldp-display 

src/html/member.html

@@ -8,16 +8,7 @@
     </ldp-route>
   </ldp-router>
 
-  <hd-chat-window
+  <div id="member-chat" class="chat-wrapper"></div>
-      id="chat-singleton"
-      data-authentication="anonymous"
-      data-auto-login="true"
-      data-bosh-service-url="https://conversejs.org/http-bind/"
-      data-debug="true"
-      data-jid="nomnom.im"
-      data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
-      data-room-jid="anonymous@conference.nomnom.im">
-  </hd-chat-window>
 
   <div id="member-detail" style="display: none">
     <ldp-display 

src/html/project.html

@@ -8,6 +8,7 @@
     </ldp-route>
   </ldp-router>
 
+  <div id="project-chat" class="chat-wrapper"></div>
 
   <div id="project-detail" style="display: none">
     <ldp-display 

src/scss/_mixins.scss

@@ -68,15 +68,3 @@
     display: table;
   }
 }
-
-hd-chat-window {
-  position:       absolute;
-  top:            0px;
-  bottom:         0px;
-  left:           0px;
-  right:          0px;
-  margin:         auto;
-  padding-top:    $menu-height;
-  padding-right:  $vertical-menu-width;
-  display:        block;
-}

src/scss/_styles.scss

@@ -17,3 +17,20 @@ html, body, #mainContainer {
   font-family: 'Righteous', cursive;
   text-decoration-line: underline;
 }
+
+hd-chat-window {
+  position:       absolute;
+  top:            0px;
+  bottom:         0px;
+  left:           0px;
+  right:          0px;
+  margin:         auto;
+  padding-top:    $menu-height;
+  padding-right:  $vertical-menu-width;
+  display:        none;
+}
+.chat-wrapper {
+  hd-chat-window {
+    display:  block;
+  }
+}