#1165 New option to open accessibility options in lightbox instead of…

… dialog

modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js

@@ -1560,19 +1560,29 @@ function x_continueSetUp1() {
 				})
 				.attr("aria-label", $("#x_colourChangerBtn").attr("title") + " " + x_params.dialogTxt)
 				.click(function() {
-					x_openDialog(
-						"colourChanger",
-						x_params.accessibilityLabel != undefined && x_params.accessibilityLabel != "" ? x_params.accessibilityLabel : x_getLangInfo(x_languageData.find("colourChanger")[0], "label", "Colour Changer"),
-						x_getLangInfo(x_languageData.find("colourChanger").find("closeButton")[0], "description", "Close Colour Changer"),
-						null,
-						null,
-						function () {
-							$x_colourChangerBtn
-								.blur()
-								.removeClass("ui-state-focus")
-								.removeClass("ui-state-hover");
-						}
-					);
+					if (x_params.accessibilityTarget == "lightbox") {
+
+						$.featherlight($(), {
+							contentFilters: 'ajax',
+							ajax: x_templateLocation + 'models_html5/colourChanger.html',
+							variant: 'lightbox' + (x_browserInfo.mobile != true ? 'Medium' : 'Auto' )
+						});
+
+					} else {
+						x_openDialog(
+							"colourChanger",
+							x_params.accessibilityLabel != undefined && x_params.accessibilityLabel != "" ? x_params.accessibilityLabel : x_getLangInfo(x_languageData.find("colourChanger")[0], "label", "Colour Changer"),
+							x_getLangInfo(x_languageData.find("colourChanger").find("closeButton")[0], "description", "Close Colour Changer"),
+							null,
+							null,
+							function () {
+								$x_colourChangerBtn
+									.blur()
+									.removeClass("ui-state-focus")
+									.removeClass("ui-state-hover");
+							}
+						);
+					}
 				});
 
 			if (accessibilityIcon.customised == true) {

modules/xerte/parent_templates/Nottingham/models_html5/colourChanger.html

@@ -42,6 +42,18 @@
 		}
 
 		this.init = function() {
+
+			// opened in lightbox
+			if ($('#colourChangerHolder').parents('.featherlight').length > 0) {
+				$('#colourChangerHolder').wrap('<div id="x_colourChanger"></div>');
+
+				$('#x_colourChanger').prepend('<h1 id="x_introH1">' + (x_params.accessibilityLabel != undefined && x_params.accessibilityLabel != "" ? x_params.accessibilityLabel : x_getLangInfo(x_languageData.find("colourChanger")[0], "tooltip", "Change Colour")) + '</h1>');
+
+				$('#colourChangerHolder')
+					.height($('.featherlight-content').height() - $('#x_introH1').outerHeight())
+					.css('overflow', 'auto');
+			}
+
 			// get language strings
 			$("#p1").html(x_getLangInfo(x_languageData.find("colourChanger").find("selectTxt")[0], "label", "Please select from the options below") + ":");
 			$("#p2").html(x_getLangInfo(x_languageData.find("colourChanger").find("adviceTxt")[0], "label", "Need more advice? Visit the <a target='_blank' href='https://xot.xerte.org.uk/play.php?template_id=151'>Xerte Online Toolkits guide to accessibility</a>.")+' <a class=\'wcagLink\' target=\'_blank\' href=\'https://xot.xerte.org.uk/play.php?template_id=214#home\'><img class="wcagLogo" src="'+ x_templateLocation + 'common_html5/wcag2.1AA-blue-v.png" alt="'+x_getLangInfo(x_languageData.find("colourChanger").find("wcagLogo")[0], "label", "WCAG WAI-AA logo and link to Xerte accessibility statement")+'" title="'+x_getLangInfo(x_languageData.find("colourChanger").find("wcagTxt")[0], "label", "View the Xerte accessibility statement")+'"> </a>');

modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd

@@ -83,6 +83,7 @@
 
 	<accessibilityGroup type="group" label="Accessibility" optional="true" tooltip="Options related to the Accessibility Options button">
 		<accessibilityLabel label="Tooltip" type="TextInput" defaultValue="Accessibility Options" condition="accessibilityHide!='true'" optional="true" tooltip="The tooltip description for the Accessibility Options button. This text also appears as the title of the dialog box that opens when the button is clicked."/>
+		<accessibilityTarget label="Display In" type="ComboBox" data="dialog,lightbox" options="Dialog,Lightbox" defaultValue="dialog" condition="accessibilityHide!='true'" optional="true" tooltip="Determines where the accessibility options information opens"/>
 		<accessibilityIc type="CheckBox" label="Customise Button Icon" defaultValue="false" conditionTrigger="true" condition="accessibilityHide!='true'" optional="true" tooltip="Override the default icon used on the Accessibility Options button. When checked, you will see a further option allowing you to select the icon used. When left unchecked, the image/icon will be that specified by the theme."/>
 		<accessibilityIcon label="Icon" type="FontAwesome" iconList="hotspot" defaultValue="fas fa-eye-slash" condition="accessibilityHide!='true'&amp;&amp;accessibilityIc=='true'" optional="true"/>
 		<wcagGroup type="group" label="Logo and Link" optional="true" tooltip="The Accessibility Options dialog contains a WCAG logo which links to the Xerte Accessibility statement">

src/Nottingham/wizards/en-GB/basic.xwd

@@ -82,6 +82,7 @@
 
 	<accessibilityGroup type="group" label="Accessibility" optional="true" tooltip="Options related to the Accessibility Options button">
 		<accessibilityLabel label="Tooltip" type="TextInput" defaultValue="Accessibility Options" condition="accessibilityHide!='true'" optional="true" tooltip="The tooltip description for the Accessibility Options button. This text also appears as the title of the dialog box that opens when the button is clicked."/>
+		<accessibilityTarget label="Display In" type="ComboBox" data="dialog,lightbox" options="Dialog,Lightbox" defaultValue="dialog" condition="accessibilityHide!='true'" optional="true" tooltip="Determines where the accessibility options information opens"/>
 		<accessibilityIc type="CheckBox" label="Customise Button Icon" defaultValue="false" conditionTrigger="true" condition="accessibilityHide!='true'" optional="true" tooltip="Override the default icon used on the Accessibility Options button. When checked, you will see a further option allowing you to select the icon used. When left unchecked, the image/icon will be that specified by the theme."/>
 		<accessibilityIcon label="Icon" type="FontAwesome" iconList="hotspot" defaultValue="fas fa-eye-slash" condition="accessibilityHide!='true'&amp;&amp;accessibilityIc=='true'" optional="true"/>
 		<wcagGroup type="group" label="Logo and Link" optional="true" tooltip="The Accessibility Options dialog contains a WCAG logo which links to the Xerte Accessibility statement">

src/Nottingham/wizards/en-GB/template.xwd

@@ -83,6 +83,7 @@
 
 	<accessibilityGroup type="group" label="Accessibility" optional="true" tooltip="Options related to the Accessibility Options button">
 		<accessibilityLabel label="Tooltip" type="TextInput" defaultValue="Accessibility Options" condition="accessibilityHide!='true'" optional="true" tooltip="The tooltip description for the Accessibility Options button. This text also appears as the title of the dialog box that opens when the button is clicked."/>
+		<accessibilityTarget label="Display In" type="ComboBox" data="dialog,lightbox" options="Dialog,Lightbox" defaultValue="dialog" condition="accessibilityHide!='true'" optional="true" tooltip="Determines where the accessibility options information opens"/>
 		<accessibilityIc type="CheckBox" label="Customise Button Icon" defaultValue="false" conditionTrigger="true" condition="accessibilityHide!='true'" optional="true" tooltip="Override the default icon used on the Accessibility Options button. When checked, you will see a further option allowing you to select the icon used. When left unchecked, the image/icon will be that specified by the theme."/>
 		<accessibilityIcon label="Icon" type="FontAwesome" iconList="hotspot" defaultValue="fas fa-eye-slash" condition="accessibilityHide!='true'&amp;&amp;accessibilityIc=='true'" optional="true"/>
 		<wcagGroup type="group" label="Logo and Link" optional="true" tooltip="The Accessibility Options dialog contains a WCAG logo which links to the Xerte Accessibility statement">