Diqqət! 4 aprel 2024-cü il tarixdən saytın yeni versiyası sheki.org domenində fəaliyyət göstərir. Bu köhnə versiyadır və yenilənməsi məhdudlaşdırılıb. Lakin 6 yanvar 2025-ci il tarixədək bu vəziyyətdə internetdə qalacaqdır...

Changes

Jump to navigation Jump to search

MediaWiki:Common.js (başlanğıc kodu nəzərdən keçir)

11:05, 14 mart 2020 versiyası

8.301 bayt əlavə edildi ,  11:05, 14 mart 2020
348 dəyişikliyi WikiSysop (Müzakirə) tərəfindən geri alındı.
Sətir 1: Sətir 1:  +
/* Burada istifadəçilərin hamısı üçün bütün səhifələrdə istənilən JavaScript yüklənəcək */
 
// Switch language variants of messages (from zh)
 
// Switch language variants of messages (from zh)
 
function wgULS(latn,arab){
 
function wgULS(latn,arab){
Sətir 775: Sətir 776:  
}
 
}
   −
  −
/**
  −
* Imagemap Highlight
  −
*/
  −
$(function() {
  −
// На странице есть как минимум один элемент .imageMapHighlighter, а браузер поддерживает <canvas>
  −
if ( $( '.imageMapHighlighter' ).length && $( '<canvas>' )[ 0 ].getContext ) {
  −
importScript( 'MediaWiki:Imagemap-Highlight.js' );
  −
}
   
     /**
 
     /**
 
* 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;
 +
case 'circle':
 +
context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2);
 +
break; //x,y,r,startAngle,endAngle
 +
case 'poly':
 +
drawPoly(coords);
 +
break;
 +
}
 +
context.closePath();
 +
context.stroke();
 +
context.fill();
 +
}
 +
}
 +
 +
function mouseAction(e) {
 +
var $this = $(this),
 +
activate = e.type == 'mouseover',
 +
caption = $this.text(),
 +
ol = $this.parent(),
 +
context = ol.data('context'),
 +
special = ol.data(specialAreaMark),
 +
specialFile = ol.data(specialAreaMarkFile); //read JSON file addition
 +
 +
if (specialFile) {
 +
if (files[specialFile]) {
 +
$.extend(special, files[specialFile]);
 +
always(activate, caption, context, ol, special, $this);
 +
} else {
 +
$.get(mw.util.wikiScript(), {
 +
title: specialFile,
 +
action: 'raw'
 +
})
 +
.done(function(data) {
 +
files[specialFile] = JSON.parse(data);
 +
$.extend(special, files[specialFile]);
 +
})
 +
.always(function() {
 +
always(activate, caption, context, ol, special, $this);
 +
});
 +
}
 +
} else
 +
always(activate, caption, context, ol, special, $this);
 +
}
 +
 +
function always(activate, caption, context, ol, special, $this) {
 +
$this.toggleClass(liHighlightClass, activate); // mark/unmark the list item.
 +
 +
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // prepare for a new day.
 +
 +
ol.find('li')
 +
.each(function() {
 +
var $li = $(this);
 +
var licap = $li.text();
 +
var param;
 +
if (activate && licap === caption) { // highlight!!!
 +
param = special && (special.hover && special.hover[licap]
 +
|| getblocks(special, licap)) || areaHighLighting;
 +
} else {
 +
param = special && special.nover && (special.nover[licap] || special.nover
 +
.default);
 +
}
 +
if (param) {
 +
$.extend(context, param);
 +
drawMarker(context, $li.data('areas'));
 +
}
 +
});
 +
}
 +
 +
function getblocks(special, licap) {
 +
if (special.hoverblocks) {
 +
if (special.hoverblocks[licap])
 +
return special.hoverblocks[licap].value;
 +
for (var key in special.hoverblocks)
 +
if (special.hoverblocks[key] && special.hoverblocks[key].list.indexOf(licap) >=0 )
 +
return special.hoverblocks[key].value;
 +
}
 +
if (special.hover)
 +
return special.hover.default;
 +
}
 +
 +
function handleOneMap() {
 +
var img = $(this),
 +
w = img.width(),
 +
h = img.height(),
 +
infoIcon = img.next(),
 +
parent = img.parent(),
 +
map = img.siblings('map:first'),
 +
dims = {
 +
position: 'absolute',
 +
width: w + 'px',
 +
height: h + 'px',
 +
border: 0,
 +
top: 0,
 +
left: 0
 +
},
 +
specialHighlight = img.closest(hilightDivMarker)
 +
.data(specialAreaMark),
 +
specialLiClasses = img.closest(hilightDivMarker)
 +
.data(specialLiClassesMark),
 +
specialHover = img.closest(hilightDivMarker)
 +
.data(specialAreaMarkFile);
 +
 +
if (!('area', map)
 +
.length)
 +
return; //not an imagemap. inside "each" anonymous function, 'return' means "continue".
 +
 +
var jcanvas = $('<canvas>', {
 +
'class': myClassName
 +
})
 +
.css(dims)
 +
.attr({
 +
width: w,
 +
height: h
 +
});
 +
var bgimg = $('<img>', {
 +
'class': myClassName,
 +
src: img.attr('src')
 +
})
 +
.css(dims); //completely inert image. this is what we see.
 +
var context = $.extend(jcanvas[0].getContext("2d"), areaHighLighting);
 +
 +
// this is where the magic is done: prepare a sandwich of the inert bgimg at the bottom,
 +
// the canvas above it, and the original image on top,
 +
// so canvas won't steal the mouse events.
 +
// pack them all TIGHTLY in a newly minted "relative" div, so when page chnage
 +
// (other scripts adding elements, window resize etc.), canvas and imagese remain aligned.
 +
var div = $('<div>')
 +
.css({
 +
position: 'relative',
 +
width: w + 'px',
 +
height: h + 'px'
 +
});
 +
img.before(div); // put the div just above the image, and ...
 +
div.append(bgimg) // place the background image in the div
 +
.append(jcanvas) // and the canvas. both are "absolute", so they don't occupy space in the div
 +
.append(img); // now yank the original image from the window and place it on the div.
 +
img.fadeTo(1, 0); // make the image transparent - we see canvas and bgimg through it.
 +
// the original, now transparent image is creating our mouse events
 +
 +
infoIcon.css({
 +
position: 'relative'
 +
}); // 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);
 +
});
Mənbə — "https://shaki.info/wiki/Xidməti:MobileDiff/349"

Naviqasiya menyusu