Skip to content

Commit

Permalink
add experimental new options;
Browse files Browse the repository at this point in the history 
use native html dialogs
  • Loading branch information
@mattgarrish
mattgarrish committed Dec 14, 2024
1 parent c8133eb commit 1e5ed77
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 62 deletions.
48 changes: 24 additions & 24 deletions css/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,42 +48,22 @@ h1 {
}

h2 {
font-family: Raleway;
font-size: 180%;
padding: 0.5em 0.7em 0 0.7em;
margin: 0 0 6rem 1.5rem;
letter-spacing: 0.125rem;
}

h2.noCategory {
margin-top: 5.8rem;
margin-bottom: 0;
}


h3 {
font-size: 130%;
color: rgb(0,0,100);
margin-top: 1.75em;
font-weight: normal;
margin-bottom: 1rem;
}

h4 {
h3 {
font-size: 125%;
}

h5 {
font-size: 115%;
color: rgb(0,0,180);
color: rgb(0,0,100);
font-weight: normal;
margin: 0;
}

/* general links */

a {
text-decoration: none;
}

h1 a {
color: rgb(32,53,139) !important;
}
Expand All @@ -101,6 +81,26 @@ a:visited:hover {
color: rgb(180,0,0);
}

/* explainers */

a.explainer-link {
display: inline-block;
margin-left: 1rem;
}

a.explainer-link {
min-width: 2.4rem;
min-height: 2.4rem;
}

a.explainer-link img {
max-height: 1.9rem;
}

dialog {
max-width: 80vw;
}

/* page headers and footers */

header {
Expand Down
Binary file added graphics/info.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added graphics/info_hover.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 33 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,18 @@
<head>
<meta charset="utf-8" />
<title>DAISY Accessibility Metadata Viewer</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="css/viewer.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
input[type='button'] {
margin-top: 1rem;
width: 10rem;
padding: 1rem 0;
font-weight: bold;
}
select {
width: 20rem;
}
</style>
</head>

<body>
Expand All @@ -23,11 +31,30 @@ <h1><img class="logo" src="graphics/daisy_high.jpg" alt="DAISY"> Accessibility M

<textarea id="input_packagedoc" rows="15" autocomplete="off"></textarea>

<fieldset>
<legend>Message type:</legend>
<label><input name="msgtype" id="msg-compact" type="radio" checked=""/> Compact</label>
<label><input name="msgtype" id="msg-descriptive" type="radio" disabled=""/> Descriptive</label>
</fieldset>

<fieldset>
<legend>Language:</legend>
<select id="lang" disabled="">
<option id="en">English</option>
</select>
</fieldset>

<div><input type="button" onclick="processXML()" value="Preview"/></div>

<section id="meta-result" aria-label="Resulting Metadata Statements" title="Resulting Metadata Statements">
<div id="result"></div>
</section>
<dialog id="result">
<div id="result_body"></div>
<button>Close</button>
</dialog>

<dialog id="explainer">
<div id="explainer_body"></div>
<button>Close</button>
</dialog>

<script src="js/metaViewer.js"></script>
<script src="js/packageProcessor.js"></script>
Expand Down
45 changes: 27 additions & 18 deletions js/metaViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@

var close_button = {};
close_button['Close'] = function() {
$(this).dialog('close');
};

var meta_dialog = $("#meta-result").dialog({
autoOpen: false,
height: 450,
width: '60vw',
top: '5vw',
modal: true,
buttons: close_button
/* result dialog */

var result_dialog = document.getElementById("result");
var result_close = document.querySelector("dialog#result button");

result_close.addEventListener("click", () => {
result_dialog.close();
});

/* process input metadata */

function processXML() {

var xml = document.getElementById('input_packagedoc').value;

// reest the result pane
var result_field = document.getElementById('result');
var result_field = document.getElementById('result_body');
result_field.textContent = '';

console.clear();
Expand All @@ -40,11 +37,23 @@ function processXML() {

if (result) {
result_field.appendChild(result);

if (meta_dialog) {
meta_dialog.dialog('open');
document.getElementById('meta-result').focus();
}
result_dialog.showModal();
}
}


/* explainer dialog */

var expl_dialog = document.getElementById("explainer");
var expl_body = document.getElementById("explainer_body");

function showExplainer(id) {
expl_body.innerHTML = packageProcessor.getExplainer(id);
expl_dialog.showModal();
}

var expl_close = document.querySelector("dialog#explainer button");

expl_close.addEventListener("click", () => {
expl_dialog.close();
});
84 changes: 70 additions & 14 deletions js/packageProcessor.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@

'use strict';


var _EXPLAINER = {};

_EXPLAINER.visualAdjustments = '<h3>Visual adjustments</h3>\
<p>The value of this field is one of the following strings:</p>\
<ul>\
<li>"Appearance can be modified." &#8212; when the package document metadata conains a <code>schema:accessibilityFeature</code> property with the value <code>displayTransformability</code>.</li>\
<li>"Appearance cannot be modified." &#8212; when the EPUB is identified as a fixed layout publication (<code>rendition:layout</code> equal to <code>pre-paginated</code>).</li>\
<li>"No information is available." &#8212; when the EPUB is reflowable but does not contain the <code>displayTransformability</code> value.</li>\
</ul>\
<p>For more information, please refer to the <a href="https://w3c.github.io/publ-a11y/a11y-meta-display-guide/2.0/draft/guidelines/#visual-adjustments" target="_blank">visual adjustments section of the Accessibility Metadata Display Guide for Digital Publications</a>.';

_EXPLAINER.nonvisualReading = '<h3>Visual adjustments</h3>\
<p>The value of this field is one of the following strings:</p>\
<ul>\
<ul>\
<li>"Readable in read aloud or dynamic braille." &#8212; \
<li>"Not fully readable in read aloud or dynamic braille." &#8212; \
<li>"May not be fully readable in read aloud or dynamic braille." &#8212; \
</ul>\
<p>For more information, please refer to the <a href="https://w3c.github.io/publ-a11y/a11y-meta-display-guide/2.0/draft/guidelines/#nonvisual-reading" target="_blank">visual adjustments section of the Accessibility Metadata Display Guide for Digital Publications</a>.';


var packageProcessor = (function() {

function processPackageDoc(package_document_as_text) {
Expand Down Expand Up @@ -28,8 +51,12 @@ var packageProcessor = (function() {

// 4.1.3 Instructions

var vis_hd = document.createElement('h3');
var vis_hd = document.createElement('h2');
vis_hd.appendChild(document.createTextNode('Visual adjustments'));

// add explainer
vis_hd.appendChild(writeExplainerLink('visualAdjustments'));

result.appendChild(vis_hd);

var vis_result = document.createElement('p');
Expand All @@ -46,7 +73,9 @@ var packageProcessor = (function() {
vis_result.appendChild(document.createTextNode('Appearance modifiability not known'));
}

// add punctuation - not in algorithm
// Following additions are not in the algorithm

// add punctuation
vis_result.appendChild(document.createTextNode('.'));

result.appendChild(vis_result);
Expand All @@ -63,8 +92,12 @@ var packageProcessor = (function() {

// 4.2.3 Instructions

var nonvis_hd = document.createElement('h3');
var nonvis_hd = document.createElement('h2');
nonvis_hd.appendChild(document.createTextNode('Supports nonvisual reading'));

// add explainer
nonvis_hd.appendChild(writeExplainerLink('nonvisualReading'));

result.appendChild(nonvis_hd);

var nonvis_result = document.createElement('p');
Expand Down Expand Up @@ -129,7 +162,7 @@ var packageProcessor = (function() {

// 4.3.3 Instructions

var conf_hd = document.createElement('h3');
var conf_hd = document.createElement('h2');
conf_hd.appendChild(document.createTextNode('Conformance'));
result.appendChild(conf_hd);

Expand Down Expand Up @@ -190,7 +223,7 @@ var packageProcessor = (function() {
result.appendChild(cred_p);
}

var detconf_hd = document.createElement('h3');
var detconf_hd = document.createElement('h2');
detconf_hd.appendChild(document.createTextNode('Detailed Conformance Information'));
result.appendChild(detconf_hd);

Expand Down Expand Up @@ -274,7 +307,7 @@ var packageProcessor = (function() {

// 4.4.3 Instructions

var prerec_hd = document.createElement('h3');
var prerec_hd = document.createElement('h2');
prerec_hd.appendChild(document.createTextNode('Prerecorded audio'));
result.appendChild(prerec_hd);

Expand Down Expand Up @@ -314,7 +347,7 @@ var packageProcessor = (function() {

// 4.5.3 Instructions

var nav_hd = document.createElement('h3');
var nav_hd = document.createElement('h2');
nav_hd.appendChild(document.createTextNode('Navigation'));
result.appendChild(nav_hd);

Expand Down Expand Up @@ -371,7 +404,7 @@ var packageProcessor = (function() {

// 4.6.3 Instructions

var cdmf_hd = document.createElement('h3');
var cdmf_hd = document.createElement('h2');
cdmf_hd.appendChild(document.createTextNode('Charts, diagrams, math, and formulas'));
result.appendChild(cdmf_hd);

Expand Down Expand Up @@ -432,7 +465,7 @@ var packageProcessor = (function() {

// 4.7.3 Instructions

var haz_hd = document.createElement('h3');
var haz_hd = document.createElement('h2');
haz_hd.appendChild(document.createTextNode('Hazards'));
result.appendChild(haz_hd);

Expand Down Expand Up @@ -496,7 +529,7 @@ var packageProcessor = (function() {

// 4.8.3 Instructions

var sum_hd = document.createElement('h3');
var sum_hd = document.createElement('h2');
sum_hd.appendChild(document.createTextNode('Accessibility summary'));
result.appendChild(sum_hd);

Expand Down Expand Up @@ -538,7 +571,7 @@ var packageProcessor = (function() {

// 4.9.3 Instructions

var legal_hd = document.createElement('h3');
var legal_hd = document.createElement('h2');
legal_hd.appendChild(document.createTextNode('Legal considerations'));
result.appendChild(legal_hd);

Expand All @@ -562,7 +595,7 @@ var packageProcessor = (function() {
* 4.10 Additional accessibility information
*/

var aai_hd = document.createElement('h3');
var aai_hd = document.createElement('h2');
aai_hd.appendChild(document.createTextNode('Additional accessibility information'));
result.appendChild(aai_hd);

Expand Down Expand Up @@ -734,10 +767,33 @@ var packageProcessor = (function() {
return output_string;
}


// create a help explainer

function writeExplainerLink(id) {
var a = document.createElement('a');
a.href = '#';
a.classList.add('explainer-link');
a.onclick = function () { showExplainer(id); return false; }
a.title = 'Show explainer for this field';

var img = document.createElement('img');
img.src = 'graphics/info.png';
img.alt = 'Show explainer for this field';

a.appendChild(img);

return a;
}


return {
processPackageDoc: function(packageDoc) {
return processPackageDoc(packageDoc);
},

getExplainer: function(id) {
return _EXPLAINER[id];
}
}

}
})();

0 comments on commit 1e5ed77

Please sign in to comment.