Home

Awesome

<h1 align="center"> <!-- Logo --> <img src="https://raw.githubusercontent.com/rill-js/rill/master/Rill-Icon.jpg" alt="Rill"/> <br/> @rill/delegate <br/> <!-- Stability --> <a href="https://nodejs.org/api/documentation.html#documentation_stability_index"> <img src="https://img.shields.io/badge/stability-stable-brightgreen.svg?style=flat-square" alt="API stability"/> </a> <!-- Standard --> <a href="https://github.com/feross/standard"> <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard"/> </a> <!-- NPM version --> <a href="https://npmjs.org/package/@rill/delegate"> <img src="https://img.shields.io/npm/v/@rill/delegate.svg?style=flat-square" alt="NPM version"/> </a> <!-- Downloads --> <a href="https://npmjs.org/package/@rill/delegate"> <img src="https://img.shields.io/npm/dm/@rill/delegate.svg?style=flat-square" alt="Downloads"/> </a> <!-- Gitter Chat --> <a href="https://gitter.im/rill-js/rill"> <img src="https://img.shields.io/gitter/room/rill-js/rill.svg?style=flat-square" alt="Gitter Chat"/> </a> </h1>

Isomorphic event delegation utility for Rill. This allows for isomorphic DOM event binding with any templating language.

Installation

Npm

npm install @rill/delegate

API

delegate(options)

Setups up a middleware that will reset event listeners once per request. This allows for page specific delegators.

const app = require('rill')()
const delegate = require('@rill/delegate')

// Setup middleware.
app.use(delegate())

delegate.on(event, [selector=document], handler)

Registers a delegated event listener for the request.

app.get('/', (ctx) => {
  // Here we listen for `keyup` events that match a `.verification-code` element.
  delegate.on('keyup', '.verification-code', (ev, go) => {
      // `currentTarget` will be the element that matched the selector.
      const input = ev.currentTarget;
      const code = input.value

      // The second argument is the 'go' utility, which is much like native fetch but tells Rill to navigate.
      if (code.length === 5) {
        // In this case when we have 5 characters, we navigate to the submission page.
        go('/submit', {
          method: 'POST',
          body: { code }
        })
      }
  })

  // We can also add event listeners to the window by omitting the selector.
  delegate.on('scroll', ev => ...)

  // Finally, #on returns a function which can be used to stop the listener.
  const cancel = delegate.on('scroll', ev => ...)
})

delegate.once(event, [selector=document], handler)

Registers a delegated event listener for the request that is canceled after the first run.

app.get('/', (ctx) => {
  // Scroll will only fire at most once per request.
  const cancel = delegate.once('scroll', (ev, go) => ...)
});

Contributions

Please feel free to create a PR!