MediaWiki:Common.js: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
No edit summary |
Bongolium500 (talk | contribs) (merged to MediaWiki:Gadget-cs.js) |
||
(239 intermediate revisions by 7 users not shown) | |||
Line 1: | Line 1: | ||
console.log("Common.js is running"); | |||
/* ================ | |||
TABLE stuff | |||
================ */ | |||
/ | //$("tr:odd").addClass("zebra-stripe"); (adversely affects TOCs for a reason I've not yet determined) | ||
$("table").delegate('td','mouseover mouseleave', function(e) { | |||
if (e.type == 'mouseover') { | |||
$(this).parent().addClass("hover"); | |||
$("colgroup").eq($(this).index()).addClass("hover2"); | |||
} | |||
else { | |||
$(this).parent().removeClass("hover"); | |||
$("colgroup").eq($(this).index()).removeClass("hover2"); | |||
} | |||
}); | |||
/* ================ | |||
ROTATING PICS | |||
helps with infobox | |||
images of characters | |||
with mulitple | |||
actors, principally | |||
[[The Doctor]] and | |||
[[The Master]]. | |||
Also has some helper | |||
CSS elsewhere. | |||
================ | |||
globals defaults:true, window:false, $:false | |||
First of all we need to detect whether browser | |||
supports animation natively or it needs a javascript | |||
polyfill. | |||
The detection code by the courtesy of Christian Heilmann | |||
http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ */ | |||
var animation = false, | |||
elm = document.createElement('detect'), | |||
animationstring = 'animation', | |||
keyframeprefix = '', | |||
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), | |||
pfx = ''; | |||
if( elm.style.animationName ) { animation = true; } | |||
if( animation === false ) { | |||
for( var i = 0; i < domPrefixes.length; i++ ) { | |||
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { | |||
pfx = domPrefixes[ i ]; | |||
animationstring = pfx + 'Animation'; | |||
keyframeprefix = '-' + pfx.toLowerCase() + '-'; | |||
animation = true; | |||
break; | |||
} | |||
} | |||
} | } | ||
function | (function ($) { | ||
{ | $.slowEach = function (array, interval, callback) { | ||
if (!array.length) { | |||
} | return; | ||
} | |||
var i = 0; | |||
function next() { | |||
if (callback.call(array[i], i, array[i]) !== false) { | |||
if (++i < array.length) { | |||
setTimeout(next, interval); | |||
} | |||
} | |||
} | |||
next(); | |||
return array; | |||
}; | |||
$.fn.dissolve = function (options) { | |||
var op = $.extend(defaults, options), | |||
$that = $(this), | |||
interval = op.visibleItemDuration + op.transitionDuration; | |||
return $.slowEach(this, interval, function () { | |||
var $this = $(this); | |||
$this | |||
.animate({ | |||
opacity: 1 | |||
}, op.transitionDuration, function () { | |||
function initCarousel() { | |||
$that.dissolve(options); | |||
} | |||
if ($this.is(':last-child')) { | |||
setTimeout(initCarousel, op.visibleItemDuration); | |||
} | |||
}) | |||
.delay(op.visibleItemDuration) | |||
.animate({ | |||
opacity: 0 | |||
}, op.transitionDuration); | |||
}); | |||
}; | |||
var defaults = { | |||
visibleItemDuration: 4000, | |||
transitionDuration: 1000 | |||
}; | |||
}(window.jQuery)); | |||
$(function () { | |||
if( animation === false ) { | |||
$('.dissolve .item').dissolve({ | |||
// TUNE YOUR CAROUSEL HERE | |||
// duration of an item being visible in miliseconds | |||
visibleItemDuration: 4000, | |||
// duration of a transition between items in miliseconds | |||
transitionDuration: 1000 | |||
}); | |||
} | |||
}); | |||
/* ================ | |||
ARCHIVE TOOL | |||
customisation | |||
} | ================ */ | ||
var ArchiveToolConfig = { | |||
archiveListTemplate: 'ArchCat', | |||
archivePageTemplate: 'ArchPage', | |||
archiveSubpage: 'Archive', | |||
userLang: true | |||
}; | |||
/* ================ | |||
{{pullout}} | |||
Accesability | |||
tweaks | |||
================ */ | |||
$(document).ready(function(){ | |||
$('.pullout-content').each(function(i, obj) { | |||
$(obj).attr("aria-hidden","false"); | |||
var toggle = $(".pullout-handle"); | |||
$(toggle).attr("aria-controls","mw-customcollapsible-pullout"); | |||
$(toggle).attr("title","Hide editor notices"); | |||
$(toggle).attr("aria-label","Hide editor notices"); | |||
}); | |||
}); | |||
$(".pullout-content").on("afterExpand.mw-collapsible", function() { | |||
$(this).attr("aria-hidden","false"); | |||
var toggle = $(".pullout-handle"); | |||
$(toggle).attr("aria-expanded","true"); | |||
$(toggle).attr("title","Hide editor notices"); | |||
$(toggle).attr("aria-label","Hide editor notices"); | |||
}); | |||
$(".pullout-content").on("afterCollapse.mw-collapsible", function() { | |||
$(this).attr("aria-hidden","true"); | |||
var toggle = $(".pullout-handle"); | |||
$(toggle).attr("aria-expanded","false"); | |||
$(toggle).attr("title","Show editor notices"); | |||
$(toggle).attr("aria-label","Show editor notices"); | |||
}); | |||
/* | /* ================ | ||
{{nwlh}} | |||
================ | |||
re-instate if external links are set to open in new tabs | |||
$(document).ready(function(){ | |||
$('NWLH').children("a").each(function(i, obj) { | |||
$(obj).removeAttr("target"); | |||
}); | |||
}); */ |
Latest revision as of 21:10, 9 April 2024
console.log("Common.js is running");
/* ================
TABLE stuff
================ */
//$("tr:odd").addClass("zebra-stripe"); (adversely affects TOCs for a reason I've not yet determined)
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover2");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover2");
}
});
/* ================
ROTATING PICS
helps with infobox
images of characters
with mulitple
actors, principally
[[The Doctor]] and
[[The Master]].
Also has some helper
CSS elsewhere.
================
globals defaults:true, window:false, $:false
First of all we need to detect whether browser
supports animation natively or it needs a javascript
polyfill.
The detection code by the courtesy of Christian Heilmann
http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ */
var animation = false,
elm = document.createElement('detect'),
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '';
if( elm.style.animationName ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
(function ($) {
$.slowEach = function (array, interval, callback) {
if (!array.length) {
return;
}
var i = 0;
function next() {
if (callback.call(array[i], i, array[i]) !== false) {
if (++i < array.length) {
setTimeout(next, interval);
}
}
}
next();
return array;
};
$.fn.dissolve = function (options) {
var op = $.extend(defaults, options),
$that = $(this),
interval = op.visibleItemDuration + op.transitionDuration;
return $.slowEach(this, interval, function () {
var $this = $(this);
$this
.animate({
opacity: 1
}, op.transitionDuration, function () {
function initCarousel() {
$that.dissolve(options);
}
if ($this.is(':last-child')) {
setTimeout(initCarousel, op.visibleItemDuration);
}
})
.delay(op.visibleItemDuration)
.animate({
opacity: 0
}, op.transitionDuration);
});
};
var defaults = {
visibleItemDuration: 4000,
transitionDuration: 1000
};
}(window.jQuery));
$(function () {
if( animation === false ) {
$('.dissolve .item').dissolve({
// TUNE YOUR CAROUSEL HERE
// duration of an item being visible in miliseconds
visibleItemDuration: 4000,
// duration of a transition between items in miliseconds
transitionDuration: 1000
});
}
});
/* ================
ARCHIVE TOOL
customisation
================ */
var ArchiveToolConfig = {
archiveListTemplate: 'ArchCat',
archivePageTemplate: 'ArchPage',
archiveSubpage: 'Archive',
userLang: true
};
/* ================
{{pullout}}
Accesability
tweaks
================ */
$(document).ready(function(){
$('.pullout-content').each(function(i, obj) {
$(obj).attr("aria-hidden","false");
var toggle = $(".pullout-handle");
$(toggle).attr("aria-controls","mw-customcollapsible-pullout");
$(toggle).attr("title","Hide editor notices");
$(toggle).attr("aria-label","Hide editor notices");
});
});
$(".pullout-content").on("afterExpand.mw-collapsible", function() {
$(this).attr("aria-hidden","false");
var toggle = $(".pullout-handle");
$(toggle).attr("aria-expanded","true");
$(toggle).attr("title","Hide editor notices");
$(toggle).attr("aria-label","Hide editor notices");
});
$(".pullout-content").on("afterCollapse.mw-collapsible", function() {
$(this).attr("aria-hidden","true");
var toggle = $(".pullout-handle");
$(toggle).attr("aria-expanded","false");
$(toggle).attr("title","Show editor notices");
$(toggle).attr("aria-label","Show editor notices");
});
/* ================
{{nwlh}}
================
re-instate if external links are set to open in new tabs
$(document).ready(function(){
$('NWLH').children("a").each(function(i, obj) {
$(obj).removeAttr("target");
});
}); */