User:Aesulus/common.js
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.
function getPekoCookie(key) {
const matchArray = document.cookie.match(new RegExp(key + '=([^;]+)'));
return (matchArray == null) ? null : matchArray[1];
}
function setPekoCookie(key, value) {
document.cookie = key + "=" + value;
}
function addButton() {
// create the button
const pekofyButton = document.createElement('a');
pekofyButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -0.5 235 235"><circle id="pekofyButtonCircle" cx="116.7" cy="117" r="117.5" fill="#59a4f0" /><g transform="matrix(.657932 1.139572 -1.139572 .657932 169.93483 23.952904)"><path id="pekofyButtonCarrot" d="M34.131 50.271l-.888.022-.876.067-.862.108-.848.151-.834.19-.818.232-.8.27-.781.307-.763.343-.741.378-.72.414-.698.447-.674.478-.65.509-.623.54-.597.568-.568.597-.54.623-.509.65-.479.674-.445.698-.414.72-.378.742-.344.761-.306.782-.27.8-.232.816-.191.834-.15.849-.11.862-.065.876-.022.888.105 6.532h14.472a2.09 2.09 0 0 1 2.09 2.09 2.09 2.09 0 0 1-2.09 2.09H17.222c.312 6.415.902 12.676 1.754 18.619h12.535a2.09 2.09 0 0 1 2.09 2.09 2.09 2.09 0 0 1-2.09 2.09H19.643c1.147 6.864 2.642 13.135 4.431 18.582l.013.037h7.424a2.09 2.09 0 0 1 2.09 2.09 2.09 2.09 0 0 1-2.09 2.09h-5.896c4.321 10.972 9.768 16.989 15.395 17.006 3.175-.007 6.318-1.926 9.249-5.646a2.09 2.09 0 0 1-1.839-2.05 2.09 2.09 0 0 1 2.09-2.09h2.464c1.814-3.14 3.487-6.984 4.975-11.436.735-2.256 1.42-4.655 2.053-7.182H50.51a2.09 2.09 0 0 1-2.09-2.09 2.09 2.09 0 0 1 2.09-2.09h10.503c1.264-5.753 2.254-12.021 2.94-18.619H50.51a2.09 2.09 0 0 1-2.09-2.09 2.09 2.09 0 0 1 2.09-2.09h13.814a217.58 217.58 0 0 0 .763-17.932 17.61 17.61 0 0 0-.018-.687H50.51a2.09 2.09 0 0 1-2.09-2.09 2.09 2.09 0 0 1 2.09-2.09h13.88l-.073-.258c-.084-.27-.174-.536-.27-.8s-.197-.525-.306-.782-.224-.511-.344-.761a17.11 17.11 0 0 0-.378-.742c-.132-.244-.271-.484-.414-.72a17.06 17.06 0 0 0-.445-.698c-.154-.229-.315-.453-.479-.674s-.334-.438-.509-.65a17.2 17.2 0 0 0-.54-.623 17.21 17.21 0 0 0-.568-.597c-.194-.194-.393-.384-.597-.568s-.411-.365-.623-.54-.43-.344-.65-.509a17.15 17.15 0 0 0-.674-.478c-.229-.154-.461-.303-.698-.447s-.475-.282-.718-.414-.491-.258-.742-.378a17.11 17.11 0 0 0-.763-.343c-.257-.108-.517-.211-.781-.307s-.53-.187-.8-.27-.543-.161-.818-.232a17.14 17.14 0 0 0-.834-.19c-.28-.057-.562-.108-.848-.151a17.34 17.34 0 0 0-.862-.108c-.29-.029-.582-.052-.876-.067s-.59-.022-.888-.022z" fill="#ffa94c"/><path id="pekofyButtonStem" d="M41.011 0c-4.066 0-7.456 1.936-9.26 5.292s-3.588 11.979-1.323 15.875c2.313 3.978 6.946 6.517 7.938 10.583.733 3.106 0 13.229 0 13.229-.962-.847-.972-2.11-1.323-2.646-2.756-8.446-8.695-14.35-17.198-14.552C10.585 27.837.243 34.497 0 43.656c0 6.63 6.615 9.26 11.906 9.26 6.615 0 14.552-10.583 17.198-10.583s3.487 2.985 3.969 6.615h5.292 2.646 2.646 5.292c.481-3.629 1.323-6.615 3.969-6.615S63.5 52.917 70.115 52.917c5.292 0 11.906-2.631 11.906-9.26-.242-9.159-10.584-15.82-19.844-15.875-8.503.202-14.442 6.106-17.198 14.552-.351.535-.361 1.799-1.323 2.646 0 0-.733-10.124 0-13.229.992-4.067 5.625-6.605 7.938-10.583 2.265-3.896.481-12.519-1.323-15.875S45.076 0 41.011 0z" fill="#79e02b"/></g></svg>';
pekofyButton.setAttribute('style', 'width: 72px; z-index: 100; position: fixed; bottom: 0px; right: 0px; margin: 10px;');
pekofyButton.id = "pekofyButton";
pekofyButton.addEventListener('click', changeImage);
document.body.appendChild(pekofyButton);
// the stylesheet
const style = document.createElement('style');
style.textContent = '\
.mw-wiki-logo {\
background-image: url(https://static.miraheze.org/hololivewiki/thumb/9/9a/PekoliveFanWiki-logo-black.png/480px-PekoliveFanWiki-logo-black.png);\
}\
#pekofyButton {\
filter: drop-shadow(5px 10px 3px gray);\
}\
#pekofyButton:hover circle {\
fill: #3584e4;\
}\
#pekofyButton:active {\
transform: translateY(5px);\
filter: drop-shadow(5px 5px 3px gray);\
}\
#pekofyButton:active circle {\
fill: #3584e4 !important;\
}\
body:not(.isPeko) #pekofyButtonCircle {\
fill: black;\
}\
body:not(.isPeko) #pekofyButtonCarrot, body:not(.isPeko) #pekofyButtonStem {\
fill: white;\
}';
document.body.appendChild(style);
// initialize based on value of cookie
const pekofyButtonState = getPekoCookie('pekofyButtonState');
if (pekofyButtonState == "true") {
rootPekofy();
}
else if (pekofyButtonState == "false") { // do nothing
}
else { // cookie does not exist or is malformed
setPekoCookie('pekofyButtonState', true);
rootPekofy();
}
}
function pekofy(node) {
if (node.nodeType === Node.TEXT_NODE) { // check if it's a text node
if (node.nodeValue.trim().length > 0) {
node.unpekofied = node.nodeValue; // store text node's original value in a new property
node.nodeValue = node.nodeValue.replaceAll(/([\.\?!]+(?!\S))/ig, ' peko$1');
}
}
else if (node.nodeType === Node.ELEMENT_NODE) { // check if it's an element node
if (node.tagName == "STYLE") { // don't pekofy yourself
return;
}
if (node.tagName == "A" && node.getAttribute('href') == node.textContent) { // don't pekofy links
return;
}
if (node.tagName == "IMG") { // logo replacement
const logoPattern = new RegExp('https://static.miraheze.org/hololivewiki/thumb/f/f3/HololiveFanWiki-logo-black.png(/\d+px-HololiveFanWiki-logo-black.png)?');
if (logoPattern.test(node.getAttribute('src'))) {
node.unpekofied = node.getAttribute('src');
node.setAttribute('src', 'https://static.miraheze.org/hololivewiki/thumb/9/9a/PekoliveFanWiki-logo-black.png/480px-PekoliveFanWiki-logo-black.png');
}
}
var children = node.childNodes; // iterate through child nodes
for (var i = 0; i < children.length; i++) {
pekofy(children[i]);
}
}
}
function unpekofy(node) {
if (node.nodeType === Node.TEXT_NODE) { // check if it's a text node
if (node.hasOwnProperty('unpekofied')) {
node.nodeValue = node.unpekofied;
}
}
else if(node.nodeType === Node.ELEMENT_NODE) { // check if it's an element node
if (node.tagName == "IMG") { // undo logo replacement
if (node.hasOwnProperty('unpekofied')) {
node.setAttribute('src', node.unpekofied);
}
}
var children = node.childNodes; // iterate through child nodes
for (var i = 0; i < children.length; i++) {
unpekofy(children[i]);
}
}
}
function changeImage() {
var toggleState = getPekoCookie('pekofyButtonState') == "true";
if (toggleState) {
rootUnpekofy();
}
else {
rootPekofy();
}
setPekoCookie('pekofyButtonState', !toggleState);
}
function rootPekofy() {
document.body.classList.add('isPeko');
pekofy(document.body);
}
function rootUnpekofy() {
document.body.classList.remove('isPeko');
unpekofy(document.body);
}
// Begin here. Only run pekofy script while *viewing* (i.e. not editing) wiki subject pages and only if cookies are enabled
document.addEventListener('DOMContentLoaded',
function() {
if(document.body.classList.contains('ns-subject') && document.body.classList.contains('action-view') && navigator.cookieEnabled) {
addButton();
}
});