From abbd70b7f0d04e44a84f6be96acc2964b2495908 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Sun, 12 Jul 2026 19:06:39 -0500 Subject: [PATCH 1/2] feat(social): add collapsible + collapsed-by-default config for floating social bar Adds two template params for the floating social icons sidebar: - social_floating_collapsible: show/hide the collapse toggle handle - social_floating_collapsed: start collapsed on first visit (default on) The layout renders the initial collapsed state server-side (no flash), gates the toggle button behind the collapsible param, and exposes the admin default via data-default-collapsed. The JS honors a visitor's saved localStorage preference first, falling back to the admin default. --- source/html/layouts/mokoonyx/social-icons.php | 17 +++++++++--- source/language/en-GB/tpl_mokoonyx.ini | 4 +++ source/language/en-US/tpl_mokoonyx.ini | 4 +++ source/media/js/template.js | 27 ++++++++++++------- source/templateDetails.xml | 14 ++++++++++ 5 files changed, 52 insertions(+), 14 deletions(-) diff --git a/source/html/layouts/mokoonyx/social-icons.php b/source/html/layouts/mokoonyx/social-icons.php index c575040..028937b 100644 --- a/source/html/layouts/mokoonyx/social-icons.php +++ b/source/html/layouts/mokoonyx/social-icons.php @@ -84,6 +84,10 @@ $floatingPos = in_array($params->get('social_floating_pos'), ['left', 'right'], $colorMode = in_array($params->get('social_icon_color'), ['theme', 'brand', 'black', 'white'], true) ? $params->get('social_icon_color') : 'theme'; +// Floating collapse behaviour (only meaningful for the floating position) +$collapsible = (bool) $params->get('social_floating_collapsible', 1); +$collapsedDefault = $collapsible && (bool) $params->get('social_floating_collapsed', 1); + $listClass = 'moko-social-icons'; $listClass .= ' moko-social-icons--' . htmlspecialchars($style, ENT_QUOTES, 'UTF-8'); $listClass .= ' moko-social-icons--' . htmlspecialchars($size, ENT_QUOTES, 'UTF-8'); @@ -94,8 +98,10 @@ if ($position === 'floating') { } ?> -
+
- + + +
diff --git a/source/language/en-GB/tpl_mokoonyx.ini b/source/language/en-GB/tpl_mokoonyx.ini index 566a177..b462c10 100644 --- a/source/language/en-GB/tpl_mokoonyx.ini +++ b/source/language/en-GB/tpl_mokoonyx.ini @@ -287,6 +287,10 @@ TPL_MOKOONYX_SOCIAL_FLOATING_POS_DESC="Which side of the screen the floating soc TPL_MOKOONYX_SOCIAL_FLOATING_POS_LEFT="Left" TPL_MOKOONYX_SOCIAL_FLOATING_POS_RIGHT="Right" TPL_MOKOONYX_SOCIAL_FLOATING_TOGGLE="Toggle social icons sidebar" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSIBLE_LABEL="Collapsible" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSIBLE_DESC="Show a toggle handle so visitors can collapse and expand the floating social bar. Their choice is remembered on their device." +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSED_LABEL="Collapsed by Default" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSED_DESC="Start the floating social bar collapsed on a visitor's first visit. Visitors who have already set their own preference keep it." TPL_MOKOONYX_SOCIAL_COLOR_LABEL="Icon Colour" TPL_MOKOONYX_SOCIAL_COLOR_DESC="Choose the colour scheme for social icons." TPL_MOKOONYX_SOCIAL_COLOR_THEME="Theme (CSS variables)" diff --git a/source/language/en-US/tpl_mokoonyx.ini b/source/language/en-US/tpl_mokoonyx.ini index a671025..6fad714 100644 --- a/source/language/en-US/tpl_mokoonyx.ini +++ b/source/language/en-US/tpl_mokoonyx.ini @@ -287,6 +287,10 @@ TPL_MOKOONYX_SOCIAL_FLOATING_POS_DESC="Which side of the screen the floating soc TPL_MOKOONYX_SOCIAL_FLOATING_POS_LEFT="Left" TPL_MOKOONYX_SOCIAL_FLOATING_POS_RIGHT="Right" TPL_MOKOONYX_SOCIAL_FLOATING_TOGGLE="Toggle social icons sidebar" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSIBLE_LABEL="Collapsible" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSIBLE_DESC="Show a toggle handle so visitors can collapse and expand the floating social bar. Their choice is remembered on their device." +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSED_LABEL="Collapsed by Default" +TPL_MOKOONYX_SOCIAL_FLOATING_COLLAPSED_DESC="Start the floating social bar collapsed on a visitor's first visit. Visitors who have already set their own preference keep it." TPL_MOKOONYX_SOCIAL_COLOR_LABEL="Icon Color" TPL_MOKOONYX_SOCIAL_COLOR_DESC="Choose the color scheme for social icons." TPL_MOKOONYX_SOCIAL_COLOR_THEME="Theme (CSS variables)" diff --git a/source/media/js/template.js b/source/media/js/template.js index b650658..e066516 100644 --- a/source/media/js/template.js +++ b/source/media/js/template.js @@ -797,20 +797,27 @@ function initSocialFloating() { var wrap = doc.getElementById("mokoSocialFloating"); var toggle = doc.getElementById("mokoSocialFloatingToggle"); + // The toggle is only rendered when the "collapsible" param is enabled. if (!wrap || !toggle) return; - // Restore saved state - try { - if (localStorage.getItem(socialStorageKey) === "1") { - wrap.classList.add("is-collapsed"); - toggle.setAttribute("aria-expanded", "false"); - } - } catch (e) {} + // Resolve the initial collapsed state: + // - A returning visitor's explicit choice (localStorage) always wins. + // - Otherwise fall back to the admin's "collapsed by default" setting, + // which the layout also renders server-side to avoid a state flash. + var saved = null; + try { saved = localStorage.getItem(socialStorageKey); } catch (e) {} + + var collapsed = (saved === "1" || saved === "0") + ? (saved === "1") + : (wrap.getAttribute("data-default-collapsed") === "1"); + + wrap.classList.toggle("is-collapsed", collapsed); + toggle.setAttribute("aria-expanded", collapsed ? "false" : "true"); toggle.addEventListener("click", function () { - var collapsed = wrap.classList.toggle("is-collapsed"); - toggle.setAttribute("aria-expanded", collapsed ? "false" : "true"); - try { localStorage.setItem(socialStorageKey, collapsed ? "1" : "0"); } catch (e) {} + var isCollapsed = wrap.classList.toggle("is-collapsed"); + toggle.setAttribute("aria-expanded", isCollapsed ? "false" : "true"); + try { localStorage.setItem(socialStorageKey, isCollapsed ? "1" : "0"); } catch (e) {} }); } diff --git a/source/templateDetails.xml b/source/templateDetails.xml index 38fbc7f..670c8e1 100644 --- a/source/templateDetails.xml +++ b/source/templateDetails.xml @@ -354,6 +354,20 @@ + + + + + + + + Date: Mon, 13 Jul 2026 00:11:53 +0000 Subject: [PATCH 2/2] chore(version): auto-bump patch 02.27.04-dev [skip ci] --- .mokogitea/workflows/issue-branch.yml | 2 +- CHANGELOG.md | 4 ++-- SECURITY.md | 2 +- source/html/layouts/joomla/module/card.php | 2 +- source/html/layouts/mokoonyx/article-metadata.php | 2 +- source/media/css/a11y-high-contrast.css | 2 +- source/templateDetails.xml | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.mokogitea/workflows/issue-branch.yml b/.mokogitea/workflows/issue-branch.yml index 91e28cc..7db6b2c 100644 --- a/.mokogitea/workflows/issue-branch.yml +++ b/.mokogitea/workflows/issue-branch.yml @@ -5,7 +5,7 @@ # FILE INFORMATION # DEFGROUP: Gitea.Workflow # INGROUP: mokocli.Automation -# VERSION: 02.27.03 +# VERSION: 02.27.04 # BRIEF: Auto-create feature branch when an issue is opened name: "Universal: Issue Branch" diff --git a/CHANGELOG.md b/CHANGELOG.md index ee1a988..7c85027 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,11 +8,11 @@ DEFGROUP: Joomla.Template.Site INGROUP: MokoOnyx.Documentation PATH: ./CHANGELOG.md - VERSION: 02.27.03 + VERSION: 02.27.04 BRIEF: Changelog file documenting version history of MokoOnyx --> -# Changelog — MokoOnyx (VERSION: 02.27.03) +# Changelog — MokoOnyx (VERSION: 02.27.04) ## [Unreleased] ### Added diff --git a/SECURITY.md b/SECURITY.md index 653af09..a103885 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -10,7 +10,7 @@ INGROUP: MokoOnyx.Governance REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx FILE: SECURITY.md - VERSION: 02.27.03 + VERSION: 02.27.04 BRIEF: Security policy and vulnerability reporting process for MokoOnyx. PATH: /SECURITY.md NOTE: This policy is process oriented and does not replace secure engineering practices. diff --git a/source/html/layouts/joomla/module/card.php b/source/html/layouts/joomla/module/card.php index e664083..b9ddb9e 100644 --- a/source/html/layouts/joomla/module/card.php +++ b/source/html/layouts/joomla/module/card.php @@ -10,7 +10,7 @@ * INGROUP: MokoOnyx * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx * PATH: /html/layouts/joomla/module/card.php - * VERSION: 02.27.03 + * VERSION: 02.27.04 * BRIEF: Custom card module chrome — renders module titles for all modules */ diff --git a/source/html/layouts/mokoonyx/article-metadata.php b/source/html/layouts/mokoonyx/article-metadata.php index 91c03c9..9b4d22d 100644 --- a/source/html/layouts/mokoonyx/article-metadata.php +++ b/source/html/layouts/mokoonyx/article-metadata.php @@ -11,7 +11,7 @@ * INGROUP: MokoOnyx.Layouts * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx * PATH: /src/html/layouts/mokoonyx/article-metadata.php - * VERSION: 02.27.03 + * VERSION: 02.27.04 * BRIEF: Article metadata footer layout -- renders jcfields grouped by field group */ diff --git a/source/media/css/a11y-high-contrast.css b/source/media/css/a11y-high-contrast.css index abd7f8d..a006a04 100644 --- a/source/media/css/a11y-high-contrast.css +++ b/source/media/css/a11y-high-contrast.css @@ -10,7 +10,7 @@ * INGROUP: MokoOnyx.Accessibility * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx * PATH: ./media/css/a11y-high-contrast.css - * VERSION: 02.27.03 + * VERSION: 02.27.04 * BRIEF: High-contrast stylesheet for accessibility toolbar */ diff --git a/source/templateDetails.xml b/source/templateDetails.xml index 670c8e1..6c3fb81 100644 --- a/source/templateDetails.xml +++ b/source/templateDetails.xml @@ -35,7 +35,7 @@ mokoonyx - 02.27.03 + 02.27.04 script.php 2026-05-16 Jonathan Miller || Moko Consulting