diff --git a/.mokogitea/manifest.xml b/.mokogitea/manifest.xml index a5da9f5..54d103d 100644 --- a/.mokogitea/manifest.xml +++ b/.mokogitea/manifest.xml @@ -20,6 +20,8 @@ PHP joomla + module + mod_mokojoomhero src/ diff --git a/Makefile b/Makefile index ac012bb..91bde1f 100644 --- a/Makefile +++ b/Makefile @@ -13,7 +13,7 @@ # Extension Configuration EXTENSION_NAME := mokojoomhero -EXTENSION_TYPE := template +EXTENSION_TYPE := module # Options: module, plugin, component, package, template EXTENSION_VERSION := 1.0.0 diff --git a/src/component.php b/src/component.php deleted file mode 100644 index 3895ecb..0000000 --- a/src/component.php +++ /dev/null @@ -1,39 +0,0 @@ - - * - * This file is part of a Moko Consulting project. - * - * SPDX-License-Identifier: GPL-3.0-or-later - * - * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template - * INGROUP: MokoJoomHero - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero - * PATH: /src/component.php - * VERSION: 01.00.01 - * BRIEF: Component-only output — used when ?tmpl=component strips all template chrome - */ - -defined('_JEXEC') or die; - -use Joomla\CMS\Document\HtmlDocument; - -/** @var HtmlDocument $this */ - -$wa = $this->getWebAssetManager(); -$wa->usePreset('template.tpl_mokojoomhero'); - -?> - - - - - - - - - - - - - diff --git a/src/css/template.css b/src/css/template.css index 3397338..795a90c 100644 --- a/src/css/template.css +++ b/src/css/template.css @@ -3,328 +3,95 @@ * SPDX-License-Identifier: GPL-3.0-or-later * * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template.Assets - * INGROUP: MokoJoomHero.Template - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero + * DEFGROUP: MokoJoomHero.Module.Assets + * INGROUP: MokoJoomHero.Module + * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero * PATH: /src/css/template.css * VERSION: 01.00.01 - * BRIEF: Main template stylesheet — base layout, typography, and module chrome + * BRIEF: Hero module stylesheet — slideshow, video background, overlay */ /* ============================================================ - CSS Custom Properties + Hero container ============================================================ */ -:root { - --brand-color: #1a73e8; - --brand-color-dark: #1557b0; - --text-color: #333; - --text-muted: #666; - --bg-color: #fff; - --bg-light: #f8f9fa; - --border-color: #dee2e6; - --header-height: 64px; - --sidebar-width: 260px; - --container-max: 1200px; - --spacing-xs: 0.25rem; - --spacing-sm: 0.5rem; - --spacing-md: 1rem; - --spacing-lg: 2rem; - --spacing-xl: 3rem; - --radius: 6px; - --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - --transition: 0.2s ease; -} - -/* ============================================================ - Reset & Base - ============================================================ */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - font-size: 1rem; - line-height: 1.6; - color: var(--text-color); - background-color: var(--bg-color); -} - -img { - max-width: 100%; - height: auto; -} - -a { - color: var(--brand-color); - text-decoration: none; -} - -a:hover { - color: var(--brand-color-dark); - text-decoration: underline; -} - -/* ============================================================ - Container - ============================================================ */ -.container { - width: 100%; - max-width: var(--container-max); - margin-inline: auto; - padding-inline: var(--spacing-md); -} - -.container-fluid { - width: 100%; - padding-inline: var(--spacing-md); -} - -/* ============================================================ - Header - ============================================================ */ -.site-header { - background: var(--bg-color); - border-bottom: 1px solid var(--border-color); - z-index: 100; -} - -.site-header.sticky-header { - position: sticky; - top: 0; -} - -.header-inner { - display: flex; - align-items: center; - justify-content: space-between; - min-height: var(--header-height); - gap: var(--spacing-md); -} - -.site-brand a { - display: flex; - align-items: center; - gap: var(--spacing-sm); - text-decoration: none; -} - -.site-logo { - height: 40px; - width: auto; -} - -.site-title { - font-size: 1.25rem; - font-weight: 700; - color: var(--text-color); -} - -.site-description { - font-size: 0.875rem; - color: var(--text-muted); - margin: 0; -} - -/* ============================================================ - Navigation - ============================================================ */ -.site-navigation ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - gap: var(--spacing-sm); -} - -.site-navigation a { - display: block; - padding: var(--spacing-sm) var(--spacing-md); - color: var(--text-color); - border-radius: var(--radius); - transition: background var(--transition); -} - -.site-navigation a:hover, -.site-navigation a.active { - background: var(--bg-light); - text-decoration: none; - color: var(--brand-color); -} - -/* ============================================================ - Topbar - ============================================================ */ -.topbar { - background: var(--bg-light); - border-bottom: 1px solid var(--border-color); - font-size: 0.875rem; - padding: var(--spacing-xs) 0; -} - -/* ============================================================ - Hero Section - ============================================================ */ -.hero-section { - padding: var(--spacing-xl) 0; - background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%); - color: #fff; -} - -.hero-section h1, -.hero-section h2 { - color: #fff; -} - -/* ============================================================ - Breadcrumbs - ============================================================ */ -.breadcrumbs-area { - padding: var(--spacing-sm) 0; - background: var(--bg-light); - border-bottom: 1px solid var(--border-color); - font-size: 0.875rem; -} - -/* ============================================================ - Main Content Layout - ============================================================ */ -.site-main { - padding: var(--spacing-lg) 0; - min-height: 50vh; -} - -.content-area { - display: flex; - gap: var(--spacing-lg); -} - -.content-body { - flex: 1; - min-width: 0; -} - -.sidebar { - flex: 0 0 var(--sidebar-width); -} - -/* ============================================================ - Module Chrome — card style - ============================================================ */ -.card { - background: var(--bg-color); - border: 1px solid var(--border-color); - border-radius: var(--radius); - box-shadow: var(--shadow); - margin-bottom: var(--spacing-md); +.mokojoomhero { + position: relative; overflow: hidden; -} - -.card .card-header { - padding: var(--spacing-md); - border-bottom: 1px solid var(--border-color); - font-weight: 600; -} - -.card .card-body { - padding: var(--spacing-md); -} - -/* ============================================================ - Footer - ============================================================ */ -.site-footer { - background: var(--bg-light); - border-top: 1px solid var(--border-color); - padding: var(--spacing-lg) 0; - margin-top: var(--spacing-xl); -} - -.footer-copyright { - text-align: center; - font-size: 0.875rem; - color: var(--text-muted); -} - -.footer-copyright p { - margin: 0; -} - -/* ============================================================ - Back to Top - ============================================================ */ -.back-to-top { - position: fixed; - bottom: 2rem; - right: 2rem; - width: 40px; - height: 40px; display: flex; align-items: center; justify-content: center; - background: var(--brand-color); - color: #fff; - border-radius: 50%; - text-decoration: none; - box-shadow: var(--shadow); - opacity: 0; - visibility: hidden; - transition: opacity var(--transition), visibility var(--transition); - z-index: 99; -} - -.back-to-top.visible { - opacity: 1; - visibility: visible; -} - -.back-to-top:hover { - background: var(--brand-color-dark); - color: #fff; - text-decoration: none; } /* ============================================================ - System Messages + Image slides ============================================================ */ -.alert { - padding: var(--spacing-md); - margin-bottom: var(--spacing-md); - border: 1px solid transparent; - border-radius: var(--radius); +.mokojoomhero__slide { + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 1s ease; } -.alert-message { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; } -.alert-warning { background: #fff3cd; border-color: #ffeeba; color: #856404; } -.alert-error { background: #f8d7da; border-color: #f5c6cb; color: #721c24; } +.mokojoomhero__slide--active { + opacity: 1; +} + +/* ============================================================ + Video background + ============================================================ */ +.mokojoomhero__video { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +/* ============================================================ + Overlay + ============================================================ */ +.mokojoomhero__overlay { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 2rem; +} + +/* ============================================================ + Content + ============================================================ */ +.mokojoomhero__content { + max-width: 900px; + width: 100%; +} + +.mokojoomhero__content h1, +.mokojoomhero__content h2, +.mokojoomhero__content h3 { + margin-top: 0; + color: inherit; +} + +.mokojoomhero__content p:last-child { + margin-bottom: 0; +} /* ============================================================ Responsive ============================================================ */ @media (max-width: 768px) { - .header-inner { - flex-direction: column; - align-items: flex-start; - padding: var(--spacing-sm) 0; + .mokojoomhero__overlay { + padding: 1rem; } - .site-navigation ul { - flex-direction: column; - width: 100%; - } - - .content-area { - flex-direction: column; - } - - .sidebar { - flex: 1 1 auto; + .mokojoomhero__content { + font-size: 0.9rem; } } diff --git a/src/error.php b/src/error.php deleted file mode 100644 index 9cbb9a5..0000000 --- a/src/error.php +++ /dev/null @@ -1,88 +0,0 @@ - - * - * This file is part of a Moko Consulting project. - * - * SPDX-License-Identifier: GPL-3.0-or-later - * - * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template - * INGROUP: MokoJoomHero - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero - * PATH: /src/error.php - * VERSION: 01.00.01 - * BRIEF: Error page template — displayed for 403, 404, 500, etc. - */ - -defined('_JEXEC') or die; - -use Joomla\CMS\Factory; -use Joomla\CMS\Language\Text; -use Joomla\CMS\Uri\Uri; - -/** @var Joomla\CMS\Document\ErrorDocument $this */ - -$app = Factory::getApplication(); - -// Error details -$error_code = $this->error->getCode(); -$error_message = $this->error->getMessage(); - -if (!in_array($error_code, [400, 401, 403, 404, 500])) { - $error_code = 500; -} - -?> - - - - - - <?php echo $error_code; ?> - <?php echo htmlspecialchars($error_message, ENT_QUOTES, 'UTF-8'); ?> - - - - -
-

-

- - - -
- - diff --git a/src/images/index.html b/src/images/index.html deleted file mode 100644 index 2efb97f..0000000 --- a/src/images/index.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/index.php b/src/index.php deleted file mode 100644 index 316439e..0000000 --- a/src/index.php +++ /dev/null @@ -1,182 +0,0 @@ - - * - * This file is part of a Moko Consulting project. - * - * SPDX-License-Identifier: GPL-3.0-or-later - * - * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template - * INGROUP: MokoJoomHero - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero - * PATH: /src/index.php - * VERSION: 01.00.01 - * BRIEF: Main template entry point — renders the full HTML page - */ - -defined('_JEXEC') or die; - -use Joomla\CMS\Document\HtmlDocument; -use Joomla\CMS\Factory; -use Joomla\CMS\HTML\HTMLHelper; -use Joomla\CMS\Language\Text; -use Joomla\CMS\Uri\Uri; - -/** @var HtmlDocument $this */ - -$app = Factory::getApplication(); -$wa = $this->getWebAssetManager(); -$params = $app->getTemplate(true)->params; - -// Register and use template assets via Web Asset Manager -$wa->usePreset('template.tpl_mokojoomhero'); - -// Template parameters -$logo = $params->get('logoFile', ''); -$site_description = $params->get('siteDescription', ''); -$brand_color = $params->get('brandColor', '#1a73e8'); -$fluid = (bool) $params->get('fluidContainer', 0); -$sticky_header = (bool) $params->get('stickyHeader', 1); -$back_to_top = (bool) $params->get('backToTop', 1); - -$container_class = $fluid ? 'container-fluid' : 'container'; - -// Inject brand color as CSS custom property -$this->addHeadStyle(':root { --brand-color: ' . htmlspecialchars($brand_color, ENT_QUOTES, 'UTF-8') . '; }'); - -?> - - - - - - - - - - - countModules('topbar')) : ?> -
-
- -
-
- - - -
-
-
- -
- - - - - get('sitename'), ENT_QUOTES, 'UTF-8'); ?> - - - -

- -
- - - countModules('menu')) : ?> - - -
-
-
- - - countModules('banner')) : ?> - - - - - countModules('hero')) : ?> -
-
- -
-
- - - - countModules('breadcrumbs')) : ?> -
-
- -
-
- - - -
-
- countModules('main-top')) : ?> -
- -
- - -
- - countModules('sidebar-left')) : ?> - - - - -
- - -
- - - countModules('sidebar-right')) : ?> - - -
- - countModules('main-bottom')) : ?> -
- -
- -
-
- - -
-
- countModules('footer')) : ?> - - -
-

© get('sitename'), ENT_QUOTES, 'UTF-8'); ?>

-
-
-
- - - - - - - - - - - - diff --git a/src/joomla.asset.json b/src/joomla.asset.json index 6bb190c..fc9b3d0 100644 --- a/src/joomla.asset.json +++ b/src/joomla.asset.json @@ -1,26 +1,26 @@ { "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json", - "name": "tpl_mokojoomhero", + "name": "mod_mokojoomhero", "version": "1.0.0", - "description": "MokoJoomHero template web assets", + "description": "MokoJoomHero module web assets", "license": "GPL-3.0-or-later", "assets": [ { - "name": "template.tpl_mokojoomhero", + "name": "mod_mokojoomhero", "type": "preset", "dependencies": [ - "template.tpl_mokojoomhero.css", - "template.tpl_mokojoomhero.js" + "mod_mokojoomhero.css", + "mod_mokojoomhero.js" ] }, { - "name": "template.tpl_mokojoomhero.css", + "name": "mod_mokojoomhero.css", "type": "style", "uri": "css/template.css", "version": "1.0.0" }, { - "name": "template.tpl_mokojoomhero.js", + "name": "mod_mokojoomhero.js", "type": "script", "uri": "js/template.js", "version": "1.0.0", diff --git a/src/js/template.js b/src/js/template.js index 7ec6480..9d3dc4b 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -4,32 +4,34 @@ * SPDX-License-Identifier: GPL-3.0-or-later * * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template.Assets - * INGROUP: MokoJoomHero.Template - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero + * DEFGROUP: MokoJoomHero.Module.Assets + * INGROUP: MokoJoomHero.Module + * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero * PATH: /src/js/template.js * VERSION: 01.00.01 - * BRIEF: Main template JavaScript — back-to-top toggle and lightweight UI helpers + * BRIEF: Hero module JavaScript — image slideshow crossfade */ 'use strict'; document.addEventListener('DOMContentLoaded', function () { - // Back-to-top button visibility toggle - var backToTop = document.querySelector('.back-to-top'); + document.querySelectorAll('.mokojoomhero[data-slides]').forEach(function (hero) { + var slides = hero.querySelectorAll('.mokojoomhero__slide'); + var interval = parseInt(hero.dataset.interval, 10) || 5000; + var current = 0; - if (backToTop) { - window.addEventListener('scroll', function () { - if (window.scrollY > 300) { - backToTop.classList.add('visible'); - } else { - backToTop.classList.remove('visible'); - } - }, { passive: true }); + if (slides.length < 2) { + return; + } - backToTop.addEventListener('click', function (e) { - e.preventDefault(); - window.scrollTo({ top: 0, behavior: 'smooth' }); - }); - } + setInterval(function () { + slides[current].classList.remove('mokojoomhero__slide--active'); + slides[current].setAttribute('aria-hidden', 'true'); + + current = (current + 1) % slides.length; + + slides[current].classList.add('mokojoomhero__slide--active'); + slides[current].setAttribute('aria-hidden', 'false'); + }, interval); + }); }); diff --git a/src/language/en-GB/mod_mokojoomhero.ini b/src/language/en-GB/mod_mokojoomhero.ini new file mode 100644 index 0000000..ede69bd --- /dev/null +++ b/src/language/en-GB/mod_mokojoomhero.ini @@ -0,0 +1,12 @@ +; Copyright (C) 2026 Moko Consulting +; SPDX-License-Identifier: GPL-3.0-or-later +; +; FILE INFORMATION +; DEFGROUP: MokoJoomHero.Module.Language +; INGROUP: MokoJoomHero.Module +; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero +; PATH: /src/language/en-GB/mod_mokojoomhero.ini +; VERSION: 01.00.01 +; BRIEF: Front-end language strings for MokoJoomHero module + +MOD_MOKOJOOMHERO_NO_CONTENT="Add content to this module to display it over the hero image." diff --git a/src/language/en-GB/mod_mokojoomhero.sys.ini b/src/language/en-GB/mod_mokojoomhero.sys.ini new file mode 100644 index 0000000..ffdc730 --- /dev/null +++ b/src/language/en-GB/mod_mokojoomhero.sys.ini @@ -0,0 +1,51 @@ +; Copyright (C) 2026 Moko Consulting +; SPDX-License-Identifier: GPL-3.0-or-later +; +; FILE INFORMATION +; DEFGROUP: MokoJoomHero.Module.Language +; INGROUP: MokoJoomHero.Module +; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero +; PATH: /src/language/en-GB/mod_mokojoomhero.sys.ini +; VERSION: 01.00.01 +; BRIEF: System language strings — used in admin Extension Manager and Module Manager + +MOD_MOKOJOOMHERO="Module - MokoJoomHero" +MOD_MOKOJOOMHERO_DESCRIPTION="Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting." + +; Hero mode +MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode" +MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video." +MOD_MOKOJOOMHERO_MODE_IMAGES="Images" +MOD_MOKOJOOMHERO_MODE_VIDEO="Video" + +; Image settings +MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder" +MOD_MOKOJOOMHERO_IMAGE_FOLDER_DESC="Path to folder containing hero images, relative to Joomla root (e.g. images/heroes)." +MOD_MOKOJOOMHERO_IMAGE_COUNT_LABEL="Number of Images" +MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slideshow (1–5)." +MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)" +MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)." + +; Video settings +MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video File" +MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Path or URL to the background video file (MP4 recommended)." + +; Hero height +MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height" +MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="CSS height of the hero section (e.g. 400px, 60vh)." + +; Overlay fieldset +MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text" +MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Colour" +MOD_MOKOJOOMHERO_OVERLAY_COLOR_DESC="Background colour of the overlay on top of the hero image." +MOD_MOKOJOOMHERO_OVERLAY_OPACITY_LABEL="Overlay Opacity" +MOD_MOKOJOOMHERO_OVERLAY_OPACITY_DESC="Transparency of the overlay (0 = fully transparent, 1 = fully opaque)." +MOD_MOKOJOOMHERO_TEXT_ALIGN_LABEL="Text Alignment" +MOD_MOKOJOOMHERO_TEXT_ALIGN_DESC="Horizontal alignment of the overlay text." +MOD_MOKOJOOMHERO_TEXT_COLOR_LABEL="Text Colour" +MOD_MOKOJOOMHERO_TEXT_COLOR_DESC="Colour of the text displayed over the hero image." + +; Alignment options +MOD_MOKOJOOMHERO_ALIGN_LEFT="Left" +MOD_MOKOJOOMHERO_ALIGN_CENTER="Centre" +MOD_MOKOJOOMHERO_ALIGN_RIGHT="Right" diff --git a/src/language/en-GB/tpl_mokojoomhero.ini b/src/language/en-GB/tpl_mokojoomhero.ini deleted file mode 100644 index 79af3f4..0000000 --- a/src/language/en-GB/tpl_mokojoomhero.ini +++ /dev/null @@ -1,13 +0,0 @@ -; Copyright (C) 2026 Moko Consulting -; SPDX-License-Identifier: GPL-3.0-or-later -; -; FILE INFORMATION -; DEFGROUP: MokoJoomHero.Template.Language -; INGROUP: MokoJoomHero.Template -; REPO: https://github.com/mokoconsulting-tech/MokoJoomHero -; PATH: /src/language/en-GB/tpl_mokojoomhero.ini -; VERSION: 01.00.01 -; BRIEF: Front-end language strings for MokoJoomHero template - -TPL_MOKOJOOMHERO_MAIN_NAV="Main Navigation" -TPL_MOKOJOOMHERO_BACK_TO_TOP="Back to top" diff --git a/src/language/en-GB/tpl_mokojoomhero.sys.ini b/src/language/en-GB/tpl_mokojoomhero.sys.ini deleted file mode 100644 index eaca64e..0000000 --- a/src/language/en-GB/tpl_mokojoomhero.sys.ini +++ /dev/null @@ -1,25 +0,0 @@ -; Copyright (C) 2026 Moko Consulting -; SPDX-License-Identifier: GPL-3.0-or-later -; -; FILE INFORMATION -; DEFGROUP: MokoJoomHero.Template.Language -; INGROUP: MokoJoomHero.Template -; REPO: https://github.com/mokoconsulting-tech/MokoJoomHero -; PATH: /src/language/en-GB/tpl_mokojoomhero.sys.ini -; VERSION: 01.00.01 -; BRIEF: System language strings — used in admin Extension Manager and Template Manager - -TPL_MOKOJOOMHERO="MokoJoomHero" -TPL_MOKOJOOMHERO_DESCRIPTION="A modern, accessible Joomla template by Moko Consulting. Features a hero section, flexible module positions, sticky header, and customisable brand colour." -TPL_MOKOJOOMHERO_LOGO_FILE_LABEL="Logo" -TPL_MOKOJOOMHERO_LOGO_FILE_DESC="Select an image to use as the site logo." -TPL_MOKOJOOMHERO_SITE_DESCRIPTION_LABEL="Site Description" -TPL_MOKOJOOMHERO_SITE_DESCRIPTION_DESC="A short tagline displayed next to the logo." -TPL_MOKOJOOMHERO_BRAND_COLOR_LABEL="Brand Colour" -TPL_MOKOJOOMHERO_BRAND_COLOR_DESC="Primary accent colour used throughout the template." -TPL_MOKOJOOMHERO_FLUID_LABEL="Fluid Container" -TPL_MOKOJOOMHERO_FLUID_DESC="Use a full-width container instead of a fixed-width one." -TPL_MOKOJOOMHERO_STICKY_HEADER_LABEL="Sticky Header" -TPL_MOKOJOOMHERO_STICKY_HEADER_DESC="Keep the header visible when scrolling." -TPL_MOKOJOOMHERO_BACK_TO_TOP_LABEL="Back to Top Button" -TPL_MOKOJOOMHERO_BACK_TO_TOP_DESC="Show a floating button that scrolls the page to the top." diff --git a/src/mod_mokojoomhero.php b/src/mod_mokojoomhero.php new file mode 100644 index 0000000..f8e908a --- /dev/null +++ b/src/mod_mokojoomhero.php @@ -0,0 +1,75 @@ +getDocument()->getWebAssetManager(); +$wa->getRegistry()->addExtensionRegistryFile('mod_mokojoomhero'); +$wa->usePreset('mod_mokojoomhero'); + +// Module parameters +$heroMode = $params->get('heroMode', 'images'); +$imageFolder = $params->get('imageFolder', 'images/heroes'); +$imageCount = (int) $params->get('imageCount', 5); +$slideInterval = (int) $params->get('slideInterval', 5000); +$videoFile = $params->get('videoFile', ''); +$heroHeight = $params->get('heroHeight', '400px'); +$overlayColor = $params->get('overlayColor', '#000000'); +$overlayOpacity = (float) $params->get('overlayOpacity', 0.5); +$textAlign = $params->get('textAlign', 'center'); +$textColor = $params->get('textColor', '#ffffff'); + +// Collect hero images +$heroImages = []; + +if ($heroMode === 'images') { + $folderPath = JPATH_ROOT . '/' . ltrim($imageFolder, '/'); + + if (is_dir($folderPath)) { + $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg']; + $all = []; + + foreach (new DirectoryIterator($folderPath) as $file) { + if ($file->isFile() && in_array(strtolower($file->getExtension()), $allowed, true)) { + $all[] = $file->getFilename(); + } + } + + if ($all) { + shuffle($all); + $picked = array_slice($all, 0, min($imageCount, 5)); + + foreach ($picked as $filename) { + $heroImages[] = Uri::root() . $imageFolder . '/' . $filename; + } + } + } +} + +// Build video URL (relative path → absolute) +$videoUrl = ''; + +if ($heroMode === 'video' && $videoFile) { + $videoUrl = (strpos($videoFile, '://') !== false) + ? $videoFile + : Uri::root() . ltrim($videoFile, '/'); +} + +// Module content from the editor (overlay text) +$content = $module->content ?? ''; + +require ModuleHelper::getLayoutPath('mod_mokojoomhero', $params->get('layout', 'default')); diff --git a/src/mod_mokojoomhero.xml b/src/mod_mokojoomhero.xml new file mode 100644 index 0000000..af6bb4c --- /dev/null +++ b/src/mod_mokojoomhero.xml @@ -0,0 +1,150 @@ + + + + mod_mokojoomhero + 2026-05 + Moko Consulting + hello@mokoconsulting.tech + https://mokoconsulting.tech + Copyright (C) 2026 Moko Consulting. All rights reserved. + GPL-3.0-or-later + 1.0.0 + MOD_MOKOJOOMHERO_DESCRIPTION + + + mod_mokojoomhero.php + mod_mokojoomhero.xml + joomla.asset.json + tmpl + css + js + language + + + + en-GB/mod_mokojoomhero.ini + en-GB/mod_mokojoomhero.sys.ini + + + + +
+ + + + + + + + + +
+
+ + + + + + + + +
+ + + + + + https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/raw/branch/main/updates.xml + + + + diff --git a/src/offline.php b/src/offline.php deleted file mode 100644 index 2e560ac..0000000 --- a/src/offline.php +++ /dev/null @@ -1,134 +0,0 @@ - - * - * This file is part of a Moko Consulting project. - * - * SPDX-License-Identifier: GPL-3.0-or-later - * - * FILE INFORMATION - * DEFGROUP: MokoJoomHero.Template - * INGROUP: MokoJoomHero - * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero - * PATH: /src/offline.php - * VERSION: 01.00.01 - * BRIEF: Offline page template — shown when the site is taken offline via Global Configuration - */ - -defined('_JEXEC') or die; - -use Joomla\CMS\Factory; -use Joomla\CMS\Helper\AuthenticationHelper; -use Joomla\CMS\HTML\HTMLHelper; -use Joomla\CMS\Language\Text; -use Joomla\CMS\Router\Route; -use Joomla\CMS\Uri\Uri; - -/** @var Joomla\CMS\Document\HtmlDocument $this */ - -$app = Factory::getApplication(); - -// Offline message from Global Configuration -$offline_message = $app->get('offline_message', Text::_('JOFFLINE_MESSAGE')); - -// Extra login methods -$extra_buttons = AuthenticationHelper::getLoginButtons('form-login'); - -?> - - - - - - <?php echo htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8'); ?> — <?php echo Text::_('JOFFLINE'); ?> - - - - - -
-

get('sitename'), ENT_QUOTES, 'UTF-8'); ?>

- -

- - -
- - diff --git a/src/templateDetails.xml b/src/templateDetails.xml deleted file mode 100644 index dd6ba7e..0000000 --- a/src/templateDetails.xml +++ /dev/null @@ -1,129 +0,0 @@ - - - - tpl_mokojoomhero - 2026-05 - Moko Consulting - hello@mokoconsulting.tech - https://mokoconsulting.tech - Copyright (C) 2026 Moko Consulting. All rights reserved. - GPL-3.0-or-later - 1.0.0 - TPL_MOKOJOOMHERO_DESCRIPTION - 0 - - - index.php - error.php - offline.php - component.php - joomla.asset.json - templateDetails.xml - css - js - images - html - language - - - - css - js - images - - - - topbar - banner - menu - hero - breadcrumbs - sidebar-left - sidebar-right - main-top - main-bottom - footer - debug - - - - en-GB/tpl_mokojoomhero.ini - en-GB/tpl_mokojoomhero.sys.ini - - - - -
- - - -
-
- - - - - - - - - - - - -
- - - diff --git a/src/tmpl/default.php b/src/tmpl/default.php new file mode 100644 index 0000000..f4042b8 --- /dev/null +++ b/src/tmpl/default.php @@ -0,0 +1,66 @@ +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'); +?> +
1) : ?> + data-slides="" + data-interval="" + +> + + + + + $img) : ?> +
+
+ + + + +
+
+ + + +

+ +
+
+
diff --git a/src/html/index.html b/src/tmpl/index.html similarity index 100% rename from src/html/index.html rename to src/tmpl/index.html diff --git a/update.xml b/update.xml index 551709a..a2811be 100644 --- a/update.xml +++ b/update.xml @@ -1,17 +1,15 @@ + - {{EXTENSION_NAME}} - MokoJoomHero — Moko Consulting Joomla extension - {{EXTENSION_ELEMENT}} - {{EXTENSION_TYPE}} + Module - MokoJoomHero + MokoJoomHero — A Joomla hero image module by Moko Consulting + mod_mokojoomhero + module + site {{VERSION}} - https://git.mokoconsulting.tech/mokoconsulting-tech/MokoJoomHero/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip - - - https://github.com/mokoconsulting-tech/MokoJoomHero/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/releases/download/v{{VERSION}}/mod_mokojoomhero.zip - + 8.1 - \ No newline at end of file + diff --git a/updates.xml b/updates.xml index cdfdb90..b4b1990 100644 --- a/updates.xml +++ b/updates.xml @@ -1,59 +1,19 @@ - + - {{EXTENSION_NAME}} - MokoJoomHero — Moko Consulting Joomla extension - {{EXTENSION_ELEMENT}} - {{EXTENSION_TYPE}} - {{VERSION}} + Module - MokoJoomHero + MokoJoomHero — A Joomla hero image module by Moko Consulting + mod_mokojoomhero + module + site + 1.0.0 + https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero - - https://git.mokoconsulting.tech/mokoconsulting-tech/MokoJoomHero/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip - - - https://github.com/mokoconsulting-tech/MokoJoomHero/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip - + https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/releases/download/v1.0.0/mod_mokojoomhero-1.0.0.zip - + 8.1 + Moko Consulting + https://mokoconsulting.tech - - - tpl_mokojoomhero - tpl_mokojoomhero development build. - mokojoomhero - template - site - 01.00.02 - 2026-05-16 - https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/releases/tag/development - - https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/releases/download/development/mokojoomhero-01.00.02-dev.zip - - 7c85c337030507e2a07c79d333a652bcb1fd8497be221fcb2aeaa2ca038c0b22 - development - Moko Consulting - https://mokoconsulting.tech - - - - \ No newline at end of file +