https://classic.pgnrp.com/index.php?action=history&feed=atom&title=MediaWiki%3ACommon.js
MediaWiki:Common.js - Revision history
2026-04-08T19:35:55Z
Revision history for this page on the wiki
MediaWiki 1.43.1
https://classic.pgnrp.com/index.php?title=MediaWiki:Common.js&diff=116&oldid=prev
Maegnus: Created page with "(function () { var pageName = mw.config.get("wgPageName"); var skin = mw.config.get("skin"); var isMainPage = mw.config.get("wgIsMainPage"); function onMainPage() { var searchTrigger = document.getElementById( "tg-mainpage-search-trigger" ); var searchInput = document.getElementById("searchInput"); var searchToggle; function onSearchTriggerClick() { if (skin === "citizen") {..."
2025-05-21T06:48:07Z
<p>Created page with "(function () { var pageName = mw.config.get("wgPageName"); var skin = mw.config.get("skin"); var isMainPage = mw.config.get("wgIsMainPage"); function onMainPage() { var searchTrigger = document.getElementById( "tg-mainpage-search-trigger" ); var searchInput = document.getElementById("searchInput"); var searchToggle; function onSearchTriggerClick() { if (skin === "citizen") {..."</p>
<p><b>New page</b></p><div>(function () {<br />
var pageName = mw.config.get("wgPageName");<br />
var skin = mw.config.get("skin");<br />
var isMainPage = mw.config.get("wgIsMainPage");<br />
<br />
function onMainPage() {<br />
var searchTrigger = document.getElementById(<br />
"tg-mainpage-search-trigger"<br />
);<br />
var searchInput = document.getElementById("searchInput");<br />
var searchToggle;<br />
<br />
function onSearchTriggerClick() {<br />
if (skin === "citizen") {<br />
// HACK: Force sticky header to be visible<br />
var isSearchHidden =<br />
document.body.classList.contains("citizen-scroll--down") &&<br />
window.matchMedia("(max-width: 1119px)");<br />
if (isSearchHidden) {<br />
document.body.classList.remove("citizen-scroll--down");<br />
document.body.classList.add("citizen-scroll--up");<br />
}<br />
// Citizen does not have a visible search bar, you need to expand the search card first<br />
// And Citizen will focus the input automatically<br />
searchToggle.open = true;<br />
} else {<br />
// This should work for all skins that has visible search bar<br />
searchInput.focus();<br />
}<br />
}<br />
<br />
// Attach click event listener to search button on the main page<br />
if (searchTrigger && searchInput) {<br />
if (skin === "citizen") {<br />
searchToggle = document.getElementById("citizen-search-details");<br />
}<br />
searchTrigger.addEventListener("click", onSearchTriggerClick);<br />
}<br />
}<br />
<br />
function initSauronEye(container) {<br />
var Eye = {<br />
size: 250,<br />
point: 15,<br />
speed: 100,<br />
pupil: { x: 6, y: 36 },<br />
eye: { x: 100, y: 65 },<br />
data: [],<br />
<br />
Add: function (val) {<br />
return val + Eye.size / 2;<br />
},<br />
<br />
Interval: function (color, distance, value) {<br />
var s = Math.abs(<br />
(color.a - color.b) / (distance.b - distance.a)<br />
);<br />
var v = value - distance.a;<br />
var c = color.a > color.b ? color.a - v * s : color.a + v * s;<br />
return Math.round(c);<br />
},<br />
<br />
Color: function (percent) {<br />
if (percent < 5)<br />
return Eye.Interval(<br />
{ a: 255, b: 180 },<br />
{ a: 0, b: 2 },<br />
percent<br />
);<br />
else if (percent < 10)<br />
return Eye.Interval(<br />
{ a: 180, b: 100 },<br />
{ a: 2, b: 5 },<br />
percent<br />
);<br />
else if (percent < 40)<br />
return Eye.Interval(<br />
{ a: 100, b: 0 },<br />
{ a: 5, b: 30 },<br />
percent<br />
);<br />
else if (percent < 70)<br />
return Eye.Interval(<br />
{ a: 0, b: 100 },<br />
{ a: 30, b: 70 },<br />
percent<br />
);<br />
else if (percent < 75)<br />
return Eye.Interval(<br />
{ a: 100, b: 180 },<br />
{ a: 70, b: 80 },<br />
percent<br />
);<br />
else<br />
return Eye.Interval(<br />
{ a: 180, b: 255 },<br />
{ a: 80, b: 100 },<br />
percent<br />
);<br />
},<br />
<br />
Pifagor: function (x, y) {<br />
return Math.sqrt(x * x + y * y);<br />
},<br />
<br />
Remove: function (radius, max, i) {<br />
if (radius > max) {<br />
Eye.data.splice(i, 1);<br />
}<br />
},<br />
<br />
Write: function (x, y, color, opacity) {<br />
Eye.ctx.fillStyle = "rgba(255," + color + ",0," + opacity + ")";<br />
Eye.ctx.fillRect(Eye.Add(x), Eye.Add(y), 1, 1);<br />
},<br />
<br />
Style: function (point, i) {<br />
var radius = Eye.Pifagor(point.x, point.y);<br />
var percent =<br />
((radius - point.min) / (point.max - point.min)) * 100;<br />
var color = Eye.Color(percent);<br />
var opacity = percent > 70 ? 1 - (percent - 70) / 30 : 1;<br />
<br />
Eye.Write(point.x, point.y, color, opacity);<br />
Eye.Remove(radius, point.max, i);<br />
},<br />
<br />
Move: function (i) {<br />
var point = Eye.data[i];<br />
point.x += point.X;<br />
point.y += point.Y;<br />
Eye.Style(point, i);<br />
},<br />
<br />
Update: function () {<br />
Eye.Fill(0.02);<br />
for (var i = 0; i < Eye.point; i++) {<br />
Eye.Point();<br />
}<br />
for (var j = 0; j < Eye.data.length; j++) {<br />
Eye.Move(j);<br />
}<br />
},<br />
<br />
Draw: function () {<br />
Eye.Update();<br />
requestAnimationFrame(Eye.Draw, Eye.canvas);<br />
},<br />
<br />
Noise: function (value) {<br />
return Math.random() * value - value / 2;<br />
},<br />
<br />
Radius: function (start, end) {<br />
return {<br />
max: Eye.Pifagor(end.x, end.y),<br />
min: Eye.Pifagor(start.x, start.y),<br />
};<br />
},<br />
<br />
Step: function (start, end) {<br />
return {<br />
x: (end.x - start.x) / Eye.speed,<br />
y: (end.y - start.y) / Eye.speed,<br />
};<br />
},<br />
<br />
Position: function (type, angel, noise) {<br />
return {<br />
x: Eye[type].x * Math.cos(angel) + Eye.Noise(noise),<br />
y: Eye[type].y * Math.sin(angel) + Eye.Noise(noise),<br />
};<br />
},<br />
<br />
Point: function () {<br />
var angel = Math.random() * 2 * Math.PI;<br />
var start = Eye.Position("pupil", angel, 5);<br />
var end = Eye.Position("eye", angel, 25);<br />
var radius = Eye.Radius(start, end);<br />
var step = Eye.Step(start, end);<br />
<br />
Eye.data.push({<br />
x: start.x,<br />
y: start.y,<br />
X: step.x,<br />
Y: step.y,<br />
min: radius.min,<br />
max: radius.max,<br />
});<br />
},<br />
<br />
Fill: function (a) {<br />
Eye.ctx.fillStyle = "rgba(0,0,0," + a + ")";<br />
Eye.ctx.fillRect(0, 0, Eye.size, Eye.size);<br />
},<br />
<br />
Init: function () {<br />
Eye.Fill(1);<br />
for (var i = 0; i < Eye.point; i++) {<br />
Eye.Point();<br />
}<br />
Eye.Draw();<br />
},<br />
<br />
Watch: function () {<br />
Eye.canvas = document.getElementById("tg-sauroneye");<br />
Eye.canvas.width = Eye.size;<br />
Eye.canvas.height = Eye.size;<br />
Eye.ctx = Eye.canvas.getContext("2d");<br />
Eye.Init();<br />
},<br />
};<br />
<br />
var canvas = document.createElement("canvas");<br />
canvas.id = "tg-sauroneye";<br />
container.append(canvas);<br />
Eye.Watch();<br />
}<br />
<br />
function init() {<br />
// Wait for page content to be fully loaded<br />
mw.hook("wikipage.content").add(function () {<br />
if (isMainPage) {<br />
onMainPage();<br />
}<br />
<br />
var eyeContainer = document.getElementById(<br />
"tg-sauroneye-container"<br />
);<br />
if (eyeContainer) {<br />
initSauronEye(eyeContainer);<br />
}<br />
});<br />
}<br />
<br />
init();<br />
})();<br />
/* Any JavaScript here will be loaded for all users on every page load. */<br />
(function () {<br />
var pageName = mw.config.get("wgPageName");<br />
var skin = mw.config.get("skin");<br />
var isMainPage = mw.config.get("wgIsMainPage");<br />
<br />
function onMainPage() {<br />
var searchTrigger = document.getElementById(<br />
"tg-mainpage-search-trigger"<br />
);<br />
var searchInput = document.getElementById("searchInput");<br />
var searchToggle;<br />
<br />
function onSearchTriggerClick() {<br />
if (skin === "citizen") {<br />
// HACK: Force sticky header to be visible<br />
var isSearchHidden =<br />
document.body.classList.contains("citizen-scroll--down") &&<br />
window.matchMedia("(max-width: 1119px)");<br />
if (isSearchHidden) {<br />
document.body.classList.remove("citizen-scroll--down");<br />
document.body.classList.add("citizen-scroll--up");<br />
}<br />
// Citizen does not have a visible search bar, you need to expand the search card first<br />
// And Citizen will focus the input automatically<br />
searchToggle.open = true;<br />
} else {<br />
// This should work for all skins that has visible search bar<br />
searchInput.focus();<br />
}<br />
}<br />
<br />
// Attach click event listener to search button on the main page<br />
if (searchTrigger && searchInput) {<br />
if (skin === "citizen") {<br />
searchToggle = document.getElementById("citizen-search-details");<br />
}<br />
searchTrigger.addEventListener("click", onSearchTriggerClick);<br />
}<br />
}<br />
<br />
function initSauronEye(container) {<br />
var Eye = {<br />
size: 250,<br />
point: 15,<br />
speed: 100,<br />
pupil: { x: 6, y: 36 },<br />
eye: { x: 100, y: 65 },<br />
data: [],<br />
<br />
Add: function (val) {<br />
return val + Eye.size / 2;<br />
},<br />
<br />
Interval: function (color, distance, value) {<br />
var s = Math.abs(<br />
(color.a - color.b) / (distance.b - distance.a)<br />
);<br />
var v = value - distance.a;<br />
var c = color.a > color.b ? color.a - v * s : color.a + v * s;<br />
return Math.round(c);<br />
},<br />
<br />
Color: function (percent) {<br />
if (percent < 5)<br />
return Eye.Interval(<br />
{ a: 255, b: 180 },<br />
{ a: 0, b: 2 },<br />
percent<br />
);<br />
else if (percent < 10)<br />
return Eye.Interval(<br />
{ a: 180, b: 100 },<br />
{ a: 2, b: 5 },<br />
percent<br />
);<br />
else if (percent < 40)<br />
return Eye.Interval(<br />
{ a: 100, b: 0 },<br />
{ a: 5, b: 30 },<br />
percent<br />
);<br />
else if (percent < 70)<br />
return Eye.Interval(<br />
{ a: 0, b: 100 },<br />
{ a: 30, b: 70 },<br />
percent<br />
);<br />
else if (percent < 75)<br />
return Eye.Interval(<br />
{ a: 100, b: 180 },<br />
{ a: 70, b: 80 },<br />
percent<br />
);<br />
else<br />
return Eye.Interval(<br />
{ a: 180, b: 255 },<br />
{ a: 80, b: 100 },<br />
percent<br />
);<br />
},<br />
<br />
Pifagor: function (x, y) {<br />
return Math.sqrt(x * x + y * y);<br />
},<br />
<br />
Remove: function (radius, max, i) {<br />
if (radius > max) {<br />
Eye.data.splice(i, 1);<br />
}<br />
},<br />
<br />
Write: function (x, y, color, opacity) {<br />
Eye.ctx.fillStyle = "rgba(255," + color + ",0," + opacity + ")";<br />
Eye.ctx.fillRect(Eye.Add(x), Eye.Add(y), 1, 1);<br />
},<br />
<br />
Style: function (point, i) {<br />
var radius = Eye.Pifagor(point.x, point.y);<br />
var percent =<br />
((radius - point.min) / (point.max - point.min)) * 100;<br />
var color = Eye.Color(percent);<br />
var opacity = percent > 70 ? 1 - (percent - 70) / 30 : 1;<br />
<br />
Eye.Write(point.x, point.y, color, opacity);<br />
Eye.Remove(radius, point.max, i);<br />
},<br />
<br />
Move: function (i) {<br />
var point = Eye.data[i];<br />
point.x += point.X;<br />
point.y += point.Y;<br />
Eye.Style(point, i);<br />
},<br />
<br />
Update: function () {<br />
Eye.Fill(0.02);<br />
for (var i = 0; i < Eye.point; i++) {<br />
Eye.Point();<br />
}<br />
for (var j = 0; j < Eye.data.length; j++) {<br />
Eye.Move(j);<br />
}<br />
},<br />
<br />
Draw: function () {<br />
Eye.Update();<br />
requestAnimationFrame(Eye.Draw, Eye.canvas);<br />
},<br />
<br />
Noise: function (value) {<br />
return Math.random() * value - value / 2;<br />
},<br />
<br />
Radius: function (start, end) {<br />
return {<br />
max: Eye.Pifagor(end.x, end.y),<br />
min: Eye.Pifagor(start.x, start.y),<br />
};<br />
},<br />
<br />
Step: function (start, end) {<br />
return {<br />
x: (end.x - start.x) / Eye.speed,<br />
y: (end.y - start.y) / Eye.speed,<br />
};<br />
},<br />
<br />
Position: function (type, angel, noise) {<br />
return {<br />
x: Eye[type].x * Math.cos(angel) + Eye.Noise(noise),<br />
y: Eye[type].y * Math.sin(angel) + Eye.Noise(noise),<br />
};<br />
},<br />
<br />
Point: function () {<br />
var angel = Math.random() * 2 * Math.PI;<br />
var start = Eye.Position("pupil", angel, 5);<br />
var end = Eye.Position("eye", angel, 25);<br />
var radius = Eye.Radius(start, end);<br />
var step = Eye.Step(start, end);<br />
<br />
Eye.data.push({<br />
x: start.x,<br />
y: start.y,<br />
X: step.x,<br />
Y: step.y,<br />
min: radius.min,<br />
max: radius.max,<br />
});<br />
},<br />
<br />
Fill: function (a) {<br />
Eye.ctx.fillStyle = "rgba(0,0,0," + a + ")";<br />
Eye.ctx.fillRect(0, 0, Eye.size, Eye.size);<br />
},<br />
<br />
Init: function () {<br />
Eye.Fill(1);<br />
for (var i = 0; i < Eye.point; i++) {<br />
Eye.Point();<br />
}<br />
Eye.Draw();<br />
},<br />
<br />
Watch: function () {<br />
Eye.canvas = document.getElementById("tg-sauroneye");<br />
Eye.canvas.width = Eye.size;<br />
Eye.canvas.height = Eye.size;<br />
Eye.ctx = Eye.canvas.getContext("2d");<br />
Eye.Init();<br />
},<br />
};<br />
<br />
var canvas = document.createElement("canvas");<br />
canvas.id = "tg-sauroneye";<br />
container.append(canvas);<br />
Eye.Watch();<br />
}<br />
<br />
function init() {<br />
// Wait for page content to be fully loaded<br />
mw.hook("wikipage.content").add(function () {<br />
if (isMainPage) {<br />
onMainPage();<br />
}<br />
<br />
var eyeContainer = document.getElementById(<br />
"tg-sauroneye-container"<br />
);<br />
if (eyeContainer) {<br />
initSauronEye(eyeContainer);<br />
}<br />
});<br />
}<br />
<br />
init();<br />
})();</div>
Maegnus