attr-chooser

select among a list of dom elements with the same attribute

attr-chooser

select among a list of dom elements with the same attribute

example

First write some html with a chooser attribute (or whatever you want) on the items you want to select:

<html>
  <head>
    <style>
      .item {
        cursor: pointer;
        width: 200px;
        padding: 2px;
      }
      .item:hover {
        background-color: rgb(200,200,230);
      }
      .item.active {
        background-color: rgb(150,150,250);
        color: white;
      }
    </style> 
  </head>
  <body>
    <div id="items">
      <div class="item" x-chooser="item">one</div>
      <div class="item" x-chooser="item">two</div>
      <div class="item" x-chooser="item">three</div>
      <div class="item" x-chooser="item">four</div>
    </div>
    <script src="bundle.js"></script> 
  </body>
</html>

Then wire up some browser code:

var choose = require('attr-chooser')('active', function (elem) {
    console.log('selected', elem.textContent);
});
 
var elems = document.querySelectorAll('*[x-chooser]');
for (var i = 0; i < elems.length; i++) {
    choose(elems[i]);
}

or you can use attractor:

var scope = {
    itemfunction (elem) {
        console.log('selected', elem.textContent);
    }
};
var attr = require('attractor')({
    'x-chooser': [ require('attr-chooser'), 'active' ]
}, scope);
attr.scan(document);

Compile your browser code with browserify:

$ browserify browser.js > bundle.js

methods

var chooser = require('attr-chooser')

Return a function choosef(elem, attrName) that you should call on every element you want to wire up for item selection.

When somebody clicks on an element, cb(elem, ev, name) fires with the dom element elem, the click event ev, and the group name set in the attribute value.

Create a group based on the group string for the dom element elem.

install

With npm do:

npm install attr-chooser

license

MIT