filtro version + arreglos

index.html

@@ -23,51 +23,74 @@
 			
 		<h1>WCAG</h1>
 		<div class="row">
-			<div class="col-sm-12 col-lg-7">
+			<div class="col-12">
 				<p role="status">
-					Showing <span class="badge bg-primary" id="returnedResults">78</span> understanding criteria categorised by <span class="badge bg-primary" id="filter" data-level="">all</span> success criteria. Level <span class="badge bg-primary" id="level" >All</span>.
+					Mostrando <span class="badge bg-primary" id="returnedResults">78</span> Understanding Criteria de la/las version/es <span class="badge bg-primary" id="version">All</span> categorizados por <span class="badge bg-primary" id="filter">all</span> Success Criteria. Nivel <span class="badge bg-primary" id="level" >All</span>.
 				</p>
 			</div>
 		</div>
-
-		<fieldset>
-			<div class="row bg-light" style="padding:20px;">
-				<div class="col-3" style="padding-left:0px;">
-					<legend>Categorise WCAG</legend>
-				</div>
-				<div class="col" style="text-align:right">
-					<button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button>
-					<button type="button" onclick="btnLevel(this)" class="btn btn-info dark-text btn-sm level">A</button>
-					<button type="button" onclick="btnLevel(this)" class="btn btn-warning dark-text btn-sm level">AA</button>
-					<button type="button" onclick="btnLevel(this)" class="btn btn-danger btn-sm level">AAA</button>
+		<div class="row">
+			<fieldset class="col-6" style="padding:0">
+				<div class="row bg-light" style="padding:20px;">
+					<div class="col-6">
+						<legend>Version WCAG</legend>
+					</div>
+					<div class="col-6" style="text-align:center">
+						<button type="button" onclick="btnVersion(this)" class="btn btn-primary btn-sm version">All</button>
+						<button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.0</button>
+						<button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.1</button>
+						<button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.2</button>
+					</div>
 				</div>
-			</div>
-		</fieldset>
+			</fieldset>
 
-		<fieldset>
-			<div class="row bg-light" style="padding:20px;">
-				<div class="col-3" style="padding-left:0px;">
-					<legend>Categorise WCAG</legend>
+			<fieldset class="col-6" style="padding:0">
+				<div class="row bg-light" style="padding:20px;">
+					<div class="col-6">
+						<legend>Nivel WCAG</legend>
+					</div>
+					<div class="col-6" style="text-align:center">
+						<button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button>
+						<button type="button" onclick="btnLevel(this)" class="btn btn-info dark-text btn-sm level">A</button>
+						<button type="button" onclick="btnLevel(this)" class="btn btn-warning dark-text btn-sm level">AA</button>
+						<button type="button" onclick="btnLevel(this)" class="btn btn-danger btn-sm level">AAA</button>
+					</div>
 				</div>
-				<div class="col" style="text-align:right">
-					<button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">all</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">content</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">forms-and-UI</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">audio-video</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">structure</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">colour</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">font-size</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">dynamic-content</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">keyboard</button>
-					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">link</button>
+			</fieldset>
+		</div>
+
+		<div class="row">
+			<fieldset class="col-12" style="padding:0">
+				<div class="row bg-light" style="padding:20px;">
+					<div class="col-3">
+						<legend>Categorise WCAG</legend>
+					</div>
+					<div class="col" style="text-align:right">
+						<button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">all</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">content</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">forms-and-UI</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">audio-video</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">structure</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">colour</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">font-size</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">dynamic-content</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">keyboard</button>
+						<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">link</button>
+					</div>
 				</div>
-			</div>
-		</fieldset>
+			</fieldset>
+		</div>
 
 		<div style="overflow-x: auto;">
 		<table class="table">
 			<caption class="visually-hidden">WCAG success criteria sorted by category</caption>
-			<thead style="border-top:0px"><th>Understanding Criteria</th><th>Level</th><th>Version</th><th style="width: 40%;">Intent</th><th style="width: 40%;">Benefits</th><th>Category</th></thead>
+			<thead style="border-top:0px">
+				<th scope="col">Understanding Criteria</th>
+				<th scope="col">Level</th>
+				<th scope="col">Version</th>
+				<th scope="col" style="width: 40%;">Intent</th>
+				<th scope="col" style="width: 40%;">Benefits</th>
+				<th scope="col">Category</th></thead>
 			<tbody></tbody>
 		</table>
 		</div>

scripts/script.js

@@ -1,25 +1,28 @@
 const tableBody = document.querySelector('tbody');
 const filterCategory = document.getElementById('filter');
 const level = document.getElementById('level')
+const version = document.getElementById('version')
 const resultsElement = document.getElementById('returnedResults');
 const tests = wcagObj['intents'];
 
 function populateTable() {
 	const filterLevel = level.innerHTML.split(",")
-	var returnedResults = 0;
+	const filterVersion = version.innerHTML.split(",")
+	let returnedResults = 0;
 	tableBody.innerHTML = '';
 	for (let i = 0; i < tests.length; i++) {
-		if ((tests[i].category.includes(filterCategory.innerHTML) || filterCategory.innerHTML == 'all') && (filterLevel.find(item => item === tests[i].wcagLevel) || filterLevel[0] === 'All' )) {
+		if ((tests[i].category.includes(filterCategory.innerHTML) || filterCategory.innerHTML == 'all') && (filterLevel.find(item => item === tests[i].wcagLevel) || filterLevel[0] === 'All' ) && (filterVersion.find(item => item === tests[i].wcagVersion) || filterVersion[0] === 'All' )) {
 			const tableRow = document.createElement('tr');
-			for (var key in tests[i]) {
+			for (let key in tests[i]) {
 				if (tests[i].hasOwnProperty(key)) {
 					if (key !== 'link') {
-						var val = tests[i][key];
-						var tableData = document.createElement('td');
-						if (key == 'wcagLevel') {
+						let val = tests[i][key];
+						let tableData = document.createElement('td');
+						if (key === 'wcagLevel') {
+							let cssSpan;
 							switch (val) {
 								case 'A':
-									var cssSpan = document.createElement('span');
+									cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
 									['bg-info', 'text-dark', 'badge', 'rounded-pill' ].forEach(item => {
 										cssSpan.classList.add(item);
@@ -31,7 +34,7 @@ function populateTable() {
 									tableData.appendChild(cssSpan);
 									break;
 								case 'AA':
-									var cssSpan = document.createElement('span');
+									cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
 									cssSpan.classList.add('bg-warning');
 									cssSpan.classList.add('text-dark');
@@ -40,7 +43,7 @@ function populateTable() {
 									tableData.appendChild(cssSpan);
 									break;
 								case 'AAA':
-									var cssSpan = document.createElement('span');
+									cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
 									cssSpan.classList.add('bg-danger');
 									cssSpan.classList.add('badge');
@@ -52,10 +55,10 @@ function populateTable() {
 									break;
 							}
 						}
-						else if (key == 'category') {
+						else if (key === 'category') {
 							returnedResults++;
 							for (let a = 0; a < tests[i][key].length; a++) {
-								var cssSpan = document.createElement('span');
+								cssSpan = document.createElement('span');
 								cssSpan.textContent = val[a];
 								cssSpan.classList.add('bg-primary');
 								cssSpan.classList.add('badge');
@@ -63,7 +66,7 @@ function populateTable() {
 								tableData.appendChild(cssSpan);
 							}
 						}
-						else if (key == 'understandingCriteria') {
+						else if (key === 'understandingCriteria') {
 							const a = document.createElement('a');
 							const linkText = document.createTextNode(val);
 							a.appendChild(linkText);
@@ -72,7 +75,7 @@ function populateTable() {
 							a.href = tests[i].link;
 							tableData.appendChild(a);
 						}
-						else if (key == 'benefit') {
+						else if (key === 'benefit') {
 							const ul = document.createElement('ul');
 							const lista = val.split("#")
 							lista.forEach(element => {
@@ -83,15 +86,21 @@ function populateTable() {
 							});
 							tableData.appendChild(ul);
 						}
-						else if (key = "intent") {
+						else if (key === "intent") {
 							const pText = val.split("#")
 							pText.forEach(element => {
 								const p = document.createElement('p');
-								const pText = document.createTextNode(element);
-								p.appendChild(pText);
+								const text = document.createTextNode(element);
+								p.appendChild(text);
 								tableData.appendChild(p);
 							});
 						}
+						else
+						{
+							let texto = document.createElement('p');
+							texto.textContent = val
+							tableData.appendChild(texto);
+						}
 						tableRow.appendChild(tableData);
 						tableBody.appendChild(tableRow);
 					}
@@ -137,21 +146,34 @@ function btnLevel(btn) {
 	populateTable();
 }
 
-const hashstring = window.location.hash;
-switch (hashstring.replace('#', '')) {
-	case 'dynamic-content':
-	case 'custom-controls':
-	case 'forms-and-UI':
-	case 'audio-video':
-	case 'structure':
-	case 'colour':
-	case 'content':
-	case 'keyboard':
-	case 'link':
-	case 'font-size':
-		populateTable();
-		break;
-	default:
-		populateTable();
-		break;
+function btnVersion(btn) {
+	const contentVersion = btn.textContent
+	const arrayVersions = version.innerHTML.split(",")
+
+	if (contentVersion == "All") {
+		version.textContent = 'All'
+	}
+	else if (arrayVersions.indexOf(contentVersion) !== -1) {
+		const newArray = arrayVersions.filter(item => item != contentVersion)
+		version.textContent = newArray.join()
+		if (version.innerHTML == "") {
+			version.textContent = 'All'
+		}
+	}
+	else {
+
+		if (arrayVersions.indexOf('All') !== -1) {
+			arrayVersions.splice(arrayVersions.indexOf('All'), 1)
+			version.textContent = arrayVersions.join()
+		}
+		arrayVersions.push(contentVersion)
+		if (arrayVersions.length === 3) {
+			version.textContent = 'All'
+		} else {
+		version.textContent = arrayVersions.join()
+		}
+	}
+	populateTable();
 }
+
+populateTable();