Merge pull request #2 from mel-caballero/developer

filtros

index.html

@@ -21,11 +21,11 @@
 
 	<div class="container">
 			
-		<h1>WCAG <span id="wcagVersion">2.1</span></h1>
+		<h1>WCAG</h1>
 		<div class="row">
 			<div class="col-sm-12 col-lg-7">
 				<p role="status">
-					Showing <span class="badge bg-primary" id="returnedResults">78</span> tests categorised by <span class="badge bg-primary" id="filter">all</span> success criteria
+					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>.
 				</p>
 			</div>
 		</div>
@@ -36,17 +36,30 @@
 					<legend>Categorise WCAG</legend>
 				</div>
 				<div class="col" style="text-align:right">
-					<button type="button" class="btn btn-primary btn-sm">all</button>
-					<button type="button" class="btn btn-secondary btn-sm">content</button>
-					<button type="button" class="btn btn-secondary btn-sm">custom-controls</button>
-					<button type="button" class="btn btn-secondary btn-sm">forms-and-UI</button>
-					<button type="button" class="btn btn-secondary btn-sm">audio-video</button>
-					<button type="button" class="btn btn-secondary btn-sm">structure</button>
-					<button type="button" class="btn btn-secondary btn-sm">colour</button>
-					<button type="button" class="btn btn-secondary btn-sm">font-size</button>
-					<button type="button" class="btn btn-secondary btn-sm">dynamic-content</button>
-					<button type="button" class="btn btn-secondary btn-sm">keyboard</button>
-					<button type="button" class="btn btn-secondary btn-sm">link</button>
+					<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>
+		</fieldset>
+
+		<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="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>
 		</fieldset>

scripts/script.js

@@ -1,59 +1,40 @@
 const tableBody = document.querySelector('tbody');
-const filteredBy = document.getElementById('filter');
-const wcagVersion = document.getElementById('wcagVersion');
+const filterCategory = document.getElementById('filter');
+const level = document.getElementById('level')
+const resultsElement = document.getElementById('returnedResults');
+const tests = wcagObj['intents'];
 
-function populateTable(obj, filter)
-{
-	const resultsElement = document.getElementById('returnedResults');
-	const tests = obj['intents'];
+function populateTable() {
+	const filterLevel = level.innerHTML.split(",")
 	var returnedResults = 0;
-	
-	wcagVersion.textContent = obj.latestWCAGversion;
-	
-	for(let i = 0;i < tests.length; i++)
-	{
-		const tableRow = document.createElement('tr');
-		for (var key in tests[i]) 
-		{
-			if (tests[i].hasOwnProperty(key)) 
-			{
-				if(key!=='link')
-				{	
-					var val = tests[i][key];
-					var tableData = document.createElement('td');
-
-					if(tests[i].category.includes(filter) || filter == 'all')
-					{
-						if(key=='category')
-						{
-							returnedResults++;
-							for(let a = 0;a < tests[i][key].length; a++)
-							{
-								var cssSpan = document.createElement('span');
-								cssSpan.textContent = val[a];
-								cssSpan.classList.add('bg-primary');
-								cssSpan.classList.add('badge');
-								cssSpan.classList.add('rounded-pill');
-								tableData.appendChild(cssSpan);
-							}
-						}
-						else if(key=='wcagLevel')
-						{
-							switch(val)
-							{
+	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' )) {
+			const tableRow = document.createElement('tr');
+			for (var 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') {
+							switch (val) {
 								case 'A':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-info');
+									['bg-info', 'text-dark', 'badge', 'rounded-pill' ].forEach(item => {
+										cssSpan.classList.add(item);
+									})
+									/*cssSpan.classList.add('bg-info');
 									cssSpan.classList.add('text-dark');
 									cssSpan.classList.add('badge');
-									cssSpan.classList.add('rounded-pill');
+									cssSpan.classList.add('rounded-pill');*/
 									tableData.appendChild(cssSpan);
 									break;
 								case 'AA':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-success');
+									cssSpan.classList.add('bg-warning');
+									cssSpan.classList.add('text-dark');
 									cssSpan.classList.add('badge');
 									cssSpan.classList.add('rounded-pill');
 									tableData.appendChild(cssSpan);
@@ -61,8 +42,7 @@ function populateTable(obj, filter)
 								case 'AAA':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-warning');
-									cssSpan.classList.add('text-dark');
+									cssSpan.classList.add('bg-danger');
 									cssSpan.classList.add('badge');
 									cssSpan.classList.add('rounded-pill');
 									tableData.appendChild(cssSpan);
@@ -72,8 +52,18 @@ function populateTable(obj, filter)
 									break;
 							}
 						}
-						else if(key=='understandingCriteria')
-						{
+						else if (key == 'category') {
+							returnedResults++;
+							for (let a = 0; a < tests[i][key].length; a++) {
+								var cssSpan = document.createElement('span');
+								cssSpan.textContent = val[a];
+								cssSpan.classList.add('bg-primary');
+								cssSpan.classList.add('badge');
+								cssSpan.classList.add('rounded-pill');
+								tableData.appendChild(cssSpan);
+							}
+						}
+						else if (key == 'understandingCriteria') {
 							const a = document.createElement('a');
 							const linkText = document.createTextNode(val);
 							a.appendChild(linkText);
@@ -82,8 +72,7 @@ function populateTable(obj, filter)
 							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 => {
@@ -94,8 +83,7 @@ function populateTable(obj, filter)
 							});
 							tableData.appendChild(ul);
 						}
-						else if(key="intent")
-						{
+						else if (key = "intent") {
 							const pText = val.split("#")
 							pText.forEach(element => {
 								const p = document.createElement('p');
@@ -110,24 +98,47 @@ function populateTable(obj, filter)
 				}
 			}
 		}
-
 	}
 	resultsElement.textContent = returnedResults;
 }
 
-const btns = document.querySelectorAll('button');
-for (i of btns) 
-{
-  i.addEventListener('click', function(){
-		tableBody.innerHTML = '';
-		populateTable(wcagObj,this.textContent);
-		filteredBy.textContent = this.textContent;
-  });
+function btnCategory(btn) {
+	filterCategory.textContent = btn.textContent;
+	populateTable();
+}
+
+function btnLevel(btn) {
+	const contentLevel = btn.textContent
+	const arrayLevels = level.innerHTML.split(",")
+
+	if (contentLevel == "All") {
+		level.textContent = 'All'
+	}
+	else if (arrayLevels.indexOf(contentLevel) !== -1) {
+		const newArray = arrayLevels.filter(item => item != contentLevel)
+		level.textContent = newArray.join()
+		if (level.innerHTML == "") {
+			level.textContent = 'All'
+		}
+	}
+	else {
+
+		if (arrayLevels.indexOf('All') !== -1) {
+			arrayLevels.splice(arrayLevels.indexOf('All'), 1)
+			level.textContent = arrayLevels.join()
+		}
+		arrayLevels.push(contentLevel)
+		if (arrayLevels.length === 3) {
+			level.textContent = 'All'
+		} else {
+		level.textContent = arrayLevels.join()
+		}
+	}
+	populateTable();
 }
 
 const hashstring = window.location.hash;
-switch(hashstring.replace('#',''))
-{	
+switch (hashstring.replace('#', '')) {
 	case 'dynamic-content':
 	case 'custom-controls':
 	case 'forms-and-UI':
@@ -138,9 +149,9 @@ switch(hashstring.replace('#',''))
 	case 'keyboard':
 	case 'link':
 	case 'font-size':
-		populateTable(wcagObj, hashstring.replace('#',''));
+		populateTable();
 		break;
 	default:
-		populateTable(wcagObj, 'all');
+		populateTable();
 		break;
 }