8000 scrollable dropdown menus by n-riesco · Pull Request #1214 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

scrollable dropdown menus #1214

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 21 commits into from
Feb 6, 2017
Merged

scrollable dropdown menus #1214

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2ec79e7
updatemenus: don't setTranslate button container
n-riesco Nov 25, 2016
5a4ecf3
updatemenus: add scroll bars if needed
n-riesco Nov 24, 2016
66e503c
updatemenus: Fix image test failure
n-riesco Jan 26, 2017
9a0aa64
Merge branch 'master' into pr-20161121-scrollable-dropdown-menus
n-riesco Jan 26, 2017
8df8fd6
updatemenus: Update copyright notice
n-riesco Jan 26, 2017
7057bc7
updatemenus: make ScrollBox#setTranslate public
n-riesco Jan 30, 2017
8d1f333
updatemenus: fix positioning of scrollbars
n-riesco Jan 30, 2017
563009b
updatemenus: center dropmenu on active option
n-riesco Jan 30, 2017
ef5210e
updatemenus: hide scrollbar if header clicked
n-riesco Jan 30, 2017
f17773f
updatemenu: ScrollBox#setTranslate to take pixels
n-riesco Jan 31, 2017
9e3ac1b
updatemenus: fix smooth dropdown folding
n-riesco Jan 31, 2017
13508da
updatemenus: handle mouse wheel events
n-riesco Jan 31, 2017
8ab3ebe
updatemenus: refactor where scrollbox is created
n-riesco Feb 1, 2017
4975401
updatemenus: add <rect> background to scrollbox
n-riesco Feb 1, 2017
3b17d1d
updatemenus: remove un/foldDropdownMenu
n-riesco Feb 2, 2017
b155a8a
updatemenu: fix computation of scrollbox size
n-riesco Feb 2, 2017
109f284
updatemenus: fix positioning of scrollbox
n-riesco Feb 3, 2017
e7c3ae3
Lib: Fix regexp in getTranslate
n-riesco Feb 3, 2017
89c615d
updatemenus: test scrollbox
n-riesco Feb 3, 2017
a554ea6
Merge branch 'master' into PR #1214
n-riesco Feb 3, 2017
79f1107
Drawing: test setTranslate works with negatives
n-riesco Feb 3, 2017
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
updatemenu: ScrollBox#setTranslate to take pixels 
* Changed `ScrollBox#setTranslate(translateX, translateY)` to take
  pixels.

* Previously, invoking `ScrollBox#setTranslate(xf, yf)` would require to
  access `ScrollBox#_box` to compute `xf` and `yf`.

* Now, it's possible to drag the buttons in the scrollbox beyond the
  scrollbox.
  • Loading branch information
@n-riesco
n-riesco committed Jan 31, 2017
commit f17773f1fe4235ac0e36c02d7265571f00d307a4
6 changes: 2 additions & 4 deletions src/components/updatemenus/draw.js
View file
Open in desktop
10000
Original file line number Diff line number Diff line change
Expand Up @@ -345,8 +345,7 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
}
translateY -= constants.gapButton;

var yf = translateY / (scrollBox.position.h - scrollBox._box.h);
scrollBox.setTranslate(0, yf);
scrollBox.setTranslate(0, translateY);
}
}
else {
Expand All @@ -357,8 +356,7 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
}
translateX -= constants.gapButton;

var xf = translateX / (scrollBox.position.w - scrollBox._box.w);
scrollBox.setTranslate(xf, 0);
scrollBox.setTranslate(translateX, 0);
}
}
}
Expand Down
72 changes: 34 additions & 38 deletions src/components/updatemenus/scrollbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,24 +287,18 @@ ScrollBox.prototype.disable = function disable() {
* @method
*/
ScrollBox.prototype._onBoxDrag = function onBarDrag() {
var xf = this._xf,
yf = this._yf;
var translateX = this._translateX,
translateY = this._translateY;

if(this._hbar) {
var translateXMax = this.position.w - this._box.w;

xf = Lib.constrain(xf - d3.event.dx / translateXMax, 0, 1);
translateX -= d3.event.dx;
}
else xf = 0;

if(this._vbar) {
var translateYMax = this.position.h - this._box.h;

yf = Lib.constrain(yf - d3.event.dy / translateYMax, 0, 1);
translateY -= d3.event.dy;
}
else yf = 0;

this.setTranslate(xf, yf);
this.setTranslate(translateX, translateY);
};

/**
Expand All @@ -313,53 +307,51 @@ ScrollBox.prototype._onBoxDrag = function onBarDrag() {
* @method
*/
ScrollBox.prototype._onBarDrag = function onBarDrag() {
var xf = this._xf,
yf = this._yf;
var translateX = this._translateX,
translateY = this._translateY;

if(this._hbar) {
var translateXMax = this.position.w - this._box.w,
translateX = xf * translateXMax,
xMin = translateX + this._hbarXMin,
var xMin = translateX + this._hbarXMin,
xMax = xMin + this._hbarTranslateMax,
x = Lib.constrain(d3.event.x, xMin, xMax);
x = Lib.constrain(d3.event.x, xMin, xMax),
xf = (x - xMin) / (xMax - xMin);

xf = (x - xMin) / (xMax - xMin);
var translateXMax = this.position.w - this._box.w;

translateX = xf * translateXMax;
}
else xf = 0;

if(this._vbar) {
E9C2 var translateYMax = this.position.h - this._box.h,
translateY = yf * translateYMax,
yMin = translateY + this._vbarYMin,
var yMin = translateY + this._vbarYMin,
yMax = yMin + this._vbarTranslateMax,
y = Lib.constrain(d3.event.y, yMin, yMax);
y = Lib.constrain(d3.event.y, yMin, yMax),
yf = (y - yMin) / (yMax - yMin);

var translateYMax = this.position.h - this._box.h;

yf = (y - yMin) / (yMax - yMin);
translateY = yf * translateYMax;
}
else yf = 0;

this.setTranslate(xf, yf);
this.setTranslate(translateX, translateY);
};

/**
* Set clip path and scroll bar translate transform
*
* @method
* @param {number} [xf=0] Horizontal position as a container fraction
* @param {number} [yf=0] Vertical position as a container fraction
* @param {number} [translateX=0] Horizontal offset (in pixels)
* @param {number} [translateY=0] Vertical offset (in pixels)
*/
ScrollBox.prototype.setTranslate = function setTranslate(xf, yf) {
xf = Lib.constrain(xf || 0, 0, 1);
yf = Lib.constrain(yf || 0, 0, 1);
ScrollBox.prototype.setTranslate = function setTranslate(translateX, translateY) {
// store translateX and translateY (needed by mouse event handlers)
var translateXMax = this.position.w - this._box.w,
translateYMax = this.position.h - this._box.h;

// store xf and yf (needed by ScrollBox.prototype._on*Drag)
this._xf = xf;
this._yf = yf;
translateX = Lib.constrain(translateX || 0, 0, translateXMax);
translateY = Lib.constrain(translateY || 0, 0, translateYMax);

var translateXMax = this.position.w - this._box.w,
translateYMax = this.position.h - this._box.h,
translateX = xf * translateXMax,
translateY = yf * translateYMax;
this._translateX = translateX;
this._translateY = translateY;

this.container.call(Lib.setTranslate,
this._box.l - this.position.l - translateX,
Expand All @@ -373,12 +365,16 @@ ScrollBox.prototype.setTranslate = function setTranslate(xf, yf) {
}

if(this._hbar) {
var xf = translateX / translateXMax;

this._hbar.call(Lib.setTranslate,
translateX + xf * this._hbarTranslateMax,
translateY);
}

if(this._vbar) {
var yf = translateY / translateYMax;

this._vbar.call(Lib.setTranslate,
translateX,
translateY + yf * this._vbarTranslateMax);
Expand Down
0