MokoConsulting/MokoJoomHero
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases 1 Wiki Activity

feat: restructure as package extension with solid color and gradient hero modes
Generic: Repo Health / Site Health (push) Has been cancelled
Details
Generic: Repo Health / Access control (push) Has been cancelled
Details
Generic: Repo Health / Scripts governance (push) Has been cancelled
Details
Generic: Repo Health / Repository health (push) Has been cancelled
Details
Generic: Repo Health / Report Issues (push) Has been cancelled
Details

Browse Source 
Restructure from standalone module to package extension (pkg_mokojoomhero)
containing mod_mokojoomhero and plg_system_mokojoomhero. Add two new hero
modes — solid color and gradient — with color pickers and angle controls,
using Joomla showon for conditional field display.

Authored-by: Moko Consulting
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-06-03 21:19:18 -05:00
parent d085c79d9e
commit 902321de47
43 changed files with 457 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tmpl/default.php
-92
View File
@@ -1,92 +0,0 @@
<?php
/**
* @package Joomla.Site
* @subpackage mod_mokojoomhero
*
* @copyright Copyright (C) 2026 Moko Consulting. All rights reserved.
* @license GPL-3.0-or-later
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
/** @var string $heroMode */
/** @var array $heroImages */
/** @var int $slideInterval */
/** @var string $videoUrl */
/** @var string $youtubeId */
/** @var string $vimeoId */
/** @var string $heroHeight */
/** @var string $overlayColor */
/** @var float $overlayOpacity */
/** @var string $textAlign */
/** @var string $textColor */
/** @var string $heroContent */
/** @var bool $showCard */
/** @var int $cardDelay */
/** @var bool $showMuteToggle */
/** @var string $content */
$moduleId = 'mod-mokojoomhero-' . $module->id;
// Convert hex overlay colour to rgba
$r = hexdec(substr($overlayColor, 1, 2));
$g = hexdec(substr($overlayColor, 3, 2));
$b = hexdec(substr($overlayColor, 5, 2));
$rgba = "rgba($r, $g, $b, $overlayOpacity)";
$heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
?>
<div id="<?php echo $moduleId; ?>" class="mokojoomhero" style="height: <?php echo $heightAttr; ?>;"
<?php if ($heroMode === 'images' && count($heroImages) > 1) : ?>
data-slides="<?php echo htmlspecialchars(json_encode($heroImages), ENT_QUOTES, 'UTF-8'); ?>"
data-interval="<?php echo $slideInterval; ?>"
<?php endif; ?>
>
<?php // Background layer — single image, slideshow, or video ?>
<?php if ($heroMode === 'video' && $youtubeId) : ?>
<iframe class="mokojoomhero__video" src="https://www.youtube-nocookie.com/embed/<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&mute=1&loop=1&playlist=<?php echo htmlspecialchars($youtubeId, ENT_QUOTES, 'UTF-8'); ?>&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&origin=<?php echo htmlspecialchars(\Joomla\CMS\Uri\Uri::root(), ENT_QUOTES, 'UTF-8'); ?>" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<?php elseif ($heroMode === 'video' && $vimeoId) : ?>
<iframe class="mokojoomhero__video" src="https://player.vimeo.com/video/<?php echo htmlspecialchars($vimeoId, ENT_QUOTES, 'UTF-8'); ?>?autoplay=1&muted=1&loop=1&background=1" allow="autoplay" allowfullscreen></iframe>
<?php elseif (($heroMode === 'video' || $heroMode === 'localvideo') && $videoUrl) : ?>
<video class="mokojoomhero__video" autoplay muted loop playsinline>
<source src="<?php echo htmlspecialchars($videoUrl, ENT_QUOTES, 'UTF-8'); ?>">
</video>
<?php elseif ($heroImages) : ?>
<?php foreach ($heroImages as $i => $img) : ?>
<div class="mokojoomhero__slide<?php echo $i === 0 ? ' mokojoomhero__slide--active' : ''; ?>"
style="background-image: url('<?php echo htmlspecialchars($img, ENT_QUOTES, 'UTF-8'); ?>');"
aria-hidden="<?php echo $i === 0 ? 'false' : 'true'; ?>">
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php if (($heroMode === 'video' || $heroMode === 'localvideo') && $showMuteToggle) : ?>
<button class="mokojoomhero__mute-toggle" type="button" aria-label="Unmute video" data-muted="true">
<span class="mokojoomhero__mute-icon" aria-hidden="true">&#x1F507;</span>
</button>
<?php endif; ?>
<?php // Overlay + content ?>
<div class="mokojoomhero__overlay" style="background-color: <?php echo $rgba; ?>;">
<div class="mokojoomhero__content" style="text-align: <?php echo htmlspecialchars($textAlign, ENT_QUOTES, 'UTF-8'); ?>; color: <?php echo htmlspecialchars($textColor, ENT_QUOTES, 'UTF-8'); ?>;">
<?php if ($heroContent || $module->showtitle) : ?>
<?php if ($showCard) : ?>
<div class="mokojoomhero__card"<?php if ($cardDelay) : ?> style="animation-delay: <?php echo $cardDelay; ?>ms;" data-card-delay="<?php echo $cardDelay; ?>"<?php endif; ?>>
<?php if ($module->showtitle) : ?>
<h2 class="mokojoomhero__title"><?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?></h2>
<?php endif; ?>
<?php echo $heroContent; ?>
</div>
<?php else : ?>
<?php if ($module->showtitle) : ?>
<h2 class="mokojoomhero__title"><?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?></h2>
<?php endif; ?>
<?php echo $heroContent; ?>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</div>