https://baptist.org.uk/Images/Content/2019/Templates/54496/js/Accessibility.js

1$(document).ready(function () 
2{ 'use strict';
3
4var bCookiesWork = true; // assume cookies work, so we can test them.
5var BodyTag = $('body'); // only change text in the body, not the head.
6
7// Set up cookies code.
8
9function SetCookie(CookieName, Data, bSessionCookie) {
10	if (bCookiesWork) {
11		var sExpires = ''; // There is no 'expires=', which ensures we have a session cookie.
12		if (!bSessionCookie) {sExpires = ' expires=Mon, 18 Jan 2038 00:00:01 UTC;';} // 1 day + 3 hours before the Unix end-of-the-world date.
13		document.cookie = CookieName + '=' + Data + ';' + sExpires + ' path=/';
14	}
15}
16
17function DeleteCookie(CookieName) { // Set to a date way in the past.
18	if (bCookiesWork) {
19		document.cookie = CookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 UTC; path=/;'; // 1 second after Unix start-of-the-world date.
20	}
21}
22
23function getCookie(cname) { // Modified from W3C code.
24	if (bCookiesWork) {
25		var name = cname + "=";
26		var decodedCookie = decodeURIComponent(document.cookie);
27		var ca = decodedCookie.split(';');
28		for(var i = 0; i <ca.length; i++) {
29			var c = ca[i];
30			while (c.charAt(0) == ' ') {
31				c = c.substring(1);
32			}
33			if (c.indexOf(name) === 0) {
34				return c.substring(name.length, c.length);
35			}
36		}
37	}
38	return "";
39}
40
41function bCookieContainsData(CookieName, Data) {
42	return (getCookie(CookieName) === Data);
43}
44
45// See if cookies actually work.
46SetCookie('TESTCOOKIE', 'TestValue', false); // test a permanent cookie.
47bCookiesWork = bCookieContainsData('TESTCOOKIE', 'TestValue');
48DeleteCookie('TESTCOOKIE');
49
50var SA = BodyTag.find('section.Accessibility');
51
52var ButtonA = SA.find('div#AccessibilityA');
53var ButtonB = SA.find('div#AccessibilityB');
54var ButtonC = SA.find('div#AccessibilityC');
55var ButtonD = SA.find('div#AccessibilityD');
56var ButtonE = SA.find('div#AccessibilityE');
57
58const iMaxFontSizeD = 22;
59const iMaxFontSizeE = 24;
60
61function UpdateColours(bClearClasses,ColourCookie){
62	if(!bRun){return 0;}
63	
64	// Only change stuff in header, sections, and footer.
65	var PageParts = BodyTag.children().children('header,section,footer');
66	const ElementTypes = 'div,p,td,li,span,a,b,i,th,h1,h2,h3,h4,h5,h6,label,input,select,textarea';
67
68	// First of all remove all the font-size classes
69	if(bClearClasses){
70		PageParts.each(function(){
71			var ThisPagePart = $(this);
72			if(!ThisPagePart.hasClass('Accessibility')){
73				ThisPagePart.find(ElementTypes).each(function(){
74					var T = $(this);
75					var ClassList = T.attr('class');
76					if(typeof ClassList !== "undefined"){
77						var classArr = ClassList.trim().split(/\s+/);
78						$.each(classArr, function(index, value){
79							if(value === 'AccessBlack'){
80								T.removeClass('AccessBlack');
81								if(T.attr('class') === ''){T.removeAttr('class');}
82							} else if(value === 'AccessWhite'){
83								T.removeClass('AccessWhite');
84								if(T.attr('class') === ''){T.removeAttr('class');}
85							}
86							if(value === 'ForceUnderline'){
87								T.removeClass('ForceUnderline');
88								if(T.attr('class') === ''){T.removeAttr('class');}
89							}                          	
90						});
91					} else {
92						//console.log(T.html()); // errornous elements.
93					}
94				});
95			}
96		});
97	}
98	
99	if(ColourCookie === 'B'){
100		// Change colours on screen to high contrast
101		PageParts.each(function(){
102			var ThisPagePart = $(this);
103			if(!ThisPagePart.hasClass('Accessibility')){
104				ThisPagePart.find(ElementTypes).each(function(){
105					var T = $(this);
106					var Colour = T.css('color');
107					
108					var arrSplitText = Colour.split(',');
109					var Red =   arrSplitText[0].trim().replace('rgb(','').replace('rgba(','');
110					var Green = arrSplitText[1].trim();
111					var Blue =  arrSplitText[2].trim().replace(')','');
112					var iRed =   parseInt(Red);
113					var iGreen = parseInt(Green);
114					var iBlue =  parseInt(Blue);
115		
116					if(iRed < 80 && iGreen < 80 && iBlue < 80){
117						T.addClass('AccessBlack');
118					} else if(iRed > 200 && iGreen > 200 && iBlue > 200){
119						T.addClass('AccessWhite');
120					}
121                    T.addClass('ForceUnderline');
122				});
123			}
124		});
125	}
126	
127}
128
129function UpdateTextSize(bClearClasses,TextCookie){
130	
131	if(!bRun){return 0;}
132	
133	// Only change stuff in header, sections, and footer.
134	var PageParts = BodyTag.children().children('header,section,footer');
135	const ElementTypes = 'a,div,p,td,li,span,b,i,th,h1,h2,h3,h4,h5,h6,label,input,select,textarea,strong,em,pre';
136
137	// First of all remove all the font-size classes
138	if(bClearClasses){
139		BodyTag.removeClass('AccessibilityOn').removeClass('AccessibilityD').removeClass('AccessibilityE');
140		PageParts.each(function(){
141			var ThisPagePart = $(this);
142			if(!ThisPagePart.hasClass('Accessibility')){
143				ThisPagePart.find(ElementTypes).each(function(){
144					var T = $(this);
145					var ClassList = T.attr('class');
146					if(typeof ClassList !== "undefined"){
147						var classArr = ClassList.trim().split(/\s+/);
148						$.each(classArr, function(index, value){
149							if(value.startsWith('AccessFontSize')){
150								T.removeClass(value);
151								if(T.attr('class') === ''){T.removeAttr('class');}
152							}
153						});

154					} else {
155						//console.log(T.html()); // errornous elements.
156					}
157				});
158			}
159		});
160	}
161
162	if(TextCookie !== ''){ // will be 'D' or 'E'
163		// Change text size on screen
164
165		var bLargeText = (TextCookie === 'D');
166		var bHugeText = (TextCookie === 'E');
167		
168		var iMaxFontSize = iMaxFontSizeD;
169		if(bHugeText){iMaxFontSize = iMaxFontSizeE;}
170
171		PageParts.each(function(){
172			var ThisPagePart = $(this);
173			if(!ThisPagePart.hasClass('Accessibility')){
174				ThisPagePart.find(ElementTypes).each(function(){
175					var T = $(this);
176					var FontSize = T.css('font-size'); // All font-sizes are converted into px, which is good.
177					// There is a bug somewhere, that is affecting the top level a.menu_item links.
178					//if(T.hasClass('nav-menu')){console.log(FontSize);}
179					FontSize = FontSize.replace('px','');
180					var iFontSize = Math.round(parseFloat(FontSize));
181					if(iFontSize > 0 && iFontSize < iMaxFontSize){
182						if(bLargeText){iFontSize = Math.round(iFontSize * 1.4);}
183						if(bHugeText){iFontSize = Math.round(iFontSize * 2.0);}
184						if(iFontSize > iMaxFontSize){iFontSize = iMaxFontSize;}
185						var AccClass = 'AccessFontSize' + iFontSize;
186						T.addClass(AccClass);
187					}
188				});
189			}
190		});
191		BodyTag.addClass('AccessibilityOn').addClass('Accessibility' + TextCookie);
192	}
193}
194
195ButtonA.click(function(){
196	if(getCookie('AccessibilityColour') !== ''){
197		ButtonA.addClass('Ticked');
198		ButtonB.removeClass('Ticked');
199		DeleteCookie('AccessibilityColour');
200		UpdateColours(true,'');
201	}
202});
203ButtonB.click(function(){
204	if(getCookie('AccessibilityColour') !== 'B'){
205		ButtonB.addClass('Ticked');
206		ButtonA.removeClass('Ticked');
207		SetCookie('AccessibilityColour','B', false);
208		UpdateColours(true,'B');
209	}
210});
211ButtonC.click(function(){
212	if(getCookie('AccessibilityText') !== ''){
213		ButtonC.addClass('Ticked');
214		ButtonD.removeClass('Ticked');
215		ButtonE.removeClass('Ticked');
216		DeleteCookie('AccessibilityText');
217		UpdateTextSize(true,'');
218	}
219});
220ButtonD.click(function(){
221	if(getCookie('AccessibilityText') !== 'D'){
222		ButtonD.addClass('Ticked');
223		ButtonC.removeClass('Ticked');
224		ButtonE.removeClass('Ticked');
225		SetCookie('AccessibilityText','D', false);
226		UpdateTextSize(true,'D');
227	}
228});
229ButtonE.click(function(){
230	if(getCookie('AccessibilityText') !== 'E'){
231		ButtonE.addClass('Ticked');
232		ButtonC.removeClass('Ticked');
233		ButtonD.removeClass('Ticked');
234		SetCookie('AccessibilityText','E', false);
235		UpdateTextSize(true,'E');
236	}
237});
238
239var bRun = (window.innerWidth >= 992);
240
241// Set tick status for buttons.
242if(bRun){
243	var ColourCookie = getCookie('AccessibilityColour');
244	if(ColourCookie === 'B'){
245		ButtonB.addClass('Ticked');
246		UpdateColours(false,'B');
247	} else {
248		ButtonA.addClass('Ticked');
249	}
250
251	var TextCookie = getCookie('AccessibilityText');
252	if(TextCookie === 'D'){
253		ButtonD.addClass('Ticked');
254		UpdateTextSize(false,'D');
255	} else if(TextCookie === 'E'){
256		ButtonE.addClass('Ticked');
257		UpdateTextSize(false,'E');
258	} else {
259		ButtonC.addClass('Ticked');
260	}
261  
262  	BodyTag.find('header div.top-link-wrapper a.AccessibilityAid').click(function(){
263		SA.removeClass('HideElement');
264	});
265}
266
267// Close icon
268var CloseIcon = SA.find('div.AccessibilityClose');
269CloseIcon.click(function(){
270	SA.addClass('HideElement');
271});
272
273// Add alt tags to any images that lack them.
274const LetterPattern = /[a-zA-Z]/;
275BodyTag.find('img').each(function(){
276	var ThisImg = $(this);
277	var S = ThisImg.attr('alt');
278	if(typeof S === "undefined"){ // ie. there is no alt tag. We leave alt="" as that might be intentional.
279		var URL = ThisImg.attr('src');
280		//console.log(URL);
281		var i = URL.lastIndexOf('/');
282		URL = URL.substring(i + 1,URL.length - 4); // assume 4 char file extension. We delete later any extra . from a .jpeg ending etc.
283		URL = URL.replace(/\-/g,' ');
284		URL = URL.replace(/\_/g,' ');
285		URL = URL.replace(/\./g,' ');
286		URL = URL.trim();
287      	//console.log(Pattern.test(URL));
288		if(LetterPattern.test(URL)){ // If the URL contains no letters, then don't use it.
289			ThisImg.attr('alt',URL);
290		}
291	}
292});
293
294});