From e06f965bb79a12873a3a6ee8d3ac029763c03502 Mon Sep 17 00:00:00 2001 From: Stefan Walther Date: Tue, 3 Nov 2015 23:37:00 +0100 Subject: [PATCH 1/3] Remove orientation classes before adding --- angular.rangeSlider.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/angular.rangeSlider.js b/angular.rangeSlider.js index 25de490..b73441f 100644 --- a/angular.rangeSlider.js +++ b/angular.rangeSlider.js @@ -209,6 +209,9 @@ useClass = classNames.join(' '); + // remove classes before adding + $slider.removeClass('ngrs-vertical ngrs-left ngrs-right ngrs-horizontal'); + // add class to element $slider.addClass(useClass); From b752a39e9a6e4f75b55d7ce9d5d38075af9f17b7 Mon Sep 17 00:00:00 2001 From: Stefan Walther Date: Tue, 3 Nov 2015 23:41:24 +0100 Subject: [PATCH 2/3] Re-order removal --- angular.rangeSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular.rangeSlider.js b/angular.rangeSlider.js index b73441f..560866e 100644 --- a/angular.rangeSlider.js +++ b/angular.rangeSlider.js @@ -210,7 +210,7 @@ useClass = classNames.join(' '); // remove classes before adding - $slider.removeClass('ngrs-vertical ngrs-left ngrs-right ngrs-horizontal'); + $slider.removeClass('ngrs-horizontal ngrs-vertical ngrs-left ngrs-right'); // add class to element $slider.addClass(useClass); From 4ac286317d2259020b6499c377606ae2b8dd2886 Mon Sep 17 00:00:00 2001 From: Stefan Walther Date: Wed, 4 Nov 2015 19:41:17 +0100 Subject: [PATCH 3/3] Allow orientation to be changed on the fly. --- angular.rangeSlider.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/angular.rangeSlider.js b/angular.rangeSlider.js index 560866e..66051f1 100644 --- a/angular.rangeSlider.js +++ b/angular.rangeSlider.js @@ -169,12 +169,17 @@ */ var $slider = angular.element(element), + uiDefaults = { + pos: 'left', + posOpp: 'right', + orientation: 0 + }, handles = [element.find('.ngrs-handle-min'), element.find('.ngrs-handle-max')], values = [element.find('.ngrs-value-min'), element.find('.ngrs-value-max')], join = element.find('.ngrs-join'), - pos = 'left', - posOpp = 'right', - orientation = 0, + pos = uiDefaults.pos, + posOpp = uiDefaults.posOpp, + orientation = uiDefaults.orientation, allowedRange = [0, 0], range = 0, down = false; @@ -209,7 +214,7 @@ useClass = classNames.join(' '); - // remove classes before adding + // remove classes before adding to ensure that there are no left-overs, so changing the orientation on the fly will work. $slider.removeClass('ngrs-horizontal ngrs-vertical ngrs-left ngrs-right'); // add class to element @@ -220,7 +225,14 @@ pos = 'top'; posOpp = 'bottom'; orientation = 1; + } else { // back to defaults + pos = uiDefaults.pos; + posOpp = uiDefaults.posOpp; + orientation = uiDefaults.orientation; } + + setMinMax(); + setPinHandle( scopeOptions.pinHandle ); }); attrs.$observe('step', function(val) { @@ -396,6 +408,13 @@ scope.filteredModelMax = scope.modelMax; } + // Reset CSS before applying, so changing the orientation on the fly will work. + angular.element( handles[0] ).css( 'top', '' ).css( 'bottom', '' ).css( 'left', '' ).css( 'right', '' ); + angular.element( handles[1] ).css( 'top', '' ).css( 'bottom', '' ).css( 'left', '' ).css( 'right', '' ); + angular.element( values[0] ).css( 'top', '' ).css( 'bottom', '' ).css( 'left', '' ).css( 'right', '' ); + angular.element( values[1] ).css( 'top', '' ).css( 'bottom', '' ).css( 'left', '' ).css( 'right', '' ); + angular.element( join ).css( 'top', '' ).css( 'bottom', '' ).css( 'left', '' ).css( 'right', '' ); + // check for no range if (scope.min === scope.max && scope.modelMin == scope.modelMax) {