Skip to content

implement watermark config option #3280

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 2 commits into from
Nov 23, 2018
Merged

implement watermark config option #3280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cccff0d
implement watermark config option
antoinerg Nov 22, 2018
df10f70
test watermark config option
antoinerg Nov 22, 2018
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
4 changes: 2 additions & 2 deletions build/plotcss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;",
Expand Down
5 changes: 4 additions & 1 deletion src/components/modebar/manage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 8 additions & 3 deletions src/components/modebar/modebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/css/_modebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
z-index: 1001;
}

.modebar--hover {
.modebar--hover > :not(.watermark) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently :not is supported IE9+: https://caniuse.com/#search=%3Anot

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS child selector should also work in IE9+. The reason we use it is because we cannot override the opacity of a child if the parent has a CSS opacity.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice find. But we should test this out in IE9 and IE11 (from browserstack) before merging this thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works in IE11:
ie11_watermark

IE9/10 doesn't work on master 😐
ie9_fail_master2

I will open an issue for the latter.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait, right the main plotly.js bundle doesn't work in ie9.

You'll need to use plotly-basic.js:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works in IE9 🎉

ie9_watermark

About using plotly-basic.js in IE9 versus plotly.js: is this documented somewhere? If not I should open an issue over at the documentation project.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More precisely, all SVG-based traces should work in IE9.

We could maybe add some info here ->

https://github.com/plotly/plotly.js/tree/master/dist#to-support-ie9

opacity: 0;
@include vendor('transition', opacity 0.3s ease 0s);
}

&:hover .modebar--hover {
&:hover .modebar--hover .modebar-group {
opacity: 1;
}

Expand Down
3 changes: 3 additions & 0 deletions src/plot_api/plot_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yesss! false by default 👌


// increase the pixel ratio for Gl plot images
plotGlPixelRatio: 2,

Expand Down
10 changes: 10 additions & 0 deletions test/jasmine/tests/modebar_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand Down