|
20 | 20 | transclude: true, |
21 | 21 | controller: 'dropdownListCtrl', |
22 | 22 | controllerAs: '$select', |
23 | | - link: function link(scope, element, iAttrs, ctrls, transcludeFn) { |
| 23 | + compile: function(){ |
| 24 | + // debugger; |
| 25 | + return function link(scope, element, iAttrs, ctrls, transcludeFn) { |
| 26 | + // debugger; |
24 | 27 | // console.log(scope.users); |
25 | 28 | /*prototypical inheritance*/ |
26 | 29 | // scope.users[0] = {budgetshare: 1233.86,publisher: 'Alan', rollover: 831201, adjustment: 434, ebudget: 34234}; |
27 | 30 | // scope.users = []; // shaded, prototypical inheritance |
28 | | - |
29 | | - |
30 | 31 | var $select = ctrls[0]; |
31 | 32 | var ngModel = ctrls[1]; |
32 | 33 |
|
| 34 | + var searchInput = element.querySelectorAll('input.ui-select-search'); |
| 35 | + |
| 36 | + //From view --> model |
| 37 | + ngModel.$parsers.unshift(function (inputValue) { |
| 38 | + var locals = {}, |
| 39 | + result; |
| 40 | + |
| 41 | + locals = {}; |
| 42 | + locals[$select.parserResult.itemName] = inputValue; |
| 43 | + result = $select.parserResult.modelMapper(scope, locals); |
| 44 | + return result; |
| 45 | + |
| 46 | + }); |
| 47 | + //From model --> view |
| 48 | + ngModel.$formatters.unshift(function (inputValue) { |
| 49 | + var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search |
| 50 | + locals = {}, |
| 51 | + result; |
| 52 | + if (data){ |
| 53 | + |
| 54 | + var checkFnSingle = function(d){ |
| 55 | + locals[$select.parserResult.itemName] = d; |
| 56 | + result = $select.parserResult.modelMapper(scope, locals); |
| 57 | + return result == inputValue; |
| 58 | + }; |
| 59 | + //If possible pass same object stored in $select.selected |
| 60 | + if ($select.selected && checkFnSingle($select.selected)) { |
| 61 | + return $select.selected; |
| 62 | + } |
| 63 | + for (var i = data.length - 1; i >= 0; i--) { |
| 64 | + if (checkFnSingle(data[i])) return data[i]; |
| 65 | + } |
| 66 | + } |
| 67 | + |
| 68 | + return inputValue; |
| 69 | + }); |
33 | 70 | //Set reference to ngModel from dropdownListCtrl |
34 | 71 | $select.ngModel = ngModel; |
35 | 72 |
|
|
43 | 80 | $select.selected = ngModel.$viewValue; |
44 | 81 | }; |
45 | 82 |
|
| 83 | + |
| 84 | + element.on('focus', function(){ |
| 85 | + console.log('focus event on dropdown-list') |
| 86 | + }); |
| 87 | + |
| 88 | + // handle key press |
| 89 | + element.on('keydown', function(e) { |
| 90 | + var key = e.which; |
| 91 | + console.log('key event on dropdown-list'); |
| 92 | + scope.$apply(function() { |
| 93 | + var processed = false; |
| 94 | + if (!processed && $select.items.length > 0) { |
| 95 | + processed = $select.handleDropDownSelection(key); |
| 96 | + } |
| 97 | + if (processed) { |
| 98 | + //TODO Check si el tab selecciona aun correctamente |
| 99 | + //Crear test |
| 100 | + e.preventDefault(); |
| 101 | + e.stopPropagation(); |
| 102 | + } |
| 103 | + if((key === 38 || key ===40) && $select.items.length > 0){ |
| 104 | + ensureHighlightVisible(); |
| 105 | + } |
| 106 | + |
| 107 | + |
| 108 | + }); |
| 109 | + }); |
| 110 | + |
| 111 | + // reset hightlight if the current selected item is not in the new filtered list |
| 112 | + element.on('keyup', function(e) { |
| 113 | + var key = e.which; |
| 114 | + if (key!==38 && key!== 40){ |
| 115 | + scope.$apply(function() { |
| 116 | + var index = $select.items.indexOf($select.selected); |
| 117 | + if (index === -1){ |
| 118 | + $select.activeIndex = 0; |
| 119 | + }else{ |
| 120 | + $select.activeIndex = index; |
| 121 | + } |
| 122 | + }); |
| 123 | + } |
| 124 | + }); |
| 125 | + |
| 126 | + // when move the UP/DOWN, ensure that the dropdown scrolls to keep the current highlighted item in sight |
| 127 | + function ensureHighlightVisible() { |
| 128 | + // debugger; |
| 129 | + var container = angular.element(element[0].querySelectorAll('.acq-dropdown-item')); |
| 130 | + var choices = angular.element(container[0].querySelectorAll('.acq-dropdown-item-row')); |
| 131 | + if (choices.length < 1) { |
| 132 | + throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length); |
| 133 | + } |
| 134 | + |
| 135 | + var highlighted = choices[$select.activeIndex]; |
| 136 | + var posY = highlighted.offsetTop + highlighted.clientHeight - container[0].scrollTop; |
| 137 | + var height = container[0].offsetHeight; |
| 138 | + |
| 139 | + if (posY > height) { |
| 140 | + container[0].scrollTop += posY - height; |
| 141 | + } else if (posY < highlighted.clientHeight) { |
| 142 | + if ($select.isGrouped && $select.activeIndex === 0){ |
| 143 | + container[0].scrollTop = 0; //To make group header visible when going all the way up |
| 144 | + }else{ |
| 145 | + container[0].scrollTop -= highlighted.clientHeight - posY; |
| 146 | + } |
| 147 | + } |
| 148 | + } |
| 149 | + |
| 150 | + |
| 151 | + function onDocumentClick(e) { |
| 152 | + var contains = false; |
| 153 | + |
| 154 | + contains = element[0].contains(e.target); |
| 155 | + |
| 156 | + if (!contains && !$select.clickTriggeredSelect) { |
| 157 | + $select.close(); |
| 158 | + scope.$digest(); |
| 159 | + } |
| 160 | + $select.clickTriggeredSelect = false; |
| 161 | + } |
| 162 | + |
| 163 | + // See Click everywhere but here event http://stackoverflow.com/questions/12931369 |
| 164 | + $document.on('click', onDocumentClick); |
| 165 | + |
| 166 | + element.on('$destroy', function(){ |
| 167 | + console.log('dropdow-list directive element destroy'); |
| 168 | + }); |
| 169 | + |
| 170 | + scope.$on('$destroy', function() { |
| 171 | + $document.off('click', onDocumentClick); |
| 172 | + console.log('dropdow-list directive scope destroy'); |
| 173 | + }); |
| 174 | + |
46 | 175 | transcludeFn(scope, function(clone) { |
47 | | - element.append(clone); |
| 176 | + // See Transclude in AngularJS http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html |
| 177 | + |
| 178 | + // One day jqLite will be replaced by jQuery and we will be able to write: |
| 179 | + // var transcludedElement = clone.filter('.my-class') |
| 180 | + // instead of creating a hackish DOM element: |
| 181 | + // debugger; |
| 182 | + // element.append(clone); |
| 183 | + var transcluded = angular.element('<div>').append(clone); |
| 184 | + var transcludedMatch = transcluded.querySelectorAll('.acq-dropdown-selected'); |
| 185 | + |
| 186 | + // transcludedMatch.removeAttr('ui-select-match'); //To avoid loop in case directive as attr |
| 187 | + //if (transcludedMatch.length !== 1) { |
| 188 | + // throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length); |
| 189 | + //} |
| 190 | + element.querySelectorAll('.acq-dropdown-selected').replaceWith(transcludedMatch); |
| 191 | + |
| 192 | + var transcludedChoices = transcluded.querySelectorAll('.acq-dropdown-item'); |
| 193 | + // transcludedChoices.removeAttr('ui-select-choices'); //To avoid loop in case directive as attr |
| 194 | + //if (transcludedChoices.length !== 1) { |
| 195 | + // throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length); |
| 196 | + //} |
| 197 | + element.querySelectorAll('.acq-dropdown-item').replaceWith(transcludedChoices); |
48 | 198 | }); |
| 199 | + // debugger; |
49 | 200 |
|
50 | 201 | } |
| 202 | + } |
51 | 203 |
|
52 | 204 | }; |
53 | 205 | }); |
|
0 commit comments