From 15070c02a7da24b41fa391853cb5f46fcbce632a Mon Sep 17 00:00:00 2001 From: Mark Pearce Date: Thu, 15 May 2014 09:35:11 -0300 Subject: [PATCH 1/4] Enabled tests and added ngSanitize to tester --- Gruntfile.js | 2 +- angular-toggle-switch.js | 22 +++++++++++++++++----- bower.json | 1 + karma.conf.js | 3 ++- test/angular-toggle-switch.spec.js | 28 +++++++++++++--------------- 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 8056e6d..e4de49a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function (grunt) { karma: { unit: { configFile: 'karma.conf.js', - singleRun: true + singleRun: false }, }, diff --git a/angular-toggle-switch.js b/angular-toggle-switch.js index e8041e3..3281c47 100644 --- a/angular-toggle-switch.js +++ b/angular-toggle-switch.js @@ -1,15 +1,14 @@ -angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () { +angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($compile) { return { restrict: 'EA', - replace: true, scope: { model: '=', disabled: '@', onLabel: '@', offLabel: '@', - knobLabel: '@' + knobLabel: '@', + html: '@' }, - template: '
', controller: function($scope) { $scope.toggle = function toggle() { if(!$scope.disabled) { @@ -17,11 +16,24 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () { } }; }, - compile: function(element, attrs) { + link: function(scope,element, attrs) { if (!attrs.onLabel) { attrs.onLabel = 'On'; } if (!attrs.offLabel) { attrs.offLabel = 'Off'; } if (!attrs.knobLabel) { attrs.knobLabel = '\u00a0'; } if (!attrs.disabled) { attrs.disabled = false; } + if (!attrs.html) { attrs.html = false; } + + var bindMethod = attrs.html ? 'ng-bind-html' : 'ng-bind'; + + var template= '
' + + '
' + + '' + + '' + + '' + + '
' + + '
'; + var e = $compile(template)(scope); + element.html(e.html()); }, }; }); diff --git a/bower.json b/bower.json index c1646ef..60a61df 100644 --- a/bower.json +++ b/bower.json @@ -12,6 +12,7 @@ }, "devDependencies": { "angular": ">=1.0", + "angular-sanitize": ">=1.0", "angular-mocks": ">=1.0" }, "ignore": [ diff --git a/karma.conf.js b/karma.conf.js index 6a8c68b..6b6c5f6 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -9,6 +9,7 @@ files = [ JASMINE_ADAPTER, 'bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', + 'bower_components/angular-sanitize/angular-sanitize.js', 'angular-toggle-switch.js', 'test/*.js' ]; @@ -51,7 +52,7 @@ if (process.env.KARMA_BROWSERS) { } // If browser does not capture in given timeout [ms], kill it -captureTimeout = 5000; +captureTimeout = 15000; // Continuous Integration mode // if true, it capture browsers, run tests and exit diff --git a/test/angular-toggle-switch.spec.js b/test/angular-toggle-switch.spec.js index 04888db..48f5b29 100644 --- a/test/angular-toggle-switch.spec.js +++ b/test/angular-toggle-switch.spec.js @@ -5,7 +5,7 @@ describe('Toggle Switch', function() { var onLabelTemplate = '\n'; var offLabelTemplate = '\n'; var knobLabelTemplate = '\n'; - var htmlLabelsTemplate = '\n'; + var htmlLabelsTemplate = '\n'; var disabledTemplate = '\n'; // Load up just our module @@ -80,13 +80,12 @@ describe('Toggle Switch', function() { }); describe('when there is a custom `on-label`', function () { - // @TODO: figure out how to deal with html in Angular 1.2 - //describe('is html', function() { - // it('sets the on label', function() { - // var elm = compileDirective(htmlLabelsTemplate, $scope); - // expect(elm.html()).toContain(''); - // }); - //}); + describe('is html', function() { + it('sets the on label', function() { + var elm = compileDirective(htmlLabelsTemplate, $scope); + expect(elm.html()).toContain(''); + }); + }); describe('is string', function() { it('sets the on label', function() { @@ -97,13 +96,12 @@ describe('Toggle Switch', function() { }); describe('when there is a custom `off-label`', function () { - // @TODO: figure out how to deal with html in Angular 1.2 - //describe('is html', function() { - // it('sets the on label', function() { - // var elm = compileDirective(htmlLabelsTemplate, $scope); - // expect(elm.html()).toContain(''); - // }); - //}); + describe('is html', function() { + it('sets the on label', function() { + var elm = compileDirective(htmlLabelsTemplate, $scope); + expect(elm.html()).toContain(''); + }); + }); describe('is string', function() { it('sets the on label', function() { From b263ce10f1c301b6451b8952203245f9581add2d Mon Sep 17 00:00:00 2001 From: Mark Pearce Date: Thu, 15 May 2014 14:59:34 -0300 Subject: [PATCH 2/4] Updated Directive to replace inner template with correct bind method --- angular-toggle-switch.js | 18 ++++++++++-------- karma.conf.js | 2 +- test/angular-toggle-switch.spec.js | 21 ++++++++++++++++++--- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/angular-toggle-switch.js b/angular-toggle-switch.js index 3281c47..7e9d00c 100644 --- a/angular-toggle-switch.js +++ b/angular-toggle-switch.js @@ -1,6 +1,7 @@ -angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($compile) { +angular.module('toggle-switch', ['ng', 'ngSanitize']).directive('toggleSwitch', function ($compile) { return { restrict: 'EA', + replace: true, scope: { model: '=', disabled: '@', @@ -9,6 +10,8 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($com knobLabel: '@', html: '@' }, + template: '
' + + '
', controller: function($scope) { $scope.toggle = function toggle() { if(!$scope.disabled) { @@ -16,7 +19,7 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($com } }; }, - link: function(scope,element, attrs) { + link: function(scope, element, attrs) { if (!attrs.onLabel) { attrs.onLabel = 'On'; } if (!attrs.offLabel) { attrs.offLabel = 'Off'; } if (!attrs.knobLabel) { attrs.knobLabel = '\u00a0'; } @@ -25,15 +28,14 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($com var bindMethod = attrs.html ? 'ng-bind-html' : 'ng-bind'; - var template= '
' + - '
' + + var innerTemplate = '
' + '' + '' + '' + - '
' + - '
'; - var e = $compile(template)(scope); - element.html(e.html()); + '
' ; + + element.html(innerTemplate); + $compile(element.contents())(scope); }, }; }); diff --git a/karma.conf.js b/karma.conf.js index 6b6c5f6..1405c37 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -52,7 +52,7 @@ if (process.env.KARMA_BROWSERS) { } // If browser does not capture in given timeout [ms], kill it -captureTimeout = 15000; +captureTimeout = 5000; // Continuous Integration mode // if true, it capture browsers, run tests and exit diff --git a/test/angular-toggle-switch.spec.js b/test/angular-toggle-switch.spec.js index 48f5b29..11a6cab 100644 --- a/test/angular-toggle-switch.spec.js +++ b/test/angular-toggle-switch.spec.js @@ -5,7 +5,8 @@ describe('Toggle Switch', function() { var onLabelTemplate = '\n'; var offLabelTemplate = '\n'; var knobLabelTemplate = '\n'; - var htmlLabelsTemplate = '\n'; + var htmlLabelsTemplate = '\n'; + var htmlLabelsFalseTemplate = '\n'; var disabledTemplate = '\n'; // Load up just our module @@ -87,6 +88,13 @@ describe('Toggle Switch', function() { }); }); + describe('is html, but html is off', function() { + it('sets the on label as encoded', function() { + var elm = compileDirective(htmlLabelsFalseTemplate, $scope); + expect(elm.html()).toContain("<i class='icon-ok icon-white'>"); + }); + }); + describe('is string', function() { it('sets the on label', function() { var elm = compileDirective(onLabelTemplate, $scope); @@ -97,14 +105,21 @@ describe('Toggle Switch', function() { describe('when there is a custom `off-label`', function () { describe('is html', function() { - it('sets the on label', function() { + it('sets the off label', function() { var elm = compileDirective(htmlLabelsTemplate, $scope); expect(elm.html()).toContain(''); }); }); + describe('is html, but html is off', function() { + it('sets the off label as encoded', function() { + var elm = compileDirective(htmlLabelsFalseTemplate, $scope); + expect(elm.html()).toContain("<i class='icon-remove'>"); + }); + }); + describe('is string', function() { - it('sets the on label', function() { + it('sets the off label', function() { var elm = compileDirective(offLabelTemplate, $scope); expect(elm.text()).toContain('CUSTOM-OFF'); }); From 81c5256e9d0fff62dc3dc3ba215e0a10eadbc876 Mon Sep 17 00:00:00 2001 From: Mark Pearce Date: Thu, 15 May 2014 15:01:01 -0300 Subject: [PATCH 3/4] Ran grunt build --- angular-toggle-switch.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-toggle-switch.min.js b/angular-toggle-switch.min.js index 108c272..ef25007 100644 --- a/angular-toggle-switch.min.js +++ b/angular-toggle-switch.min.js @@ -1 +1 @@ -angular.module("toggle-switch",["ng"]).directive("toggleSwitch",function(){return{restrict:"EA",replace:!0,scope:{model:"=",disabled:"@",onLabel:"@",offLabel:"@",knobLabel:"@"},template:'
',controller:["$scope",function($scope){$scope.toggle=function(){$scope.disabled||($scope.model=!$scope.model)}}],compile:function(element,attrs){attrs.onLabel||(attrs.onLabel="On"),attrs.offLabel||(attrs.offLabel="Off"),attrs.knobLabel||(attrs.knobLabel=" "),attrs.disabled||(attrs.disabled=!1)}}}); \ No newline at end of file +angular.module("toggle-switch",["ng","ngSanitize"]).directive("toggleSwitch",["$compile",function($compile){return{restrict:"EA",replace:!0,scope:{model:"=",disabled:"@",onLabel:"@",offLabel:"@",knobLabel:"@",html:"@"},template:'
',controller:["$scope",function($scope){$scope.toggle=function(){$scope.disabled||($scope.model=!$scope.model)}}],link:function(scope,element,attrs){attrs.onLabel||(attrs.onLabel="On"),attrs.offLabel||(attrs.offLabel="Off"),attrs.knobLabel||(attrs.knobLabel=" "),attrs.disabled||(attrs.disabled=!1),attrs.html||(attrs.html=!1);var bindMethod=attrs.html?"ng-bind-html":"ng-bind",innerTemplate='
';element.html(innerTemplate),$compile(element.contents())(scope)}}}]); \ No newline at end of file From d939373acb41d5e92519197ef34e2c2bb98ea421 Mon Sep 17 00:00:00 2001 From: Mark Pearce Date: Thu, 15 May 2014 15:13:26 -0300 Subject: [PATCH 4/4] reverted Gruntfile.js --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index e4de49a..8056e6d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function (grunt) { karma: { unit: { configFile: 'karma.conf.js', - singleRun: false + singleRun: true }, },