From 03ba9b3a851eb39b1f4e0b8b522a890a5cc853bf Mon Sep 17 00:00:00 2001 From: Eric Tonussi Date: Mon, 12 Mar 2018 19:41:14 -0300 Subject: [PATCH 1/2] Added suport to insert chip on field blur --- dist/angular-chips.js | 7 +++++++ dist/angular-chips.min.js | 2 +- src/js/directives/controls/chip_control.js | 7 +++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/dist/angular-chips.js b/dist/angular-chips.js index 0b3847f..322980b 100644 --- a/dist/angular-chips.js +++ b/dist/angular-chips.js @@ -411,6 +411,9 @@ return { restrict: 'A', require: '^chips', + scope: { + addOnBlur: '&?' + }, link: ChipControlLinkFun, } }; @@ -430,6 +433,10 @@ }); iElement.on('blur', function() { chipsCtrl.setFocus(false); + + if (scope.addOnBlur && event.target.value !== '' && chipsCtrl.addChip(event.target.value)) { + event.target.value = ''; + } }); }; })(); diff --git a/dist/angular-chips.min.js b/dist/angular-chips.min.js index 0d7fdb1..387d734 100644 --- a/dist/angular-chips.min.js +++ b/dist/angular-chips.min.js @@ -1 +1 @@ -!function(){function e(e){return e&&angular.isFunction(e.then)}function n(e){return{add:function(n){var t=angular.copy(e.$modelValue)||[];t.push(n),e.$setViewValue(t)},"delete":function(n){var t=angular.copy(e.$modelValue);t.splice(n,1),e.$setViewValue(t)},deleteByValue:function(n){var t,i;for(t=0;tl.chips.list.length-1?0:e}}if(""!==(error=o(a)))throw error;var f=n(s),h=u.hasOwnProperty("defer"),m=i(u.render);l.chips.list,l.chips.addChip=function(n){function i(e){l.chips.list.push(e),f.add(e)}var r,o;return void 0!==l.render&&""!==m?(o={},o[m]=n,r=l.render(o)):r=n,!!r&&(e(r)?(r.then(function(e){f.add(e)}),l.chips.list.push(new t(n,r)),l.$apply()):i(r),!0)},l.chips.deleteChip=function(e){var n=l.chips.list.splice(e,1)[0];return n.isFailed?void l.$apply():void(n instanceof t?f.deleteByValue(n.defer):f["delete"](e))},s.$render=function(){if(h&&s.$modelValue){var e,n=[];for(e=0;e"),C=a.html();C=C.substr(C.indexOf("")-"".length),a.find("chip-tmpl").remove();var $=angular.element(C);$.attr("ng-repeat","chip in chips.list track by $index"),$.attr("ng-class","{'chip-failed':chip.isFailed}"),$.attr("tabindex","-1"),$.attr("index","{{$index+1}}"),g.append($);var y=r(g)(l);a.prepend(y),a.on("click",function(e){"CHIPS"===e.target.nodeName&&a.find("input")[0].focus()}),a.find("input").on("focus",function(){v=null}),l.chips.handleKeyDown=function(e){function n(){var n=parseInt(document.activeElement.getAttribute("index"))||(t=a.find("chip-tmpl")).length;t=a.find("chip-tmpl"),t[n-1].focus(),v=p(n-1),"INPUT"!==e.target.nodeName&&t[v(e.keyCode)].focus()}if(!("INPUT"!==e.target.nodeName&&"CHIP-TMPL"!==e.target.nodeName||0===a.find("chip-tmpl").length&&""===e.target.value)){var t;if(8===e.keyCode){if("INPUT"===e.target.nodeName&&""===e.target.value)n(),e.preventDefault();else if("CHIP-TMPL"===e.target.nodeName){var i=a.find("chip-tmpl");i.length>0&&parseInt(e.target.getAttribute("index"))-1===i.length&&a.find("chip-tmpl")[v(37)].focus()}}else 37!==e.keyCode&&39!==e.keyCode||(null===v?n():a.find("chip-tmpl")[v(e.keyCode)].focus())}},a.on("keydown",l.chips.handleKeyDown),c(a).addClass("chip-out-focus")}return a.$inject=["scope","iElement","iAttrs","ngModelCtrl","transcludefn"],{restrict:"E",scope:{render:"&?"},transclude:!0,require:"ngModel",link:a,controller:"chipsController",controllerAs:"chips",template:"
"}}function o(e){return 0===e.find("chip-tmpl").length?"should have chip-tmpl":e.find("chip-tmpl").length>1?"should have only one chip-tmpl":""}function l(e,n,t){this.setFocus=function(e){e?t(n).removeClass("chip-out-focus").addClass("chip-in-focus"):t(n).removeClass("chip-in-focus").addClass("chip-out-focus")},this.removeChip=function(e,n){this.deleteChip(n)}}r.$inject=["$compile","$timeout","DomUtil"],l.$inject=["$scope","$element","DomUtil"],angular.module("angular.chips",[]).directive("chips",r).controller("chipsController",l)}(),function(){function e(){return{restrict:"E",transclude:!0,link:function(e,n,t,i,r){r(e,function(e){n.append(e)}),n.on("keydown",function(n){8===n.keyCode&&(e.$broadcast("chip:delete"),n.preventDefault())})}}}angular.module("angular.chips").directive("chipTmpl",e)}(),function(){function e(){return{restrict:"A",require:"^?chips",link:function(e,n,t,i){function r(e,n){var t;if(n.search("\\(")>0&&(n=n.substr(0,n.search("\\("))),void 0!==n)if(n.split(".").length>1){var i=n.split(".");t=e;for(var r=0;ro.chips.list.length-1?0:e}}if(""!==(error=l(c)))throw error;var f=n(s),h=u.hasOwnProperty("defer"),v=i(u.render);o.chips.list,o.chips.addChip=function(n){function i(e){o.chips.list.push(e),f.add(e)}var r,l;return void 0!==o.render&&""!==v?(l={},l[v]=n,r=o.render(l)):r=n,!!r&&(e(r)?(r.then(function(e){f.add(e)}),o.chips.list.push(new t(n,r)),o.$apply()):i(r),!0)},o.chips.deleteChip=function(e){var n=o.chips.list.splice(e,1)[0];return n.isFailed?void o.$apply():void(n instanceof t?f.deleteByValue(n.defer):f["delete"](e))},s.$render=function(){if(h&&s.$modelValue){var e,n=[];for(e=0;e"),C=c.html();C=C.substr(C.indexOf("")-"".length),c.find("chip-tmpl").remove();var $=angular.element(C);$.attr("ng-repeat","chip in chips.list track by $index"),$.attr("ng-class","{'chip-failed':chip.isFailed}"),$.attr("tabindex","-1"),$.attr("index","{{$index+1}}"),g.append($);var y=r(g)(o);c.prepend(y),c.on("click",function(e){"CHIPS"===e.target.nodeName&&c.find("input")[0].focus()}),c.find("input").on("focus",function(){m=null}),o.chips.handleKeyDown=function(e){function n(){var n=parseInt(document.activeElement.getAttribute("index"))||(t=c.find("chip-tmpl")).length;t=c.find("chip-tmpl"),t[n-1].focus(),m=p(n-1),"INPUT"!==e.target.nodeName&&t[m(e.keyCode)].focus()}if(!("INPUT"!==e.target.nodeName&&"CHIP-TMPL"!==e.target.nodeName||0===c.find("chip-tmpl").length&&""===e.target.value)){var t;if(8===e.keyCode){if("INPUT"===e.target.nodeName&&""===e.target.value)n(),e.preventDefault();else if("CHIP-TMPL"===e.target.nodeName){var i=c.find("chip-tmpl");i.length>0&&parseInt(e.target.getAttribute("index"))-1===i.length&&c.find("chip-tmpl")[m(37)].focus()}}else 37!==e.keyCode&&39!==e.keyCode||(null===m?n():c.find("chip-tmpl")[m(e.keyCode)].focus())}},c.on("keydown",o.chips.handleKeyDown),a(c).addClass("chip-out-focus")}return c.$inject=["scope","iElement","iAttrs","ngModelCtrl","transcludefn"],{restrict:"E",scope:{render:"&?"},transclude:!0,require:"ngModel",link:c,controller:"chipsController",controllerAs:"chips",template:"
"}}function l(e){return 0===e.find("chip-tmpl").length?"should have chip-tmpl":e.find("chip-tmpl").length>1?"should have only one chip-tmpl":""}function o(e,n,t){this.setFocus=function(e){e?t(n).removeClass("chip-out-focus").addClass("chip-in-focus"):t(n).removeClass("chip-in-focus").addClass("chip-out-focus")},this.removeChip=function(e,n){this.deleteChip(n)}}r.$inject=["$compile","$timeout","DomUtil"],o.$inject=["$scope","$element","DomUtil"],angular.module("angular.chips",[]).directive("chips",r).controller("chipsController",o)}(),function(){function e(){return{restrict:"E",transclude:!0,link:function(e,n,t,i,r){r(e,function(e){n.append(e)}),n.on("keydown",function(n){8===n.keyCode&&(e.$broadcast("chip:delete"),n.preventDefault())})}}}angular.module("angular.chips").directive("chipTmpl",e)}(),function(){function e(){return{restrict:"A",require:"^?chips",link:function(e,n,t,i){function r(e,n){var t;if(n.search("\\(")>0&&(n=n.substr(0,n.search("\\("))),void 0!==n)if(n.split(".").length>1){var i=n.split(".");t=e;for(var r=0;r Date: Mon, 12 Mar 2018 19:42:37 -0300 Subject: [PATCH 2/2] layout para webfoco --- dist/main.css | 12 ++---------- src/css/main.scss | 12 ++++++------ 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/dist/main.css b/dist/main.css index f4bd0f4..3ae631e 100644 --- a/dist/main.css +++ b/dist/main.css @@ -1,17 +1,15 @@ chip-tmpl { display: inline-block; - margin: 0 5px 5px 0; } + margin: 0 5px 0 0; } .default-chip { - border: 2px solid #e0e0e0; border-radius: 5px; background: #e0e0e0; - padding: 5px; } + padding: 0 5px; } chip-tmpl:focus { outline: none; } chip-tmpl:focus .default-chip { - border: 2px solid #9e9e9e; background: #9e9e9e; color: white; } @@ -29,9 +27,3 @@ chips { font-size: 14px; } chips > div > input:focus { outline: none; } - -.chip-out-focus { - border-bottom: 1px solid #e0e0e0; } - -.chip-in-focus { - border-bottom: 1px solid #106cc8; } diff --git a/src/css/main.scss b/src/css/main.scss index 88bd3df..0365391 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -4,20 +4,20 @@ $chip-tmpl-focus-color: rgb(158, 158, 158); chip-tmpl { display: inline-block; - margin: 0 5px 5px 0; + margin: 0 5px 0 0; } .default-chip { - border: 2px solid $default-color; + // border: 2px solid $default-color; border-radius: 5px; background: $default-color; - padding: 5px; + padding: 0 5px; } chip-tmpl:focus { outline: none; .default-chip { - border: 2px solid $chip-tmpl-focus-color; + // border: 2px solid $chip-tmpl-focus-color; background: $chip-tmpl-focus-color; color: white; } @@ -46,9 +46,9 @@ chips { } .chip-out-focus { - border-bottom: 1px solid $default-color; + // border-bottom: 1px solid $default-color; } .chip-in-focus { - border-bottom: 1px solid $focus-color; + // border-bottom: 1px solid $focus-color; }