MediaWiki:Imagemap-Hightlight.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
KMA (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
JSC (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (12 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 24: | Zeile 24: | ||
function drawMarker(context, areas) { // this is where the magic is done. | |||
function drawPoly(coords) { | function drawPoly(coords) { | ||
| Zeile 48: | Zeile 48: | ||
function mouseAction(e) { | function mouseAction(e) { | ||
var $this = $(this), | var $this = $(this), | ||
context = $this.data('context'), | context = $this.data('context'); | ||
$.extend(context, areaHighLighting); | |||
var activate = e.type == 'mouseenter'; | |||
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 68: | Zeile 69: | ||
} | } | ||
} | } | ||
function mouseActionAll(e) { | |||
var $this = $(this), | |||
context = $this.data('context'), | |||
map = $this.data('map'); | |||
$.extend(context, areaHighLightingAll); | |||
if (e.type == 'mouseenter') { | |||
$('area', map).each(function() { | |||
var $this = $(this), text = this.title, areas = new Array(); | |||
areas.push(this); | |||
drawMarker(context, areas); | |||
}); | |||
} else { | |||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); | |||
} | |||
} | |||
// massage the area "href" and create a human legible string to be used as the tooltip of "li" | // massage the area "href" and create a human legible string to be used as the tooltip of "li" | ||
function pageOfHref(href, cssClass) { | function pageOfHref(href, cssClass) { | ||
var page = href.replace(document.location.protocol + | var page = href.replace(document.location.protocol + mw.config.get( 'wgServerName' ) + "/wiki/", '').replace(/.*\/\//, '').replace(/_/g, ' '); /*JSC 210819: veraltete Funktion ausgetauscht */ | ||
page = page.replace(/#(.*)/, function(toReplace){return toReplace.replace(/\.([\dA-F]{2})/g, '%$1');}); | page = page.replace(/#(.*)/, function(toReplace){return toReplace.replace(/\.([\dA-F]{2})/g, '%$1');}); | ||
page = decodeURIComponent(page); // used for "title" of legends - just like "normal" wiki links. | page = decodeURIComponent(page); // used for "title" of legends - just like "normal" wiki links. | ||
| Zeile 80: | Zeile 98: | ||
function init() { | function init() { | ||
mw.util.addCSS('li.' + myClassName + '{white-space:nowrap;}\n' + //css for li element | |||
'li.' + liHighlightClass + '{background-color:yellow;}\n' + //css for highlighted li element. | 'li.' + liHighlightClass + '{background-color:yellow;}\n' + //css for highlighted li element. | ||
'.rtl li.' + myClassName + '{float: right; margin-left: 3em;}\n' + | '.rtl li.' + myClassName + '{float: right; margin-left: 3em;}\n' + | ||
| Zeile 86: | Zeile 104: | ||
$(hilightDivMarker+ ' img').each(function() { | $(hilightDivMarker+ ' img').each(function() { | ||
var img = $(this), map = img.siblings('map:first'); | var img = $(this), map = img.siblings('map:first'); | ||
if (map.length === 0) | |||
map = img.closest('span').siblings('map:first'); | |||
if (!('area', map).length) | if (!('area', map).length) | ||
return; //not an imagemap. inside "each" anonymous function, 'return' means "continue". | return; //not an imagemap. inside "each" anonymous function, 'return' means "continue". | ||
| Zeile 108: | Zeile 128: | ||
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', maxWidth: w + 'px', float: 'left', position: 'relative'}) | .css({clear: 'both', margin: 0, listStyle: 'none', maxWidth: w + 'px', float: 'left', position: 'relative', display: 'none'}) | ||
.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); | ||
var lis = {}; //collapse areas with same caption to one list item | var lis = {}; //collapse areas with same caption to one list item | ||
$('area', map).each(function() { | $('area', map).each(function() { | ||
| Zeile 119: | Zeile 139: | ||
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($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass | .append($('<a>', {href: href, title: pageOfHref(href, cssClass), text: text, 'class': cssClass})) | ||
.bind(' | .bind('mouseenter mouseleave', mouseAction) | ||
.data('areas', []) | .data('areas', []) | ||
.data('context', context) | .data('context', context) | ||
| Zeile 126: | Zeile 146: | ||
} | } | ||
li.data('areas').push(this); //add the area to the li | li.data('areas').push(this); //add the area to the li | ||
$(this).bind(' | $(this).bind('mouseenter mouseleave', function(e) {li.trigger(e);}) | ||
}); | }); | ||
$(this).bind('mouseenter mouseleave', mouseActionAll) | |||
.data('context', context) | |||
.data('map', map); | |||
ol.addClass('mw-collapsed') | ol.addClass('mw-collapsed') | ||
.makeCollapsible(); | .makeCollapsible(); | ||