Skip to content

Slider component #986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 43 commits into from
Oct 6, 2016
Merged

Slider component #986

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
f5bccd5
First cut at slider
rreusser Sep 28, 2016
83483fd
Fix lint errors in slider
rreusser Sep 28, 2016
f69a328
Add slider transitions
rreusser Sep 28, 2016
82ea558
Expand touchable slider area
rreusser Sep 28, 2016
ca5f9f5
Add slider mock
rreusser Sep 28, 2016
c6a3e11
Rename sliders and bump circular require tolerance
rreusser Sep 28, 2016
5b74652
Add trbl padding to sliders
rreusser Sep 28, 2016
e13e0ee
Remove fanciness from slider constants
rreusser Sep 28, 2016
8fe1842
Tweak slider behavior to avoid event -> method loops
rreusser Sep 28, 2016
05ac586
Improve padding logic for updatemenus
rreusser Sep 28, 2016
4604341
Add jasmine tests for updatemenus padding
rreusser Sep 29, 2016
8558be8
add streaming maxpoints max and dflt
cldougl Sep 29, 2016
c673afe
Merge pull request #996 from plotly/maxpt_dflt
cldougl Sep 29, 2016
304174a
Add current value output to sliders
rreusser Sep 29, 2016
fce36fa
Merge pull request #989 from plotly/fix-updatemenus-padding
rreusser Sep 29, 2016
52b4a2a
First cut at slider
rreusser Sep 28, 2016
b161d55
Fix lint errors in slider
rreusser Sep 28, 2016
8d7c40d
Add slider transitions
rreusser Sep 28, 2016
30b5f2d
Expand touchable slider area
rreusser Sep 28, 2016
19442d9
Add slider mock
rreusser Sep 28, 2016
ecb7e87
Rename sliders and bump circular require tolerance
rreusser Sep 28, 2016
9c0f9ac
Add trbl padding to sliders
rreusser Sep 29, 2016
2a6f987
Remove fanciness from slider constants
rreusser Sep 28, 2016
5bd6bdd
Tweak slider behavior to avoid event -> method loops
rreusser Sep 28, 2016
4520a48
Add current value output to sliders
rreusser Sep 29, 2016
88d6728
Tweak slider colors
rreusser Sep 29, 2016
6da5b0f
Fix sliders in plot schema
rreusser Sep 29, 2016
1cad8a4
Merge branch 'slider-component' of github.com:plotly/plotly.js into s…
rreusser Sep 29, 2016
4a9edd0
Working through slider testing issues
rreusser Sep 29, 2016
6cb6d42
Add slider tests
rreusser Oct 3, 2016
4775a47
Test updateevent for sliders
rreusser Oct 3, 2016
a08f084
Update sliders baseline to reflect bugfix
rreusser Oct 3, 2016
5816c24
Fix plot schema error
rreusser Oct 3, 2016
2cfa81b
Remove unneeded lines from sliders test
rreusser Oct 4, 2016
1d52b51
Remove updatevalue and updateevent
rreusser Oct 6, 2016
892583d
Removed unused slider function
rreusser Oct 6, 2016
5015710
Clean up slider options
rreusser Oct 6, 2016
582c643
Remove unneeded/failing slider test
rreusser Oct 6, 2016
70610ec
Add suffix to currentvalue slider label
rreusser Oct 6, 2016
f25127c
don't coerce slider currentvalue attrs when !visible
rreusser Oct 6, 2016
4b608ee
Be more specific about *all* unused slider attrs not set
rreusser Oct 6, 2016
6c9034d
Test mouse movement for sliders
rreusser Oct 6, 2016
21e2f99
Make sure slider Drawing.bBox calls fall back to defined
rreusser Oct 6, 2016
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
Prev Previous commit
Next Next commit
Add slider transitions
  • Loading branch information
@rreusser
rreusser committed Sep 29, 2016
commit 8d7c40d95566a6d71c876ad762afddc7bc2b7986
18 changes: 18 additions & 0 deletions src/components/slider/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var animationAttrs = require('../../plots/animation_attributes');

var stepsAttrs = {
_isLinkedToArray: true,
Expand Down Expand Up @@ -178,6 +179,23 @@ module.exports = {
].join(' ')
},

transition: {
Copy link
Contributor Author

@rreusser rreusser Sep 28, 2016

Choose a reason for hiding this comment

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

I kept this nested format so that it perfectly mirrors the way you'd define transition config for an animation. Otherwise it would need to be transitionduration: and transitioneasing:, which isn't bad. Open to thoughts here.

Copy link
Contributor

@etpinard etpinard Sep 28, 2016

Choose a reason for hiding this comment

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

👍 plotly.js is a big fan of nested attributes.

duration: {
valType: 'number',
role: 'info',
min: 0,
dflt: 150,
description: 'Sets the duration of the slider transition'
},
easing: {
valType: 'enumerated',
values: animationAttrs.transition.easing.values,
role: 'info',
dflt: 'cubic-in-out',
description: 'Sets the easing function of the slider transition'
},
},

font: extendFlat({}, fontAttrs, {
description: 'Sets the font of the slider button text.'
}),
Expand Down
7 changes: 7 additions & 0 deletions src/components/slider/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,13 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
coerce('updateevent');
coerce('updatevalue');

if(!sliderIn.transition) {
sliderIn.transition = {};
}

coerce('transition.duration');
coerce('transition.easing');

if(!Array.isArray(sliderOut.updateevent)) {
sliderOut.updateevent = [sliderOut.updateevent];
}
Expand Down
39 changes: 25 additions & 14 deletions src/components/slider/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
removeListeners(gd, sliderGroup, sliderOpts);
attachListeners(gd, sliderGroup, sliderOpts);

setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, true);
setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, true, false);
}

function removeListeners(gd, sliderGroup, sliderOpts) {
Expand All @@ -224,22 +224,22 @@ function attachListeners(gd, sliderGroup, sliderOpts) {
var listeners = sliderOpts._input.listeners = [];
var eventNames = sliderOpts._input.eventNames = [];

function makeListener(updatevalue) {
function makeListener(eventname, updatevalue) {
return function(data) {
var value = data;
if(updatevalue) {
value = Lib.nestedProperty(data, updatevalue).get();
Copy link
Contributor

@etpinard etpinard Sep 28, 2016

Choose a reason for hiding this comment

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

wait does nestedProperty work with items.0.label signature?

Copy link
Contributor

@etpinard etpinard Sep 28, 2016

Choose a reason for hiding this comment

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

maybe I just didn't know about it.

Copy link
Contributor Author

@rreusser rreusser Sep 28, 2016

Choose a reason for hiding this comment

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

Ah, that's a good question… It may well not. I simply assumed (hoped?) it would. Thanks for noticing.

}

setActiveByLabel(gd, sliderGroup, sliderOpts, value, false);
setActiveByLabel(gd, sliderGroup, sliderOpts, value, false, true);
};
}

for(var i = 0; i < sliderOpts.updateevent.length; i++) {
var updateEventName = sliderOpts.updateevent[i];
var updatevalue = sliderOpts.updatevalue;

var updatelistener = makeListener(updatevalue);
var updatelistener = makeListener(updateEventName, updatevalue);

gd._internalEv.on(updateEventName, updatelistener);

Expand Down Expand Up @@ -312,15 +312,16 @@ function drawLabelGroup(sliderGroup, sliderOpts) {

}

function handleInput(gd, sliderGroup, sliderOpts, normalizedPosition) {
function handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, doTransition) {
var quantizedPosition = Math.round(normalizedPosition * (sliderOpts.steps.length - 1));


if(quantizedPosition !== sliderOpts.active) {
setActive(gd, sliderGroup, sliderOpts, quantizedPosition, true);
setActive(gd, sliderGroup, sliderOpts, quantizedPosition, true, doTransition);
}
}

function setActiveByLabel(gd, sliderGroup, sliderOpts, label, doCallback) {
function setActiveByLabel(gd, sliderGroup, sliderOpts, label, doCallback, doTransition) {
var index;
for(var i = 0; i < sliderOpts.steps.length; i++) {
var step = sliderOpts.steps[i];
Expand All @@ -331,14 +332,14 @@ function setActiveByLabel(gd, sliderGroup, sliderOpts, label, doCallback) {
}

if(index !== undefined) {
setActive(gd, sliderGroup, sliderOpts, index, doCallback);
setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition);
}
}

function setActive(gd, sliderGroup, sliderOpts, index, doCallback) {
function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition) {
sliderOpts._input.active = sliderOpts.active = index;

sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1));
sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), doTransition);

var step = sliderOpts.steps[sliderOpts.active];

Expand All @@ -364,11 +365,11 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
grip.call(Color.fill, constants.gripBgActiveColor);

var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
handleInput(gd, sliderGroup, sliderOpts, normalizedPosition);
handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);

$gd.on('mousemove', function() {
var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
handleInput(gd, sliderGroup, sliderOpts, normalizedPosition);
handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
});

$gd.on('mouseup', function() {
Expand Down Expand Up @@ -422,11 +423,21 @@ function computeLabelSteps(sliderOpts) {
}
}

function setGripPosition(sliderGroup, sliderOpts, position) {
function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
var grip = sliderGroup.select('rect.' + constants.gripRectClass);

var x = normalizedValueToPosition(sliderOpts, position);
Lib.setTranslate(grip, x - constants.gripWidth * 0.5, 0);

var el = grip;
if(doTransition && sliderOpts.transition.duration > 0) {
el = el.transition()
.duration(sliderOpts.transition.duration)
.ease(sliderOpts.transition.easing);
}

// Lib.setTranslate doesn't work here becasue of the transition duck-typing.
// It's also not necessary because there are no other transitions to preserve.
el.attr('transform', 'translate(' + (x - constants.gripWidth * 0.5) + ',' + 0 + ')');
Copy link
Contributor

@etpinard etpinard Sep 28, 2016

Choose a reason for hiding this comment

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

thanks for the comment

}

// Convert a number from [0-1] to a pixel position relative to the slider group container:
Expand Down