MediaWiki:Common.js: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
(i'm gonna put in the whole code of the archive tool rather than importing it, just to see if that makes a difference) |
Bongolium500 (talk | contribs) (merged to MediaWiki:Gadget-cs.js) |
||
(208 intermediate revisions by 6 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 | $(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 | |||
}; | |||
function | /* ================ | ||
$(' | {{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");
});
}); */