Skip to content

Commit

Permalink
V 0.3.0
Browse files Browse the repository at this point in the history 
- Bug Fix: Checking the existence of array of dropdown list.
- Added “multiSelect” on or off feature. Also, auto CSS fix based on
“multiSelect” property.
  • Loading branch information
@rajush
rajush committed Oct 13, 2015
1 parent 2dbc74e commit 500112b
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 27 deletions.
16 changes: 8 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -159,7 +160,8 @@ $scope.config = {
icon: 'glyphicon glyphicon-heart',
displayBadge: true,
height: '200px',
filter: true
filter: true,
multiSelect: false
};
```

Expand All @@ -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")


8 changes: 5 additions & 3 deletions src/angular-dropdownMultiselect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
margin-right: -6px;
}
.dropdown-menu div {
width: 93%;
width: 100%;
z-index: 1;
}
.dropdown-static {
Expand Down Expand Up @@ -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;
}
Expand All @@ -87,4 +89,4 @@
padding: 6px 26px;
border-radius: 23px;
height: 30px;
}
}
78 changes: 62 additions & 16 deletions src/angular-dropdownMultiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand All @@ -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
Expand All @@ -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' ) ) {
Expand All @@ -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' ) ) {
Expand All @@ -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' ) ) {
Expand Down Expand Up @@ -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 );
}

Expand All @@ -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 ) ) {
Expand Down Expand Up @@ -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 );
Expand Down

0 comments on commit 500112b

Please sign in to comment.