Viselect - Vanilla

Installation

Via package manager

$ npm install @viselect/vanilla
# or 
$ yarn add @viselect/vanilla

Via script tags

1
2<script src="https://cdn.jsdelivr.net/npm/@viselect/vanilla/lib/viselect.min.js"></script>

Via ES6 import

1import SelectionArea from "https://cdn.jsdelivr.net/npm/@viselect/vanilla/lib/viselect.min.mjs"

Getting started

Last but not least you'll need to add some basic styles to make your selection-area visible:

1.selection-area {
2    background: rgba(46, 115, 252, 0.11);
3    border: 2px solid rgba(98, 155, 255, 0.81);
4    border-radius: 0.1em;
5}

Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of v2.0.3). This however can cause problems with the actual selection ("introduced" by #99, reported in #103). If you don't care about text-selection, add the following to the container where all your selectables are located:

1.container {
2    user-select: none;
3}

Usage

1const selection = new SelectionArea({
2
3    // Class for the selection-area itself (the element).
4    selectionAreaClass: 'selection-area',
5
6    // Class for the selection-area container.
7    selectionContainerClass: 'selection-area-container',
8
9    // Query selector or dom-node to set up container for the selection-area element.
10    container: 'body',
11
12    // document object - if you want to use it within an embed document (or iframe).
13    document: window.document,
14
15    // Query selectors for elements which can be selected.
16    selectables: [],
17
18    // Query selectors for elements from where a selection can be started from.
19    startareas: ['html'],
20
21    // Query selectors for elements which will be used as boundaries for the selection.
22    boundaries: ['html'],
23
24    // Behaviour related options.
25    behaviour: {
26
27        // Specifies what should be done if already selected elements get selected again.
28        //   invert: Invert selection for elements which were already selected
29        //   keep: Keep selected elements (use clearSelection() to remove those)
30        //   drop: Remove stored elements after they have been touched
31        overlap: 'invert',
32
33        // On which point an element should be selected.
34        // Available modes are cover (cover the entire element), center (touch the center) or
35        // the default mode is touch (just touching it).
36        intersect: 'touch',
37
38        // px, how many pixels the point should move before starting the selection (combined distance).
39        // Or specifiy the threshold for each axis by passing an object like {x: <number>, y: <number>}.
40        startThreshold: 10,
41
42        // Scroll configuration.
43        scrolling: {
44
45            // On scrollable areas the number on px per frame is devided by this amount.
46            // Default is 10 to provide a enjoyable scroll experience.
47            speedDivider: 10,
48
49            // Browsers handle mouse-wheel events differently, this number will be used as 
50            // numerator to calculate the mount of px while scrolling manually: manualScrollSpeed / scrollSpeedDivider.
51            manualSpeed: 750
52        }
53    },
54
55    // Features.
56    features: {
57
58        // Enable / disable touch support.
59        touch: true,
60
61        // Range selection.
62        range: true,
63
64        // Configuration in case a selectable gets just clicked.
65        singleTap: {
66
67            // Enable single-click selection (Also disables range-selection via shift + ctrl).
68            allow: true,
69
70            // 'native' (element was mouse-event target) or 'touch' (element visually touched).
71            intersect: 'native'
72        }
73    }
74});
75

Events

Use the on(event, cb) and off(event, cb) functions to bind / unbind event-listener.

Event	Description
beforestart	The user tapped one of the areas within the specified boundaries. Return false to cancel selection immediatly.
start	Selection started, here you can decide if you want to keep your previously selected elements.
move	Selection is active, user is moving the pointer around.
stop	Selection has stopped.

Example

1selection.on('beforestart', evt => {
2
3    // Use this event to decide whether a selection should take place or not.
4    // For example if the user should be able to normally interact with input-elements you 
5    // may want to prevent a selection if the user clicks such a element:
6    // selection.on('beforestart', ({event}) => {
7    //   return event.target.tagName !== 'INPUT'; // Returning false prevents a selection
8    // });
9
10    console.log('beforestart', evt);
11}).on('start', evt => {
12
13    // A selection got initiated, you could now clear the previous selection or
14    // keep it if in case of multi-selection.
15    console.log('start', evt);
16}).on('move', evt => {
17
18    // Here you can update elements based on their state.
19    console.log('move', evt);
20}).on('stop', evt => {
21
22    // Do something with the selected elements.
23    console.log('stop', evt);
24});

Common recipes can be found under recipes.