Change to imageLens.js (used for image magnification) in preparation …

…for its use in a new page type Amended pages which already use magnifier (textGraphics & bleedingImage) to add extra options to change magnifier size & force it to magnifier above original image size
thexerteproject · Nov 25, 2021 · 2025abe · 2025abe
1 parent 58d7f79
commit 2025abe
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 14 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/imageLens.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/imageLens.js
@@ -1,6 +1,6 @@
 /*  
     http://www.dailycoding.com/
-	with a few changes made for its use in Xerte Online Toolkits (add class to image and magnifier and include offset in calculating magnifier position)
+	with a few changes made for its use in Xerte Online Toolkits (add class to image and magnifier, include offset in calculating magnifier position & allow magnification over original image size)
 */
 (function ($) {
     $.fn.imageLens = function (options) {
@@ -10,9 +10,13 @@
             borderSize	:2,
             borderColor	:"#666666"
         };
+
         var options = $.extend(defaults, options);
+
+		options.radius = options.radius != undefined ? ((options.lensSize / 2 + options.borderSize) / 100) * options.radius : options.lensSize / 2 + options.borderSize;
+
         var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
-            + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
+            + "px;float: left;display: none;border-radius: " + String(options.radius)
             + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor 
             + ";background-repeat: no-repeat;position: absolute;cursor: none;";
 
@@ -35,6 +39,18 @@
             $(imageTag).load(function () {
                 widthRatio = $(this).width() / obj.width();
                 heightRatio = $(this).height() / obj.height();
+
+				// force magnification even if has to be shown larger than original image
+				if (options.force != undefined && options.force != false) {
+					if (widthRatio <= options.force) {
+						$(this).width(obj.width() * options.force);
+						$(this).height(obj.height() * options.force);
+						widthRatio = $(this).width() / obj.width();
+						heightRatio = $(this).height() / obj.height();
+					}
+				}
+
+				target.css('background-size', $(this).width() + 'px ' + $(this).height() + 'px');
             }).appendTo($(this).parent());
 
             target.css({ backgroundImage: "url('" + imageSrc + "')" });

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/bleedingImage.html b/modules/xerte/parent_templates/Nottingham/models_html5/bleedingImage.html
@@ -213,11 +213,29 @@
 		}
 
 		this.setUpMagnifier = function() {
-			if (x_currentPageXML.getAttribute("magnifier") == "true") {
+			if (x_currentPageXML.getAttribute("magnifier") == "true" && x_browserInfo.touchScreen != true) {
 				$(".magnifier").remove();
 				$(".magnifiedImg").remove();
-				$("#pageImg").imageLens();
+
+				var $pageImg = $("#pageImg"),
+					imageLensInfo = {};
+
+				if (x_currentPageXML.getAttribute('magnifierSize') != undefined) {
+					imageLensInfo.lensSize = x_currentPageXML.getAttribute('magnifierSize');
+				}
+
+				// force magnification to always work even if goes larger than original
+				if (x_currentPageXML.getAttribute('magnifierForce') == 'true') {
+					imageLensInfo.force = 1.3;
+				}
+
+				// if force magnification isn't on, don't magnify if not scaled to less that 80% of original image
+				if (x_currentPageXML.getAttribute('magnifierForce') == 'true' || ($pageImg.data("origSize") != undefined && $pageImg.width() / $pageImg.data("origSize")[0] < 0.8)) {
+					$pageImg.imageLens(imageLensInfo);
+
+				}
 			}
+
 		}
 	}
 

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/textGraphics.html b/modules/xerte/parent_templates/Nottingham/models_html5/textGraphics.html
@@ -236,10 +236,22 @@
 				$(".magnifier").remove();
 				$(".magnifiedImg").remove();
 
-				var $pageImg = $("#pageImg");
-				if ($pageImg.data("origSize") != undefined && $pageImg.width() / $pageImg.data("origSize")[0] < 0.8) {
-					// don't magnify if not scaled to less that 80% of original image
-					$pageImg.imageLens();
+				var $pageImg = $("#pageImg"),
+					imageLensInfo = {};
+
+				if (x_currentPageXML.getAttribute('magnifierSize') != undefined) {
+					imageLensInfo.lensSize = x_currentPageXML.getAttribute('magnifierSize');
+				}
+
+				// force magnification to always work even if goes larger than original
+				if (x_currentPageXML.getAttribute('magnifierForce') == 'true') {
+					imageLensInfo.force = 1.3;
+				}
+
+				// if force magnification isn't on, don't magnify if not scaled to less that 80% of original image
+				if (x_currentPageXML.getAttribute('magnifierForce') == 'true' || ($pageImg.data("origSize") != undefined && $pageImg.width() / $pageImg.data("origSize")[0] < 0.8)) {
+					$pageImg.imageLens(imageLensInfo);
+
 				}
 			}
 		}

diff --git a/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd b/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd
@@ -844,7 +844,12 @@
 		<tip label="Description" type="TextInput"/>
 	</image>
 
-	<magnifier label="Magnifier" type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+	<magnifierGroup type="group" label="Image Magnification" optional="true">
+		<magnifier label="Magnifier" type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>
+		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>
+	</magnifierGroup>
+
     <sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>
 
 	<linkInfo type="group" label="Link" optional="true">
@@ -7105,7 +7110,13 @@
 	<transcriptbuttonlabel label="Transcript Button Label" type="TextInput" wysiwyg="true" divider="true" language="true"/>
 
 	<caption label="Image Caption" type="textInput" defaultValue="Enter a Caption for the Image" optional="true" wysiwyg="true" tooltip="A caption displayed below the image"/>
-	<magnifier label="Magnifier" type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+
+	<magnifierGroup type="group" label="Image Magnification" optional="true">
+		<magnifier label="Magnifier" type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>
+		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>
+	</magnifierGroup>
+
 	<sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>
     <transcript label="Transcript" type="textArea" height="100" optional="true" tooltip="Use in conjunction with the 'sound' optional property"/>    
     <hidePanel label="Hide Panel" type="checkBox" defaultValue="false" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/bleedingImage.xwd b/src/Nottingham/wizards/en-GB/bleedingImage.xwd
@@ -17,7 +17,12 @@
 		<tip label="Description" type="TextInput" />
 	</image>
 
-	<magnifier label="Magnifier"  type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+	<magnifierGroup type="group" label="Image Magnification" optional="true">
+		<magnifier label="Magnifier"  type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>
+		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>
+	</magnifierGroup>
+
     <sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>
 
 	<linkInfo type="group" label="Link" optional="true">

diff --git a/src/Nottingham/wizards/en-GB/template.xwd b/src/Nottingham/wizards/en-GB/template.xwd
@@ -844,7 +844,12 @@
 		<tip label="Description" type="TextInput"/>
 	</image>
 
-	<magnifier label="Magnifier" type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+	<magnifierGroup type="group" label="Image Magnification" optional="true">
+		<magnifier label="Magnifier" type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>
+		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>
+	</magnifierGroup>
+
     <sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>
 
 	<linkInfo type="group" label="Link" optional="true">
@@ -7105,7 +7110,13 @@
 	<transcriptbuttonlabel label="Transcript Button Label" type="TextInput" wysiwyg="true" divider="true" language="true"/>
 
 	<caption label="Image Caption" type="textInput" defaultValue="Enter a Caption for the Image" optional="true" wysiwyg="true" tooltip="A caption displayed below the image"/>
-	<magnifier label="Magnifier" type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+
+	<magnifierGroup type="group" label="Image Magnification" optional="true">
+		<magnifier label="Magnifier" type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>
+		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>
+		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>
+	</magnifierGroup>
+
 	<sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>
     <transcript label="Transcript" type="textArea" height="100" optional="true" tooltip="Use in conjunction with the 'sound' optional property"/>    
     <hidePanel label="Hide Panel" type="checkBox" defaultValue="false" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/textGraphics.xwd b/src/Nottingham/wizards/en-GB/textGraphics.xwd
@@ -1 +1 @@
-<wizard menus="Media">  <pageWizard remove="true" duplicate="false">    <newNodes>          <textGraphics><![CDATA[<textGraphics name="Enter Page Title" align="Left" imagesize="auto" url="Select an Image" tip="Enter a Description for Accessibility" transcriptbuttonlabel="Transcript">Enter text for the page here</textGraphics>]]></textGraphics>        </newNodes>  	    </pageWizard>  <!-- TEXT GRAPHICS SOUND PAGE================================================ -->  <textGraphics menu="Media" menuItem="Graphics and Sound" hint="A page for presenting text and graphics. You can also add an optional sound to this page." label="Page Text" type="text" height="300" icon="icPageWhitePicture" thumb="thumbs/textGraphics.jpg" example="https://xot.xerte.org.uk/play_116?hide=bottom#graphicsandsound" remove="true">    <name label="Page Title" type="TextInput" wysiwyg="true" />    <align label="Align Text" options="Left,Right,Top,Bottom" type="ComboBox"  data="Left,Right,Top,Bottom" defaultValue="Left" width="100"/>		<image type="group" label="Image">		<url label="File" type="media" />		<imagesize label="Size" options="Auto,Actual size,Full screen" type="ComboBox"  data="auto,actual size,full screen" defaultValue="auto" width="100"/>		<tip label="Description" type="TextInput" />	</image>		<transcriptbuttonlabel label="Transcript Button Label" type="TextInput" wysiwyg="true" divider="true" language="true"/>	<caption label="Image Caption" type="textInput" defaultValue="Enter a Caption for the Image" optional="true" wysiwyg="true" tooltip="A caption displayed below the image"/>	<magnifier label="Magnifier"  type="checkBox" defaultValue="false" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>	<sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>    <transcript label="Transcript" type="textArea" height="100" optional="true" tooltip="Use in conjunction with the 'sound' optional property"/>        <hidePanel label="Hide Panel"  type="checkBox" defaultValue="false" optional="true"/>  </textGraphics></wizard>
+<wizard menus="Media">  <pageWizard remove="true" duplicate="false">    <newNodes>          <textGraphics><![CDATA[<textGraphics name="Enter Page Title" align="Left" imagesize="auto" url="Select an Image" tip="Enter a Description for Accessibility" transcriptbuttonlabel="Transcript">Enter text for the page here</textGraphics>]]></textGraphics>        </newNodes>  	    </pageWizard>  <!-- TEXT GRAPHICS SOUND PAGE================================================ -->  <textGraphics menu="Media" menuItem="Graphics and Sound" hint="A page for presenting text and graphics. You can also add an optional sound to this page." label="Page Text" type="text" height="300" icon="icPageWhitePicture" thumb="thumbs/textGraphics.jpg" example="https://xot.xerte.org.uk/play_116?hide=bottom#graphicsandsound" remove="true">    <name label="Page Title" type="TextInput" wysiwyg="true" />    <align label="Align Text" options="Left,Right,Top,Bottom" type="ComboBox"  data="Left,Right,Top,Bottom" defaultValue="Left" width="100"/>		<image type="group" label="Image">		<url label="File" type="media" />		<imagesize label="Size" options="Auto,Actual size,Full screen" type="ComboBox"  data="auto,actual size,full screen" defaultValue="auto" width="100"/>		<tip label="Description" type="TextInput" />	</image>		<transcriptbuttonlabel label="Transcript Button Label" type="TextInput" wysiwyg="true" divider="true" language="true"/>	<caption label="Image Caption" type="textInput" defaultValue="Enter a Caption for the Image" optional="true" wysiwyg="true" tooltip="A caption displayed below the image"/>		<magnifierGroup type="group" label="Image Magnification" optional="true">		<magnifier label="Magnifier"  type="checkBox" defaultValue="true" conditionTrigger="true" optional="true" tooltip="A magnifier which appears as the mouse is moved across the image"/>		<magnifierSize label="Size" type="NumericStepper" min="50" max="500" step="20" defaultValue="100" condition="magnifier!='false'" optional="true" tooltip="The size of the magnifier in pixels"/>		<magnifierForce label="Force Magnification" type="checkbox" defaultValue="false" condition="magnifier!='false'" optional="true" tooltip="By default (when image size is auto), magnification will only work when the image is shown at &lt;80% of the original image size. Forcing magnification will make the magnifier always work, even when the magnified image is larger than the original and may appear fuzzy"/>	</magnifierGroup>		<sound label="Sound" type="media" optional="true" tooltip="Add an audio player below the image"/>    <transcript label="Transcript" type="textArea" height="100" optional="true" tooltip="Use in conjunction with the 'sound' optional property"/>        <hidePanel label="Hide Panel"  type="checkBox" defaultValue="false" optional="true"/>  </textGraphics></wizard>