# selectify

> generic array for manipulating styles and attributes

Latest version **1.1.0** (published 2016-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install selectify
pnpm add selectify
yarn add selectify
bun add selectify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-03-07 |
| First published | 2016-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | freeman-lab |
| Maintainers | freeman-lab |
| Keywords | selection, array, style, attribute, d3, interface, ui, visualization, array, css |

## Links

- npm: https://www.npmjs.com/package/selectify
- Repository: https://github.com/freeman-lab/selections
- Homepage: https://github.com/freeman-lab/selections#readme
- Issues: https://github.com/freeman-lab/selections/issues
- npm.io page: https://npm.io/package/selectify

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.2.1
- [class-list](https://npm.io/package/class-list.md) ^0.1.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2016-03-07
- 1.0.1 — 2016-02-11
- 1.0.0 — 2016-02-05

## README

# selectify

Generic array for manipulating styles and attributes. Heavily inspired by the wonderful `selections` from `d3`, but works with more generic objects, not just DOM elements! Includes CSS-oriented methods like `style` and `classed`, but can easily be extended to add custom methods. And the input is just an array, so initial selection can be handled elsewhere, and return this object for further manipulation. As an example, see it used for manipulating 3D scenes in [`gl-scene`](http://github.com/freeman-lab/gl-scene).

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

## install

Add to your project with

```javascript
npm install selectify --save
```

## example

Create a selection from an array

```javascript
var selectify = require('selectify')
var selection = selectify([{id: 'apple', className: 'fruit'}, {id: 'orange', className: 'fruit'}])
```

you can now set styles

```javascript
selection.style({color: 'rgb(255, 0, 0)'})
```

or classes

```javascript
selection.classed('cirtrus', function (d) {return d.id === 'orange'})
```

and evaluate functions

```javascript
selection.each(function (d) {
	console.log('id: ' + d.id)
	console.log('class: ' + d.className)
	console.log('style: ' + JSON.stringify(d.style))
})
```

which in this example will return

```javascript
id: apple
style: {"color":"rgb(255, 0, 0)"}
class: fruit
id: orange
style: {"color":"rgb(255, 0, 0)"}
class: fruit citrus
````

see below for all included methods, or how to extend with your own!

## methods

#### `selection.each(function)`

Evaluates a function on each element. The first input to the function will be the element, the second optional input will be the index.

#### `selection.style(name[,value])`

Set a style on each element by updating the `style` property. Can provide either a single object argument `selection.style({name: value})` or two arguments `selection.style(name, value)`. Can also provide a function for `value`, which will be evaluated on each item to determine the property value. If the function returns undefined, the property will be removed.

#### `selection.attr(name[,value])`

Set an attribute on each element by updating the `attributes` property. Otherwise works identically to `style`.

#### `selection.classed(name[,value])`

Set one or more classes on each element by updating the `className` property. Can provide a single class in the form `name` or a list of multiple classes specified by spaces in the form `name1 name2 name3`. If `value` is truthy it will determine whether to add or remove the class. If not provided, it will return a list of whether or not each element of the selection has the specified class.

#### `selection.toggleClass(name)`

Add one or more classes (if not already present), or remove them (if already present).

#### `selection.select(selector)`

Return a sub selection matching a string specifier of the form `#id` or `.class`. A string without a tag will be treated as an id. Will return the first element that matches. If no matching items, will return null.

#### `selection.selectAll(selector)`

Return a sub selection matching a string specifier of the form `#id` or `.class`. A string without a tag will be treated as an id. Will return all elements that match. If no matching items, will return null.

## extending

You may want to extend `selectify` with your own custom methods. It's easy to do with `inherits`. Here's an example. First, the usual boilerplate

```javascript
var selectify = require('selectify')
var inherits = require('inherits')

inherits(myselectify, selectify)

function myselectify (items) {
  if (!(this instanceof myselectify)) return new myselectify(items)
  myselectify.super_.call(this, items)
}
```

Then add a method `log`

```javascript
myselectify.prototype.log = function () {
  return this.each(function (d) {
    console.log(d.id)
  })
}
```

If we now create a selection we can use our new method

```javascript
var selection = myselectify([{id: 'apple'}, {id: 'orange'}])
selection.log()
```

to get

```
apple
orange
```

---
_Source: https://npm.io/package/selectify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._