From 3e3d81cddf611f3e2604b361799ce0360509f2d9 Mon Sep 17 00:00:00 2001 From: Jeff Uyeno Date: Thu, 15 Oct 2015 15:30:45 -0700 Subject: [PATCH 1/4] adding custom icon support --- bower.json | 3 --- src/has-feedback.coffee | 8 +++++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index d62e10f..4a34200 100644 --- a/bower.json +++ b/bower.json @@ -27,8 +27,5 @@ }, "dependencies": { "angular": ">1.3.0" - }, - "resolutions": { - "angular": "1.3.6" } } diff --git a/src/has-feedback.coffee b/src/has-feedback.coffee index 78c88f5..466cde8 100644 --- a/src/has-feedback.coffee +++ b/src/has-feedback.coffee @@ -11,9 +11,15 @@ angular.module("ng-form-group") .directive "hasFeedbackWatcher", -> require: "ngModel", link: (scope, input, attrs, ctrl) -> + + validIcon = attrs.validIcon || "glyphicon-ok" + invalidIcon = attrs.invalidIcon || "glyphicon-remove" + feedbackTemplate = attrs.feedbackTemplate || ""; + + feedbackIcon = (isGood = false) -> icon = if isGood then "glyphicon-ok" else "glyphicon-remove" - "" + feedbackTemplate.replace /{{feedbackIcon}}/, icon unref = scope.$watch -> return unless ctrl.$dirty From 55f1c185e9a2d1ec05f7e2386eabd9ebea70d85b Mon Sep 17 00:00:00 2001 From: Jeff Uyeno Date: Thu, 15 Oct 2015 17:09:46 -0700 Subject: [PATCH 2/4] adding tests for has-feedback --- src/has-feedback.coffee | 8 ++++---- tests/has-feedback.coffee | 22 ++++++++++++++++++++++ 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/has-feedback.coffee b/src/has-feedback.coffee index 466cde8..bb17dcc 100644 --- a/src/has-feedback.coffee +++ b/src/has-feedback.coffee @@ -8,17 +8,17 @@ angular.module("ng-form-group") toArray(el[0].querySelectorAll(".form-control")).forEach (input) -> input.setAttribute("has-feedback-watcher", "") -.directive "hasFeedbackWatcher", -> +.directive "hasFeedbackWatcher", ($templateCache) -> require: "ngModel", link: (scope, input, attrs, ctrl) -> validIcon = attrs.validIcon || "glyphicon-ok" invalidIcon = attrs.invalidIcon || "glyphicon-remove" - feedbackTemplate = attrs.feedbackTemplate || ""; - + feedbackTemplate = $templateCache.get(attrs.feedbackTemplate) || ""; + console.log feedbackTemplate feedbackIcon = (isGood = false) -> - icon = if isGood then "glyphicon-ok" else "glyphicon-remove" + icon = if isGood then validIcon else invalidIcon feedbackTemplate.replace /{{feedbackIcon}}/, icon unref = scope.$watch -> diff --git a/tests/has-feedback.coffee b/tests/has-feedback.coffee index 2884516..c14453c 100644 --- a/tests/has-feedback.coffee +++ b/tests/has-feedback.coffee @@ -36,3 +36,25 @@ describe 'The informative has-feedback directive', -> expect(find(el, '.glyphicon-ok').length).toBe(0) expect(find(el, '.glyphicon-remove').length).toBe(1) + + it "should allow the use of custom feedback icons", -> + [el, ctrl] = factory('') + ctrl.input.$setViewValue('1000') + ctrl.input.$setViewValue('') + + expect(find(el, '.glyphicon-ok').length).toBe(0) + expect(find(el, '.glyphicon-remove').length).toBe(0) + expect(find(el, '.kbai').length).toBe(1) + + it "should allow the use of custom feedback templates", -> + inject ($templateCache) -> + $templateCache.put 'custom-feedback.html', '' + [el, ctrl] = factory('') + + # [el, ctrl] = factory('') + ctrl.input.$setViewValue('1000') + ctrl.input.$setViewValue('') + + expect(find(el, '.custom-feedback').length).toBe(1) + expect(find(el, '.glyphicon-ok').length).toBe(0) + expect(find(el, '.glyphicon-remove').length).toBe(0) \ No newline at end of file From 9758a6cf59a30b59079cad80410d9a39fdcb52a2 Mon Sep 17 00:00:00 2001 From: Jeff Uyeno Date: Thu, 15 Oct 2015 17:12:28 -0700 Subject: [PATCH 3/4] cleaning up debug code --- src/has-feedback.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/src/has-feedback.coffee b/src/has-feedback.coffee index bb17dcc..ae53d65 100644 --- a/src/has-feedback.coffee +++ b/src/has-feedback.coffee @@ -15,7 +15,6 @@ angular.module("ng-form-group") validIcon = attrs.validIcon || "glyphicon-ok" invalidIcon = attrs.invalidIcon || "glyphicon-remove" feedbackTemplate = $templateCache.get(attrs.feedbackTemplate) || ""; - console.log feedbackTemplate feedbackIcon = (isGood = false) -> icon = if isGood then validIcon else invalidIcon From fba64ea38d1d2e652c24841f810a4a7cf0d86e2b Mon Sep 17 00:00:00 2001 From: Jeff Uyeno Date: Thu, 15 Oct 2015 17:20:03 -0700 Subject: [PATCH 4/4] updating readme with custom feedback icons --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 8fabd36..f1e5bb5 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,16 @@ icons to your form fields. ![Validation in action](./docs/iconstates.png) +## Bonus bonus round: custom feedback icons! + +`feedback-template` will look for a template in cache to use instead of the default one. +*note:* this template needs to have a css class of `form-control-feedback` or +you will get strange behavior. + +`valid-icon` will use this instead of the default `glyphicon-ok` when valid + +`invalid-icon` will use this instead of the default `glyphicon-remove` when invalid + ## Contributing