diff --git a/CHANGELOG.md b/CHANGELOG.md index e559c92..6e2eab3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 0.2.19 + +#### Features + +- **oi-select:** `maxlength` translate maxlength attribute on input + +- **oi-select-options:** + - maxlength is maximum number of characters allowed in the input + - groupFilter for customizing group header + ## 0.2.18 #### Bug Fixes diff --git a/README.md b/README.md index fd34719..532701a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ #oi.select — AngularJS directive of select element -**[Download 0.2.18](https://github.com/tamtakoe/oi.select/tree/master/dist)** +**[Download 0.2.19](https://github.com/tamtakoe/oi.select/tree/master/dist)** ## Features @@ -93,6 +93,7 @@ Use `oi-select` directive: * `debounce` — timeout of debounced input field (default: 500). Set only if `value` is function which return promise * `searchFilter` — filter name for items in search field * `dropdownFilter` — filter name for items in dropdown + * `groupFilter` — filter name for group header * `listFilter` — filter name for items order in dropdown. Use `none` to disable filtering * `editItem` — function which get `lastQuery`, `removedItem` and `getLabel(item)` and return string for input after element was removed (default: ''). `editItem = true` allows you to edit a deleted item. `editItem = 'correct'` same as `true` but does not edit the first time * `saveTrigger` — Trigger on which element is stored in the model. May be `enter`, `blur`, `space`, `tab` and any characters devided by spaces (default: `enter tab blur`) @@ -102,6 +103,7 @@ Use `oi-select` directive: * `newItemModel` — New items model (default: model = query). `$query` value from model will be changed to query string. * `newItemFn` — function which get query and return new item object or promise. F.e. `'addItem($query)'` * `removeItemFn` — function which get removed item model and return any value or promise. If promise was rejected, item wouldn't removed. F.e. `'removeItem($item)'` + * `maxlength` — maximum number of characters allowed in the input ### oiSelect service * `options` — default options which we can override in `oiSelectProvider.options` diff --git a/bower.json b/bower.json index 3d172f8..0b7c333 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,7 @@ "name": "https://github.com/tamtakoe" }, "name": "oi.select", - "version": "0.2.18", + "version": "0.2.19", "main": ["./dist/select-tpls.min.js", "./dist/select.min.css"], "dependencies": { "angular": ">=1.2", diff --git a/dist/select-tpls.js b/dist/select-tpls.js index 00ef053..71fbe28 100644 --- a/dist/select-tpls.js +++ b/dist/select-tpls.js @@ -8,16 +8,17 @@ angular.module('oi.select') searchFilter: 'oiSelectCloseIcon', dropdownFilter: 'oiSelectHighlight', listFilter: 'oiSelectAscSort', + groupFilter: 'oiSelectGroup', editItem: false, newItem: false, closeList: true, saveTrigger: 'enter tab blur' }, version: { - full: '0.2.18', + full: '0.2.19', major: 0, minor: 2, - dot: 18 + dot: 19 }, $get: function() { return { @@ -60,7 +61,7 @@ angular.module('oi.select') if (current === container) { return false; } - if (current.className.indexOf(className) >= 0) { + if (current.className.indexOf(className) >= 0) { //current.classList.contains(className) doesn't work in IE9 return true; } } else { @@ -428,6 +429,10 @@ angular.module('oi.select') var listFilter = $filter(match[0]), listFilterOptionsFn = $parse(match[1]); + match = options.groupFilter.split(':'); + var groupFilter = $filter(match[0]), + groupFilterOptionsFn = $parse(match[1]); + if (options.newItemFn) { newItemFn = $parse(options.newItemFn); @@ -458,6 +463,10 @@ angular.module('oi.select') element[0].removeAttribute('tabindex'); } + if (options.maxlength) { + inputElement.attr('maxlength', options.maxlength); + } + attrs.$observe('disabled', function(value) { inputElement.prop('disabled', value); @@ -632,7 +641,7 @@ angular.module('oi.select') } if (multiple || !scope.backspaceFocus) { - scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected) || ''; + scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected, element) || ''; } if (multiple && options.closeList) { @@ -738,13 +747,17 @@ angular.module('oi.select') scope.getSearchLabel = function(item) { var label = getLabel(item); - return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent)); + return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent), element); }; scope.getDropdownLabel = function(item) { var label = getLabel(item); - return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent)); + return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent), element); + }; + + scope.getGroupLabel = function(group, items) { + return groupFilter(group, scope.oldQuery || scope.query, items, groupFilterOptionsFn(scope.$parent), element); }; scope.getDisableWhen = getDisableWhen; @@ -927,7 +940,7 @@ angular.module('oi.select') if (values && !selectedAs) { var outputValues = multiple ? scope.output : []; - var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent)); + var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent), element); var withoutIntersection = oiUtils.intersection(filteredList, outputValues, trackBy, trackBy, true); var filteredOutput = filter(withoutIntersection); @@ -1025,6 +1038,12 @@ angular.module('oi.select') angular.module('oi.select') +.filter('oiSelectGroup', ['$sce', function($sce) { + return function(label) { + return $sce.trustAsHtml(label); + }; +}]) + .filter('oiSelectCloseIcon', ['$sce', function($sce) { return function(label) { var closeIcon = '×'; @@ -1095,4 +1114,4 @@ angular.module('oi.select') return input; }; }); -angular.module("oi.select").run(["$templateCache", function($templateCache) {$templateCache.put("src/template.html","
");}]); \ No newline at end of file +angular.module("oi.select").run(["$templateCache", function($templateCache) {$templateCache.put("src/template.html","
");}]); \ No newline at end of file diff --git a/dist/select-tpls.min.js b/dist/select-tpls.min.js index e57cdde..04e1d86 100644 --- a/dist/select-tpls.min.js +++ b/dist/select-tpls.min.js @@ -1 +1 @@ -angular.module("oi.select",[]),angular.module("oi.select").provider("oiSelect",function(){return{options:{debounce:500,searchFilter:"oiSelectCloseIcon",dropdownFilter:"oiSelectHighlight",listFilter:"oiSelectAscSort",editItem:!1,newItem:!1,closeList:!0,saveTrigger:"enter tab blur"},version:{full:"0.2.18",major:0,minor:2,dot:18},$get:function(){return{options:this.options,version:this.version}}}}).factory("oiSelectEscape",function(){var e=/[-\/\\^$*+?.()|[\]{}]/g,t="\\$&";return function(n){return String(n).replace(e,t)}}).factory("oiSelectEditItem",function(){return function(e,t,n,o){return o?"":n(e)}}).factory("oiUtils",["$document","$timeout",function(e,t){function n(e,t,n){for(var o=t;o&&o.ownerDocument&&11!==o.nodeType;){if(n){if(o===e)return!1;if(o.className.indexOf(n)>=0)return!0}else if(o===e)return!0;o=o.parentNode}return!1}function o(o,r){function i(e){return e&&"INPUT"!==e.target.nodeName?void 0:(d=!1,c?void(d=!0):void t(function(){o.triggerHandler("blur")}))}function s(){a||(a=!0,t(function(){o.triggerHandler("focus")}))}function l(){c=!0}function u(e){c=!1;var s=e.target,l=n(o[0],s);d&&!l&&i(),l&&"INPUT"!==s.nodeName&&t(function(){r[0].focus()}),!l&&a&&(a=!1)}var a,c,d;return e[0].addEventListener("click",u,!0),o[0].addEventListener("mousedown",l,!0),o[0].addEventListener("blur",i,!0),r.on("focus",s),function(){e[0].removeEventListener("click",u),o[0].removeEventListener("mousedown",l,!0),o[0].removeEventListener("blur",i,!0),r.off("focus",s)}}function r(e,t){var n,o,r,i,l,a;t&&(o=e.offsetHeight,r=u(t,"height","margin"),i=e.scrollTop||0,n=s(t).top-s(e).top+i,l=n,a=n-o+r,n+r>o+i?e.scrollTop=a:i>n&&(e.scrollTop=l))}function i(e,t,n,o,r){function i(e){return parseFloat(r[e])}for(var s=n===(o?"border":"content")?4:"width"===t?1:0,l=0,u=["Top","Right","Bottom","Left"];4>s;s+=2)"margin"===n&&(l+=i(n+u[s])),o?("content"===n&&(l-=i("padding"+u[s])),"margin"!==n&&(l-=i("border"+u[s]+"Width"))):(l+=i("padding"+u[s]),"padding"!==n&&(l+=i("border"+u[s]+"Width")));return l}function s(e){var t,n,o=e.getBoundingClientRect(),r=e&&e.ownerDocument;if(r)return t=r.documentElement,n=l(r),{top:o.top+n.pageYOffset-t.clientTop,left:o.left+n.pageXOffset-t.clientLeft}}function l(e){return null!=e&&e===e.window?e:9===e.nodeType&&e.defaultView}function u(e,t,n){var o=!0,r="width"===t?e.offsetWidth:e.offsetHeight,s=window.getComputedStyle(e,null),l=!1;if(0>=r||null==r){if(r=s[t],(0>r||null==r)&&(r=e.style[t]),g.test(r))return r;r=parseFloat(r)||0}return r+i(e,t,n||(l?"border":"content"),o,s)}function a(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t].length)return!1;return!0}function c(e){var t=[];return angular.forEach(e,function(e,n){"$"!==n.toString().charAt(0)&&t.push(e)}),t}function d(e,t,n,o,r){var i,s,l,u,a,c=r?[].concat(e):[];for(i=0,l=e.length;i=y&&u.contains(r[0],t.target,"select-dropdown")||(e.inputHide&&e.removeItem(0),!e.isOpen||!lt.closeList||"INPUT"===t.target.nodeName&&e.query.length?J(e.query):(Z({query:lt.editItem&&!at}),e.$evalAsync()))}function E(){e.isFocused||(e.isFocused=!0,c.disabled||(e.backspaceFocus=!1))}function q(){e.isFocused=!1,w||I(),L("blur")||Z(),e.$evalAsync()}function L(o,r){r||(r=o,o=e.query);var i,s=lt.saveTrigger.split(" ").indexOf(r)+1,l=lt.newItem&&o,u="blur"!==r?e.order[e.selectorPosition]:null;return s&&(l||u)?(e.showLoader=!0,i=t.when(u||k(e.$parent,{$query:o})),i.then(function(o){if(void 0===o)return t.reject();e.addItem(o);var r=e.order.length-1;e.selectorPosition===r&&et(ot,0),lt.newItemFn&&!u||n(angular.noop),Z()}).catch(function(){f("invalid-item"),e.showLoader=!1}),!0):void 0}function C(){var e=w&&G(d.$modelValue)?it:rt;nt.attr("placeholder",e)}function x(t){return u.getValue(F,t,e.$parent,N)}function j(t){return u.getValue(F,t,e.$parent,H)}function W(t){return u.getValue(F,t,e.$parent,O)}function B(t){return u.getValue(F,t,e.$parent,D)}function z(t){return u.getValue(F,t,e.$parent,A)||""}function X(t){return u.getValue(P,t,e.$parent,T)}function Y(e){return e=e instanceof Array?e:e?[e]:[],e.filter(function(e){return e&&(e instanceof Array&&e.length||H||W(e))})}function G(e){return!!Y(e).length}function J(o,r){return v&&ct&&n.cancel(v),v=n(function(){var i=_(e.$parent,{$query:o,$selectedAs:r})||"";return e.selectorPosition="prompt"===lt.newItem?!1:0,o||r||(e.oldQuery=null),(i.$promise&&!i.$resolved||angular.isFunction(i.then))&&(ct=lt.debounce),e.showLoader=!0,t.when(i.$promise||i).then(function(t){if(e.groups={},t&&!r){var n=w?e.output:[],i=vt(u.objToArr(t),o,W,$t(e.$parent)),s=u.intersection(i,n,x,x,!0),l=X(s);e.groups=tt(l)}return K(),t}).finally(function(){e.showLoader=!1,lt.closeList&&!lt.cleanModel&&n(function(){et(ot,0)})})},ct)}function K(){var t,n,o,r=[],i=0;e.order=[],e.groupPos={};for(n in e.groups)e.groups.hasOwnProperty(n)&&"$"!=n.charAt(0)&&r.push(n);for(R&&r.sort(),t=0;t=y)return void f("limited");var n=e.groups[z(t)]=e.groups[z(t)]||[],o=H?j(t):t;n.splice(n.indexOf(t),1),w?d.$setViewValue(angular.isArray(d.$modelValue)?d.$modelValue.concat(o):[o]):(d.$setViewValue(o),I()),u.groupsIsEmpty(e.groups)&&(e.groups={}),w||lt.closeList||Z({query:!0}),p(),e.oldQuery=e.oldQuery||e.query,e.query="",e.backspaceFocus=!1}},e.removeItem=function(n){c.disabled||w&&0>n||(b=w?d.$modelValue[n]:d.$modelValue,t.when(pt(e.$parent,{$item:b})).then(function(){(w||e.inputHide)&&(w?(d.$modelValue.splice(n,1),d.$setViewValue([].concat(d.$modelValue))):(S(),lt.cleanModel&&d.$setViewValue(void 0)),(w||!e.backspaceFocus)&&(e.query=dt(b,$,W,at)||""),w&<.closeList&&Z({query:!0}))}))},e.setSelection=function(t){m||e.selectorPosition===t?m=!1:et(ot,t)},e.keyUp=function(t){switch(t.keyCode){case 8:e.query.length||w&&e.output.length||Z()}},e.keyDown=function(t){var n=0,o=e.order.length-1;switch(t.keyCode){case 38:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n,et(ot,e.selectorPosition===n?o:e.selectorPosition-1),m=!0;break;case 40:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n-1,et(ot,e.selectorPosition===o?n:e.selectorPosition+1),m=!0,e.query.length||e.isOpen||J(),e.inputHide&&S();break;case 37:case 39:break;case 9:L("tab");break;case 13:L("enter"),t.preventDefault();break;case 32:L("space");break;case 27:w||(I(),lt.cleanModel&&d.$setViewValue(b)),Z();break;case 8:if(!e.query.length){if((!w||ut)&&(e.backspaceFocus=!0),e.backspaceFocus&&e.output&&(!w||e.output.length)){e.removeItem(e.output.length-1),ut&&t.preventDefault();break}e.backspaceFocus=!e.backspaceFocus;break}default:return e.inputHide&&S(),e.backspaceFocus=!1,!1}},e.getSearchLabel=function(t){var n=W(t);return ft(n,e.oldQuery||e.query,t,gt(e.$parent))},e.getDropdownLabel=function(t){var n=W(t);return mt(n,e.oldQuery||e.query,t,ht(e.$parent))},e.getDisableWhen=B,Z(),r[0].addEventListener("click",V,!0),r.on("focus",E),r.on("blur",q)}}}}]),angular.module("oi.select").filter("oiSelectCloseIcon",["$sce",function(e){return function(t){var n='×';return e.trustAsHtml(t+n)}}]).filter("oiSelectHighlight",["$sce","oiSelectEscape",function(e,t){return function(n,o){var r;return o.length>0||angular.isNumber(o)?(n=n.toString(),o=t(o.toString()),r=n.replace(new RegExp(o,"gi"),"$&")):r=n,e.trustAsHtml(r)}}]).filter("oiSelectAscSort",["oiSelectEscape",function(e){function t(t,n,o,r){var i,s,l,u,a=[],c=[],d=[];if(n){for(n=e(String(n)),i=0,l=!1;i
')}]); \ No newline at end of file +angular.module("oi.select",[]),angular.module("oi.select").provider("oiSelect",function(){return{options:{debounce:500,searchFilter:"oiSelectCloseIcon",dropdownFilter:"oiSelectHighlight",listFilter:"oiSelectAscSort",groupFilter:"oiSelectGroup",editItem:!1,newItem:!1,closeList:!0,saveTrigger:"enter tab blur"},version:{full:"0.2.19",major:0,minor:2,dot:19},$get:function(){return{options:this.options,version:this.version}}}}).factory("oiSelectEscape",function(){var e=/[-\/\\^$*+?.()|[\]{}]/g,t="\\$&";return function(n){return String(n).replace(e,t)}}).factory("oiSelectEditItem",function(){return function(e,t,n,o){return o?"":n(e)}}).factory("oiUtils",["$document","$timeout",function(e,t){function n(e,t,n){for(var o=t;o&&o.ownerDocument&&11!==o.nodeType;){if(n){if(o===e)return!1;if(o.className.indexOf(n)>=0)return!0}else if(o===e)return!0;o=o.parentNode}return!1}function o(o,r){function i(e){return e&&"INPUT"!==e.target.nodeName?void 0:(d=!1,c?void(d=!0):void t(function(){o.triggerHandler("blur")}))}function s(){a||(a=!0,t(function(){o.triggerHandler("focus")}))}function l(){c=!0}function u(e){c=!1;var s=e.target,l=n(o[0],s);d&&!l&&i(),l&&"INPUT"!==s.nodeName&&t(function(){r[0].focus()}),!l&&a&&(a=!1)}var a,c,d;return e[0].addEventListener("click",u,!0),o[0].addEventListener("mousedown",l,!0),o[0].addEventListener("blur",i,!0),r.on("focus",s),function(){e[0].removeEventListener("click",u),o[0].removeEventListener("mousedown",l,!0),o[0].removeEventListener("blur",i,!0),r.off("focus",s)}}function r(e,t){var n,o,r,i,l,a;t&&(o=e.offsetHeight,r=u(t,"height","margin"),i=e.scrollTop||0,n=s(t).top-s(e).top+i,l=n,a=n-o+r,n+r>o+i?e.scrollTop=a:i>n&&(e.scrollTop=l))}function i(e,t,n,o,r){function i(e){return parseFloat(r[e])}for(var s=n===(o?"border":"content")?4:"width"===t?1:0,l=0,u=["Top","Right","Bottom","Left"];4>s;s+=2)"margin"===n&&(l+=i(n+u[s])),o?("content"===n&&(l-=i("padding"+u[s])),"margin"!==n&&(l-=i("border"+u[s]+"Width"))):(l+=i("padding"+u[s]),"padding"!==n&&(l+=i("border"+u[s]+"Width")));return l}function s(e){var t,n,o=e.getBoundingClientRect(),r=e&&e.ownerDocument;if(r)return t=r.documentElement,n=l(r),{top:o.top+n.pageYOffset-t.clientTop,left:o.left+n.pageXOffset-t.clientLeft}}function l(e){return null!=e&&e===e.window?e:9===e.nodeType&&e.defaultView}function u(e,t,n){var o=!0,r="width"===t?e.offsetWidth:e.offsetHeight,s=window.getComputedStyle(e,null),l=!1;if(0>=r||null==r){if(r=s[t],(0>r||null==r)&&(r=e.style[t]),g.test(r))return r;r=parseFloat(r)||0}return r+i(e,t,n||(l?"border":"content"),o,s)}function a(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t].length)return!1;return!0}function c(e){var t=[];return angular.forEach(e,function(e,n){"$"!==n.toString().charAt(0)&&t.push(e)}),t}function d(e,t,n,o,r){var i,s,l,u,a,c=r?[].concat(e):[];for(i=0,l=e.length;i=y&&u.contains(r[0],t.target,"select-dropdown")||(e.inputHide&&e.removeItem(0),!e.isOpen||!lt.closeList||"INPUT"===t.target.nodeName&&e.query.length?J(e.query):(Z({query:lt.editItem&&!at}),e.$evalAsync()))}function V(){e.isFocused||(e.isFocused=!0,c.disabled||(e.backspaceFocus=!1))}function q(){e.isFocused=!1,w||I(),E("blur")||Z(),e.$evalAsync()}function E(o,r){r||(r=o,o=e.query);var i,s=lt.saveTrigger.split(" ").indexOf(r)+1,l=lt.newItem&&o,u="blur"!==r?e.order[e.selectorPosition]:null;return s&&(l||u)?(e.showLoader=!0,i=t.when(u||S(e.$parent,{$query:o})),i.then(function(o){if(void 0===o)return t.reject();e.addItem(o);var r=e.order.length-1;e.selectorPosition===r&&et(ot,0),lt.newItemFn&&!u||n(angular.noop),Z()}).catch(function(){f("invalid-item"),e.showLoader=!1}),!0):void 0}function x(){var e=w&&Y(d.$modelValue)?it:rt;nt.attr("placeholder",e)}function C(t){return u.getValue(F,t,e.$parent,N)}function j(t){return u.getValue(F,t,e.$parent,H)}function W(t){return u.getValue(F,t,e.$parent,O)}function B(t){return u.getValue(F,t,e.$parent,D)}function G(t){return u.getValue(F,t,e.$parent,A)||""}function z(t){return u.getValue(P,t,e.$parent,T)}function X(e){return e=e instanceof Array?e:e?[e]:[],e.filter(function(e){return e&&(e instanceof Array&&e.length||H||W(e))})}function Y(e){return!!X(e).length}function J(o,i){return v&&ct&&n.cancel(v),v=n(function(){var s=_(e.$parent,{$query:o,$selectedAs:i})||"";return e.selectorPosition="prompt"===lt.newItem?!1:0,o||i||(e.oldQuery=null),(s.$promise&&!s.$resolved||angular.isFunction(s.then))&&(ct=lt.debounce),e.showLoader=!0,t.when(s.$promise||s).then(function(t){if(e.groups={},t&&!i){var n=w?e.output:[],s=vt(u.objToArr(t),o,W,$t(e.$parent),r),l=u.intersection(s,n,C,C,!0),a=z(l);e.groups=tt(a)}return K(),t}).finally(function(){e.showLoader=!1,lt.closeList&&!lt.cleanModel&&n(function(){et(ot,0)})})},ct)}function K(){var t,n,o,r=[],i=0;e.order=[],e.groupPos={};for(n in e.groups)e.groups.hasOwnProperty(n)&&"$"!=n.charAt(0)&&r.push(n);for(R&&r.sort(),t=0;t=y)return void f("limited");var n=e.groups[G(t)]=e.groups[G(t)]||[],o=H?j(t):t;n.splice(n.indexOf(t),1),w?d.$setViewValue(angular.isArray(d.$modelValue)?d.$modelValue.concat(o):[o]):(d.$setViewValue(o),I()),u.groupsIsEmpty(e.groups)&&(e.groups={}),w||lt.closeList||Z({query:!0}),p(),e.oldQuery=e.oldQuery||e.query,e.query="",e.backspaceFocus=!1}},e.removeItem=function(n){c.disabled||w&&0>n||(b=w?d.$modelValue[n]:d.$modelValue,t.when(pt(e.$parent,{$item:b})).then(function(){(w||e.inputHide)&&(w?(d.$modelValue.splice(n,1),d.$setViewValue([].concat(d.$modelValue))):(k(),lt.cleanModel&&d.$setViewValue(void 0)),(w||!e.backspaceFocus)&&(e.query=dt(b,$,W,at,r)||""),w&<.closeList&&Z({query:!0}))}))},e.setSelection=function(t){m||e.selectorPosition===t?m=!1:et(ot,t)},e.keyUp=function(t){switch(t.keyCode){case 8:e.query.length||w&&e.output.length||Z()}},e.keyDown=function(t){var n=0,o=e.order.length-1;switch(t.keyCode){case 38:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n,et(ot,e.selectorPosition===n?o:e.selectorPosition-1),m=!0;break;case 40:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n-1,et(ot,e.selectorPosition===o?n:e.selectorPosition+1),m=!0,e.query.length||e.isOpen||J(),e.inputHide&&k();break;case 37:case 39:break;case 9:E("tab");break;case 13:E("enter"),t.preventDefault();break;case 32:E("space");break;case 27:w||(I(),lt.cleanModel&&d.$setViewValue(b)),Z();break;case 8:if(!e.query.length){if((!w||ut)&&(e.backspaceFocus=!0),e.backspaceFocus&&e.output&&(!w||e.output.length)){e.removeItem(e.output.length-1),ut&&t.preventDefault();break}e.backspaceFocus=!e.backspaceFocus;break}default:return e.inputHide&&k(),e.backspaceFocus=!1,!1}},e.getSearchLabel=function(t){var n=W(t);return ft(n,e.oldQuery||e.query,t,gt(e.$parent),r)},e.getDropdownLabel=function(t){var n=W(t);return mt(n,e.oldQuery||e.query,t,ht(e.$parent),r)},e.getGroupLabel=function(t,n){return bt(t,e.oldQuery||e.query,n,wt(e.$parent),r)},e.getDisableWhen=B,Z(),r[0].addEventListener("click",L,!0),r.on("focus",V),r.on("blur",q)}}}}]),angular.module("oi.select").filter("oiSelectGroup",["$sce",function(e){return function(t){return e.trustAsHtml(t)}}]).filter("oiSelectCloseIcon",["$sce",function(e){return function(t){var n='×';return e.trustAsHtml(t+n)}}]).filter("oiSelectHighlight",["$sce","oiSelectEscape",function(e,t){return function(n,o){var r;return o.length>0||angular.isNumber(o)?(n=n.toString(),o=t(o.toString()),r=n.replace(new RegExp(o,"gi"),"$&")):r=n,e.trustAsHtml(r)}}]).filter("oiSelectAscSort",["oiSelectEscape",function(e){function t(t,n,o,r){var i,s,l,u,a=[],c=[],d=[];if(n){for(n=e(String(n)),i=0,l=!1;i
')}]); \ No newline at end of file diff --git a/dist/select.js b/dist/select.js index 24538a1..c21caf8 100644 --- a/dist/select.js +++ b/dist/select.js @@ -8,16 +8,17 @@ angular.module('oi.select') searchFilter: 'oiSelectCloseIcon', dropdownFilter: 'oiSelectHighlight', listFilter: 'oiSelectAscSort', + groupFilter: 'oiSelectGroup', editItem: false, newItem: false, closeList: true, saveTrigger: 'enter tab blur' }, version: { - full: '0.2.18', + full: '0.2.19', major: 0, minor: 2, - dot: 18 + dot: 19 }, $get: function() { return { @@ -60,7 +61,7 @@ angular.module('oi.select') if (current === container) { return false; } - if (current.className.indexOf(className) >= 0) { + if (current.className.indexOf(className) >= 0) { //current.classList.contains(className) doesn't work in IE9 return true; } } else { @@ -428,6 +429,10 @@ angular.module('oi.select') var listFilter = $filter(match[0]), listFilterOptionsFn = $parse(match[1]); + match = options.groupFilter.split(':'); + var groupFilter = $filter(match[0]), + groupFilterOptionsFn = $parse(match[1]); + if (options.newItemFn) { newItemFn = $parse(options.newItemFn); @@ -458,6 +463,10 @@ angular.module('oi.select') element[0].removeAttribute('tabindex'); } + if (options.maxlength) { + inputElement.attr('maxlength', options.maxlength); + } + attrs.$observe('disabled', function(value) { inputElement.prop('disabled', value); @@ -632,7 +641,7 @@ angular.module('oi.select') } if (multiple || !scope.backspaceFocus) { - scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected) || ''; + scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected, element) || ''; } if (multiple && options.closeList) { @@ -738,13 +747,17 @@ angular.module('oi.select') scope.getSearchLabel = function(item) { var label = getLabel(item); - return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent)); + return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent), element); }; scope.getDropdownLabel = function(item) { var label = getLabel(item); - return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent)); + return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent), element); + }; + + scope.getGroupLabel = function(group, items) { + return groupFilter(group, scope.oldQuery || scope.query, items, groupFilterOptionsFn(scope.$parent), element); }; scope.getDisableWhen = getDisableWhen; @@ -927,7 +940,7 @@ angular.module('oi.select') if (values && !selectedAs) { var outputValues = multiple ? scope.output : []; - var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent)); + var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent), element); var withoutIntersection = oiUtils.intersection(filteredList, outputValues, trackBy, trackBy, true); var filteredOutput = filter(withoutIntersection); @@ -1025,6 +1038,12 @@ angular.module('oi.select') angular.module('oi.select') +.filter('oiSelectGroup', ['$sce', function($sce) { + return function(label) { + return $sce.trustAsHtml(label); + }; +}]) + .filter('oiSelectCloseIcon', ['$sce', function($sce) { return function(label) { var closeIcon = '×'; diff --git a/dist/select.min.js b/dist/select.min.js index bd20b64..d6cb2f2 100644 --- a/dist/select.min.js +++ b/dist/select.min.js @@ -1 +1 @@ -angular.module("oi.select",[]),angular.module("oi.select").provider("oiSelect",function(){return{options:{debounce:500,searchFilter:"oiSelectCloseIcon",dropdownFilter:"oiSelectHighlight",listFilter:"oiSelectAscSort",editItem:!1,newItem:!1,closeList:!0,saveTrigger:"enter tab blur"},version:{full:"0.2.18",major:0,minor:2,dot:18},$get:function(){return{options:this.options,version:this.version}}}}).factory("oiSelectEscape",function(){var e=/[-\/\\^$*+?.()|[\]{}]/g,t="\\$&";return function(n){return String(n).replace(e,t)}}).factory("oiSelectEditItem",function(){return function(e,t,n,r){return r?"":n(e)}}).factory("oiUtils",["$document","$timeout",function(e,t){function n(e,t,n){for(var r=t;r&&r.ownerDocument&&11!==r.nodeType;){if(n){if(r===e)return!1;if(r.className.indexOf(n)>=0)return!0}else if(r===e)return!0;r=r.parentNode}return!1}function r(r,o){function i(e){return e&&"INPUT"!==e.target.nodeName?void 0:(d=!1,c?void(d=!0):void t(function(){r.triggerHandler("blur")}))}function u(){a||(a=!0,t(function(){r.triggerHandler("focus")}))}function s(){c=!0}function l(e){c=!1;var u=e.target,s=n(r[0],u);d&&!s&&i(),s&&"INPUT"!==u.nodeName&&t(function(){o[0].focus()}),!s&&a&&(a=!1)}var a,c,d;return e[0].addEventListener("click",l,!0),r[0].addEventListener("mousedown",s,!0),r[0].addEventListener("blur",i,!0),o.on("focus",u),function(){e[0].removeEventListener("click",l),r[0].removeEventListener("mousedown",s,!0),r[0].removeEventListener("blur",i,!0),o.off("focus",u)}}function o(e,t){var n,r,o,i,s,a;t&&(r=e.offsetHeight,o=l(t,"height","margin"),i=e.scrollTop||0,n=u(t).top-u(e).top+i,s=n,a=n-r+o,n+o>r+i?e.scrollTop=a:i>n&&(e.scrollTop=s))}function i(e,t,n,r,o){function i(e){return parseFloat(o[e])}for(var u=n===(r?"border":"content")?4:"width"===t?1:0,s=0,l=["Top","Right","Bottom","Left"];4>u;u+=2)"margin"===n&&(s+=i(n+l[u])),r?("content"===n&&(s-=i("padding"+l[u])),"margin"!==n&&(s-=i("border"+l[u]+"Width"))):(s+=i("padding"+l[u]),"padding"!==n&&(s+=i("border"+l[u]+"Width")));return s}function u(e){var t,n,r=e.getBoundingClientRect(),o=e&&e.ownerDocument;if(o)return t=o.documentElement,n=s(o),{top:r.top+n.pageYOffset-t.clientTop,left:r.left+n.pageXOffset-t.clientLeft}}function s(e){return null!=e&&e===e.window?e:9===e.nodeType&&e.defaultView}function l(e,t,n){var r=!0,o="width"===t?e.offsetWidth:e.offsetHeight,u=window.getComputedStyle(e,null),s=!1;if(0>=o||null==o){if(o=u[t],(0>o||null==o)&&(o=e.style[t]),g.test(o))return o;o=parseFloat(o)||0}return o+i(e,t,n||(s?"border":"content"),r,u)}function a(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t].length)return!1;return!0}function c(e){var t=[];return angular.forEach(e,function(e,n){"$"!==n.toString().charAt(0)&&t.push(e)}),t}function d(e,t,n,r,o){var i,u,s,l,a,c=o?[].concat(e):[];for(i=0,s=e.length;i=y&&l.contains(o[0],t.target,"select-dropdown")||(e.inputHide&&e.removeItem(0),!e.isOpen||!st.closeList||"INPUT"===t.target.nodeName&&e.query.length?J(e.query):(Z({query:st.editItem&&!at}),e.$evalAsync()))}function E(){e.isFocused||(e.isFocused=!0,c.disabled||(e.backspaceFocus=!1))}function q(){e.isFocused=!1,b||F(),L("blur")||Z(),e.$evalAsync()}function L(r,o){o||(o=r,r=e.query);var i,u=st.saveTrigger.split(" ").indexOf(o)+1,s=st.newItem&&r,l="blur"!==o?e.order[e.selectorPosition]:null;return u&&(s||l)?(e.showLoader=!0,i=t.when(l||S(e.$parent,{$query:r})),i.then(function(r){if(void 0===r)return t.reject();e.addItem(r);var o=e.order.length-1;e.selectorPosition===o&&et(rt,0),st.newItemFn&&!l||n(angular.noop),Z()}).catch(function(){p("invalid-item"),e.showLoader=!1}),!0):void 0}function C(){var e=b&&G(d.$modelValue)?it:ot;nt.attr("placeholder",e)}function A(t){return l.getValue(k,t,e.$parent,_)}function j(t){return l.getValue(k,t,e.$parent,H)}function B(t){return l.getValue(k,t,e.$parent,O)}function W(t){return l.getValue(k,t,e.$parent,T)}function z(t){return l.getValue(k,t,e.$parent,x)||""}function X(t){return l.getValue(P,t,e.$parent,N)}function Y(e){return e=e instanceof Array?e:e?[e]:[],e.filter(function(e){return e&&(e instanceof Array&&e.length||H||B(e))})}function G(e){return!!Y(e).length}function J(r,o){return v&&ct&&n.cancel(v),v=n(function(){var i=D(e.$parent,{$query:r,$selectedAs:o})||"";return e.selectorPosition="prompt"===st.newItem?!1:0,r||o||(e.oldQuery=null),(i.$promise&&!i.$resolved||angular.isFunction(i.then))&&(ct=st.debounce),e.showLoader=!0,t.when(i.$promise||i).then(function(t){if(e.groups={},t&&!o){var n=b?e.output:[],i=vt(l.objToArr(t),r,B,$t(e.$parent)),u=l.intersection(i,n,A,A,!0),s=X(u);e.groups=tt(s)}return K(),t}).finally(function(){e.showLoader=!1,st.closeList&&!st.cleanModel&&n(function(){et(rt,0)})})},ct)}function K(){var t,n,r,o=[],i=0;e.order=[],e.groupPos={};for(n in e.groups)e.groups.hasOwnProperty(n)&&"$"!=n.charAt(0)&&o.push(n);for(U&&o.sort(),t=0;t=y)return void p("limited");var n=e.groups[z(t)]=e.groups[z(t)]||[],r=H?j(t):t;n.splice(n.indexOf(t),1),b?d.$setViewValue(angular.isArray(d.$modelValue)?d.$modelValue.concat(r):[r]):(d.$setViewValue(r),F()),l.groupsIsEmpty(e.groups)&&(e.groups={}),b||st.closeList||Z({query:!0}),f(),e.oldQuery=e.oldQuery||e.query,e.query="",e.backspaceFocus=!1}},e.removeItem=function(n){c.disabled||b&&0>n||(w=b?d.$modelValue[n]:d.$modelValue,t.when(ft(e.$parent,{$item:w})).then(function(){(b||e.inputHide)&&(b?(d.$modelValue.splice(n,1),d.$setViewValue([].concat(d.$modelValue))):(I(),st.cleanModel&&d.$setViewValue(void 0)),(b||!e.backspaceFocus)&&(e.query=dt(w,$,B,at)||""),b&&st.closeList&&Z({query:!0}))}))},e.setSelection=function(t){m||e.selectorPosition===t?m=!1:et(rt,t)},e.keyUp=function(t){switch(t.keyCode){case 8:e.query.length||b&&e.output.length||Z()}},e.keyDown=function(t){var n=0,r=e.order.length-1;switch(t.keyCode){case 38:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n,et(rt,e.selectorPosition===n?r:e.selectorPosition-1),m=!0;break;case 40:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n-1,et(rt,e.selectorPosition===r?n:e.selectorPosition+1),m=!0,e.query.length||e.isOpen||J(),e.inputHide&&I();break;case 37:case 39:break;case 9:L("tab");break;case 13:L("enter"),t.preventDefault();break;case 32:L("space");break;case 27:b||(F(),st.cleanModel&&d.$setViewValue(w)),Z();break;case 8:if(!e.query.length){if((!b||lt)&&(e.backspaceFocus=!0),e.backspaceFocus&&e.output&&(!b||e.output.length)){e.removeItem(e.output.length-1),lt&&t.preventDefault();break}e.backspaceFocus=!e.backspaceFocus;break}default:return e.inputHide&&I(),e.backspaceFocus=!1,!1}},e.getSearchLabel=function(t){var n=B(t);return pt(n,e.oldQuery||e.query,t,gt(e.$parent))},e.getDropdownLabel=function(t){var n=B(t);return mt(n,e.oldQuery||e.query,t,ht(e.$parent))},e.getDisableWhen=W,Z(),o[0].addEventListener("click",V,!0),o.on("focus",E),o.on("blur",q)}}}}]),angular.module("oi.select").filter("oiSelectCloseIcon",["$sce",function(e){return function(t){var n='×';return e.trustAsHtml(t+n)}}]).filter("oiSelectHighlight",["$sce","oiSelectEscape",function(e,t){return function(n,r){var o;return r.length>0||angular.isNumber(r)?(n=n.toString(),r=t(r.toString()),o=n.replace(new RegExp(r,"gi"),"$&")):o=n,e.trustAsHtml(o)}}]).filter("oiSelectAscSort",["oiSelectEscape",function(e){function t(t,n,r,o){var i,u,s,l,a=[],c=[],d=[];if(n){for(n=e(String(n)),i=0,s=!1;i=0)return!0}else if(r===e)return!0;r=r.parentNode}return!1}function r(r,o){function i(e){return e&&"INPUT"!==e.target.nodeName?void 0:(d=!1,c?void(d=!0):void t(function(){r.triggerHandler("blur")}))}function u(){a||(a=!0,t(function(){r.triggerHandler("focus")}))}function s(){c=!0}function l(e){c=!1;var u=e.target,s=n(r[0],u);d&&!s&&i(),s&&"INPUT"!==u.nodeName&&t(function(){o[0].focus()}),!s&&a&&(a=!1)}var a,c,d;return e[0].addEventListener("click",l,!0),r[0].addEventListener("mousedown",s,!0),r[0].addEventListener("blur",i,!0),o.on("focus",u),function(){e[0].removeEventListener("click",l),r[0].removeEventListener("mousedown",s,!0),r[0].removeEventListener("blur",i,!0),o.off("focus",u)}}function o(e,t){var n,r,o,i,s,a;t&&(r=e.offsetHeight,o=l(t,"height","margin"),i=e.scrollTop||0,n=u(t).top-u(e).top+i,s=n,a=n-r+o,n+o>r+i?e.scrollTop=a:i>n&&(e.scrollTop=s))}function i(e,t,n,r,o){function i(e){return parseFloat(o[e])}for(var u=n===(r?"border":"content")?4:"width"===t?1:0,s=0,l=["Top","Right","Bottom","Left"];4>u;u+=2)"margin"===n&&(s+=i(n+l[u])),r?("content"===n&&(s-=i("padding"+l[u])),"margin"!==n&&(s-=i("border"+l[u]+"Width"))):(s+=i("padding"+l[u]),"padding"!==n&&(s+=i("border"+l[u]+"Width")));return s}function u(e){var t,n,r=e.getBoundingClientRect(),o=e&&e.ownerDocument;if(o)return t=o.documentElement,n=s(o),{top:r.top+n.pageYOffset-t.clientTop,left:r.left+n.pageXOffset-t.clientLeft}}function s(e){return null!=e&&e===e.window?e:9===e.nodeType&&e.defaultView}function l(e,t,n){var r=!0,o="width"===t?e.offsetWidth:e.offsetHeight,u=window.getComputedStyle(e,null),s=!1;if(0>=o||null==o){if(o=u[t],(0>o||null==o)&&(o=e.style[t]),g.test(o))return o;o=parseFloat(o)||0}return o+i(e,t,n||(s?"border":"content"),r,u)}function a(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t].length)return!1;return!0}function c(e){var t=[];return angular.forEach(e,function(e,n){"$"!==n.toString().charAt(0)&&t.push(e)}),t}function d(e,t,n,r,o){var i,u,s,l,a,c=o?[].concat(e):[];for(i=0,s=e.length;i=y&&l.contains(o[0],t.target,"select-dropdown")||(e.inputHide&&e.removeItem(0),!e.isOpen||!st.closeList||"INPUT"===t.target.nodeName&&e.query.length?J(e.query):(Z({query:st.editItem&&!at}),e.$evalAsync()))}function E(){e.isFocused||(e.isFocused=!0,c.disabled||(e.backspaceFocus=!1))}function q(){e.isFocused=!1,b||I(),L("blur")||Z(),e.$evalAsync()}function L(r,o){o||(o=r,r=e.query);var i,u=st.saveTrigger.split(" ").indexOf(o)+1,s=st.newItem&&r,l="blur"!==o?e.order[e.selectorPosition]:null;return u&&(s||l)?(e.showLoader=!0,i=t.when(l||S(e.$parent,{$query:r})),i.then(function(r){if(void 0===r)return t.reject();e.addItem(r);var o=e.order.length-1;e.selectorPosition===o&&et(rt,0),st.newItemFn&&!l||n(angular.noop),Z()}).catch(function(){p("invalid-item"),e.showLoader=!1}),!0):void 0}function C(){var e=b&&Y(d.$modelValue)?it:ot;nt.attr("placeholder",e)}function x(t){return l.getValue(k,t,e.$parent,_)}function j(t){return l.getValue(k,t,e.$parent,A)}function B(t){return l.getValue(k,t,e.$parent,H)}function W(t){return l.getValue(k,t,e.$parent,T)}function G(t){return l.getValue(k,t,e.$parent,O)||""}function z(t){return l.getValue(P,t,e.$parent,N)}function X(e){return e=e instanceof Array?e:e?[e]:[],e.filter(function(e){return e&&(e instanceof Array&&e.length||A||B(e))})}function Y(e){return!!X(e).length}function J(r,i){return v&&ct&&n.cancel(v),v=n(function(){var u=D(e.$parent,{$query:r,$selectedAs:i})||"";return e.selectorPosition="prompt"===st.newItem?!1:0,r||i||(e.oldQuery=null),(u.$promise&&!u.$resolved||angular.isFunction(u.then))&&(ct=st.debounce),e.showLoader=!0,t.when(u.$promise||u).then(function(t){if(e.groups={},t&&!i){var n=b?e.output:[],u=vt(l.objToArr(t),r,B,$t(e.$parent),o),s=l.intersection(u,n,x,x,!0),a=z(s);e.groups=tt(a)}return K(),t}).finally(function(){e.showLoader=!1,st.closeList&&!st.cleanModel&&n(function(){et(rt,0)})})},ct)}function K(){var t,n,r,o=[],i=0;e.order=[],e.groupPos={};for(n in e.groups)e.groups.hasOwnProperty(n)&&"$"!=n.charAt(0)&&o.push(n);for(U&&o.sort(),t=0;t=y)return void p("limited");var n=e.groups[G(t)]=e.groups[G(t)]||[],r=A?j(t):t;n.splice(n.indexOf(t),1),b?d.$setViewValue(angular.isArray(d.$modelValue)?d.$modelValue.concat(r):[r]):(d.$setViewValue(r),I()),l.groupsIsEmpty(e.groups)&&(e.groups={}),b||st.closeList||Z({query:!0}),f(),e.oldQuery=e.oldQuery||e.query,e.query="",e.backspaceFocus=!1}},e.removeItem=function(n){c.disabled||b&&0>n||(w=b?d.$modelValue[n]:d.$modelValue,t.when(ft(e.$parent,{$item:w})).then(function(){(b||e.inputHide)&&(b?(d.$modelValue.splice(n,1),d.$setViewValue([].concat(d.$modelValue))):(F(),st.cleanModel&&d.$setViewValue(void 0)),(b||!e.backspaceFocus)&&(e.query=dt(w,$,B,at,o)||""),b&&st.closeList&&Z({query:!0}))}))},e.setSelection=function(t){m||e.selectorPosition===t?m=!1:et(rt,t)},e.keyUp=function(t){switch(t.keyCode){case 8:e.query.length||b&&e.output.length||Z()}},e.keyDown=function(t){var n=0,r=e.order.length-1;switch(t.keyCode){case 38:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n,et(rt,e.selectorPosition===n?r:e.selectorPosition-1),m=!0;break;case 40:e.selectorPosition=angular.isNumber(e.selectorPosition)?e.selectorPosition:n-1,et(rt,e.selectorPosition===r?n:e.selectorPosition+1),m=!0,e.query.length||e.isOpen||J(),e.inputHide&&F();break;case 37:case 39:break;case 9:L("tab");break;case 13:L("enter"),t.preventDefault();break;case 32:L("space");break;case 27:b||(I(),st.cleanModel&&d.$setViewValue(w)),Z();break;case 8:if(!e.query.length){if((!b||lt)&&(e.backspaceFocus=!0),e.backspaceFocus&&e.output&&(!b||e.output.length)){e.removeItem(e.output.length-1),lt&&t.preventDefault();break}e.backspaceFocus=!e.backspaceFocus;break}default:return e.inputHide&&F(),e.backspaceFocus=!1,!1}},e.getSearchLabel=function(t){var n=B(t);return pt(n,e.oldQuery||e.query,t,gt(e.$parent),o)},e.getDropdownLabel=function(t){var n=B(t);return mt(n,e.oldQuery||e.query,t,ht(e.$parent),o)},e.getGroupLabel=function(t,n){return wt(t,e.oldQuery||e.query,n,bt(e.$parent),o)},e.getDisableWhen=W,Z(),o[0].addEventListener("click",V,!0),o.on("focus",E),o.on("blur",q)}}}}]),angular.module("oi.select").filter("oiSelectGroup",["$sce",function(e){return function(t){return e.trustAsHtml(t)}}]).filter("oiSelectCloseIcon",["$sce",function(e){return function(t){var n='×';return e.trustAsHtml(t+n)}}]).filter("oiSelectHighlight",["$sce","oiSelectEscape",function(e,t){return function(n,r){var o;return r.length>0||angular.isNumber(r)?(n=n.toString(),r=t(r.toString()),o=n.replace(new RegExp(r,"gi"),"$&")):o=n,e.trustAsHtml(o)}}]).filter("oiSelectAscSort",["oiSelectEscape",function(e){function t(t,n,r,o){var i,u,s,l,a=[],c=[],d=[];if(n){for(n=e(String(n)),i=0,s=!1;i'; @@ -9,7 +9,7 @@ angular.module('selectDemo') }]) .filter('myDropdownFilter', ['$sce', function($sce) { - return function(label, query, option) { + return function(label, query, option, element) { var html = '#' + option.id + ' ' + label; @@ -18,13 +18,30 @@ angular.module('selectDemo') }]) .filter('myListFilter', function() { - return function (list, query, getLabel) { + return function (list, query, getLabel, options, element) { return list; } }) .factory('myEditItem', function() { - return function(removedValue, lastQuery, getLabel) { + return function(removedValue, lastQuery, getLabel, editItemIsCorrected, element) { return removedValue ? getLabel(removedValue) + ' :-)' : ''; }; + }) + + .filter('myGroupFilter', function($sce) { + return function(label, query, items, options, element) { + + element[query ? 'addClass' : 'removeClass']('show'); + + function toggle(element){ + angular.element(element).parent().parent().find('li').toggleClass('show'); + var iconElement = angular.element(element).find('span'); + iconElement.html(iconElement.html() === '+' ? '−' : '+'); + } + + var html = '
+ ' + label + '
'; + + return $sce.trustAsHtml(html); + }; }); \ No newline at end of file diff --git a/docs/examples/customization/template.html b/docs/examples/customization/template.html index 6ebf88f..a57f8d1 100644 --- a/docs/examples/customization/template.html +++ b/docs/examples/customization/template.html @@ -34,7 +34,7 @@

Customization

.filter('mySearchFilter', function($sce) { - return function(label, query, item, options) { + return function(label, query, item, options, element) { var html = '' + label + ''; @@ -44,7 +44,7 @@

Customization

.filter('myDropdownFilter', function($sce) { - return function(label, query, item, options) { + return function(label, query, item, options, element) { var html = '#' + item.id + ' ' + label; @@ -54,14 +54,14 @@

Customization

.filter('myListFilter', function() { - return function (list, query, getLabel, options) { + return function (list, query, getLabel, options, element) { return list; } });
.factory('myEditItem', function() { - return function(removedValue, lastQuery, getLabel) { + return function(removedValue, lastQuery, getLabel, isCorrected, element) { return removedValue ? getLabel(removedValue) + ' :-)' : ''; }; }) @@ -71,4 +71,88 @@

Customization

{{bundle}}
+
+ + +
+
+ +
+
+ +
+ +
+
+oi-options="item.name group by item.category for item in shopArr" +ng-model="bundle2" +oi-select-options="{ + closeList: false, + groupFilter: 'myGroupFilter' +}" +
+
+.filter('myGroupFilter', function($sce) { + return function(label, query, items, options, element) { + + element[query ? 'addClass' : 'removeClass']('show'); + + function toggle(element){ + angular.element(element).parent().parent().find('li').toggleClass('show'); + var iconElement = angular.element(element).find('span'); + iconElement.html(iconElement.html() === '+' ? '−' : '+'); + } + + var html = '
+ ' + label + '
'; + + return $sce.trustAsHtml(html); + }; +}); +
+
+oi-select .select-dropdown { + max-height: none; +} +oi-select .group-header { + cursor: pointer; +} +oi-select.show .select-dropdown .group-header-plus, +oi-select .select-dropdown li:not(.ungroup) { + display: none; +} +oi-select.show .select-dropdown li, +oi-select .select-dropdown li.show { + display: block; +} +
+
+
+{{bundle2}}
+
+
+ \ No newline at end of file diff --git a/docs/examples/validation/template.html b/docs/examples/validation/template.html index e7545d2..d49c1da 100644 --- a/docs/examples/validation/template.html +++ b/docs/examples/validation/template.html @@ -29,7 +29,7 @@

Validation


-

Also you can validate new items if return undefined or rejected promise from newItemFn

+

You can validate new items if return undefined or rejected promise from newItemFn

Validation
+
+ +

Also you can set maximum number of characters allowed in the input

+
+
+ +
+
+ +
+
+oi-options="item.name for item in shopArr" +ng-model="bundle3" +oi-select-options="{ + maxlength: 3 +}" +
+
+{{bundle3}}
+
+
+ \ No newline at end of file diff --git a/package.json b/package.json index c2246cb..f2ff635 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "oi.select", "license": "MIT", - "version": "0.2.18", + "version": "0.2.19", "repository": { "type": "git", "url": "git://github.com/tamtakoe/oi.select.git" diff --git a/src/directives.js b/src/directives.js index 8d3dde3..a410eb2 100644 --- a/src/directives.js +++ b/src/directives.js @@ -83,6 +83,10 @@ angular.module('oi.select') var listFilter = $filter(match[0]), listFilterOptionsFn = $parse(match[1]); + match = options.groupFilter.split(':'); + var groupFilter = $filter(match[0]), + groupFilterOptionsFn = $parse(match[1]); + if (options.newItemFn) { newItemFn = $parse(options.newItemFn); @@ -113,6 +117,10 @@ angular.module('oi.select') element[0].removeAttribute('tabindex'); } + if (options.maxlength) { + inputElement.attr('maxlength', options.maxlength); + } + attrs.$observe('disabled', function(value) { inputElement.prop('disabled', value); @@ -287,7 +295,7 @@ angular.module('oi.select') } if (multiple || !scope.backspaceFocus) { - scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected) || ''; + scope.query = editItemFn(removedItem, lastQuery, getLabel, editItemIsCorrected, element) || ''; } if (multiple && options.closeList) { @@ -393,13 +401,17 @@ angular.module('oi.select') scope.getSearchLabel = function(item) { var label = getLabel(item); - return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent)); + return searchFilter(label, scope.oldQuery || scope.query, item, searchFilterOptionsFn(scope.$parent), element); }; scope.getDropdownLabel = function(item) { var label = getLabel(item); - return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent)); + return dropdownFilter(label, scope.oldQuery || scope.query, item, dropdownFilterOptionsFn(scope.$parent), element); + }; + + scope.getGroupLabel = function(group, items) { + return groupFilter(group, scope.oldQuery || scope.query, items, groupFilterOptionsFn(scope.$parent), element); }; scope.getDisableWhen = getDisableWhen; @@ -582,7 +594,7 @@ angular.module('oi.select') if (values && !selectedAs) { var outputValues = multiple ? scope.output : []; - var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent)); + var filteredList = listFilter(oiUtils.objToArr(values), query, getLabel, listFilterOptionsFn(scope.$parent), element); var withoutIntersection = oiUtils.intersection(filteredList, outputValues, trackBy, trackBy, true); var filteredOutput = filter(withoutIntersection); diff --git a/src/filters.js b/src/filters.js index 90b77fe..703bab2 100644 --- a/src/filters.js +++ b/src/filters.js @@ -1,5 +1,11 @@ angular.module('oi.select') +.filter('oiSelectGroup', ['$sce', function($sce) { + return function(label) { + return $sce.trustAsHtml(label); + }; +}]) + .filter('oiSelectCloseIcon', ['$sce', function($sce) { return function(label) { var closeIcon = '×'; diff --git a/src/services.js b/src/services.js index 7b67e4f..ecd9461 100644 --- a/src/services.js +++ b/src/services.js @@ -7,16 +7,17 @@ angular.module('oi.select') searchFilter: 'oiSelectCloseIcon', dropdownFilter: 'oiSelectHighlight', listFilter: 'oiSelectAscSort', + groupFilter: 'oiSelectGroup', editItem: false, newItem: false, closeList: true, saveTrigger: 'enter tab blur' }, version: { - full: '0.2.18', + full: '0.2.19', major: 0, minor: 2, - dot: 18 + dot: 19 }, $get: function() { return { diff --git a/src/template.html b/src/template.html index ec85658..86f85d5 100644 --- a/src/template.html +++ b/src/template.html @@ -19,11 +19,11 @@
    + ng-bind-html="getGroupLabel(group, options)">