Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Mobius1/Selectable
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 0.0.12
Choose a base ref
...
head repository: Mobius1/Selectable
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Loading
Showing with 6,985 additions and 726 deletions.
  1. +0 −17 .gitattributes
  2. +5 −0 .gitignore
  3. +1 −1 LICENSE
  4. +28 −145 README.md
  5. +2 −2 bower.json
  6. +77 −0 karma.conf.js
  7. +4,353 −0 package-lock.json
  8. +17 −5 package.json
  9. +2,023 −545 selectable.js
  10. +54 −11 selectable.min.js
  11. BIN selectable.png
  12. +425 −0 tests/selectableSpec.js
17 changes: 0 additions & 17 deletions .gitattributes

This file was deleted.

5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/node_modules
/test_reports
/.idea
/wiki

2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
173 changes: 28 additions & 145 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,164 +1,47 @@
# Selectable
[![npm version](https://badge.fury.io/js/mobius1-selectable.svg)](https://badge.fury.io/js/mobius1-selectable) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/Mobius1/Selectable/blob/master/LICENSE) [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/Mobius1/Selectable.svg)](http://isitmaintained.com/project/Mobius1/Selectable "Average time to resolve an issue") [![Percentage of issues still open](http://isitmaintained.com/badge/open/Mobius1/Selectable.svg)](http://isitmaintained.com/project/Mobius1/Selectable "Percentage of issues still open") ![](http://img.badgesize.io/Mobius1/Selectable/master/selectable.min.js) ![](http://img.badgesize.io/Mobius1/Selectable/master/selectable.min.js?compression=gzip&label=gzipped)
![Selectable](selectable.png?raw=true "Selectable")

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Mobius1/Selectable/graphs/commit-activity)
[![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/Mobius1/Selectable.svg?style=?style=flat-square&logo=appveyor)](https://codeclimate.com/github/Mobius1/Selectable/maintainability)
![](http://img.badgesize.io/Mobius1/Selectable/master/selectable.min.js?style=?style=flat-square&logo=appveyor)
![](http://img.badgesize.io/Mobius1/Selectable/master/selectable.min.js?compression=gzip&label=gzipped&style=?style=flat-square&logo=appveyor)
[![npm](https://img.shields.io/npm/dt/selectable%2Ejs.svg?style=?style=flat-square&logo=appveyor)](https://www.npmjs.com/package/selectable%2Ejs)
[![](https://data.jsdelivr.com/v1/package/npm/selectable.js/badge)](https://www.jsdelivr.com/package/npm/selectable.js)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/Selectable/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/Mobius1/Selectable.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/Selectable/releases)
[![npm](https://img.shields.io/npm/v/selectable.js.svg?style=?style=flat-square&logo=appveyor)](https://www.npmjs.com/package/selectable%2Ejs)
[![GitHub issues](https://img.shields.io/github/issues-raw/Mobius1/Selectable.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/Selectable)
[![GitHub issues](https://img.shields.io/github/issues-closed-raw/Mobius1/Selectable.svg?style=?style=flat-square&logo=appveyor)](https://github.com/Mobius1/Selectable)

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](http://codepen.io/Mobius1/debug/qRxaqQ/) | [Changelog](https://github.com/Mobius1/Selectable/releases)
* No dependencies
* Lightweight
* IE9+
* Touch enabled

---

## Install
**Selectable is still in active development and therefore the API is in constant flux until `v1.0.0`. Check back regularly for any changes and make sure you have the latest version installed.**

### Bower
```
bower install mobius1-selectable --save
```
**Pull requests are welcome!**

### npm
```
npm install mobius1-selectable --save
```
## [Demo](http://codepen.io/Mobius1/pen/qRxaqQ/) | [Documentation](https://mobius-studios.gitbook.io/selectable/) | [Changelog](https://github.com/Mobius1/Selectable/releases) | [Table Plugin](https://github.com/Mobius1/Selectable-Table-Plugin)

---

### 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.

---
## Other Demos

Initialise the plugin:
* [2d Transformed Elements](https://codepen.io/Mobius1/full/wZxZyR)
* [Checkboxes](https://codepen.io/Mobius1/pen/NWeoxey)
* [Table Plugin](https://codepen.io/Mobius1/pen/jamBzV/) (see [Mobius1/Selectable-Table-Plugin](https://github.com/Mobius1/Selectable-Table-Plugin))
* [Advanced Usage](https://s.codepen.io/Mobius1/pen/OOXPwo)

```javascript
const selectable = new Selectable(options);
```
---

## Options

| Option | Type | Default | Required | Effect |
|---------------|----------------------|-----------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `filter` | `string` or `array` | `"*"` | ✔ | The elements that can be selected. You can pass either a CSS3 selector string or a collection of nodes. |
| `appendTo` | `string` or `object` | `document.body` | ✖ | The container element to append the lasso to. |
| `tolerance` | `string` | `touch` | ✖ | How 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). |
| `autoRefresh` | `boolean` | `true` | ✖ | Recalculate the coords of the items. Set to false if you know the selectable items won't move or change size. |
| `lasso` | `object` | | ✖ | Style the lasso. Must be an object of valid CSS declarations. [Demo](https://codepen.io/Mobius1/pen/yPYzwq) |

---

## 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.
If this project helps you then you can grab me a coffee or beer to say thanks.

### 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.
[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=42AR2ZMBHWVTW&source=url)

---

## Events

```javascript
// 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

```javascript
/**
* @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:

```javascript
{
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
Copyright © 2017 Karl Saunders | BSD & MIT license
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mobius1-selectable",
"version": "0.0.12",
"name": "selectable.js",
"version": "0.22.0",
"ignore": [
".gitattributes",
"README.md"
77 changes: 77 additions & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
// Karma configuration
module.exports = function (config) {
config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',


// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],


// list of files / patterns to load in the browser
files: [
'selectable.js',
'./tests/**/*Spec.js'
],


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'selectable.js': 'coverage'
},


// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'], //, 'junit' is only used for pipelines


// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors: true,


// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,


// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome', 'Firefox'],


// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,

customLaunchers: {
ChromeDocker: {
base: 'ChromeHeadless',
// We must disable the Chrome sandbox when running Chrome inside Docker (Chrome's sandbox needs
// more permissions than Docker allows by default)
flags: ['--no-sandbox']
}
},

junitReporter: {
outputDir: './test-reports/'
}
});
};
Loading