vsdropdown v0.2.0

vsdropdown v. 0.1.1

Virtual scroll dropdown - AngularJS reusable UI component

Description

AngularJS directive which implements the virtual scroll dropdown.

1. virtualization

• only visible items are rendered in the browser
• good performance even millions of items

2. custom scrollbar

• scrollbar can be customized by CSS
• looks similar in all browsers

3. filtering

• built in global filter
• uses AngularJS filter

4. responsive UI

• vsdropdown UI is responsive and scalable to different size of devices

5. tooltips

• tooltips are used to shown the string which are not fit to the vsdropdown

6. touch and keyboard

• works with touch devices
• works with keyboard

7. accepts objects

• input object is array of objects (items) or array of strings

8. no dependencies

• Depends only AngularJS

Usage

• include the vsdropdown-0.1.1.min.js and the vsdropdown-0.1.1.min.css files into your project. See the Build project and the Installation chapters below.

<script src="vsdropdown-0.1.1.min.js"></script>
<link href="vsdropdown-0.1.1.min.css" rel="stylesheet" type="text/css">

• inject the vsdropdown module into your application module.

angular.module('sampleapp', ['vsdropdown']);

• add vsdropdown HTML tag into your HTML file. See the HTML example chapter below.
• add needed Javascript code. See the Javascript example chapter below.

HTML example

<div ng-app="sampleapp" ng-controller="sampleappctrl">
    <vsdropdown options="opt"</vsdropdown>
</div>

Tags

Attributes

Options data (an options attribute in the vsdropdown directive)

Javascript example

var sampleapp = angular.module('sampleapp', ['vsdropdown']);
sampleapp.controller('sampleappctrl', function ($scope) {

    // Watch the user selections - invoked when the user select/deselect item from the vsdropdown
    $scope.$watch('opt.selectedItems', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            console.log('PARENT - watch: ', newVal);
        }
    }, true);
    
    // Configuration example of the vsdropdown. 
    $scope.opt = {
        items: items,
        selectedItems: selectedItems,
        input: {
            isObject: true,
            calculateDisplayValue: function(item){
                return item.name;
            },
            visiblePropName: 'name',
            properties: {
                enabled: true,
                props: ['id', 'name', 'active'],
                propertyTitle: 'Property',
                valueTitle: 'Value'
            }
        },
        filter: {
            enabled: true,
            filterPlaceholderTxt: 'Type filter...',
            noHitsTxt: 'No hit(s)'
        },
        selection: {
            maximum: 20,
            selectionsTxt: 'selections',
            showCount: true
        },
        visibleItemCount: 4,
        showTooltip: true,
        fadeInEffects: true,
        itemSelectCb: onSelectItem
    };
};

itemSelectCb

Example of the function. See description of the parameters below the example.

function onSelectItem(items, selection, operation) {
    if (selection !== undefined) {
        console.log('PARENT - onSelectItem(): Selected item(s): ', items, ' - Selection: ', selection, ' - Operation: ', operation);
    }
}

Parameters

• items - all selected items
• selection - item which selection/deselection caused this event
• operation - select or deselect. select is + and deselect is -

Demo

In the examples folder of this project has the sample application and the online demo is here

Dependencies

Depends on AngularJS. Implemented using the AngularJS version 1.4.3.

Build project

• Build can be done by executing the grunt command. It creates the dist/debug and the dist/min folders and put files to these folders.

grunt

Installation

• Installation can be done using the bower. It installs files from the dist/debug and the dist/min folders. Needed CSS and javascript files are located in these folders.

bower install vsdropdown

Compatibility (tested with)

• IE 9+
• Firefox 36
• Google Chrome 41
• Opera 28.0
• Mobile Safari 8

License

• License: MIT

Author

• Author: kekeh