Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mobius1-selectable

Package Overview
Dependencies
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobius1-selectable

UI Selectable plugin without the bloat of jQuery and jQuery UI.

  • 0.0.11
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-40%
Maintainers
1
Weekly downloads
 
Created
Source

Selectable

npm version license Average time to resolve an issue Percentage of issues still open

Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enhancements.

Selectable mimics the Windows file / directory behaviour, i.e. click and / or drag to select items, hold CTRL to select multiple or hold SHIFT to select consecutive groups of items.

Demo | Changelog


Install

Bower

bower install mobius1-selectable --save

npm

npm install mobius1-selectable --save

Browser

Grab the files from one of the CDNs and include them in your page:

https://unpkg.com/mobius1-selectable@latest/selectable.min.js

//or

https://cdn.jsdelivr.net/npm/mobius1-selectable@latest/selectable.min.js

You can replace latest with the required release number if needed.


Initialise the plugin:

const selectable = new Selectable(options);

Options

OptionTypeDefaultRequiredEffect
filterstring or array"*"The elements that can be selected. You can pass either a CSS3 selector string or a collection of nodes.
appendTostring or objectdocument.bodyThe container element to append the lasso to.
tolerancestringtouchHow far the lasso overlaps an element before it's highlighted. "fit" (lasso overlaps the item entirely) or "touch" (lasso overlaps the item by any amount).
autoRefreshbooleantrueRecalculate the coords of the items. Set to false if you know the selectable items won't move or change size.
lassoobjectStyle the lasso. Must be an object of valid CSS declarations. Demo

Public Methods

destroy()

Destroy the instance. This will return the DOM to it's initial state before initialsing.

init()

Initialise the instance after destroying.

disable()

Disable the instance. Removes all event listeners to prevent further selection / deselection.

enable()

Enable the instance.

update()

Updates the instance.

Can be used if new items are added or old ones removed. All item coords are updated as well.

recalculate()

Recalculates the coords for all valid items.

If the dimensions of the item / items change then call this method otherwise the lasso will not select items correctly.

selectItem(item)

Select an item.

deselectItem(item)

Deselect an item.

selectAll()

Select all valid items.

clear()

Deselects all valid items.


Events

// Intitialise Selectable
const selectable = new Selectable(options);

// Listen for the 'selectable.XXXX' event
selectable.on('selectable.XXXX', function() {
    // Do something when 'selectable.XXXX' fires
});
  • selectable.down fires on mousedown (within container)
  • selectable.drag fires when dragging the lasso
  • selectable.up fires on mouse up (within container)
  • selectable.selected fires on each element selected
/**
 * @param item - the first item selected
 * @return {object}
 */
selectable.on('selectable.down', function(item) {
	// Do something when selectable.down fires
});

/**
 * @param coords - lasso coords (x1, x2, y1, y2)
 * @return {object}
 */
selectable.on('selectable.drag', function(coords) {
	// Do something when selectable.drag fires
});

/**
 * @param selectedItems - returns an array of selected items (objects)
 * @return {array}
 */
selectable.on('selectable.up', function(selectedItems) {
	// Do something when selectable.up fires
});

/**
 * @param item - the selected item (fires for each item that is selected)
 * @return {object}
 */
selectable.on('selectable.selected', function(item) {
	// Do something when selectable.selected fires
});

Note that items returned by these events are objects of the following format:

{
    element: HTMLElement, // the element
    index: Number, // the position of the item in the list
    rect: DOMRect Object, // the element's bounding rects
    startselected: Boolean,
    selected: Boolean, // is the item currently selected
    selecting: Boolean, // is the item currently being selected
    unselecting: Boolean // is the item currently being deselected
}

Copyright © 2017 Karl Saunders | BSD & MIT license

FAQs

Package last updated on 01 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc