Skip to content

Instantly share code, notes, and snippets.

@craigtommola

craigtommola/config.xml

Last active April 16, 2018 16:08
Show Gist options
  • Save craigtommola/c6c2321aaecc9b9b6795e3cf0993d7d9 to your computer and use it in GitHub Desktop.
Save craigtommola/c6c2321aaecc9b9b6795e3cf0993d7d9 to your computer and use it in GitHub Desktop.
Download ZIP
OU Insights Page Report
Raw
config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<config>
<entry key="title">Page Accessibility</entry>
<entry key="icon" private="true">page-accessibility-report.png</entry>
<entry key="description">View page accessibility errors.</entry>
<entry key="types" private="true">sidebar</entry>
<entry key="initial_height" private="true">600</entry>
<entry key="support_email" label="Support Email" overwritable="true">[email protected]</entry>
</config>
Raw
icon
Temporarily Available Here:
http://workshop11.outc18.com/custom_gadgets/sidebar-insights-v2/page-accessibility-report.png
Place in same directory as gadget files.
Raw
index.html
<html>
<head>
<title>Page Accessibility</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="../lib/gadgetlib.js"></script>
<!-- Make sure this ^ is the correct path to your gadgetlib.js file!! -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
.btn-danger, .btn-warning, .btn-info {
height: 100px;
width: 100%;
display: inline-block;
border-radius: 0;
font-weight: 600;
}
.btn-dark {
width: 100%;
margin-top:1rem;
border-radius: 0;
font-weight: 600;
}
.intro-text {
padding: 10px 0 0 10px;
font-size:80%;
}
h5.modal-title {
font-size: 80%;
text-transform: uppercase;
}
div.modal-body ul {
-webkit-margin-before: 4px;
-webkit-margin-after: 4px;
-webkit-margin-start: 4px;
-webkit-margin-end: 4px;
-webkit-padding-start: 4px;
font-size: 80%;
}
</style>
</head>
<body>
<div class="intro-text">
<p>Last Scan: <strong id="last-scan"></strong>. Questions about resolving errors? Contact us at <a href="" id="support-link"><span id="support-text"></span></a>.</p>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#knownModal">
Known Problems (<span id="known-count">0</span>)
</button>
<!-- Modal -->
<div class="modal fade" id="knownModal" tabindex="-1" role="dialog" aria-labelledby="knownModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="knownModalLabel">Known Problems</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul id="known-problems-list"></ul>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#likelyModal">
Likely Problems (<span id="likely-count">0</span>)
</button>
<!-- Modal -->
<div class="modal fade" id="likelyModal" tabindex="-1" role="dialog" aria-labelledby="likelyModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="likelyModalLabel">Likely Problems</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul id="likely-problems-list"></ul>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#potentialModal">
Potential Problems (<span id="potential-count">0</span>)
</button>
<!-- Modal -->
<div class="modal fade" id="potentialModal" tabindex="-1" role="dialog" aria-labelledby="potentialModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="potentialModalLabel">Potential Problems</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul id="potential-problems-list"></ul>
</div>
</div>
</div>
</div>
<div id="report-link"><a id="report-button" href="#" target="_blank"><button class="btn btn-dark">View Full Report</button></a></div>
<div style="display:none !important;">
<!-- ouc:ob --><!-- /ouc:ob -->
</div>
<script type="text/javascript">
gadget.ready().then(gadget.fetch).then(function () {
console.log("Gadget: ",gadget);
getInsightsList();
getReportLink();
getSupportEmail();
});
const li = '<li class="known-item">{{known}}</li>';
const li2 = '<li class="likely-item">{{likely}}</li>';
const li3 = '<li class="potential-item">{{potential}}</li>';
function getInsightsList() {
var prodPath = gadget.oucGetCurrentFileInfo().done(function(data) {
console.log("REMOTE PATH: ", data);
getInsightReport(data.productionUrl,gadget);
getLastScan(data.productionUrl,gadget);
getReportLink(data,gadget);
getSupportEmail(data,gadget);
});
}
function getReportLink(data,gadget) {
var reportRoot = gadget.apihost+gadget.hostbase+"/insights/pagereport";
console.log("REPORT ROOT: ",reportRoot);
var reportPath = data.stagingPath.replace(".pcf",".html");
console.log("REPORT PATH: ", reportPath);
var reportDomain = data.productionUrl.split('/').slice(0,3).join('/');
console.log("REPORT PROTOCOL AND DOMAIN: ", reportDomain);
var reportUrl = reportRoot+reportPath+"?site="+reportDomain+"/&report=accessibility";
console.log("REPORT URL: ", reportUrl);
pushReportLink(reportUrl);
}
function getLastScan(path,gadget) {
const pageInfo = {
site:gadget.site,
url:path,
authorization_token:gadget.token
};
$.ajax({
method:'GET',
url:gadget.apihost + '/insights/page_info',
data:pageInfo
})
.done(function(data) {
console.log("PAGE INFO: ",data);
pushLastScan(data);
})
.fail(function(err) {
console.log(err);
});
}
function getSupportEmail(data,gadget) {
var supportEmail = gadget.getConfig('support_email');
pushSupportEmail(supportEmail);
}
function pushLastScan(data) {
console.log("LAST RUN: ",data.last_run);
console.log("LAST RUN FORMAT: ",data.last_run.split('T').slice(0,1).join('T'));
$('#last-scan').html(data.last_run.split('T').slice(0,1).join('T'));
};
function pushReportLink(reportUrl) {
console.log("REPORT URL SUCCESS: ", reportUrl);
$('#report-button').attr("href",reportUrl);
};
function pushSupportEmail(supportEmail) {
console.log("SUPPORT EMAIL: ", supportEmail);
$('#support-link').attr("href","mailto:"+supportEmail);
$('#support-text').html(supportEmail);
};
function getInsightReport(path,gadget) {
const callData = {
site:gadget.site,
url:path,
authorization_token:gadget.token
};
$.ajax({
method:'GET',
url:gadget.apihost + '/insights/page_accessibility',
data:callData
})
.done(function(data) {
parseItems(data);
})
.fail(function(err) {
console.log(err);
});
}
function parseItems(items) {
console.log("ACCESSIBILITY PROBLEMS:",items);
let knownlist = [];
let likelylist = [];
let potentiallist = [];
function unescapeHtml(safe) {
return $('<div />').html(safe).text();
}
items.known.forEach(function(file) {
knownlist.push(li.replace('{{known}}', "<code>"+file.err_src+"</code><br />"+unescapeHtml(file.repair.err_msg)+"<br />"+unescapeHtml(file.repair.repair) ));
});
renderKnown(knownlist);
items.likely.forEach(function(file) {
likelylist.push(li2.replace('{{likely}}', "<code>"+file.err_src+"</code><br />"+unescapeHtml(file.repair.err_msg)+"<br />"+unescapeHtml(file.repair.repair) ));
});
renderLikely(likelylist);
items.potential.forEach(function(file) {
potentiallist.push(li3.replace('{{potential}}', "<code>"+file.err_src+"</code><br />"+unescapeHtml(file.repair.err_msg)));
});
renderPotential(potentiallist);
};
function renderKnown(knownlist) {
$('#known-problems-list').append(knownlist);
$('#known-count').html(knownlist.length);
};
function renderLikely(likelylist) {
$('#likely-problems-list').append(likelylist);
$('#likely-count').html(likelylist.length);
};
function renderPotential(potentiallist) {
$('#potential-problems-list').append(potentiallist);
$('#potential-count').html(potentiallist.length);
};
$(document).ready(function() {
console.log('DOM READY');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment