Fandom Developers Wiki
Advertisement

For script developers[]

Fandom'da JavaScript'i çok kullanırsanız, kendinizi aynı işlevleri tekrar tekrar kullanırken bulacaksınız. Projeden mesaj duvarına, forum gönderisinden projeye ve geriye kopyalayıp yapıştırdığınız bu işlevlerin bir koleksiyonunu yapalım.

Değişkenler[]

API'yi önbelleğe alma[]

Bir mw.Api nesne örneğine kaynak önbelleğe alır. Daha fazla bilgi için MediaWiki belgelerine bakın.

var api = new mw.Api();

Önbelleğe alma yapılandırması[]

Yapılandırma değişkenlerini önbelleğe alır.

var config = mw.config.get([
    'wgAction',
    'wgArticlePath',
    'wgCanonicalSpecialPageName',
    'wgPagename',
    'wgTitle',
    'wgSiteName'
]);

Renkler[]

Parlaklığı belirlemesi[]

Bir rengin parlak olup olmadığını belirler. Bir ön veya arka plan renginin parlak mı yoksa koyu mu olduğunu öğrenmek için kullanılabilir. Bu, arka veya ön plan için yüksek kontrastlı bir renk seçmenizi sağlar.

color parametresi RGB veya onaltılık biçimde sağlandığında, sağlanan rengin parlak olup olmadığını gösteren bir boole döndürür.

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;
}

Arka plan rengi alın[]

Madde alanının arka plan rengini belirler ve bunu bir CSS renk değeri biçiminde bir dize olarak döndürür.

function getBackgroundColor() {
    return getComputedStyle(document.body).getPropertyValue('--theme-page-background-color');
}

Ögeler[]

Sayfa içeriğine bir HTML ögesi ekleyin[]

Sayfa içeriğinin sonuna bir HTML ögesi ekler:

var element = document.createElement("p"); // "p", oluşturulacak ögenin türüdür
element.style = "color:blue"; // oluşturulacak ögenin niteliklerini değiştirmek için element.(değiştirmek istediğiniz öznitelik) = "herhangi bir değer"} yazmanız yeterlidir
element.contentText = "Paragraf metni"; // bu, oluşturulacak öğenin innerHTML ögesini "Paragraf metni" olarak ayarlar
document.getElementById('mw-content-text').appendChild(element); // bu, ögeyi sayfa içeriğine ekler

İpucu: 'mw-content-text' ögesini sayfada istediğiniz ögenin kimliğiyle değiştirebilirsiniz.

Giriş[]

Giriş kutusu[]

Aşağıdakiler, 'Örnek_Sayfa' sayfasının sonuna bir giriş kutusu ekler:

if (mw.config.get("wgPageName") === "Örnek_Sayfa") {
  // şu anda vikide yüklü olan sayfanın adı 'Örnek Sayfa' ise bu kod çalıştırılacaktır.
  var inputBox = document.createElement("div"); // giriş kutusunu saklayacak bir div ögesi oluşturun
  var input = document.createElement("input"); // girilen girişi alacak bir "input" ögesi oluşturun
  input.id = "input"; // kimliği giriş ögesine "input" olarak ayarlayın
  input.style.display = "inline-block"; // style.display ile "inline-block" olarak ayarlayın, böylece hepsi bir satırda olacak
  var textParagraph = document.createElement("p"); // metin paragrafı oluşturun
  textParagraph.innerHTML = "çarpı iki: "; // varsayılan metni paragrafa ayarlayın
  textParagraph.style.display = "inline-block"; // style.display ile "inline-block" olarak ayarlayın, böylece hepsi bir satırda olacak
  textParagraph.id = "textParagraph"; // kimliği textParagraph ögesine "textParagraph" olarak ayarlayın
  var newLine = document.createElement("br"); // yeni bir satır başlatmak için bir br ögesi oluşturun
  var getAnswer = document.createElement("button"); // kontrol düğmesini oluşturun
  getAnswer.innerHTML = "Kontrol et"; // düğmedeki metni "Kontrol et" olarak ayarlayın
  getAnswer.addEventListener("click", function() {
    document.getElementById("textParagraph").innerHTML= "çarpı iki: " + document.getElementById("input").value * 2;
  }); // düğmeye tıklandığında textParagraph öğesinin metnini "çarpı iki: (ne olursa olsun)" olarak ayarlayacak düğmeye bir olay dinleyicisi ekleyin
  inputBox.appendChild(textParagraph.appendChild(input)); // input ögesini giriş kutusuna ekleyin
  inputBox.appendChild(textParagraph); // textParagraph ögesini giriş kutusuna ekleyin
  inputBox.appendChild(newLine); // yeni satır ögesini giriş kutusuna ekleyin
  inputBox.appendChild(getAnswer); // getAnswer düğme ögesini giriş kutusuna ekleyin
  document.getElementById("mw-content-text").appendChild(inputBox); // giriş kutusunu ana sayfa içeriğine ekleyin
}

İpucu: 'mw-content-text' ögesini sayfada istediğiniz ögenin kimliğiyle değiştirebilirsiniz.

Çalıştırma[]

DOM'dan sonra[]

DOM yüklemeyi bitirdiğinde jQuery ready yedeği kullanarak kodu çalıştırır.

$(function() {
    // çalıştıracak kod
});

MW API'sinden sonra[]

MediaWiki API JavaScript kitaplığının yüklenmesi tamamlandıktan sonra kodu çalıştırır.

mw.loader.using('mediawiki.api', function() {
    // çalıştıracak kod
});

MW yardımcı programlarından sonra[]

MediaWiki yardımcı programları JavaScript kitaplığının yüklenmesi bittiğinde kodu çalıştırır.

mw.loader.using('mediawiki.util', function() {
    // çalıştıracak kod
});

MW API ve yardımcı programlardan sonra[]

MediaWiki API ve Utilities kitaplıklarının yüklenmesi tamamlandıktan sonra kodu çalıştırır.

mw.loader.using(['mediawiki.util', 'mediawiki.api'], function() {
    // çalıştıracak kod
});

İçerikten sonra[]

DOM'a viki içeriği eklendiğinde kodu çalıştırır. Bu, bir sayfa yüklemesindeki (düzenleme sonrası yüklemeler dahil) ve içeriğin ön izlemesi sırasındaki hazır olayı içerir.

mw.hook("wikipage.content").add(function($content) {
    // çalıştıracak kod
});

Kullanıcılar için[]

Kırmızı bağlantılara hedef başlık ekleme[]

Viki bağlantılarının, birçok tarayıcıda bağlantının üzerine gelindiğinde bir araç ipucu olarak görüntülenen başlık özelliğinde saklanan bir hedef sayfası vardır. Aşağıdaki parça (HumansCanWinElves tarafından) bu tür başlıkları kırmızı bağlantılara da ekler.

mw.loader.using('mediawiki.Uri').then(function() {
    $('.main-container').on('mouseover', 'a.new:not([title])[href]', function() {
        var regExp = /(?<=\/wiki\/)([^?]+)(?=(\?.+)?)/,
            match = regExp.exec($(this).attr('href')),
            title;

        if (match) {
            title = mw.Uri.decode(match[0]).replace(/_/g, ' ');
            $(this).attr('title', title);
        }
    });   
});

Belirli bir viki için farklı bir tema kullanma[]

Special:Preferences, açık veya koyu tema arasında seçim yapılmasına izin verir, ancak seçim ağ genelindedir ve her vikinin hizmetlileri tarafından varsayılan olarak tanımlanan temayı ertelemek için tek dinamik seçenek vardır. Bazen kendi seçiminize göre farklı vikiler için farklı temalar kullanmak istersiniz.

Bazı notlar:

  • Yerleşik tema stil sayfaları garip bir şekilde kullanıcı stil sayfalarının altına eklenmemişse, bu çoğunlukla yalnızca CSS ile mümkün olabilirdi. Şimdi olduğu gibi, yeni tema devralana kadar varsayılan tema görüntülendiğinde her sayfa yüklemesinde küçük bir gecikme maliyeti ile JavaScript gereklidir.
  • ThemeSelector betiği belirli bir viki için bir temanın önceden ayarlanmasına zaten izin veriyor, ancak betiğini içe aktarma ihtiyacı gecikmeyi daha uzun ve dolayısıyla daha sinir bozucu hâle getiriyor, bu nedenle bazı kodları doğrudan JS sayfanıza koymak tercih edilebilir.
  • Diğer özelleştirmeler gibi, Tartışmalar alanında çalışmaz.

Belirli bir vikide koyu temaya geçmek için, o vikideki yerel kişisel Special:Mypage/common.js sayfanıza aşağıdaki kodu ekleyin (kodu görmek için genişletin):

(function setDarkTheme() {
	var themeSheet1 = document.createElement('link'),
	    themeSheet2 = document.createElement('link');

    themeSheet1.rel = 'stylesheet';
    themeSheet2.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);
})();

Belirli bir vikide açık temaya geçmek için, o vikideki yerel kişisel Special:Mypage/common.js sayfanıza aşağıdaki kodu ekleyin (kodu görmek için genişletin):

(function setLightTheme() {
	var themeSheet1 = document.createElement('link'),
	    themeSheet2 = document.createElement('link');

    themeSheet1.rel = 'stylesheet';
    themeSheet2.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);
})();

Alternatif olarak, küresel JS sayfanıza aşağıdaki kodu ekleyin ve temasını değiştirmek istediğiniz vikileri case: ile başlayan satırlara, örnek vikilerin yerine koyun (kodu görmek için genişletin):

(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')) {
		// Koyu moda geçmek için vikiler
		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;

		// Açık moda geçmek için vikiler
		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;
	}
})();
Advertisement