Close #554: New background darkness optional property added to LO & t…

…itle page background images
thexerteproject · Feb 24, 2017 · c051c93 · c051c93
1 parent 36137ca
commit c051c93
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 3 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/css/mainStyles.css b/modules/xerte/parent_templates/Nottingham/common_html5/css/mainStyles.css
@@ -72,7 +72,7 @@ p {
 	z-index:	-10;
 }
 
-#x_background img {
+#x_background img, #x_mainBgDarken  {
 	width:		100%;
 	height:		100%;
 	position:	absolute;

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/css/themeStyles.css b/modules/xerte/parent_templates/Nottingham/common_html5/css/themeStyles.css
@@ -78,6 +78,10 @@ h3 {
 	border-color: orange;
 }
 
+.bgDarken {
+	background-color: black;
+}
+
 /* see pngs in modules/xerte/parent_templates/Nottingham/common_html5 to see how replacement images for buttons should be made (with 4 states in one image file) */
 /* the easiest way is to keep button dimensions the same (42 x 40px) so background-positions below don't need adjusting */
 

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -945,6 +945,13 @@ function x_continueSetUp() {
 				"filter"	:"alpha(opacity=" + alpha + ")"
 			});
 		}
+		if (x_params.backgroundDark != undefined) {
+			$x_background.append('<div id="x_mainBgDarken" class="bgDarken" />');
+			$("#x_mainBgDarken").css({
+				"opacity"	:Number(x_params.backgroundDark/100),
+				"filter"	:"alpha(opacity=" + x_params.backgroundDark + ")"
+			});
+		}
 	}
 
 	// store language data for mediaelement buttons - use fallbacks in mediaElementText array if no lang data
@@ -1142,7 +1149,7 @@ function x_changePage(x_gotoPage) {
 
     if ($x_pageDiv.children().length > 0) {
         // remove everything specific to previous page that's outside $x_pageDiv
-        $("#pageBg").remove();
+        $("#pageBg, #pageBgDarken").remove();
 		$("#x_mainBg").show();
         $(".x_pageNarration").remove(); // narration flash / html5 audio player
         $("body div.me-plugin:not(#x_pageHolder div.me-plugin)").remove();

diff --git a/modules/xerte/parent_templates/Nottingham/data.xwd b/modules/xerte/parent_templates/Nottingham/data.xwd
@@ -40,6 +40,7 @@
     <controller optional="true" label="Custom Interface" type="media" flashonly="true"/>
     <background optional="true" type="media" label="Background Image"/>
     <backgroundopacity optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Opacity"/>
+	<backgroundDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<backgroundGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <stylesheet optional="true" type="Media" label="Stylesheet"/>
 	<styles optional="true" type="script" height="200" label="Styles"/>
@@ -2087,6 +2088,7 @@
 
     <bgImage label="Background Image" type="media" optional="true"/>
     <bgImageAlpha label="Background Opacity" type="NumericStepper" min="10" max="100" step="10" defaultValue="50" optional="true"/>
+	<bgImageDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<bgImageGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <bgImageVAlign label="Background Vert Align" options="Top,Middle,Bottom" type="ComboBox" width="120" data="top,middle,bottom" defaultValue="middle" optional="true"/>
     <bgImageHAlign label="Background Horiz Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,centre,right" defaultValue="centre" optional="true"/>

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/title.html b/modules/xerte/parent_templates/Nottingham/models_html5/title.html
@@ -180,6 +180,15 @@
 				});
 
 			$x_background.append($pageBg);
+
+			if (x_currentPageXML.getAttribute("bgImageDark") != undefined) {
+				$x_background.append('<div id="pageBgDarken" class="bgDarken" />');
+				$("#pageBgDarken").css({
+					"opacity"	:Number(x_currentPageXML.getAttribute("bgImageDark")/100),
+					"filter"	:"alpha(opacity=" + x_currentPageXML.getAttribute("bgImageDark") + ")"
+				});
+			}
+
 			$pageBg.fadeIn();
 
 			if (x_currentPageXML.getAttribute("bgImageGrey") == "true") {
@@ -211,6 +220,12 @@
 		margin-left:	-10px;
 	}
 
+	#pageBgDarken  {
+		width:		100%;
+		height:		100%;
+		position:	absolute;
+	}
+
 </style>
 
 <div id="pageContents" class="titlePageTxt">

diff --git a/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd b/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd
@@ -40,6 +40,7 @@
     <controller optional="true" label="Custom Interface" type="media" flashonly="true"/>
     <background optional="true" type="media" label="Background Image"/>
     <backgroundopacity optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Opacity"/>
+	<backgroundDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<backgroundGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <stylesheet optional="true" type="Media" label="Stylesheet"/>
 	<styles optional="true" type="script" height="200" label="Styles"/>
@@ -2087,6 +2088,7 @@
 
     <bgImage label="Background Image" type="media" optional="true"/>
     <bgImageAlpha label="Background Opacity" type="NumericStepper" min="10" max="100" step="10" defaultValue="50" optional="true"/>
+	<bgImageDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<bgImageGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <bgImageVAlign label="Background Vert Align" options="Top,Middle,Bottom" type="ComboBox" width="120" data="top,middle,bottom" defaultValue="middle" optional="true"/>
     <bgImageHAlign label="Background Horiz Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,centre,right" defaultValue="centre" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/basic.xwd b/src/Nottingham/wizards/en-GB/basic.xwd
@@ -39,6 +39,7 @@
     <controller optional="true" label="Custom Interface" type="media" flashonly="true"/>
     <background optional="true" type="media" label="Background Image"/>
     <backgroundopacity optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Opacity"/>
+	<backgroundDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<backgroundGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <stylesheet optional="true" type="Media" label="Stylesheet"/>
 	<styles optional="true" type="script" height="200" label="Styles"/>

diff --git a/src/Nottingham/wizards/en-GB/template.xwd b/src/Nottingham/wizards/en-GB/template.xwd
@@ -40,6 +40,7 @@
     <controller optional="true" label="Custom Interface" type="media" flashonly="true"/>
     <background optional="true" type="media" label="Background Image"/>
     <backgroundopacity optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Opacity"/>
+	<backgroundDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<backgroundGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <stylesheet optional="true" type="Media" label="Stylesheet"/>
 	<styles optional="true" type="script" height="200" label="Styles"/>
@@ -2087,6 +2088,7 @@
 
     <bgImage label="Background Image" type="media" optional="true"/>
     <bgImageAlpha label="Background Opacity" type="NumericStepper" min="10" max="100" step="10" defaultValue="50" optional="true"/>
+	<bgImageDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>
 	<bgImageGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>
     <bgImageVAlign label="Background Vert Align" options="Top,Middle,Bottom" type="ComboBox" width="120" data="top,middle,bottom" defaultValue="middle" optional="true"/>
     <bgImageHAlign label="Background Horiz Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,centre,right" defaultValue="centre" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/title.xwd b/src/Nottingham/wizards/en-GB/title.xwd
@@ -1 +1 @@
-<wizard menus="Text">  <pageWizard remove="true" duplicate="false">    <newNodes>        <title><![CDATA[<title name="Enter Page Title" size="30">Enter title here</title>]]></title>     </newNodes>  </pageWizard>  <!-- TITLE PAGE ============================== -->  <title menu="Text" menuItem="Title Page" hint="A simple page for displaying a title." label="Title Text" icon="icPageWhiteText" thumb="thumbs/title.jpg" type="text" height="100" remove="true">    <name label="Page Title" type="TextInput" wysiwyg="true"/>    <size label="Text Size" options="20,24,30,36,40,48,70" type="ComboBox" data="20,24,30,36,40,48,70" defaultValue="30" width="100"/> 	    <bgImage label="Background Image" type="media" optional="true"/>    <bgImageAlpha label="Background Opacity" type="NumericStepper" min="10" max="100" step="10" defaultValue="50" optional="true"/>	<bgImageGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>    <bgImageVAlign label="Background Vert Align" options="Top,Middle,Bottom" type="ComboBox" width="120"  data="top,middle,bottom" defaultValue="middle" optional="true"/>    <bgImageHAlign label="Background Horiz Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,centre,right" defaultValue="centre" optional="true"/>    <bgImageVConstrain label="Background Max Height" type="NumericStepper" min="10" max="500" step="10" defaultValue="500" optional="true"/>    <bgImageHConstrain label="Background Max Width" type="NumericStepper" min="10" max="800" step="10" defaultValue="800" optional="true"/>    <titleVAlign label="Title Vertical Align" options="Top,Middle,Bottom" type="ComboBox" width="120" data="20,200,400" defaultValue="200" optional="true"/>    <titleHAlign label="Title Horizontal Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,center,right" defaultValue="center" optional="true"/>    <titleTextColour label="Title Text Colour" type="ColourPicker" defaultValue="0x016A71" optional="true" deprecated="This property is deprecated. You can change the title's colour in the text toolbar."/>  </title></wizard>
+<wizard menus="Text">  <pageWizard remove="true" duplicate="false">    <newNodes>        <title><![CDATA[<title name="Enter Page Title" size="30">Enter title here</title>]]></title>     </newNodes>  </pageWizard>  <!-- TITLE PAGE ============================== -->  <title menu="Text" menuItem="Title Page" hint="A simple page for displaying a title." label="Title Text" icon="icPageWhiteText" thumb="thumbs/title.jpg" type="text" height="100" remove="true">    <name label="Page Title" type="TextInput" wysiwyg="true"/>    <size label="Text Size" options="20,24,30,36,40,48,70" type="ComboBox" data="20,24,30,36,40,48,70" defaultValue="30" width="100"/> 	    <bgImage label="Background Image" type="media" optional="true"/>    <bgImageAlpha label="Background Opacity" type="NumericStepper" min="10" max="100" step="10" defaultValue="50" optional="true"/>	<bgImageDark optional="true" type="NumericStepper" min="0" max="100" step="1" defaultValue="50" label="Background Darkness"/>	<bgImageGrey optional="true" type="CheckBox" label="Background Greyscale" defaultValue="true"/>    <bgImageVAlign label="Background Vert Align" options="Top,Middle,Bottom" type="ComboBox" width="120"  data="top,middle,bottom" defaultValue="middle" optional="true"/>    <bgImageHAlign label="Background Horiz Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,centre,right" defaultValue="centre" optional="true"/>    <bgImageVConstrain label="Background Max Height" type="NumericStepper" min="10" max="500" step="10" defaultValue="500" optional="true"/>    <bgImageHConstrain label="Background Max Width" type="NumericStepper" min="10" max="800" step="10" defaultValue="800" optional="true"/>    <titleVAlign label="Title Vertical Align" options="Top,Middle,Bottom" type="ComboBox" width="120" data="20,200,400" defaultValue="200" optional="true"/>    <titleHAlign label="Title Horizontal Align" options="Left,Centre,Right" type="ComboBox" width="120" data="left,center,right" defaultValue="center" optional="true"/>    <titleTextColour label="Title Text Colour" type="ColourPicker" defaultValue="0x016A71" optional="true" deprecated="This property is deprecated. You can change the title's colour in the text toolbar."/>  </title></wizard>