diff --git a/README.md b/README.md index 364e2e2..23d27d2 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,46 @@ const selectable = new Selectable(options); | `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. | +--- + +## 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 ```javascript diff --git a/bower.json b/bower.json index 78083ae..3875391 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "mobius1-selectable", - "version": "0.0.8", + "version": "0.0.9", "ignore": [ ".gitattributes", "README.md" diff --git a/package.json b/package.json index e4424a8..6ae31fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mobius1-selectable", - "version": "0.0.8", + "version": "0.0.9", "description": "UI Selectable plugin without the bloat of jQuery and jQuery UI.", "main": "selectable.min.js", "scripts": { diff --git a/selectable.js b/selectable.js index 7907cf7..f861d76 100644 --- a/selectable.js +++ b/selectable.js @@ -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.8 + * Version: 0.0.9 * */ (function(root, factory) { @@ -229,24 +229,14 @@ this.refresh(); - // Bind events - this.events = { - mousedown: this.mousedown.bind(this), - mousemove: this.mousemove.bind(this), - mouseup: this.mouseup.bind(this), - update: debounce(this.update, 50).bind(this) - }; - - // Attach event listeners - on(this.container, 'mousedown', this.events.mousedown); - on(document, 'mousemove', this.events.mousemove); - on(document, 'mouseup', this.events.mouseup); - - on(window, 'resize', this.events.update); - on(window, 'scroll', this.events.update); + this.enable() }; - Selectable.prototype.refresh = function() { + /** + * Update instance + * @return {Void} + */ + Selectable.prototype.update = function() { var that = this; this.nodes = this.container.querySelectorAll(this.config.filter); this.items = []; @@ -268,6 +258,11 @@ }); }; + /** + * mousedown event listener + * @param {Object} e + * @return {Void} + */ Selectable.prototype.mousedown = function(e) { preventDefault(e); var o = this.config, @@ -342,6 +337,11 @@ } }; + /** + * mousemove event listener + * @param {Object} e + * @return {Void} + */ Selectable.prototype.mousemove = function(e) { if (!this.dragging) return; @@ -430,6 +430,11 @@ this.emit('selectable.drag', c); }; + /** + * mouseup event listener + * @param {Object} e + * @return {Void} + */ Selectable.prototype.mouseup = function(e) { if (this.dragging) { this.dragging = false; @@ -462,11 +467,6 @@ if (item.selecting) { that.selectItem(item); } - - if (item.selected) { - that.selectedItems.push(item); - that.emit('selectable.selected', item); - } }); this.container.removeChild(this.lasso); @@ -474,19 +474,119 @@ this.emit('selectable.up', this.selectedItems); }; + /** + * Select an item + * @param {Object} item + * @return {Boolean} + */ Selectable.prototype.selectItem = function(item) { - item.element.classList.remove("ui-selecting"); - item.element.classList.add("ui-selected") - item.selecting = false; - item.selected = item.startselected = true; + if ( this.items.indexOf(item) >= 0 ) { + item.element.classList.remove("ui-selecting"); + item.element.classList.add("ui-selected") + item.selecting = false; + item.selected = item.startselected = true; + + this.selectedItems.push(item); + return this.emit('selectable.selected', item); + } + + return false; }; - Selectable.prototype.update = function() { + /** + * Deselect an item + * @param {Object} item + * @return {Boolean} + */ + Selectable.prototype.deselectItem = function(item) { + 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"); + + this.selectedItems.splice(this.selectedItems.indexOf(item), 1); + + return this.emit('selectable.deselected', item); + } + + return false; + }; + + /** + * Update item coords + * @return {Void} + */ + Selectable.prototype.recalculate = function() { each(this.nodes, function(el, i) { this.items[i].rect = el.getBoundingClientRect(); }, this); }; + /** + * Select all items + * @return {Void} + */ + Selectable.prototype.selectAll = function() { + each(this.items, this.selectItem); + }; + + /** + * Deselect all items + * @return {Void} + */ + Selectable.prototype.clear = function() { + each(this.items, this.deselectItem); + }; + + /** + * Enable instance + * @return {Boolean} + */ + Selectable.prototype.enable = function() { + if (!this.enabled) { + this.enabled = true; + + // Bind events + this.events = { + mousedown: this.mousedown.bind(this), + mousemove: this.mousemove.bind(this), + mouseup: this.mouseup.bind(this), + update: debounce(this.update, 50).bind(this) + }; + + // Attach event listeners + on(this.container, 'mousedown', this.events.mousedown); + on(document, 'mousemove', this.events.mousemove); + on(document, 'mouseup', this.events.mouseup); + + on(window, 'resize', this.events.update); + on(window, 'scroll', this.events.update); + } + + return this.enabled; + }; + + /** + * Disable instance + * @return {Boolean} + */ + Selectable.prototype.disable = function() { + if (this.enabled) { + this.enabled = false; + + off(this.container, 'mousedown', this.events.mousedown); + off(document, 'mousemove', this.events.mousemove); + off(document, 'mouseup', this.events.mouseup); + + off(window, 'resize', this.events.update); + off(window, 'scroll', this.events.update); + } + + return this.enabled; + }; + /** * Destroy instance * @return {void} @@ -495,19 +595,12 @@ each(this.items, function(item) { var el = item.element; - el.classList.remove("ui-unselecting"); el.classList.remove("ui-selecting"); el.classList.remove("ui-selected"); }); - off(this.container, 'mousedown', this.events.mousedown); - off(document, 'mousemove', this.events.mousemove); - off(document, 'mouseup', this.events.mouseup); - - off(window, 'resize', this.events.update); - off(window, 'scroll', this.events.update); - + this.disable(); }; return Selectable; diff --git a/selectable.min.js b/selectable.min.js index 427e50c..3aedbce 100644 --- a/selectable.min.js +++ b/selectable.min.js @@ -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.8 + * Version: 0.0.9 * */ -!function(e,t){"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define([],t):e.Selectable=t()}("undefined"!=typeof global?global:this.window||this.global,function(){"use strict";function e(e,t,s,i){e.addEventListener(t,s,!1)}function t(e,t,s){e.removeEventListener(t,s)}function s(e){this.config=o(i,e),h.mixin(this),this.init()}var i={appendTo:document.body,autoRefresh:!0,filter:"*",tolerance:"touch",lasso:{border:"1px solid #3498db",backgroundColor:"rgba(52, 152, 219, 0.2)"}},n=function(e){return"[object Object]"===Object.prototype.toString.call(e)},o=function(e,t){for(var s in t)if(t.hasOwnProperty(s)){var i=t[s];i&&n(i)?(e[s]=e[s]||{},o(e[s],i)):e[s]=i}return e},c=function(e,t,s){var i;if(n(e))for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.call(s,e[i],i);else for(i=0;i<e.length;i++)t.call(s,e[i],i)},l=function(e,t,s){var i=e&&e.style,o=n(t);if(i){if(void 0===s&&!o)return s=window.getComputedStyle(e,""),void 0===t?s:s[t];o?c(t,function(e,t){t in i||(t="-webkit-"+t),i[t]=e+("string"==typeof e?"":"opacity"===t?"":"px")}):(t in i||(t="-webkit-"+t),i[t]=s+("string"==typeof s?"":"opacity"===t?"":"px"))}},r=function(e,t,s){var i;return function(){var n=this,o=arguments,c=s&&!i;clearTimeout(i),i=setTimeout(function(){i=null,s||e.apply(n,o)},t),c&&e.apply(n,o)}},a=function(e){return e=e||window.event,e.preventDefault?e.preventDefault():e.returnValue=!1},u=function(e){return!!e.ctrlKey||!!e.metaKey},d=function(e){return!!e.shiftKey},h=function(){};return h.prototype={on:function(e,t){this._events=this._events||{},this._events[e]=this._events[e]||[],this._events[e].push(t)},off:function(e,t){this._events=this._events||{},e in this._events!=0&&this._events[e].splice(this._events[e].indexOf(t),1)},emit:function(e){if(this._events=this._events||{},e in this._events!=0)for(var t=0;t<this._events[e].length;t++)this._events[e][t].apply(this,Array.prototype.slice.call(arguments,1))}},h.mixin=function(e){for(var t=["on","off","emit"],s=t.length;s--;)"function"==typeof e?e.prototype[t[s]]=h.prototype[t[s]]:e[t[s]]=h.prototype[t[s]];return e},s.prototype.init=function(){var t=document.createElement("div");t.className="ui-lasso",t.style.position="fixed",c(this.config.lasso,function(e,s){t.style[s]=e}),this.lasso=t,"string"==typeof this.config.appendTo||this.config.appendTo instanceof String?this.container=document.querySelector(this.config.appendTo):this.config.appendTo.nodeName&&(this.container=this.config.appendTo),this.refresh(),this.events={mousedown:this.mousedown.bind(this),mousemove:this.mousemove.bind(this),mouseup:this.mouseup.bind(this),update:r(this.update,50).bind(this)},e(this.container,"mousedown",this.events.mousedown),e(document,"mousemove",this.events.mousemove),e(document,"mouseup",this.events.mouseup),e(window,"resize",this.events.update),e(window,"scroll",this.events.update)},s.prototype.refresh=function(){var e=this;this.nodes=this.container.querySelectorAll(this.config.filter),this.items=[],c(this.nodes,function(t,s){e.items[s]={index:s,element:t,rect:t.getBoundingClientRect(),startselected:!1,selected:t.classList.contains("ui-selected"),selecting:t.classList.contains("ui-selecting"),unselecting:t.classList.contains("ui-unselecting")},t.ondragstart=function(e){a(e)}})},s.prototype.mousedown=function(e){a(e);var t,s=this.config,i=e.target,n=i.classList.contains(s.filter.replace(".",""));if(this.container.appendChild(this.lasso),this.origin={x:e.pageX,y:e.pageY},!s.disabled){if(n&&i.classList.add("ui-selecting"),s.autoRefresh&&this.refresh(),d(e)){for(var o=!1,l=0;l<this.items.length;l++)if(this.items[l].element===e.target){o=this.items[l];break}for(var r=!1,l=o.index;l>=0&&(this.items[l].selected&&(r=!0),!r||this.items[l].selected);l--)this.items[l].selecting=!0}c(this.items,function(s){var n=s.element;s.selected&&(s.startselected=!0,u(e)||d(e)||(n.classList.remove("ui-selected"),s.selected=!1,n.classList.add("ui-unselecting"),s.unselecting=!0)),n===i&&(t=s)}),this.dragging=!0,n&&this.emit("selectable.down",t)}},s.prototype.mousemove=function(e){if(this.dragging){var t=this.config;if(!t.disabled){var s,i={x1:this.origin.x,y1:this.origin.y,x2:e.pageX,y2:e.pageY};i.x1>i.x2&&(s=i.x2,i.x2=i.x1,i.x1=s),i.y1>i.y2&&(s=i.y2,i.y2=i.y1,i.y1=s),l(this.lasso,{left:i.x1,width:i.x2-i.x1,top:i.y1,height:i.y2-i.y1}),c(this.items,function(s){var n=s.element,o=!1;"touch"==t.tolerance?o=!(s.rect.left>i.x2||s.rect.right<i.x1||s.rect.top>i.y2||s.rect.bottom<i.y1):"fit"==t.tolerance&&(o=s.rect.left>i.x1&&s.rect.right<i.x2&&s.rect.top>i.y1&&s.rect.bottom<i.y2),o?(s.selected&&(n.classList.remove("ui-selected"),s.selected=!1),s.unselecting&&(n.classList.remove("ui-unselecting"),s.unselecting=!1),s.selecting||(n.classList.add("ui-selecting"),s.selecting=!0)):(s.selecting&&(u(e)&&s.startselected?(n.classList.remove("ui-selecting"),s.selecting=!1,n.classList.add("ui-selected"),s.selected=!0):(n.classList.remove("ui-selecting"),s.selecting=!1,s.startselected&&(n.classList.add("ui-unselecting"),s.unselecting=!0))),n.selected&&(u(e)||s.startselected||(n.classList.remove("ui-selected"),s.selected=!1,n.classList.add("ui-unselecting"),s.unselecting=!0)))}),this.emit("selectable.drag",i)}}},s.prototype.mouseup=function(e){if(this.dragging&&(this.dragging=!1),this.container.contains(e.target)){var t=this;this.selectedItems=[],l(this.lasso,{left:0,width:0,top:0,height:0}),c(this.items,function(e){var s=e.element;e.unselecting&&(s.classList.remove("ui-unselecting"),e.unselecting=!1,e.startselected=!1),e.selecting&&t.selectItem(e),e.selected&&(t.selectedItems.push(e),t.emit("selectable.selected",e))}),this.container.removeChild(this.lasso),this.emit("selectable.up",this.selectedItems)}},s.prototype.selectItem=function(e){e.element.classList.remove("ui-selecting"),e.element.classList.add("ui-selected"),e.selecting=!1,e.selected=e.startselected=!0},s.prototype.update=function(){c(this.nodes,function(e,t){this.items[t].rect=e.getBoundingClientRect()},this)},s.prototype.destroy=function(){c(this.items,function(e){var t=e.element;t.classList.remove("ui-unselecting"),t.classList.remove("ui-selecting"),t.classList.remove("ui-selected")}),t(this.container,"mousedown",this.events.mousedown),t(document,"mousemove",this.events.mousemove),t(document,"mouseup",this.events.mouseup),t(window,"resize",this.events.update),t(window,"scroll",this.events.update)},s}); \ No newline at end of file +!function(e,t){"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define([],t):e.Selectable=t()}("undefined"!=typeof global?global:this.window||this.global,function(){"use strict";function e(e,t,s,i){e.addEventListener(t,s,!1)}function t(e,t,s){e.removeEventListener(t,s)}function s(e){this.config=o(i,e),h.mixin(this),this.init()}var i={appendTo:document.body,autoRefresh:!0,filter:"*",tolerance:"touch",lasso:{border:"1px solid #3498db",backgroundColor:"rgba(52, 152, 219, 0.2)"}},n=function(e){return"[object Object]"===Object.prototype.toString.call(e)},o=function(e,t){for(var s in t)if(t.hasOwnProperty(s)){var i=t[s];i&&n(i)?(e[s]=e[s]||{},o(e[s],i)):e[s]=i}return e},c=function(e,t,s){var i;if(n(e))for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.call(s,e[i],i);else for(i=0;i<e.length;i++)t.call(s,e[i],i)},l=function(e,t,s){var i=e&&e.style,o=n(t);if(i){if(void 0===s&&!o)return s=window.getComputedStyle(e,""),void 0===t?s:s[t];o?c(t,function(e,t){t in i||(t="-webkit-"+t),i[t]=e+("string"==typeof e?"":"opacity"===t?"":"px")}):(t in i||(t="-webkit-"+t),i[t]=s+("string"==typeof s?"":"opacity"===t?"":"px"))}},r=function(e,t,s){var i;return function(){var n=this,o=arguments,c=s&&!i;clearTimeout(i),i=setTimeout(function(){i=null,s||e.apply(n,o)},t),c&&e.apply(n,o)}},a=function(e){return e=e||window.event,e.preventDefault?e.preventDefault():e.returnValue=!1},u=function(e){return!!e.ctrlKey||!!e.metaKey},d=function(e){return!!e.shiftKey},h=function(){};return h.prototype={on:function(e,t){this._events=this._events||{},this._events[e]=this._events[e]||[],this._events[e].push(t)},off:function(e,t){this._events=this._events||{},e in this._events!=0&&this._events[e].splice(this._events[e].indexOf(t),1)},emit:function(e){if(this._events=this._events||{},e in this._events!=0)for(var t=0;t<this._events[e].length;t++)this._events[e][t].apply(this,Array.prototype.slice.call(arguments,1))}},h.mixin=function(e){for(var t=["on","off","emit"],s=t.length;s--;)"function"==typeof e?e.prototype[t[s]]=h.prototype[t[s]]:e[t[s]]=h.prototype[t[s]];return e},s.prototype.init=function(){var e=document.createElement("div");e.className="ui-lasso",e.style.position="fixed",c(this.config.lasso,function(t,s){e.style[s]=t}),this.lasso=e,"string"==typeof this.config.appendTo||this.config.appendTo instanceof String?this.container=document.querySelector(this.config.appendTo):this.config.appendTo.nodeName&&(this.container=this.config.appendTo),this.refresh(),this.enable()},s.prototype.update=function(){var e=this;this.nodes=this.container.querySelectorAll(this.config.filter),this.items=[],c(this.nodes,function(t,s){e.items[s]={index:s,element:t,rect:t.getBoundingClientRect(),startselected:!1,selected:t.classList.contains("ui-selected"),selecting:t.classList.contains("ui-selecting"),unselecting:t.classList.contains("ui-unselecting")},t.ondragstart=function(e){a(e)}})},s.prototype.mousedown=function(e){a(e);var t,s=this.config,i=e.target,n=i.classList.contains(s.filter.replace(".",""));if(this.container.appendChild(this.lasso),this.origin={x:e.pageX,y:e.pageY},!s.disabled){if(n&&i.classList.add("ui-selecting"),s.autoRefresh&&this.refresh(),d(e)){for(var o=!1,l=0;l<this.items.length;l++)if(this.items[l].element===e.target){o=this.items[l];break}for(var r=!1,l=o.index;l>=0&&(this.items[l].selected&&(r=!0),!r||this.items[l].selected);l--)this.items[l].selecting=!0}c(this.items,function(s){var n=s.element;s.selected&&(s.startselected=!0,u(e)||d(e)||(n.classList.remove("ui-selected"),s.selected=!1,n.classList.add("ui-unselecting"),s.unselecting=!0)),n===i&&(t=s)}),this.dragging=!0,n&&this.emit("selectable.down",t)}},s.prototype.mousemove=function(e){if(this.dragging){var t=this.config;if(!t.disabled){var s,i={x1:this.origin.x,y1:this.origin.y,x2:e.pageX,y2:e.pageY};i.x1>i.x2&&(s=i.x2,i.x2=i.x1,i.x1=s),i.y1>i.y2&&(s=i.y2,i.y2=i.y1,i.y1=s),l(this.lasso,{left:i.x1,width:i.x2-i.x1,top:i.y1,height:i.y2-i.y1}),c(this.items,function(s){var n=s.element,o=!1;"touch"==t.tolerance?o=!(s.rect.left>i.x2||s.rect.right<i.x1||s.rect.top>i.y2||s.rect.bottom<i.y1):"fit"==t.tolerance&&(o=s.rect.left>i.x1&&s.rect.right<i.x2&&s.rect.top>i.y1&&s.rect.bottom<i.y2),o?(s.selected&&(n.classList.remove("ui-selected"),s.selected=!1),s.unselecting&&(n.classList.remove("ui-unselecting"),s.unselecting=!1),s.selecting||(n.classList.add("ui-selecting"),s.selecting=!0)):(s.selecting&&(u(e)&&s.startselected?(n.classList.remove("ui-selecting"),s.selecting=!1,n.classList.add("ui-selected"),s.selected=!0):(n.classList.remove("ui-selecting"),s.selecting=!1,s.startselected&&(n.classList.add("ui-unselecting"),s.unselecting=!0))),n.selected&&(u(e)||s.startselected||(n.classList.remove("ui-selected"),s.selected=!1,n.classList.add("ui-unselecting"),s.unselecting=!0)))}),this.emit("selectable.drag",i)}}},s.prototype.mouseup=function(e){if(this.dragging&&(this.dragging=!1),this.container.contains(e.target)){var t=this;this.selectedItems=[],l(this.lasso,{left:0,width:0,top:0,height:0}),c(this.items,function(e){var s=e.element;e.unselecting&&(s.classList.remove("ui-unselecting"),e.unselecting=!1,e.startselected=!1),e.selecting&&t.selectItem(e)}),this.container.removeChild(this.lasso),this.emit("selectable.up",this.selectedItems)}},s.prototype.selectItem=function(e){return this.items.indexOf(e)>=0&&(e.element.classList.remove("ui-selecting"),e.element.classList.add("ui-selected"),e.selecting=!1,e.selected=e.startselected=!0,this.selectedItems.push(e),this.emit("selectable.selected",e))},s.prototype.deselectItem=function(e){return this.items.indexOf(e)>=0&&(e.selecting=e.selected=e.unselecting=e.startselected=!1,e.element.classList.remove("ui-unselecting"),e.element.classList.remove("ui-selecting"),e.element.classList.remove("ui-selected"),this.selectedItems.splice(this.selectedItems.indexOf(e),1),this.emit("selectable.deselected",e))},s.prototype.recalculate=function(){c(this.nodes,function(e,t){this.items[t].rect=e.getBoundingClientRect()},this)},s.prototype.selectAll=function(){c(this.items,this.selectItem)},s.prototype.clear=function(){c(this.items,this.deselectItem)},s.prototype.enable=function(){return this.enabled||(this.enabled=!0,this.events={mousedown:this.mousedown.bind(this),mousemove:this.mousemove.bind(this),mouseup:this.mouseup.bind(this),update:r(this.update,50).bind(this)},e(this.container,"mousedown",this.events.mousedown),e(document,"mousemove",this.events.mousemove),e(document,"mouseup",this.events.mouseup),e(window,"resize",this.events.update),e(window,"scroll",this.events.update)),this.enabled},s.prototype.disable=function(){return this.enabled&&(this.enabled=!1,t(this.container,"mousedown",this.events.mousedown),t(document,"mousemove",this.events.mousemove),t(document,"mouseup",this.events.mouseup),t(window,"resize",this.events.update),t(window,"scroll",this.events.update)),this.enabled},s.prototype.destroy=function(){c(this.items,function(e){var t=e.element;t.classList.remove("ui-unselecting"),t.classList.remove("ui-selecting"),t.classList.remove("ui-selected")}),this.disable()},s}); \ No newline at end of file