MediaWiki:Common.js: Redaktələr arasındakı fərq
Redaktənin izahı yoxdur |
Teq: Geri qaytarma |
||
Sətir 776: | Sətir 776: | ||
} | } | ||
/** | /** | ||
* imgToggle | * imgToggle | ||
Sətir 820: | Sətir 812: | ||
} ); | } ); | ||
} | } | ||
); | |||
$(function() { | |||
var | |||
//add this class to all elements created by the script. the reason is that we call the script again on | |||
//window resize, and use the class to remove all the "artefacts" we created in the previous run. | |||
myClassName = 'imageMapHighlighterArtefacts', | |||
liHighlightClass = 'liHighlighting', | |||
specialAreaMark = 'area_mark', | |||
specialLiClassesMark = 'list_classes', | |||
specialAreaMarkFile = 'area_mark_file', | |||
// "2d context" attributes used for highlighting. | |||
areaHighLighting = { | |||
fillStyle: 'rgba(0,0,0,0.35)', | |||
strokeStyle: 'yellow', | |||
lineJoin: 'round', | |||
lineWidth: 2 | |||
}, | |||
//every imagemap that wants highlighting, should reside in a div of this 'class': | |||
hilightDivMarker = '.imageMapHighlighter', | |||
// specifically for wikis - redlinks tooltip adds this message | |||
ru = mw && mw.config && mw.config.get('wgUserLanguage') == 'ru', | |||
expandLegend = ru ? 'показать ссылки текстом' : 'sıyahını aç', | |||
collapseLegend = ru ? 'скрыть ссылки текстом' : 'siyahını bağla', | |||
files = []; | |||
function drawMarker(context, areas) { // this is where the magic is done. | |||
function drawPoly(coords) { | |||
context.moveTo(coords.shift(), coords.shift()); | |||
while (coords.length) | |||
context.lineTo(coords.shift(), coords.shift()); | |||
} | |||
for (var i in areas) { | |||
var coords = areas[i].coords.split(','); | |||
context.beginPath(); | |||
switch (areas[i].shape) { | |||
case 'rect': | |||
drawPoly([coords[0], coords[1], coords[0], coords[3], coords[2], coords[ | |||
3], coords[2], coords[1]]); | |||
break; | break; | ||
case 'circle': | case 'circle': | ||
Sətir 962: | Sətir 995: | ||
infoIcon.css({ | infoIcon.css({ | ||
position: 'relative' | position: 'relative' | ||
}); // set position | }); // set position to info icon | ||
var ol = $('<ol>', { | |||
'class': myClassName | |||
}) | |||
.css({ | |||
clear: 'both', | |||
margin: 0, | |||
listStyle: 'none', | |||
maxWidth: w + 'px', | |||
position: 'relative' | |||
}) | |||
.data(specialAreaMark, specialHighlight) | |||
.data(specialAreaMarkFile, specialHover) | |||
.data('context', context); | |||
var oldiv = $('<div>') | |||
.html(ol) | |||
.css({ | |||
clear: 'both', | |||
margin: 0, | |||
listStyle: 'none', | |||
maxWidth: w + 'px', | |||
position: 'relative' | |||
}) | |||
.attr({ | |||
'data-expandtext': expandLegend, | |||
'data-collapsetext': collapseLegend | |||
}); | |||
// ol below image parent, hr below ol. original caption pushed below hr. | |||
parent.after($('<hr>', { | |||
'class': myClassName | |||
}) | |||
.css('clear', 'both')) | |||
.after(oldiv); | |||
$('<hr>', { | |||
'class': myClassName | |||
}) | |||
.css('clear', 'both') | |||
.insertBefore($(oldiv)); | |||
var lis = {}; //collapse areas with same caption to one list item | |||
var someli; // select arbitrary one | |||
$('area', map) | |||
.each(function() { | |||
var text = this.title; | |||
var li = lis[text]; // title already met? use the same li | |||
if (!li) { //no? create a new one. | |||
var href = this.href; | |||
lis[text] = li = $('<li>', { | |||
'class': myClassName | |||
}) | |||
.append($('<a>', { | |||
href: href, | |||
text: text | |||
})) | |||
.on('mouseover mouseout', mouseAction) | |||
.data('areas', []) | |||
.addClass(specialLiClasses && (specialLiClasses[text] || | |||
specialLiClasses['default'])) | |||
.appendTo(ol); | |||
if (specialLiClasses && specialLiClasses[text + ' super']) | |||
li.find('a') | |||
.addClass(specialLiClasses[text + ' super']); | |||
} | |||
li.data('areas') | |||
.push(this); //add the area to the li | |||
someli = li; // whichever - we just want one... | |||
$(this) | |||
.on('mouseover mouseout', function(e) { | |||
li.trigger(e); | |||
}); | |||
}); | |||
if (someli) someli.trigger('mouseout'); | |||
oldiv.addClass('mw-collapsed') | |||
.makeCollapsible(); | |||
ol.attr('style', ol.attr('style') | |||
.replace('none', 'disc')); | |||
} | |||
function init() { | |||
mw.util.addCSS('li.' + myClassName + | |||
'{white-space:nowrap; font-size:88.36%;}\n' + //css for li element | |||
'li.' + liHighlightClass + '{background-color:yellow;}\n' + //css for highlighted li element. | |||
'.rtl li.' + myClassName + '{float: right; margin-left: 1.5em;}\n' + | |||
'.ltr li.' + myClassName + '{float: left; margin-right: 1.5em;}\n' + | |||
hilightDivMarker + ' .mw-collapsible-toggle {float: none}'); | |||
$(hilightDivMarker + ' img') | |||
.each(handleOneMap); | |||
} | |||
//has at least one "imagehighlight" div, and canvas-capable browser: | |||
if ($(hilightDivMarker) | |||
.length && $('<canvas>')[0].getContext) | |||
mw.loader.using(['jquery.makeCollapsible', 'mediawiki.util']) | |||
.done(init); | |||
}); |