JavaScript

Este documento descreve as funcionalidades JavaScript do tema.

Arquivos

O tema carrega três arquivos JavaScript principais:

1. asset/js/thedaily.js: JavaScript legado do tema The Daily em jQuery
2. asset/js/global.js: JavaScript global do Omeka S
3. asset/js/custom.js: JavaScript customizado do tema em Vanilla JS

Carregamento

Ordem definida em view/layout/layout.phtml:

// Head: antes do headScript echo
$this->headScript()->prependFile($this->assetUrl('js/thedaily.js'));
$this->headScript()->prependFile($this->assetUrl('js/global.js', 'Omeka'));
$this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka'));

// Footer: antes do body close
<script src="<?php echo $this->assetUrl('js/custom.js'); ?>"></script>

Ordem final de execução:

1. jQuery do Omeka S
2. global.js do Omeka S
3. thedaily.js no head
4. custom.js no footer

thedaily.js: legado

Arquivo asset/js/thedaily.js contém código herdado do tema The Daily base em jQuery. Funcionalidades incluem toggle de busca, toggle de menu mobile com preservação de scroll, e navegação por teclado.

Este arquivo é considerado legado. Novas funcionalidades devem ser implementadas em custom.js usando Vanilla JS. O arquivo é mantido para compatibilidade com funcionalidades herdadas do tema base.

custom.js

Arquivo asset/js/custom.js contém funcionalidades implementadas em Vanilla JavaScript sem dependências externas.

Header scroll behavior

Adiciona classe --scroll ao header quando a página é rolada:

const header = document.querySelector("header");

if (header) {
  window.addEventListener("scroll", () => {
    let topoPagina = window.pageYOffset || document.documentElement.scrollTop;
    if (topoPagina === 0) {
      if (!header.classList.contains("--active")) {
        header.classList.remove("--scroll");
      }
    } else {
      header.classList.add("--scroll");
    }
  });
}

Se pageYOffset === 0, remove --scroll exceto se --active estiver presente. Se pageYOffset > 0, adiciona --scroll. Usado para header transparente que fica sólido ao rolar.

Menu mobile toggle

Toggle do menu mobile com preservação de estado de scroll:

const menuButton = document.getElementById("menu");
const header = document.querySelector("header");

if (menuButton && header) {
  menuButton.addEventListener("click", () => {
    const hasScroll = header.classList.contains("--scroll");
    header.classList.toggle("--active");

    if (hasScroll) {
      header.classList.add("--scroll");
    }
  });
}

Toggle da classe --active no header. Preserva --scroll se já estava presente. Usado para mostrar e ocultar menu mobile. Classes --active e --scroll aplicam background e mostram menu.

Dropdown menu

Sistema completo de dropdowns para menus com filhos. Implementação em IIFE com inicialização após DOM ready.

Seletores usados:

• .dropdown-toggle: botão de toggle do dropdown
• .dropdown-link[data-dropdown-trigger]: link que também abre dropdown
• .dropdown-menu: menu dropdown
• li.has-children: item de menu com filhos

Funcionalidades:

• Abre e fecha dropdown individual
• Fecha outros dropdowns ao abrir um novo
• Atualiza aria-expanded para acessibilidade
• Rotaciona ícone SVG entre 0deg e 180deg
• Fecha dropdowns ao clicar fora de .has-children
• Retry após 500ms se elementos não foram encontrados
• Usa data-initialized para prevenir listeners duplicados

Atributos aplicados:

• aria-expanded: estado do dropdown
• data-dropdown-trigger: marca link como trigger
• data-initialized: prevenção de duplicação

gulpfile.js: órfão

Arquivo gulpfile.js na raiz do tema contém configuração para compilar Sass com Gulp. Este arquivo é órfão e não é utilizado pelo tema atual.

O tema usa Tailwind CSS v4 compilado via CLI do npm, não Sass. O gulpfile.js referencia caminhos ./asset/sass/*.scss que não existem. O arquivo pode ser removido ou mantido apenas como referência histórica.

Para compilar estilos, use os scripts npm definidos em package.json, não o Gulp.

Integração com HTML

Header

<header id="header" class="...">
  <button id="menu" class="menu-toggle ...">
    <!-- Hamburger icon -->
  </button>
</header>

Classes aplicadas via JavaScript:

• --scroll: quando página rolada
• --active: quando menu mobile aberto

Navigation

<ul>
  <li class="has-children">
    <div class="menu-item-wrapper">
      <a href="..." class="dropdown-link" data-dropdown-trigger>Menu</a>
      <button class="dropdown-toggle" aria-expanded="false">
        <svg><!-- Chevron icon --></svg>
      </button>
    </div>
    <ul class="dropdown-menu" style="display: none;">
      <!-- Submenu -->
    </ul>
  </li>
</ul>

Compatibilidade

Navegadores suportados:

• Chrome, Firefox, Safari, Edge: últimas versões
• IE11+: com verificações de fallback

Features ES5+ utilizadas:

• querySelector e querySelectorAll
• addEventListener
• classList
• Arrow functions em custom.js

Fallbacks implementados:

• window.pageYOffset || document.documentElement.scrollTop: compatibilidade de scroll
• Verificações de existência antes de manipular elementos
• Condicionais implícitas para evitar erros

Debugging

O código não inclui console.log por padrão. Para debug, adicione no console do navegador:

document.querySelector("header").classList;
document.querySelectorAll(".dropdown-toggle");
window.pageYOffset;