Juliano/focus-mode
Watch
1
0
Fork
You've already forked focus-mode
 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions
Focus Mode plugin for Moodle - Activity Focus mode with child theme
5 commits 1 branch 2 tags 2.2 MiB
  • PHP 85.6%
  • CSS 10%
  • Mustache 4.4%
Find a file
Exact
Repository files (latest commit first)
Filename Latest commit message Latest commit date
aquelejota 03ef64d94f docs: add i18n to roadmap
2026-07-20 19:27:39 -03:00
dist feat: add scorm mode chip and shorter mobile topbar 2026-07-20 17:30:52 -03:00
docs/screenshots feat: add scorm mode chip and shorter mobile topbar 2026-07-20 17:30:52 -03:00
src feat: add scorm mode chip and shorter mobile topbar 2026-07-20 17:30:52 -03:00
.gitignore fix: stop tracking .env and ignore it 2026-07-20 17:31:40 -03:00
Handoff Técnico – Implementação do Activity Focus Mode para SCORM no Moodle.md feat: activity focus mode for SCORM and H5P 2026-07-19 17:22:55 -03:00
PLANO.md docs: add i18n to roadmap 2026-07-20 19:27:39 -03:00
README.md docs: add i18n to roadmap 2026-07-20 19:27:39 -03:00

README.md

Activity Focus Mode para Moodle

Modo de exibição em tela cheia ("focus mode") para atividades de consumo de conteúdo no Moodle — SCORM e H5P — com zero alterações no core. O aluno entra na atividade e toda a interface do Moodle desaparece: restam apenas uma barra mínima (← Voltar + nome da atividade) e o conteúdo ocupando a viewport inteira.

┌──────────────────────────────────────────────┐
│ ← Voltar    Nome da atividade                │
├──────────────────────────────────────────────┤
│                                              │
│         Conteúdo SCORM / H5P                 │
│         (100% da área útil)                  │
│                                              │
└──────────────────────────────────────────────┘

Motivação

1. O window.open() é incompatível com PWA no iOS. No fluxo padrão do Moodle, o SCORM abre em nova janela (view.php → window.open() → player.php). Em PWAs instalados no iOS, o WebKit tem comportamento inconsistente para novas janelas: pode abrir uma segunda instância do PWA, abrir o Safari, ignorar parâmetros da janela — variando por versão do iOS. Mesmo quando o popup não é bloqueado, a experiência é imprevisível. A solução definitiva é eliminar a dependência da nova janela.

2. Mesma janela com o layout padrão gera "duplo contexto". Abrir o SCORM na própria página com o layout normal do Moodle coloca scroll da página + scroll interno do conteúdo (ex.: Articulate Rise), breadcrumbs, menu lateral, blocos, cabeçalhos e conclusão de atividade competindo visualmente com o treinamento. O usuário não sabe qual área rolar.

Solução: navegação na mesma janela + um layout de apresentação extremamente simplificado, conceito semelhante ao "Reader Mode" dos navegadores.

Componentes

Dois plugins independentes e complementares:

Plugin Papel
local/focusmode Ativação. Decide quando aplicar o modo foco (hook before_http_headers), registra os checkboxes por módulo no admin, injeta o CSS de ajuste.
theme/moovefocus Apresentação. Tema filho do Moove que adiciona apenas o layout focus (barra + conteúdo), herdando 100% da identidade visual do Moove.

Cada um degrada com elegância sem o outro:

  • Plugin sem o tema → cai no layout embedded do Boost (sem chrome, sem barra).
  • Tema sem o plugin → funciona como um clone visual do Moove (o layout focus simplesmente nunca é invocado).

Como funciona

Ativação desacoplada do core

O hook \core\hook\output\before_http_headers (API oficial de hooks, estável desde o Moodle 4.4) é despachado na primeira linha de core_renderer::header() — antes de o tema resolver qual arquivo de layout usar. O plugin se inscreve nesse hook e, quando a página é de um módulo habilitado, chama $PAGE->set_pagelayout('focus'). Nenhum arquivo do core, do módulo SCORM ou do tema Moove é modificado.

O mapa de módulos é extensível (1 linha por módulo novo):

private const PAGETYPES = [
    'mod-scorm-player'     => ['scorm', 'enable_scorm'],
    'mod-h5pactivity-view' => ['h5p', 'enable_h5p'],   // H5P do core
    'mod-hvp-view'         => ['h5p', 'enable_h5p'],   // plugin mod_hvp
];

Duas estratégias de exibição por tipo de conteúdo

O hook adiciona as classes focusmode e focusmode-{modulo} ao <body>, e o CSS trata cada tipo corretamente:

  • SCORM (focusmode-scorm): iframe fixo preenchendo 100dvh − 48px, página sem scroll (o module.js do SCORM já recalcula a altura descontando a barra; o piso de 680px dele é neutralizado via CSS para telas baixas).
  • H5P (focusmode-h5p): conteúdo em fluxo normal (o H5P auto-redimensiona sua altura), página rola sob a barra sticky, com margens laterais configuráveis no admin.

Herança de settings do Moove (sem duplicação)

O core do Moodle não herda settings de tema pai — e o SCSS do tema filho compilaria com valores vazios (cor da marca, fonte, CSS customizado). O theme/moovefocus resolve isso com delegação: seus callbacks de SCSS (lib.php) chamam os do Moove passando a config do próprio Moove. Resultado: o Moove segue como fonte única de verdade — qualquer edição futura nas settings do Moove reflete automaticamente no tema filho, sem cópia de dados nem de arquivos.

Recursos

  • ✅ SCORM player em tela cheia na mesma janela (resolve o problema do PWA iOS)
  • ✅ H5P suportado (atividade H5P do core e plugin mod_hvp)
  • ✅ Checkboxes por módulo no admin (kill-switch instantâneo por tipo)
  • ✅ Margens laterais do H5P configuráveis (desktop/mobile, padrão 16px)
  • ✅ Barra mínima: ← Voltar (retorna à seção correta do curso) + nome da atividade
  • ✅ Tracking SCORM, conclusão e tentativas H5P preservados (nada muda no fluxo de dados)
  • ✅ Idiomas: inglês e português (Brasil)
  • ✅ Zero alterações no core, no mod_scorm ou no tema Moove — sobrevive a upgrades

Requisitos

  • Moodle ≥ 4.5 (a API de hooks exige ≥ 4.4; desenvolvido e testado em 4.5.7+)
  • Tema Moove ≥ 4.5.0 (2024100800) — necessário apenas para o tema filho; o plugin local sozinho funciona com qualquer tema (fallback para o layout embedded)
  • Atividades SCORM configuradas com "Display package" = "Current window" para o fluxo sem popup (ver Configuração)

Instalação

Via pacotes ZIP (Admin → Plugins → Instalar plugin)

  1. Garanta o pré-requisito: theme_moove instalado (o instalador valida a dependência).
  2. Envie theme_moovefocus.zip e conclua o upgrade.
  3. Envie local_focusmode.zip e conclua o upgrade.
  4. Aparência → Temas → selecione Moove Focus como tema do site.

Manual

cp -r focusmode   /caminho/moodle/local/
cp -r moovefocus  /caminho/moodle/theme/
php admin/cli/upgrade.php --non-interactive

Configuração

Admin → Plugins → Plugins locais → Activity Focus Mode:

Opção Padrão Descrição
SCORM ☑ Aplica o modo foco ao player SCORM
H5P ☑ Aplica o modo foco às atividades H5P (core e mod_hvp)
Margem lateral (desktop) 16 Padding horizontal (px) do conteúdo H5P em telas ≥ 768px
Margem lateral (mobile) 16 Padding horizontal (px) do conteúdo H5P em telas < 768px

Nas atividades SCORM: defina "Display package" = "Current window" (popup = 0) — é o que elimina o window.open(). Opcionalmente, "Student skip content structure page" para entrar direto no player. Migração em massa (revise antes de rodar):

UPDATE mdl_scorm SET popup = 0 WHERE popup != 0;

Desativar / rollback

  • Por módulo: desmarque o checkbox na página de configuração do plugin — efeito imediato.
  • Completo: volte o tema do site para moove e/ou desinstale os dois plugins. Nada no core ou nos dados é alterado; o fluxo volta 100% ao padrão Moodle.
php admin/cli/cfg.php --name=theme --set=moove
php admin/cli/purge_caches.php

Estrutura do repositório

├── src/
│   ├── local/focusmode/        # Plugin local (ativação)
│   │   ├── classes/hook/       # Callbacks dos hooks (layout + CSS dinâmico)
│   │   ├── db/                 # hooks.php, upgrade.php
│   │   ├── lang/en, lang/pt_br
│   │   ├── settings.php        # Checkboxes por módulo + margens H5P
│   │   ├── styles.css          # CSS do focus mode (escopado por body.focusmode-*)
│   │   └── version.php
│   └── theme/moovefocus/       # Tema filho do Moove (apresentação)
│       ├── layout/focus.php
│       ├── templates/focus.mustache
│       ├── lib.php             # Delegação de SCSS para as settings do Moove
│       ├── config.php          # parents=['moove','boost'] + layout 'focus'
│       ├── lang/en, lang/pt_br
│       └── version.php
├── dist/                       # Pacotes ZIP instaláveis
│   ├── local_focusmode.zip
│   └── theme_moovefocus.zip
└── PLANO.md                    # Planejamento, decisões técnicas e log de progresso

Compatibilidade com upgrades

  • A API de hooks usada é estável desde o Moodle 4.4 e substitui formalmente os antigos callbacks de lib.php.
  • O tema filho isola todas as customizações: upgrades do Moove não tocam em nada criado aqui.
  • O plugin não sobrescreve templates, renderers ou JavaScript do core — apenas troca o nome do layout na página e adiciona CSS escopado.

Roadmap

A arquitetura já aceita novos módulos com 1 linha no mapa + 1 checkbox + 1 bloco CSS:

  • Livro (mod-book-view)
  • Página (mod-page-view)
  • URL (mod-url-view)
  • LTI (mod-lti-view)
  • Tradução para espanhol (lang/es) e outros idiomas
  • Barra aprimorada: progresso, botão tela cheia, botão sair

Licença

GNU GPL v3 — como exigido para plugins Moodle.

Desenvolvido por Líteris Treinamento Online.