Skip to content

Commit

Permalink
HTML5 - fixed hotspot highlight appearance bug in IE on several page …
Browse files Browse the repository at this point in the history 
…types

git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@809 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
  • Loading branch information
@FayCross
FayCross committed Apr 19, 2013
1 parent c47730a commit a2e3095
Show file tree
Hide file tree
Showing 15 changed files with 156 additions and 130 deletions.
Binary file modified modules/xerte/parent_templates/Nottingham/common_html5/arrow.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 9 additions & 3 deletions modules/xerte/parent_templates/Nottingham/common_html5/css/mainStyles.css
View file
Expand Up @@ -332,9 +332,15 @@ audio {
}

.highlight {
background-color: rgb(220, 220, 220); /* fallback */
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
background-image: url("../highlight.png");
}

.highlightDark {
background-image: url("../highlight_dark.png");
}

.transparent {
background-image: url("../transparent.png");
}

.hidden {
Expand Down
Binary file added modules/xerte/parent_templates/Nottingham/common_html5/highlight.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added modules/xerte/parent_templates/Nottingham/common_html5/highlight_dark.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 19 additions & 3 deletions modules/xerte/parent_templates/Nottingham/models_html5/annotatedDiagram.html
View file
Expand Up @@ -193,7 +193,7 @@
}
}
}
});
})

if (this.tagName == "hotspotGroup") {
var groupXML = this,
Expand All @@ -216,7 +216,7 @@
} else if (shape == "Rectangle") {
$hotspot.css("border-color", highlightColour);
}
$hotspot.css("background-image", "url('" + x_templateLocation + "common_html5/transparent.png" + "')");
$hotspot.addClass("transparent");

// call this function in every model once everything's loaded
x_pageLoaded();
Expand All @@ -240,7 +240,23 @@
})
.click(function() {
$(this).data("listItem").trigger("click");
});
})
.focusin(function() {
$(this)
.removeClass("transparent")
.addClass("highlight");
})
.focusout(function() {
$(this)
.removeClass("highlight")
.addClass("transparent");
})
.keypress(function(e) {
var charCode = e.charCode || e.keyCode;
if (charCode == 32) {
$(this).trigger("click");
}
});
$parent.append($hotspot);
}

Expand Down
14 changes: 5 additions & 9 deletions modules/xerte/parent_templates/Nottingham/models_html5/categories.html
View file
Expand Up @@ -80,12 +80,13 @@
$pageContents.data("selectedLabel").attr("title", labelTxt1);
$pageContents.data("selectedLabel", "");
}
var targetInFocus = $("#dragDropHolder .category.focus");
var targetInFocus = $("#dragDropHolder .category.highlightDark");
if (targetInFocus.length > 0) {
targetInFocus.attr("title", targetTxt1 + " " + targetInFocus.find("h3").html());
}
$("#dragDropHolder .selected").removeClass("selected");
$("#dragDropHolder .focus").removeClass("focus");
$("#dragDropHolder .highlightDark").removeClass("highlightDark");

$("#feedback").hide();
$("#dragDropHolder .tick").remove();
Expand Down Expand Up @@ -142,7 +143,7 @@

$("#textHolder")
.html(x_addLineBreaks(x_currentPageXML.getAttribute("text")))
.css("background-image", "url('" + x_templateLocation + "common_html5/transparent.png')"); /* without the text having a bg the labels strangely aren't selectable in IE */
.addClass("transparent"); /* without the text having a bg the labels strangely aren't selectable in IE */

var $feedback = $("#feedback");
if (x_currentPageXML.getAttribute("feedback") == undefined || x_currentPageXML.getAttribute("feedback") == "") {
Expand Down Expand Up @@ -212,7 +213,7 @@
$("#categoryHolder .category")
.focusin(function(e) {
if ($(e.target).hasClass("category")) {
$(this).addClass("focus");
$(this).addClass("highlightDark");
var $pageContents = $("#pageContents");
if ($pageContents.data("selectedLabel") != undefined && $pageContents.data("selectedLabel") != "") {
$(this).attr("title", targetTxt1 + " " + $(this).find("h3").html() + " - " + targetTxt2);
Expand All @@ -222,7 +223,7 @@
.focusout(function() {
var $pageContents = $("#pageContents");
$(this)
.removeClass("focus")
.removeClass("highlightDark")
.attr("title", targetTxt1 + " " + $(this).find("h3").html());
})
.keypress(function(e) {
Expand Down Expand Up @@ -321,11 +322,6 @@
float: left;
}

#categoryHolder .category.focus {
background-color: rgb(205, 205, 205); /* fallback */
background-color: rgba(0, 0, 0, 0.2);
}

#categoryHolder .category .label {
margin-top: 10px;
}
Expand Down
5 changes: 2 additions & 3 deletions modules/xerte/parent_templates/Nottingham/models_html5/connectorHotspotImage.html
View file
Expand Up @@ -191,7 +191,7 @@

if (hsType != undefined) {
var _this = this,
$hotspot = $('<a class="hotspot" href="#" />');
$hotspot = $('<a class="hotspot transparent" href="#" />');

$hotspot
.attr({
Expand All @@ -202,8 +202,7 @@
width :Math.round(this.getAttribute("w") * scale) + "px",
height :Math.round(this.getAttribute("h") * scale) + "px",
left :Math.round(this.getAttribute("x") * scale) + padding + "px",
top :Math.round(this.getAttribute("y") * scale) + padding + "px",
"background-image" :"url('" + x_templateLocation + "common_html5/transparent.png')" /* without a bg the hotspots aren't selectable in IE */
top :Math.round(this.getAttribute("y") * scale) + padding + "px"
})
.click(function() {
$(".x_popupDialog").parent().detach(); // remove any open dialogs
Expand Down
26 changes: 13 additions & 13 deletions modules/xerte/parent_templates/Nottingham/models_html5/dragDropLabel.html
View file
@@ -1,4 +1,6 @@
<script type="text/javascript">

// ** change so it's not split screen anymore but inline panel - so it stays the width of the image

// pageChanged & sizeChanged functions are needed in every model file
// other functions for model should also be in here to avoid conflicts
Expand Down Expand Up @@ -124,12 +126,13 @@
$pageContents.data("selectedLabel").attr("title", labelTxt1);
$pageContents.data("selectedLabel", "");
}
var targetInFocus = $("#targetHolder .target.focus");
var targetInFocus = $("#targetHolder .target.highlight");
if (targetInFocus.length > 0) {
targetInFocus.attr("title", targetTxt1 + " " + (targetInFocus.index() + 1));
}
$("#dragDropHolder .selected").removeClass("selected");
$("#dragDropHolder .focus").removeClass("focus");
$("#dragDropHolder .highlight").addClass("transparent").removeClass("highlight");

$("#infoHolder").html("");
},
Expand Down Expand Up @@ -231,7 +234,7 @@
xywh = [xywh[0] * scale, xywh[1] * scale, xywh[2] * scale, xywh[3] * scale];

// create target and position it
$('<div class="target"></div>')
$('<div class="target transparent"></div>')
.appendTo($targetHolder)
.attr("title", targetTxt1 + " " + (i + 1))
.data("text", this.getAttribute("text"))
Expand All @@ -250,7 +253,7 @@
var $targets = $("#targetHolder .target");

// add border to targets
if (x_currentPageXML.getAttribute("showHighlight") == "true") {
if (x_currentPageXML.getAttribute("showHighlight") != "false") {
var highlightColour = "yellow";
if (x_currentPageXML.getAttribute("highlightColour") != undefined && x_currentPageXML.getAttribute("highlightColour") != "") {
highlightColour = "#" + x_currentPageXML.getAttribute("highlightColour").substr(2, 6);
Expand All @@ -261,15 +264,16 @@
}

$targets
.css("background-image", "url('" + x_templateLocation + "common_html5/transparent.png')") /* without a bg the hotspots aren't selectable in IE */
.droppable({
drop: function(event, ui) {
dragDropLabel.dropLabel($(this), ui.draggable); // target, label
ui.draggable.data("success", true);
}
})
.focusin(function(e) {
$(this).addClass("focus");
$(this)
.addClass("highlight")
.removeClass("transparent");
var $pageContents = $("#pageContents");
if ($pageContents.data("selectedLabel") != undefined && $pageContents.data("selectedLabel") != "") {
$(this).attr("title", targetTxt1 + " " + ($(this).index() + 1) + " - " + targetTxt2);
Expand All @@ -278,7 +282,8 @@
.focusout(function() {
var $pageContents = $("#pageContents");
$(this)
.removeClass("focus")
.addClass("transparent")
.removeClass("highlight")
.attr("title", targetTxt1 + " " + ($(this).index() + 1));
})
.keypress(function(e) {
Expand Down Expand Up @@ -333,8 +338,8 @@
.css({
"opacity" :1,
"position" :"absolute",
"top" :$thisTarget.position().top + 10,
"left" :$thisTarget.position().left + 10
"top" :$thisTarget.position().top + 2,
"left" :$thisTarget.position().left + 2
})
.off("keypress focusin focusout")
.click(function() {
Expand Down Expand Up @@ -415,11 +420,6 @@
border: 1px solid;
}

#targetHolder .target.focus {
background-color: rgb(205, 205, 205); /* fallback */
background-color: rgba(0, 0, 0, 0.2);
}

</style>

<div id="pageContents">
Expand Down
15 changes: 5 additions & 10 deletions modules/xerte/parent_templates/Nottingham/models_html5/gapFill.html
View file
Expand Up @@ -227,23 +227,22 @@
.width(maxW) // make targets fit longest word before clearing text from them
.height($targetHolder.find(".target").height())
.html("")
.css("background-image", "url('" + x_templateLocation + "common_html5/transparent.png')") /* without a bg the hotspots aren't selectable in IE */
.droppable({
drop: function(event, ui) {
gapFill.dropLabel($(this), ui.draggable); // target, label
}
})
.focusin(function(e) {
var $this = $(this);
$this.addClass("focus");
$this.addClass("highlightDark");
if ($pageContents.data("selectedLabel") != undefined && $pageContents.data("selectedLabel") != "") {
$this.attr("title", targetTxt1 + " " + ($this.data("index") + 1) + " - " + targetTxt2);
}
})
.focusout(function() {
var $this = $(this);
$this
.removeClass("focus")
.removeClass("highlightDark")
.attr("title", targetTxt1 + " " + ($this.data("index") + 1));
})
.keypress(function(e) {
Expand Down Expand Up @@ -302,12 +301,13 @@
$pageContents.data("selectedLabel").attr("title", labelTxt1);
$pageContents.data("selectedLabel", "");
}
var targetInFocus = $("#targetHolder .target.focus");
var targetInFocus = $("#targetHolder .target.highlightDark");
if (targetInFocus.length > 0) {
targetInFocus.attr("title", targetTxt1 + " " + (targetInFocus.index() + 1));
}
$("#dragDropHolder .selected").removeClass("selected");
$("#dragDropHolder .focus").removeClass("focus");
$("#dragDropHolder .highlightDark").removeClass("highlightDark");
}
})
// set up events used when keyboard rather than mouse is used
Expand Down Expand Up @@ -366,7 +366,7 @@

$thisTarget
.removeAttr("title")
.removeClass("highlight focus")
.removeClass("highlight highlightDark")
.addClass("correct")
.html($thisLabel.html())
.off("keypress focusin focusout");
Expand Down Expand Up @@ -398,11 +398,6 @@
margin: 3px 0 5px 0;
}

#targetHolder .target.focus {
background-color: rgb(205, 205, 205); /* fallback */
background-color: rgba(0, 0, 0, 0.2);
}

#targetHolder input {
margin: 5px 0;
text-align: center;
Expand Down

0 comments on commit a2e3095

Please sign in to comment.