MediaWiki:Common.js: Difference between revisions
From HorizonXI Wiki
Starfox9507 (talk | contribs) No edit summary |
Starfox9507 (talk | contribs) No edit summary |
||
Line 554: | Line 554: | ||
const collection = document.getElementsByClassName("example"); | const collection = document.getElementsByClassName("example"); | ||
for (let i = 0; i < collection.length; i++) { | for (let i = 0; i < collection.length; i++) { | ||
collection[i]. | collection[i].textContent = VanaTime; | ||
} | } | ||
Revision as of 13:56, 2 November 2023
mw.loader.getScript( 'https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js' ); var tooltips = { debug: false, api: false, types: [], classes: ['basic-tooltip', 'advanced-tooltip'], advancedCounter: 1, events: [], timeouts: [], offsetX: 20, offsetY: 20, waitForImages: true, noCSS: false, flip: false, init: function() { if($(document.body).hasClass('mw-special-InfoboxBuilder')) return; if(location.search.search(/ttdebug=(1|[Tt]rue)/) != -1 || (typeof tooltips_debug != 'undefined' && tooltips_debug)) tooltips.debug = true; url = new URL($('link[rel="canonical"]').attr('href')); if(typeof url == 'undefined' || !url) { console.log('Tooltips: script couldn\'t find required link[rel="canonical"] tag'); tooltips.disabled = true; return false; } tooltips.api = url.host+'/api.php?format=json&action=parse&disablelimitreport=true&prop=text&title='+url.pathname; if(mw.util.getParamValue('uselang')) tooltips.api += '&uselang='+mw.util.getParamValue('uselang'); // Cache tooltip contents on the CDN for 10 minutes for anonymous users tooltips.api += '&maxage=600&smaxage=600' tooltips.api += '&text='; tooltips.types['basic-tooltip'] = {}; tooltips.types['advanced-tooltip'] = {}; if(!tooltips.config()) { console.log('Tooltips: missing config'); tooltips.disabled = true; return false; } var content = $('#WikiaMainContent'); if(!content.length) content = $('#mw-content-text'); if($('#tooltip-wrapper').length === 0) $('<div id="tooltip-wrapper" class="WikiaArticle"></div>').appendTo(document.body); if($('#tooltip-storage').length === 0) $('<div id="tooltip-storage" class="WikiaArticle"></div>').append('<div class="main-tooltip tt-basic-tooltip" id="tooltip-basic-tooltip">Lorem ipsum dolor sit amet</div>').appendTo(content); $('#tooltip-wrapper') .css({'margin':'0px','position':'fixed','height':'auto','min-height':'0','z-index': 6000000,'font-size':'14px'}) .hide(); $('#tooltip-storage') .css({'height':'0px','min-height':'0','visibility':'hidden','overflow':'hidden','position':'static','font-size':'14px'}); $('#tooltip-basic-tooltip').data('type', 'basic-tooltip'); tooltips.applyTooltips(document); mw.hook('wikipage.content').add(function(elem) { tooltips.applyTooltips($(elem)); }); if(typeof tooltips.events == 'string') tooltips.events = [tooltips.events]; for(var x=0; x<tooltips.events.length; x++) { $(window).on(tooltips.events[x], function(ev, elem) { tooltips.applyTooltips(elem || this) }) } if(tooltips.debug) { $('#tooltip-wrapper').css({'background-color':'rgba(255,0,0,0.2)'}); $('#tooltip-storage').css({'background-color':'rgba(0,255,0,0.2)','height':'500px','overflow-y':'scroll','visibility':'visible'}); } }, config: function() { if(typeof tooltips_list != 'undefined') { $(tooltips_list).each(function(i, v) { tooltips.addType(v) }); } if(typeof tooltips_config == 'object') { tooltips.offsetX = tooltips_config.offsetX || tooltips.offsetX; tooltips.offsetY = tooltips_config.offsetY || tooltips.offsetY; tooltips.waitForImages = (tooltips_config.waitForImages || tooltips.waitForImages) && true; tooltips.noCSS = tooltips_config.noCSS || tooltips.noCSS; tooltips.events = tooltips_config.events || tooltips.events; } return true; }, applyTooltips: function(elem) { $(elem).find('.'+tooltips.classes.join(', .')).each(function() { $this = $(this); if($this.hasClass('tooltips-init-complete')) return; $this.find('*').removeAttr('title'); $this.mouseover(tooltips.handlers.mouseOver); $this.mouseout(tooltips.handlers.mouseOut); $this.mousemove(tooltips.handlers.mouseMove); $this.data('tooltip-contents', $(this).attr('title')); $this.removeAttr('title'); tooltips.advancedTooltip($this); $(this).addClass('tooltips-init-complete'); }); }, advancedTooltip: function(elem) { elem = $(elem); if(!elem.hasClass('advanced-tooltip')) return; var tips = elem.find('.tooltip-contents'); if(!tips.length) return; var tip = $('<div class="main-tooltip tt-advanced-tooltip"></div>').attr('id', 'tooltip-advanced-tooltip-'+tooltips.advancedCounter).appendTo('#tooltip-storage').data('type', 'advanced-tooltip').append($(tips[0]).contents()).each(tooltips.calcSize); tips.remove(); elem.data('tooltip-id-advanced-tooltip', tooltips.advancedCounter); tooltips.advancedCounter++; }, addType: function(tt) { if(typeof tooltips.types[tt.classname] == 'undefined') { var obj = {}; if(typeof tt.parse == 'string' || typeof tt.parse == 'function') var parse = tt.parse; else var parse = false; if(typeof tt.text == 'string' || typeof tt.text == 'function') var text = tt.text; else var text = false; if(parse) { obj.text = parse; obj.parse = true; } else if(text) { obj.text = text; obj.parse = false; } else return; if(typeof obj.text == 'string') obj.parameters = tooltips.getParameters(obj.text); else obj.parameters = []; if(typeof tt.delay == 'string' || typeof tt.delay == 'number') obj.delay = parseInt(tt.delay); else obj.delay = false; if(typeof tt.onParsed == 'function') obj.onParsed = tt.onParsed; if(typeof tt.onShow == 'function') obj.onShow = tt.onShow; if(typeof tt.onHide == 'function') obj.onHide = tt.onHide; tooltips.types[tt.classname] = obj; if(tooltips.classes.indexOf(tt.classname) == -1) tooltips.classes.push(tt.classname); } else { if(typeof tt.delay == 'string' || typeof tt.delay == 'number') tooltips.types[tt.classname].delay = parseInt(tt.delay); if(typeof tt.onParsed == 'function') tooltips.types[tt.classname].onParsed = tt.onParsed; if(typeof tt.onShow == 'function') tooltips.types[tt.classname].onShow = tt.onShow; if(typeof tt.onHide == 'function') tooltips.types[tt.classname].onHide = tt.onHide; } }, getParameters: function(text) { var list = []; var matches = text.match(/<#\s*[a-z0-9_\-]+?\s*#>/gi); if(matches) { for(var x=0; x<matches.length; x++) { list.push(/<#\s*([a-z0-9_\-]+?)\s*#>/i.exec(matches[x])[1]); } } return list; }, getAPI: function(text) { return tooltips.api+encodeURIComponent(text); }, getText: function(type, elem) { if(typeof tooltips.types[type].text == 'function') { var text = tooltips.types[type].text($(elem)[0]); } else { var text = tooltips.types[type].text; for(var x=0; x<tooltips.types[type].parameters.length; x++) { var param = tooltips.types[type].parameters[x]; var value = $(elem).data(param); if(typeof value == 'undefined') value = ''; var rx = new RegExp('<#\\s*'+param.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")+'\\s*#>', 'g'); text = text.replace(rx, value); } } return text; }, getTooltip: function(type, elem) { elem = $(elem); if(elem.data('tooltip-id-'+type)) return $('#tooltip-'+type+'-'+elem.data('tooltip-id-'+type)); var text = tooltips.getText(type, elem); var id = tooltips.hash(text); elem.data('tooltip-id-'+type, id); var tip = $('#tooltip-'+type+'-'+elem.data('tooltip-id-'+type)); if(tip.length) return tip; tip = $('<div class="main-tooltip"></div>').attr('id', 'tooltip-'+type+'-'+id).appendTo('#tooltip-storage').data('type', type).addClass('tt-'+type); tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1]); tooltips.sameWidth(); if(!tooltips.types[type].parse) { tip.html(text).each(tooltips.calcSize); tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1]); tooltips.sameWidth(); } else { tip.addClass('tooltip-loading'); var api = tooltips.getAPI(text); if(tooltips.debug) tip.html('<pre style="padding:2px 3px;font-size:11px;">'+api+'</pre>'); tip.attr('title', api); $.ajax({ url: api, dataType: 'json', context: tip, success: function(data, textStatus, jqXHR) { $(this).html(data['parse']['text']['*']).each(tooltips.calcSize); tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1]); tooltips.sameWidth(); var images = $(this).find('img'); images.fadeTo(0, 0).one('load', function() { if(tooltips.waitForImages) { $(this).fadeTo(0,1); $(this).addClass('image-loaded'); tip = $(this).closest('.main-tooltip'); if(tip.find('img').length == tip.find('img.image-loaded').length) { tip.removeClass('tooltip-loading').each(tooltips.calcSize); tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1]); tooltips.sameWidth(); } } else $(this).fadeTo(100,1); }); if(tooltips.waitForImages) { if(images.length === 0) { $(this).removeClass('tooltip-loading').each(tooltips.calcSize); } } else { $(this).removeClass('tooltip-loading').each(tooltips.calcSize); } var type = $(this).data('type') || false; if(type && typeof tooltips.types[type].onParsed == 'function') { tooltips.types[type].onParsed.call(this); tip.each(tooltips.calcSize); } if($(this).find('a.new').length > 0) $(this).addClass('has-redlinks'); tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1]); tooltips.sameWidth(); } }); } return tip; }, getBasicTooltip: function(elem) { return $("#tooltip-basic-tooltip").html(mw.html.escape($(elem).data('tooltip-contents')).replace(/\\n/g,'<br />')).each(tooltips.calcSize); }, getAdvancedTooltip: function(elem) { return $("#tooltip-advanced-tooltip-"+$(elem).data('tooltip-id-advanced-tooltip')); }, getTooltips: function(elem) { elem = $(elem); var classes = elem.attr('class').split(' '); var tips = []; for(var i=0;i<classes.length;i++) { var tip = false; if(classes[i] == 'advanced-tooltip') tip = tooltips.getAdvancedTooltip(elem); else if(classes[i] == 'basic-tooltip') tip = tooltips.getBasicTooltip(elem); else if(typeof tooltips.types[classes[i]] != 'undefined') tip = tooltips.getTooltip(classes[i], elem); if(tip) tips.push(tip[0]); } return $(tips); }, setOwnWidth: function() { $this = $(this); if(typeof $this.data('width') != 'undefined') $this.css('width', $this.data('width')+'px'); else $this.css('width', ''); }, calcSize: function() { $this = $(this); $this.css('position', 'absolute'); var temp = $this.css('width'); $this.css('width', ''); $this.data('width', parseFloat(window.getComputedStyle($this[0]).width)); $this.data('height', parseFloat(window.getComputedStyle($this[0]).height)); $this.data('outerwidth', $this.outerWidth(true)); $this.data('outerheight', $this.outerHeight(true)); $this.css('width', $this.data('width')+'px'); $this.css('position', ''); $this.css('width', temp); }, sameWidth: function() { if($("#tooltip-wrapper").find('.main-tooltip').length == 1) { $("#tooltip-wrapper").find('.main-tooltip').each(tooltips.setOwnWidth); } else { var width = 0; $("#tooltip-wrapper").find('.main-tooltip').each(function() { width = Math.max(width, $(this).data('width') || 0); }); $("#tooltip-wrapper").find('.main-tooltip').each(function() { $(this).css('width', width+'px'); }); } }, wrapperPosition: function(mouseX, mouseY) { var tipH = parseInt($("#tooltip-wrapper").css('padding-top')) + parseInt($("#tooltip-wrapper").css('padding-bottom')); var tipW = 0; $("#tooltip-wrapper").find('.main-tooltip').each( function(){ if(typeof $(this).data('outerheight') != 'undefined') tipH += $(this).data('outerheight'); }); $("#tooltip-wrapper").find('.main-tooltip').each( function(){ if(typeof $(this).data('outerwidth') != 'undefined') tipW = Math.max(tipW, $(this).data('outerwidth') + parseInt($("#tooltip-wrapper").css('padding-left')) + parseInt($("#tooltip-wrapper").css('padding-right'))); }); var spaceTop = mouseY - tooltips.offsetY; var spaceLeft = mouseX - tooltips.offsetX; var spaceRight = $(window).width() - mouseX - tooltips.offsetX; var spaceBottom = $(window).height() - mouseY - tooltips.offsetY; var coordX = mouseX + tooltips.offsetX; var coordY = mouseY + tooltips.offsetY; if(spaceRight < tipW && spaceBottom < tipH) { if(spaceLeft >= tipW && tooltips.flip != 'h') { coordX = mouseX - tipW - tooltips.offsetX; tooltips.flip = 'v'; } else if(spaceTop >= tipH) { coordY = mouseY - tipH - tooltips.offsetY; tooltips.flip = 'h'; } else { coordX = mouseX - tipW - tooltips.offsetX; coordY = mouseY - tipH - tooltips.offsetY; tooltips.flip = 'vh'; } } else { tooltips.flip = false; } if ($("#tooltip-wrapper").css('position') == 'fixed') { coordX = coordX-$(window).scrollLeft(); coordY = coordY-$(window).scrollTop(); coordX = Math.min(coordX, $(window).width() - tipW); coordY = Math.min(coordY, $(window).height() - tipH); } else { coordX = Math.min(coordX, $(window).width() - tipW); coordY = Math.min(coordY, $(window).height() - tipH + $(window).scrollTop()); } $("#tooltip-wrapper").css({left: coordX + 'px', top: coordY + 'px'}); }, handlers: { mouseOver: function(e) { tooltips.lastKnownMousePos = [e.pageX, e.pageY]; tooltips.wrapperPosition(e.pageX, e.pageY); var tips = tooltips.getTooltips(this); $("#tooltip-wrapper").prepend(tips).show(); tooltips.sameWidth(); var handle = this; tips.each(function() { var $this = $(this); var type = $(this).data('type') || false; $this.show(); $(window).trigger('scroll');// trigger image lazy loader if(type && typeof tooltips.types[type] != 'undefined' && tooltips.types[type].delay) { $this.hide(); tooltips.timeouts[$(this).attr('id')] = setTimeout(function(){ $this.show(); if(type && typeof tooltips.types[type].onShow == 'function') tooltips.types[type].onShow.call($this[0], handle); }, tooltips.types[type].delay); } else if(type && typeof tooltips.types[type].onShow == 'function') tooltips.types[type].onShow.call(this, handle); }); }, mouseOut: function(e) { tooltips.lastKnownMousePos = [e.pageX, e.pageY]; tooltips.wrapperPosition(e.pageX, e.pageY); var handle = this; $("#tooltip-wrapper").hide(); $("#tooltip-wrapper").find('.main-tooltip').appendTo('#tooltip-storage').each(function() { var type = $(this).data('type') || false; if(type && typeof tooltips.types[type].onHide == 'function') tooltips.types[type].onHide.call(this, handle); $(this).show(); clearTimeout(tooltips.timeouts[$(this).attr('id')]); delete tooltips.timeouts[$(this).attr('id')]; }); }, mouseMove: function(e) { tooltips.lastKnownMousePos = [e.pageX, e.pageY]; tooltips.wrapperPosition(e.pageX, e.pageY); }, }, hash: function(text) { /* Source: https://archive.is/nq2F9 */ var hash = 0, i, char; if (text.length === 0) return hash; for (i = 0, l = text.length; i < l; i++) { char = text.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash |= 0; // Convert to 32bit integer } return hash; }, }; $(tooltips.init); $(document).keydown(function() { var nothingIsFocused = document.activeElement === document.body; if (nothingIsFocused) { if(event.code == 'Slash') { $('#searchInput').focus(); return false; } if(event.code == 'KeyE') { window.location.href = $('*[accesskey="e"]').prop('href'); } // if(event.code == 'KeyF') { // window.location.href = 'https://test.vana.wiki/Special:Upload'; // } if(event.code == 'KeyH') { window.location.href = $('*[accesskey="h"]').prop('href'); } if(event.code == 'KeyM') { window.location.href = $('*[accesskey="m"]').prop('href'); } if(event.code == 'KeyN') { $("#new-page-modal-content,#new-page-modal-background").fadeIn(200); $('#new-page-create-name-input').focus(); return false; } if(event.code == 'Escape') { $("#new-page-modal-content,#new-page-modal-background").fadeOut(200); } } }); $("#new-page-modal-background").click(function () { $("#new-page-modal-content,#new-page-modal-background").fadeOut(200); }); $("#new-page-create-button").click(function () { url = new URL($('link[rel="canonical"]').attr('href')); window.location.href = 'https://'+url.host+'/w/index.php?title=' + $('#new-page-create-name-input').val() + '&action=edit'; }); //********************************************************************* // Javascript below contributes to live Vana'diel Time listed in Sidebar // All code taken from: https://www.pyogenes.com/ffxi/timer/v2.html //*************************** basisDate = new Date(); basisDate.setUTCFullYear(2002, 5, 23); // Set date to 2003-06-23 basisDate.setUTCHours(15, 0, 0, 0); // Set time to 15:00:00.0000 Mndate = new Date(); Mndate.setUTCFullYear(2004, 0, 25); // Set date to 2004-01-25 Mndate.setUTCHours(2, 31, 12, 0); // Set time to 02:31:12.0000 msGameDay = (24 * 60 * 60 * 1000 / 25); // milliseconds in a game day msRealDay = (24 * 60 * 60 * 1000); // milliseconds in a real day VanaDay = new Array("Firesday", "Earthsday", "Watersday", "Windsday", "Iceday", "Lightningday", "Lightsday", "Darksday"); DayColor = new Array("#DD000", "#AAAA00", "#0000DD", "#00AA22", "#7799FF", "#AA00AA", "#AAAAAA", "#333333"); PhaseName = new Array("Full Moon","Waning Gibbous","Last Quarter","Waning Crescent","New Moon","Waxing Crescent","First Quarter","Waxing Gibbous"); function resetGameTime() { // **** Game time var now = new Date(); vanaDate = ((898 * 360 + 30) * msRealDay) + (now.getTime() - basisDate.getTime()) * 25; vYear = Math.floor(vanaDate / (360 * msRealDay)); vMon = Math.floor((vanaDate % (360 * msRealDay)) / (30 * msRealDay)) + 1; vDate = Math.floor((vanaDate % (30 * msRealDay)) / (msRealDay)) + 1; vHour = Math.floor((vanaDate % (msRealDay)) / (60 * 60 * 1000)); vMin = Math.floor((vanaDate % (60 * 60 * 1000)) / (60 * 1000)); vSec = Math.floor((vanaDate % (60 * 1000)) / 1000); vDay = Math.floor((vanaDate % (8 * msRealDay)) / (msRealDay)); if (vYear < 1000) { VanaYear = "0" + vYear; } else { VanaYear = vYear; } if (vMon < 10) { VanaMon = "0" + vMon; } else { VanaMon = vMon; } if (vDate < 10) { VanaDate = "0" + vDate; } else { VanaDate = vDate; } if (vHour < 10) { VanaHour = "0" + vHour; } else { VanaHour = vHour; } if (vMin < 10) { VanaMin = "0" + vMin; } else { VanaMin = vMin; } if (vSec < 10) { VanaSec = "0" + vSec; } else { VanaSec = vSec; } // Moon phase var timenow = new Date(); var localTime = timenow.getTime(); var moonDays = (Math.floor((localTime - Mndate.getTime()) / msGameDay)) % 84; var mnElapsedTime = (localTime - Mndate.getTime()) % msGameDay; // determine phase percentage moonpercent = - Math.round((42 - moonDays) / 42 * 100); if (moonpercent <= -94) { mnPhase = 0; optPhase = 4; toNextPhase = (3 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (38 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= 90) { mnPhase = 0; optPhase = 4; toNextPhase = (87 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (38 + 84 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= -93 && moonpercent <= -62) { mnPhase = 1; optPhase = 4; toNextPhase = (17 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (38 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= -61 && moonpercent <= -41) { mnPhase = 2; optPhase = 4; toNextPhase = (25 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (38 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= -40 && moonpercent <= -11) { mnPhase = 3; optPhase = 4; toNextPhase = (38 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (38 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= -10 && moonpercent <= 6) { mnPhase = 4; optPhase = 0; toNextPhase = (45 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (80 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= 7 && moonpercent <= 36) { mnPhase = 5; optPhase = 0; toNextPhase = (58 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (80 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= 37 && moonpercent <= 56) { mnPhase = 6; optPhase = 0; toNextPhase = (66 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (80 - moonDays) * msGameDay - mnElapsedTime; } else if (moonpercent >= 57 && moonpercent <= 89) { mnPhase = 7; optPhase = 0; toNextPhase = (60 - moonDays) * msGameDay - mnElapsedTime; toOptimalPhase = (80 - moonDays) * msGameDay - mnElapsedTime; } mnpercent = PhaseName[mnPhase] + " (" + Math.abs(moonpercent) + "%)"; if (moonpercent <= 5 && moonpercent >= -10) { mnpercent = "<FONT COLOR='#FF0000'>" + mnpercent+ "</FONT>"; } else if (moonpercent >= 90 || moonpercent <= -95) { mnpercent = "<FONT COLOR='#0000FF'>" + mnpercent+ "</FONT>"; } //nextPhase = "Next phase (" + PhaseName[(mnPhase + 1) % 8] + "): " + formatCountdown(toNextPhase); //nextOptPhase = "Next " + PhaseName[optPhase] + ": " + formatCountdown(toOptimalPhase); //draw to sidebare element VanaTime = "<div><li><b>" + VanaHour + ":" + VanaMin + "</b></li>"; VanaTime += "<li><b><FONT COLOR=" + DayColor[vDay] + ">" + VanaDay[vDay] + " ~ " + mnpercent + "</FONT></b></li>"; VanaTime += "<li><b>" + VanaYear + "-" + VanaMon + "-" + VanaDate + "</b></li></div>"; document.getElementById("n-vanatime").innerHTML = VanaTime; const collection = document.getElementsByClassName("example"); for (let i = 0; i < collection.length; i++) { collection[i].textContent = VanaTime; } setTimeout("resetGameTime()", 50); } resetGameTime(); //*********************************************************************