Merge pull request #3280 from plotly/3268-watermark

implement watermark config option

Author: antoinerg

build/plotcss.js

@@ -32,8 +32,8 @@ var rules = {
     "X .cursor-ne-resize": "cursor:ne-resize;",
     "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;",
     "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;",
-    "X .modebar--hover": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
-    "X:hover .modebar--hover": "opacity:1;",
+    "X .modebar--hover>:not(.watermark)": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
+    "X:hover .modebar--hover .modebar-group": "opacity:1;",
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
     "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",

src/components/modebar/manage.js

@@ -29,7 +29,7 @@ module.exports = function manageModeBar(gd) {
         context = gd._context,
         modeBar = fullLayout._modeBar;
 
-    if(!context.displayModeBar) {
+    if(!context.displayModeBar && !context.watermark) {
         if(modeBar) {
             modeBar.destroy();
             delete fullLayout._modeBar;
@@ -57,6 +57,9 @@ module.exports = function manageModeBar(gd) {
     if(Array.isArray(customButtons) && customButtons.length) {
         buttonGroups = fillCustomButton(customButtons);
     }
+    else if(!context.displayModeBar && context.watermark) {
+        buttonGroups = [];
+    }
     else {
         buttonGroups = getButtonGroups(
             gd,

src/components/modebar/modebar.js

@@ -80,11 +80,16 @@ proto.update = function(graphInfo, buttons) {
 
         this.updateButtons(buttons);
 
-        if(context.displaylogo) {
+        if(context.watermark || context.displaylogo) {
+            var logoGroup = this.getLogo();
+            if(context.watermark) {
+                logoGroup.className = logoGroup.className + ' watermark';
+            }
+
             if(fullLayout.modebar.orientation === 'v') {
-                this.element.prepend(this.getLogo());
+                this.element.prepend(logoGroup);
             } else {
-                this.element.appendChild(this.getLogo());
+                this.element.appendChild(logoGroup);
             }
 
             this.hasLogo = true;

src/css/_modebar.scss

@@ -5,12 +5,12 @@
     z-index: 1001;
 }
 
-.modebar--hover {
+.modebar--hover > :not(.watermark) {
     opacity: 0;
     @include vendor('transition', opacity 0.3s ease 0s);
 }
 
-&:hover .modebar--hover {
+&:hover .modebar--hover .modebar-group {
     opacity: 1;
 }
 

src/plot_api/plot_config.js

@@ -133,6 +133,9 @@ module.exports = {
     // add the plotly logo on the end of the mode bar
     displaylogo: true,
 
+    // watermark the images with the company's logo
+    watermark: false,
+
     // increase the pixel ratio for Gl plot images
     plotGlPixelRatio: 2,
 

test/jasmine/tests/modebar_test.js

@@ -756,6 +756,16 @@ describe('ModeBar', function() {
             expect(countLogo(gd._fullLayout._modeBar)).toEqual(0);
         });
 
+        it('always displays the logo if watermark config arg is true', function() {
+            var gd = getMockGraphInfo();
+            gd._context.displaylogo = false;
+            gd._context.displayModeBar = false;
+            gd._context.watermark = true;
+            manageModeBar(gd);
+            expect(countLogo(gd._fullLayout._modeBar)).toEqual(1);
+            expect(countButtons(gd._fullLayout._modeBar)).toEqual(1);
+        });
+
         // gives 11 buttons in 5 groups by default
         function setupGraphInfo() {
             var gd = getMockGraphInfo(['x'], ['y']);