91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
document.addEventListener("DOMContentLoaded", async (event) => {
|
|
// Functions to open and close a modal
|
|
function openModal($el) {
|
|
$el.classList.add('is-active');
|
|
}
|
|
|
|
function closeModal($el) {
|
|
$el.classList.remove('is-active');
|
|
}
|
|
|
|
function closeAllModals() {
|
|
(document.querySelectorAll('.modal') || []).forEach(($modal) => {
|
|
closeModal($modal);
|
|
});
|
|
}
|
|
|
|
function hydrateDetailsModal(target) {
|
|
console.log(target);
|
|
let $objid = document.getElementById("modetails-objid");
|
|
let $content = document.getElementById("modetails-content");
|
|
$objid.textContent = target.data("label");
|
|
$content.textContent = target.data("details");
|
|
}
|
|
|
|
// Add a click event on buttons to open a specific modal
|
|
(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
|
|
const modal = $trigger.dataset.target;
|
|
const $target = document.getElementById(modal);
|
|
|
|
$trigger.addEventListener('click', () => {
|
|
openModal($target);
|
|
});
|
|
});
|
|
|
|
// Add a click event on various child elements to close the parent modal
|
|
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-cancel') || []).forEach(($close) => {
|
|
const $target = $close.closest('.modal');
|
|
|
|
$close.addEventListener('click', () => {
|
|
closeModal($target);
|
|
});
|
|
});
|
|
|
|
// Add a keyboard event to close all modals
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === "Escape") {
|
|
closeAllModals();
|
|
}
|
|
});
|
|
|
|
let data = await fetch("/graph.json")
|
|
let elements = data.json();
|
|
let cy = cytoscape({
|
|
container: document.getElementById('cy'),
|
|
elements: elements,
|
|
style: [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'label': 'data(label)',
|
|
'background-color': 'data(color)',
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 2,
|
|
'line-color': '#aaa',
|
|
'target-arrow-shape': 'triangle',
|
|
'target-arrow-color': '#ccc',
|
|
'curve-style': 'bezier'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge[?oauth_scope]',
|
|
style: {
|
|
'target-arrow-shape': 'tee',
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'fcose',
|
|
nodeDimensionsIncludeLabels: true
|
|
}
|
|
});
|
|
cy.on('dbltap', 'node', (evt) => {
|
|
let $target = document.getElementById("modal-details");
|
|
hydrateDetailsModal(evt.target);
|
|
openModal($target);
|
|
});
|
|
});
|