From fe88f8d021e3af25a15794f5010b4df74bca136c Mon Sep 17 00:00:00 2001 From: harshalitalele Date: Wed, 6 Jun 2018 15:07:37 +0530 Subject: [PATCH 1/4] added a specific selector for multiselect dropdown --- src/assets/angular-dropdownMultiselect.js | 52 +++++++++++------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/assets/angular-dropdownMultiselect.js b/src/assets/angular-dropdownMultiselect.js index 4f2a048..36db8d8 100644 --- a/src/assets/angular-dropdownMultiselect.js +++ b/src/assets/angular-dropdownMultiselect.js @@ -369,7 +369,7 @@ inside; while ( eventSrc !== dropdownMultiselect ) { - var dropdownMenuList = angular.element( document.querySelector( '.dropdown-menu' ) ); + var dropdownMenuList = angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ); eventSrc = eventSrc[ 'offsetParent' ]; inside = true; @@ -382,27 +382,27 @@ } if ( eventSrc === null ) { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); return false; } if ( eventSrc === null || ( eventSrc === dropdownMultiselect && !inside ) ) { - var dropdownMenuBtn = angular.element( document.querySelector( '.dropdown-menu' ) ); + var dropdownMenuBtn = angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ); if ( openDropdown === true ) { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); } else { - angular.element( document.querySelector( '.dropdown-menu' ) ).addClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'block' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).addClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'block' ); } openDropdown = !openDropdown; //console.log( "after", openDropdown ); } } else { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); } } ); @@ -417,7 +417,7 @@ inside; while ( eventSrc !== dropdownMultiselect ) { - var dropdownMenuList = angular.element( document.querySelector( '.dropdown-menu' ) ); + var dropdownMenuList = angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ); eventSrc = eventSrc[ 'offsetParent' ]; inside = true; @@ -431,27 +431,27 @@ if ( eventSrc === null ) { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); return false; } if ( eventSrc === null || ( eventSrc === dropdownMultiselect && !inside ) ) { - var dropdownMenuBtn = angular.element( document.querySelector( '.dropdown-menu' ) ); + var dropdownMenuBtn = angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ); console.log( dropdownMenuBtn ); - if ( angular.element( document.querySelector( '.dropdown-menu' ) )[ 0 ].classList[ 1 ] === 'dropdown-show' ) { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + if ( angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) )[ 0 ].classList[ 1 ] === 'dropdown-show' ) { + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); } else { - angular.element( document.querySelector( '.dropdown-menu' ) ).addClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'block' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).addClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'block' ); } } } else { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); } } @@ -466,7 +466,7 @@ inside; while ( eventSrc !== dropdownMultiselect ) { - var dropdownMenuList = angular.element( document.querySelector( '.dropdown-menu' ) ); + var dropdownMenuList = angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ); eventSrc = eventSrc[ 'offsetParent' ]; inside = true; @@ -479,15 +479,15 @@ } if ( angular.isDefined( inside ) && !inside ) { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); openDropdown = false; //closing the state of dropdown return openDropdown; } } else { - angular.element( document.querySelector( '.dropdown-menu' ) ).removeClass( 'dropdown-show' ); - angular.element( document.querySelector( '.dropdown-menu' ) ).css( 'display', 'none' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).removeClass( 'dropdown-show' ); + angular.element( document.querySelector( '#dropdownMultiselect .dropdown-menu' ) ).css( 'display', 'none' ); } } From 01ca5cab389cff76b7a4be4472d633e66b42054b Mon Sep 17 00:00:00 2001 From: harshalitalele Date: Wed, 6 Jun 2018 15:13:23 +0530 Subject: [PATCH 2/4] minified javascript changes for specific menu selector --- dist/angular-dropdownMultiselect.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/angular-dropdownMultiselect.min.js b/dist/angular-dropdownMultiselect.min.js index 2666da6..12727c8 100644 --- a/dist/angular-dropdownMultiselect.min.js +++ b/dist/angular-dropdownMultiselect.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("dropdown-multiselect",[]).directive("dropdownMultiselect",["$timeout",function(e){return{restrict:"AE",replace:!0,transclude:!0,template:'',scope:{config:"=dropdownConfig",primaryKey:"@dropdownTrackby",disableDropdown:"=dropdownDisable",dropdownType:"=",model:"=?",dropdownOptions:"=dropdownOptions",notifyParent:"&dropdownSelected"},controller:["$scope",function(n){function o(){n.preSelectAll&&n.multiSelect&&e(n.selectAll)}function r(){var e=[];for(var o in n.options[0])e.push(o);n.leftKey=e[0],n.rightKey=e[1]}function t(e){if(angular.isUndefined(e)&&(e=n.options[0].hasOwnProperty("Id")?"Id":!!n.options[0].hasOwnProperty("id")&&"id",n.trackByKey=e,e===!1))throw'ReferenceError: Expecting property "Id" in an object from an array binded to "dropdown-options" attribute. Consider providing "dropdown-trackby" attribute or make sure property "Id" exists in binded array\'s object.'}function l(e,o){for(var r=0;r1}}}])}(); \ No newline at end of file +!function(){"use strict";angular.module("dropdown-multiselect",[]).directive("dropdownMultiselect",["$timeout",function(e){return{restrict:"AE",replace:!0,transclude:!0,template:'',scope:{config:"=dropdownConfig",primaryKey:"@dropdownTrackby",disableDropdown:"=dropdownDisable",dropdownType:"=",model:"=?",dropdownOptions:"=dropdownOptions",notifyParent:"&dropdownSelected"},controller:["$scope",function(n){function o(){n.preSelectAll&&n.multiSelect&&e(n.selectAll)}function t(){var e=[];for(var o in n.options[0])e.push(o);n.leftKey=e[0],n.rightKey=e[1]}function r(e){if(angular.isUndefined(e)&&(e=n.options[0].hasOwnProperty("Id")?"Id":!!n.options[0].hasOwnProperty("id")&&"id",n.trackByKey=e,e===!1))throw'ReferenceError: Expecting property "Id" in an object from an array binded to "dropdown-options" attribute. Consider providing "dropdown-trackby" attribute or make sure property "Id" exists in binded array\'s object.'}function l(e,o){for(var t=0;t1}}}])}(); \ No newline at end of file From 6c8a203bff84115cae5d0d3a82b5eecbdb10b14d Mon Sep 17 00:00:00 2001 From: harshalitalele Date: Wed, 6 Jun 2018 15:23:35 +0530 Subject: [PATCH 3/4] selection icon moved on left side --- dist/angular-dropdownMultiselect.min.css | 2 +- dist/angular-dropdownMultiselect.min.js | 2 +- src/assets/angular-dropdownMultiselect.css | 9 +++++++++ src/assets/angular-dropdownMultiselect.js | 3 ++- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/dist/angular-dropdownMultiselect.min.css b/dist/angular-dropdownMultiselect.min.css index 86cfbb7..ed70066 100644 --- a/dist/angular-dropdownMultiselect.min.css +++ b/dist/angular-dropdownMultiselect.min.css @@ -1 +1 @@ -.dropdown{cursor:pointer}.not-allowed{cursor:not-allowed}.dropdown .badge{background-color:#777;margin-right:2px}.dropdown .dropdown-menu,.dropdown button{width:100%}#dropdownMenu>.caret{margin-top:8px;margin-right:-6px}.dropdown-menu div{width:100%;z-index:1}.dropdown-static{position:absolute;list-style-type:none;background-color:#fff;width:100%;padding-left:0;padding-bottom:10px;border-style:solid;border-width:0 0 1px 0;border-color:#e5e5e5}.dropdown-scrollable{list-style-type:none;padding:0 0 0;margin-top:65px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.hasfilter{margin-top:100px}.dropdown-height{max-height:300px}.dropdown-menu .dropdown-scrollable>li>a,.dropdown-menu .dropdown-static>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap;text-decoration:none}.dropdown-menu li a:hover{color:#333;background-color:#f9f2f4}.dropdown-show{display:block!important}.dropdown-hide{display:none!important}.glyphicon{position:static}.pad-icon{padding-top:4px}.filter-parent{position:relative;font-size:18px;padding-top:0;padding-left:20px;padding-right:20px;margin:3px auto 0}.filter-parent label{position:absolute;left:27px;top:5px;color:#c3bfbf}.filter-parent>div{width:100%}.filter-parent #filter-by{padding:6px 26px;border-radius:23px;height:30px}@media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait){.hasfilter{margin-top:112px!important}.dropdown-menu .dropdown-scrollable>li>a,.dropdown-menu .dropdown-static>li>a{line-height:2}} \ No newline at end of file +.dropdown{cursor:pointer}.not-allowed{cursor:not-allowed}.dropdown .badge{background-color:#777;margin-right:2px}.dropdown .dropdown-menu,.dropdown button{width:100%}#dropdownMenu>.caret{margin-top:8px;margin-right:-6px}.dropdown-menu div{width:100%;z-index:1}.dropdown-static{position:absolute;list-style-type:none;background-color:#fff;width:100%;padding-left:0;padding-bottom:10px;border-style:solid;border-width:0 0 1px 0;border-color:#e5e5e5}.dropdown-scrollable{list-style-type:none;padding:0 0 0;margin-top:65px;overflow-y:scroll;-webkit-overflow-scrolling:touch;position:relative}.hasfilter{margin-top:100px}.dropdown-height{max-height:300px}.dropdown-menu .dropdown-scrollable>li>a,.dropdown-menu .dropdown-static>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap;text-decoration:none;height:25px}.dropdown-menu .dropdown-scrollable>li>a>.option-content{position:absolute;left:40px}.dropdown-menu .dropdown-scrollable>li>a>.option-selected-icon{margin-left:3px}.dropdown-menu li a:hover{color:#333;background-color:#f9f2f4}.dropdown-show{display:block!important}.dropdown-hide{display:none!important}.glyphicon{position:static}.pad-icon{padding-top:4px}.filter-parent{position:relative;font-size:18px;padding-top:0;padding-left:20px;padding-right:20px;margin:3px auto 0}.filter-parent label{position:absolute;left:27px;top:5px;color:#c3bfbf}.filter-parent>div{width:100%}.filter-parent #filter-by{padding:6px 26px;border-radius:23px;height:30px}@media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait){.hasfilter{margin-top:112px!important}.dropdown-menu .dropdown-scrollable>li>a,.dropdown-menu .dropdown-static>li>a{line-height:2}} \ No newline at end of file diff --git a/dist/angular-dropdownMultiselect.min.js b/dist/angular-dropdownMultiselect.min.js index 12727c8..d081d08 100644 --- a/dist/angular-dropdownMultiselect.min.js +++ b/dist/angular-dropdownMultiselect.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("dropdown-multiselect",[]).directive("dropdownMultiselect",["$timeout",function(e){return{restrict:"AE",replace:!0,transclude:!0,template:'',scope:{config:"=dropdownConfig",primaryKey:"@dropdownTrackby",disableDropdown:"=dropdownDisable",dropdownType:"=",model:"=?",dropdownOptions:"=dropdownOptions",notifyParent:"&dropdownSelected"},controller:["$scope",function(n){function o(){n.preSelectAll&&n.multiSelect&&e(n.selectAll)}function t(){var e=[];for(var o in n.options[0])e.push(o);n.leftKey=e[0],n.rightKey=e[1]}function r(e){if(angular.isUndefined(e)&&(e=n.options[0].hasOwnProperty("Id")?"Id":!!n.options[0].hasOwnProperty("id")&&"id",n.trackByKey=e,e===!1))throw'ReferenceError: Expecting property "Id" in an object from an array binded to "dropdown-options" attribute. Consider providing "dropdown-trackby" attribute or make sure property "Id" exists in binded array\'s object.'}function l(e,o){for(var t=0;t1}}}])}(); \ No newline at end of file +!function(){"use strict";angular.module("dropdown-multiselect",[]).directive("dropdownMultiselect",["$timeout",function(e){return{restrict:"AE",replace:!0,transclude:!0,template:'',scope:{config:"=dropdownConfig",primaryKey:"@dropdownTrackby",disableDropdown:"=dropdownDisable",dropdownType:"=",model:"=?",dropdownOptions:"=dropdownOptions",notifyParent:"&dropdownSelected"},controller:["$scope",function(n){function o(){n.preSelectAll&&n.multiSelect&&e(n.selectAll)}function t(){var e=[];for(var o in n.options[0])e.push(o);n.leftKey=e[0],n.rightKey=e[1]}function r(e){if(angular.isUndefined(e)&&(e=n.options[0].hasOwnProperty("Id")?"Id":!!n.options[0].hasOwnProperty("id")&&"id",n.trackByKey=e,e===!1))throw'ReferenceError: Expecting property "Id" in an object from an array binded to "dropdown-options" attribute. Consider providing "dropdown-trackby" attribute or make sure property "Id" exists in binded array\'s object.'}function l(e,o){for(var t=0;t1}}}])}(); \ No newline at end of file diff --git a/src/assets/angular-dropdownMultiselect.css b/src/assets/angular-dropdownMultiselect.css index 4932b24..820f62d 100644 --- a/src/assets/angular-dropdownMultiselect.css +++ b/src/assets/angular-dropdownMultiselect.css @@ -36,6 +36,7 @@ margin-top: 65px; overflow-y: scroll; -webkit-overflow-scrolling: touch; + position: relative; } .hasfilter { margin-top: 100px; @@ -52,6 +53,14 @@ color: #333; white-space: nowrap; text-decoration: none; + height: 25px; +} +.dropdown-menu .dropdown-scrollable > li > a > .option-content { + position: absolute; + left: 40px; +} +.dropdown-menu .dropdown-scrollable > li > a > .option-selected-icon { + margin-left: 3px; } .dropdown-menu li a:hover { color: #333; diff --git a/src/assets/angular-dropdownMultiselect.js b/src/assets/angular-dropdownMultiselect.js index 36db8d8..83169d9 100644 --- a/src/assets/angular-dropdownMultiselect.js +++ b/src/assets/angular-dropdownMultiselect.js @@ -43,7 +43,8 @@ '' + From cbc21b2c0c7247fa8f01e13d4089b9abbf0a62e6 Mon Sep 17 00:00:00 2001 From: harshalitalele Date: Fri, 24 Aug 2018 21:39:10 +0530 Subject: [PATCH 4/4] updated version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eff51f7..26622f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-dropdown-multiselect", - "version": "0.3.2", + "version": "0.3.3", "description": "Dropdown with multi-select feature.", "main": "index.js", "scripts": {