A.M.A.N. Trove • Ambuscade • Dynamis Divergence • Geas Fete • High-Tier Battlefields • Master Trials • Monthly Campaigns • Odyssey • Omen • Skirmish • Sortie • Unity • Vagary | The Voracious Resurgence |
Prime Weapons • Ultimate Weapons • Ultimate Augments • Abjurations iL119 • JSE Necks • Divergence Augments • Escutcheons | |
Reforged Armor Artifact: +1 • iL109 • iL119/+2/+3 Relic: +1/+2 • iL109 • iL119/+2/+3 Empyrean: +1/+2 • iL109 • iL119/+2/+3 |
Guides • Crafting • Trusts • Apex Monsters |
MediaWiki:Common.js
From FFXI Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
/** Rotate Table Row Colors ***************************************/
var ts_alternate_row_colors = true;
/* Show All Button */
$('#button-expand-all').click(function() {
if ($('#button-expand-all').hasClass("button-expand-all-hide")) {
$('.collapseButton a:contains("hide")').each(function() {
this.click();
});
} else if ($('#button-expand-all').hasClass("button-expand-all-show")) {
$('.collapseButton a:contains("show")').each(function() {
this.click();
});
}
$(this).text(function(i, v) {
return v === 'Show All Tables' ? 'Hide All Tables' : 'Show All Tables';
});
$('#button-expand-all').toggleClass('button-expand-all-show button-expand-all-hide');
});
/** Green Tabs **/
$( document ).ready( function() {
$( 'ul.tabs li' ).click( function() {
var tab_id = $( this ).attr( 'data-tab-number' );
var tab_group_number = $( this ).attr( 'data-tab-group' );
$( ".group" + tab_group_number ).removeClass( 'current' );
$( this ).addClass( 'current' );
$( "#" + tab_id ).addClass( 'current' );
} );
} );
/** Blue Tabs **/
$( document ).ready( function() {
$( 'ul.tabsb li' ).click( function() {
var tab_id = $( this ).attr( 'data-tab-number' );
var tab_group_number = $( this ).attr( 'data-tab-group' );
$( ".group" + tab_group_number ).removeClass( 'current' );
$( this ).addClass( 'current' );
$( "#" + tab_id ).addClass( 'current' );
} );
} );
/** Trust Counter **/
$( document ).ready(function() {
var trustNumTrue = $('.trusttrue').length;
var trustNumFalse = $('.trustfalse').length;
$( "#TrustCounter" ).text("Trust Obtained: " + trustNumTrue + " / " + (trustNumTrue + trustNumFalse) );
});
/** Blue Magic Counter **/
$( document ).ready(function() {
var blueMagicNumTrue = $('.bluemagictrue').length;
var blueMagicNumFalse = $('.bluemagicfalse').length;
$( "#BlueMagicCounter" ).text("Blue Magic Obtained: " + blueMagicNumTrue + " / " + (blueMagicNumTrue + blueMagicNumFalse) );
});
/** Fish Caught Counter **/
$( document ).ready(function() {
var fishNumTrue = $('.fishcaughttrue').length;
var fishNumFalse = $('.fishcaughtfalse').length;
$( "#FishCaughtCounter" ).text("Fish Caught: " + fishNumTrue + " / " + (fishNumTrue + fishNumFalse) );
});
/** Mementos Counter **/
$( document ).ready(function() {
var mementosNumTrue = $('.mementoscollectedtrue').length;
var mementosNumFalse = $('.mementoscollectedfalse').length;
$( "#mementosCollectedCounter" ).text("Mementos Collected: " + mementosNumTrue + " / " + (mementosNumTrue + mementosNumFalse) );
});
/** Tooltips **/
(function() {
var containerSelector = '#content, article';
var inlineSelector = '.tooltip-source';
var mouseOffset = {
top: 10,
bottom: 0,
left: 10,
right: 0
};
var tooltipCSS = {
position: 'fixed',
'z-index': 1000
};
function getTooltip(element) {
var inlineElement = $(element).closest(inlineSelector);
if (inlineElement.length > 0) {
var tooltipID = inlineElement.attr('id') + '-tooltip';
return $(document.getElementById(tooltipID));
} else {
return $();
}
}
function showTooltip(element) {
var tooltip = getTooltip(element);
tooltip.find('img.lzyPlcHld:not(.lzyLoaded)').trigger('onload');
tooltip.css(tooltipCSS);
tooltip.show();
}
function hideTooltip(element) {
var tooltip = getTooltip(element);
tooltip.hide();
}
function positionTooltip(element, tooltip, mouseX, mouseY) {
var contentArea = getContentArea();
var tooltipHeight = tooltip.outerHeight();
var tooltipWidth = tooltip.outerWidth();
var positionY = mouseY + mouseOffset.top;
var positionX = mouseX + mouseOffset.left;
if ((positionY + tooltipHeight) > contentArea.bottom) {
var spaceAbove = mouseY;
var spaceBelow = (contentArea.bottom - mouseY);
if (spaceAbove > spaceBelow) {
positionY = mouseY - tooltipHeight - mouseOffset.bottom;
}
}
if ((positionX + tooltipWidth) > contentArea.right) {
var spaceLeft = mouseX;
var spaceRight = (contentArea.right - mouseX);
if (spaceLeft > spaceRight) {
positionX = mouseX - tooltipWidth - mouseOffset.right;
}
}
tooltip.css({
left: positionX + 'px',
top: positionY + 'px'
});
}
function getContentArea() {
var container = $(containerSelector);
var containerPosition = container.offset();
var containerMargins = {
top: parseFloat(container.css('margin-top')),
left: parseFloat(container.css('margin-left'))
};
return {
top: containerPosition.top - containerMargins.top,
left: containerPosition.left - containerMargins.left,
bottom: Math.max(container.height(), $(window).height()),
right: containerPosition.left + container.width()
};
}
$(document).ready(function() {
var inlineElements = $(inlineSelector);
inlineElements.each(function() {
$(this).mouseenter(function(event) {
showTooltip(this);
});
$(this).mouseleave(function(event) {
hideTooltip(this);
});
$(this).mousemove(function(event) {
positionTooltip(this, getTooltip(this), event.clientX, event.clientY);
});
});
});
})();
/** Tooltip for Imgpop used on pages like HTBF **/
/*
* jQuery viewportOffset - v0.3 - 2/3/2010
* http://benalman.com/projects/jquery-misc-plugins/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($){var a=$(window);$.fn.viewportOffset=function(){var b=$(this).offset();return{left:b.left-a.scrollLeft(),top:b.top-a.scrollTop()}}})(jQuery);
$( function() {
var targets = $('.mbt-hover'),
target = false,
tooltip = false,
title = false;
targets.bind( 'mouseenter', function()
{
target = $( this );
tip = target.children('.mbt-tooltip');
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
//target.remove('.mbt-tooltip');
//target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip.clone().show() )
.appendTo( target );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 420 );
var pos_left = target.position().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = target.position().top - tooltip.outerHeight() - 20;
pos_topvw = target.viewportOffset().top - tooltip.outerHeight() - 20;
pos_leftvw = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 );
if( pos_leftvw < 0 )
{
pos_left = target.position().left - target.outerWidth() / 2 - 20;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_leftvw + tooltip.outerWidth() > $( window ).width() )
{
pos_left = target.position().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_topvw < 0 )
{
var pos_top = target.position().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 300, function()
{
$( this ).remove();
});
target.children('.mbt-tooltip', tip);
};
target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});
/** Imagemap highlighting **/
$(document).ready(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'
// "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
, he = mw && mw.config && mw.config.get('wgUserLanguage') == 'he'
, expandLegend = he ? 'הצגת מקרא' : 'ּShow Legend'
, collapseLegend = he ? 'הסתרת המקרא' : 'Hide Legend'
;
function drawMarker(context, areas) { // mthis 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);
$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 || areaHighLighting;
} else {
param = special && special.nover && (special.nover[licap] || special.nover.default);
}
if (param) {
$.extend(context, param);
drawMarker(context, $li.data('areas'));
}
});
}
function handleOneMap() {
var img = $(this),
w = img.width(),
h = img.height(),
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);
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
var ol = $('<ol>', {'class': myClassName})
.css({clear: 'both', margin: 0, listStyle: 'none', maxWidth: w + 'px', float: 'left', position: 'relative'})
.attr({'data-expandtext' : expandLegend, 'data-collapsetext': collapseLegend})
.data(specialAreaMark, specialHighlight)
.data('context', context);
// ol below image, hr below ol. original caption pushed below hr.
div.after($('<hr>', {'class': myClassName}).css('clear', 'both'))
.after(ol);
var lis = {}; //collapse areas with same caption to one list item
var someli; // select arbitrary one
$('area', map).each(function() {
var text = mw.html.escape(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);
}
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.type);
});
});
if (someli) someli.trigger('mouseout');
mw.loader.using('jquery.makeCollapsible').then( function () {
ol.addClass('mw-collapsed')
.makeCollapsible();
});
}
function init() {
mw.util.addCSS('li.' + myClassName + '{white-space:nowrap;border:solid 1px transparent;border-radius:6px;}\n' + //css for li element
'li.' + myClassName + '.' + liHighlightClass + '{background-color:yellow;border-color:green;}\n' + //css for highlighted li element.
'.rtl li.' + myClassName + '{float: right; margin-left: 3em;}\n' +
'.ltr li.' + myClassName + '{float: left; margin-right: 3em;}');
$(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 );
});