Fix #867 - New Hotspot highlight appearance option

thexerteproject · Mar 27, 2020 · 1cf3d17 · 1cf3d17
1 parent 536bbf3
commit 1cf3d17
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/connectorHotspotImage.html b/modules/xerte/parent_templates/Nottingham/models_html5/connectorHotspotImage.html
@@ -375,12 +375,14 @@
 
 						})
 						.focusin(function() {
-							$(this)
-								.addClass("highlight");
-							})
+								$(this)
+									.addClass("highlight");
+								$(this).mapster('highlight');
+						})
 						.focusout(function() {
-							$(this)
-								.removeClass("highlight")
+								$(this)
+									.removeClass("highlight");
+								$("img").mapster('highlight', false);
 							})
 						.keypress(function(e) {
 							var charCode = e.charCode || e.keyCode;
@@ -437,10 +439,10 @@
 							fill: false,
 							fillColor: fillColor.substr(1),
 							fillOpacity: fillOpacity,
-							stroke: false,
+							stroke: true,
 							strokeColor: highlightColour.substr(1),
-							strokeOpacity: strokeOpacity,
-							strokeWidth: strokeWidth
+							strokeOpacity: (strokeOpacity > 0 ? strokeOpacity : 1),
+							strokeWidth: (strokeWidth == 0? 1 : strokeWidth * 2)
 						},
 				render_select:
 						{

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/dragDropLabel.html b/modules/xerte/parent_templates/Nottingham/models_html5/dragDropLabel.html
@@ -39,7 +39,7 @@
             }
             submitBtnTxt = x_currentPageXML.getAttribute("submitText") != undefined && x_currentPageXML.getAttribute("submitText") != "" ? x_currentPageXML.getAttribute("submitText") : "Submit";
 
-        }
+        };
 
         // function called every time the size of the LO is changed
         this.sizeChanged = function(firstLoad) {
@@ -80,15 +80,15 @@
                     });
                 });
             }
-        }
+        };
 
         this.leavePage = function() {
             if ($(x_currentPageXML).children().length > 0) {
                 if (!this.checked) {
                     this.showFeedBackandTrackResults();
                 }
             }
-        }
+        };
 
         this.init = function() {
             // store strings used to give titles to labels and targets when keyboard is being used (for screen readers)
@@ -161,6 +161,19 @@
                 $("#submitBtn").hide();
             }
             this.sizeChanged(true);
+            // Setup css for highlighting focus
+            var borderwidth="1px";
+            if (x_currentPageXML.getAttribute("showHighlight") != "false") {
+                borderwidth = "2px";
+            }
+            var highlightColour = "yellow";
+            if (x_currentPageXML.getAttribute("highlightColour") != undefined && x_currentPageXML.getAttribute("highlightColour") != "") {
+                highlightColour = x_getColour(x_currentPageXML.getAttribute("highlightColour"));
+            }
+            var style = "<style>div.highlight { background-image: none;}";
+            style += " #targetHolder .target.highlight{border: " + borderwidth + " solid " + highlightColour + " !important;}";
+            style += " #targetHolder .target.highlight:focus { outline: none;} </style>";
+            $("#targetHolder").prepend(style);
         };
 
         this.startTracking = function() {
@@ -409,7 +422,7 @@
                             .off("click");
                 }
             }
-        }
+        };
 
         this.imgLoaded = function() {
             // labels have been created and image loaded - can now resize image to fit space and create targets on it
@@ -508,6 +521,7 @@
                     .focusin(function() {
                         $(this)
                                 .addClass("highlight")
+                                .removeClass("border")
                                 .removeClass("transparent");
                         var $pageContents = $("#pageContents");
                         if ($pageContents.data("selectedLabel") != undefined && $pageContents.data("selectedLabel") != "") {
@@ -520,6 +534,9 @@
                                 .addClass("transparent")
                                 .removeClass("highlight")
                                 .attr("title", (tooltips[$(this).index()] != undefined && tooltips[$(this).index()] != "") ? tooltips[$(this).index()] : targetTxt1 + " " + ($(this).index() + 1));
+                        if (x_currentPageXML.getAttribute("showHighlight") != "false") {
+                            $(this).addClass("border");
+                        }
                     })
                     .keypress(function(e) {
                         var charCode = e.charCode || e.keyCode;
@@ -559,7 +576,7 @@
             });
 
             x_pageLoaded();
-        }
+        };
 
         // function called when label dropped on target - by mouse or keyboard
         this.dropLabel = function($thisTarget, $thisLabel) {

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.html b/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.html
@@ -225,14 +225,17 @@
 							x_pageContentsUpdated();
 						})
 						.focusin(function() {
-							$(this)
-								.removeClass("transparent")
-								.addClass("highlight");
+								$(this)
+									.removeClass("transparent")
+									.addClass("highlight");
+									$(this).mapster('highlight');
 							})
 						.focusout(function() {
-							$(this)
-								.removeClass("highlight")
-								.addClass("transparent");
+								$(this)
+									.removeClass("highlight")
+									.addClass("transparent");
+									$("img").mapster('highlight', false);
+
 							})
 						.keypress(function(e) {
 							var charCode = e.charCode || e.keyCode;
@@ -298,10 +301,10 @@
 							fill: false,
 							fillColor: fillColor.substr(1),
 							fillOpacity: fillOpacity,
-							stroke: false,
+							stroke: true,
 							strokeColor: highlightColour.substr(1),
-							strokeOpacity: strokeOpacity,
-							strokeWidth: strokeWidth
+							strokeOpacity: (strokeOpacity > 0 ? strokeOpacity : 1),
+							strokeWidth: (strokeWidth == 0? 1 : strokeWidth * 2)
 						},
 				render_select:
 						{