From 203dc57db8075e3a640d90809683e83cdb23d2f0 Mon Sep 17 00:00:00 2001 From: GLaw Date: Fri, 16 Jun 2017 18:58:53 +0200 Subject: [PATCH] Fixed minification issues --- src/angular-selectbox.js | 904 +++++++++++++++++++-------------------- 1 file changed, 451 insertions(+), 453 deletions(-) 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', - '
' + - ' ' + - ' {{ vm.selected[vm.labelKey] || vm.value || vm.title }}' + - ' ' + - ' ' + - '
'); - - $templateCache.put('selectbox-multi.html', - '
' + - ' ' + - ' {{ vm.title }}{{ vm.values.length ? (\': \' + vm.values.length) : vm.title }}' + - ' ' + - ' ' + - '
'); - } - - /** @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', + '
' + + ' ' + + ' {{ vm.selected[vm.labelKey] || vm.value || vm.title }}' + + ' ' + + ' ' + + '
'); + + $templateCache.put('selectbox-multi.html', + '
' + + ' ' + + ' {{ vm.title }}{{ vm.displayLength ? (vm.values.length ? (\': \' + vm.values.length) : vm.title) : \'\' }}' + + ' ' + + ' ' + + '
'); + } - 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'); + } + } })();