Skip to content

Commit 5015710

Browse files
rreusserrreusser
committed
Clean up slider options
1 parent 892583d commit 5015710

File tree

7 files changed

+137
-36
lines changed

7 files changed

+137
-36
lines changed

‎src/components/sliders/attributes.js

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010

1111
var fontAttrs = require('../../plots/font_attributes');
1212
var padAttrs = require('../../plots/pad_attributes');
13-
var colorAttrs = require('../color/attributes');
1413
var extendFlat = require('../../lib/extend').extendFlat;
1514
var animationAttrs = require('../../plots/animation_attributes');
15+
var constants = require('./constants');
1616

1717
var stepsAttrs = {
1818
_isLinkedToArray: true,
@@ -37,7 +37,7 @@ var stepsAttrs = {
3737
],
3838
description: [
3939
'Sets the arguments values to be passed to the Plotly',
40-
'method set in `method` on click.'
40+
'method set in `method` on slide.'
4141
].join(' ')
4242
},
4343
label: {
@@ -84,8 +84,7 @@ module.exports = {
8484
role: 'info',
8585
dflt: 'fraction',
8686
description: [
87-
'Determines whether this color bar\'s length',
88-
'(i.e. the measure in the color variation direction)',
87+
'Determines whether this slider length',
8988
'is set in units of plot *fraction* or in *pixels.',
9089
'Use `len` to set the value.'
9190
].join(' ')
@@ -96,9 +95,9 @@ module.exports = {
9695
dflt: 1,
9796
role: 'style',
9897
description: [
99-
'Sets the length of the color bar',
98+
'Sets the length of the slider',
10099
'This measure excludes the padding of both ends.',
101-
'That is, the color bar length is this length minus the',
100+
'That is, the slider\'s length is this length minus the',
102101
'padding on both ends.'
103102
].join(' ')
104103
},
@@ -209,22 +208,59 @@ module.exports = {
209208
description: 'Sets the font of the slider step labels.'
210209
}),
211210

211+
activebgcolor: {
212+
valType: 'color',
213+
role: 'style',
214+
dflt: constants.gripBgActiveColor,
215+
description: [
216+
'Sets the background color of the slider grip',
217+
'while dragging.'
218+
].join(' ')
219+
},
212220
bgcolor: {
213221
valType: 'color',
214222
role: 'style',
215-
description: 'Sets the background color of the slider buttons.'
223+
dflt: constants.railBgColor,
224+
description: 'Sets the background color of the slider.'
216225
},
217226
bordercolor: {
218227
valType: 'color',
219-
dflt: colorAttrs.borderLine,
228+
dflt: constants.railBorderColor,
220229
role: 'style',
221230
description: 'Sets the color of the border enclosing the slider.'
222231
},
223232
borderwidth: {
224233
valType: 'number',
225234
min: 0,
226-
dflt: 1,
235+
dflt: constants.railBorderWidth,
227236
role: 'style',
228237
description: 'Sets the width (in px) of the border enclosing the slider.'
229-
}
238+
},
239+
ticklen: {
240+
valType: 'number',
241+
min: 0,
242+
dflt: constants.tickLength,
243+
role: 'style',
244+
description: 'Sets the length in pixels of step tick marks'
245+
},
246+
tickcolor: {
247+
valType: 'color',
248+
dflt: constants.tickColor,
249+
role: 'style',
250+
description: 'Sets the color of the border enclosing the slider.'
251+
},
252+
tickwidth: {
253+
valType: 'number',
254+
min: 0,
255+
dflt: 1,
256+
role: 'style',
257+
description: 'Sets the tick width (in px).'
258+
},
259+
minorticklen: {
260+
valType: 'number',
261+
min: 0,
262+
dflt: constants.minorTickLength,
263+
role: 'style',
264+
description: 'Sets the length in pixels of minor step tick marks'
265+
},
230266
};

‎src/components/sliders/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ module.exports = {
5555
railRadius: 2,
5656
railWidth: 5,
5757
railBorder: 4,
58+
railBorderWidth: 1,
5859
railBorderColor: '#bec8d9',
5960
railBgColor: '#f8fafc',
6061

‎src/components/sliders/defaults.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
var Lib = require('../../lib');
1212

1313
var attributes = require('./attributes');
14-
var contants = require('./constants');
14+
var constants = require('./constants');
1515

16-
var name = contants.name;
16+
var name = constants.name;
1717
var stepAttrs = attributes.steps;
1818

1919

@@ -73,12 +73,17 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
7373
coerce('transition.duration');
7474
coerce('transition.easing');
7575

76-
Lib.coerceFont(coerce, 'font', layoutOut.font);
77-
Lib.coerceFont(coerce, 'currentvalue.font', layoutOut.font);
78-
79-
coerce('bgcolor', layoutOut.paper_bgcolor);
76+
coerce('bgcolor');
77+
coerce('activebgcolor');
8078
coerce('bordercolor');
8179
coerce('borderwidth');
80+
coerce('ticklen');
81+
coerce('tickwidth');
82+
coerce('tickcolor');
83+
coerce('minorticklen');
84+
85+
Lib.coerceFont(coerce, 'font', layoutOut.font);
86+
Lib.coerceFont(coerce, 'currentvalue.font', sliderOut.font);
8287
}
8388

8489
function stepsDefaults(sliderIn, sliderOut) {

‎src/components/sliders/draw.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function findDimensions(gd, sliderOpts) {
177177
sliderOpts.labelStride = Math.max(1, Math.ceil(computedSpacePerLabel / availableSpacePerLabel));
178178
sliderOpts.labelHeight = labelHeight;
179179

180-
sliderOpts.height = sliderOpts.currentValueTotalHeight + constants.tickOffset + constants.tickLength + constants.labelOffset + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
180+
sliderOpts.height = sliderOpts.currentValueTotalHeight + constants.tickOffset + sliderOpts.ticklen + constants.labelOffset + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
181181

182182
var xanchor = 'left';
183183
if(anchorUtils.isRightAnchor(sliderOpts)) {
@@ -292,9 +292,9 @@ function drawGrip(sliderGroup, gd, sliderOpts) {
292292
rx: constants.gripRadius,
293293
ry: constants.gripRadius,
294294
})
295-
.call(Color.stroke, constants.gripBorderColor)
296-
.call(Color.fill, constants.gripBgColor)
297-
.style('stroke-width', constants.gripBorderWidth + 'px');
295+
.call(Color.stroke, sliderOpts.bordercolor)
296+
.call(Color.fill, sliderOpts.bgcolor)
297+
.style('stroke-width', sliderOpts.borderwidth + 'px');
298298
}
299299

300300
function drawLabel(item, data, sliderOpts) {
@@ -335,7 +335,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
335335

336336
Lib.setTranslate(item,
337337
normalizedValueToPosition(sliderOpts, d.fraction),
338-
constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
338+
constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
339339
);
340340
});
341341

@@ -398,7 +398,7 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
398398

399399
d3.event.stopPropagation();
400400
d3.event.preventDefault();
401-
grip.call(Color.fill, constants.gripBgActiveColor);
401+
grip.call(Color.fill, sliderOpts.activebgcolor);
402402

403403
var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
404404
handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
@@ -409,7 +409,7 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
409409
});
410410

411411
$gd.on('mouseup', function() {
412-
grip.call(Color.fill, constants.gripBgColor);
412+
grip.call(Color.fill, sliderOpts.bgcolor);
413413
$gd.on('mouseup', null);
414414
$gd.on('mousemove', null);
415415
});
@@ -426,7 +426,7 @@ function drawTicks(sliderGroup, sliderOpts) {
426426
tick.exit().remove();
427427

428428
tick.attr({
429-
width: constants.tickWidth,
429+
width: sliderOpts.tickwidth + 'px',
430430
'shape-rendering': 'crispEdges'
431431
});
432432

@@ -435,11 +435,11 @@ function drawTicks(sliderGroup, sliderOpts) {
435435
var item = d3.select(this);
436436

437437
item
438-
.attr({height: isMajor ? constants.tickLength : constants.minorTickLength})
439-
.call(Color.fill, isMajor ? constants.tickColor : constants.minorTickColor);
438+
.attr({height: isMajor ? sliderOpts.ticklen : sliderOpts.minorticklen})
439+
.call(Color.fill, isMajor ? sliderOpts.tickcolor : sliderOpts.tickcolor);
440440

441441
Lib.setTranslate(item,
442-
normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * constants.tickWidth,
442+
normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * sliderOpts.tickwidth,
443443
(isMajor ? constants.tickOffset : constants.minorTickOffset) + sliderOpts.currentValueTotalHeight
444444
);
445445
});
@@ -498,9 +498,9 @@ function drawTouchRect(sliderGroup, gd, sliderOpts) {
498498

499499
rect.attr({
500500
width: sliderOpts.inputAreaLength,
501-
height: Math.max(sliderOpts.inputAreaWidth, constants.tickOffset + constants.tickLength + sliderOpts.labelHeight)
501+
height: Math.max(sliderOpts.inputAreaWidth, constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight)
502502
})
503-
.call(Color.fill, constants.gripBgColor)
503+
.call(Color.fill, sliderOpts.bgcolor)
504504
.attr('opacity', 0);
505505

506506
Lib.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
@@ -522,9 +522,9 @@ function drawRail(sliderGroup, sliderOpts) {
522522
ry: constants.railRadius,
523523
'shape-rendering': 'crispEdges'
524524
})
525-
.call(Color.stroke, constants.railBorderColor)
526-
.call(Color.fill, constants.railBgColor)
527-
.style('stroke-width', '1px');
525+
.call(Color.stroke, sliderOpts.bordercolor)
526+
.call(Color.fill, sliderOpts.bgcolor)
527+
.style('stroke-width', sliderOpts.borderwidth + 'px');
528528

529529
Lib.setTranslate(rect,
530530
constants.railInset,

‎src/components/updatemenus/defaults.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
var Lib = require('../../lib');
1212

1313
var attributes = require('./attributes');
14-
var contants = require('./constants');
14+
var constants = require('./constants');
1515

16-
var name = contants.name;
16+
var name = constants.name;
1717
var buttonAttrs = attributes.buttons;
1818

1919

‎test/image/baselines/sliders.png

2.47 KB
Loading

‎test/image/mocks/sliders.json

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@
3939
"xanchor": "right",
4040
"y": -0.1,
4141
"yanchor": "top",
42+
"currentvalue": {
43+
"visible": false
44+
},
4245

4346
"transition": {
4447
"duration": 150,
@@ -47,7 +50,7 @@
4750

4851
"pad": {
4952
"r": 20,
50-
"t": 20
53+
"t": 60
5154
},
5255

5356
"font": {}
@@ -69,6 +72,42 @@
6972
"label": "green",
7073
"method": "restyle",
7174
"args": [{"marker.color": "green"}]
75+
}, {
76+
"label": "orange",
77+
"method": "restyle",
78+
"args": [{"marker.color": "orange"}]
79+
}, {
80+
"label": "yellow",
81+
"method": "restyle",
82+
"args": [{"marker.color": "yellow"}]
83+
}, {
84+
"label": "green",
85+
"method": "restyle",
86+
"args": [{"marker.color": "green"}]
87+
}, {
88+
"label": "orange",
89+
"method": "restyle",
90+
"args": [{"marker.color": "orange"}]
91+
}, {
92+
"label": "yellow",
93+
"method": "restyle",
94+
"args": [{"marker.color": "yellow"}]
95+
}, {
96+
"label": "green",
97+
"method": "restyle",
98+
"args": [{"marker.color": "green"}]
99+
}, {
100+
"label": "orange",
101+
"method": "restyle",
102+
"args": [{"marker.color": "orange"}]
103+
}, {
104+
"label": "yellow",
105+
"method": "restyle",
106+
"args": [{"marker.color": "yellow"}]
107+
}, {
108+
"label": "green",
109+
"method": "restyle",
110+
"args": [{"marker.color": "green"}]
72111
}, {
73112
"label": "blue",
74113
"method": "restyle",
@@ -95,7 +134,27 @@
95134
"t": 20
96135
},
97136

98-
"font": {}
137+
"bgcolor": "red",
138+
"bordercolor": "blue",
139+
"borderwidth": 2,
140+
"activebgcolor": "green",
141+
"ticklen": 20,
142+
"tickcolor": "purple",
143+
"minorticklen": 10,
144+
"tickwidth": 2,
145+
146+
"font": {
147+
"color": "purple",
148+
"size": 15
149+
},
150+
"currentvalue": {
151+
"prefix": "color:",
152+
"xanchor": "right",
153+
"font": {
154+
"color": "orange",
155+
"size": 20
156+
}
157+
}
99158
}],
100159
"xaxis": {
101160
"range": [0, 2],

0 commit comments

Comments
 (0)