MediaWiki:Common.js - Revision history

Morrisj18 at 18:20, 7 August 2025

2025-08-07T18:20:51Z

← Older revision		Revision as of 14:20, 7 August 2025
Line 146:		Line 146:
	const dropdown = $('<select>').css({		const dropdown = $('<select>').css({
	marginBottom: '1em',		marginBottom: '1em',
	padding: '0.4em'		padding: '0.4em',
	}).append($('<option ~~disabled selected~~>').text('Select a language'));		display: 'block'
			});

			dropdown.append($('<option>').val('').text('Select a language'));

	languages.forEach(lang => {		languages.forEach(lang => {
Line 168:		Line 171:
	$(html).find('table.wikitable tr').each(function () {		$(html).find('table.wikitable tr').each(function () {
	const cells = $(this).find('td');		const cells = $(this).find('td');
	if (cells.length >= 3) {		if (cells.length >= 2) {
	const english = $(cells[0]).text().trim().toLowerCase();		const english = $(cells[0]).text().trim().toLowerCase();
	const ~~foreign~~ = $(cells[1]).text().trim~~();~~		const translated = $(cells[1]).text().trim();
	~~const script = $(cells[2]).text().trim().toUpperCase~~();		if (english && translated) {
	if (english) {		dict[english] = translated;
	dict[english] = ~~{ text: foreign, script: script }~~;
	}		}
	}		}
Line 185:		Line 187:
	const lang = dropdown.val();		const lang = dropdown.val();
	const text = input.val().trim().toLowerCase();		const text = input.val().trim().toLowerCase();

	if (!lang \|\| !text \|\| !dictionaries[lang]) {		if (!lang \|\| !text \|\| !dictionaries[lang]) {
	output.empty();		output.empty();
Line 192:		Line 195:
	const dict = dictionaries[lang];		const dict = dictionaries[lang];
	const words = text.split(/\s+/);		const words = text.split(/\s+/);
			const normal = words.map(w => dict[w] \|\| w).join(' ');
	const ~~translated~~ = words.map(w => dict[w]~~?.text~~ \|\| w).join(' ');		const script = words.map(w => (dict[w] \|\| w).toUpperCase()).join(' ');
	const ~~scripted~~ = words.map(w => dict[w]~~?.script~~ \|\| w.toUpperCase()).join(' ');

	const block = $('<div>').css({ marginTop: '1em' });		const block = $('<div>').css({ marginTop: '1em' });
Line 201:		Line 203:
	.text(lang.charAt(0).toUpperCase() + lang.slice(1) + ':')		.text(lang.charAt(0).toUpperCase() + lang.slice(1) + ':')
	);		);
	block.append($('<div>').text(~~translated~~));		block.append($('<div>').text(normal));
	block.append(		block.append(
	$('<div>').addClass(lang).css({		$('<div>').addClass(lang).css({
	fontSize: '160%',		fontSize: '160%',
	marginTop: '0.5em'		marginTop: '0.5em'
	}).text(~~scripted~~)		}).text(script)
	);		);

Morrisj18 at 18:18, 7 August 2025

2025-08-07T18:18:50Z

← Older revision		Revision as of 14:18, 7 August 2025
Line 131:		Line 131:
	//Translator Tool		//Translator Tool
	mw.hook('wikipage.content').add(function ($content) {		mw.hook('wikipage.content').add(function ($content) {
	~~// Only run on Translator page~~
	if (mw.config.get('wgPageName') !== 'Translator') return;		if (mw.config.get('wgPageName') !== 'Translator') return;

Line 138:		Line 137:
	let loaded = 0;		let loaded = 0;

	const container = $('<div>').css({ padding: '1em', background: '#f5f0e8', border: '1px solid #ccc' });		// UI setup
	const input = $('<textarea>').attr('placeholder', 'Enter English text...').css({ width: '100%', height: '80px', marginBottom: '1em' });		const container = $('<div>').css({
			padding: '1em',
			background: '#f5f0e8',
			border: '1px solid #ccc'
			});

			const dropdown = $('<select>').css({
			marginBottom: '1em',
			padding: '0.4em'
			}).append($('<option disabled selected>').text('Select a language'));

			languages.forEach(lang => {
			dropdown.append($('<option>').val(lang).text(lang.charAt(0).toUpperCase() + lang.slice(1)));
			});

			const input = $('<textarea>')
			.attr('placeholder', 'Enter English text...')
			.css({ width: '100%', height: '80px', marginBottom: '1em' });

	const output = $('<div>').attr('id', 'translator-output');		const output = $('<div>').attr('id', 'translator-output');

	container.append(input).append(output);		container.append(dropdown).append(input).append(output);
	$content.prepend(container);		$content.prepend(container);

Line 151:		Line 168:
	$(html).find('table.wikitable tr').each(function () {		$(html).find('table.wikitable tr').each(function () {
	const cells = $(this).find('td');		const cells = $(this).find('td');
	if (cells.length >= 2) {		if (cells.length >= 3) {
	const english = $(cells[0]).text().trim().toLowerCase();		const english = $(cells[0]).text().trim().toLowerCase();
	const foreign = $(cells[1]).text().trim();		const foreign = $(cells[1]).text().trim();
	if (english ~~&& foreign~~) {		const script = $(cells[2]).text().trim().toUpperCase();
	dict[english] = foreign;		if (english) {
			dict[english] = { text: foreign, script: script };
	}		}
	}		}
Line 161:		Line 179:
	dictionaries[lang] = dict;		dictionaries[lang] = dict;
	loaded++;		loaded++;
	~~if (loaded === languages.length) setupTranslation();~~
	});		});
	});		});

	function ~~setupTranslation~~() {		function updateOutput() {
	~~input~~.~~on('input', function~~ () {		const lang = dropdown.val();
	const text = input.val().trim();		const text = input.val().trim().toLowerCase();
	if (!text) {		if (!lang \|\| !text \|\| !dictionaries[lang]) {
	output.empty();		output.empty();
	return;		return;
	}		}

	const words = text.split(/\s+/~~).map(w => w.toLowerCase());~~		const dict = dictionaries[lang];
	~~const resultHtml = $('<div>'~~);		const words = text.split(/\s+/);

	~~languages.forEach(lang => {~~		const translated = words.map(w => dict[w]?.text \|\| w).join(' ');
	~~const dict = dictionaries[lang];~~		const scripted = words.map(w => dict[w]?.script \|\| w.toUpperCase()).join(' ');
	const translated = words.map(w => dict[w] \|\| ~~`[${~~w~~}]`~~);
	~~const normal = translated~~.join(' ');
	const ~~script~~ = ~~translated~~.map(w => w.toUpperCase()).join(' ');

	const block = $('<div>').css({ ~~marginBottom~~: '1em' });		const block = $('<div>').css({ marginTop: '1em' });
	block.append($('<div>').text(lang.charAt(0).toUpperCase() + lang.slice(1) + ':')~~.css({ fontWeight: 'bold' })~~);		block.append(
	block.append($('<div>').text(~~normal~~));		$('<div>').css({ fontWeight: 'bold', marginBottom: '0.3em' })
	block.append($('<div>').~~html~~(~~`<span class="${~~lang~~}">$~~{~~script~~}~~</span>`~~));		.text(lang.charAt(0).toUpperCase() + lang.slice(1) + ':')
	~~resultHtml~~.~~append~~(~~block~~);		);
	});		block.append($('<div>').text(translated));
			block.append(
			$('<div>').addClass(lang).css({
			fontSize: '160%',
			marginTop: '0.5em'
			}).text(scripted)
			);

	output.html(~~resultHtml);~~		output.html(block);
	});
	}		}

			input.on('input', updateOutput);
			dropdown.on('change', updateOutput);
	});		});

Morrisj18 at 17:56, 7 August 2025

2025-08-07T17:56:26Z

@@ Line 127: / Line 127: @@
          });
      });
 });

Morrisj18 at 02:33, 24 July 2025

2025-07-24T02:33:36Z

← Older revision		Revision as of 22:33, 23 July 2025
Line 5:		Line 5:
	// Audio Player System		// Audio Player System
	// Mobile audio unlocker		// Mobile audio unlocker
			/* Any JavaScript here will be loaded for all users on every page load. */
			// Audio Player System

			// Mobile audio unlocker (optional but harmless)
	document.addEventListener('DOMContentLoaded', function () {		document.addEventListener('DOMContentLoaded', function () {
	var isMobile = /Mobi\|Android\|iPhone\|iPad/i.test(navigator.userAgent);		var isMobile = /Mobi\|Android\|iPhone\|iPad/i.test(navigator.userAgent);
	if (isMobile) {		if (isMobile) {
	var unlockAudio = document.createElement('audio');		var unlockAudio = document.createElement('audio');
	unlockAudio.src = "data:audio/ogg;base64,T2dnUwACAAAAAAAAAABVDxXAAAAAAACf5tYBHgF2b3JiaXMAAAAAAkSsAAAAAAD+/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="; ~~// 0.1s silent ogg~~		unlockAudio.src = "data:audio/ogg;base64,T2dnUwACAAAAAAAAAABVDxXAAAAAAACf5tYBHgF2b3JiaXMAAAAAAkSsAAAAAAD+/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==";
	unlockAudio.muted = true;		unlockAudio.muted = true;
	unlockAudio.playsInline = true;		unlockAudio.playsInline = true;
Line 19:		Line 23:
	});		});


	~~/* Any JavaScript here will be loaded for all users on every page load. */~~
	~~// Audio Player System~~
	mw.hook('wikipage.content').add(function($content) {		mw.hook('wikipage.content').add(function($content) {
	$content.find('.audioplayer').each(function() {		$content.find('.audioplayer').each(function() {
Line 29:		Line 30:

	if (!filename) return;		if (!filename) return;

			var baseName = filename.replace(/\.\w+$/, ''); // remove extension if present

	// Generate unique ID		// Generate unique ID
Line 87:		Line 90:
	$container.empty().append($player);		$container.empty().append($player);

	// Create real DOM <audio> element ~~for full browser compatibility~~		// Create real DOM <audio> element with both sources
	~~var audioSrc = 'https://tuyin.online/images/' + filename;~~
	var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')		var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
	.append($('<source>').attr('src', ~~audioSrc~~).attr('type', 'audio/ogg'));		.append($('<source>').attr('src', 'https://tuyin.online/images/' + baseName + '.ogg').attr('type', 'audio/ogg'))
			.append($('<source>').attr('src', 'https://tuyin.online/images/' + baseName + '.mp3').attr('type', 'audio/mpeg'));
	$container.append($realAudio);		$container.append($realAudio);

	var audio = $realAudio[0];		var audio = $realAudio[0];
	var isPlaying = false;		var isPlaying = false;

	~~// Click handler without .load()~~
	$button.click(function() {		$button.click(function() {
	if (isPlaying) {		if (isPlaying) {

Morrisj18 at 02:31, 24 July 2025

2025-07-24T02:31:05Z

← Older revision		Revision as of 22:31, 23 July 2025
Line 20:		Line 20:


			/* Any JavaScript here will be loaded for all users on every page load. */
			// Audio Player System
	mw.hook('wikipage.content').add(function($content) {		mw.hook('wikipage.content').add(function($content) {
	$content.find('.audioplayer').each(function() {		$content.find('.audioplayer').each(function() {
Line 85:		Line 87:
	$container.empty().append($player);		$container.empty().append($player);

	// ~~Set up audio functionality using~~ DOM <audio> ~~tag~~		// Create real DOM <audio> element for full browser compatibility
	var audioSrc = 'https://tuyin.online/images/' + filename;		var audioSrc = 'https://tuyin.online/images/' + filename;
	var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')		var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
Line 93:		Line 95:
	var isPlaying = false;		var isPlaying = false;

			// Click handler without .load()
	$button.click(function() {		$button.click(function() {
	~~audio.load(); // Force load to fix mobile playback~~
	if (isPlaying) {		if (isPlaying) {
	audio.pause();		audio.pause();

Morrisj18 at 02:28, 24 July 2025

2025-07-24T02:28:15Z

@@ Line 4: / Line 4: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
 // Audio Player System
 mw.hook('wikipage.content').add(function($content) {
      $content.find('.audioplayer').each(function() {

Morrisj18 at 02:26, 24 July 2025

2025-07-24T02:26:40Z

← Older revision		Revision as of 22:26, 23 July 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	// Audio Player System		// Audio Player System
			// Audio Player System
			/* Any JavaScript here will be loaded for all users on every page load. */
	// Audio Player System		// Audio Player System
	mw.hook('wikipage.content').add(function($content) {		mw.hook('wikipage.content').add(function($content) {
Line 9:		Line 11:

	if (!filename) return;		if (!filename) return;

	// Generate unique ID		// Generate unique ID
	var playerId = 'audio_' + Math.random().toString(36).substr(2, 9);		var playerId = 'audio_' + Math.random().toString(36).substr(2, 9);

	// Create player HTML		// Create player HTML
	var $player = $('<div>').css({		var $player = $('<div>').css({
Line 19:		Line 21:
	'gap': '12px'		'gap': '12px'
	});		});

	var $playerBox = $('<div>').css({		var $playerBox = $('<div>').css({
	'border': '1px solid #8B7355',		'border': '1px solid #8B7355',
Line 27:		Line 29:
	'width': '200px'		'width': '200px'
	});		});

	var $button = $('<button>').attr('id', playerId + '_btn').text('▶️').css({		var $button = $('<button>').attr('id', playerId + '_btn').text('▶️').css({
	'padding': '4px 8px',		'padding': '4px 8px',
Line 36:		Line 38:
	'color': '#5D4E37'		'color': '#5D4E37'
	});		});

	var $progressContainer = $('<div>').css({		var $progressContainer = $('<div>').css({
	'display': 'inline-block',		'display': 'inline-block',
Line 45:		Line 47:
	'vertical-align': 'middle'		'vertical-align': 'middle'
	});		});

	var $progress = $('<div>').attr('id', playerId + '_progress').css({		var $progress = $('<div>').attr('id', playerId + '_progress').css({
	'height': '100%',		'height': '100%',
Line 53:		Line 55:
	'transition': 'width 0.1s'		'transition': 'width 0.1s'
	});		});

	var $caption = $('<span>').text(caption).css({		var $caption = $('<span>').text(caption).css({
	'color': '#8B7355',		'color': '#8B7355',
	'font-style': 'italic'		'font-style': 'italic'
	});		});

	// Build structure		// Build structure
	$progressContainer.append($progress);		$progressContainer.append($progress);
	$playerBox.append($button).append($progressContainer);		$playerBox.append($button).append($progressContainer);
	$player.append($playerBox).append($caption);		$player.append($playerBox).append($caption);

	// Replace container content		// Replace container content
	$container.empty().append($player);		$container.empty().append($player);

	~~// Set up audio functionality~~
	~~var audioSrc = 'https://tuyin.online/images/' + filename;~~
	~~var isMobile = /Mobi\|Android\|iPhone\|iPad/i.test(navigator.userAgent);~~

	// ~~For mobile, inject a real~~ <audio> tag ~~(helps Safari and Chrome mobile)~~		// Set up audio functionality using DOM <audio> tag
	~~if (isMobile) {~~		var audioSrc = 'https://tuyin.online/images/' + filename;
	var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')		var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
	.append($('<source>').attr('src', audioSrc).attr('type', 'audio/ogg'));		.append($('<source>').attr('src', audioSrc).attr('type', 'audio/ogg'));
	$container.append($realAudio);		$container.append($realAudio);
	audio = $realAudio[0];		var audio = $realAudio[0];
	~~} else {~~
	~~audio = new Audio(audioSrc);~~
	}
	var isPlaying = false;		var isPlaying = false;

	$button.click(function() {		$button.click(function() {
			audio.load(); // Force load to fix mobile playback
	if (isPlaying) {		if (isPlaying) {
	audio.pause();		audio.pause();
Line 96:		Line 92:
	}		}
	});		});

	audio.addEventListener('timeupdate', function() {		audio.addEventListener('timeupdate', function() {
	if (audio.duration) {		if (audio.duration) {
Line 103:		Line 99:
	}		}
	});		});

	audio.addEventListener('ended', function() {		audio.addEventListener('ended', function() {
	$button.text('▶️');		$button.text('▶️');

Morrisj18 at 02:24, 24 July 2025

2025-07-24T02:24:48Z

← Older revision		Revision as of 22:24, 23 July 2025
Line 68:		Line 68:

	// Set up audio functionality		// Set up audio functionality
	var ~~audio~~ = ~~new Audio(~~'https://tuyin.online/images/' + filename);		var audioSrc = 'https://tuyin.online/images/' + filename;
			var isMobile = /Mobi\|Android\|iPhone\|iPad/i.test(navigator.userAgent);

			// For mobile, inject a real <audio> tag (helps Safari and Chrome mobile)
			if (isMobile) {
			var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
			.append($('<source>').attr('src', audioSrc).attr('type', 'audio/ogg'));
			$container.append($realAudio);
			audio = $realAudio[0];
			} else {
			audio = new Audio(audioSrc);
			}
	var isPlaying = false;		var isPlaying = false;

Morrisj18 at 01:22, 24 July 2025

2025-07-24T01:22:52Z

Show changes

Morrisj18 at 01:19, 24 July 2025

2025-07-24T01:19:19Z

← Older revision		Revision as of 21:19, 23 July 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
			// Audio Player System
			$(document).ready(function() {
			// Initialize all audio players on page load
			$('.audioplayer').each(function() {
			var container = $(this);
			var filename = container.data('filename');
			var caption = container.data('caption') \|\| 'Audio File';

			if (!filename) return;

			// Create unique ID for this player
			var playerId = 'player_' + Math.random().toString(36).substr(2, 9);

			// Build the player HTML
			var playerHTML =
			'<div style="display: inline-flex; align-items: center; gap: 12px;">' +
			'<div style="border: 1px solid #8B7355; padding: 8px; border-radius: 4px; background-color: #F5F0E8; width: 200px;">' +
			'<button id="' + playerId + '_btn" onclick="window.toggleAudioPlayer(\'' + playerId + '\', \'' + filename + '\')" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button>' +
			'<div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;">' +
			'<div id="' + playerId + '_progress" style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div>' +
			'</div>' +
			'</div>' +
			'<span style="color: #8B7355; font-style: italic;">' + caption + '</span>' +
			'</div>';

			container.html(playerHTML);
			});
			});

			// Global function to handle audio playback
			window.toggleAudioPlayer = function(playerId, filename) {
			var button = document.getElementById(playerId + '_btn');
			var progress = document.getElementById(playerId + '_progress');

			// Create or get existing audio element
			if (!button.audioElement) {
			button.audioElement = new Audio('https://tuyin.online/images/' + filename);

			// Set up progress tracking
			button.audioElement.addEventListener('timeupdate', function() {
			if (this.duration) {
			var percentage = (this.currentTime / this.duration) * 100;
			progress.style.width = percentage + '%';
			}
			});

			// Handle when audio ends
			button.audioElement.addEventListener('ended', function() {
			button.innerHTML = '▶️';
			progress.style.width = '0%';
			});
			}

			var audio = button.audioElement;

			if (audio.paused) {
			audio.play().then(function() {
			button.innerHTML = '⏸️';
			}).catch(function(error) {
			alert('Could not play audio: ' + error.message);
			});
			} else {
			audio.pause();
			button.innerHTML = '▶️';
			}
			};