modeBarStyle managed in css, new layout attribute activeIconColor

Author: antoinerg

src/components/modebar/modebar.js

@@ -45,8 +45,12 @@ var proto = ModeBar.prototype;
 proto.update = function(graphInfo, buttons) {
     this.graphInfo = graphInfo;
 
-    var context = this.graphInfo._context;
-    var fullLayout = this.graphInfo._fullLayout;
+    var context = this.graphInfo._context,
+        fullLayout = this.graphInfo._fullLayout,
+        modeBarId = 'modebar-' + fullLayout._uid;
+
+    this.element.setAttribute('id', modeBarId);
+    this._uid = modeBarId;
 
     if(context.displayModeBar === 'hover') {
         this.element.className = 'modebar modebar--hover';
@@ -57,7 +61,11 @@ proto.update = function(graphInfo, buttons) {
         this.element.className += ' vertical';
         buttons = buttons.reverse();
     }
-    this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
+
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modeBarStyle.bgcolor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modeBarStyle.iconColor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
 
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
@@ -69,7 +77,7 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
+        this.updateButtons(buttons);
 
         if(context.displaylogo) {
             if(fullLayout.modeBarStyle.orientation === 'v') {
@@ -85,7 +93,7 @@ proto.update = function(graphInfo, buttons) {
     this.updateActiveButton();
 };
 
-proto.updateButtons = function(buttons, iconColor) {
+proto.updateButtons = function(buttons) {
     var _this = this;
 
     this.buttons = buttons;
@@ -105,7 +113,6 @@ proto.updateButtons = function(buttons, iconColor) {
             }
             _this.buttonsNames.push(buttonName);
 
-            buttonConfig.color = iconColor;
             var button = _this.createButton(buttonConfig);
             _this.buttonElements.push(button);
             group.appendChild(button);
@@ -174,7 +181,6 @@ proto.createButton = function(config) {
         button.appendChild(icon());
     }
     else {
-        if(icon) icon.color = config.color;
         button.appendChild(this.createIcon(icon || Icons.question));
     }
     button.setAttribute('data-gravity', config.gravity || 'n');
@@ -200,6 +206,7 @@ proto.createIcon = function(thisIcon) {
     if(thisIcon.path) {
         icon = document.createElementNS(svgNS, 'svg');
         icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
+        icon.setAttribute('class', 'icon');
 
         var path = document.createElementNS(svgNS, 'path');
         path.setAttribute('d', thisIcon.path);
@@ -212,10 +219,6 @@ proto.createIcon = function(thisIcon) {
             path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
         }
 
-        if(thisIcon.color) {
-            path.setAttribute('fill', thisIcon.color);
-        }
-
         icon.appendChild(path);
     }
 
@@ -316,6 +319,7 @@ proto.removeAllButtons = function() {
 
 proto.destroy = function() {
     Lib.removeElement(this.container.querySelector('.modebar'));
+    Lib.deleteRelatedStyleRule(this._uid);
 };
 
 function createModeBar(gd, buttons) {

src/lib/index.js

@@ -679,14 +679,24 @@ lib.removeElement = function(el) {
  * by all calls to this function
  */
 lib.addStyleRule = function(selector, styleString) {
-    if(!lib.styleSheet) {
-        var style = document.createElement('style');
+    lib.addRelatedStyleRule('global', selector, styleString);
+};
+
+/**
+ * for dynamically adding style rules
+ * to a stylesheet uniquely identified by a uid
+ */
+lib.addRelatedStyleRule = function(uid, selector, styleString) {
+    var id = 'plotly.js-style-' + uid,
+        style = document.getElementById(id);
+    if(!style) {
+        style = document.createElement('style');
+        style.setAttribute('id', id);
         // WebKit hack :(
         style.appendChild(document.createTextNode(''));
         document.head.appendChild(style);
-        lib.styleSheet = style.sheet;
     }
-    var styleSheet = lib.styleSheet;
+    var styleSheet = style.sheet;
 
     if(styleSheet.insertRule) {
         styleSheet.insertRule(selector + '{' + styleString + '}', 0);
@@ -697,6 +707,15 @@ lib.addStyleRule = function(selector, styleString) {
     else lib.warn('addStyleRule failed');
 };
 
+/**
+ * to remove from the page a stylesheet identified by a given uid
+ */
+lib.deleteRelatedStyleRule = function(uid) {
+    var id = 'plotly.js-style-' + uid,
+        style = document.getElementById(id);
+    if(style) style.remove();
+};
+
 lib.isIE = function() {
     return typeof window.navigator.msSaveBlob !== 'undefined';
 };

src/plots/layout_attributes.js

@@ -248,6 +248,13 @@ module.exports = {
             editType: 'modebar',
             description: 'Sets the color of the icons in the modebar.'
         },
+        activeIconColor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(0, 22, 72, 0.5)',
+            editType: 'modebar',
+            description: 'Sets the color of the active or hovered on icons in the modebar.'
+        },
         editType: 'modebar'
     }
 };

src/plots/plots.js

@@ -1337,6 +1337,7 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     coerce('modeBarStyle.orientation');
     coerce('modeBarStyle.bgcolor');
     coerce('modeBarStyle.iconColor');
+    coerce('modeBarStyle.activeIconColor');
 
     Registry.getComponentMethod(
         'calendars',

test/jasmine/tests/modebar_test.js

@@ -293,9 +293,15 @@ describe('ModeBar', function() {
         it('removes the mode bar entirely', function() {
             var modeBarParent = modeBar.element.parentNode;
 
+            var style = document.querySelector('style[id*="modebar"]');
+            expect(style).toBeTruthy();
+
             modeBar.destroy();
 
             expect(modeBarParent.querySelector('.modebar')).toBeNull();
+
+            style = document.querySelector('style[id*="modebar"]');
+            expect(style).toBeNull();
         });
     });