Event System

This guide explains the event management system in LamaPress.

Table of Contents

• Overview
• EventManager
  • Available Events
  • Event Scopes
• Subscribing to Events
  • Component Subscription
  • Global Events
• Triggering Events
  • Manual Triggering
  • Automatic Events
• Event Patterns
  • Scroll Events
  • Resize Events
  • Tick Events
• Best Practices
  • 1. Subscribe in init()
  • 2. Unsubscribe in destroy()
  • 3. Use Appropriate Scope
• Related Documentation

---

Overview

LamaPress uses an EventManager for global event handling. Components can subscribe to events and receive notifications when events are triggered.

EventManager

EventManager manages event subscriptions and triggering:

import { app } from '@src/js/core/app'

const eventManager = app.instances.get('eventManager')

Available Events

• scroll - Scroll events (direction, velocity)
• resize - Window resize events
• tick - Animation frame tick (time)
• handleRouteChange - Route change events
• destroy - Component destruction

Event Scopes

Events are scoped to:

• 'page' - Page-level components
• 'app' - App-level components

Subscribing to Events

Component Subscription

Subscribe to events in component:

import { app } from '@src/js/core/app'

export default class MyComponent {
  init = () => {
    const eventManager = app.instances.get('eventManager')
    eventManager.addScopeToEvent('scroll', 'page')
  }

  scroll = (props) => {
    const { direction, velocity } = props
    // Handle scroll event
  }
}

How it works:

1. Component calls addScopeToEvent() in init()
2. EventManager registers component for event
3. Component implements event method (e.g., scroll())
4. EventManager calls method when event is triggered

Global Events

Subscribe to multiple events:

init = () => {
  const eventManager = app.instances.get('eventManager')
  eventManager.addScopeToEvent('scroll', 'page')
  eventManager.addScopeToEvent('resize', 'page')
  eventManager.addScopeToEvent('tick', 'page')
}

scroll = (props) => {
  // Handle scroll
}

resize = (props) => {
  // Handle resize
}

tick = (props) => {
  // Handle tick
}

Triggering Events

Manual Triggering

Trigger events manually:

const eventManager = app.instances.get('eventManager')
eventManager.handleEvent('customEvent', {
  scope: 'page',
  data: { /* ... */ },
})

Automatic Events

Events are triggered automatically:

• Scroll - Triggered by Scroller on scroll
• Resize - Triggered by Resizer on window resize
• Tick - Triggered by Ticker on animation frame
• Route Change - Triggered by Router on navigation

Event Patterns

Scroll Events

Subscribe to scroll events:

export default class ScrollComponent {
  init = () => {
    const eventManager = app.instances.get('eventManager')
    eventManager.addScopeToEvent('scroll', 'page')
  }

  scroll = (props) => {
    const { direction, velocity } = props
    
    if (direction === 1) {
      // Scrolling down
    } else {
      // Scrolling up
    }
  }
}

Resize Events

Subscribe to resize events:

export default class ResizeComponent {
  init = () => {
    const eventManager = app.instances.get('eventManager')
    eventManager.addScopeToEvent('resize', 'page')
  }

  resize = (props) => {
    // Handle resize
    this.updateLayout()
  }
}

Tick Events

Subscribe to tick events:

export default class AnimatedComponent {
  init = () => {
    const eventManager = app.instances.get('eventManager')
    eventManager.addScopeToEvent('tick', 'page')
  }

  tick = (props) => {
    const { time } = props
    // Handle animation frame
    this.updateAnimation(time)
  }
}

Best Practices

1. Subscribe in init()

Subscribe to events in init():

init = () => {
  const eventManager = app.instances.get('eventManager')
  eventManager.addScopeToEvent('scroll', 'page')
}

2. Unsubscribe in destroy()

EventManager automatically cleans up, but ensure component is destroyed:

destroy = () => {
  // Cleanup handled automatically
}

3. Use Appropriate Scope

Use correct scope:

• 'page' for page-level components
• 'app' for app-level components (rare)

Related Documentation

• Core Instances - Core instance APIs
• JavaScript Architecture - JavaScript system
• Component JavaScript - Component structure

---

Next Steps:

• Review Core Instances for EventManager API
• Check JavaScript Architecture for system overview
• See Component JavaScript for component usage