❤
npm
Sign UpSign In

attr-chooser

2.0.0 • Public • Published

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 = {
    item: function (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')

var choosef = chooser(className, cb)

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.

choosef(elem, group)

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

install

With npm do:

npm install attr-chooser

license

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i attr-chooser

Weekly Downloads

2

Version

2.0.0

License

MIT

Last publish

Collaborators

  • nopersonsmodules
Try on RunKit
Report malware