Selection Area
Simple JavaScript seletion area to any DOM container element.
Installation
npm
Install with npm install selection-area
yarn
Install with yarn add selection-area
From Source Code
Clone or download zipped source code into node_modules
project folder.
git clone https://github.com/lucasmenendez/selection-area.git <project>/node_modules/selection-area
Including SelectionArea
Import dist version:
<script src="/node_modules/webproletarian/dist/selection-area.js"></script>
Or import with ES6 import
:
import { SelectionArea } from 'selection-area';
Demo
Checkout the demo here.
Documentation
Table of Contents
Area
Area class includes all required functions to emulate the area behaviour. Constructor initializes main params of area Element and stores area DOM Element ID
Parameters
-
id
string Area Element DOM ID -
x
number Initial area position on x axis, default 0 (optional, default0
) -
y
number Initial area position on y axis, default 0 (optional, default0
)
instance
Instance function creates DOM Element for selection area, assings the ID provided and sets default style to it. The function receives container Element, append created area to it and stores both of them into the current instance.
Parameters
-
parent
Element Container Element to append selection area
resize
Recalculates current area dimensions and call uptdate to reset current DOM Element.
Parameters
move
Recalculates current area DOM Element position based en current cursor position.
Parameters
destroy
Deletes current DOM Element from parent container.
isOver
Calculates if target Element dimensions and current selection area DOM Element dimensions intersects in any side.
Parameters
-
target
Element Target DOM Element to check if area is over it
Returns any Boolean with intersection result
SelectionArea
SelectionArea class listen mouse movements to create and adapt a selection area checking if intersects with any target child element and returns the content of defined property of that childs.
Parameters
-
config
Object Config object-
config.container
Element DOM Element to make selectable -
config.targetSelector
string DOM selector of selectables childs -
config.areaId
string? DOM ID for selection area to define styles -
config.property
string? Property to get from selected childs -
config.callback
function? Function to call when selection ends
-
Examples
import { SelectionArea } from 'selection-area';
let container = document.querySelector('.parent');
let targetSelector = '.child';
let callback = selection => {
if (selection.length == 0) console.warn("empty selection");
else console.log(selection);
}
let selectable = new Selectable({ container, targetSelector, callback });
onSelect
Function stores user callback to invoke it when selection ends.
Parameters
-
callback
function Function defined as callback by user
checkConfig
Function that checks if all required configuration are provided as param, extract whole configurayions inside it and stores into current instance.
Parameters
-
config
Onject Configuration object definition
listenMouse
Sets custom listeners to mouse down, move and up events.
initArea
initArea funtion clears current selection, creates new area with ID provided and instances it into current container.
Parameters
-
e
MouseEvent 'mousedown' event metadata
updateArea
updateArea captures current mouse position and updates current selection area with that position, resizing area and moving it.
Parameters
-
e
MouseEvent 'mousemove' event metadata.
removeArea
removeArea extract selected items, destroy current selection area and invokes callback passing values of selected items.
Parameters
-
e
MouseEvent 'mouseup' event metadata.
checkIntersections
checkIntersecionts iterates over all posible targets and checks if current selection area intersects with each of them. Stores all included values of user defined child property.