V 0.3.0

- Bug Fix: Checking the existence of array of dropdown list.
- Added “multiSelect” on or off feature. Also, auto CSS fix based on
“multiSelect” property.

Author: rajush

README.md

@@ -57,7 +57,7 @@ $scope.options = [ {
 ```
 
 <h4>dropdown-trackby</h4>
-<p>Initially, dropdown items are tracked by <code>Id</code> automagically, if the <code>dropdown-trackby</code> attribute is not set.</p>
+<p>Initially, dropdown items are tracked by <code>Id</code> automagically (considering "Id" property is present in all objects in an array), if the <code>dropdown-trackby</code> attribute is not set.</p>
 <p>If the option objects does not have <code>Id</code> property, then custom tracking could be set by providing any of the property of an object from the options data.</p>
 Controller:
 ```javascript
@@ -76,10 +76,10 @@ var options = [ {
 ```html
 <dropdown-multiselect dropdown-options="options" dropdown-trackby="Name"></dropdown-multiselect>
 ```
-<p>It is always better to provide <code>dropdown-trackby</code> attribute for correct tracking.</p>
+<p><em>NOTE: </em> It is always better to provide <code>dropdown-trackby</code> attribute for correct tracking, when <code>dropdown-options</code> is being used.</p>
 
 <h4>dropdown-disable</h4>
-<p>Dropdown could be disabled by providing boolean value to <code>dropdown-disable</code> attribute.</p>
+<p>Dropdown could be disabled by directly providing boolean value to <code>dropdown-disable</code> attribute.</p>
 HTML:
 ```html
 <dropdown-multiselect dropdown-options="options" dropdown-disable="true"></dropdown-multiselect>
@@ -112,8 +112,8 @@ Controller:
 ```
 
 <h3>Set through config in Controller:</h3>
-Configure the options from the controller to set <code>dropdown-config</code>.
-<p><em>NOTE: </em> When <code>dropdown-config</code> is being used, it will overwrite <code>dropdown-options</code> and <code>dropdown-trackby</code> attribute, if in use.</p>
+Configure the options from the controller to set <code>dropdown-config</code> attribute.
+<p><em>NOTE: </em> When <code>dropdown-config</code> is being used, it will overwrite <code>dropdown-options</code> and <code>dropdown-trackby</code> attribute, if in use. Therefore, it's better to use just one at a time.</p>
 <p>Available <code>config</code> options:
 <pre>
     options,
@@ -134,6 +134,7 @@ Configure the options from the controller to set <code>dropdown-config</code>.
 <h6>displayBadge:</h6> <p>Badge on the dropdown button that displays the total number of selected items from the dropdown list. Default visibility is <code>true</code>, but could be set to <code>false</code>.</p>
 <h6>height:</h6> <p>Height of the scrollable item list in a dropdown-box, in pixel. Default height is set to <code>200px</code>.</p>
 <h6>filter:</h6> <p>Filter/search items from the dropdown list. Default visibility is <code>false</code>, but could be set to <code>true</code>.</p>
+<h6>multiSelect:</h6> <p>Turn multi-select list items "on" or "off". Default is <code>true</code>, but could be turned "off" by setting <code>false</code>.</p>
 
 Controller:
 ```javascript
@@ -159,7 +160,8 @@ $scope.config = {
     icon: 'glyphicon glyphicon-heart',
     displayBadge: true,
     height: '200px',
-    filter: true
+    filter: true,
+    multiSelect: false
 };
 ```
 
@@ -172,5 +174,3 @@ HTML:
 ![Alt text](https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png "Chrome")
 ![Alt text](https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png "Firefox")
 ![Alt text](https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png "Safari")
-
-

src/angular-dropdownMultiselect.css

@@ -16,7 +16,7 @@
     margin-right: -6px;
 }
 .dropdown-menu div {
-    width: 93%;
+    width: 100%;
     z-index: 1;
 }
 .dropdown-static {
@@ -72,11 +72,13 @@
     position: relative;
     font-size: 18px;
     padding-top: 0px;
+    padding-left: 20px;
+    padding-right: 20px;
     margin: 3px auto 0px;
 }
 .filter-parent label {
     position: absolute;
-    left: 7px;
+    left: 27px;
     top: 5px;
     color: #C3BFBF;
 }
@@ -87,4 +89,4 @@
     padding: 6px 26px;
     border-radius: 23px;
     height: 30px;
-}
+}

src/angular-dropdownMultiselect.js

@@ -25,8 +25,8 @@ angular.module( 'dropdown-multiselect', [] )
                 '<li>' +
                 '<div>' +
                 '<ul class="dropdown-static">' +
-                '<li><a ng-click="selectAll()"><i class="glyphicon glyphicon-ok"></i> Select All</a></li>' +
-                '<li><a ng-click="unSelectAll()"><i class="glyphicon glyphicon-remove"></i> Unselect All</a></li>' +
+                '<li ng-if="multiSelect"><a ng-click="selectAll()"><i class="glyphicon glyphicon-ok"></i> Select All</a></li>' +
+                '<li ng-if="multiSelect"><a ng-click="unSelectAll()"><i class="glyphicon glyphicon-remove"></i> Unselect All</a></li>' +
                 '<div class="filter-parent" id="search" ng-if="isFilterVisible">' +
                 '<label for="filter-by"><i class="glyphicon glyphicon-search"></i></label>' +
                 '<div>' +
@@ -53,12 +53,13 @@ angular.module( 'dropdown-multiselect', [] )
                 disableDropdown: '=dropdownDisable', // boolean
                 dropdownType: '=', // view type
                 model: '=?', // model to bind with view & bind data back to the controller
-                options: '=dropdownOptions', // object for repeater
+                dropdownOptions: '=dropdownOptions', // object for repeater
                 notifyParent: '&dropdownSelected' // notifier
             },
             controller: function ( $scope ) {
                 var model = [],
                     badgeVisibility = true, // default badge visibility
+                    multiSelect = true, // default multiSelect is "ON"
                     filterVisibility = false, // drfault filter visibility
                     divider = '-', // default divider sign
                     icon = 'glyphicon glyphicon-ok', // default icon
@@ -74,11 +75,30 @@ angular.module( 'dropdown-multiselect', [] )
 
                 $scope.divider = divider;
 
+                $scope.multiSelect = multiSelect;
+
                 $scope.model = model;
 
                 try {
+                    if ( angular.isUndefined( $scope.dropdownOptions ) && angular.isUndefined( $scope.config ) ) {
+                        throw 'Error: Missing array for dropdown list. Consider providing array through [dropdown-options] or [dropdown-config] attribute in the directive tag.';
+                    }
+
+                    // check if dropdownOptions is defined or not
+                    if ( angular.isDefined( $scope.dropdownOptions ) ) {
+                        // setting dropdown list items
+                        $scope.options = $scope.dropdownOptions;
+
+                        // auto assigning left display value and right display value
+                        autoLeftKeyRightKey();
+                    }
+
+                    /*===================================================================*/
+                    /*   NOTE: WHEN config AND dropdownOptions ARE BOTH USED TOGETHER,   */
+                    /*         config WILL OVERWRITE dropdownOptions.                    */
+                    /*===================================================================*/
 
-                    //check if config is defined or not
+                    // check if config is defined or not
                     if ( angular.isDefined( $scope.config ) ) {
                         // if 'options' property exists, set the dropdown list items
                         if ( $scope.config.hasOwnProperty( 'options' ) ) {
@@ -90,14 +110,8 @@ angular.module( 'dropdown-multiselect', [] )
                             $scope.leftKey = $scope.config.displayBy[ 0 ];
                             $scope.rightKey = $scope.config.displayBy[ 1 ];
                         } else {
-                            // grab the first two property and set it automatically as leftKey and rightKey
-                            var optionsProperties = [];
-                            for ( var prop in $scope.options[ 0 ] ) {
-                                optionsProperties.push( prop );
-                            }
-
-                            $scope.leftKey = optionsProperties[ 0 ];
-                            $scope.rightKey = optionsProperties[ 1 ];
+                            // auto assigning left display value and right display value
+                            autoLeftKeyRightKey();
                         }
 
                         if ( $scope.config.hasOwnProperty( 'divider' ) ) {
@@ -120,6 +134,13 @@ angular.module( 'dropdown-multiselect', [] )
                             $scope.isBadgeVisible = badgeVisibility;
                         }
 
+                        if ( $scope.config.hasOwnProperty( 'multiSelect' ) ) {
+                            multiSelect = ( angular.equals( true, $scope.config.multiSelect ) ) ? true : false;
+
+                            $scope.multiSelect = multiSelect;
+                        }
+
+
                         // if 'trackBy' property exists, set the main key to track the dropdown list
                         //(config file overrites the dropdown-trackby attributes)
                         if ( $scope.config.hasOwnProperty( 'trackBy' ) ) {
@@ -217,11 +238,19 @@ angular.module( 'dropdown-multiselect', [] )
                             chainId = this.option.ChainId,
                             obj = {};
 
+                        // when multi select feature turned off through "config"
+                        if ( multiSelect === false ) {
+                            if ( isDuplicate( id, model ) ) return false;
+                            model[ 0 ] = this.option;
+                            return false;
+                        }
+
                         var duplicate = isDuplicate( id, model );
 
                         if ( !duplicate ) {
                             obj[ $scope.trackByKey ] = id;
 
+                            // add to array
                             model.push( this.option );
                         }
 
@@ -248,6 +277,16 @@ angular.module( 'dropdown-multiselect', [] )
                     console.error( e );
                 }
 
+                function autoLeftKeyRightKey() {
+                    // grab the first two property and set it automatically as leftKey and rightKey
+                    var optionsProperties = [];
+                    for ( var prop in $scope.options[ 0 ] ) {
+                        optionsProperties.push( prop );
+                    }
+                    $scope.leftKey = optionsProperties[ 0 ]; // setthing by 1st property
+                    $scope.rightKey = optionsProperties[ 1 ]; // setting by 2nd property
+                }
+
                 function keyIsUndefined( key ) {
                     // if dropdownTrackby is not defined
                     if ( angular.isUndefined( key ) ) {
@@ -322,16 +361,23 @@ angular.module( 'dropdown-multiselect', [] )
 
                 }, true );
 
-                if ( angular.isDefined( scope.config.height ) ) {
-                    var custom_height = scope.config.height,
-                        dropdownListBox = angular.element( document.querySelector( '.dropdown-scrollable' ) );
+                var dropdownListBox = angular.element( document.querySelector( '.dropdown-scrollable' ) );
+
+                if ( angular.isDefined( scope.config ) && angular.isDefined( scope.config.height ) ) {
+                    var custom_height = scope.config.height;
 
-                    dropdownListBox.css( 'max-height', custom_height )
+                    dropdownListBox.css( 'max-height', custom_height );
 
                 } else {
                     scope.defaultHeight = true;
                 }
 
+                if ( scope.multiSelect === false && scope.isFilterVisible === true ) {
+                    dropdownListBox.css( 'margin-top', '50px' );
+                } else if ( scope.multiSelect === false && scope.isFilterVisible === false ) {
+                    dropdownListBox.css( 'margin-top', '10px' );
+                }
+
                 var transcluded = element.find( 'span' ).contents();
 
                 scope.hasText = ( transcluded.length > 0 );