8000 Introducing layout update menus (aka dropdowns) by etpinard · Pull Request #770 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Introducing layout update menus (aka dropdowns) #770

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 17 commits into from
Aug 3, 2016
Merged

Introducing layout update menus (aka dropdowns) #770

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ba20206
introduce UpdateMenus module
etpinard Jul 22, 2016
2ac6dd4
plugin UpdateMenus into plot code
etpinard Jul 22, 2016
a02c225
make 'updatemenus' relayout calls work
etpinard Jul 22, 2016
4f9f525
Merge branch 'master' into layout-updatemenus
etpinard Aug 1, 2016
c9141e0
fixup update menu header drop/fold toggle
etpinard Jul 25, 2016
606c43e
color: add borderLine color def
etpinard Jul 29, 2016
5f99dbf
make update menu style Derek-proof
etpinard Jul 29, 2016
a1265a9
add update menu button label default
etpinard Aug 1, 2016
06e8140
skip over non-object buttons and button w/o 'args'
etpinard Aug 1, 2016
ca26892
DRY up button remove routine
etpinard Aug 1, 2016
b47008f
clear all push margins objects if all menus get removed
etpinard Aug 1, 2016
a33aa46
add updatemenu image test
etpinard Aug 1, 2016
56a3703
add updatemenus jasmine test suite
etpinard Aug 1, 2016
b412398
test: modif update menu test suite to pass on CircleCI
etpinard Aug 2, 2016
b8e80fd
improve 'object constancy' for update menu full opts objects
etpinard Aug 2, 2016
3610253
improve object constancy approach:
etpinard Aug 3, 2016
42d40ee
rm comments (moved to #810)
etpinard Aug 3, 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
test: modif update menu test suite to pass on CircleCI 
- For some reason, ../assets/mouse_event.js fails
  to detect the button elements in FF38 (like on CircleCI 2016/08/02),
  so dispatch the mouse event directly about the nodes instead
- must compare item width with a tolerance as the exact result
  is browser/font dependent (via getBBox)
  • Loading branch information
@etpinard
etpinard committed Aug 2, 2016
commit b412398eb073b028f7f742d4f54a12c3920750a8
102 changes: 51 additions & 51 deletions test/jasmine/tests/updatemenus_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ var Plotly = require('@lib');
var Lib = require('@src/lib');
var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var getRectCenter = require('../assets/get_rect_center');
var mouseEvent = require('../assets/mouse_event');
var TRANSITION_DELAY = 100;

describe('update menus defaults', function() {
Expand Down Expand Up @@ -201,51 +199,51 @@ describe('update menus interactions', function() {
});

it('should drop/fold buttons when clicking on header', function(done) {
var pos0 = getHeaderPos(0),
pos1 = getHeaderPos(1);
var header0 = selectHeader(0),
header1 = selectHeader(1);

click(pos0).then(function() {
click(header0).then(function() {
assertMenus([3, 0]);
return click(pos0);
return click(header0);
}).then(function() {
assertMenus([0, 0]);
return click(pos1);
return click(header1);
}).then(function() {
assertMenus([0, 4]);
return click(pos1);
return click(header1);
}).then(function() {
assertMenus([0, 0]);
return click(pos0);
return click(header0);
}).then(function() {
assertMenus([3, 0]);
return click(pos1);
return click(header1);
}).then(function() {
assertMenus([0, 4]);
return click(pos0);
return click(header0);
}).then(function() {
assertMenus([3, 0]);
done();
});
});

it('should apply update on button click', function(done) {
var pos0 = getHeaderPos(0),
pos1 = getHeaderPos(1);
var header0 = selectHeader(0),
header1 = selectHeader(1);

assertActive(gd, [1, 2]);

click(pos0).then(function() {
click(header0).then(function() {
assertItemColor(selectButton(1), activeColor);

return click(getButtonPos(0));
return click(selectButton(0));
}).then(function() {
assertActive(gd, [0, 2]);

return click(pos1);
return click(header1);
}).then(function() {
assertItemColor(selectButton(2), activeColor);

return click(getButtonPos(0));
return click(selectButton(0));
}).then(function() {
assertActive(gd, [0, 0]);

Expand All @@ -254,37 +252,34 @@ describe('update menus interactions', function() {
});

it('should change color on mouse over', function(done) {
var header0 = selectHeader(0),
pos0 = getHeaderPos(0);
var INDEX_0 = 2,
INDEX_1 = gd.layout.updatemenus[1].active;

var header0 = selectHeader(0);

assertItemColor(header0, bgColor);
mouseEvent('mouseover', pos0[0], pos0[1]);
mouseEvent('mouseover', header0);
assertItemColor(header0, activeColor);
mouseEvent('mouseout', pos0[0], pos0[1]);
mouseEvent('mouseout', header0);
assertItemColor(header0, bgColor);

click(pos0).then(function() {
var index = 2,
button = selectButton(index),
pos = getButtonPos(index);
click(header0).then(function() {
var button = selectButton(INDEX_0);

assertItemColor(button, bgColor);
mouseEvent('mouseover', pos[0], pos[1]);
mouseEvent('mouseover', button);
assertItemColor(button, activeColor);
mouseEvent('mouseout', pos[0], pos[1]);
mouseEvent('mouseout', button);
assertItemColor(button, bgColor);

var pos1 = getHeaderPos(1);
return click(pos1);
return click(selectHeader(1));
}).then(function() {
var index = gd.layout.updatemenus[1].active,
button = selectButton(index),
pos = getButtonPos(index);
var button = selectButton(INDEX_1);

assertItemColor(button, activeColor);
mouseEvent('mouseover', pos[0], pos[1]);
mouseEvent('mouseover', button);
assertItemColor(button, activeColor);
mouseEvent('mouseout', pos[0], pos[1]);
mouseEvent('mouseout', button);
assertItemColor(button, activeColor);

done();
Expand All @@ -298,7 +293,7 @@ describe('update menus interactions', function() {
Plotly.relayout(gd, 'updatemenus[0].bgcolor', 'red').then(function() {
assertItemColor(selectHeader(0), 'rgb(255, 0, 0)');

return click(getHeaderPos(0));
return click(selectHeader(0));
}).then(function() {
assertMenus([3, 0]);

Expand All @@ -312,7 +307,7 @@ describe('update menus interactions', function() {
}).then(function() {
assertItemDims(selectHeader(1), 179, 34.2);

return click(getHeaderPos(1));
return click(selectHeader(1));
}).then(function() {
assertMenus([0, 4]);

Expand All @@ -321,7 +316,7 @@ describe('update menus interactions', function() {
// and delete buttons
assertMenus([0]);

return click(getHeaderPos(0));
return click(selectHeader(0));
}).then(function() {
assertMenus([3]);

Expand Down Expand Up @@ -375,39 +370,44 @@ describe('update menus interactions', function() {
}

function assertItemDims(node, width, height) {
var rect = node.select('rect');
expect(+rect.attr('width')).toEqual(width);
var rect = node.select('rect'),
actualWidth = +rect.attr('width');

// must compare with a tolerance as the exact result
// is browser/font dependent (via getBBox)
expect(Math.abs(actualWidth - width)).toBeLessThan(11);

// height is determined by 'fontsize',
// so no such tolerance is needed
expect(+rect.attr('height')).toEqual(height);
}

function click(pos) {
function click(selection) {
return new Promise(function(resolve) {
setTimeout(function() {
mouseEvent('click', pos[0], pos[1]);
mouseEvent('click', selection);
resolve();
}, TRANSITION_DELAY);
});
}

// For some reason, ../assets/mouse_event.js fails
// to detect the button elements in FF38 (like on CircleCI 2016/08/02),
// so dispatch the mouse event directly about the nodes instead.
function mouseEvent(type, selection) {
var ev = new window.MouseEvent(type, { bubbles: true });
selection.node().dispatchEvent(ev);
}

function selectHeader(menuIndex) {
var headers = d3.selectAll('.' + constants.headerClassName),
header = d3.select(headers[0][menuIndex]);
return header;
}

function getHeaderPos(menuIndex) {
var header = selectHeader(menuIndex);
return getRectCenter(header.select('rect').node());
}

function selectButton(buttonIndex) {
var buttons = d3.selectAll('.' + constants.buttonClassName),
button = d3.select(buttons[0][buttonIndex]);
return button;
}

function getButtonPos(buttonIndex) {
var button = selectButton(buttonIndex);
return getRectCenter(button.select('rect').node());
}
});
0