Merge pull request 'feat: card fade-in delay and video mute toggle' (#41) from dev into main

CHANGELOG.md

@@ -10,6 +10,23 @@ Version format: `XX.YY.ZZ` (zero-padded semver).
 
 ## [01.01.00] --- 2026-05-30
 
+### Planned
+- Configurable card fade-in delay (#39)
+- Video audio mute/unmute option (#40)
+
+## [01.01.00] - 2026-05-30
+
+### Fixed
+- WebAsset registration: added `#style`/`#script` suffixes to preset dependencies (was causing `UnsatisfiedDependencyException`)
+- Asset URI resolution: use `extension/filename` pattern instead of `extension/folder/filename` (Joomla auto-inserts `css/`/`js/` folders)
+- iframe video cover: split CSS into `<video>` (`object-fit: cover`) and `<iframe>` (oversize + centre-crop) rules since `object-fit` doesn't apply to iframes
+- Card link styling: exclude `.btn` elements from `color: inherit` so buttons retain their own styles
+
+### Added
+- Module title renders inside the hero card as `<h2>`, respecting Joomla's Show Title toggle
+- IntersectionObserver pauses/resumes videos when the hero scrolls out of/into the viewport (YouTube, Vimeo, and native `<video>`)
+- YouTube embeds include `enablejsapi=1` for postMessage playback control
+
 ### Changed
 - Migrated all workflow and template paths from `.github/` to `.mokogitea/`
 - Template source paths updated

src/language/en-GB/mod_mokojoomhero.ini

@@ -36,6 +36,14 @@ MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g.
 MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
 MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works — the module auto-detects the source."
 
+; Card delay
+MOD_MOKOJOOMHERO_CARD_DELAY_LABEL="Card Fade-in Delay (ms)"
+MOD_MOKOJOOMHERO_CARD_DELAY_DESC="Delay in milliseconds before the content card fades in. Set to 0 for no delay."
+
+; Mute toggle
+MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL="Show Mute Toggle"
+MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC="Show a mute/unmute button on the hero video. Videos always start muted (required for autoplay)."
+
 ; Hero height
 MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
 MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60%% of screen)."

src/language/en-US/mod_mokojoomhero.ini

@@ -41,6 +41,14 @@ MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
 MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60% of screen)."
 MOD_MOKOJOOMHERO_HERO_HEIGHT_HINT="e.g. 60vh or 400px"
 
+; Card delay
+MOD_MOKOJOOMHERO_CARD_DELAY_LABEL="Card Fade-in Delay (ms)"
+MOD_MOKOJOOMHERO_CARD_DELAY_DESC="Delay in milliseconds before the content card fades in. Set to 0 for no delay."
+
+; Mute toggle
+MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL="Show Mute Toggle"
+MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC="Show a mute/unmute button on the hero video. Videos always start muted (required for autoplay)."
+
 ; Overlay fieldset
 MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text"
 MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Color"

src/media/css/mod_mokojoomhero.css

@@ -126,6 +126,45 @@ iframe.mokojoomhero__video {
 	text-decoration: underline;
 }
 
+/* ============================================================
+   Card fade-in delay
+   ============================================================ */
+.mokojoomhero__card[data-card-delay] {
+	opacity: 0;
+	animation: mokojoomhero-fadein 0.6s ease forwards;
+}
+
+@keyframes mokojoomhero-fadein {
+	from { opacity: 0; transform: translateY(10px); }
+	to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================================
+   Mute toggle
+   ============================================================ */
+.mokojoomhero__mute-toggle {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+	z-index: 2;
+	background: rgba(0, 0, 0, 0.5);
+	color: #fff;
+	border: none;
+	border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	font-size: 1.2rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.2s;
+}
+
+.mokojoomhero__mute-toggle:hover {
+	background: rgba(0, 0, 0, 0.7);
+}
+
 /* ============================================================
    Responsive
    ============================================================ */

src/media/js/mod_mokojoomhero.js

@@ -85,4 +85,34 @@ document.addEventListener('DOMContentLoaded', function () {
 	document.querySelectorAll('.mokojoomhero').forEach(function (hero) {
 		observer.observe(hero);
 	});
+
+	// ── Mute/unmute toggle ──
+	document.querySelectorAll('.mokojoomhero__mute-toggle').forEach(function (btn) {
+		var hero   = btn.closest('.mokojoomhero');
+		var video  = hero.querySelector('video.mokojoomhero__video');
+		var iframe = hero.querySelector('iframe.mokojoomhero__video');
+		var icon   = btn.querySelector('.mokojoomhero__mute-icon');
+
+		btn.addEventListener('click', function () {
+			var muted = btn.getAttribute('data-muted') === 'true';
+
+			if (video) {
+				video.muted = !muted;
+			}
+			if (iframe) {
+				var src = iframe.src || '';
+				if (src.indexOf('youtube') !== -1) {
+					var func = muted ? 'unMute' : 'mute';
+					iframe.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
+				} else if (src.indexOf('vimeo') !== -1) {
+					var vol = muted ? 1 : 0;
+					iframe.contentWindow.postMessage('{"method":"setVolume","value":' + vol + '}', '*');
+				}
+			}
+
+			btn.setAttribute('data-muted', muted ? 'false' : 'true');
+			btn.setAttribute('aria-label', muted ? 'Mute video' : 'Unmute video');
+			icon.textContent = muted ? '\u{1F50A}' : '\u{1F507}';
+		});
+	});
 });

src/mod_mokojoomhero.php

@@ -35,6 +35,8 @@ $textAlign      = $params->get('textAlign', 'center');
 $textColor      = $params->get('textColor', '#ffffff');
 $heroContent    = $params->get('heroContent', '');
 $showCard       = (bool) $params->get('showCard', 1);
+$cardDelay      = (int) $params->get('cardDelay', 0);
+$showMuteToggle = (bool) $params->get('showMuteToggle', 0);
 
 // Collect hero images
 $heroImages = [];

src/mod_mokojoomhero.xml

@@ -104,6 +104,18 @@
 					default="60vh"
 					filter="string"
 				/>
+				<field
+					name="showMuteToggle"
+					type="radio"
+					layout="joomla.form.field.radio.switcher"
+					label="MOD_MOKOJOOMHERO_MUTE_TOGGLE_LABEL"
+					description="MOD_MOKOJOOMHERO_MUTE_TOGGLE_DESC"
+					default="0"
+					showon="heroMode:video"
+				>
+					<option value="0">JNO</option>
+					<option value="1">JYES</option>
+				</field>
 			</fieldset>
 			<fieldset name="content"
 				label="MOD_MOKOJOOMHERO_FIELDSET_CONTENT"
@@ -128,6 +140,17 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
+				<field
+					name="cardDelay"
+					type="number"
+					label="MOD_MOKOJOOMHERO_CARD_DELAY_LABEL"
+					description="MOD_MOKOJOOMHERO_CARD_DELAY_DESC"
+					default="0"
+					min="0"
+					max="5000"
+					step="250"
+					showon="showCard:1"
+				/>
 			</fieldset>
 			<fieldset name="advanced"
 				label="MOD_MOKOJOOMHERO_FIELDSET_OVERLAY"

src/tmpl/default.php

@@ -25,6 +25,8 @@ use Joomla\CMS\Language\Text;
 /** @var string $textColor */
 /** @var string $heroContent */
 /** @var bool   $showCard */
+/** @var int    $cardDelay */
+/** @var bool   $showMuteToggle */
 /** @var string $content */
 
 $moduleId = 'mod-mokojoomhero-' . $module->id;
@@ -61,12 +63,18 @@ $heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
 		<?php endforeach; ?>
 	<?php endif; ?>
 
+	<?php if ($heroMode === 'video' && $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">
+					<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; ?>