87 lines
3.7 KiB
JavaScript
87 lines
3.7 KiB
JavaScript
// assets/script/tutorial.js
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Array de passos com seletor e mensagem para cada etapa do tutorial
|
|
const steps = [
|
|
{ selector: '#inicio', message: 'Esta é a barra de navegação, onde você encontra as principais seções.' },
|
|
{ selector: '#aulas', message: 'Em aulas, temos uma lista de aulas mostrando pelo mais recente ate o mais antigo.' },
|
|
{ selector: '#cursos', message: 'Em cursos temos os cursos, que não é nada mais que uma junção de aulas sobre um determinado assunto.' },
|
|
{ selector: '#software', message: 'Caso queira procurar cursos de um determinado programa, você pode procurar ele por aqui.' },
|
|
{ selector: '#Dashboard', message: 'Aqui é onde você manda as aulas, precisa ter um cadastro como um Autor.' },
|
|
{ selector: '#lasted', message: 'Aqui mostraremos as 6 ultimas aulas enviadas.' },
|
|
|
|
// Adicione os demais passos (total de 10, ou quantos precisar)
|
|
];
|
|
|
|
|
|
// Função para remover qualquer destaque anterior e destacar o elemento atual
|
|
function highlightElement(element) {
|
|
document.querySelectorAll('.tutorial-highlight').forEach(function(el) {
|
|
el.classList.remove('tutorial-highlight');
|
|
});
|
|
if (element) {
|
|
element.classList.add('tutorial-highlight');
|
|
}
|
|
}
|
|
|
|
// Função que exibe e posiciona o passo do tutorial
|
|
function showStep(stepIndex) {
|
|
const step = steps[stepIndex]; // pega o objeto do passo atual
|
|
const element = document.querySelector(step.selector);
|
|
const tutorialBox = document.getElementById('tutorial-box');
|
|
const tutorialText = document.getElementById('tutorial-text');
|
|
|
|
// Atualiza o texto do tutorial com a mensagem correta
|
|
tutorialText.textContent = step.message;
|
|
|
|
// Destaque o elemento alvo, se existir
|
|
highlightElement(element);
|
|
|
|
if (element) {
|
|
// Obtém a posição do elemento alvo
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
// Posiciona o tutorialBox logo abaixo do elemento (ajuste os valores conforme sua necessidade)
|
|
tutorialBox.style.position = 'absolute';
|
|
tutorialBox.style.top = (rect.bottom + 10 + window.scrollY) + 'px'; // 10px abaixo do elemento
|
|
tutorialBox.style.left = (rect.left + window.scrollX) + 'px';
|
|
tutorialBox.style.transform = 'none';
|
|
} else {
|
|
// Fallback: se o elemento não for encontrado, centraliza a caixa do tutorial
|
|
tutorialBox.style.position = 'fixed';
|
|
tutorialBox.style.top = '50%';
|
|
tutorialBox.style.left = '50%';
|
|
tutorialBox.style.transform = 'translate(-50%, -50%)';
|
|
}
|
|
}
|
|
|
|
// Captura os elementos do DOM que vamos usar
|
|
const overlay = document.getElementById('tutorial-overlay');
|
|
const nextStepButton = document.getElementById('next-step');
|
|
const startTutorialButton = document.getElementById('start-tutorial');
|
|
|
|
let currentStep = 0;
|
|
|
|
// Inicia o tutorial somente quando o botão de início for clicado
|
|
if (startTutorialButton) {
|
|
startTutorialButton.addEventListener('click', function() {
|
|
overlay.classList.remove('hidden'); // Mostra o overlay
|
|
currentStep = 0;
|
|
showStep(currentStep);
|
|
});
|
|
}
|
|
|
|
// Avança os passos ao clicar no botão "Próximo"
|
|
if (nextStepButton) {
|
|
nextStepButton.addEventListener('click', function() {
|
|
currentStep++;
|
|
if (currentStep < steps.length) {
|
|
showStep(currentStep);
|
|
} else {
|
|
// Quando terminar todos os passos, oculta o tutorial
|
|
overlay.classList.add('hidden');
|
|
currentStep = 0;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|