Element Selector

Select DOM elements with the mouse.

Installation

$ component install timoxley/element-selector

Example

var ElementSelector = require('element-selector');
var elementSelector = ElementSelector();

Demo

Options

selector

Only trigger select/highlight events on elements matching this selector.
Defaults to body *.

// Only trigger on paragraphs inside #content
var elementSelector = ElementSelector({
  selector: "#content p"
})

selectEvent

Mouse event to trigger selection. Must be one of click, dblclick,
mouseup or mousedown. Defaults to click

// Trigger on 'mousedown' instead of 'click'
var elementSelector = ElementSelector({
  selectEvent: "mousedown"
})

selectedClass

// elements will get class "editable" when they are highlighted
var elementSelector = ElementSelector({
  highlightedClass: "editable"
})

highlightedClass

// elements will get class "glow" when they are highlighted
var elementSelector = ElementSelector({
  highlightedClass: "glow"
})

useDefaultStyles

Disable this if you wish to disable the default styles.
Adds element-selector class to document.body if true.
Defaults to true.

// Disable default styles so you can
// use custom .selected and .highlighted css.
var elementSelector = ElementSelector({
  useDefaultStyles: false
})

Events

Events are fired whenever an element's selected or highlighted status
changes. Two arguments are passed to the callback: the element that was highlighted
or selected, and the original mouse event that triggered the action (if
it exists). The second event argument is supplied if you wish to
prevent default actions or otherwise query the triggering event.

Events will be one of the following:

ElementSelector's event API is inherited from
component/emitter.

Example

elementSelector.on('select', function(el, event) {
  event.preventDefault()
  console.log('element selected', el)
})

elementSelector.once('dehighlight', function(el) {
  console.log('element dehighlighted', el)
})

API

disable()

Disables the elementSelector instance. No more events will be fired, other
than those to deselect/dehighlight the currently selected/highlighted
elements.

  elementSelector.disable()

enable()

Reenables a elementSelector instance.

  elementSelector.enable()

Compatibility

Only tested in Chrome. Pull request welcome if you get it working in IE.

License

MIT