This page, or parts of it, are still untranslated. Please translate it to the appropriate language (हिन्दी).
For script developers[]
अगर आप जावास्क्रिप्ट का बहुत इस्तेमाल करते हैं, आप अपने आप को एक ही फंक्शन बार-बार इस्तेमाल करते हुए पाओगे। चलिए उन फंक्शन का एक समूह बनाते हैं जिन्हे आप प्रोजेक्ट से मैसेज वाल से फोरम पोस्ट से प्रोजेक्ट और उल्टा।
वेरिएबल[]
API कैश करना[]
कैश का मतलब है mw.Api ऑब्जेक्ट इंस्टैंस। अधिक जानकारी के लिए, मीडियाविकी डॉक्यूमेंटेशन देखे।
var api = new mw.Api();
कॉन्फिग कैश करना[]
कैश कॉन्फ़िगरेशन वेरिएबल
var config = mw.config.get([
'wgAction',
'wgArticlePath',
'wgCanonicalSpecialPageName',
'wgPagename',
'wgTitle',
'wgSiteName'
]);
रंग[]
ब्राइटनेस निर्धारित करें[]
निर्धारित करता है कि रंग उज्ज्वल है कि नहीं। यह पता लगाने के लिए इस्तेमाल किया जा सकता है की फोर- या बैकग्राउंड उज्जवल है या गहरे रंग का। आपको बैकग्राउंड या फोरग्रॉउंड के लिए एक उच्च विषमता वाले रंग इस्तेमाल करने देता है।
जब color RGB या हेक्साडेसीमल फॉर्मेट में पैरामीटर दिया जाता है, एक बूलियन से प्रतिनिधित्व करता है कि क्या दिया का रंग उज्ज्वल है या नहीं।
function isBright(color) {
var m = color.match(/(?:([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2}))|(?:(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3}))/);
if (!m) return false;
var rgb = m[1] ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) }
: { r: parseInt(m[4], 10), g: parseInt(m[5], 10), b: parseInt(m[6], 10) };
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 >= 128;
}
बैकग्राउंड रंग पाए[]
आर्टिकल एरिया के बैकग्राउंड रंग को निर्धारित करके उसे CSS रंग वैल्यू के फॉर्मेट में एक स्ट्रिंग के हिसाब से देता है।
function getBackgroundColor() {
return getComputedStyle(document.body).getPropertyValue('--theme-page-background-color');
}
एलिमेंट[]
पृष्ठ के कंटेंट के आखिर में एक HTML एलिमेंट जोड़ देता है:[]
Adds a HTML element to the end of the page content:
var element = document.createElement("p"); // "p" वह एलिमेंट है जिसे बनाया जाएगा
element.style = "color:blue"; // बनने वाले एलिमेंट को संशोधित करने के लिए बस element.(एट्रीब्यूट जो आप संशोधित करना चाहते हैं) = "कोई भी वैल्यू" टाइप करें
element.contentText = "Paragraph text"; // यह एलिमेंट का innerHTML सेट कर देता है जो "Paragraph text" बनेगा
document.getElementById('mw-content-text').appendChild(element); // यह पृष्ठ के कंटेंट में एलिमेंट को जोड़ देता है
Tip: You can replace 'mw-content-text' with the ID of the desired element on the page.
Modals[]
Open image lightbox[]
Function to open the image lightbox for an arbitrary image programmatically, without modifying url query or reloading the page.
function openLightbox(fileName) {
const page = document.querySelector('.page');
if (!page) return;
// create a minimal lightbox trigger element
// <a class="image">
// <img data-image-key="${fileName}.png">
// </a>
const link = document.createElement('a');
link.className = 'image';
const img = document.createElement('img');
img.dataset.imageKey = fileName;
link.appendChild(img);
// note: lightbox is shown only for images inside
// the <div class="page"> element
page.appendChild(link);
// open lightbox
link.click();
// delete the trigger
page.removeChild(link);
}
The function can then be called using an image name, for example:
openLightbox('Site-logo.png');
openLightbox('Site-background-dark');
openLightbox('nonexistent.png');
इनपुट[]
इनपुटबॉक्स[]
नीचे दिया गया कोड 'Example Page' नाम के पृष्ठ के अंत में एक इनपुट बॉक्स जोड़ देता है:
if (mw.config.get("wgPageName") === "Example_Page") {
// अगर विकी पर वर्तमान में लोड किए गए पृष्ठ का नाम 'Example Page' है, यह कोड काम करेगा
var inputBox = document.createElement("div"); // इनपुट बॉक्स को रखने वाला एक div एलिमेंट बनाता है
var input = document.createElement("input"); // एक इनपुट एलिमेंट बनाता है जो इनपुट डाल देगा
input.id = "input"; // इनपुट एलिमेंट के ID को "input" पर सेट कर देता है
input.style.display = "inline-block"; // style.display को "inline-block" पर सेट कर देगा ताकि सब एक पंक्ति में आ जाए
var textParagraph = document.createElement("p"); // एक टेक्स्ट अनुच्छेद बनाएगा
textParagraph.innerHTML = "times two is: "; // डिफ़ॉल्ट टेक्स्ट को अनुच्छेद पर सेट कर देगा
textParagraph.style.display = "inline-block"; // style.display को "inline-block" पर सेट कर देगा ताकि सब एक पंक्ति में आ जाए
textParagraph.id = "textParagraph"; // textParagraph एलिमेंट के ID को "textParagraph" पर सेट कर देगा
var newLine = document.createElement("br"); // नया पंक्ति शुरू करने के लिए एक br एलिमेंट बनाएगा
var getAnswer = document.createElement("button"); // चेक बटन बनाएगा
getAnswer.innerHTML = "Check"; // बटन के टेक्स्ट को "check" पर सेट कर देगा
getAnswer.addEventListener("click", function() {
document.getElementById("textParagraph").innerHTML= "times two is: " + document.getElementById("input").value * 2;
}); // textParagraph एलिमेंट के टेक्स्ट को "times two is: (जो भी है)" में बदलने वाले बटन पर एक इवेंट लिस्टनेर जोड़ देता है
inputBox.appendChild(textParagraph.appendChild(input)); // इनपुट बॉक्स पर इनपुट एलिमेंट जोड़ता है
inputBox.appendChild(textParagraph); // इनपुट बॉक्स पर textParagraph एलिमेंट जोड़ता है
inputBox.appendChild(newLine); // इनपुट बॉक्स पर नए पंक्ति का एलिमेंट जोड़ता है
inputBox.appendChild(getAnswer); // इनपुट बॉक्स पर getAnswer बटन का एलिमेंट जोड़ता है
document.getElementById("mw-content-text").appendChild(inputBox); // मुख्य पृष्ठ के कंटेंट में इनपुट बॉक्स जोड़ देता है
}
Tip: You can replace 'mw-content-text' with the ID of the desired element on the page.
एक्सेक्यूशन[]
DOM के बाद[]
जेक्वेरी रेडी कॉलबैक के इस्तेमाल से DOM के लोडिंग के ख़त्म होने पर कोड रन करता है।
$(function() {
// चलाने के लिए कोड
});
MW API के बाद[]
मीडियाविकी API जावास्क्रिप्ट लाइब्रेरी की लोडिंग ख़त्म होने पर कोड रन करता है।
mw.loader.using('mediawiki.api', function() {
// चलाने के लिए कोड
});
MW यूटिलिटी के बाद[]
मीडियाविकी यूटिलिटी जावास्क्रिप्ट लाइब्रेरी की लोडिंग ख़त्म होने पर कोड रन करता है।
mw.loader.using('mediawiki.util', function() {
// चलाने के लिए कोड
});
MW API और यूटिलिटी के बाद[]
मीडियाविकी API और यूटिलिटी लाइब्रेरी की लोडिंग ख़त्म होने पर कोड रन करता है।
mw.loader.using(['mediawiki.util', 'mediawiki.api'], function() {
// चलाने के लिए कोड
});
कंटेंट के बाद[]
DOM पर विकी कंटेंट जोड़ते वक्त कोड को रन करता है। इसमें पृष्ठ लोड पर रेडी-इवेंट (पोस्ट-एडिट लोड भी) और प्रीव्यू करने पर दिखने वाले कंटेंट भी श्यामिल है।
mw.hook("wikipage.content").add(function($content) {
// चलाने के लिए कोड
});
For users[]
Adding target titles to redlinks[]
Wiki links have a their target page stored in the title attribute, which on many browsers is displayed as a tooltip when hovering over the link. The following snippet (by HumansCanWinElves) adds such titles to redlinks too.
$('.main-container').on('mouseover', 'a.new:not([title])[href]', function() {
var regExp = /(?<=\/wiki\/)([^?]+)(?=(\?.+)?)/,
match = regExp.exec($(this).attr('href')),
title;
if (match) {
title = decodeURIComponent(match[0]).replace(/_/g, ' ');
$(this).attr('title', title);
}
});
Using a different theme for a certain wiki[]
Special:Preferences allows choosing between light or dark theme, but the selection is network-wide, with the only dynamic option to defer to the theme defined as the default one by the admins of each wiki. Sometimes you want to use different themes for different wikis based on your own choosing.
Some notes:
- This should have been mostly possible by just CSS, if the built-in theme stylesheets weren't being weirdly added below the user stylesheets. As it is now, JavaScript is required, with the cost of a little delay on each page load when the default theme is displayed until the new theme takes over.
- The script ThemeSelector already allows presetting a theme for a certain wiki, but the need to import the script makes the delay longer and therefore more annoying, so putting some code directly on your JS page may be preferrable.
- As other customizations, it wouldn't work on the Discussions area.
To switch to dark theme on a certain wiki, add the following code to your local personal Special:Mypage/common.js page on that wiki (expand to see the code):
(function setDarkTheme() {
var themeSheet1 = document.createElement('link'),
themeSheet2 = document.createElement('link');
themeSheet1.rel = 'stylesheet';
themeSheet1.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=dark';
themeSheet2.rel = 'stylesheet';
themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
'ext.fandom.GlobalComponents.GlobalComponentsTheme.dark.css%7C' +
'ext.fandom.GlobalComponents.GlobalNavigationTheme.dark.css' +
'&only=styles&skin=fandomdesktop';
document.head.appendChild(themeSheet1);
document.head.appendChild(themeSheet2);
document.body.classList.remove('theme-fandomdesktop-light');
document.body.classList.add('theme-fandomdesktop-dark');
mw.config.set('isDarkTheme', true);
})();
To switch to light theme on a certain wiki, add the following code to your local personal Special:Mypage/common.js page on that wiki (expand to see the code):
(function setLightTheme() {
var themeSheet1 = document.createElement('link'),
themeSheet2 = document.createElement('link');
themeSheet1.rel = 'stylesheet';
themeSheet1.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=light';
themeSheet2.rel = 'stylesheet';
themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
'ext.fandom.GlobalComponents.GlobalComponentsTheme.light.css%7C' +
'ext.fandom.GlobalComponents.GlobalNavigationTheme.light.css' +
'&only=styles&skin=fandomdesktop';
document.head.appendChild(themeSheet1);
document.head.appendChild(themeSheet2);
document.body.classList.remove('theme-fandomdesktop-dark');
document.body.classList.add('theme-fandomdesktop-light');
mw.config.set('isDarkTheme', false);
})();
Alternatively, add the following code to your global JS page and put the wikis you want to change the theme for in the lines that begin with case:, replacing the example wikis (expand to see the code):
(function setTheme() {
var themeSheet1 = document.createElement('link'),
themeURL1 = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=',
themeSheet2 = document.createElement('link'),
themeURL2 = '/load.php?fandomdesktop=1&lang=en&modules=' +
'ext.fandom.GlobalComponents.GlobalComponentsTheme.$1.css%7C' +
'ext.fandom.GlobalComponents.GlobalNavigationTheme.$1.css' +
'&only=styles&skin=fandomdesktop';
switch (mw.config.get('wgServerName')) {
// Wikis to switch to dark mode
case 'community.fandom.com':
case 'dev.fandom.com':
case 'math.wikia.org':
themeSheet1.rel = "stylesheet";
themeSheet1.href = themeURL1 + 'dark';
document.head.appendChild(themeSheet1);
themeSheet2.rel = "stylesheet";
themeSheet2.href = themeURL2.replace(/\$1/g, 'dark');
document.head.appendChild(themeSheet2);
document.body.classList.remove('theme-fandomdesktop-light');
document.body.classList.add('theme-fandomdesktop-dark');
mw.config.set('isDarkTheme', true);
break;
// Wikis to switch to light mode
case 'wreckit-woodhouse.fandom.com':
case 'harrypotter.fandom.com':
themeSheet1.rel = "stylesheet";
themeSheet1.href = themeURL1 + 'light';
document.head.appendChild(themeSheet1);
themeSheet2.rel = "stylesheet";
themeSheet2.href = themeURL2.replace(/\$1/g, 'light');
document.head.appendChild(themeSheet2);
document.body.classList.remove('theme-fandomdesktop-dark');
document.body.classList.add('theme-fandomdesktop-light');
mw.config.set('isDarkTheme', false);
break;
}
})();
Tables[]
Table progress tracking[]
This code adds a percent of checked boxes (completion percent) on every table that has progress tracking. The percent is added in the top left cell.
function percent_completed() {
// Selects all tables that have progress tracking.
const tables = document.querySelectorAll('.table-progress-tracking');
for (let i = 0; i < tables.length; i++) {
// Important for updating percentages when page loads.
observer.observe(tables[i], {
subtree: true,
childNodes: true,
attributes: true
});
var selected_boxes = 0;
var total_boxes = -1; // Omits the table header row.
for (let row of tables[i].rows) {
total_boxes += 1;
for (let cell of row.cells) {
cell.addEventListener("change", percent_completed); // On cell change, update percent.
if (cell.getAttribute('data-sort-value') == "1") {
selected_boxes += 1;
}
}
}
const th = tables[i].querySelector('th'); // Selects the first table header cell (top left).
const text = Math.round(selected_boxes / total_boxes * 100) + '%';
if (th.textContent !== text) {
th.textContent = text;
}
}
}
const observer = new MutationObserver(percent_completed);
percent_completed(); // Execute function on page load.