dom-behavior

Define javascript behavior for DOM elements

npm install dom-behavior
14 downloads in the last week
14 downloads in the last month

dom-behavior

browser support

Define javascript behavior for DOM elements.

Install

NPM

Example

<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <div>
      Some content <button data-behavior='edit anotherBehavior'>Edit</button>
    </div>
    <div id='link' data-href='/test' data-behavior='link'>
      I'm not a link but I act like one
    </div>
  </body>
</body>
var behave = require('dom-behavior')

var behaviors = {
  edit: function(element){
    element.onclick = function(){
      // activate editor
    }
  },
  link: function(element){
    // create a fake hyperlink

    var url = element.getAttribute('data-href')
    element.style.cursor = 'pointer'

    element.onclick = function(e){
      window.location = url
    }

    return function(message){
      if (message == 'update'){
        url = element.getAttribute('data-href')
        if (url){
          element.style.cursor = 'pointer'
        } else {
          element.style.cursor = 'default'
        }
      }
    }
  },
  anotherBehavior: function(element){
    // multiple behaviors can be added to the same element 
    // seperated by spaces. Just like html classes.
  }
}

var notify = behave(behaviors, document)

var linkDiv = document.getElementById('link')
linkDiv.setAttribute('data-href', '/new-url')

// normally this would be called from some data-binding/templating thingy.
// triggers func('change') on any behaviors directly on this node
notify('update', linkDiv)

// triggers func('change') on any child of this node with behaviors
notify('inner', linkDiv)

// remove behaviors and trigger func('remove')
notify('remove', linkDiv)

Using with become, json-context and rincewind

See https://github.com/mmckegg/realtime-blog-example-with-browserify.

npm loves you