Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ff0c08c

Browse files
denisosdenisos
committed
Merge pull request #5 from denisos/master
require angular form and setDirty when slider changes; color fix
2 parents 8ae3fb0 + b0c9d44 commit ff0c08c

File tree

9 files changed

+100
-37
lines changed

9 files changed

+100
-37
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎demo/demo.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
22

33
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
4+
$scope.submitForm = function() {
5+
alert("submitted")
6+
};
7+
48
//Minimal slider config
59
$scope.minSlider = {
610
value: 10
711
};
812

913

1014
$scope.otPriceRangeSlider= {
11-
locale: "de_de", // locale
12-
minValue: 47, // range low value
13-
maxValue: 73 // range high value
15+
locale: "de-de", // locale
16+
minValue: 45, // range low value
17+
maxValue: 70 // range high value
1418
}
1519

1620

@@ -24,7 +28,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
2428
hideLimitLabels: true, // hide upper and lower labels
2529
noSwitching: true, // cant drag ranges past each other
2630
translate: (value, sliderId, label) => {
27-
console.log("translate", value, " ", label)
31+
//console.log("translate", value, " ", label)
2832
// if (label === "ceil") {
2933
// return `>$${value}`
3034
// }

‎demo/index.html

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,21 @@ <h2>Simple slider</h2>
2525
<rzslider rz-slider-model="minSlider.value"></rzslider>
2626
</article>
2727

28-
<article>
29-
<h2>ot-price-range-slider wrapper</h2>
30-
Min Value: <input type="number" ng-model="otPriceRangeSlider.minValue"/><br/>
31-
Max Value: <input type="number" ng-model="otPriceRangeSlider.maxValue"/><br/>
32-
<ot-price-range-slider
33-
locale="otPriceRangeSlider.locale"
34-
min="otPriceRangeSlider.minValue"
35-
max="otPriceRangeSlider.maxValue">
36-
</ot-price-range-slider>
37-
</article>
38-
28+
<form name="otPRForm">
29+
<article>
30+
<h2>ot-price-range-slider wrapper</h2>
31+
Min Value: <input type="number" ng-model="otPriceRangeSlider.minValue"/><br/>
32+
Max Value: <input type="number" ng-model="otPriceRangeSlider.maxValue"/><br/>
33+
<ot-price-range-slider
34+
locale="otPriceRangeSlider.locale"
35+
min="otPriceRangeSlider.minValue"
36+
max="otPriceRangeSlider.maxValue">
37+
</ot-price-range-slider>
38+
</article>
39+
40+
<button type="submit" ng-disabled="!otPRForm.$dirty"
41+
ng-click="submitForm()">Submit</button>
42+
</form>
3943

4044
<article>
4145
<h2>opentable-style Range slider rzslider directly</h2>

‎dist/rzslider.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.14.0 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-06-03 */
4+
2016-06-09 */
55
.rzslider {
66
position: relative;
77
display: inline-block;
@@ -67,7 +67,7 @@
6767

6868
.rzslider .rz-bar.rz-selection {
6969
z-index: 2;
70-
background: #0db9f0;
70+
background: #6cb6f5;
7171
-webkit-border-radius: 2px;
7272
-moz-border-radius: 2px;
7373
border-radius: 2px;
@@ -154,7 +154,7 @@
154154
}
155155

156156
.rzslider .rz-ticks .rz-tick.rz-selected {
157-
background: #0db9f0;
157+
background: #6cb6f5;
158158
}
159159

160160
.rzslider .rz-ticks .rz-tick .rz-tick-value {
@@ -260,7 +260,9 @@
260260
left: initial;
261261
}
262262

263-
/* Opentable style customizations */
263+
/**
264+
* Opentable style overrides
265+
*/
264266

265267
.rzslider.opentable-style .rz-pointer {
266268
width: 8px;

‎dist/rzslider.js

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.14.0 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-06-03 */
4+
2016-06-09 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -1970,31 +1970,35 @@
19701970
.directive('otPriceRangeSlider', ['$compile', function ($compile) {
19711971
return {
19721972
restrict: 'E',
1973+
require: '^form',
19731974
scope: {
19741975
locale:"=",
19751976
min:"=",
19761977
max:"="
19771978
},
1978-
link: function (scope, iElm, iAttrs, controller) {
1979+
link: function (scope, iElm, iAttrs, formController) {
1980+
var originalMin = scope.min;
1981+
var originalMax = scope.max;
1982+
19791983
// load locale specific settings; default to us if none passed
19801984
// or lang locale not found
19811985
var localeConfigList = {
1982-
"en_us": {
1986+
"en-us": {
19831987
floor: 20,
19841988
ceil: 80,
19851989
step: 1,
19861990
currency: "$"
19871991
},
1988-
"de_de": {
1992+
"de-de": {
19891993
floor: 10,
19901994
ceil: 90,
1991-
step: 5,
1995+
step: 1,
19921996
currency: "€"
19931997
},
1994-
"en_ca": {
1998+
"en-ca": {
19951999
floor: 30,
19962000
ceil: 100,
1997-
step: 6,
2001+
step: 1,
19982002
currency: "C$"
19992003
}
20002004
}
@@ -2017,15 +2021,25 @@
20172021
hideLimitLabels: true, // hide upper and lower labels
20182022
noSwitching: true, // cant drag ranges past each other
20192023
translate: function(value, sliderId, label) {
2024+
// if low value changed
20202025
if (label === "model") {
20212026
scope.min = value; // set outside scope var
2027+
2028+
markFormDirty(formController, originalMin, value);
2029+
2030+
console.log("changed low value", value);
20222031
if (value === localeConfig.floor) {
20232032
return '<' + localeConfig.currency + value;
20242033
}
20252034
}
20262035

2036+
// if high value changed
20272037
if (label === "high") {
20282038
scope.max = value; // set outside scope var
2039+
2040+
markFormDirty(formController, originalMax, value);
2041+
2042+
console.log("changed high value", value);
20292043
if (value === localeConfig.ceil) {
20302044
return '>' + localeConfig.currency + value;
20312045
}
@@ -2036,13 +2050,24 @@
20362050
}
20372051
};
20382052

2053+
// wrap the rzslider control and pass it ot configuration
2054+
// angular compile it and then add it to html
20392055
var otSliderHtml = '<rzslider class="opentable-style" '
20402056
+ 'rz-slider-model="otPRConfig.minValue" '
20412057
+ 'rz-slider-high="otPRConfig.maxValue" '
20422058
+ 'rz-slider-options="otPRConfig.options" '
20432059
+ '></rzslider>';
20442060
var otSlider = $compile(otSliderHtml)(scope);
20452061
iElm.append(otSlider);
2062+
2063+
2064+
// if form is passed and value really changed then mark dirty
2065+
function markFormDirty(formController, originalValue, newValue) {
2066+
if (formController && originalValue !== newValue) {
2067+
formController.$setDirty(true);
2068+
}
2069+
}
2070+
20462071
}
20472072
};
20482073
}])

‎dist/rzslider.min.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1974,31 +1974,35 @@
19741974
.directive('otPriceRangeSlider', ['$compile', function ($compile) {
19751975
return {
19761976
restrict: 'E',
1977+
require: '^form',
19771978
scope: {
19781979
locale:"=",
19791980
min:"=",
19801981
max:"="
19811982
},
1982-
link: function (scope, iElm, iAttrs, controller) {
1983+
link: function (scope, iElm, iAttrs, formController) {
1984+
var originalMin = scope.min;
1985+
var originalMax = scope.max;
1986+
19831987
// load locale specific settings; default to us if none passed
19841988
// or lang locale not found
19851989
var localeConfigList = {
1986-
"en_us": {
1990+
"en-us": {
19871991
floor: 20,
19881992
ceil: 80,
19891993
step: 1,
19901994
currency: "$"
19911995
},
1992-
"de_de": {
1996+
"de-de": {
19931997
floor: 10,
19941998
ceil: 90,
1995-
step: 5,
1999+
step: 1,
19962000
currency: "€"
19972001
},
1998-
"en_ca": {
2002+
"en-ca": {
19992003
floor: 30,
20002004
ceil: 100,
2001-
step: 6,
2005+
step: 1,
20022006
currency: "C$"
20032007
}
20042008
}
@@ -2021,15 +2025,25 @@
20212025
hideLimitLabels: true, // hide upper and lower labels
20222026
noSwitching: true, // cant drag ranges past each other
20232027
translate: function(value, sliderId, label) {
2028+
// if low value changed
20242029
if (label === "model") {
20252030
scope.min = value; // set outside scope var
2031+
2032+
markFormDirty(formController, originalMin, value);
2033+
2034+
console.log("changed low value", value);
20262035
if (value === localeConfig.floor) {
20272036
return '<' + localeConfig.currency + value;
20282037
}
20292038
}
20302039

2040+
// if high value changed
20312041
if (label === "high") {
20322042
scope.max = value; // set outside scope var
2043+
2044+
markFormDirty(formController, originalMax, value);
2045+
2046+
console.log("changed high value", value);
20332047
if (value === localeConfig.ceil) {
20342048
return '>' + localeConfig.currency + value;
20352049
}
@@ -2040,13 +2054,24 @@
20402054
}
20412055
};
20422056

2057+
// wrap the rzslider control and pass it ot configuration
2058+
// angular compile it and then add it to html
20432059
var otSliderHtml = '<rzslider class="opentable-style" '
20442060
+ 'rz-slider-model="otPRConfig.minValue" '
20452061
+ 'rz-slider-high="otPRConfig.maxValue" '
20462062
+ 'rz-slider-options="otPRConfig.options" '
20472063
+ '></rzslider>';
20482064
var otSlider = $compile(otSliderHtml)(scope);
20492065
iElm.append(otSlider);
2066+
2067+
2068+
// if form is passed and value really changed then mark dirty
2069+
function markFormDirty(formController, originalValue, newValue) {
2070+
if (formController && originalValue !== newValue) {
2071+
formController.$setDirty(true);
2072+
}
2073+
}
2074+
20502075
}
20512076
};
20522077
}])

‎src/rzslider.less

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,10 @@
255255

256256

257257

258-
/* Opentable style customizations */
258+
/**
259+
* Opentable style overrides
260+
*/
261+
@barFillColor: #6CB6F5;
259262

260263
.rzslider {
261264
&.opentable-style {

0 commit comments

Comments
 (0)