Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
angular-multiple-selection
Advanced tools
angular-multiple-selection - npm Package Compare versions
+1
-1
| { | ||
| "name": "angular-multiple-selection", | ||
| "version": "0.0.1", | ||
| "version": "0.0.3", | ||
| "authors": [ | ||
@@ -5,0 +5,0 @@ "Maksym Pomazan" |
+20
-19
@@ -18,6 +18,4 @@ <!DOCTYPE html> | ||
| .row { | ||
| height: 3000px; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| /* disable selection */ | ||
@@ -32,9 +30,9 @@ | ||
| } | ||
| .well{ | ||
| .item_container { | ||
| border: 1px solid #ccc; | ||
| padding: 10px; | ||
| } | ||
| .example { | ||
| width: 300px; | ||
| height: 50px; | ||
| background-color: grey; | ||
| .item_container div { | ||
| width: 33% | ||
| } | ||
@@ -48,10 +46,7 @@ .select-helper { | ||
| .selected { | ||
| background-color: green; | ||
| background-color: green !important; | ||
| } | ||
| .selecting { | ||
| background-color: yellow; | ||
| background-color: yellow !important; | ||
| } | ||
| .dragging { | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
@@ -61,9 +56,14 @@ </head> | ||
| <body> | ||
| <div class="container-fluid" multiple-selection-zone> | ||
| <h1>Directives test</h1> | ||
| <div class="row"> | ||
| <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Just a div</div> | ||
| <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Just a second div</div> | ||
| <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Another one</div> | ||
| <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected}" class="example">Just a last div</div> | ||
| <div class="container-fluid"> | ||
| <h1>Angular Multiple Selection Module</h1> | ||
| <i>Simple way to make your element selectable</i> | ||
| For single selection you can use mouse click. For multiple selection you can use Ctrl + Mouse click or Mouse dragging. Try it`s easy. | ||
| <h2>Simple demo</h2> | ||
| <div class="row item_container" multiple-selection-zone> | ||
| <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet alias, sint magni?</div> | ||
| <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet ad mollitia fugiat minima.</div> | ||
| <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet autem!</div> | ||
| <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet beatae.</div> | ||
| <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet. Iure vitae temporibus maiores perspiciatis!</div> | ||
| </div> | ||
@@ -73,4 +73,5 @@ | ||
| </body> | ||
| </html> |
| /** | ||
| * Angular JS multiple-selection module | ||
| * @author Maksym Pomazan | ||
| * @version 0.0.1 | ||
| * @version 0.0.3 | ||
| */ | ||
@@ -14,3 +14,3 @@ function getSelectableElements(element) { | ||
| } else { | ||
| if (child.scope().isSelectableZone === true) { | ||
| if (child.scope().$id!=element.scope().$id && child.scope().isSelectableZone === true) { | ||
@@ -84,3 +84,3 @@ } else { | ||
| return { | ||
| scope: {}, | ||
| scope: true, | ||
| restrict: 'A', | ||
@@ -170,3 +170,3 @@ link: function(scope, element, iAttrs, controller) { | ||
| for (var i = 0; i < childs.length; i++) { | ||
| if (checkElementHitting(transformBox(offset(childs[i][0]).left, offset(childs[i][0]).top, offset(childs[i][0]).left + childs[i].prop('offsetWidth'), offset(childs[i][0]).top + childs[i].prop('offsetHeight')), transformBox(startX, startY, event.clientX, event.clientY))) { | ||
| if (checkElementHitting(transformBox(offset(childs[i][0]).left, offset(childs[i][0]).top, offset(childs[i][0]).left + childs[i].prop('offsetWidth'), offset(childs[i][0]).top + childs[i].prop('offsetHeight')), transformBox(startX, startY, event.pageX, event.pageY))) { | ||
| if (childs[i].scope().isSelecting === false) { | ||
@@ -173,0 +173,0 @@ childs[i].scope().isSelecting = true; |
@@ -1,2 +0,2 @@ | ||
| /*! angular-multiple-selection 0.0.1 */ | ||
| function getSelectableElements(a){for(var b=[],c=a.children(),d=0;d<c.length;d++){var e=angular.element(c[d]);e.scope().isSelectable?b.push(e):e.scope().isSelectableZone===!0||(b=b.concat(getSelectableElements(e)))}return b}function offset(a){var b,c={top:0,left:0},d=a&&a.ownerDocument;return b=d.documentElement,void 0!==typeof a.getBoundingClientRect&&(c=a.getBoundingClientRect()),{top:c.top+(window.pageYOffset||b.scrollTop)-(b.clientTop||0),left:c.left+(window.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}}angular.module("multipleSelection",[]).directive("multipleSelectionItem",[function(){return{scope:!0,restrict:"A",link:function(a,b){a.isSelectable=!0,a.isSelecting=!1,a.isSelected=!1,b.on("mousedown",function(a){if(b.scope().isSelected)a.ctrlKey&&(b.scope().isSelected=!1,b.scope().$apply());else{if(!a.ctrlKey)for(var c=getSelectableElements(b.parent()),d=0;d<c.length;d++)c[d].scope().isSelectable&&(c[d].scope().isSelecting===!0||c[d].scope().isSelected===!0)&&(c[d].scope().isSelecting=!1,c[d].scope().isSelected=!1,c[d].scope().$apply());b.scope().isSelected=!0,b.scope().$apply()}a.stopPropagation()})}}}]).directive("multipleSelectionZone",["$document",function(a){return{scope:{},restrict:"A",link:function(b,c){function d(a,b){return(b.beginX<=a.beginX&&a.beginX<=b.endX||a.beginX<=b.beginX&&b.beginX<=a.endX)&&(b.beginY<=a.beginY&&a.beginY<=b.endY||a.beginY<=b.beginY&&b.beginY<=a.endY)}function e(a,b,c,d){var e={};return a>c?(e.beginX=c,e.endX=a):(e.beginX=a,e.endX=c),b>d?(e.beginY=d,e.endY=b):(e.beginY=b,e.endY=d),e}function f(a,b,c,d,f){var g=e(b,c,d,f);i.css({top:g.beginY+"px",left:g.beginX+"px",width:g.endX-g.beginX+"px",height:g.endY-g.beginY+"px"})}function g(a){a.preventDefault(),f(i,j,k,a.pageX,a.pageY);for(var b=getSelectableElements(c),g=0;g<b.length;g++)d(e(offset(b[g][0]).left,offset(b[g][0]).top,offset(b[g][0]).left+b[g].prop("offsetWidth"),offset(b[g][0]).top+b[g].prop("offsetHeight")),e(j,k,a.clientX,a.clientY))?b[g].scope().isSelecting===!1&&(b[g].scope().isSelecting=!0,b[g].scope().$apply()):b[g].scope().isSelecting===!0&&(b[g].scope().isSelecting=!1,b[g].scope().$apply())}function h(b){b.preventDefault(),i.remove();for(var f=getSelectableElements(c),j=0;j<f.length;j++)f[j].scope().isSelecting===!0?(f[j].scope().isSelecting=!1,f[j].scope().isSelected=b.ctrlKey?!f[j].scope().isSelected:!0,f[j].scope().$apply()):d(e(f[j].prop("offsetLeft"),f[j].prop("offsetTop"),f[j].prop("offsetLeft")+f[j].prop("offsetWidth"),f[j].prop("offsetTop")+f[j].prop("offsetHeight")),e(b.pageX,b.pageY,b.pageX,b.pageY))&&f[j].scope().isSelected===!1&&(f[j].scope().isSelected=!0,f[j].scope().$apply());a.off("mousemove",g),a.off("mouseup",h)}b.isSelectableZone=!0;var i,j=0,k=0;c.on("mousedown",function(b){if(b.preventDefault(),!b.ctrlKey)for(var d=getSelectableElements(c),e=0;e<d.length;e++)(d[e].scope().isSelecting===!0||d[e].scope().isSelected===!0)&&(d[e].scope().isSelecting=!1,d[e].scope().isSelected=!1,d[e].scope().$apply());j=b.pageX,k=b.pageY,i=angular.element("<div></div>").addClass("select-helper"),a.find("body").eq(0).append(i),a.on("mousemove",g),a.on("mouseup",h)})}}}]); | ||
| /*! angular-multiple-selection 0.0.3 */ | ||
| function getSelectableElements(a){for(var b=[],c=a.children(),d=0;d<c.length;d++){var e=angular.element(c[d]);e.scope().isSelectable?b.push(e):e.scope().$id!=a.scope().$id&&e.scope().isSelectableZone===!0||(b=b.concat(getSelectableElements(e)))}return b}function offset(a){var b,c={top:0,left:0},d=a&&a.ownerDocument;return b=d.documentElement,void 0!==typeof a.getBoundingClientRect&&(c=a.getBoundingClientRect()),{top:c.top+(window.pageYOffset||b.scrollTop)-(b.clientTop||0),left:c.left+(window.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}}angular.module("multipleSelection",[]).directive("multipleSelectionItem",[function(){return{scope:!0,restrict:"A",link:function(a,b){a.isSelectable=!0,a.isSelecting=!1,a.isSelected=!1,b.on("mousedown",function(a){if(b.scope().isSelected)a.ctrlKey&&(b.scope().isSelected=!1,b.scope().$apply());else{if(!a.ctrlKey)for(var c=getSelectableElements(b.parent()),d=0;d<c.length;d++)c[d].scope().isSelectable&&(c[d].scope().isSelecting===!0||c[d].scope().isSelected===!0)&&(c[d].scope().isSelecting=!1,c[d].scope().isSelected=!1,c[d].scope().$apply());b.scope().isSelected=!0,b.scope().$apply()}a.stopPropagation()})}}}]).directive("multipleSelectionZone",["$document",function(a){return{scope:!0,restrict:"A",link:function(b,c){function d(a,b){return(b.beginX<=a.beginX&&a.beginX<=b.endX||a.beginX<=b.beginX&&b.beginX<=a.endX)&&(b.beginY<=a.beginY&&a.beginY<=b.endY||a.beginY<=b.beginY&&b.beginY<=a.endY)}function e(a,b,c,d){var e={};return a>c?(e.beginX=c,e.endX=a):(e.beginX=a,e.endX=c),b>d?(e.beginY=d,e.endY=b):(e.beginY=b,e.endY=d),e}function f(a,b,c,d,f){var g=e(b,c,d,f);i.css({top:g.beginY+"px",left:g.beginX+"px",width:g.endX-g.beginX+"px",height:g.endY-g.beginY+"px"})}function g(a){a.preventDefault(),f(i,j,k,a.pageX,a.pageY);for(var b=getSelectableElements(c),g=0;g<b.length;g++)d(e(offset(b[g][0]).left,offset(b[g][0]).top,offset(b[g][0]).left+b[g].prop("offsetWidth"),offset(b[g][0]).top+b[g].prop("offsetHeight")),e(j,k,a.pageX,a.pageY))?b[g].scope().isSelecting===!1&&(b[g].scope().isSelecting=!0,b[g].scope().$apply()):b[g].scope().isSelecting===!0&&(b[g].scope().isSelecting=!1,b[g].scope().$apply())}function h(b){b.preventDefault(),i.remove();for(var f=getSelectableElements(c),j=0;j<f.length;j++)f[j].scope().isSelecting===!0?(f[j].scope().isSelecting=!1,f[j].scope().isSelected=b.ctrlKey?!f[j].scope().isSelected:!0,f[j].scope().$apply()):d(e(f[j].prop("offsetLeft"),f[j].prop("offsetTop"),f[j].prop("offsetLeft")+f[j].prop("offsetWidth"),f[j].prop("offsetTop")+f[j].prop("offsetHeight")),e(b.pageX,b.pageY,b.pageX,b.pageY))&&f[j].scope().isSelected===!1&&(f[j].scope().isSelected=!0,f[j].scope().$apply());a.off("mousemove",g),a.off("mouseup",h)}b.isSelectableZone=!0;var i,j=0,k=0;c.on("mousedown",function(b){if(b.preventDefault(),!b.ctrlKey)for(var d=getSelectableElements(c),e=0;e<d.length;e++)(d[e].scope().isSelecting===!0||d[e].scope().isSelected===!0)&&(d[e].scope().isSelecting=!1,d[e].scope().isSelected=!1,d[e].scope().$apply());j=b.pageX,k=b.pageY,i=angular.element("<div></div>").addClass("select-helper"),a.find("body").eq(0).append(i),a.on("mousemove",g),a.on("mouseup",h)})}}}]); |
+1
-1
| { | ||
| "name": "angular-multiple-selection", | ||
| "version": "0.0.1", | ||
| "version": "0.0.3", | ||
| "description": "Multiple Selection module for AngularJS", | ||
@@ -5,0 +5,0 @@ "main": "multiple-selection.js", |
+73
-1
@@ -1,1 +0,73 @@ | ||
| # angular-multiple-selection | ||
| # Angular Multiple Selection Module | ||
| Simplest way to make your angular items selectable | ||
| [Demo Page](http://maxazan.github.io/angular-multiple-selection/) | ||
| ##Installation | ||
| ###Using npm | ||
| ``` | ||
| npm install angular-multiple-selection | ||
| ``` | ||
| ###Using bower | ||
| ``` | ||
| bower install angular-multiple-selection | ||
| ``` | ||
| ###From source | ||
| Download [source](https://github.com/maxazan/angular-multiple-selection/archive/master.zip) from github.com | ||
| ##Usage | ||
| * Add `multiple-selection.min.js` file to your application | ||
| ```html | ||
| <script type="text/javascript" src="multiple-selection.min.js"></script> | ||
| ``` | ||
| * Add module to your app `angular.module('app', ['multipleSelection'])` | ||
| * Add `multiple-selection-zone` attribute to element where selectable items will be located | ||
| ```html | ||
| <div class="row" multiple-selection-zone> | ||
| //Add selectable items here | ||
| </div> | ||
| ``` | ||
| * Add `multiple-selection-item` attribute to each selectable item | ||
| ```html | ||
| <div multiple-selection-item>Item can be selected</div> | ||
| ``` | ||
| * Customize css | ||
| ##How it works | ||
| Each selectable item has it`s own angular scope with variables | ||
| | Name | Description | | ||
| | ------------- | ------------- | | ||
| | isSelectable | `true` if element can be selected | | ||
| | isSelecting | `true` if element now selecting. It means it enters in selection rectangle when you dragging | | ||
| | isSelected | `true` if element selected | | ||
| ###How to customize | ||
| * Add `ng-class` to your item | ||
| ```html | ||
| <div multiple-selection-item ng-class="{'selecting': isSelecting ,'selected': isSelected}"></div> | ||
| ``` | ||
| * Customizing `.selecting` and `.selected` in your css | ||
| ```css | ||
| .selected { | ||
| background-color: green !important; | ||
| } | ||
| .selecting { | ||
| background-color: yellow !important; | ||
| } | ||
| ``` | ||
| * You can also customize your rectangle for selecting | ||
| ```css | ||
| .select-helper { | ||
| position: absolute; | ||
| border: 1px dashed red; | ||
| background: red; | ||
| opacity: 0.2; | ||
| } | ||
| ``` |
No alert changes
Improved metrics
- Total package byte prevSize
21161
12.1%- Number of lines in readme file
74
3600%Worsened metrics
- Lines of code
257
-0.39%No dependency changes