MediaWiki:Imagemap-Hightlight.js: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(57 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
// Hervorheben der klickbaren Felder einer Imagemap.
// Modifiziert von:
// http://he.wikipedia.org/wiki/%D7%9E%D7%93%D7%99%D7%94_%D7%95%D7%99%D7%A7%D7%99:Imagemap-Highlight.js
$(document).ready(function() {
$(document).ready(function() {
   
   
Zeile 8: Zeile 12:
// "2d context" attributes used for highlighting.
// "2d context" attributes used for highlighting.
//, 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.9)', strokeStyle: 'black', 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'
// specifically for wikis - redlinks tooltip adds this message
// specifically for wikis - redlinks tooltip adds this message
, he = mw && mw.config && mw.config.get('wgUserLanguage') == 'he'
, de = mw && mw.config && mw.config.get('wgUserLanguage') == 'de'
, pageDoesntExistMessage = ' (page does not exist)'
, pageDoesntExistMessage = ' (Seite existiert nicht)'
                , expandLegend = 'ּShow Legend'
                , expandLegend = 'ּVerknüpfungen anzeigen'
, collapseLegend = 'Hide Legend'
, collapseLegend = 'Verknüpfungen verstecken'
;
;
   
   
   
   
function drawMarker(context, areas) { // this is where the magic is done.
function drawMarker(context, areas) { // this is where the magic is done.
   
   
function drawPoly(coords) {
function drawPoly(coords) {
Zeile 43: Zeile 48:
function mouseAction(e) {
function mouseAction(e) {
var $this = $(this),
var $this = $(this),
context = $this.data('context'),
context = $this.data('context');
activate = e.type == 'mouseover',
$.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 63: 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 + wgServer + "/wiki/", '').replace(/.*\/\//, '').replace(/_/g, ' ');
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 75: Zeile 98:
   
   
function init() {
function init() {
appendCSS('li.' + myClassName + '{white-space:nowrap;}\n' + //css for li element
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 81: 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 103: 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', maxHeight: '24em', maxWidth: w + 'px', overflowY: 'auto', 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 115: Zeile 140:
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('mouseover mouseout', mouseAction)
.bind('mouseenter mouseleave', mouseAction)
.data('areas', [])
.data('areas', [])
.data('context', context)
.data('context', context)
Zeile 121: 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('mouseover mouseout', function(e) {li.trigger(e);})
$(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();
Abgerufen von „https://wiki.fakturax.de/index.php?title=MediaWiki:Imagemap-Hightlight.js“