Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(slider): dont run touchend listener if disabled
Browse files Browse the repository at this point in the history 
Closes #1308. Closes #1307.
  • Loading branch information
@ajoslin
ajoslin committed Jan 27, 2015
1 parent 50cd2ed commit 5bbd23d
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 45 deletions.
11 changes: 8 additions & 3 deletions src/components/slider/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,10 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
$viewChangeListeners: []
};

var isDisabledGetter = $parse(attr.ngDisabled);
var isDisabledParsed = attr.ngDisabled && $parse(attr.ngDisabled);
var isDisabledGetter = isDisabledParsed ?
function() { return isDisabledParsed(scope.$parent); } :
angular.noop;
var thumb = angular.element(element[0].querySelector('.md-thumb'));
var thumbText = angular.element(element[0].querySelector('.md-thumb-text'));
var thumbContainer = thumb.parent();
Expand Down Expand Up @@ -281,7 +284,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
var isDiscrete = angular.isDefined(attr.mdDiscrete);

function onPressDown(ev) {
if (isDisabledGetter(scope)) return;
if (isDisabledGetter()) return;

element.addClass('active');
element[0].focus();
Expand All @@ -295,6 +298,8 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
});
}
function onPressUp(ev) {
if (isDisabledGetter()) return;

element.removeClass('dragging active');

var exactVal = percentToValue( positionToPercent( ev.pointer.x ));
Expand All @@ -304,7 +309,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
});
}
function onDragStart(ev) {
if (isDisabledGetter(scope)) return;
if (isDisabledGetter()) return;
isDragging = true;
ev.stopPropagation();

Expand Down
110 changes: 68 additions & 42 deletions src/components/slider/slider.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,26 @@ describe('md-slider', function() {
beforeEach(module('ngAria'));
beforeEach(module('material.components.slider'));

function setup(attrs, dimensions) {
var slider;
inject(function($compile, $rootScope) {
slider = $compile('<md-slider ' + (attrs || '') + '>')($rootScope);
spyOn(
slider[0].querySelector('.md-track-container'),
'getBoundingClientRect'
).andReturn(angular.extend({
width: 100,
left: 0,
right: 0
}, dimensions || {}));
});
return slider;
}

it('should set model on press', inject(function($compile, $rootScope, $timeout) {
var slider = $compile('<md-slider ng-model="value" min="0" max="100">')($rootScope);
var slider = setup('ng-model="value" min="0" max="100"');
$rootScope.$apply('value = 50');

spyOn(slider[0].querySelector('.md-track-container'), 'getBoundingClientRect').andReturn({
width: 100,
left: 0,
right: 0
});

slider.triggerHandler({type: '$md.pressdown', pointer: { x: 30 }});
slider.triggerHandler({type: '$md.dragstart', pointer: { x: 30 } });
$timeout.flush();
Expand All @@ -29,10 +39,7 @@ describe('md-slider', function() {
}));

it('should increment model on right arrow', inject(function($compile, $rootScope, $timeout, $mdConstant) {
var slider = $compile(
'<md-slider min="100" max="104" step="2" ng-model="model">'
)($rootScope);

var slider = setup('min="100" max="104" step="2" ng-model="model"');
$rootScope.$apply('model = 100');

slider.triggerHandler({
Expand All @@ -59,10 +66,7 @@ describe('md-slider', function() {
}));

it('should decrement model on left arrow', inject(function($compile, $rootScope, $timeout, $mdConstant) {
var slider = $compile(
'<md-slider min="100" max="104" step="2" ng-model="model">'
)($rootScope);

var slider = setup('min="100" max="104" step="2" ng-model="model"');
$rootScope.$apply('model = 104');

slider.triggerHandler({
Expand All @@ -89,14 +93,9 @@ describe('md-slider', function() {
}));

it('should update the thumb text', inject(function($compile, $rootScope, $timeout, $mdConstant) {
var slider = $compile('<md-slider ng-model="value" md-discrete min="0" max="100" step="1">')($rootScope);
var slider = setup('ng-model="value" md-discrete min="0" max="100" step="1"');

$rootScope.$apply('value = 30');
spyOn(slider[0].querySelector('.md-track-container'), 'getBoundingClientRect').andReturn({
width: 100,
left: 0,
right: 0
});
expect(slider[0].querySelector('.md-thumb-text').textContent).toBe('30');

slider.triggerHandler({
Expand All @@ -115,47 +114,33 @@ describe('md-slider', function() {
}));

it('should update the thumb text with the model value when using ng-change', inject(function($compile, $rootScope, $timeout) {
$scope = $rootScope.$new();

$scope.stayAt50 = function () {
$scope.value = 50;
$rootScope.stayAt50 = function () {
$rootScope.value = 50;
};

var slider = $compile('<md-slider ng-model="value" min="0" max="100" ng-change="stayAt50()">')($scope);
var slider = setup('ng-model="value" min="0" max="100" ng-change="stayAt50()"');
var sliderCtrl = slider.controller('mdSlider');

spyOn(slider[0].querySelector('.md-track-container'), 'getBoundingClientRect').andReturn({
width: 100,
left: 0,
right: 0
});

slider.triggerHandler({type: '$md.pressdown', pointer: { x: 30 }});
$timeout.flush();
expect($scope.value).toBe(50);
expect($rootScope.value).toBe(50);
expect(slider[0].querySelector('.md-thumb-text').textContent).toBe('50');
}));

it('should call $log.warn if aria-label isnt provided', inject(function($compile, $rootScope, $timeout, $log) {
spyOn($log, "warn");
var element = $compile(
'<md-slider min="100" max="104" step="2" ng-model="model"></md-slider>'
)($rootScope);
var element = setup('min="100" max="104" step="2" ng-model="model"');
expect($log.warn).toHaveBeenCalled();
}));

it('should not call $log.warn if aria-label is provided', inject(function($compile, $rootScope, $timeout, $log) {
spyOn($log, "warn");
var element = $compile(
'<md-slider aria-label="banana" min="100" max="104" step="2" ng-model="model"></md-slider>'
)($rootScope);
var element = setup('aria-label="banana" min="100" max="104" step="2" ng-model="model"');
expect($log.warn).not.toHaveBeenCalled();
}));

it('should add aria attributes', inject(function($compile, $rootScope, $timeout, $mdConstant){
var slider = $compile(
'<md-slider min="100" max="104" step="2" ng-model="model">'
)($rootScope);
var slider = setup('min="100" max="104" step="2" ng-model="model"');

$rootScope.$apply('model = 102');

Expand All @@ -171,4 +156,45 @@ describe('md-slider', function() {
$timeout.flush();
expect(slider.attr('aria-valuenow')).toEqual('100');
}));

it('should ignore pressdown events when disabled', inject(function($compile, $rootScope, $timeout) {
$rootScope.isDisabled = true;
var slider = setup('ng-disabled="isDisabled"');

// Doesn't add active class on pressdown when disabled
slider.triggerHandler({
type: '$md.pressdown',
pointer: {}
});
expect(slider).not.toHaveClass('active');

// Doesn't remove active class up on pressup when disabled
slider.addClass('active');
slider.triggerHandler({
type: '$md.pressup',
pointer: {}
});
expect(slider).toHaveClass('active');

slider.triggerHandler('$md.pressdown');

This comment has been minimized.

Sign in to view

Copy link
@ajoslin

ajoslin Jan 27, 2015

Author Contributor

Remove this
}));

it('should add active class on pressdown and remove on pressup', inject(function($rootScope) {
var slider = setup();

expect(slider).not.toHaveClass('active');

slider.triggerHandler({
type: '$md.pressdown',
pointer: {}
});
expect(slider).toHaveClass('active');

slider.triggerHandler({
type: '$md.pressup',
pointer: {}
});
expect(slider).not.toHaveClass('active');
}));

});

1 comment on commit 5bbd23d

@gkalpak
Copy link
Member

Choose a reason for hiding this comment

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

With the new setup helper, some dependencies don't need to be injected in some tests.

Please sign in to comment.