@ngal/ui/vertical-rolodex/ngal.ui.verticalRolodex.directive.js

Addons for ui.bootstrap

/* eslint-disable quotes */
(function () {
    "use strict";

    var TEMPLATE = '' +
        '<div class="ngal-ui-vertical-rolodex">' +
            '<div ng-repeat="row in buttons.substr(13)" ng-init="rowIndex = $index">' +
                '<span ng-bind="button"' +
                    'ng-class="{active: button === selectedButton}"' +
                    'ng-click="onClick(button)"' +
                    'ng-repeat="button in [buttons[rowIndex], buttons[13 + rowIndex]]">' +
                '</span>' +
            '</div>' +
        '</div>';


    angular
        .module("ngal.ui")
        .directive("verticalRolodex", [function () {

            function link(scope, elem, attrs, ngModelCtrl) {
                scope.buttons = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                scope.selectedButton = undefined;

                scope.onClick = function(button) {
                    scope.selectedButton = button !== scope.selectedButton ? button : undefined;

                    if (ngModelCtrl)
                        ngModelCtrl.$setViewValue(scope.selectedButton);
                };

                if (ngModelCtrl) {
                    scope.$watch(function() { return ngModelCtrl.$modelValue; }, function(newValue) {
                        if (scope.selectedButton !== newValue)
                            scope.selectedButton = newValue;
                    });
                }
            }

            return {
                link: link,
                require: "?ngModel",
                restrict: "E",
                scope: {},
                template: TEMPLATE
            };
        }]);
})();