separated js from html (WIP)

web/js/manifestStorage.js

@@ -178,38 +178,29 @@ async function fetchManifestDetails(uri) {
     // Toggle the dropdown visibility and render cards
 
     export function toggleDropdown() {
-        const manifestContainer = document.getElementById('stored_manifest_links');
-        const dropdownArrow = document.getElementById('dropdownArrow');
-
-        if (!manifestContainer || !dropdownArrow) {
-            console.error("Required elements not found");
-            return;
-        }
+        try {
+            console.log("toggleDropdown called"); // Debug log
+            const manifestContainer = document.getElementById('stored_manifest_links');
+            const dropdownArrow = document.getElementById('dropdownArrow');
 
-        if (manifestContainer.style.display === 'none' || manifestContainer.style.display === '') {
-            manifestContainer.style.display = 'block';
-            dropdownArrow.textContent = '▲';
-            renderManifestCards(); // This calls the render function when opening the dropdown
-        } else {
-            manifestContainer.style.display = 'none';
-            dropdownArrow.textContent = '▼';
+            if (!manifestContainer || !dropdownArrow) {
+                console.error("Required elements not found");
+                return;
+            }
+
+            if (manifestContainer.style.display === 'none' || manifestContainer.style.display === '') {
+                manifestContainer.style.display = 'block';
+                dropdownArrow.textContent = '▲';
+                renderManifestCards().catch(err => console.error('Error rendering cards:', err));
+            } else {
+                manifestContainer.style.display = 'none';
+                dropdownArrow.textContent = '▼';
+            }
+        } catch (error) {
+            console.error("Error in toggleDropdown:", error);
         }
     }
 
-
-    //Initialize event listeners when the module loads
-    document.addEventListener('DOMContentLoaded', () => {
-        const dropdownLabel = document.getElementById('dropdownLabel');
-        const dropdownArrow = document.getElementById('dropdownArrow')
-
-        if (dropdownLabel) {
-            dropdownLabel.addEventListener('click', toggleDropdown);
-        }
-        if (dropdownArrow) {
-            dropdownArrow.addEventListener('click', toggleDropdown);
-        }
-    });
-
     export async function loadManifest(url) {
         const manifestMessage = document.getElementById('manifestMessage');
         const loadMessage = document.getElementById('loadMessage');
@@ -249,4 +240,28 @@ async function fetchManifestDetails(uri) {
             manifestMessage.style.color = "red";
             console.error('Error:', error);
         }
-    } 
+    }
+
+    export function initializeManifestHandlers() {
+        // Handle manifest loading button
+        const loadManifestBtn = document.getElementById('loadManifest');
+        const manifestUrl = document.getElementById('manifestUrl');
+        if (loadManifestBtn) {
+            loadManifestBtn.textContent = 'Upload';
+            loadManifestBtn.addEventListener('click', () => {
+                if (manifestUrl) {
+                    loadManifest(manifestUrl.value.trim());
+                }
+            });
+        }
+
+        // Handle dropdown toggling
+        const dropdownLabel = document.getElementById('dropdownLabel');
+        const dropdownArrow = document.getElementById('dropdownArrow');
+        if (dropdownLabel) dropdownLabel.addEventListener('click', toggleDropdown);
+        if (dropdownArrow) dropdownArrow.addEventListener('click', toggleDropdown);
+    } 
+
+window.loadManifest = loadManifest;
+window.toggleDropdown = toggleDropdown;
+window.renderManifestCards = renderManifestCards;

web/js/menu.js

@@ -0,0 +1,30 @@
+export function openCloseMenu() {
+    const toolBar = document.getElementById("toolBar");
+    const mainContent = document.querySelector(".content") || 
+                       document.querySelector(".container") || 
+                       document.querySelector("#tool_set");
+
+    toolBar?.classList.toggle("sidebar-open");
+    mainContent?.classList.toggle("shift");
+}
+
+window.openCloseMenu = openCloseMenu;
+
+// Initialize menu and footer
+export function initializeLayout() {
+    Promise.all([
+        fetch('footer.html')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('footer-placeholder').innerHTML = data;
+            }),
+        fetch('menu.html')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('menu-placeholder').innerHTML = data;
+            })
+    ]).catch(error => console.error('Error loading layout:', error));
+}
+
+// Initialize when DOM loads
+document.addEventListener('DOMContentLoaded', initializeLayout);

web/js/playground.js

@@ -1,33 +1,132 @@
-/* 
- * App specific functions.  This is for unique functionality and application initialization.  
- */
-
-// Playground scripting utilities.  Will be available as github CDN.
-
-//fetch footer
-fetch('footer.html')
-    .then(response => response.text())
-    .then(data => {
-        document.getElementById('footer-placeholder').innerHTML = data;
-    })
-    .catch(error => console.error('Error loading footer:', error));
-
-//fetch menu
-fetch('menu.html')
-    .then(response => response.text())
-    .then(data => {
-        document.getElementById('menu-placeholder').innerHTML = data;
-    })
-    .catch(error => console.error('Error loading menu:', error));
-
-//menubar js 
-function openCloseMenu() {
-    var toolBar = document.getElementById("toolBar");
-    var mainContent = document.querySelector(".content") || document.querySelector(".container") || document.querySelector("#tool_set");
-    toolBar.classList.toggle("sidebar-open");
-    if (mainContent) {
-        mainContent.classList.toggle("shift");
+import { toggleDropdown, loadManifest, renderManifestCards, initializeManifestHandlers } from './manifestStorage.js';
+import { default as UTILS } from 'https://centerfordigitalhumanities.github.io/rerum-playground/web/js/utilities.js';
+import PLAYGROUND from './config.js';
+import ToolsCatalog from './toolsCatalog.js';
+
+window.loadManifest = loadManifest;
+window.toggleDropdown = toggleDropdown;
+window.renderManifestCards = renderManifestCards;
+
+const RECENTLY_USED_KEY = 'recentlyUsedTools';
+
+function getRecentlyUsedTools() {
+    const recentTools = localStorage.getItem(RECENTLY_USED_KEY);
+    return recentTools ? JSON.parse(recentTools) : [];
+}
+
+function saveRecentlyUsedTools(recentTools) {
+    localStorage.setItem(RECENTLY_USED_KEY, JSON.stringify(recentTools));
+}
+
+function updateRecentlyUsedTools(clickedTool) {
+    let recentTools = getRecentlyUsedTools();
+    recentTools = recentTools.filter(tool => tool.label.toLowerCase() !== clickedTool.label.toLowerCase());
+    recentTools.unshift(clickedTool);
+    const topThreeTools = recentTools.slice(0, 3);
+    saveRecentlyUsedTools(topThreeTools);
+}
+
+function initializeInterfaces() {
+    return new Promise((res) => {
+        let setContainer = document.getElementById(PLAYGROUND.INTERFACES.id);
+        if (setContainer) {
+            Array.from(PLAYGROUND.INTERFACES.catalog).forEach(inter => {
+                setContainer.innerHTML += UTILS.thumbnailGenerator(inter);
+            });
+            UTILS.broadcast(undefined, PLAYGROUND.EVENTS.LOADED, setContainer, {});
+        }
+        setTimeout(res, 200);
+    });
+}
+
+function initializeTechnologies() {
+    return new Promise((res) => {
+        let setContainer = document.getElementById(PLAYGROUND.TECHNOLOGIES.id);
+        if (setContainer) {
+            Array.from(PLAYGROUND.TECHNOLOGIES.catalog).forEach(tech => {
+                setContainer.innerHTML += UTILS.thumbnailGenerator(tech);
+            });
+            UTILS.broadcast(undefined, PLAYGROUND.EVENTS.LOADED, setContainer, {});
+        }
+        setTimeout(res, 200);
+    });
+}
+
+function renderTools() {
+    const toolSetContainer = document.getElementById('tool_set');
+    if (!toolSetContainer) {
+        console.error("Tool set container not found.");
+        return;
+    }
+
+    toolSetContainer.innerHTML = '';
+    const recentTools = getRecentlyUsedTools();
+    const hasRecentlyUsedTools = recentTools.length > 0;
+    const recentlyUsedLabels = recentTools.map(tool => tool.label.toLowerCase());
+    const recentToolsSet = new Set(recentlyUsedLabels);
+
+    const sortedTools = [
+        ...ToolsCatalog.filter(tool => recentToolsSet.has(tool.label.toLowerCase())),
+        ...ToolsCatalog.filter(tool => !recentToolsSet.has(tool.label.toLowerCase()))
+    ];
+
+    const toolsWrapper = document.createElement('div');
+    sortedTools.forEach((tool, index) => {
+        const isRecentlyUsed = hasRecentlyUsedTools && index < 3 && recentToolsSet.has(tool.label.toLowerCase());
+        toolsWrapper.innerHTML += UTILS.thumbnailGenerator(tool, isRecentlyUsed);
+    });
+
+    toolSetContainer.appendChild(toolsWrapper);
+    addToolClickHandlers();
+}
+
+function addToolClickHandlers() {
+    const toolLinks = document.querySelectorAll('a.catalogEntry');
+    toolLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const toolLabel = this.querySelector('label').innerText;
+            handleToolClick(toolLabel);
+        });
+    });
+}
+
+function handleToolClick(toolLabel) {
+    const clickedTool = ToolsCatalog.find(tool => tool.label === toolLabel);
+    if (clickedTool) {
+        updateRecentlyUsedTools(clickedTool);
+        renderTools();
+        setTimeout(() => window.open(clickedTool.view, '_blank'), 100);
+    }
+}
+
+function initializeApp() {
+    try {
+        // Initialize manifest handlers
+        initializeManifestHandlers();
+
+        // Initialize tools display
+        renderTools();
+
+        // Initial manifest cards render
+        const manifestContainer = document.getElementById('stored_manifest_links');
+        if (manifestContainer?.style.display !== 'none') {
+            renderManifestCards().catch(err => console.error('Error rendering cards:', err));
+        }
+
+        // Add click handler for dropdown
+        const dropdownLabel = document.getElementById('dropdownLabel');
+        const dropdownArrow = document.getElementById('dropdownArrow');
+
+        if (dropdownLabel) {
+            dropdownLabel.addEventListener('click', () => toggleDropdown());
+        }
+        if (dropdownArrow) {
+            dropdownArrow.addEventListener('click', () => toggleDropdown());
+        }
+    } catch (err) {
+        console.error("Error initializing app:", err);
     }
 }
 
-window.openCloseMenu = openCloseMenu;
+document.addEventListener('DOMContentLoaded', initializeApp);

web/tools.html

@@ -44,6 +44,14 @@
                 content: "\f1b3";
             }
         </style>
+
+        <script type="module">
+            import { loadManifest, toggleDropdown } from './js/manifestStorage.js';
+            window.loadManifest = loadManifest;
+            window.toggleDropdown = toggleDropdown;
+        </script>
+        <script src="./js/playground.js" type="module"></script>
+        <script src="./js/menu.js" type="module"></script>
     </head>
 
     <body>
@@ -54,7 +62,7 @@
             <a href="#">Contact</a>
             <a href="tools.html">Tools</a>
         </div>
-
+        <div id="menu-placeholder"></div>
         <header>
             <div class="header">
                 <div class="row">
@@ -84,14 +92,14 @@ <h2>Tools Available in Rerum Playground</h2>
             <h5>Load Manifest</h5>
             <div class="input-group">
                 <input type="text" id="manifestUrl" placeholder="Enter manifest URL">
-                <button id="loadManifest" class="button">Next</button>
+                <button id="loadManifest" class="button" onclick="loadManifest(document.getElementById('manifestUrl').value)">Upload</button>
             </div>
             <div id="manifestMessage"></div>
         </div>
 
         <div class="dropdown">
-            <label id="dropdownLabel" class="dropdown-label">Recently Used Links</label>
-            <span id="dropdownArrow" class="dropdown-arrow">▼</span>
+            <label id="dropdownLabel" class="dropdown-label" onclick="window.toggleDropdown()">Recently Used Links</label>
+            <span id="dropdownArrow" class="dropdown-arrow" onclick="window.toggleDropdown()">▼</span>
             <div id="stored_manifest_links" class="dropdown-content" style="display: none;">
                 <!-- Stored manifests links will appear here -->
             </div>
@@ -102,24 +110,6 @@ <h4>Tools</h4>
         </div>
 
         <div id="footer-placeholder"></div>
-
-        <script src="./js/playground.js" type="module"></script>
-
-        <script>
-            function openCloseMenu() {
-                var toolBar = document.getElementById("toolBar");
-                var mainContent = document.querySelector(".content") || document.querySelector(".container") || document.querySelector("#tool_set");
-                toolBar.classList.toggle("sidebar-open");
-                if (mainContent) {
-                    mainContent.classList.toggle("shift");
-                }
-            }
-            fetch('footer.html')
-            .then(response => response.text())
-            .then(data => {
-                document.getElementById('footer-placeholder').innerHTML = data;
-            })
-            .catch(error => console.error('Error loading footer:', error));
-        </script>
+
     </body>
 </html>