Uiselect ie8 issues

Developer
Chris Hanson
Size
15,255 Kb
Views
18,216
  1. Uiselect ie8 issues Previews
  2. Uiselect ie8 issues HTML Codes
  3. Uiselect ie8 issues CSS Codes
  4. Uiselect ie8 issues JS Codes

How do I make an uiselect ie8 issues?

What is a uiselect ie8 issues? How do you make a uiselect ie8 issues? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.

Uiselect ie8 issues Previews
IQ Test

Uiselect ie8 issues - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>uiselect ie8 issues</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .ui-select-choices-row:hover { background: red !important; color: white !important;
}
.option.ui-select-choices-row-inner { padding: 0 !important;
}
.option.ui-select-choices-row-inner div { padding: 5px 8px;
}
/*! * ui-select * https://github.com/angular-ui/ui-select * Version: 0.7.0 - 2014-09-09T01:02:43.612Z * License: MIT */
/* Style when highlighting a search. */
.ui-select-highlight { font-weight: bold;
}
.ui-select-offscreen { clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; border: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: absolute !important; outline: 0 !important; left: 0px !important; top: 0px !important;
}
/* Select2 theme */
/* Mark invalid Select2 */
.ng-dirty.ng-invalid > a.select2-choice { border-color: #D44950;
}
.select2-result-single { padding-left: 0;
}
/* Selectize theme */
/* Helper class to show styles when focus */
.selectize-input.selectize-focus{ border-color: #007FBB !important;
}
/* Fix input width for Selectize theme */
.selectize-control > .selectize-input > input { width: 100%;
}
/* Fix dropdown width for Selectize theme */
.selectize-control > .selectize-dropdown { width: 100%;
}
/* Mark invalid Selectize */
.ng-dirty.ng-invalid > div.selectize-input { border-color: #D44950;
}
/* Bootstrap theme */
/* Helper class to show styles when focus */
.btn-default-focus { color: #333; background-color: #EBEBEB; border-color: #ADADAD; text-decoration: none; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* Fix Bootstrap dropdown position when inside a input-group */
.input-group > .ui-select-bootstrap.dropdown { /* Instead of relative */ position: static;
}
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control { border-radius: 4px; /* FIXME hardcoded value :-/ */ border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.ui-select-bootstrap > .ui-select-match { /* Instead of center because of .btn */ text-align: left;
}
.ui-select-bootstrap > .ui-select-match > .caret { position: absolute; top: 45%; right: 15px;
}
/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
.ui-select-bootstrap > .ui-select-choices { width: 100%; height: auto; max-height: 200px; overflow-x: hidden;
}
.ui-select-multiple.ui-select-bootstrap { height: auto; padding: .3em;
}
.ui-select-multiple.ui-select-bootstrap input.ui-select-search { background-color: transparent !important; /* To prevent double background when disabled */ border: none; outline: none; height: 1.666666em;
}
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close { font-size: 1.6em; line-height: 0.75;
}
.ui-select-bootstrap .ui-select-choices-row>a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap;
}
.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5;
}
.ui-select-bootstrap .ui-select-choices-row.active>a { color: #fff; text-decoration: none; outline: 0; background-color: #428bca;
}
/* fix hide/show angular animation */
.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add { display: none !important;
}
/* Mark invalid Bootstrap */
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match { border-color: #D44950;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- IE8 support, see AngularJS Internet Explorer Compatibility https://docs.angularjs.org/guide/ie For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim --> <!--[if lt IE 9]> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script> <script> document.createElement('ui-select'); document.createElement('ui-select-match'); document.createElement('ui-select-choices'); document.createElement('my-test-directive'); </script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.js"></script>
<div ng-app="demo" ng-controller="DemoCtrl"> <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button> <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button> <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button> <my-test-directive> </my-test-directive>
</div> <script src="js/index.js"></script>
</body>
</html>

Uiselect ie8 issues - Script Codes CSS Codes

.ui-select-choices-row:hover { background: red !important; color: white !important;
}
.option.ui-select-choices-row-inner { padding: 0 !important;
}
.option.ui-select-choices-row-inner div { padding: 5px 8px;
}
/*! * ui-select * https://github.com/angular-ui/ui-select * Version: 0.7.0 - 2014-09-09T01:02:43.612Z * License: MIT */
/* Style when highlighting a search. */
.ui-select-highlight { font-weight: bold;
}
.ui-select-offscreen { clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; border: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: absolute !important; outline: 0 !important; left: 0px !important; top: 0px !important;
}
/* Select2 theme */
/* Mark invalid Select2 */
.ng-dirty.ng-invalid > a.select2-choice { border-color: #D44950;
}
.select2-result-single { padding-left: 0;
}
/* Selectize theme */
/* Helper class to show styles when focus */
.selectize-input.selectize-focus{ border-color: #007FBB !important;
}
/* Fix input width for Selectize theme */
.selectize-control > .selectize-input > input { width: 100%;
}
/* Fix dropdown width for Selectize theme */
.selectize-control > .selectize-dropdown { width: 100%;
}
/* Mark invalid Selectize */
.ng-dirty.ng-invalid > div.selectize-input { border-color: #D44950;
}
/* Bootstrap theme */
/* Helper class to show styles when focus */
.btn-default-focus { color: #333; background-color: #EBEBEB; border-color: #ADADAD; text-decoration: none; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* Fix Bootstrap dropdown position when inside a input-group */
.input-group > .ui-select-bootstrap.dropdown { /* Instead of relative */ position: static;
}
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control { border-radius: 4px; /* FIXME hardcoded value :-/ */ border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.ui-select-bootstrap > .ui-select-match { /* Instead of center because of .btn */ text-align: left;
}
.ui-select-bootstrap > .ui-select-match > .caret { position: absolute; top: 45%; right: 15px;
}
/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
.ui-select-bootstrap > .ui-select-choices { width: 100%; height: auto; max-height: 200px; overflow-x: hidden;
}
.ui-select-multiple.ui-select-bootstrap { height: auto; padding: .3em;
}
.ui-select-multiple.ui-select-bootstrap input.ui-select-search { background-color: transparent !important; /* To prevent double background when disabled */ border: none; outline: none; height: 1.666666em;
}
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close { font-size: 1.6em; line-height: 0.75;
}
.ui-select-bootstrap .ui-select-choices-row>a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap;
}
.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5;
}
.ui-select-bootstrap .ui-select-choices-row.active>a { color: #fff; text-decoration: none; outline: 0; background-color: #428bca;
}
/* fix hide/show angular animation */
.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add { display: none !important;
}
/* Mark invalid Bootstrap */
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match { border-color: #D44950;
}

Uiselect ie8 issues - Script Codes JS Codes

'use strict';
var app = angular.module('demo', ['ngSanitize', 'ui.select']);
var tmpl="";
tmpl += "<div>";
tmpl += " <h3>Selectize theme<\/h3> ";
tmpl += " <p>Selected: {{country.selected}}<\/p>";
tmpl += " <ui-select ng-model=\"country.selected\" theme=\"selectize\" ng-disabled=\"disabled\" style=\"width: 300px;\">";
tmpl += " <ui-select-match placeholder=\"Select or search a country in the list...\">{{$select.selected.name}}<\/ui-select-match>";
tmpl += " <ui-select-choices repeat=\"country in countries | filter: $select.search\">";
tmpl += " <div ng-click=\"selItem($select, $event, country)\" ng-mouseenter=\"$event.stopPropagation()\">";
tmpl += " <span ng-bind-html=\"country.name | highlight: $select.search\"><\/span>";
tmpl += " <small ng-bind-html=\"country.code | highlight: $select.search\"><\/small>";
tmpl += " <\/div>";
tmpl += " <\/ui-select-choices>";
tmpl += " <\/ui-select>";
tmpl += "<\/div>";
app.directive('myTestDirective', function () { return { restrict: 'E', link: function () { }, template: tmpl }
});
/** * AngularJS default filter with the following expression: * "person in people | filter: {name: $select.search, age: $select.search}" * performs a AND between 'name: $select.search' and 'age: $select.search'. * We want to perform a OR. */
app.filter('propsFilter', function() { return function(items, props) { var out = []; if (angular.isArray(items)) { items.forEach(function(item) { var itemMatches = false; var keys = Object.keys(props); for (var i = 0; i < keys.length; i++) { var prop = keys[i]; var text = props[prop].toLowerCase(); if (item[prop].toString().toLowerCase().indexOf(text) !== -1) { itemMatches = true; break; } } if (itemMatches) { out.push(item); } }); } else { // Let the output be the input untouched out = items; } return out; }
});
app.controller('DemoCtrl', function($scope, $http) { $scope.selItem = function ($select, e, item) { e.stopPropagation(); console.log(item); $select.select(item); }; $scope.disabled = undefined; $scope.enable = function() { $scope.disabled = false; }; $scope.disable = function() { $scope.disabled = true; }; $scope.clear = function() { $scope.person.selected = undefined; $scope.address.selected = undefined; $scope.country.selected = undefined; }; $scope.person = {}; $scope.people = [ { name: 'Adam', email: '[email protected]', age: 10 }, { name: 'Amalie', email: '[email protected]', age: 12 }, { name: 'Wladimir', email: '[email protected]', age: 30 }, { name: 'Samantha', email: '[email protected]', age: 31 }, { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 }, { name: 'Natasha', email: '[email protected]', age: 54 }, { name: 'Nicole', email: '[email protected]', age: 43 }, { name: 'Adrian', email: '[email protected]', age: 21 } ]; $scope.address = {}; $scope.refreshAddresses = function(address) { var params = {address: address, sensor: false}; return $http.get( 'https://maps.googleapis.com/maps/api/geocode/json', {params: params} ).then(function(response) { $scope.addresses = response.data.results }); }; $scope.country = {}; $scope.countries = [ // Taken from https://gist.github.com/unceus/6501985 {name: 'Afghanistan', code: 'AF'}, {name: 'Åland Islands', code: 'AX'}, {name: 'Albania', code: 'AL'}, {name: 'Algeria', code: 'DZ'}, {name: 'American Samoa', code: 'AS'}, {name: 'Andorra', code: 'AD'} ];
});
/*! * ui-select * https://github.com/angular-ui/ui-select * Version: 0.7.0 - 2014-09-09T01:02:43.608Z * License: MIT */
(function () { "use strict"; var KEY = { TAB: 9, ENTER: 13, ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, SHIFT: 16, CTRL: 17, ALT: 18, PAGE_UP: 33, PAGE_DOWN: 34, HOME: 36, END: 35, BACKSPACE: 8, DELETE: 46, isControl: function (e) { var k = e.which; switch (k) { case KEY.SHIFT: case KEY.CTRL: case KEY.ALT: return true; } if (e.metaKey) return true; return false; }, isFunctionKey: function (k) { k = k.which ? k.which : k; return k >= 112 && k <= 123; }, isVerticalMovement: function (k){ return ~[KEY.UP, KEY.DOWN].indexOf(k); }, isHorizontalMovement: function (k){ return ~[KEY.LEFT,KEY.RIGHT,KEY.BACKSPACE,KEY.DELETE].indexOf(k); } }; /** * Add querySelectorAll() to jqLite. * * jqLite find() is limited to lookups by tag name. * TODO This will change with future versions of AngularJS, to be removed when this happens * * See jqLite.find - why not use querySelectorAll? https://github.com/angular/angular.js/issues/3586 * See feat(jqLite): use querySelectorAll instead of getElementsByTagName in jqLite.find https://github.com/angular/angular.js/pull/3598 */ if (angular.element.prototype.querySelectorAll === undefined) { angular.element.prototype.querySelectorAll = function(selector) { return angular.element(this[0].querySelectorAll(selector)); }; } angular.module('ui.select', []) .constant('uiSelectConfig', { theme: 'bootstrap', searchEnabled: true, placeholder: '', // Empty by default, like HTML tag <select> refreshDelay: 1000 // In milliseconds }) // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913 .service('uiSelectMinErr', function() { var minErr = angular.$$minErr('ui.select'); return function() { var error = minErr.apply(this, arguments); var message = error.message.replace(new RegExp('\nhttps://errors.angularjs.org/.*'), ''); return new Error(message); }; }) /** * Parses "repeat" attribute. * * Taken from AngularJS ngRepeat source code * See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L211 * * Original discussion about parsing "repeat" attribute instead of fully relying on ng-repeat: * https://github.com/angular-ui/ui-select/commit/5dd63ad#commitcomment-5504697 */ .service('RepeatParser', ['uiSelectMinErr','$parse', function(uiSelectMinErr, $parse) { var self = this; /** * Example: * expression = "address in addresses | filter: {street: $select.search} track by $index" * itemName = "address", * source = "addresses | filter: {street: $select.search}", * trackByExp = "$index", */ self.parse = function(expression) { var match = expression.match(/^\s*(?:([\s\S]+?)\s+as\s+)?([\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/); if (!match) { throw uiSelectMinErr('iexp', "Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '{0}'.", expression); } return { itemName: match[2], // (lhs) Left-hand side, source: $parse(match[3]), trackByExp: match[4], modelMapper: $parse(match[1] || match[2]) }; }; self.getGroupNgRepeatExpression = function() { return '$group in $select.groups'; }; self.getNgRepeatExpression = function(itemName, source, trackByExp, grouped) { var expression = itemName + ' in ' + (grouped ? '$group.items' : source); if (trackByExp) { expression += ' track by ' + trackByExp; } return expression; }; }]) /** * Contains ui-select "intelligence". * * The goal is to limit dependency on the DOM whenever possible and * put as much logic in the controller (instead of the link functions) as possible so it can be easily tested. */ .controller('uiSelectCtrl', ['$scope', '$element', '$timeout', 'RepeatParser', 'uiSelectMinErr', function($scope, $element, $timeout, RepeatParser, uiSelectMinErr) { var ctrl = this; var EMPTY_SEARCH = ''; ctrl.placeholder = undefined; ctrl.search = EMPTY_SEARCH; ctrl.activeIndex = 0; ctrl.activeMatchIndex = -1; ctrl.items = []; ctrl.selected = undefined; ctrl.open = false; ctrl.focus = false; ctrl.focusser = undefined; //Reference to input element used to handle focus events ctrl.disabled = undefined; // Initialized inside uiSelect directive link function ctrl.searchEnabled = undefined; // Initialized inside uiSelect directive link function ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function ctrl.multiple = false; // Initialized inside uiSelect directive link function ctrl.isEmpty = function() { return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === ''; }; var _searchInput = $element.querySelectorAll('input.ui-select-search'); if (_searchInput.length !== 1) { throw uiSelectMinErr('searchInput', "Expected 1 input.ui-select-search but got '{0}'.", _searchInput.length); } // Most of the time the user does not want to empty the search input when in typeahead mode function _resetSearchInput() { if (ctrl.resetSearchInput) { ctrl.search = EMPTY_SEARCH; //reset activeIndex if (ctrl.selected && ctrl.items.length && !ctrl.multiple) { ctrl.activeIndex = ctrl.items.indexOf(ctrl.selected); } } } // When the user clicks on ui-select, displays the dropdown list ctrl.activate = function(initSearchValue, avoidReset) { if (!ctrl.disabled && !ctrl.open) { if(!avoidReset) _resetSearchInput(); ctrl.open = true; ctrl.activeMatchIndex = -1; ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex; // Give it time to appear before focus $timeout(function() { ctrl.search = initSearchValue || ctrl.search; _searchInput[0].focus(); }); } }; ctrl.findGroupByName = function(name) { return ctrl.groups && ctrl.groups.filter(function(group) { return group.name === name; })[0]; }; ctrl.parseRepeatAttr = function(repeatAttr, groupByExp) { function updateGroups(items) { ctrl.groups = []; angular.forEach(items, function(item) { var groupFn = $scope.$eval(groupByExp); var groupName = angular.isFunction(groupFn) ? groupFn(item) : item[groupFn]; var group = ctrl.findGroupByName(groupName); if(group) { group.items.push(item); } else { ctrl.groups.push({name: groupName, items: [item]}); } }); ctrl.items = []; ctrl.groups.forEach(function(group) { ctrl.items = ctrl.items.concat(group.items); }); } function setPlainItems(items) { ctrl.items = items; } var setItemsFn = groupByExp ? updateGroups : setPlainItems; ctrl.parserResult = RepeatParser.parse(repeatAttr); ctrl.isGrouped = !!groupByExp; ctrl.itemProperty = ctrl.parserResult.itemName; // See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259 $scope.$watchCollection(ctrl.parserResult.source, function(items) { if (items === undefined || items === null) { // If the user specifies undefined or null => reset the collection // Special case: items can be undefined if the user did not initialized the collection on the scope // i.e $scope.addresses = [] is missing ctrl.items = []; } else { if (!angular.isArray(items)) { throw uiSelectMinErr('items', "Expected an array but got '{0}'.", items); } else { if (ctrl.multiple){ //Remove already selected items (ex: while searching) var filteredItems = items.filter(function(i) {return ctrl.selected.indexOf(i) < 0;}); setItemsFn(filteredItems); }else{ setItemsFn(items); } ctrl.ngModel.$modelValue = null; //Force scope model value and ngModel value to be out of sync to re-run formatters } } }); if (ctrl.multiple){ //Remove already selected items $scope.$watchCollection('$select.selected', function(selectedItems){ if (!selectedItems) return; var data = ctrl.parserResult.source($scope); var filteredItems = data.filter(function(i) {return selectedItems.indexOf(i) < 0;}); setItemsFn(filteredItems); }); } }; var _refreshDelayPromise; /** * Typeahead mode: lets the user refresh the collection using his own function. * * See Expose $select.search for external / remote filtering https://github.com/angular-ui/ui-select/pull/31 */ ctrl.refresh = function(refreshAttr) { if (refreshAttr !== undefined) { // Debounce // See https://github.com/angular-ui/bootstrap/blob/0.10.0/src/typeahead/typeahead.js#L155 // FYI AngularStrap typeahead does not have debouncing: https://github.com/mgcrea/angular-strap/blob/v2.0.0-rc.4/src/typeahead/typeahead.js#L177 if (_refreshDelayPromise) { $timeout.cancel(_refreshDelayPromise); } _refreshDelayPromise = $timeout(function() { $scope.$eval(refreshAttr); }, ctrl.refreshDelay); } }; ctrl.setActiveItem = function(itemScope) { console.log(itemScope); ctrl.activeIndex = ctrl.items.indexOf(itemScope[ctrl.itemProperty]); }; ctrl.isActive = function(itemScope) { return ctrl.items.indexOf(itemScope[ctrl.itemProperty]) === ctrl.activeIndex; }; // When the user clicks on an item inside the dropdown ctrl.select = function(item) { var locals = {}; locals[ctrl.parserResult.itemName] = item; ctrl.onSelectCallback($scope, { $item: item, $model: ctrl.parserResult.modelMapper($scope, locals) }); if(ctrl.multiple){ ctrl.selected.push(item); ctrl.sizeSearchInput(); } else { ctrl.selected = item; } ctrl.close(); }; // Closes the dropdown ctrl.close = function() { if (ctrl.open) { _resetSearchInput(); ctrl.open = false; $timeout(function(){ ctrl.focusser[0].focus(); },0,false); } }; // Remove item from multiple select ctrl.removeChoice = function(index){ ctrl.selected.splice(index, 1); ctrl.activeMatchIndex = -1; ctrl.sizeSearchInput(); }; ctrl.getPlaceholder = function(){ //Refactor single? if(ctrl.multiple && ctrl.selected.length) return; return ctrl.placeholder; }; ctrl.sizeSearchInput = function(){ var input = _searchInput[0], container = _searchInput.parent().parent()[0]; _searchInput.css('width','10px'); $timeout(function(){ var newWidth = container.clientWidth - input.offsetLeft - 10; if(newWidth < 50) newWidth = container.clientWidth; _searchInput.css('width',newWidth+'px'); }, 0, false); }; function _handleDropDownSelection(key) { var processed = true; switch (key) { case KEY.DOWN: if (!ctrl.open && ctrl.multiple) ctrl.activate(false, true); //In case its the search input in 'multiple' mode else if (ctrl.activeIndex < ctrl.items.length - 1) { ctrl.activeIndex++; } break; case KEY.UP: if (!ctrl.open && ctrl.multiple) ctrl.activate(false, true); //In case its the search input in 'multiple' mode else if (ctrl.activeIndex > 0) { ctrl.activeIndex--; } break; case KEY.TAB: //TODO: Que hacemos en modo multiple? if (!ctrl.multiple) ctrl.select(ctrl.items[ctrl.activeIndex]); break; case KEY.ENTER: if(ctrl.open){ ctrl.select(ctrl.items[ctrl.activeIndex]); } else { ctrl.activate(false, true); //In case its the search input in 'multiple' mode } break; case KEY.ESC: ctrl.close(); break; default: processed = false; } return processed; } // Handles selected options in "multiple" mode function _handleMatchSelection(key){ var caretPosition = _getCaretPosition(_searchInput[0]), length = ctrl.selected.length, // none = -1, first = 0, last = length-1, curr = ctrl.activeMatchIndex, next = ctrl.activeMatchIndex+1, prev = ctrl.activeMatchIndex-1, newIndex = curr; if(caretPosition > 0 || (ctrl.search.length && key == KEY.RIGHT)) return false; ctrl.close(); function getNewActiveMatchIndex(){ switch(key){ case KEY.LEFT: // Select previous/first item if(~ctrl.activeMatchIndex) return prev; // Select last item else return last; break; case KEY.RIGHT: // Open drop-down if(!~ctrl.activeMatchIndex || curr === last){ ctrl.activate(); return false; } // Select next/last item else return next; break; case KEY.BACKSPACE: // Remove selected item and select previous/first if(~ctrl.activeMatchIndex){ ctrl.removeChoice(curr); return prev; } // Select last item else return last; break; case KEY.DELETE: // Remove selected item and select next item if(~ctrl.activeMatchIndex){ ctrl.removeChoice(ctrl.activeMatchIndex); return curr; } else return false; } } newIndex = getNewActiveMatchIndex(); if(!ctrl.selected.length || newIndex === false) ctrl.activeMatchIndex = -1; else ctrl.activeMatchIndex = Math.min(last,Math.max(first,newIndex)); return true; } // Bind to keyboard shortcuts _searchInput.on('keydown', function(e) { var key = e.which; // if(~[KEY.ESC,KEY.TAB].indexOf(key)){ // //TODO: SEGURO? // ctrl.close(); // } $scope.$apply(function() { var processed = false; if(ctrl.multiple && KEY.isHorizontalMovement(key)){ processed = _handleMatchSelection(key); } if (!processed && ctrl.items.length > 0) { processed = _handleDropDownSelection(key); } if (processed && key != KEY.TAB) { //TODO Check si el tab selecciona aun correctamente //Crear test e.preventDefault(); e.stopPropagation(); } }); if(KEY.isVerticalMovement(key) && ctrl.items.length > 0){ _ensureHighlightVisible(); } }); _searchInput.on('blur', function() { $timeout(function() { ctrl.activeMatchIndex = -1; ctrl.activeIndex = 0; }); }); function _getCaretPosition(el) { if(angular.isNumber(el.selectionStart)) return el.selectionStart; // selectionStart is not supported in IE8 and we don't want hacky workarounds so we compromise else return el.value.length; } // See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431 function _ensureHighlightVisible() { var container = $element.querySelectorAll('.ui-select-choices-content'); var choices = container.querySelectorAll('.ui-select-choices-row'); if (choices.length < 1) { throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length); } var highlighted = choices[ctrl.activeIndex]; var posY = highlighted.offsetTop + highlighted.clientHeight - container[0].scrollTop; var height = container[0].offsetHeight; if (posY > height) { container[0].scrollTop += posY - height; } else if (posY < highlighted.clientHeight) { if (ctrl.isGrouped && ctrl.activeIndex === 0) container[0].scrollTop = 0; //To make group header visible when going all the way up else container[0].scrollTop -= highlighted.clientHeight - posY; } } $scope.$on('$destroy', function() { _searchInput.off('keydown blur'); }); }]) .directive('uiSelect', ['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse', function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse) { return { restrict: 'EA', templateUrl: function(tElement, tAttrs) { var theme = tAttrs.theme || uiSelectConfig.theme; return theme + (angular.isDefined(tAttrs.multiple) ? '/select-multiple.tpl.html' : '/select.tpl.html'); }, replace: true, transclude: true, require: ['uiSelect', 'ngModel'], scope: true, controller: 'uiSelectCtrl', controllerAs: '$select', link: function(scope, element, attrs, ctrls, transcludeFn) { var $select = ctrls[0]; var ngModel = ctrls[1]; $select.multiple = angular.isDefined(attrs.multiple); $select.onSelectCallback = $parse(attrs.onSelect); //From view --> model ngModel.$parsers.unshift(function (inputValue) { var locals = {}, result; if ($select.multiple){ var resultMultiple = []; for (var j = inputValue.length - 1; j >= 0; j--) { locals = {}; locals[$select.parserResult.itemName] = inputValue[j]; result = $select.parserResult.modelMapper(scope, locals); resultMultiple.unshift(result); } return resultMultiple; }else{ locals = {}; locals[$select.parserResult.itemName] = inputValue; result = $select.parserResult.modelMapper(scope, locals); return result; } }); //From model --> view ngModel.$formatters.unshift(function (inputValue) { var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search locals = {}, result; if (data){ if ($select.multiple){ var resultMultiple = []; var checkFnMultiple = function(list, value){ if (!list || !list.length) return; for (var p = list.length - 1; p >= 0; p--) { locals[$select.parserResult.itemName] = list[p]; result = $select.parserResult.modelMapper(scope, locals); if (result == value){ resultMultiple.unshift(list[p]); return true; } } return false; }; if (!inputValue) return resultMultiple; //If ngModel was undefined for (var k = inputValue.length - 1; k >= 0; k--) { if (!checkFnMultiple($select.selected, inputValue[k])){ checkFnMultiple(data, inputValue[k]); } } return resultMultiple; }else{ var checkFnSingle = function(d){ locals[$select.parserResult.itemName] = d; result = $select.parserResult.modelMapper(scope, locals); return result == inputValue; }; //If possible pass same object stored in $select.selected if ($select.selected && checkFnSingle($select.selected)) { return $select.selected; } for (var i = data.length - 1; i >= 0; i--) { if (checkFnSingle(data[i])) return data[i]; } } } return inputValue; }); //Set reference to ngModel from uiSelectCtrl $select.ngModel = ngModel; //Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954 var focusser = angular.element("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />"); $compile(focusser)(scope); $select.focusser = focusser; if (!$select.multiple){ element.append(focusser); focusser.bind("focus", function(){ scope.$evalAsync(function(){ $select.focus = true; }); }); focusser.bind("blur", function(){ scope.$evalAsync(function(){ $select.focus = false; }); }); focusser.bind("keydown", function(e){ if (e.which === KEY.BACKSPACE) { e.preventDefault(); e.stopPropagation(); $select.select(undefined); scope.$digest(); return; } if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) { return; } if (e.which == KEY.DOWN || e.which == KEY.UP || e.which == KEY.ENTER || e.which == KEY.SPACE){ e.preventDefault(); e.stopPropagation(); $select.activate(); } scope.$digest(); }); focusser.bind("keyup input", function(e){ if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC || e.which == KEY.ENTER || e.which === KEY.BACKSPACE) { return; } $select.activate(focusser.val()); //User pressed some regular key, so we pass it to the search input focusser.val(''); scope.$digest(); }); } scope.$watch('searchEnabled', function() { var searchEnabled = scope.$eval(attrs.searchEnabled); $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : true; }); attrs.$observe('disabled', function() { // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false; }); attrs.$observe('resetSearchInput', function() { // $eval() is needed otherwise we get a string instead of a boolean var resetSearchInput = scope.$eval(attrs.resetSearchInput); $select.resetSearchInput = resetSearchInput !== undefined ? resetSearchInput : true; }); if ($select.multiple){ scope.$watchCollection('$select.selected', function(newValue) { //On v1.2.19 the 2nd and 3rd parameteres are ignored //On v1.3.0-beta+ 3rd parameter (revalidate) is true, to force $parsers to recreate model ngModel.$setViewValue(newValue, null, true); }); focusser.prop('disabled', true); //Focusser isn't needed if multiple }else{ scope.$watch('$select.selected', function(newValue) { if (ngModel.$viewValue !== newValue) { ngModel.$setViewValue(newValue); } }); } ngModel.$render = function() { if($select.multiple){ // Make sure that model value is array if(!angular.isArray(ngModel.$viewValue)){ // Have tolerance for null or undefined values if(angular.isUndefined(ngModel.$viewValue) || ngModel.$viewValue === null){ $select.selected = []; } else { throw uiSelectMinErr('multiarr', "Expected model value to be array but got '{0}'", ngModel.$viewValue); } } } $select.selected = ngModel.$viewValue; }; function onDocumentClick(e) { var contains = false; if (window.jQuery) { // Firefox 3.6 does not support element.contains() // See Node.contains https://developer.mozilla.org/en-US/docs/Web/API/Node.contains contains = window.jQuery.contains(element[0], e.target); } else { contains = element[0].contains(e.target); } if (!contains) { $select.close(); scope.$digest(); } } // See Click everywhere but here event http://stackoverflow.com/questions/12931369 $document.on('click', onDocumentClick); scope.$on('$destroy', function() { $document.off('click', onDocumentClick); }); // Move transcluded elements to their correct position in main template transcludeFn(scope, function(clone) { // See Transclude in AngularJS http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html // One day jqLite will be replaced by jQuery and we will be able to write: // var transcludedElement = clone.filter('.my-class') // instead of creating a hackish DOM element: var transcluded = angular.element('<div>').append(clone); var transcludedMatch = transcluded.querySelectorAll('.ui-select-match'); transcludedMatch.removeAttr('ui-select-match'); //To avoid loop in case directive as attr if (transcludedMatch.length !== 1) { throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length); } element.querySelectorAll('.ui-select-match').replaceWith(transcludedMatch); var transcludedChoices = transcluded.querySelectorAll('.ui-select-choices'); transcludedChoices.removeAttr('ui-select-choices'); //To avoid loop in case directive as attr if (transcludedChoices.length !== 1) { throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length); } element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices); }); } }; }]) .directive('uiSelectChoices', ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', '$compile', function(uiSelectConfig, RepeatParser, uiSelectMinErr, $compile) { return { restrict: 'EA', require: '^uiSelect', replace: true, transclude: true, templateUrl: function(tElement) { // Gets theme attribute from parent (ui-select) var theme = tElement.parent().attr('theme') || uiSelectConfig.theme; return theme + '/choices.tpl.html'; }, compile: function(tElement, tAttrs) { if (!tAttrs.repeat) throw uiSelectMinErr('repeat', "Expected 'repeat' expression."); return function link(scope, element, attrs, $select, transcludeFn) { // var repeat = RepeatParser.parse(attrs.repeat); var groupByExp = attrs.groupBy; $select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult if(groupByExp) { var groups = element.querySelectorAll('.ui-select-choices-group'); if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length); groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression()); } var choices = element.querySelectorAll('.ui-select-choices-row'); if (choices.length !== 1) { throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", choices.length); } choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp)); var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner'); if (rowsInner.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length); rowsInner.attr('uis-transclude-append', ''); //Adding uisTranscludeAppend directive to row element after choices element has ngRepeat $compile(element, transcludeFn)(scope); //Passing current transcludeFn to be able to append elements correctly from uisTranscludeAppend scope.$watch('$select.search', function(newValue) { if(newValue && !$select.open && $select.multiple) $select.activate(false, true); $select.activeIndex = 0; $select.refresh(attrs.refresh); }); attrs.$observe('refreshDelay', function() { // $eval() is needed otherwise we get a string instead of a number var refreshDelay = scope.$eval(attrs.refreshDelay); $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay; }); }; } }; }]) // Recreates old behavior of ng-transclude. Used internally. .directive('uisTranscludeAppend', function () { return { link: function (scope, element, attrs, ctrl, transclude) { transclude(scope, function (clone) { element.append(clone); }); } }; }) .directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) { return { restrict: 'EA', require: '^uiSelect', replace: true, transclude: true, templateUrl: function(tElement) { // Gets theme attribute from parent (ui-select) var theme = tElement.parent().attr('theme') || uiSelectConfig.theme; var multi = tElement.parent().attr('multiple'); return theme + (multi ? '/match-multiple.tpl.html' : '/match.tpl.html'); }, link: function(scope, element, attrs, $select) { attrs.$observe('placeholder', function(placeholder) { $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder; }); if($select.multiple){ $select.sizeSearchInput(); } } }; }]) /** * Highlights text that matches $select.search. * * Taken from AngularUI Bootstrap Typeahead * See https://github.com/angular-ui/bootstrap/blob/0.10.0/src/typeahead/typeahead.js#L340 */ .filter('highlight', function() { function escapeRegexp(queryToEscape) { return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); } return function(matchItem, query) { return query && matchItem ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class="ui-select-highlight">$&</span>') : matchItem; }; });
}());
angular.module("ui.select").run(["$templateCache", function($templateCache) {$templateCache.put("bootstrap/choices.tpl.html","<ul class=\"ui-select-choices ui-select-choices-content dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\" ng-show=\"$select.items.length > 0\"><li class=\"ui-select-choices-group\"><div class=\"divider\" ng-show=\"$select.isGrouped && $index > 0\"></div><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label dropdown-header\">{{$group.name}}</div><div class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this)}\"><a href=\"javascript:void(0)\" class=\"ui-select-choices-row-inner\"></a></div></li></ul>");
$templateCache.put("bootstrap/match-multiple.tpl.html","<span class=\"ui-select-match\"><span ng-repeat=\"$item in $select.selected\"><button style=\"margin-right: 3px;\" class=\"ui-select-match-item btn btn-default btn-xs\" tabindex=\"-1\" ng-disabled=\"$select.disabled\" ng-click=\"$select.activeMatchIndex = $index;\" ng-class=\"{\'btn-primary\':$select.activeMatchIndex === $index}\"><span class=\"close ui-select-match-close\" ng-hide=\"$select.disabled\" ng-click=\"$select.removeChoice($index)\">&nbsp;&times;</span> <span uis-transclude-append=\"\"></span></button></span></span>");
$templateCache.put("bootstrap/match.tpl.html","<button type=\"button\" class=\"btn btn-default form-control ui-select-match\" tabindex=\"-1\" ng-hide=\"$select.open\" ng-disabled=\"$select.disabled\" ng-class=\"{\'btn-default-focus\':$select.focus}\" ;=\"\" ng-click=\"$select.activate()\"><span ng-show=\"$select.searchEnabled && $select.isEmpty()\" class=\"text-muted\">{{$select.placeholder}}</span> <span ng-hide=\"$select.isEmpty()\" ng-transclude=\"\"></span> <span class=\"caret\"></span></button>");
$templateCache.put("bootstrap/select-multiple.tpl.html","<div class=\"ui-select-multiple ui-select-bootstrap dropdown form-control\" ng-class=\"{open: $select.open}\"><div><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search input-xs\" placeholder=\"{{$select.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-click=\"$select.activate()\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div>");
$templateCache.put("bootstrap/select.tpl.html","<div class=\"ui-select-bootstrap dropdown\" ng-class=\"{open: $select.open}\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"form-control ui-select-search\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-show=\"$select.searchEnabled && $select.open\"><div class=\"ui-select-choices\"></div></div>");
$templateCache.put("select2/choices.tpl.html","<ul class=\"ui-select-choices ui-select-choices-content select2-results\"><li class=\"ui-select-choices-group\" ng-class=\"{\'select2-result-with-children\': $select.isGrouped}\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label select2-result-label\">{{$group.name}}</div><ul ng-class=\"{\'select2-result-sub\': $select.isGrouped, \'select2-result-single\': !$select.isGrouped}\"><li class=\"ui-select-choices-row\" ng-class=\"{\'select2-highlighted\': $select.isActive(this)}\"><div class=\"select2-result-label ui-select-choices-row-inner\"></div></li></ul></li></ul>");
$templateCache.put("select2/match-multiple.tpl.html","<span class=\"ui-select-match\"><li class=\"ui-select-match-item select2-search-choice\" ng-repeat=\"$item in $select.selected\" ng-class=\"{\'select2-search-choice-focus\':$select.activeMatchIndex === $index}\"><span uis-transclude-append=\"\"></span> <a href=\"#\" class=\"ui-select-match-close select2-search-choice-close\" ng-click=\"$select.removeChoice($index)\" tabindex=\"-1\"></a></li></span>");
$templateCache.put("select2/match.tpl.html","<a class=\"select2-choice ui-select-match\" ng-class=\"{\'select2-default\': $select.isEmpty()}\" ng-click=\"$select.activate()\"><span ng-show=\"$select.searchEnabled && $select.isEmpty()\" class=\"select2-chosen\">{{$select.placeholder}}</span> <span ng-hide=\"$select.isEmpty()\" class=\"select2-chosen\" ng-transclude=\"\"></span> <span class=\"select2-arrow\"><b></b></span></a>");
$templateCache.put("select2/select-multiple.tpl.html","<div class=\"ui-select-multiple select2 select2-container select2-container-multi\" ng-class=\"{\'select2-container-active select2-dropdown-open\': $select.open,\n \'select2-container-disabled\': $select.disabled}\"><ul class=\"select2-choices\"><span class=\"ui-select-match\"></span><li class=\"select2-search-field\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"select2-input ui-select-search\" placeholder=\"{{$select.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-model=\"$select.search\" ng-click=\"$select.activate()\" style=\"width: 34px;\"></li></ul><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"ui-select-choices\"></div></div></div>");
$templateCache.put("select2/select.tpl.html","<div class=\"select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open\': $select.open,\n \'select2-container-disabled\': $select.disabled,\n \'select2-container-active\': $select.focus }\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>");
$templateCache.put("selectize/choices.tpl.html","<div ng-show=\"$select.open\" class=\"ui-select-choices selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\">{{$group.name}}</div><div class=\"ui-select-choices-row\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>");
$templateCache.put("selectize/match.tpl.html","<div ng-hide=\"$select.searchEnabled && ($select.open || $select.isEmpty())\" class=\"ui-select-match\" ng-transclude=\"\"></div>");
$templateCache.put("selectize/select.tpl.html","<div class=\"selectize-control single\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\"></div><div class=\"ui-select-choices\"></div></div>");}]);
Uiselect ie8 issues - Script Codes
Uiselect ie8 issues - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded October 01, 2022
Rating 3
Size 15,255 Kb
Views 18,216
Do you need developer help for Uiselect ie8 issues?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Hanson (chrishanson) Script Codes
Name
Nested rotating shapes
Rotating 3d cube
Ui-select with tree navigation
Css spinner
Fireworks
Particle Emitter
Search bar
Hello World
UI Select Multiselect
Lf layout
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!