Skip to content

Commit

Permalink
v0.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Mobius1 committed Nov 2, 2017
1 parent e0fde6e commit 76897f5
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 34 deletions.
16 changes: 9 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,15 @@ 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) |
By default the instance will look for any nodes with the `".ui-selectable"` class. You can redefine this with the `filter` option.

| Option | Type | Default | Effect |
|---------------|----------------------|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `filter` | `string` or `array` | `".ui-selectable"` | 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) |

---

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mobius1-selectable",
"version": "0.0.13",
"version": "0.1.0",
"ignore": [
".gitattributes",
"README.md"
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mobius1-selectable",
"version": "0.0.13",
"version": "0.1.0",
"description": "UI Selectable plugin without the bloat of jQuery and jQuery UI.",
"main": "selectable.min.js",
"scripts": {
Expand Down
60 changes: 37 additions & 23 deletions selectable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 0.0.13
* Version: 0.1.0
*
*/
(function(root, factory) {
Expand All @@ -28,12 +28,20 @@
var defaultConfig = {
appendTo: document.body,
autoRefresh: true,
filter: "*",
filter: ".ui-selectable",
tolerance: "touch",

lasso: {
border: '1px solid #3498db',
backgroundColor: 'rgba(52, 152, 219, 0.2)',
},

classes: {
container: "ui-container",
selectable: "ui-selectable",
selecting: "ui-selecting",
unselecting: "ui-unselecting",
selected: "ui-selected",
}
};

Expand Down Expand Up @@ -252,6 +260,8 @@
this.container = this.config.appendTo;
}

this.container.classList.add(this.config.classes.container);

this.update();

this.enable()
Expand All @@ -267,6 +277,7 @@
this.items = this.selectedItems = [];

each(this.nodes, function(elem, i) {
elem.classList.add(that.config.classes.selectable);
that.items[i] = {
index: i,
element: elem,
Expand Down Expand Up @@ -306,7 +317,7 @@
}

if (validEl) {
tgt.classList.add('ui-selecting');
tgt.classList.add(o.classes.selecting);
}

if (o.autoRefresh) {
Expand Down Expand Up @@ -341,10 +352,10 @@
if (item.selected) {
item.startselected = true;
if (!isCmdKey(e) && !isShiftKey(e)) {
el.classList.remove("ui-selected");
el.classList.remove(o.classes.selected);

item.selected = false;
el.classList.add("ui-unselecting");
el.classList.add(o.classes.unselecting);

item.unselecting = true;
}
Expand Down Expand Up @@ -408,42 +419,42 @@
}
if (over) {
if (item.selected) {
el.classList.remove("ui-selected");
el.classList.remove(o.classes.selected);
item.selected = false;
}
if (item.unselecting) {
el.classList.remove("ui-unselecting");
el.classList.remove(o.classes.unselecting);
item.unselecting = false;
}
if (!item.selecting) {
el.classList.add("ui-selecting");
el.classList.add(o.classes.selecting);
item.selecting = true;
}
} else {
if (item.selecting) {
if (isCmdKey(e) && item.startselected) {
el.classList.remove("ui-selecting");
el.classList.remove(o.classes.selecting);
item.selecting = false;

el.classList.add("ui-selected");
el.classList.add(o.classes.selected);
item.selected = true;
} else {
el.classList.remove("ui-selecting");
el.classList.remove(o.classes.selecting);
item.selecting = false;

if (item.startselected) {
el.classList.add("ui-unselecting");
el.classList.add(o.classes.unselecting);
item.unselecting = true;
}
}
}
if (el.selected) {
if (!isCmdKey(e)) {
if (!item.startselected) {
el.classList.remove("ui-selected");
el.classList.remove(o.classes.selected);
item.selected = false;

el.classList.add("ui-unselecting");
el.classList.add(o.classes.unselecting);
item.unselecting = true;
}
}
Expand Down Expand Up @@ -485,7 +496,7 @@
var el = item.element;

if (item.unselecting) {
el.classList.remove("ui-unselecting");
el.classList.remove(that.config.classes.unselecting);
item.unselecting = false;
item.startselected = false;
}
Expand All @@ -507,8 +518,8 @@
*/
Selectable.prototype.selectItem = function(item) {
if (this.items.indexOf(item) >= 0) {
item.element.classList.remove("ui-selecting");
item.element.classList.add("ui-selected")
item.element.classList.remove(this.config.classes.selecting);
item.element.classList.add(this.config.classes.selected);
item.selecting = false;
item.selected = item.startselected = true;

Expand All @@ -529,9 +540,9 @@
if (this.items.indexOf(item) >= 0) {
item.selecting = item.selected = item.unselecting = item.startselected = false;

item.element.classList.remove("ui-unselecting");
item.element.classList.remove("ui-selecting");
item.element.classList.remove("ui-selected");
item.element.classList.remove(this.config.classes.unselecting);
item.element.classList.remove(this.config.classes.selecting);
item.element.classList.remove(this.config.classes.selected);

this.selectedItems.splice(this.selectedItems.indexOf(item), 1);

Expand Down Expand Up @@ -624,14 +635,17 @@
* @return {void}
*/
Selectable.prototype.destroy = function() {
var o = this.config.classes;

each(this.items, function(item) {
var el = item.element;
el.classList.remove("ui-unselecting");
el.classList.remove("ui-selecting");
el.classList.remove("ui-selected");
el.classList.remove(o.unselecting);
el.classList.remove(o.selecting);
el.classList.remove(o.selected);
});

this.container.classList.add(o.container);

this.disable();
};

Expand Down
Loading

0 comments on commit 76897f5

Please sign in to comment.