SleeplessByte/triggerbus

View on GitHub
example/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>🚌 triggerbus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../triggerbus.umd.js"></script>
</head>
<body>
    <h1>Example</h1>
    <pre><code>
const bus = triggerbus()
bus.on('*', logger)

const off = bus.on('🎁', function(event, param) { output(event, 'Got myself a ' + param) })
bus.on('🎁', function(event, param) { output(event, 'But did I get a ' + param) })
bus.trigger('🎁', '🍕')

off()

bus.trigger('🎁', 'real 🍕')
bus.off('🎁')

bus.trigger('🎁', '🌯')
    </code></pre>

    <h2>Output</h2>
    <output><pre><code data-target="output"></code></pre></output>
    <h2>Wildcard logger</h2>
    <output><pre><code data-target="logger"></code></pre></output>

    <script>
      const out = document.querySelector('[data-target="output"]')
      const log = document.querySelector('[data-target="logger"]')

      function output(event, data) {
        out.appendChild(document.createTextNode(`${event}: ${data}`))
        out.appendChild(document.createElement('br'))
      }

      function logger(event, data) {
        log.appendChild(document.createTextNode(`${event}: ${data}`))
        log.appendChild(document.createElement('br'))
      }

      const bus = triggerbus()
      bus.on('*', logger)

      const off = bus.on('🎁', function(event, param) { output(event, 'Got myself a ' + param) })
      bus.on('🎁', function(event, param) { output(event, 'But did I get a ' + param) })
      bus.trigger('🎁', '🍕')

      off()

      bus.trigger('🎁', 'real 🍕')
      bus.off('🎁')

      bus.trigger('🎁', '🌯')
      // sad no pizza
    </script>
</body>
</html>