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

Commits on Nov 2, 2017

  1. v0.0.13

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    e0fde6e View commit details
  2. v0.1.0

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    76897f5 View commit details
  3. v0.1.1, add IE9 support

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    4b0769d View commit details
  4. Update README

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    f906c3b View commit details
  5. v0.1.2

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    ae0166f View commit details
  6. Update README

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    2b64a0f View commit details
  7. v0.2.0

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    d83be54 View commit details
  8. v0.2.1

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    ba956fa View commit details
  9. v0.2.2

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    d294c66 View commit details
  10. v0.2.3

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    0850c3b View commit details
  11. v0.2.4

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    3c1434a View commit details
  12. v0.2.5

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    893df13 View commit details
  13. v0.3.0

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    db13694 View commit details
  14. Update README

    Mobius1 committed Nov 2, 2017
    Copy the full SHA
    9093c42 View commit details

Commits on Nov 3, 2017

  1. v0.3.1

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    ca85f74 View commit details
  2. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    1d90ed4 View commit details
  3. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    d8b0aff View commit details
  4. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    2a006de View commit details
  5. v0.4.0

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    cbfc28a View commit details
  6. v0.4.1

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    8bce9f6 View commit details
  7. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    484911a View commit details
  8. Remove file

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    5b33658 View commit details
  9. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    e7084fd View commit details
  10. v0.5.0

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    df3d47f View commit details
  11. Update README

    Mobius1 committed Nov 3, 2017
    Copy the full SHA
    72f25ed View commit details

Commits on Nov 4, 2017

  1. v0.5.1

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    1767f71 View commit details
  2. v0.5.2

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    41f5ac0 View commit details
  3. Update README

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    d0606fd View commit details
  4. v0.5.3

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    d943cf1 View commit details
  5. v0.5.4

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    e55d54d View commit details
  6. v0.5.5

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    f335e1b View commit details
  7. v0.6.0, add touch events support

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    edb0b4d View commit details
  8. v0.6.1

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    b0d7ab9 View commit details
  9. v0.6.2

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    c8e613e View commit details
  10. v0.6.3

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    80cfc53 View commit details
  11. Update README

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    95122c6 View commit details
  12. Update README

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    eb2b930 View commit details
  13. Update README

    Mobius1 committed Nov 4, 2017
    Copy the full SHA
    fb9f27f View commit details

Commits on Nov 5, 2017

  1. v0.6.4

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    4361a01 View commit details
  2. v0.7.0

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    95fac2f View commit details
  3. v0.7.1

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    6edd39b View commit details
  4. v0.7.2

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    be68660 View commit details
  5. Update README

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    e20da52 View commit details
  6. Update README

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    66b1976 View commit details
  7. Update README

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    02f159d View commit details
  8. v0.7.3

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    df03c0d View commit details
  9. v0.7.4

    Mobius1 committed Nov 5, 2017
    Copy the full SHA
    16b604c View commit details

Commits on Nov 7, 2017

  1. v0.7.5

    Mobius1 committed Nov 7, 2017
    Copy the full SHA
    e6765d9 View commit details
  2. v0.8.0

    Mobius1 committed Nov 7, 2017
    Copy the full SHA
    2b5cb1c View commit details
  3. v0.8.1

    Mobius1 committed Nov 7, 2017
    Copy the full SHA
    76dc389 View commit details
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