Element Selector
Select DOM elements with the mouse.
Installation
$ component install timoxley/element-selector
Example
var ElementSelector = require('element-selector');
var elementSelector = ElementSelector();
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:
- select
- deselect
- highlight
- dehighlight
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.