|
|
| Sətir 776: |
Sətir 776: |
| } | | } |
|
| |
|
| | |
| | /** |
| | * Imagemap Highlight |
| | */ |
| | // На странице есть как минимум один элемент .imageMapHighlighter, а браузер поддерживает <canvas> |
| | if ( $( '.imageMapHighlighter' ).length && $( '<canvas>' )[ 0 ].getContext ) { |
| | importScript( 'MediaWiki:Imagemap-Highlight.js' ); |
| | } |
| /** | | /** |
| * imgToggle | | * imgToggle |
| Sətir 812: |
Sətir 820: |
| } ); | | } ); |
| } | | } |
| | | ); |
| $(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 995: |
Sətir 962: |
| infoIcon.css({ | | infoIcon.css({ |
| position: 'relative' | | position: 'relative' |
| }); // set position to info icon | | }); // set position |
| 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);
| |
| });
| |
