Skip to content

Commit 180a274

Browse files
StephDriverStephDriver
committed
a11y: #755 rethink of reading-options js and controls
1 parent 7a0d6f6 commit 180a274

8 files changed

Lines changed: 126 additions & 81 deletions

File tree

‎src/static/common/js/text_readability.js‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,63 @@
1-
function resizeText(multiplier) {
2-
if (document.body.style.fontSize == "") {
3-
document.body.style.fontSize = "1.0em";
1+
// Track if initialisation has been performed
2+
var isInitialised = false;
3+
4+
// Track cumulative resize value
5+
var cumulativeResize = 0;
6+
var minResize = -3;
7+
var maxResize = 6;
8+
9+
function initialise(){
10+
if (isInitialised) return; // Prevent double initialisation
11+
isInitialised = true;
12+
applyToArticle(function(element){
13+
var computedStyle = window.getComputedStyle(element);
14+
var currentFontSize = parseFloat(computedStyle.fontSize);
15+
element.style.fontSize = currentFontSize + "px";
16+
});
17+
}
18+
19+
function resizeText(multiplier) {
20+
// Calculate new cumulative value
21+
var newCumulative = cumulativeResize + multiplier;
22+
23+
// Check if the new value would be within bounds
24+
if (newCumulative < minResize || newCumulative > maxResize) {
25+
console.log('Resize limit reached. Cumulative: ' + cumulativeResize + ', Attempted: ' + newCumulative);
26+
return;
27+
}
28+
29+
// Update cumulative value and proceed with resize
30+
cumulativeResize = newCumulative;
31+
32+
function resize(element){
33+
var computedStyle = window.getComputedStyle(element);
34+
var currentFontSize = parseFloat(computedStyle.fontSize);
35+
var newFontSize = Math.ceil(currentFontSize + (multiplier * 0.2 * currentFontSize));
36+
element.style.fontSize = newFontSize + "px";
37+
element.style.setProperty('font-size', newFontSize + "px", 'important');
438
}
5-
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
39+
40+
applyToArticle(resize);
641
}
742

8-
$("#dyslexia-mode").click(function(e) {
9-
e.preventDefault();
10-
return $('#article').toggleClass('dyslexia-friendly');
11-
});
43+
function toggleDyslexia(){
44+
function toggleDyslexiaClass(element){
45+
element.classList.toggle('dyslexia-friendly');
46+
}
47+
applyToArticle(toggleDyslexiaClass);
48+
}
49+
50+
function applyToArticle(textFunction){
51+
if (!isInitialised) {
52+
initialise();
53+
}
54+
var articleElement = document.getElementById('article');
55+
if (!articleElement) return;
56+
var allElements = articleElement.querySelectorAll(
57+
'h1, h2, h3, h4, h5, h6, ' +
58+
'blockquote, div, p, pre, ' +
59+
'li, caption, table, tbody, td, tfoot, th, thead, tr, ' +
60+
'a, b, em, i, label, small, span, strong, code'
61+
);
62+
allElements.forEach(textFunction);
63+
}

‎src/themes/OLH/templates/journal/article.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ <h1>{{ article.title|safe }}</h1>
9999
<span class="sr-only">{% trans 'Printer friendly version.' %}</span>
100100
</a>
101101
</li>
102-
<li><a href="javascript:resizeText(-1)" aria-label="{% trans 'decrease text size' %}">A-</a></li>
103-
<li><a href="javascript:resizeText(1)" aria-label="{% trans 'increase text size' %}">A+</a></li>
102+
<li><a onclick="resizeText(-1)" aria-label="{% trans 'decrease text size' %}">A-</a></li>
103+
<li><a onclick="resizeText(1)" aria-label="{% trans 'increase text size' %}">A+</a></li>
104104
{% if author.display_email and not journal_settings.article.hide_author_email_links %}
105105
<li>
106106
<a href="mailto:{{ article.correspondence_author.email }}" >
@@ -109,7 +109,7 @@ <h1>{{ article.title|safe }}</h1>
109109
</a>
110110
</li>
111111
{% endif %}
112-
<li><a href="#" id="dyslexia-mode" aria-label="{% trans 'Dyslexia mode' %}">{% trans "Dyslexia" %}</a></li>
112+
<li><a href="#" onclick="toggleDyslexia()" id="dyslexia-mode" aria-label="{% trans 'Dyslexia mode' %}">{% trans "Dyslexia" %}</a></li>
113113
<li>
114114
<a href="#">
115115
<i aria-hidden="true" class="fa fa-comments">&nbsp;</i>

‎src/themes/clean/assets/css/clean.css‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -480,9 +480,12 @@ header svg {
480480
padding-bottom: 8px;
481481
}
482482

483-
.sticky-top {
483+
.sticky-toc {
484+
position: sticky;
484485
max-height: 100vh;
485-
overflow-y: auto
486+
overflow-y: auto;
487+
top: 60px;
488+
z-index: 999;
486489
}
487490

488491
.card.no-image {
@@ -655,9 +658,13 @@ span + .btn-background {
655658
margin: 0;
656659
padding: 0;
657660
justify-content: flex-end;
658-
background-color: #f5f5f5;
659661
min-height: fit-content;
660-
box-sizing: border-box;
662+
box-sizing: border-box;
663+
position: sticky;
664+
top: 0;
665+
z-index: 1000;
666+
width: fit-content;
667+
margin-left: auto;
661668
}
662669

663670
.btn-opt {
@@ -669,30 +676,18 @@ span + .btn-background {
669676
font-family: Verdana !important;
670677
color: #4c4c4c;
671678
background-color: #F5F5DC;
679+
}
672680

673-
h1,
674-
h2,
675-
h3,
676-
h4,
677-
h5,
678-
h6 {
679-
font-family: Verdana !important;
680-
color: #4c4c4c;
681-
}
682-
683-
i, em {
684-
font-style: normal;
685-
background-color: #FAFAC8;
686-
}
681+
.dyslexia-friendly em,
682+
.dyslexia-friendly i {
683+
background-color: #FAFAC8;
684+
font-style: normal;
685+
}
687686

688-
.summary {
689-
.top {
690-
background-color: #F5F5DC;
691-
}
692-
.bottom {
693-
background-color: #F5F5DC;
694-
}
695-
}
687+
.dyslexia-friendly a {
688+
font-family: inherit;
689+
color: inherit;
690+
text-decoration: underline;
696691
}
697692

698693
.no-bullet-list{

‎src/themes/clean/templates/elements/journal/reading.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="reading-options" class="col-md-12">
2-
<h2 class="sr-only">Text display options</h2>
2+
<h2 class="sr-only">{% trans 'Text display options' %}</h2>
33
<div class="btn-group-horizontal">
44
<button
55
class="btn btn-opt"
@@ -23,6 +23,7 @@ <h2 class="sr-only">Text display options</h2>
2323
class="btn btn-opt"
2424
id="dyslexia-mode"
2525
type="button"
26+
onclick="toggleDyslexia()"
2627
aria-label="{% trans 'Dyslexia mode' %}"
2728
style="font-size: medium"
2829
>

‎src/themes/clean/templates/journal/article.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@ <h1 class="card-title align-text-bottom article-title">{{ article.title|safe }}<
4242
{% endif %}
4343
</div>
4444
</div>
45-
{% include "elements/journal/reading.html" %}
4645
</div>
4746
</div>
48-
{% else %}
49-
{% include "elements/journal/reading.html" %}
5047
{% endif %}
5148

5249
</div>
50+
51+
{% include "elements/journal/reading.html" %}
52+
5353
<div id="article_metadata" class="row">
5454

5555
<div class="col-md-7">
@@ -368,7 +368,7 @@ <h2>{% trans 'CRediT Roles' %}</h2>
368368
{% hook 'article_sidebar' %}
369369
</section>
370370
{% if article_content %}
371-
<div class="sticky-top article-menu" id="toc-section">
371+
<div class="sticky-toc article-menu" id="toc-section">
372372
<section aria-labelledby="toc-title">
373373
<h2 id="toc-title">{% trans "Table of Contents" %}</h2>
374374
<ul id="toc" class="no-bullet-list table-of-contents"></ul>

‎src/themes/material/assets/mat.css‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,7 @@ a:hover .article-title {
296296
.toc-sticky{
297297
position: sticky;
298298
top: 0;
299+
z-index: 999;
299300
}
300301

301302
.wide-button {
@@ -924,50 +925,39 @@ p + .btn-background {
924925
#reading-options{
925926
display: flex;
926927
gap: 1rem;
927-
margin: 0;
928-
padding: 0;
928+
padding: 0 .75rem;
929929
justify-content: flex-end;
930-
background-color: #f5f5f5;
931930
min-height: fit-content;
932931
box-sizing: border-box;
933932
}
934933

934+
#reading-sticky{
935+
position: sticky;
936+
top: 0;
937+
z-index: 1000;
938+
}
939+
935940
.btn-opt {
936941
border: 1px solid #00897b;
937-
background: #f1f1f1;
942+
background-color: inherit;
938943
text-transform: none;
939-
color: black;
944+
color: inherit;
940945
}
941946

942947
.dyslexia-friendly {
948+
font-family: Verdana !important;
949+
color: #4c4c4c;
950+
background-color: #F5F5DC;
951+
}
943952

944-
h1,
945-
h2,
946-
h3,
947-
h4,
948-
h5,
949-
h6 {
950-
font-family: Verdana !important;
951-
color: #4c4c4c;
952-
}
953-
954-
p, li {
955-
font-family: Verdana !important;
956-
color: #4c4c4c;
957-
background-color: #F5F5DC;
958-
}
959-
960-
i, em {
961-
font-style: normal;
962-
background-color: #FAFAC8;
963-
}
953+
.dyslexia-friendly em,
954+
.dyslexia-friendly i {
955+
background-color: #FAFAC8;
956+
font-style: normal;
957+
}
964958

965-
.summary {
966-
.top {
967-
background-color: #F5F5DC;
968-
}
969-
.bottom {
970-
background-color: #F5F5DC;
971-
}
972-
}
959+
.dyslexia-friendly a {
960+
font-family: inherit;
961+
color: inherit;
962+
text-decoration: underline;
973963
}

‎src/themes/material/templates/elements/journal/reading.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div id="reading-options" class="col m12">
2-
<h2 class="sr-only">Text display options</h2>
1+
<div id="reading-options" class="card">
2+
<h2 class="sr-only">{% trans 'Text display options' %}</h2>
33
<div class="btn-group-horizontal">
44
<button
55
class="btn btn-opt"
@@ -23,10 +23,11 @@ <h2 class="sr-only">Text display options</h2>
2323
class="btn btn-opt"
2424
id="dyslexia-mode"
2525
type="button"
26+
onclick="toggleDyslexia()"
2627
aria-label="{% trans 'Dyslexia mode' %}"
2728
style="font-size: medium"
2829
>
2930
<span style="font-size: small">{% trans "Dyslexia" %}</span>
3031
</button>
3132
</div>
32-
</div>
33+
</div>

‎src/themes/material/templates/journal/article.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,15 @@ <h1>{{ article.title|safe }}</h1>
5555
</span>
5656
</div>
5757
{% endif %}
58-
{% include "elements/journal/reading.html" %}
58+
5959
<div>
6060

6161
</div>
62-
</div>
62+
</div>
63+
</div>
64+
65+
<div id="reading-sticky" class=" col s12 show-on-small hide-on-med-and-up">
66+
{% include "elements/journal/reading.html" %}
6367
</div>
6468

6569
<div id="article" class="col m8 s12">
@@ -233,7 +237,9 @@ <h2 class="sr-only"> {% trans 'Metrics' %} </h2>
233237
</article>
234238
{% endif %}
235239
</div>
236-
240+
<div id="reading-sticky" class="col m4 hide-on-small-only">
241+
{% include "elements/journal/reading.html" %}
242+
</div>
237243
<div class="col m4">
238244
<div class="card">
239245
<section aria-label="{% trans 'Article Information' %}">

0 commit comments

Comments
 (0)