refactor: migrate inline JS in templates to Joomla Web Asset Manager #175

New Issue

2026-06-29T14:21:44Z

jmiller commented

2026-06-29 14:21:44 +00:00

Summary

All five admin templates embed hundreds of lines of inline JavaScript directly in PHP files via <script> tags. Joomla 4+ provides the Web Asset Manager (WAM) for registering and loading JS/CSS assets. Using WAM enables proper dependency management, caching, CSP nonce support, and cleaner template files.

Affected templates

Template	Approx. inline JS lines
`tmpl/backups/default.php`	~350 lines (backup modal, restore modal, purge, compare)
`tmpl/dashboard/default.php`	~150 lines (backup modal, chart)
`tmpl/backup/default.php`	~200 lines (archive browser, log viewer)
`tmpl/snapshots/default.php`	~270 lines (create, restore, browse modals)
`tmpl/profile/edit.php`	~100+ lines (remote destinations CRUD, placeholder pills)

What to do

Create media/com_mokosuitebackup/js/ directory structure
Extract inline JS into separate .js files (e.g., admin-backups.js, admin-dashboard.js, etc.)
Register assets in joomla.asset.json (or via $wa->registerAndUseScript())
Pass PHP-generated data (CSRF tokens, Text strings, URLs) via $document->addScriptOptions() instead of inline PHP-in-JS
Remove inline <script> blocks from templates

Why

Inline JS blocks Content-Security-Policy nonce enforcement, prevents browser caching, and makes the 700+ line template files harder to maintain. WAM is the standard Joomla approach and enables all of the above.

## Summary All five admin templates embed hundreds of lines of inline JavaScript directly in PHP files via `<script>` tags. Joomla 4+ provides the Web Asset Manager (WAM) for registering and loading JS/CSS assets. Using WAM enables proper dependency management, caching, CSP nonce support, and cleaner template files. ## Affected templates | Template | Approx. inline JS lines | |----------|------------------------| | `tmpl/backups/default.php` | ~350 lines (backup modal, restore modal, purge, compare) | | `tmpl/dashboard/default.php` | ~150 lines (backup modal, chart) | | `tmpl/backup/default.php` | ~200 lines (archive browser, log viewer) | | `tmpl/snapshots/default.php` | ~270 lines (create, restore, browse modals) | | `tmpl/profile/edit.php` | ~100+ lines (remote destinations CRUD, placeholder pills) | ## What to do - [ ] Create `media/com_mokosuitebackup/js/` directory structure - [ ] Extract inline JS into separate `.js` files (e.g., `admin-backups.js`, `admin-dashboard.js`, etc.) - [ ] Register assets in `joomla.asset.json` (or via `$wa->registerAndUseScript()`) - [ ] Pass PHP-generated data (CSRF tokens, Text strings, URLs) via `$document->addScriptOptions()` instead of inline PHP-in-JS - [ ] Remove inline `<script>` blocks from templates ## Why Inline JS blocks Content-Security-Policy nonce enforcement, prevents browser caching, and makes the 700+ line template files harder to maintain. WAM is the standard Joomla approach and enables all of the above.

jmiller added the component: admin label 2026-06-29 14:21:44 +00:00

jmiller commented

2026-06-29 14:21:47 +00:00

Branch created: feature/175-refactor-migrate-inline-js-in-templates-

git fetch origin
git checkout feature/175-refactor-migrate-inline-js-in-templates-

Branch created: [`feature/175-refactor-migrate-inline-js-in-templates-`](https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteBackup/src/branch/feature/175-refactor-migrate-inline-js-in-templates-) ```bash git fetch origin git checkout feature/175-refactor-migrate-inline-js-in-templates- ```

jmiller commented

2026-07-05 19:46:20 +00:00

Confirmed still valid @ 02.56.05 — keep open.

tmpl/snapshots/default.php:351-627 is still one large inline <script> block; there is no media/com_mokosuitebackup/js/ directory. Other templates (backups/dashboard/backup/profile) likewise retain inline JS. No Web Asset Manager migration yet.

Confirmed still valid @ 02.56.05 — keep open. `tmpl/snapshots/default.php:351-627` is still one large inline `<script>` block; there is no `media/com_mokosuitebackup/js/` directory. Other templates (backups/dashboard/backup/profile) likewise retain inline JS. No Web Asset Manager migration yet.

jmiller referenced this issue

2026-07-05 23:48:50 +00:00

fix(ui): WAM-loaded CSS, per-destination keep-local, tidy destination modal #220

jmiller commented

2026-07-06 00:31:38 +00:00

Started (stable): the component now ships a Web Asset Manager stylesheet — media/com_mokosuitebackup/css/admin.css + media/joomla.asset.json, a <media> manifest entry, and useStyle('com_mokosuitebackup.admin') in the profile-edit view (PR #220). This establishes the WAM pattern.

Keeping this open for the remaining migration: the large inline <script> blocks in tmpl/snapshots/default.php (and the other templates) still need moving to media/com_mokosuitebackup/js/*.js registered the same way.

Started (stable): the component now ships a **Web Asset Manager** stylesheet — `media/com_mokosuitebackup/css/admin.css` + `media/joomla.asset.json`, a `<media>` manifest entry, and `useStyle('com_mokosuitebackup.admin')` in the profile-edit view (PR #220). This establishes the WAM pattern. Keeping this open for the **remaining** migration: the large inline `<script>` blocks in `tmpl/snapshots/default.php` (and the other templates) still need moving to `media/com_mokosuitebackup/js/*.js` registered the same way.

Sign in to join this conversation.

Priority Medium

Type Feature

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoSuiteBackup#175