select-box.js

select-box.js

(function() {
    'use strict';

    angular.module('app').directive('selectBox', ['$timeout', function(timeout) {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                tabindex: '@',
                placeholder: '@',
                exposedModel: '=ngModel'
            },
            link: function(scope, element, attrs) {
                scope.listShow = false;
                scope.selectedIndex = -1;
                scope.listContainerId = "select-list-" + scope.tabindex;
                scope.listInputId = "select-input-" + scope.tabindex;

                // Removes being able to tab to the containing div.
                element.removeAttr('tabindex');

                selectBoxProvider.getListValues(attrs.selectBox).then(function(data){
                    scope.listValues = data.listValues;
                });

                scope.$on('selectedIndexChanged', function(event, args){
                    scope.exposedModel = scope.listValues[args];
                });

                scope.getClass = function(index) {
                    if(scope.selectedIndex == index) {
                        return 'selected--item';
                    }
                };

                scope.listToggle = function(param) {
                    scope.listShow = !scope.listShow;
                };

                scope.mouseClickInput = function() {
                    scope.listToggle();
                    scope.focusListIndex(0);
                }

                scope.mouseClickListItem = function(index) {
                    scope.listSelect(index);
                    scope.focusInput();
                }

                scope.listSelect = function(index) {
                    scope.selectedIndex = index;
                    scope.$emit('selectedIndexChanged', scope.selectedIndex);
                    scope.listToggle();
                    scope.focusInput();
                };

                scope.listBlur = function(event) {
                    if(scope.listShow) {
                        if(event.relatedTarget == null || event.relatedTarget.parentNode.id != scope.listContainerId) {
                            scope.listToggle();
                        }
                    }
                };

                scope.toIndex = function(index) {
                    var ret = 0;
                    if(index > scope.listValues.length-1) {
                        ret = 0;
                    } else if(index < 0) {
                        ret = scope.listValues.length-1;
                    } else {
                        ret = index;
                    }

                    return ret;
                };

                scope.focusInput = function() {
                    return timeout(function() {
                               document.getElementById(scope.listInputId).focus();
                           });
                }

                scope.focusListIndex = function(index) {
                     return timeout(function() {
                                document.getElementById(scope.listContainerId).children[index].focus();
                             });
                };

                scope.inputKeyboardEvents = function(event) {
                    // Up Arrow
                    if(event.which == 38) {
                        scope.listToggle();
                        scope.focusListIndex(scope.listValues.length - 1);
                        event.preventDefault();
                    }

                    // Down Arrow / Enter / Space bar
                    if (event.which == 40 || event.which == 13 || event.which == 32) {
                        scope.listToggle();
                        scope.focusListIndex(0);
                        event.preventDefault();
                    }

                    // Escape Key
                    if(event.which ==  27) {
                        scope.listToggle();
                        scope.focusInput();
                    }
                };

                // Must be on key-down, arrow keys do not register a keypress event.
                // Keypress events are fired from inserting a character.
                scope.listKeyboardEvents = function(event, index) {
                    // Right Arrow / Down Arrow / Tab
                    var advanceKeyPressed =  (event.which == 39);

                    // Left Arrow / Up Arrow / Shift+Tab
                    var previousKeyPressed = (event.which === 37);

                    if (advanceKeyPressed) {
                        scope.focusListIndex(scope.toIndex(index + 1));
                    } else if (previousKeyPressed) {
                        scope.focusListIndex(scope.toIndex(index - 1));
                    }

                    if(advanceKeyPressed || previousKeyPressed) {
                        event.preventDefault();
                    }

                    // Escape Key
                    if(event.which == 27){
                        scope.listToggle();
                        scope.focusInput();
                    }

                    // Enter / Space bar
                    if(event.which == 13 || event.which == 32){
                        scope.listSelect(index);
                        event.preventDefault();
                    }
                };
            },
            templateUrl: 'templates/par.html'
        };
    }])
}());