Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f9e8777

Browse filesBrowse files
antoinergantoinerg
committed
modeBarStyle managed in css, new layout attribute activeIconColor
1 parent 254f158 commit f9e8777
Copy full SHA for f9e8777

File tree

Expand file treeCollapse file tree

5 files changed

+52
-15
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+52
-15
lines changed

‎src/components/modebar/modebar.js

Copy file name to clipboardExpand all lines: src/components/modebar/modebar.js
+15-11Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,12 @@ var proto = ModeBar.prototype;
4545
proto.update = function(graphInfo, buttons) {
4646
this.graphInfo = graphInfo;
4747

48-
var context = this.graphInfo._context;
49-
var fullLayout = this.graphInfo._fullLayout;
48+
var context = this.graphInfo._context,
49+
fullLayout = this.graphInfo._fullLayout,
50+
modeBarId = 'modebar-' + fullLayout._uid;
51+
52+
this.element.setAttribute('id', modeBarId);
53+
this._uid = modeBarId;
5054

5155
if(context.displayModeBar === 'hover') {
5256
this.element.className = 'modebar modebar--hover';
@@ -57,7 +61,11 @@ proto.update = function(graphInfo, buttons) {
5761
this.element.className += ' vertical';
5862
buttons = buttons.reverse();
5963
}
60-
this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
64+
65+
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modeBarStyle.bgcolor);
66+
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modeBarStyle.iconColor);
67+
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
68+
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
6169

6270
// if buttons or logo have changed, redraw modebar interior
6371
var needsNewButtons = !this.hasButtons(buttons);
@@ -69,7 +77,7 @@ proto.update = function(graphInfo, buttons) {
6977
if(needsNewButtons || needsNewLogo || needsNewLocale) {
7078
this.removeAllButtons();
7179

72-
this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
80+
this.updateButtons(buttons);
7381

7482
if(context.displaylogo) {
7583
if(fullLayout.modeBarStyle.orientation === 'v') {
@@ -85,7 +93,7 @@ proto.update = function(graphInfo, buttons) {
8593
this.updateActiveButton();
8694
};
8795

88-
proto.updateButtons = function(buttons, iconColor) {
96+
proto.updateButtons = function(buttons) {
8997
var _this = this;
9098

9199
this.buttons = buttons;
@@ -105,7 +113,6 @@ proto.updateButtons = function(buttons, iconColor) {
105113
}
106114
_this.buttonsNames.push(buttonName);
107115

108-
buttonConfig.color = iconColor;
109116
var button = _this.createButton(buttonConfig);
110117
_this.buttonElements.push(button);
111118
group.appendChild(button);
@@ -174,7 +181,6 @@ proto.createButton = function(config) {
174181
button.appendChild(icon());
175182
}
176183
else {
177-
if(icon) icon.color = config.color;
178184
button.appendChild(this.createIcon(icon || Icons.question));
179185
}
180186
button.setAttribute('data-gravity', config.gravity || 'n');
@@ -200,6 +206,7 @@ proto.createIcon = function(thisIcon) {
200206
if(thisIcon.path) {
201207
icon = document.createElementNS(svgNS, 'svg');
202208
icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
209+
icon.setAttribute('class', 'icon');
203210

204211
var path = document.createElementNS(svgNS, 'path');
205212
path.setAttribute('d', thisIcon.path);
@@ -212,10 +219,6 @@ proto.createIcon = function(thisIcon) {
212219
path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
213220
}
214221

215-
if(thisIcon.color) {
216-
path.setAttribute('fill', thisIcon.color);
217-
}
218-
219222
icon.appendChild(path);
220223
}
221224

@@ -316,6 +319,7 @@ proto.removeAllButtons = function() {
316319

317320
proto.destroy = function() {
318321
Lib.removeElement(this.container.querySelector('.modebar'));
322+
Lib.deleteRelatedStyleRule(this._uid);
319323
};
320324

321325
function createModeBar(gd, buttons) {

‎src/lib/index.js

Copy file name to clipboardExpand all lines: src/lib/index.js
+23-4Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -679,14 +679,24 @@ lib.removeElement = function(el) {
679679
* by all calls to this function
680680
*/
681681
lib.addStyleRule = function(selector, styleString) {
682-
if(!lib.styleSheet) {
683-
var style = document.createElement('style');
682+
lib.addRelatedStyleRule('global', selector, styleString);
683+
};
684+
685+
/**
686+
* for dynamically adding style rules
687+
* to a stylesheet uniquely identified by a uid
688+
*/
689+
lib.addRelatedStyleRule = function(uid, selector, styleString) {
690+
var id = 'plotly.js-style-' + uid,
691+
style = document.getElementById(id);
692+
if(!style) {
693+
style = document.createElement('style');
694+
style.setAttribute('id', id);
684695
// WebKit hack :(
685696
style.appendChild(document.createTextNode(''));
686697
document.head.appendChild(style);
687-
lib.styleSheet = style.sheet;
688698
}
689-
var styleSheet = lib.styleSheet;
699+
var styleSheet = style.sheet;
690700

691701
if(styleSheet.insertRule) {
692702
styleSheet.insertRule(selector + '{' + styleString + '}', 0);
@@ -697,6 +707,15 @@ lib.addStyleRule = function(selector, styleString) {
697707
else lib.warn('addStyleRule failed');
698708
};
699709

710+
/**
711+
* to remove from the page a stylesheet identified by a given uid
712+
*/
713+
lib.deleteRelatedStyleRule = function(uid) {
714+
var id = 'plotly.js-style-' + uid,
715+
style = document.getElementById(id);
716+
if(style) style.remove();
717+
};
718+
700719
lib.isIE = function() {
701720
return typeof window.navigator.msSaveBlob !== 'undefined';
702721
};

‎src/plots/layout_attributes.js

Copy file name to clipboardExpand all lines: src/plots/layout_attributes.js
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,13 @@ module.exports = {
248248
editType: 'modebar',
249249
description: 'Sets the color of the icons in the modebar.'
250250
},
251+
activeIconColor: {
252+
valType: 'color',
253+
role: 'style',
254+
dflt: 'rgba(0, 22, 72, 0.5)',
255+
editType: 'modebar',
256+
description: 'Sets the color of the active or hovered on icons in the modebar.'
257+
},
251258
editType: 'modebar'
252259
}
253260
};

‎src/plots/plots.js

Copy file name to clipboardExpand all lines: src/plots/plots.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,7 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
13371337
coerce('modeBarStyle.orientation');
13381338
coerce('modeBarStyle.bgcolor');
13391339
coerce('modeBarStyle.iconColor');
1340+
coerce('modeBarStyle.activeIconColor');
13401341

13411342
Registry.getComponentMethod(
13421343
'calendars',

‎test/jasmine/tests/modebar_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/modebar_test.js
+6Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,9 +293,15 @@ describe('ModeBar', function() {
293293
it('removes the mode bar entirely', function() {
294294
var modeBarParent = modeBar.element.parentNode;
295295

296+
var style = document.querySelector('style[id*="modebar"]');
297+
expect(style).toBeTruthy();
298+
296299
modeBar.destroy();
297300

298301
expect(modeBarParent.querySelector('.modebar')).toBeNull();
302+
303+
style = document.querySelector('style[id*="modebar"]');
304+
expect(style).toBeNull();
299305
});
300306
});
301307

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.