Skip to content

Commit

Permalink
cleanup of dialog boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattgarrish
mattgarrish committed Dec 24, 2024
1 parent ba2a964 commit 76e52a9
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 45 deletions.
28 changes: 21 additions & 7 deletions css/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,19 @@ h1 {
}

h2 {
display: inline-block;
font-size: 130%;
font-weight: normal;
color: rgb(0,0,100);
margin-top: 1.75em;
margin-bottom: 1rem;
font-size: 115%;
margin: -2rem -1.8rem 2rem -2rem;
padding: 0.5rem 0 0.5rem 2rem;
background-color: rgb(0,60,120);
color: rgb(255,255,255);
}

h3 {
font-size: 125%;
color: rgb(0,0,100);
display: inline-block;
font-size: 115%;
font-weight: normal;
color: rgb(0,0,100);
margin: 0;
}

Expand Down Expand Up @@ -102,6 +103,19 @@ dialog {
max-width: 80vw;
}

/* result dialog */

dialog#result p,
dialog#result ul {
margin-left: 3rem;
}

a.close {
position: absolute;
top: 0.5rem;
right: 2rem;
}

/* page headers and footers */

header {
Expand Down
Binary file added graphics/close-icon.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.
12 changes: 8 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,17 @@ <h1><img class="logo" src="graphics/daisy_high.jpg" alt="DAISY"> Accessibility M
<div><input type="button" onclick="processXML()" value="Preview"/></div>

<dialog id="result">
<div id="result_body"></div>
<button>Close</button>
<h2>Metadata Display</h2>
<a href="#result-close" id="result-close-img" class="close" title="Close"><img src="graphics/close-icon.png" alt="Close"></a>
<div id="result-body"></div>
<button id="result-close-button">Close</button>
</dialog>

<dialog id="explainer">
<div id="explainer_body"></div>
<button>Close</button>
<h2>Explainer</h2>
<a href="#explainer-close" id="explainer-close-img" class="close" title="Close"><img src="graphics/close-icon.png" alt="Close"></a>
<div id="explainer-body"></div>
<button id="explainer-close-button">Close</button>
</dialog>

<section hidden="hidden">
Expand Down
34 changes: 22 additions & 12 deletions js/metaViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@

/* result dialog */

var result_dialog = document.getElementById("result");
var result_close = document.querySelector("dialog#result button");
var result_dialog = document.getElementById('result');
var result_close_button = document.getElementById("result-close-button");
var result_close_img = document.getElementById("result-close-img");

result_close.addEventListener("click", () => {
result_dialog.close();
result_close_button.addEventListener("click", () => {
document.getElementById("result").close();
});

result_close_img.addEventListener("click", () => {
document.getElementById("result").close();
});

/* process input metadata */
Expand All @@ -15,7 +20,7 @@ function processXML() {
var xml = document.getElementById('input_packagedoc').value;

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

console.clear();
Expand Down Expand Up @@ -62,16 +67,21 @@ function writeExplainerLink(id) {
return a;
}

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

function showExplainer(id) {
expl_body.innerHTML = document.getElementById(id).innerHTML;
expl_dialog.showModal();
var expl_body = document.getElementById("explainer-body");
expl_body.innerHTML = document.getElementById(id).innerHTML;
explainer_dialog.showModal();
}

var expl_close = document.querySelector("dialog#explainer button");
var explainer_close_button = document.getElementById("explainer-close-button");
var explainer_close_img = document.getElementById("explainer-close-img");

explainer_close_button.addEventListener('click', () => {
explainer_dialog.close();
});

expl_close.addEventListener("click", () => {
expl_dialog.close();
explainer_close_img.addEventListener('click', () => {
explainer_dialog.close();
});
24 changes: 13 additions & 11 deletions js/onixProcessor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@

var onixProcessor = (function() {

const hd_type = 'h3';

function processOnixRecord(onix_record_as_text) {

var result = document.createElement('div');
Expand All @@ -28,7 +30,7 @@ var onixProcessor = (function() {

// 4.1.3 Instructions

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

Expand Down Expand Up @@ -64,7 +66,7 @@ var onixProcessor = (function() {

// 4.2.3 Instructions

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

Expand Down Expand Up @@ -108,7 +110,7 @@ var onixProcessor = (function() {

// 4.3.3 Instructions

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

Expand Down Expand Up @@ -168,7 +170,7 @@ var onixProcessor = (function() {
result.appendChild(cred_p);
}

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

Expand Down Expand Up @@ -283,7 +285,7 @@ var onixProcessor = (function() {

// 4.4.3 Instructions

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

Expand Down Expand Up @@ -323,7 +325,7 @@ var onixProcessor = (function() {

// 4.5.3 Instructions

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

Expand Down Expand Up @@ -379,7 +381,7 @@ var onixProcessor = (function() {

// 4.6.3 Instructions

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

Expand Down Expand Up @@ -450,7 +452,7 @@ var onixProcessor = (function() {

// 4.7.3 Instructions

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

Expand Down Expand Up @@ -522,7 +524,7 @@ var onixProcessor = (function() {

// 4.8.3 Instructions

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

Expand Down Expand Up @@ -597,7 +599,7 @@ var onixProcessor = (function() {

// 4.9.3 Instructions

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

Expand All @@ -621,7 +623,7 @@ var onixProcessor = (function() {
* 4.10 Additional accessibility information
*/

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

Expand Down
24 changes: 13 additions & 11 deletions js/packageProcessor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@

var packageProcessor = (function() {

const hd_type = 'h3';

function processPackageDoc(package_document_as_text) {

var result = document.createElement('div');
Expand All @@ -28,7 +30,7 @@ var packageProcessor = (function() {

// 4.1.3 Instructions

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

Expand Down Expand Up @@ -68,7 +70,7 @@ var packageProcessor = (function() {

// 4.2.3 Instructions

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

// add explainer
Expand Down Expand Up @@ -138,7 +140,7 @@ var packageProcessor = (function() {

// 4.3.3 Instructions

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

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

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

Expand Down Expand Up @@ -283,7 +285,7 @@ var packageProcessor = (function() {

// 4.4.3 Instructions

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

Expand Down Expand Up @@ -323,7 +325,7 @@ var packageProcessor = (function() {

// 4.5.3 Instructions

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

Expand Down Expand Up @@ -380,7 +382,7 @@ var packageProcessor = (function() {

// 4.6.3 Instructions

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

Expand Down Expand Up @@ -441,7 +443,7 @@ var packageProcessor = (function() {

// 4.7.3 Instructions

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

Expand Down Expand Up @@ -505,7 +507,7 @@ var packageProcessor = (function() {

// 4.8.3 Instructions

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

Expand Down Expand Up @@ -547,7 +549,7 @@ var packageProcessor = (function() {

// 4.9.3 Instructions

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

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

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

Expand Down

0 comments on commit 76e52a9

Please sign in to comment.