Widget:Skillbox - Histórico de revisão

Gurren1 em 11h23min de 9 de junho de 2025

2025-06-09T11:23:03Z

← Edição anterior		Edição das 11h23min de 9 de junho de 2025
Linha 13:		Linha 13:

	<script>		<script>
	(function () {		(function () {
	const ~~raw~~ = document.~~getElementById~~('skillbox-data');		const allRawBlocks = document.querySelectorAll('.skillbox-data');
	if (!raw) ~~return~~;		if (!allRawBlocks.length) return;

			allRawBlocks.forEach((raw, index) => {
			const uniqueId = raw.dataset.skillboxId \|\| `skillbox${index}`;

	const habilidades = [];		const habilidades = [];

	for (let i = 1; i <= 15; i++) {		for (let i = 1; i <= 15; i++) {
	const nome = raw.dataset[`hab${i}`];		const nome = raw.dataset[`hab${i}`];
	const descricao = raw.dataset[`de${i}`];		const descricao = raw.dataset[`de${i}`] \|\| "";
	const videoFile = raw.dataset[`vid${i}`];		const videoFile = raw.dataset[`vid${i}`];
	if (!nome \|\| !videoFile \|\| videoFile.trim() === '') continue;		if (!nome \|\| !videoFile \|\| videoFile.trim() === '') continue;
Linha 29:		Linha 31:
	descricao,		descricao,
	videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,		videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
	id: `video${i}`		id: `${uniqueId}-video${i}`
	});		});
	}		}

	const ~~tabsContainer~~ = document.~~getElementById~~('~~skill~~-tabs');		// Criar estrutura DOM local
	const videoContainer = ~~document~~.~~getElementById~~(~~'skill~~-videos');		const container = document.createElement('div');
	const descText = ~~document~~.~~getElementById~~('desc~~-text'~~);		container.className = 'skillbox-container';

			container.innerHTML = `
			<div class="skillbox-inner">
			<div class="skillbox-info-area">
			<div class="skillbox-wrapper">
			<div class="skillbox-tabs" id="${uniqueId}-tabs"></div>
			<div class="skillbox-tabs-separator"></div>
			<div class="skillbox-desc" id="${uniqueId}-desc"></div>
			</div>
			</div>
			<div class="skillbox-video-area" id="${uniqueId}-videos"></div>
			</div>
			`;

			raw.insertAdjacentElement('afterend', container);

			const tabsContainer = container.querySelector(`#${uniqueId}-tabs`);
			const videoContainer = container.querySelector(`#${uniqueId}-videos`);
			const descText = container.querySelector(`#${uniqueId}-desc`);

	habilidades.forEach((hab, idx) => {		habilidades.forEach((hab, idx) => {
Linha 63:		Linha 84:

	if (habilidades.length) {		if (habilidades.length) {
	~~habilidades[0]~~.~~descricao~~ = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');		descText.innerHTML = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
	~~descText.innerHTML = habilidades[0].descricao~~;
	}		}

	const tabs = ~~document~~.querySelectorAll('.skillbox-tab');		const tabs = container.querySelectorAll('.skillbox-tab');
	const videos = ~~document~~.querySelectorAll('.skillbox-video');		const videos = container.querySelectorAll('.skillbox-video');

	tabs.forEach((tab, idx) => {		tabs.forEach((tab, idx) => {
Linha 75:		Linha 95:
	tab.classList.add('active');		tab.classList.add('active');

	habilidades[idx].descricao = ~~habilidades[idx].descricao~~.replace(/'''(.*?)'''/g, '<b>$1</b>');		const desc = habilidades[idx].descricao \|\| "";
	~~descText.innerHTML = habilidades[idx].descricao~~;		descText.innerHTML = desc.replace(/'''(.*?)'''/g, '<b>$1</b>');

	videos.forEach(v => {		videos.forEach(v => {
Linha 82:		Linha 102:
	if (v.id === habilidades[idx].id) {		if (v.id === habilidades[idx].id) {
	v.classList.add('active');		v.classList.add('active');
	videoTag.currentTime = 0;		if (videoTag) {
	videoTag.play();		videoTag.currentTime = 0;
			videoTag.play();
			}
	} else {		} else {
	v.classList.remove('active');		v.classList.remove('active');
	videoTag.pause();		if (videoTag) videoTag.pause();
	}		}
	});		});
Linha 93:		Linha 115:

	raw.remove();		raw.remove();
	})();		});
			})();

	</script>		</script>

Gurren1 em 20h14min de 25 de maio de 2025

2025-05-25T20:14:38Z

← Edição anterior		Edição das 20h14min de 25 de maio de 2025
Linha 1:		Linha 1:
	<div class="~~infobox~~-~~boss-wide~~">		<div class="skillbox-container">
	<div class="~~infobox~~-~~boss-right~~">		<div class="skillbox-inner">
	<div class="~~infobox-skill~~-info-area">		<div class="skillbox-info-area">
	<div class="~~skill~~-~~box~~">		<div class="skillbox-wrapper">
	<div class="~~infobox~~-skill-tabs" id="~~skill~~-tabs"></div>		<div class="skillbox-tabs" id="skill-tabs"></div>
	<div class="~~skill~~-desc" id="desc-text"></div>		<div class="skillbox-tabs-separator"></div>
			<div class="skillbox-desc" id="desc-text"></div>
	</div>		</div>
	</div>		</div>
	<div class="~~infobox-skill~~-video-area" id="skill-videos"></div>		<div class="skillbox-video-area" id="skill-videos"></div>
	</div>		</div>
	</div>		</div>
	~~<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>~~
	<script>		<script>
	(function () {		(function () {
	const raw = document.getElementById('~~infoboxboss~~-data');		const raw = document.getElementById('skillbox-data');
	if (!raw) return;		if (!raw) return;

	const habilidades = [];		const habilidades = [];

	for (let i = 1; i <= 10; i++) {		for (let i = 1; i <= 15; i++) {
	const nome = raw.dataset[`hab${i}`];		const nome = raw.dataset[`hab${i}`];
	const descricao = raw.dataset[`de${i}`];		const descricao = raw.dataset[`de${i}`];
	const videoFile = raw.dataset[`vid${i}`];		const videoFile = raw.dataset[`vid${i}`];
	if (!nome \|\| !videoFile) continue;		if (!nome \|\| !videoFile \|\| videoFile.trim() === '') continue;

	habilidades.push({		habilidades.push({
Linha 38:		Linha 39:
	habilidades.forEach((hab, idx) => {		habilidades.forEach((hab, idx) => {
	const btn = document.createElement('button');		const btn = document.createElement('button');
	btn.className = '~~infobox-skill~~-tab' + (idx === 0 ? ' active' : '');		btn.className = 'skillbox-tab' + (idx === 0 ? ' active' : '');
	btn.dataset.video = hab.id;		btn.dataset.video = hab.id;
	btn.textContent = hab.nome;		btn.textContent = hab.nome;
Linha 45:		Linha 46:
	const videoWrapper = document.createElement('div');		const videoWrapper = document.createElement('div');
	videoWrapper.id = hab.id;		videoWrapper.id = hab.id;
	videoWrapper.className = '~~skill~~-video';		videoWrapper.className = 'skillbox-video' + (idx === 0 ? ' active' : '');
	~~videoWrapper.style.display =~~ idx === 0 ? '~~block~~' : '~~none~~';

	const video = document.createElement('video');		const video = document.createElement('video');
	video.className = '~~infobox~~-~~skill~~-~~video~~';		video.className = 'skillbox-video-element';
	video.controls = true;		video.controls = true;
	video.preload = 'auto';		video.preload = 'auto';
Linha 64:		Linha 64:
	if (habilidades.length) {		if (habilidades.length) {
	habilidades[0].descricao = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');		habilidades[0].descricao = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
	descText.innerHTML = ~~`${~~habilidades[0].descricao}`;		descText.innerHTML = habilidades[0].descricao;
	}		}

	const tabs = document.querySelectorAll('.~~infobox-skill~~-tab');		const tabs = document.querySelectorAll('.skillbox-tab');
	const videos = document.querySelectorAll('.~~skill~~-video');		const videos = document.querySelectorAll('.skillbox-video');

	tabs.forEach((tab, idx) => {		tabs.forEach((tab, idx) => {
Linha 74:		Linha 74:
	tabs.forEach(t => t.classList.remove('active'));		tabs.forEach(t => t.classList.remove('active'));
	tab.classList.add('active');		tab.classList.add('active');

	habilidades[idx].descricao = habilidades[idx].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');		habilidades[idx].descricao = habilidades[idx].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
	descText.innerHTML = ~~`${~~habilidades[idx].descricao}`;		descText.innerHTML = habilidades[idx].descricao;

	videos.forEach(v => {		videos.forEach(v => {
	~~v.style.display = (v.id === habilidades[idx].id) ? 'block' : 'none';~~
	const videoTag = v.querySelector('video');		const videoTag = v.querySelector('video');
	if (v.id === habilidades[idx].id) {		if (v.id === habilidades[idx].id) {
	~~videoTag~~.~~load~~();		v.classList.add('active');
			videoTag.currentTime = 0;
	videoTag.play();		videoTag.play();
	} else {		} else {
			v.classList.remove('active');
	videoTag.pause();		videoTag.pause();
	}		}
Linha 95:		Linha 97:

	<style>		<style>
	.~~skill~~-~~box~~ {		.skillbox-video {
	~~background~~: none;		display: none;
	~~color: #222;~~		width: 100%;
	~~border-radius: 12px;~~		max-width: 900px;
	~~box-shadow: none;~~		aspect-ratio: 16 / 9;
	width: 100%;		margin: 0 auto;
	max-width: ~~700px~~;		padding: 0;
	~~box-sizing: border~~-~~box;~~		}
	~~padding~~: ~~24px 24px 20px 24px~~;
	~~display: flex;~~
	~~flex-direction: column;~~
	~~align-items: center;~~
	~~gap: 18px;~~
	~~backdrop-filter: blur(2px);~~
	margin: 0 ~~auto 24px~~ auto;
	~~margin-bottom~~: ~~0px~~;
	}

	.~~skill~~-video {		.skillbox-video.active {
	~~aspect~~-~~ratio~~: ~~16 / 9~~;		display: flex;
	}		justify-content: center;
			align-items: center;
			}
	</style>		</style>

Droflax em 02h04min de 23 de maio de 2025

2025-05-23T02:04:42Z

← Edição anterior		Edição das 02h04min de 23 de maio de 2025
Linha 97:		Linha 97:
	.skill-box {		.skill-box {
	background: none;		background: none;
	;
	color: #222;		color: #222;
	border-radius: 12px;		border-radius: 12px;
Linha 111:		Linha 110:
	backdrop-filter: blur(2px);		backdrop-filter: blur(2px);
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
			margin-bottom: 0px;
	}		}

Droflax em 20h55min de 21 de maio de 2025

2025-05-21T20:55:24Z

Mostrar alterações

Droflax: Criou página com '