Skip to content

Commit 4718c24

Browse files
erikdubbelboerDaniel Grippi
erikdubbelboer
authored and
Daniel Grippi
committed
Add proper paste support
Add paste="expression" to allow custom paste handling. Allow pasting in tagging mode when the tagging function is not defined. In IE use window.clipboardData so jQuery is not required. Fixes angular-ui#910, angular-ui#704, angular-ui#789, angular-ui#848, angular-ui#429 (cherry picked from commit 5b852b3)
1 parent 12b1cf2 commit 4718c24

File tree

7 files changed

+143
-89
lines changed

7 files changed

+143
-89
lines changed

‎dist/select.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.12.1 - 2015-11-02T22:37:52.574Z
4+
* Version: 0.12.1 - 2016-01-12T20:06:18.283Z
55
* License: MIT
66
*/
77

‎dist/select.js

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.12.1 - 2015-11-02T22:37:52.566Z
4+
* Version: 0.12.1 - 2016-01-12T20:06:18.276Z
55
* License: MIT
66
*/
77

@@ -252,6 +252,7 @@ uis.controller('uiSelectCtrl',
252252
ctrl.searchEnabled = uiSelectConfig.searchEnabled;
253253
ctrl.sortable = uiSelectConfig.sortable;
254254
ctrl.refreshDelay = uiSelectConfig.refreshDelay;
255+
ctrl.paste = uiSelectConfig.paste;
255256

256257
ctrl.removeSelected = false; //If selected item(s) should be removed from dropdown list
257258
ctrl.closeOnSelect = true; //Initialized inside uiSelect directive link function
@@ -500,7 +501,7 @@ uis.controller('uiSelectCtrl',
500501
// create new item on the fly if we don't already have one;
501502
// use tagging function if we have one
502503
if ( ctrl.tagging.fct !== undefined && typeof item === 'string' ) {
503-
item = ctrl.tagging.fct(ctrl.search);
504+
item = ctrl.tagging.fct(item);
504505
if (!item) return;
505506
// if item type is 'string', apply the tagging label
506507
} else if ( typeof item === 'string' ) {
@@ -712,18 +713,36 @@ uis.controller('uiSelectCtrl',
712713
}
713714
});
714715

715-
// If tagging try to split by tokens and add items
716716
ctrl.searchInput.on('paste', function (e) {
717-
var data = e.originalEvent.clipboardData.getData('text/plain');
718-
if (data && data.length > 0 && ctrl.taggingTokens.isActivated && ctrl.tagging.fct) {
719-
var items = data.split(ctrl.taggingTokens.tokens[0]); // split by first token only
720-
if (items && items.length > 0) {
721-
angular.forEach(items, function (item) {
722-
var newItem = ctrl.tagging.fct(item);
723-
if (newItem) {
724-
ctrl.select(newItem, true);
725-
}
726-
});
717+
var data;
718+
719+
if (window.clipboardData && window.clipboardData.getData) { // IE
720+
data = window.clipboardData.getData('Text');
721+
} else {
722+
data = (e.originalEvent || e).clipboardData.getData('text/plain');
723+
}
724+
725+
// Prepend the current input field text to the paste buffer.
726+
data = ctrl.search + data;
727+
728+
if (data && data.length > 0) {
729+
// If tagging try to split by tokens and add items
730+
if (ctrl.taggingTokens.isActivated) {
731+
var items = data.split(ctrl.taggingTokens.tokens[0]); // split by first token only
732+
if (items && items.length > 0) {
733+
angular.forEach(items, function (item) {
734+
var newItem = ctrl.tagging.fct ? ctrl.tagging.fct(item) : item;
735+
if (newItem) {
736+
ctrl.select(newItem, true);
737+
}
738+
});
739+
ctrl.search = EMPTY_SEARCH;
740+
e.preventDefault();
741+
e.stopPropagation();
742+
}
743+
} else if (ctrl.paste) {
744+
ctrl.paste(data);
745+
ctrl.search = EMPTY_SEARCH;
727746
e.preventDefault();
728747
e.stopPropagation();
729748
}
@@ -852,6 +871,10 @@ uis.directive('uiSelect',
852871
$select.resetSearchInput = resetSearchInput !== undefined ? resetSearchInput : true;
853872
});
854873

874+
attrs.$observe('paste', function() {
875+
$select.paste = scope.$eval(attrs.paste);
876+
});
877+
855878
attrs.$observe('tagging', function() {
856879
if(attrs.tagging !== undefined)
857880
{
@@ -1045,24 +1068,6 @@ uis.directive('uiSelect',
10451068
return;
10461069
}
10471070

1048-
// Hide the dropdown so there is no flicker until $timeout is done executing.
1049-
// dropdown[0].style.opacity = 0;
1050-
1051-
// Delay positioning the dropdown until all choices have been added so its height is correct.
1052-
// $timeout(function(){
1053-
// var offset = uisOffset(element);
1054-
// var offsetDropdown = uisOffset(dropdown);
1055-
1056-
// Determine if the direction of the dropdown needs to be changed.
1057-
// if (offset.top + offset.height + offsetDropdown.height > $document[0].documentElement.scrollTop + $document[0].documentElement.clientHeight) {
1058-
// dropdown[0].style.position = 'absolute';
1059-
// dropdown[0].style.top = (offsetDropdown.height * -1) + 'px';
1060-
// element.addClass(directionUpClassName);
1061-
// }
1062-
1063-
// Display the dropdown once it has been positioned.
1064-
// dropdown[0].style.opacity = 1;
1065-
// });
10661071
} else {
10671072
if (dropdown === null) {
10681073
return;
@@ -1836,11 +1841,11 @@ $templateCache.put("bootstrap/match-multiple.tpl.html","<span class=\"ui-select-
18361841
$templateCache.put("bootstrap/match.tpl.html","<div class=\"ui-select-match\" ng-hide=\"$select.open\" ng-disabled=\"$select.disabled\" ng-class=\"{\'btn-default-focus\':$select.focus}\"><span tabindex=\"-1\" class=\"btn btn-default form-control ui-select-toggle\" aria-label=\"{{ $select.baseTitle }} activate\" ng-disabled=\"$select.disabled\" ng-click=\"$select.activate()\" style=\"outline: 0;\"><span ng-show=\"isEmpty\" class=\"ui-select-placeholder text-muted\">{{$select.placeholder}}</span> <span ng-hide=\"isEmpty\" class=\"ui-select-match-text pull-left\" ng-class=\"{\'ui-select-allow-clear\': $select.allowClear && !isEmpty}\" ng-transclude=\"\"></span> <i class=\"caret pull-right\" ng-click=\"$select.toggle($event)\"></i> <a ng-show=\"$select.allowClear && !isEmpty\" aria-label=\"{{ $select.baseTitle }} clear\" style=\"margin-right: 10px\" ng-click=\"$select.clear($event)\" class=\"btn btn-xs btn-link pull-right\"><i class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></i></a></span></div>");
18371842
$templateCache.put("bootstrap/select-multiple.tpl.html","<div class=\"ui-select-container 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=\"{{$selectMultiple.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-click=\"$select.activate()\" ng-model=\"$select.search\" role=\"combobox\" aria-label=\"{{ $select.baseTitle }}\" ondrop=\"return false;\"></div><div class=\"ui-select-choices\"></div></div>");
18381843
$templateCache.put("bootstrap/select.tpl.html","<div class=\"ui-select-container ui-select-bootstrap dropdown\" ng-class=\"{open: $select.open}\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" aria-expanded=\"true\" aria-label=\"{{ $select.baseTitle }}\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" 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>");
1844+
$templateCache.put("selectize/choices.tpl.html","<div ng-show=\"$select.open\" class=\"ui-select-choices ui-select-dropdown selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\" role=\"listbox\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\" ng-bind=\"$group.name\"></div><div role=\"option\" class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this), disabled: $select.isDisabled(this)}\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>");
1845+
$templateCache.put("selectize/match.tpl.html","<div ng-hide=\"($select.open || isEmpty)\" class=\"ui-select-match\" ng-transclude=\"\"></div>");
1846+
$templateCache.put("selectize/select.tpl.html","<div class=\"ui-select-container selectize-control single\" ng-class=\"{\'open\': $select.open}\"><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 ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\" aria-label=\"{{ $select.baseTitle }}\"></div><div class=\"ui-select-choices\"></div></div>");
18391847
$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.choiceGrouped($group) }\"><div ng-show=\"$select.choiceGrouped($group)\" class=\"ui-select-choices-group-label select2-result-label\" ng-bind=\"$group.name\"></div><ul role=\"listbox\" id=\"ui-select-choices-{{ $select.generatedId }}\" ng-class=\"{\'select2-result-sub\': $select.choiceGrouped($group), \'select2-result-single\': !$select.choiceGrouped($group) }\"><li role=\"option\" id=\"ui-select-choices-row-{{ $select.generatedId }}-{{$index}}\" class=\"ui-select-choices-row\" ng-class=\"{\'select2-highlighted\': $select.isActive(this), \'select2-disabled\': $select.isDisabled(this)}\"><div class=\"select2-result-label ui-select-choices-row-inner\"></div></li></ul></li></ul>");
18401848
$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\':$selectMultiple.activeMatchIndex === $index, \'select2-locked\':$select.isLocked(this, $index)}\" ui-select-sort=\"$select.selected\"><span uis-transclude-append=\"\"></span> <a href=\"javascript:;\" class=\"ui-select-match-close select2-search-choice-close\" ng-click=\"$selectMultiple.removeChoice($index)\" tabindex=\"-1\"></a></li></span>");
18411849
$templateCache.put("select2/match.tpl.html","<a class=\"select2-choice ui-select-match\" ng-class=\"{\'select2-default\': isEmpty}\" ng-click=\"$select.toggle($event)\" aria-label=\"{{ $select.baseTitle }} select\"><span ng-show=\"isEmpty\" class=\"select2-chosen\">{{$select.placeholder}}</span> <span ng-hide=\"isEmpty\" class=\"select2-chosen\" ng-transclude=\"\"></span> <abbr ng-if=\"$select.allowClear && !isEmpty\" class=\"select2-search-choice-close\" ng-click=\"$select.clear($event)\"></abbr> <span class=\"select2-arrow ui-select-toggle\"><b></b></span></a>");
18421850
$templateCache.put("select2/select-multiple.tpl.html","<div class=\"ui-select-container ui-select-multiple select2 select2-container select2-container-multi\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open, \'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\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"select2-input ui-select-search\" placeholder=\"{{$selectMultiple.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-model=\"$select.search\" ng-click=\"$select.activate()\" style=\"width: 34px;\" ondrop=\"return false;\"></li></ul><div class=\"ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"ui-select-choices\"></div></div></div>");
1843-
$templateCache.put("select2/select.tpl.html","<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open, \'select2-container-disabled\': $select.disabled, \'select2-container-active\': $select.focus, \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"ui-select-dropdown 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\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>");
1844-
$templateCache.put("selectize/choices.tpl.html","<div ng-show=\"$select.open\" class=\"ui-select-choices ui-select-dropdown selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\" role=\"listbox\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\" ng-bind=\"$group.name\"></div><div role=\"option\" class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this), disabled: $select.isDisabled(this)}\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>");
1845-
$templateCache.put("selectize/match.tpl.html","<div ng-hide=\"($select.open || isEmpty)\" class=\"ui-select-match\" ng-transclude=\"\"></div>");
1846-
$templateCache.put("selectize/select.tpl.html","<div class=\"ui-select-container selectize-control single\" ng-class=\"{\'open\': $select.open}\"><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 ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\" aria-label=\"{{ $select.baseTitle }}\"></div><div class=\"ui-select-choices\"></div></div>");}]);
1851+
$templateCache.put("select2/select.tpl.html","<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open, \'select2-container-disabled\': $select.disabled, \'select2-container-active\': $select.focus, \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"ui-select-dropdown 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\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>");}]);

‎dist/select.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/select.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)