MyClub/DOCS/MYUIBRIX_FIXES.md

MyUIbrix Editor Fixes - December 2024

Issues Fixed

1. ✅ Element Picker Shows Only Implemented Elements

Problem: The element picker was showing ALL available element types (30+), but only a subset were actually implemented on the HomePage.

Solution:

• Created HOMEPAGE_IMPLEMENTED_ELEMENTS array in defaultElements.ts listing only implemented elements
• Updated MyUIbrixEditor to filter PREDEFINED_ELEMENTS by what's actually available on the current page
• Now only shows: hero, news, matches, table, team, videos, merch, newsletter, sponsors, banner

2. ✅ Live Preview Now Works

Problem: Changing variants and visibility in the editor didn't show changes in real-time. You had to save and reload to see effects.

Solution:

• Integrated useAllPageElementConfigs hook into HomePage component
• Hook listens to myuibrix-change events and updates visibility/variant state in real-time
• All sections now use isVisible('elementName', defaultValue) to control rendering
• Variant changes use getVariant('elementName', fallback) to switch between styles

3. ✅ All Sections Have data-element Attributes

Problem: Some sections were missing data-element attributes, so the editor couldn't highlight or edit them.

Solution:

• Added data-element attributes to all major sections:
  • hero - Main hero section (grid/scroller/swiper variants)
  • news - Featured news articles
  • matches - Upcoming matches display
  • table - League standings table
  • team - Players scroller
  • videos - Videos section
  • merch - Merchandise/fanshop
  • newsletter - Newsletter subscription
  • sponsors - Sponsors/partners
  • banner - Advertisement banners

4. ✅ Visibility Controls Work

Problem: Hiding/showing elements didn't work at all.

Solution:

• All sections now wrapped with isVisible() checks
• Changes in the editor immediately toggle visibility
• Default visibility set appropriately (hero=true, videos=false, etc.)

How It Works Now

For Admins (Editing Mode)

1. Activate Editor: Click the floating edit button (bottom left)
2. Select Element: Click on any section to select it
3. Change Style: Pick from available style variants for that element
4. Move Elements: Use up/down arrows to reorder sections
5. Hide/Show: Toggle element visibility in the layers panel
6. Preview: Changes appear IMMEDIATELY (live preview mode)
7. Save: Click "Publikovat" to save changes permanently

Technical Details

Live Preview Architecture:

MyUIbrixEditor (editing) 
  → Dispatches 'myuibrix-change' event
  → useAllPageElementConfigs hook listens
  → Updates getVariant() & isVisible() functions
  → HomePage re-renders with new configuration

Only Editing User Sees Changes:

• Preview mode is indicated by previewMode: true in events
• Changes only apply in browser memory during editing
• Other users see the published version until you click "Publikovat"

Element Variants Available

Hero Section

• grid - Grid layout with featured article
• scroller - Horizontal scrolling cards
• swiper - Carousel/swiper
• swiper_full - Full-width carousel

Matches

• compact - Compact next match display
• compact_split - Split layout with multiple matches

Table

• split_news - News + table side-by-side (default)
• standard - Table only

Sponsors

• grid - Grid layout
• slider - Animated slider

Videos, Team, News, etc.

• See ELEMENT_VARIANTS in pageElements.ts for full list

Default Configuration

New installations use these defaults (from defaultElements.ts):

• Hero (grid) - Visible
• News (grid) - Visible
• Matches (compact) - Visible
• Table (split_news) - Visible
• Merch (grid) - Visible
• Sponsors (grid) - Visible
• Videos - Hidden (must enable)
• Team - Hidden (must enable)
• Newsletter - Hidden (must enable)
• Banner - Hidden (must enable)

✅ NEW: Drag-and-Drop Reordering (Just Added!)

Visual Reordering Works

• Up/Down arrows now visually reorder sections immediately
• Drag-and-drop support in layers panel - grab any element and drag it
• Changes apply in real-time (live preview)
• DOM elements are physically reordered to match your layout

How to Reorder

Method 1: Arrow Buttons

1. Click on an element to select it
2. Use ↑ ↓ arrows in the contextual panel or layers panel
3. Section moves immediately

Method 2: Drag and Drop (Recommended)

1. Open Layers Panel (L key or layers button)
2. Grab the drag handle (⋮⋮ icon) or any layer item
3. Drag to desired position
4. Drop - section reorders instantly!

Visual Feedback

• Dragging: Item becomes semi-transparent with "grabbing" cursor
• Drop target: Highlighted in blue with scale effect
• Grip handle: Shows ⋮⋮ icon to indicate draggability
• Position label: Shows "Position 1 of 10" etc.

Some Variants Not Fully Styled

• Not all variant options have complete styling
• Most common variants (grid, compact, standard) work well
• Exotic variants may need CSS work

Testing Checklist

After deployment, test these scenarios:

• Click edit button → editor UI appears
• Click on hero section → style picker appears
• Change hero from "grid" to "scroller" → updates immediately
• Hide "sponsors" section → disappears immediately
• Show "videos" section → appears immediately
• NEW: Click ↑ arrow on "matches" → moves up visually
• NEW: Open layers panel (L) → see all sections with drag handles
• NEW: Drag "newsletter" above "sponsors" → reorders immediately
• NEW: Drag "hero" to bottom → entire page reorders
• Open element picker (+ button) → only shows 10 implemented elements
• Save changes (Publikovat) → page reloads with saved state
• NEW: Reload page → sections appear in saved order
• Open page in incognito → sees published version (not draft)

Files Modified

1. defaultElements.ts - Added HOMEPAGE_IMPLEMENTED_ELEMENTS list
2. MyUIbrixEditor.tsx - Filter element picker, add overlays, drag-drop handlers, visual reordering
3. HomePage.tsx - Integrated useAllPageElementConfigs hook, added visibility controls
4. usePageElementConfig.ts - Added DOM reordering, element order state, initial order application

Migration Notes

Existing Sites: No data migration needed. The system will:

1. Load existing configurations from database
2. Fall back to defaults for missing elements
3. Mark as "hasChanges" if using defaults (so admin can save)

New Sites: Defaults are applied automatically on first page load.