summaryrefslogtreecommitdiffstats
path: root/web_src/js/features/repo-graph.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--web_src/js/features/repo-graph.js155
1 files changed, 155 insertions, 0 deletions
diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js
new file mode 100644
index 0000000..689b6f1
--- /dev/null
+++ b/web_src/js/features/repo-graph.js
@@ -0,0 +1,155 @@
+import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
+import {GET} from '../modules/fetch.js';
+
+export function initRepoGraphGit() {
+ const graphContainer = document.getElementById('git-graph-container');
+ if (!graphContainer) return;
+
+ document.getElementById('flow-color-monochrome')?.addEventListener('click', () => {
+ document.getElementById('flow-color-monochrome').classList.add('active');
+ document.getElementById('flow-color-colored')?.classList.remove('active');
+ graphContainer.classList.remove('colored');
+ graphContainer.classList.add('monochrome');
+ const params = new URLSearchParams(window.location.search);
+ params.set('mode', 'monochrome');
+ const queryString = params.toString();
+ if (queryString) {
+ window.history.replaceState({}, '', `?${queryString}`);
+ } else {
+ window.history.replaceState({}, '', window.location.pathname);
+ }
+ for (const link of document.querySelectorAll('.pagination a')) {
+ const href = link.getAttribute('href');
+ if (!href) continue;
+ const url = new URL(href, window.location);
+ const params = url.searchParams;
+ params.set('mode', 'monochrome');
+ url.search = `?${params.toString()}`;
+ link.setAttribute('href', url.href);
+ }
+ });
+
+ document.getElementById('flow-color-colored')?.addEventListener('click', () => {
+ document.getElementById('flow-color-colored').classList.add('active');
+ document.getElementById('flow-color-monochrome')?.classList.remove('active');
+ graphContainer.classList.add('colored');
+ graphContainer.classList.remove('monochrome');
+ for (const link of document.querySelectorAll('.pagination a')) {
+ const href = link.getAttribute('href');
+ if (!href) continue;
+ const url = new URL(href, window.location);
+ const params = url.searchParams;
+ params.delete('mode');
+ url.search = `?${params.toString()}`;
+ link.setAttribute('href', url.href);
+ }
+ const params = new URLSearchParams(window.location.search);
+ params.delete('mode');
+ const queryString = params.toString();
+ if (queryString) {
+ window.history.replaceState({}, '', `?${queryString}`);
+ } else {
+ window.history.replaceState({}, '', window.location.pathname);
+ }
+ });
+ const url = new URL(window.location);
+ const params = url.searchParams;
+ const updateGraph = () => {
+ const queryString = params.toString();
+ const ajaxUrl = new URL(url);
+ ajaxUrl.searchParams.set('div-only', 'true');
+ window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
+ document.getElementById('pagination').innerHTML = '';
+ hideElem('#rel-container');
+ hideElem('#rev-container');
+ showElem('#loading-indicator');
+ (async () => {
+ const response = await GET(String(ajaxUrl));
+ const html = await response.text();
+ const div = document.createElement('div');
+ div.innerHTML = html;
+ document.getElementById('pagination').innerHTML = div.querySelector('#pagination').innerHTML;
+ document.getElementById('rel-container').innerHTML = div.querySelector('#rel-container').innerHTML;
+ document.getElementById('rev-container').innerHTML = div.querySelector('#rev-container').innerHTML;
+ hideElem('#loading-indicator');
+ showElem('#rel-container');
+ showElem('#rev-container');
+ })();
+ };
+ const dropdownSelected = params.getAll('branch');
+ if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
+ dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
+ }
+
+ const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown');
+ $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
+ $(flowSelectRefsDropdown).dropdown({
+ clearable: true,
+ fullTextSeach: 'exact',
+ onRemove(toRemove) {
+ if (toRemove === '...flow-hide-pr-refs') {
+ params.delete('hide-pr-refs');
+ } else {
+ const branches = params.getAll('branch');
+ params.delete('branch');
+ for (const branch of branches) {
+ if (branch !== toRemove) {
+ params.append('branch', branch);
+ }
+ }
+ }
+ updateGraph();
+ },
+ onAdd(toAdd) {
+ if (toAdd === '...flow-hide-pr-refs') {
+ params.set('hide-pr-refs', true);
+ } else {
+ params.append('branch', toAdd);
+ }
+ updateGraph();
+ },
+ });
+
+ graphContainer.addEventListener('mouseenter', (e) => {
+ if (e.target.matches('#rev-list li')) {
+ const flow = e.target.getAttribute('data-flow');
+ if (flow === '0') return;
+ document.getElementById(`flow-${flow}`)?.classList.add('highlight');
+ e.target.classList.add('hover');
+ for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
+ item.classList.add('highlight');
+ }
+ } else if (e.target.matches('#rel-container .flow-group')) {
+ e.target.classList.add('highlight');
+ const flow = e.target.getAttribute('data-flow');
+ for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
+ item.classList.add('highlight');
+ }
+ } else if (e.target.matches('#rel-container .flow-commit')) {
+ const rev = e.target.getAttribute('data-rev');
+ document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover');
+ }
+ });
+
+ graphContainer.addEventListener('mouseleave', (e) => {
+ if (e.target.matches('#rev-list li')) {
+ const flow = e.target.getAttribute('data-flow');
+ if (flow === '0') return;
+ document.getElementById(`flow-${flow}`)?.classList.remove('highlight');
+ e.target.classList.remove('hover');
+ for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
+ item.classList.remove('highlight');
+ }
+ } else if (e.target.matches('#rel-container .flow-group')) {
+ e.target.classList.remove('highlight');
+ const flow = e.target.getAttribute('data-flow');
+ for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
+ item.classList.remove('highlight');
+ }
+ } else if (e.target.matches('#rel-container .flow-commit')) {
+ const rev = e.target.getAttribute('data-rev');
+ document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover');
+ }
+ });
+}