Skip to content
This repository was archived by the owner on Dec 3, 2021. It is now read-only.

Allow empty labels, move state CSS class to outer div. #54

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Allow empty labels, move state CSS class to outer div. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19ccd1e
Move switch state CSS classes to outer div.
Jan 6, 2015
a83975c
Allow empty labels via attrs.
Jan 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions angular-toggle-switch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,18 @@
z-index: 100;
}

.toggle-switch .switch-on {
.toggle-switch-animate {
transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
-webkit-transition: left 0.5s;
}

.toggle-switch.switch-on .toggle-switch-animate {
left: 0%;
}

.toggle-switch .switch-off {
.toggle-switch.switch-off .toggle-switch-animate {
left: -50%
}

Expand All @@ -64,10 +71,3 @@
color: #333;
background: #f0f0f0;
}

.toggle-switch-animate {
transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
-webkit-transition: left 0.5s;
}
10 changes: 5 additions & 5 deletions angular-toggle-switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@
offLabel: '@',
knobLabel: '@'
},
template: '<div role="radio" class="toggle-switch" ng-class="{ \'disabled\': disabled }">' +
'<div class="toggle-switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
template: '<div role="radio" class="toggle-switch" ng-class="{\'disabled\': disabled, \'switch-off\': !model, \'switch-on\': model}">' +
'<div class="toggle-switch-animate">' +
'<span class="switch-left" ng-bind="onLabel"></span>' +
'<span class="knob" ng-bind="knobLabel"></span>' +
'<span class="switch-right" ng-bind="offLabel"></span>' +
'</div>' +
'</div>',
compile: function(element, attrs) {
if (!attrs.onLabel) { attrs.onLabel = toggleSwitchConfig.onLabel; }
if (!attrs.offLabel) { attrs.offLabel = toggleSwitchConfig.offLabel; }
if (!attrs.knobLabel) { attrs.knobLabel = toggleSwitchConfig.knobLabel; }
if (angular.isUndefined(attrs.onLabel)) { attrs.onLabel = toggleSwitchConfig.onLabel; }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a specific reason you switched these? If I remember correctly, there is a reason we do this.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes; because it was impossible to specify an empty label via a directive attribute.

foo = '';
!foo;  // true
angular.isUndefined(foo);  // false

You can try the new tests for empty labels on master and watch 'em fail.

if (angular.isUndefined(attrs.offLabel)) { attrs.offLabel = toggleSwitchConfig.offLabel; }
if (angular.isUndefined(attrs.knobLabel)) { attrs.knobLabel = toggleSwitchConfig.knobLabel; }

return this.link;
},
Expand Down
27 changes: 26 additions & 1 deletion test/angular-toggle-switch.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
describe('Toggle Switch', function() {
var $scope, $compile;
var $scope, $compile, isolateScope;

var baseTemplate = '<toggle-switch ng-model="switchState">\n</toggle-switch>';
var emptyOnLabelTemplate = '<toggle-switch ng-model="switchState" on-label="">\n</toggle-switch>';
var emptyOffLabelTemplate = '<toggle-switch ng-model="switchState" off-label="">\n</toggle-switch>';
var emptyKnobLabelTemplate = '<toggle-switch ng-model="switchState" knob-label="">\n</toggle-switch>';
var onLabelTemplate = '<toggle-switch ng-model="switchState" on-label="CUSTOM-ON">\n</toggle-switch>';
var offLabelTemplate = '<toggle-switch ng-model="switchState" off-label="CUSTOM-OFF">\n</toggle-switch>';
var knobLabelTemplate = '<toggle-switch ng-model="switchState" knob-label="CUSTOM">\n</toggle-switch>';
Expand All @@ -22,6 +25,7 @@ describe('Toggle Switch', function() {
var elm = angular.element(template);
$compile(elm)(scope);
scope.$apply();
isolateScope = elm.isolateScope();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the need for the isolateScope?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to keep the expect() simple in the tests -- since jQuery isn't available, I wasn't sure how exactly to do the equivalent of e.g., elm.find('.knob-label'). But might as well test what the directive sets within its isolate scope anyway, since that doesn't rely on the css class.

return elm;
}

Expand Down Expand Up @@ -96,6 +100,13 @@ describe('Toggle Switch', function() {
});
});

describe('with an empty `on-label`', function() {
it('sets the label empty', function() {
var elm = compileDirective(emptyOnLabelTemplate, $scope);
expect(isolateScope.onLabel).toEqual('');
});
});

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() {
Expand All @@ -113,13 +124,27 @@ describe('Toggle Switch', function() {
});
});

describe('with an empty `off-label`', function() {
it('sets the label empty', function() {
var elm = compileDirective(emptyOffLabelTemplate, $scope);
expect(isolateScope.offLabel).toEqual('');
});
});

describe('when there is a custom `knob-label`', function () {
it('sets the on label', function() {
var elm = compileDirective(knobLabelTemplate, $scope);
expect(elm.text()).toContain('CUSTOM');
});
});

describe('with an empty `knob-label`', function() {
it('sets the label empty', function() {
var elm = compileDirective(emptyKnobLabelTemplate, $scope);
expect(isolateScope.knobLabel).toEqual('');
});
});

describe('when toggle is disabled', function() {
it('ngModel does not change on click', function() {
$scope.switchState = true;
Expand Down