import $ from 'jquery'; export function initRepoGraphGit() { const graphContainer = document.getElementById('git-graph-container'); if (!graphContainer) return; $('#flow-color-monochrome').on('click', () => { $('#flow-color-monochrome').addClass('active'); $('#flow-color-colored').removeClass('active'); $('#git-graph-container').removeClass('colored').addClass('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); } $('.pagination a').each((_, that) => { const href = $(that).attr('href'); if (!href) return; const url = new URL(href, window.location); const params = url.searchParams; params.set('mode', 'monochrome'); url.search = `?${params.toString()}`; $(that).attr('href', url.href); }); }); $('#flow-color-colored').on('click', () => { $('#flow-color-colored').addClass('active'); $('#flow-color-monochrome').removeClass('active'); $('#git-graph-container').addClass('colored').removeClass('monochrome'); $('.pagination a').each((_, that) => { const href = $(that).attr('href'); if (!href) return; const url = new URL(href, window.location); const params = url.searchParams; params.delete('mode'); url.search = `?${params.toString()}`; $(that).attr('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); $('#pagination').empty(); $('#rel-container').addClass('hide'); $('#rev-container').addClass('hide'); $('#loading-indicator').removeClass('hide'); (async () => { const div = $(await $.ajax(String(ajaxUrl))); $('#pagination').html(div.find('#pagination').html()); $('#rel-container').html(div.find('#rel-container').html()); $('#rev-container').html(div.find('#rev-container').html()); $('#loading-indicator').addClass('hide'); $('#rel-container').removeClass('hide'); $('#rev-container').removeClass('hide'); })(); }; 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'); } $('#flow-select-refs-dropdown').dropdown('set selected', dropdownSelected); $('#flow-select-refs-dropdown').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(); }, }); $('#git-graph-container').on('mouseenter', '#rev-list li', (e) => { const flow = $(e.currentTarget).data('flow'); if (flow === 0) return; $(`#flow-${flow}`).addClass('highlight'); $(e.currentTarget).addClass('hover'); $(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); }); $('#git-graph-container').on('mouseleave', '#rev-list li', (e) => { const flow = $(e.currentTarget).data('flow'); if (flow === 0) return; $(`#flow-${flow}`).removeClass('highlight'); $(e.currentTarget).removeClass('hover'); $(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); }); $('#git-graph-container').on('mouseenter', '#rel-container .flow-group', (e) => { $(e.currentTarget).addClass('highlight'); const flow = $(e.currentTarget).data('flow'); $(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); }); $('#git-graph-container').on('mouseleave', '#rel-container .flow-group', (e) => { $(e.currentTarget).removeClass('highlight'); const flow = $(e.currentTarget).data('flow'); $(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); }); $('#git-graph-container').on('mouseenter', '#rel-container .flow-commit', (e) => { const rev = $(e.currentTarget).data('rev'); $(`#rev-list li#commit-${rev}`).addClass('hover'); }); $('#git-graph-container').on('mouseleave', '#rel-container .flow-commit', (e) => { const rev = $(e.currentTarget).data('rev'); $(`#rev-list li#commit-${rev}`).removeClass('hover'); }); }