مدیاویکی:Dropfont.js

از ویکی‌پدیا، دانشنامهٔ آزاد

نکته: برای دیدن تغییرات، ممکن است نیاز باشد که حافظهٔ نهانی مرورگر خود را پس از انتشار پاک‌سازی کنید. گوگل کروم، فایرفاکس، مایکروسافت اج و سافاری: کلید Shift را نگه دارید و روی دکمهٔ Reload در نوار ابزار مرورگر کلیک کنید. برای آگاهی از جزئیات و نحوهٔ پاک‌سازی حافظهٔ نهانی سایر مرورگرها، صفحهٔ ویکی‌پدیا:میانگیر مرورگرتان را خالی کنید را ببینید.

// Minimal font tester
// Author: Ebrahim
$(function () {
	function hover(e) {
		e.stopPropagation();
		e.preventDefault();
	}
	document.addEventListener('dragleave', hover, false);
	document.addEventListener('dragover', hover, false);

	var style = document.createElement('style');
	style.style = 'display: block; height: 200px; direction: ltr; padding: 2em;';
	var styleValue = document.createTextNode('* { font-family: system-ui; }');
	style.appendChild(styleValue);
	
	document.addEventListener('drop', function (e) {
		hover(e);
		if (!document.body.contains(style)) document.body.appendChild(style);
		document.body.contentEditable = true;
		var reader = new FileReader();
		reader.addEventListener('load', function () {
			var r = Math.floor(Math.random() * 1000);
			styleValue.textContent = '* { font-family: droppedfont' + r + '!important; }';
			var fontStyle = document.createElement('style');
			fontStyle.appendChild(document.createTextNode('@font-face { font-family: droppedfont' + r + '; src: url("' + reader.result + '"); }'));
			document.body.appendChild(fontStyle);
		}, false);
		reader.readAsDataURL(e.dataTransfer.files[0]);
	}, false);
});