Initial commit of version 1
This commit is contained in:
sloum
commit
ff3f3be017
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--
|
||||
Copyright © 2021 sloum <sloum AT THE HOST rawtext.club>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this
|
||||
software and associated documentation files (the “Software”), to deal in the Software
|
||||
without restriction, including without limitation the rights to use, copy, modify,
|
||||
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies
|
||||
or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
|
||||
OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>a11y attribute helper</title>
|
||||
<style>
|
||||
.row-element {
|
||||
width: 45%;
|
||||
max-width: 500px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.row-element.left {
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 90%;
|
||||
font-family: monospace;
|
||||
height: 20ch;
|
||||
}
|
||||
|
||||
table, ol {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: skyblue;
|
||||
color: black;
|
||||
}
|
||||
|
||||
th[scope=row] {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.row-element {
|
||||
display: block;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.row-element.left {
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>a11y attribute helper</h1>
|
||||
<div class="row-element left">
|
||||
<h2>Instructions</h2>
|
||||
<ol>
|
||||
<li>Input your html into the <i>HTML Input</i> text box and press <i>Parse Input</i></li>
|
||||
<li>A new form will appear below the <i>HTML Input</i> form. This form will list the attributes that were found in the html input and will provide three radio buttons per attribute: ellipse, initial, and unset. <i>ellipse</i> will convert the attribute's value to: "...". <i>initial</i> will leave the attribute's value as is. <i>unset</i> will remove to the attribute from any element it is found on</li>
|
||||
<li>Once you have made your selections for how to process the html, click <i>Get output</i>. The filtering form will disappear</li>
|
||||
<li>The output will be rendered in the text box labeled <i>HTML Output</i></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="row-element">
|
||||
<div class="container">
|
||||
<form id="input">
|
||||
<label for="inputfield">HTML Input</label>
|
||||
<textarea id="inputfield"></textarea>
|
||||
<input type="submit" id="inputsubmit" value="Parse Input" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="container" id="form2container"></div>
|
||||
<div class="container">
|
||||
<label for="output">HTML Output
|
||||
<textarea id="output"></textarea>
|
||||
<button id="copy">Copy output to clipboard</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<hr>
|
||||
<p>This accessibility helper was designed by and is © 2021 <a href="https://sloum.colorfield.space" target="_blank">sloum</a>.</p>
|
||||
<p>It is available under the terms of the <a href="https://mit-license.org/" target="_blank">MIT License</a>, a copy of which appears in the source code for your convenience. In short: use it, share it, change it, don't hold the creator responsible if it causes you some kind of problem.</p>
|
||||
</footer>
|
||||
<script>
|
||||
var init = (function() {
|
||||
var nodes;
|
||||
var inputField = document.getElementById('inputfield');
|
||||
var inputForm = document.getElementById('input');
|
||||
var copyButton = document.getElementById('copy');
|
||||
var outputField = document.getElementById('output');
|
||||
var form2container = document.getElementById('form2container');
|
||||
var atts = {}
|
||||
|
||||
var copyOutput = function() {
|
||||
outputField.focus();
|
||||
outputField.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
} catch(err) {
|
||||
console.warn("Unable to copy text: " + err);
|
||||
}
|
||||
}
|
||||
|
||||
var processInput = function(e) {
|
||||
e.preventDefault();
|
||||
var text = inputField.value;
|
||||
if (!text) return;
|
||||
|
||||
var parser = new DOMParser();
|
||||
nodes = parser.parseFromString(text, "text/html").body;
|
||||
buildForm2();
|
||||
};
|
||||
|
||||
var buildForm2 = function() {
|
||||
var all = nodes.querySelectorAll('*');
|
||||
all.forEach((item) => {
|
||||
for (att in item.attributes) {
|
||||
if (item.attributes[att].specified) {
|
||||
if (!atts[item.attributes[att].name]) {
|
||||
atts[item.attributes[att].name] = [];
|
||||
}
|
||||
atts[item.attributes[att].name].push(item)
|
||||
}
|
||||
}
|
||||
});
|
||||
var form2 = document.createElement('form');
|
||||
form2.id = "form2";
|
||||
var inner = '<table><thead><tr><td></td><th scope="col">Ellipses</th><th scope="col">Initial</th><th scope="col">Unset</th></thead><tbody>';
|
||||
var template = '<tr id="tr-$$"><th scope="row">$$</th><td><input type="radio" name="radio-$$" value="e" checked></td><td><input type="radio" name="radio-$$" value="i"></td><td><input type="radio" name="radio-$$" value="u"></td></tr>';
|
||||
for (key in atts) {
|
||||
var a = template;
|
||||
inner += a.replaceAll('$$', key);
|
||||
}
|
||||
inner += '</tbody></table><input type="submit" value="Get Output">';
|
||||
form2.innerHTML = inner;
|
||||
form2container.innerHTML = "";
|
||||
form2container.appendChild(form2);
|
||||
form2.addEventListener('submit', filterAttributes);
|
||||
}
|
||||
|
||||
var filterAttributes = function(e) {
|
||||
e.preventDefault();
|
||||
for (att in atts) {
|
||||
var selector = "radio-" + att;
|
||||
var value = document.querySelector('input[name="' + selector + '"]:checked').value;
|
||||
switch (value) {
|
||||
case 'e':
|
||||
atts[att].forEach(function(elem) {
|
||||
elem.setAttribute(att, "...");
|
||||
});
|
||||
break;
|
||||
case 'i':
|
||||
continue;
|
||||
case 'u':
|
||||
atts[att].forEach(function(elem) {
|
||||
elem.removeAttribute(att);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
continue;
|
||||
}
|
||||
}
|
||||
outputField.value = nodes.innerHTML;
|
||||
form2container.innerHTML = "";
|
||||
}
|
||||
|
||||
var addClickHandlers = function() {
|
||||
inputForm.addEventListener('submit', processInput);
|
||||
copy.addEventListener('click', copyOutput);
|
||||
}
|
||||
|
||||
return {run: addClickHandlers};
|
||||
})()
|
||||
init.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue