diff --git a/src/angular-selectbox.js b/src/angular-selectbox.js
index fbbb87f..dec069e 100644
--- a/src/angular-selectbox.js
+++ b/src/angular-selectbox.js
@@ -1,564 +1,562 @@
(function () {
- 'use strict';
-
- angular
- .module('angularSelectbox', [])
- .run(run)
- .directive('selectbox', selectbox)
- .directive('selectboxMulti', selectboxMulti)
- .factory('Selectbox', Selectbox);
-
- /** @ngInject */
- function run($templateCache) {
-
- $templateCache.put('selectbox.html',
- '');
-
- $templateCache.put('selectbox-multi.html',
- '');
- }
-
- /** @ngInject */
- function selectbox() {
-
- return {
- restrict: 'E',
- templateUrl: 'selectbox.html',
- scope: {},
- controller: SelectboxController,
- controllerAs: 'vm',
- bindToController: {
- options: '=',
- value: '=',
- idKey: '@',
- labelKey: '@',
- title: '@',
- onChange: '&'
- }
- };
+ 'use strict';
+
+ angular
+ .module('angularSelectbox', [])
+ .run(['$templateCache', run])
+ .directive('selectbox', selectbox)
+ .directive('selectboxMulti', selectboxMulti)
+ .factory('Selectbox', Selectbox);
/** @ngInject */
- function SelectboxController($scope, $element, $document, $timeout, Selectbox) {
+ function run($templateCache) {
+
+ $templateCache.put('selectbox.html',
+ '');
+
+ $templateCache.put('selectbox-multi.html',
+ '');
+ }
- var vm = this;
+ /** @ngInject */
+ function selectbox() {
+
+ return {
+ restrict: 'E',
+ templateUrl: 'selectbox.html',
+ scope: {},
+ controller: ['$scope', '$element', '$document', '$timeout', Selectbox,SelectboxController],
+ controllerAs: 'vm',
+ bindToController: {
+ options: '=',
+ value: '=',
+ idKey: '@',
+ labelKey: '@',
+ title: '@',
+ onChange: '&'
+ }
+ };
- var _sbDropdown = $element[0].querySelector('.sb-dropdown');
- var _defaults = Selectbox.getDefaults();
+ /** @ngInject */
+ function SelectboxController($scope, $element, $document, $timeout, Selectbox) {
- vm.instance = Selectbox.getInstance();
- vm.active = _defaults.active;
- vm.focus = _defaults.focus;
- vm.idKey = vm.idKey || _defaults.idKey;
- vm.labelKey = vm.labelKey || _defaults.labelKey;
- vm.title = vm.title || _defaults.title;
+ var vm = this;
- _getSelected();
+ var _sbDropdown = $element[0].querySelector('.sb-dropdown');
+ var _defaults = Selectbox.getDefaults();
- vm.formatInstance = formatInstance;
- vm.toggle = toggle;
- vm.change = change;
+ vm.instance = Selectbox.getInstance();
+ vm.active = _defaults.active;
+ vm.focus = _defaults.focus;
+ vm.idKey = vm.idKey || _defaults.idKey;
+ vm.labelKey = vm.labelKey || _defaults.labelKey;
+ vm.title = vm.title || _defaults.title;
- $scope.$on('$destroy', _unbind);
+ _getSelected();
- /**
- * Get selected object
- *
- * @private
- */
- function _getSelected() {
+ vm.formatInstance = formatInstance;
+ vm.toggle = toggle;
+ vm.change = change;
- if (!vm.options.length) { return; }
+ $scope.$on('$destroy', _unbind);
- if (vm.options[0][vm.idKey]) {
- for (var i = 0; i < vm.options.length; i += 1) {
- if (vm.options[i][vm.idKey] === vm.value) {
- vm.selected = vm.options[i];
- break;
- }
- }
- } else {
- vm.selected = vm.value;
- }
+ /**
+ * Get selected object
+ *
+ * @private
+ */
+ function _getSelected() {
- }
+ if (!vm.options.length) { return; }
- /**
- * Format instance identifier to be used in the view as id for example
- *
- * @returns {string} formatted instance identifier
- */
- function formatInstance() {
+ if (vm.options[0][vm.idKey]) {
+ for (var i = 0; i < vm.options.length; i += 1) {
+ if (vm.options[i][vm.idKey] === vm.value) {
+ vm.selected = vm.options[i];
+ break;
+ }
+ }
+ } else {
+ vm.selected = vm.value;
+ }
- return Selectbox.formatInstance(vm.instance);
+ }
- }
+ /**
+ * Format instance identifier to be used in the view as id for example
+ *
+ * @returns {string} formatted instance identifier
+ */
+ function formatInstance() {
- /**
- * Toggle drop-down visibility and (un)bind events
- *
- */
- function toggle() {
+ return Selectbox.formatInstance(vm.instance);
- vm.active = !vm.active;
+ }
- $timeout(function () {
- if (vm.active) {
- _bind();
- } else {
- _unbind();
- }
- });
+ /**
+ * Toggle drop-down visibility and (un)bind events
+ *
+ */
+ function toggle() {
- }
+ vm.active = !vm.active;
- /**
- * Change selected value and initiate the callback function if defined
- *
- * @param {*} value value to select
- */
- function change(value) {
+ $timeout(function () {
+ if (vm.active) {
+ _bind();
+ } else {
+ _unbind();
+ }
+ });
- vm.value = value[vm.idKey] || value;
+ }
- _getSelected();
+ /**
+ * Change selected value and initiate the callback function if defined
+ *
+ * @param {*} value value to select
+ */
+ function change(value) {
- if (angular.isDefined(vm.onChange)) { vm.onChange({value: vm.value}); }
+ vm.value = value[vm.idKey] || value;
- }
+ _getSelected();
- /**
- * Handle click event on document in order to determine
- * if selectbox should be closed
- *
- * @param {Object} e event object
- * @private
- */
- function _handleClick(e) {
+ if (angular.isDefined(vm.onChange)) { vm.onChange({ value: vm.value }); }
- var targetId = Selectbox.getId(e.target.parentNode);
+ }
- if (formatInstance() === targetId) { return; }
+ /**
+ * Handle click event on document in order to determine
+ * if selectbox should be closed
+ *
+ * @param {Object} e event object
+ * @private
+ */
+ function _handleClick(e) {
- toggle();
+ var targetId = Selectbox.getId(e.target.parentNode);
- }
+ if (formatInstance() === targetId) { return; }
- /**
- * Handle keydown event
- * - recognize ENTER in order to select value
- * - recognize UP and DOWN arrow keys to highlight the value
- *
- * @param {Object} e event object
- * @param {number} e.keyCode event key code
- * @private
- */
- function _handleKeyDown(e) {
+ toggle();
- var min = 0;
- var max = vm.options.length - 1;
+ }
- if (e.keyCode === 13) { // enter
+ /**
+ * Handle keydown event
+ * - recognize ENTER in order to select value
+ * - recognize UP and DOWN arrow keys to highlight the value
+ *
+ * @param {Object} e event object
+ * @param {number} e.keyCode event key code
+ * @private
+ */
+ function _handleKeyDown(e) {
- $timeout(function () {
- vm.change(vm.options[vm.focus]);
- });
+ var min = 0;
+ var max = vm.options.length - 1;
- return;
- }
+ if (e.keyCode === 13) { // enter
- if (e.keyCode !== 40 && e.keyCode !== 38) { return; }
+ $timeout(function () {
+ vm.change(vm.options[vm.focus]);
+ });
- $timeout(function () {
- vm.focus = Selectbox.getFocus(vm.focus, min, max, e.keyCode);
- Selectbox.updateScrollPosition(vm.focus, _sbDropdown);
- });
+ return;
+ }
- }
+ if (e.keyCode !== 40 && e.keyCode !== 38) { return; }
- /**
- * Bind click and keydown events
- *
- * @private
- */
- function _bind() {
+ $timeout(function () {
+ vm.focus = Selectbox.getFocus(vm.focus, min, max, e.keyCode);
+ Selectbox.updateScrollPosition(vm.focus, _sbDropdown);
+ });
- $document.bind('click', _handleClick);
- $element.on('keydown', _handleKeyDown);
+ }
- }
+ /**
+ * Bind click and keydown events
+ *
+ * @private
+ */
+ function _bind() {
- /**
- * Unbind click and keydown events and reset focus
- *
- * @private
- */
- function _unbind() {
+ $document.bind('click', _handleClick);
+ $element.on('keydown', _handleKeyDown);
- vm.focus = 0;
+ }
- $document.unbind('click', _handleClick);
- $element.off('keydown', _handleKeyDown);
+ /**
+ * Unbind click and keydown events and reset focus
+ *
+ * @private
+ */
+ function _unbind() {
- }
+ vm.focus = 0;
- }
+ $document.unbind('click', _handleClick);
+ $element.off('keydown', _handleKeyDown);
- }
-
- function selectboxMulti() {
-
- return {
- restrict: 'E',
- templateUrl: 'selectbox-multi.html',
- scope: {},
- controller: SelectboxMultiController,
- controllerAs: 'vm',
- bindToController: {
- title: '@',
- options: '=',
- values: '=',
- idKey: '@',
- labelKey: '@',
- onChange: '&'
- }
- };
+ }
- /** @ngInject */
- function SelectboxMultiController($scope, $element, $document, $timeout, Selectbox) {
-
- var vm = this;
-
- var _sbDropdown = $element[0].querySelector('.sb-dropdown');
- var _defaults = Selectbox.getDefaults();
-
- vm.instance = Selectbox.getInstance();
- vm.title = vm.title || 'Select';
- vm.active = _defaults.active;
- vm.focus = _defaults.focus;
- vm.idKey = vm.idKey || _defaults.idKey;
- vm.labelKey = vm.labelKey || _defaults.labelKey;
-
- vm.formatInstance = formatInstance;
- vm.toggle = toggle;
- vm.change = change;
- vm.contains = contains;
-
- $scope.$on('$destroy', _unbind);
-
- /**
- * Format instance identifier to be used in the view as id for example
- *
- * @returns {string} formatted instance identifier
- */
- function formatInstance() {
-
- return Selectbox.formatInstance(vm.instance);
-
- }
-
- /**
- * Toggle drop-down visibility and (un)bind events
- *
- */
- function toggle() {
-
- vm.active = !vm.active;
-
- $timeout(function () {
- if (vm.active) {
- _bind();
- } else {
- _unbind();
- }
- });
-
- }
-
- /**
- * Change selected values and initiate the callback function if defined
- *
- * @param {*} value value to select
- */
- function change(value) {
-
- var id = value[vm.idKey];
- var index = vm.values.indexOf(id);
-
- if (index === -1) {
- vm.values.push(id);
- } else {
- vm.values.splice(index, 1);
}
- if (angular.isDefined(vm.onChange)) { vm.onChange({values: vm.values}); }
+ }
- }
+ function selectboxMulti() {
+
+ return {
+ restrict: 'E',
+ templateUrl: 'selectbox-multi.html',
+ scope: {},
+ controller: ['$scope', '$element', '$document', '$timeout', 'Selectbox', SelectboxMultiController],
+ controllerAs: 'vm',
+ bindToController: {
+ title: '@',
+ options: '=',
+ values: '=',
+ idKey: '@',
+ labelKey: '@',
+ onChange: '&',
+ displayLength: '='
+ }
+ };
- /**
- * Check if item belongs to an array
- *
- * @param {Array} array array where the item is checked
- * @param {*} item item which is checked
- * @returns {boolean}
- */
- function contains(array, item) {
+ /** @ngInject */
+ function SelectboxMultiController($scope, $element, $document, $timeout, Selectbox) {
- return array.indexOf(item) !== -1;
+ var vm = this;
- }
+ var _sbDropdown = $element[0].querySelector('.sb-dropdown');
+ var _defaults = Selectbox.getDefaults();
- /**
- * Handle click event on document in order to determine
- * if selectbox should be closed
- *
- * @param {Object} e event object
- * @private
- */
- function _handleClick(e) {
+ vm.instance = Selectbox.getInstance();
+ vm.title = vm.title || 'Select';
+ vm.active = _defaults.active;
+ vm.focus = _defaults.focus;
+ vm.idKey = vm.idKey || _defaults.idKey;
+ vm.labelKey = vm.labelKey || _defaults.labelKey;
- var targetId = Selectbox.getId(e.target.parentNode);
- var itemClicked = !targetId && e.target.classList.contains('sb-item-handle');
+ vm.formatInstance = formatInstance;
+ vm.toggle = toggle;
+ vm.change = change;
+ vm.contains = contains;
- if (formatInstance() === targetId || itemClicked) { return; }
+ $scope.$on('$destroy', _unbind);
- toggle();
+ /**
+ * Format instance identifier to be used in the view as id for example
+ *
+ * @returns {string} formatted instance identifier
+ */
+ function formatInstance() {
- }
+ return Selectbox.formatInstance(vm.instance);
- /**
- * Handle keydown event
- * - recognize SPACE in order to select values
- * - recognize ENTER in order to close dropdown
- * - recognize UP and DOWN arrow keys to highlight the value
- *
- * @param {Object} e event object
- * @param {number} e.keyCode event key code
- * @private
- */
- function _handleKeyDown(e) {
+ }
- var min = 0;
- var max = vm.options.length - 1;
+ /**
+ * Toggle drop-down visibility and (un)bind events
+ *
+ */
+ function toggle() {
- if ([32, 13].indexOf(e.keyCode) !== -1) { // space or enter
+ vm.active = !vm.active;
- $timeout(function () {
+ $timeout(function () {
+ if (vm.active) {
+ _bind();
+ } else {
+ _unbind();
+ }
+ });
- if (e.keyCode === 13) { // enter
- _unbind();
}
- if (e.keyCode === 32) { // space
- vm.change(vm.options[vm.focus]);
+ /**
+ * Change selected values and initiate the callback function if defined
+ *
+ * @param {*} value value to select
+ */
+ function change(value) {
+
+ var id = value[vm.idKey];
+ var index = vm.values.indexOf(id);
+
+ if (index === -1) {
+ vm.values.push(id);
+ } else {
+ vm.values.splice(index, 1);
+ }
+
+ if (angular.isDefined(vm.onChange)) { vm.onChange({ values: vm.values }); }
+
}
- });
- return;
- }
+ /**
+ * Check if item belongs to an array
+ *
+ * @param {Array} array array where the item is checked
+ * @param {*} item item which is checked
+ * @returns {boolean}
+ */
+ function contains(array, item) {
- if (e.keyCode !== 40 && e.keyCode !== 38) { return; }
+ return array.indexOf(item) !== -1;
- $timeout(function () {
- vm.focus = Selectbox.getFocus(vm.focus, min, max, e.keyCode);
- Selectbox.updateScrollPosition(vm.focus, _sbDropdown);
- });
+ }
- }
+ /**
+ * Handle click event on document in order to determine
+ * if selectbox should be closed
+ *
+ * @param {Object} e event object
+ * @private
+ */
+ function _handleClick(e) {
- /**
- * Bind click and keydown events
- *
- * @private
- */
- function _bind() {
+ var targetId = Selectbox.getId(e.target.parentNode);
+ var itemClicked = !targetId && e.target.classList.contains('sb-item-handle');
- $document.bind('click', _handleClick);
- $element.on('keydown', _handleKeyDown);
+ if (formatInstance() === targetId || itemClicked) { return; }
- }
+ toggle();
- /**
- * Unbind click and keydown events and reset focus
- *
- * @private
- */
- function _unbind() {
+ }
- vm.focus = _defaults.focus;
- vm.active = _defaults.active;
+ /**
+ * Handle keydown event
+ * - recognize SPACE in order to select values
+ * - recognize ENTER in order to close dropdown
+ * - recognize UP and DOWN arrow keys to highlight the value
+ *
+ * @param {Object} e event object
+ * @param {number} e.keyCode event key code
+ * @private
+ */
+ function _handleKeyDown(e) {
- $document.unbind('click', _handleClick);
- $element.off('keydown', _handleKeyDown);
+ var min = 0;
+ var max = vm.options.length - 1;
- }
+ if ([32, 13].indexOf(e.keyCode) !== -1) { // space or enter
- }
+ $timeout(function () {
- }
- function Selectbox() {
+ if (e.keyCode === 13) { // enter
+ _unbind();
+ }
- var _counter = 0;
+ if (e.keyCode === 32) { // space
+ vm.change(vm.options[vm.focus]);
+ }
+ });
- var _defaults = {
- active: false,
- focus: 0,
- idKey: 'id',
- labelKey: 'label',
- title: 'Select'
- };
+ return;
+ }
- return {
- getInstance: getInstance,
- getDefaults: getDefaults,
- formatInstance: formatInstance,
- getFocus: getFocus,
- updateScrollPosition: updateScrollPosition,
- getId: getId
- };
+ if (e.keyCode !== 40 && e.keyCode !== 38) { return; }
- /**
- * Get next instance identifier
- *
- * @returns {number}
- */
- function getInstance() {
+ $timeout(function () {
+ vm.focus = Selectbox.getFocus(vm.focus, min, max, e.keyCode);
+ Selectbox.updateScrollPosition(vm.focus, _sbDropdown);
+ });
- _counter += 1;
+ }
- return _counter;
+ /**
+ * Bind click and keydown events
+ *
+ * @private
+ */
+ function _bind() {
- }
+ $document.bind('click', _handleClick);
+ $element.on('keydown', _handleKeyDown);
- /**
- * Get default options
- *
- * @returns {*}
- */
- function getDefaults() {
+ }
- return angular.copy(_defaults);
+ /**
+ * Unbind click and keydown events and reset focus
+ *
+ * @private
+ */
+ function _unbind() {
- }
+ vm.focus = _defaults.focus;
+ vm.active = _defaults.active;
- /**
- * Format instance in order to use it in template
- *
- * @param {number} instance instance identifier
- * @returns {string}
- */
- function formatInstance(instance) {
+ $document.unbind('click', _handleClick);
+ $element.off('keydown', _handleKeyDown);
- return 'sb-' + instance;
+ }
+
+ }
}
+ function Selectbox() {
+
+ var _counter = 0;
+
+ var _defaults = {
+ active: false,
+ focus: 0,
+ idKey: 'id',
+ labelKey: 'label',
+ title: 'Select'
+ };
+
+ return {
+ getInstance: getInstance,
+ getDefaults: getDefaults,
+ formatInstance: formatInstance,
+ getFocus: getFocus,
+ updateScrollPosition: updateScrollPosition,
+ getId: getId
+ };
+
+ /**
+ * Get next instance identifier
+ *
+ * @returns {number}
+ */
+ function getInstance() {
+
+ _counter += 1;
+
+ return _counter;
- /**
- * Update focus of the element
- *
- * @param {number} focus current focus
- * @param {number} min minimal focus
- * @param {number} max maximum focus
- * @param {number} keyCode keycode which tell if going up or down
- * @returns {*}
- */
- function getFocus(focus, min, max, keyCode) {
+ }
- if (keyCode === 40) { // key arrow down
- focus = (focus >= max) ? min : (focus + 1);
- }
+ /**
+ * Get default options
+ *
+ * @returns {*}
+ */
+ function getDefaults() {
- if (keyCode === 38) { // key arrow up
- focus = (focus <= min) ? max : (focus - 1);
- }
+ return angular.copy(_defaults);
- return focus;
+ }
- }
+ /**
+ * Format instance in order to use it in template
+ *
+ * @param {number} instance instance identifier
+ * @returns {string}
+ */
+ function formatInstance(instance) {
- /**
- * Update scroll position of the container
- *
- * @param {number} focus currently focused element
- * @param {object} dropdown scrollable dropdown
- */
- function updateScrollPosition(focus, dropdown) {
+ return 'sb-' + instance;
- var activeItem = dropdown.querySelector('.sb-item-focus');
- var currentOffset = activeItem.offsetHeight * focus;
+ }
- if (currentOffset >= dropdown.offsetHeight) {
- dropdown.scrollTop = currentOffset;
- } else if (currentOffset <= dropdown.scrollTop) {
- dropdown.scrollTop = 0;
- }
+ /**
+ * Update focus of the element
+ *
+ * @param {number} focus current focus
+ * @param {number} min minimal focus
+ * @param {number} max maximum focus
+ * @param {number} keyCode keycode which tell if going up or down
+ * @returns {*}
+ */
+ function getFocus(focus, min, max, keyCode) {
+
+ if (keyCode === 40) { // key arrow down
+ focus = (focus >= max) ? min : (focus + 1);
+ }
- }
+ if (keyCode === 38) { // key arrow up
+ focus = (focus <= min) ? max : (focus - 1);
+ }
+
+ return focus;
- /**
- * Get an id of the node
- *
- * @param {Object} node DOM element
- * @returns {*}
- */
- function getId(node) {
+ }
- if (typeof node.getAttribute !== 'function') {
- return null;
- }
+ /**
+ * Update scroll position of the container
+ *
+ * @param {number} focus currently focused element
+ * @param {object} dropdown scrollable dropdown
+ */
+ function updateScrollPosition(focus, dropdown) {
+
+ var activeItem = dropdown.querySelector('.sb-item-focus');
+ var currentOffset = activeItem.offsetHeight * focus;
+
+ if (currentOffset >= dropdown.offsetHeight) {
+ dropdown.scrollTop = currentOffset;
+ } else if (currentOffset <= dropdown.scrollTop) {
+ dropdown.scrollTop = 0;
+ }
- return node.getAttribute('id');
+ }
- }
+ /**
+ * Get an id of the node
+ *
+ * @param {Object} node DOM element
+ * @returns {*}
+ */
+ function getId(node) {
- }
+ if (typeof node.getAttribute !== 'function') {
+ return null;
+ }
+ return node.getAttribute('id');
+ }
+ }
})();