A potential architecture for a full-screen

slideshow-ad-update-pattern.js

/**
Order of operations:
user clicks on button within a slideshow
button emits a 'click' event
slideshow catches button click event
slideshow handles the specified action (change the slide to the right)
slideshow emits a 'slide_changed' event
click gallery, acting as a controller/higher-level wrapper for the slideshow in this case catches the slide changed event
click gallery tells the advertisement to update
advertisement runs an update
*/

import { EventEmitter } from 'events'

class UIComponent extends EventEmitter {}

class Advertisement extends UIComponent {
  render () {
    // put the markup on the page and initialize it
  }

  update () {
    // make a request for new ad content and put it on the page
  }
}

class Slideshow extends UIComponent {
  change_slide (direction) {
    this.emit('slide_changed')
  }

  render () {
    this.nav_buttons.forEach(button => {
      button.on('click', event => {
        this.change_slide(event.target.direction)
      })
    })
  }
}

class ClickGallery extends UIComponent {
  constructor () {
    $.get('/slides').then(slides => this.render(slide_data))
  }

  render () {
    this.slideshow = new Slideshow(slide_data)
    this.advertisement = new Advertisement()

    this.slideshow.render()
    this.advertisement.render()

    this.slideshow.on('slide_changed', (event) => {
      this.advertisement.update()
      // this.advertisement.trigger('update')
    })
  }
}