sugarlabs · walterbender · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/lib/sw.js b/lib/sw.js
@@ -310,6 +310,7 @@ var urlsToCache = [
     'planet/js/ProjectStorage.js',
     'planet/js/ServerInterface.js',
     'planet/js/GlobalPlanet.js',
+    'planet/js/CollaborationSpace.js',
     'planet/js/LocalPlanet.js',
     'planet/js/ProjectViewer.js',
     'planet/js/GlobalTag.js',

diff --git a/planet/index.html b/planet/index.html
@@ -36,6 +36,7 @@
         <script type="text/javascript" src="js/GlobalTag.js"></script>
         <script type="text/javascript" src="js/GlobalCard.js"></script>
         <script type="text/javascript" src="js/ProjectViewer.js"></script>
+        <script type="text/javascript" src="js/CollaborationSpace.js"></script>
         <script type="text/javascript" src="js/GlobalPlanet.js"></script>
 
         <script type="text/javascript" src="js/Planet.js"></script>
@@ -62,9 +63,9 @@
         }   
    </script>
 
-    <body>
+    <body id="planetBody">
         <nav class="nav-extended light-green lighten-1" role="navigation">
-            <div class="nav-wrapper container">
+            <div class="nav-wrapper container" id="planetNavWrapper">
                 <a id="logo-container" class="brand-logo inactiveLink"><i class="material-icons" id="planeticon">public</i></a>
                 <ul class="right"><li><a id="close-planet" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">close</i></a></li></ul>
                 <ul class="right"><li><a id="planet-open-file" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">folder_open</i></a></li></ul>

diff --git a/planet/js/CollaborationSpace.js b/planet/js/CollaborationSpace.js
@@ -0,0 +1,133 @@
+// Copyright (c) 2024 Ajeet Pratap Singh
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the The GNU Affero General Public
+// License as published by the Free Software Foundation; either
+// version 3 of the License, or (at your option) any later version.
+//
+// You should have received a copy of the GNU Affero General Public
+// License along with this library; if not, write to the Free Software
+// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA
+
+// CollaborationSpace
+
+class CollaborationSpace {
+    constructor(Planet) {
+        this.planet = Planet;
+    }
+
+    renderNavbar() {
+
+        // Hide buttons in navbar that will not be used in collaboration
+
+        const globalTab = document.getElementById("global-tab");
+        globalTab.style.display = "none";
+
+        const localTab = document.getElementById("local-tab");
+        localTab.style.display = "none";
+
+        const searchContainer = document.getElementById("searchcontainer-one");
+        searchContainer.style.display = "none";
+
+        const newProjectButton = document.getElementById("planet-new-project");
+        newProjectButton.style.display = "none";
+
+        const openFileButton = document.getElementById("planet-open-file");
+        openFileButton.style.display = "none";
+
+        const closePlanetButton = document.getElementById("close-planet");
+        closePlanetButton.style.display = "none";
+
+        // Add exit button in the navbar
+
+        const planetNav = document.getElementById("planetNavWrapper");
+
+        const exitBtn = document.createElement("ul");
+        exitBtn.id = "exitCollabRoom";
+        exitBtn.classList.add("right");
+        exitBtn.textContent = "Exit";
+        exitBtn.style.cursor = "pointer";
+        exitBtn.style.padding = "3px";
+        exitBtn.href = "#global";
+
+        planetNav.appendChild(exitBtn);
+        exitBtn.addEventListener("click", this.exitSpace);
+
+    }
+
+    renderCommonSpace(){
+
+        // Hide global and local tabs
+        const globalPage = document.getElementById("global");
+        globalPage.style.visibility = "hidden";
+
+        const localPage = document.getElementById("local");
+        localPage.style.visibility = "hidden";
+
+        const planetBody = document.getElementById("planetBody");
+        // Add a note of under construction
+        const note = document.createElement("h5");
+        note.id = "constructionNote";
+        note.textContent = "(Under Construction)";
+        note.style.color = "black";
+        note.style.position = "absolute";
+        note.style.top = "50%";
+        note.style.left = "50%";
+        note.style.transform = "translate(-50%, -50%)";
+
+        planetBody.appendChild(note);
+
+    }
+
+    // Prepare the room by adding/hiding elements
+
+    prepareRoom(){
+        this.renderNavbar();
+        this.renderCommonSpace();
+    }
+
+    // Exit the collaboration space
+    exitSpace(){
+
+        const exitButton = document.getElementById("exitCollabRoom");
+        exitButton.remove();
+
+        const constructionNote = document.getElementById("constructionNote");
+        constructionNote.remove();
+
+        const globalTab = document.getElementById("global-tab");
+        globalTab.style.display = "";
+
+        const localTab = document.getElementById("local-tab");
+        localTab.style.display = "";
+
+        const searchContainer = document.getElementById("searchcontainer-one");
+        searchContainer.style.display = "block";
+
+        const newProjectButton = document.getElementById("planet-new-project");
+        newProjectButton.style.display = "";
+
+        const openFileButton = document.getElementById("planet-open-file");
+        openFileButton.style.display = "";
+
+        const closePlanetButton = document.getElementById("close-planet");
+        closePlanetButton.style.display = "";
+
+
+        const globalPage = document.getElementById("global");
+        globalPage.style.visibility = "visible";
+
+        const localPage = document.getElementById("local");
+        localPage.style.visibility = "visible";
+
+    }
+
+    // Render the room
+    renderRoom(){
+        this.prepareRoom();
+    }
+
+    initiate() {
+        this.renderRoom();
+    }
+}
diff --git a/planet/js/GlobalCard.js b/planet/js/GlobalCard.js
@@ -90,7 +90,10 @@ class GlobalCard {
                                         )}</a> 
                                     </div> 
                                 </div> 
-                            </div> 
+                            </div>
+                            <a class="project-icon tooltipped" data-position="bottom" data-delay="50" data-tooltip="${_(
+                                "Collaborate"
+                            )}" id="global-project-collaborate-{ID}"><i class="material-icons">group</i></a> 
                         </div> 
                     </div> 
 
@@ -160,6 +163,12 @@ class GlobalCard {
             Planet.GlobalPlanet.ProjectViewer.open(this.id);
         });
 
+        // set collaboration starter
+        // eslint-disable-next-line no-unused-vars
+        frag.getElementById(`global-project-collaborate-${this.id}`).addEventListener("click", (evt) => {
+            Planet.GlobalPlanet.CollaborationSpace.initiate();          
+        });
+
         // set merge modify listener
         // eslint-disable-next-line no-unused-vars
         frag.getElementById(`global-project-merge-${this.id}`).addEventListener("click", (evt) => {

diff --git a/planet/js/GlobalPlanet.js b/planet/js/GlobalPlanet.js
@@ -27,7 +27,7 @@ class GlobalPlanet {
     constructor(Planet) {
         this.Planet = Planet ;
         this.ProjectViewer = null;
-
+        this.CollaborationSpace = null;
         this.offlineHTML = `<div class= "container center-align">
                             ${_(`Feature unavailable - cannot connect to server. Reload ${Planet.IsMusicBlocks ? "Music" : "Turtle"} Blocks to try again.`)}
                             </div>`;
@@ -596,6 +596,8 @@ class GlobalPlanet {
 
             this.ProjectViewer = new ProjectViewer(Planet);
             this.ProjectViewer.init();
+            this.CollaborationSpace = new CollaborationSpace(Planet);
+            this.CollaborationSpace.init();
         }
     };