2.255
Bearbeitungen
MediaWiki:Imagemap-Hightlight.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
MediaWiki:Imagemap-Hightlight.js (Quelltext anzeigen)
Version vom 28. August 2014, 11:05 Uhr
, 11:05, 28. Aug. 2014keine Bearbeitungszusammenfassung
KMA (Diskussion | Beiträge) |
KMA (Diskussion | Beiträge) |
||
| Zeile 13: | Zeile 13: | ||
//, areaHighLighting = {fillStyle: 'rgba(0,0,0,0.35)', strokeStyle: 'yellow', lineJoin: 'round', lineWidth: 2} | //, areaHighLighting = {fillStyle: 'rgba(0,0,0,0.35)', strokeStyle: 'yellow', lineJoin: 'round', lineWidth: 2} | ||
, areaHighLighting = {fillStyle: 'rgba(0,0,0,0.1)', strokeStyle: 'red', lineJoin: 'round', lineWidth: 2} | , areaHighLighting = {fillStyle: 'rgba(0,0,0,0.1)', strokeStyle: 'red', lineJoin: 'round', lineWidth: 2} | ||
, areaHighLightingAll = {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'red', lineJoin: 'round', lineWidth: 2} | |||
//every imagemap that wants highlighting, should reside in a div of this 'class': | //every imagemap that wants highlighting, should reside in a div of this 'class': | ||
, hilightDivMarker = '.imageMapHighlighter' | , hilightDivMarker = '.imageMapHighlighter' | ||
| Zeile 45: | Zeile 46: | ||
} | } | ||
function | function mouseAction(e) { | ||
var $this = $(this), | var $this = $(this), | ||
context = $this.data('context'), | context = $this.data('context'), | ||
activate = | activate = e.type == 'mouseover', | ||
li = $this.prop('tagName') == 'LI'; | li = $this.prop('tagName') == 'LI'; | ||
if (li && activate) { // in this case, we need to test visibility vis a vis scrolling | if (li && activate) { // in this case, we need to test visibility vis a vis scrolling | ||
| Zeile 57: | Zeile 58: | ||
ol.animate({scrollTop: ol.scrollTop() + top - ol.height() / 2}); | ol.animate({scrollTop: ol.scrollTop() + top - ol.height() / 2}); | ||
} | } | ||
$this.toggleClass(liHighlightClass, activate); | |||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); | |||
if (activate) { | if (activate) { | ||
drawMarker(context, $this.data('areas')); | drawMarker(context, $this.data('areas')); | ||
if ($.client.profile().name === 'msie') { // ie9: dimwit needs to be told twice. | if ($.client.profile().name === 'msie') { // ie9: dimwit needs to be told twice. | ||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); | |||
drawMarker(context, $this.data('areas')); | drawMarker(context, $this.data('areas')); | ||
} | } | ||
| Zeile 107: | Zeile 108: | ||
img.fadeTo(1, 0); // make the image transparent - we see canvas and bgimg through it. | img.fadeTo(1, 0); // make the image transparent - we see canvas and bgimg through it. | ||
var ol = $('<ol>', {'class': myClassName}) | var ol = $('<ol>', {'class': myClassName}) | ||
.css({clear: 'both', margin: 0, listStyle: 'none | .css({clear: 'both', margin: 0, listStyle: 'none', maxWidth: w + 'px', float: 'left', position: 'relative'}) | ||
.attr({'data-expandtext' : expandLegend, 'data-collapsetext': collapseLegend}); | .attr({'data-expandtext' : expandLegend, 'data-collapsetext': collapseLegend}); | ||
// ol below image, hr below ol. original caption pushed below hr. | // ol below image, hr below ol. original caption pushed below hr. | ||
div.after($('<hr>', {'class': myClassName}).css('clear', 'both')).after(ol); | div.after($('<hr>', {'class': myClassName}).css('clear', 'both')).after(ol); | ||
| Zeile 119: | Zeile 119: | ||
var href = this.href, cssClass = this['class'] || ''; | var href = this.href, cssClass = this['class'] || ''; | ||
lis[text] = li = $('<li>', {'class': myClassName}) | lis[text] = li = $('<li>', {'class': myClassName}) | ||
.append($(' | .append($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass + ' internal'})) | ||
.bind('mouseover mouseout', mouseAction) | |||
.data('areas', []) | .data('areas', []) | ||
.data('context', context) | .data('context', context) | ||
.appendTo(ol); | |||
} | } | ||
li.data('areas').push(this); //add the area to the li | li.data('areas').push(this); //add the area to the li | ||
$(this).bind('mouseover mouseout', function(e) {li.trigger(e);}) | $(this).bind('mouseover mouseout', function(e) {li.trigger(e);}); | ||
}); | }); | ||
ol.addClass('mw-collapsed') | ol.addClass('mw-collapsed') | ||