MokoSuiteClient/source/packages/mod_mokowaas_cache/tmpl/default.php

<?php
/**
 * MokoWaaS Cache & Temp Cleaner — status bar split button
 *
 * Displays "Clear: Cache | Temp" as a single header item with two
 * clickable halves. Uses native Atum header-item markup.
 */

defined('_JEXEC') or die;

use Joomla\CMS\Session\Session;

$token    = Session::getFormToken();
$cacheUrl = 'index.php?option=com_mokowaas&task=clearCache&format=json';
$tempUrl  = 'index.php?option=com_mokowaas&task=clearTemp&format=json';
?>

<style>
.mokowaas-cleaner { display:flex; align-items:center; gap:0; padding:0 0.25rem; }
.mokowaas-cleaner-label { font-size:0.8rem; color:var(--template-text-dark,#495057); white-space:nowrap; padding-inline-end:0.35rem; }
.mokowaas-cleaner-btn { cursor:pointer; padding:0.2rem 0.5rem; font-size:0.8rem; border-radius:3px; text-decoration:none; color:var(--template-text-dark,#495057); transition:background 0.15s; white-space:nowrap; }
.mokowaas-cleaner-btn:hover { background:rgba(0,0,0,0.08); color:var(--template-text-dark,#212529); text-decoration:none; }
.mokowaas-cleaner-sep { color:var(--template-text-dark,#adb5bd); padding:0 0.1rem; font-size:0.8rem; }
</style>

<div class="header-item-content mokowaas-cleaner">
	<span class="mokowaas-cleaner-label">Clear:</span>
	<a href="#" class="mokowaas-cleaner-btn" id="mokowaas-clear-cache" title="Clear all Joomla cache">
		<span class="icon-bolt" aria-hidden="true" id="mokowaas-cache-icon"></span> Cache
	</a>
	<span class="mokowaas-cleaner-sep">|</span>
	<a href="#" class="mokowaas-cleaner-btn" id="mokowaas-clear-temp" title="Clear temp directory">
		<span class="icon-trash" aria-hidden="true" id="mokowaas-temp-icon"></span> Temp
	</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	function setupCleaner(btnId, iconId, url, token) {
		var btn  = document.getElementById(btnId);
		var icon = document.getElementById(iconId);
		if (!btn || !icon) return;
		var origClass = icon.className;

		btn.addEventListener('click', function(e) {
			e.preventDefault();
			if (btn.dataset.busy) return;
			btn.dataset.busy = '1';
			icon.className = 'icon-spinner icon-spin';

			var formData = new FormData();
			formData.append(token, '1');

			fetch(url, {
				method: 'POST',
				headers: {'X-Requested-With': 'XMLHttpRequest'},
				body: formData
			})
			.then(function(r) { return r.json(); })
			.then(function(data) {
				if (data.success) {
					icon.className = 'icon-check';
					icon.style.color = '#198754';
				} else {
					icon.className = 'icon-times';
					icon.style.color = '#dc3545';
				}
				setTimeout(function() {
					icon.className = origClass;
					icon.style.color = '';
					delete btn.dataset.busy;
				}, 2000);
			})
			.catch(function() {
				icon.className = 'icon-times';
				icon.style.color = '#dc3545';
				setTimeout(function() {
					icon.className = origClass;
					icon.style.color = '';
					delete btn.dataset.busy;
				}, 2000);
			});
		});
	}

	setupCleaner('mokowaas-clear-cache', 'mokowaas-cache-icon', '<?php echo $cacheUrl; ?>', '<?php echo $token; ?>');
	setupCleaner('mokowaas-clear-temp', 'mokowaas-temp-icon', '<?php echo $tempUrl; ?>', '<?php echo $token; ?>');
});
</script>