Skip to content
This repository has been archived by the owner on Jan 10, 2024. It is now read-only.

Commit

Permalink
feat: Add clean svg ids view (#160)
Browse files Browse the repository at this point in the history 
Fixes #159
  • Loading branch information
@kesara
kesara authored Jun 14, 2023
1 parent 99d3348 commit 7a0f8be
Show file tree
Hide file tree
Showing 3 changed files with 250 additions and 0 deletions.
155 changes: 155 additions & 0 deletions www/clean-svg-ids.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IETF Author Tools - Clean SVG ids</title>
<meta name="description" content="This service fixes SVG id attributes with duplicate values.">
<link rel="canonical" href="https://author-tools.ietf.org/">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="styles/custom.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img alt="IETF Logo" src="https://www.ietf.org/lib/dt/7.39.0/ietf/images/ietflogo-small-transparent.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/iddiff">iddiff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/idnits">idnits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/svgcheck">svgcheck</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/abnf">ABNF Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/doc/">API</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://bib.ietf.org">BibXML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://authors.ietf.org">Internet-Draft Author Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.ietf.org/">IETF</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://datatracker.ietf.org/">Datatracker</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<h1 class="text-center">IETF Author Tools - Clean SVG ids</h1>
</div>
<div class="row" id="alertError">
<div class="alert alert-danger d-flex align-items-center fade show" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div class="error-message" id="messageError">
</div>
</div>
</div>
<div class="row">
<div>
<p>
This services users kramdown-rfc's clean-svg-id tool to fix duplicate values in SVG id attributes. The resulting XML will not have any duplicate SVG ids.
</p>
<label for="formFile" class="form-label">Input file</label>
<input class="form-control form-control-lg" id="formFile" type="file" accept=".xml" required data-bs-toggle="tooltip" data-bs-placement="bottom" title="Select input file. Input file must be an XML file.">
</div>
</div>
<div class="row mt-2">
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
<button class="render-btn action-btn btn btn-primary btn-lg flex-grow-1" type="button" id="buttonClean" value="clean" data-title="Clean" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate a xml2rfc XML file with no duplicate SVG ids.">Clean</button>
</div>
</div>
<div class="row mt-2">
<div class="d-grid gap-2">
<a href="#" class="btn btn-success btn-lg" id="buttonDownload" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Download the output file.">Download</a>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="#" class="btn btn-link" id="buttonOpen" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Open the output file in your web browser.">Open in web browser</a>
</div>
</div>
</div>
<div class="row mt-2">
<div class="accordion" id="accordionValidation">
<div class="accordion-item" id="accordionItemWarnings">
<h2 class="accordion-header" id="panelsWarningsHeading">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsWarnings" aria-expanded="true" aria-controls="panelsWarnings">
Warnings
</button>
</h2>
<div id="panelsWarnings" class="accordion-collapse collapse show" aria-labelledby="panelsWarningsHeading">
<div class="accordion-body">
<ul id="listWarnings"></ul>
</div>
</div>
</div>
<div class="accordion-item" id="accordionItemErrors">
<h2 class="accordion-header" id="panelsErrorsHeading">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsErrors" aria-expanded="true" aria-controls="panelsErrors">
Errors
</button>
</h2>
<div id="panelsErrors" class="accordion-collapse collapse show" aria-labelledby="panelsErrorsHeading">
<div class="accordion-body">
<ul id="listErrors"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="text-center mt-3">
<p><small>
<a href="/about.html">About</a> |
<a href="https://github.com/ietf-tools/ietf-at">Author Tools API (github repository)</a> |
<a href="https://github.com/ietf-tools/ietf-at-ui">Author Tools UI (github repository)</a> |
<a href="https://www.ietf.org/">IETF</a> |
<a href="https://github.com/ietf-tools/ietf-at-ui/blob/main/LICENSE">LICENSE</a> |
<a href="/about.html#howto-report-bugs">Report a bug</a>
</small></p>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<script src="scripts/clean-svg-ids.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.ietf.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</body>
</html>
91 changes: 91 additions & 0 deletions www/scripts/clean-svg-ids.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
const alertError = document.getElementById('alertError');
const buttonDownload = document.getElementById('buttonDownload');
const buttonOpen = document.getElementById('buttonOpen');
const formFile = document.getElementById('formFile');
const messageError = document.getElementById('messageError');
const accordionItemWarnings = document.getElementById('accordionItemWarnings');
const accordionItemErrors = document.getElementById('accordionItemErrors');
const listWarnings = document.getElementById('listWarnings');
const listErrors = document.getElementById('listErrors');
const buttonClean = document.getElementById('buttonClean');

reset();

// enable Bootstrap/Popper tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});

formFile.addEventListener('change', reset);
buttonClean.addEventListener('click', clean);

function reset() {
alertError.style.display = 'none';
buttonDownload.style.display = 'none';
buttonDownload.setAttribute('download', '');
buttonDownload.href = '#';
buttonOpen.style.display = 'none';
buttonOpen.href = '#';
messageError.innerHTML = '';
accordionValidation.style.display = 'none';
accordionItemWarnings.style.display = 'none';
accordionItemErrors.style.display = 'none';
listWarnings.innerHTML = '';
listErrors.innerHTML = '';
resetButtons();
}

function resetButtons() {
buttonClean.disabled = false;
buttonClean.innerText = buttonClean.dataset.title;
}

function disableButtons() {
buttonClean.disabled = true;
}

function clean(event) {
reset();

buttonClean.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>' + buttonClean.innerHTML;
disableButtons();

const formData = new FormData();
const file = formFile.files[0];

formData.append('file', file);

//const apiCall = 'https://author-tools.ietf.org/api2/clean_svg_ids';
const apiCall = 'http://localhost:8888/api/clean_svg_ids';

const request = new Request(apiCall, {
method: 'POST',
body: formData
});

fetch(request)
.then(function(response) { return response.json(); })
.then(function(json) {
resetButtons();
if (json.error) {
alertError.style.display = 'block';
messageError.innerHTML = json.error;
}
if (json.url && json.url.length > 0) {
// file rendering is successful
download_url = json.url + '?download=1'
buttonDownload.style.display = 'block';
buttonDownload.setAttribute('download', download_url);
buttonDownload.href = download_url;
buttonOpen.style.display = 'block';
buttonOpen.setAttribute('href', json.url);
buttonOpen.href = json.url;
}
})
.catch((error) => {
resetButtons();
alertError.style.display = 'block';
messageError.innerHTML = error;
});
}
4 changes: 4 additions & 0 deletions www/sitemap.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
<loc>https://author-tools.ietf.org/svgcheck</loc>
<priority>1.00</priority>
</url>
<url>
<loc>https://author-tools.ietf.org/clean_svg_ids</loc>
<priority>1.00</priority>
</url>
<url>
<loc>https://author-tools.ietf.org/doc/</loc>
<priority>0.90</priority>
Expand Down

0 comments on commit 7a0f8be

Please sign in to comment.