diff --git a/graph.js b/graph.js index 598b8c7..4fddcad 100644 --- a/graph.js +++ b/graph.js @@ -69,15 +69,15 @@ const BUTTON_ROWS = [ ["forum", "issue tracker", "chat", "email"] ]; -function urlButton(type, url) { +function urlButton(type, url, btnClass) { const button = document.createElement("button"); let iconFile = BUTTON_ICONS[type]; button.type = "button" - button.classList.add('btn', 'btn-sm', 'm-1'); + button.classList.add('btn', 'm-1'); let icon = ``; button.innerHTML = icon + " " + type; if (url !== undefined) { - button.classList.add('btn-info'); + button.classList.add(btnClass); button.onclick = function() { window.open(url, "_blank"); } @@ -92,6 +92,14 @@ function highlightNode(node) { if (node.id() == "simulators") { return; } + // Swap out center/uncenter buttons + const centerButton = document.getElementById("center_button"); + const uncenterButton = document.getElementById("uncenter_button"); + if (centerButton) { + centerButton.classList.add("d-none"); + uncenterButton.classList.remove("d-none"); + } + // Ignore the meta node meta_node.deselect(); meta_node.remove(); @@ -185,7 +193,7 @@ function highlightElement(event) { // Only unhilight node if double tapped on background // Single tap is too error prone if (event.type === "dbltap") { - unhighlightNode(null); + unhighlightNode(null, true); } else { console.log("No-op: single tap on background"); @@ -212,7 +220,15 @@ function highlightElement(event) { } } -function unhighlightNode(event) { +function unhighlightNode(event, unselect) { + // Swap out center/uncenter buttons + const centerButton = document.getElementById("center_button"); + const uncenterButton = document.getElementById("uncenter_button"); + if (centerButton) { + centerButton.classList.remove("d-none"); + uncenterButton.classList.add("d-none"); + } + // Ignore the meta node meta_node.restore(); meta_node_edges.restore(); @@ -245,7 +261,9 @@ function unhighlightNode(event) { }; return_graph_to_init(); - showDetails(null, null); + if (unselect) { + showDetails(null, null); + } } function updateHighlights() { diff --git a/index.html b/index.html index e86e074..4ab7fd3 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@
Highlight simulators
-
+
diff --git a/index.js b/index.js index 36a92ec..b9fcc72 100644 --- a/index.js +++ b/index.js @@ -42,19 +42,26 @@ function showDetails(data, connected) { let description = document.createElement("div"); if (data["features"].includes("simulator")) { const quoted_sim = `[id='${data.id}']`; - description.innerHTML = `
+ description.innerHTML = `

${data["full_name"]}

-
+
+
`; } else { - description.innerHTML = `

${data["full_name"]}

`; + description.innerHTML = `

${data["full_name"]}

`; } description.innerHTML += "

" + data["description"] + "

"; // Relations @@ -103,20 +110,46 @@ function showDetails(data, connected) { link_heading.innerHTML = "Links"; let tool_links = data["urls"]; details_bottom.appendChild(link_heading); + const flex_div = document.createElement("div"); + flex_div.classList.add("d-flex", "flex-wrap"); + const btnClasses = ["btn-primary", "btn-success", "btn-warning"]; for (let row_idx=0; row_idx < BUTTON_ROWS.length; row_idx++) { - let row = document.createElement("div"); - row.classList.add("row"); // Go through elements in BUTTON_ROWS for (const button_type of BUTTON_ROWS[row_idx]) { - let col = document.createElement("div"); - col.classList.add("col-auto"); - let button = urlButton(button_type, tool_links[button_type]); - col.appendChild(button); - row.appendChild(col); + let button = urlButton(button_type, tool_links[button_type], btnClasses[row_idx]); + flex_div.appendChild(button); } - details_bottom.appendChild(row); } + details_bottom.appendChild(flex_div); + + // Back to simulators + back_p = document.createElement("p"); + back_p.classList.add("mt-3"); + back_button = document.createElement("a"); + back_button.href = "#"; + back_button.innerHTML = ` + + +  Back to simulators`; + back_button.classList.add("btn", "btn-secondary"); + back_button.onclick = function() { cy.nodes(`[id = '${data.id}']`).unselect(); cy.nodes("#simulators").select(); unhighlightNode(); }; + back_p.appendChild(back_button); + details_bottom.appendChild(back_p); + // Edit footer + edit_p = document.createElement("p"); + edit_p.classList.add("mt-3", "text-end"); + edit_link = document.createElement("a"); + edit_link.classList.add("link-secondary"); + edit_link.href = `${REPO_URL}/edit/${GIT_BRANCH}/${DATA_FOLDER}/${data["short_name"].replaceAll(" ", "-")}.yaml`; + edit_link.innerHTML = "Edit this description on GitHub "; + edit_link.innerHTML += ` + + `; + edit_link.target = "_blank"; + edit_p.appendChild(edit_link); + details_bottom.appendChild(edit_p); } + // hide filter pane const filterPane = new bootstrap.Offcanvas('#filter_pane'); // FIXME: not quite sure what is going on here, but sometimes the internal state is incorrect