Skip to content
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

fix: add use of the safe version of getComputedStyle #6073

Merged
merged 1 commit into from
Jul 29, 2019
Merged

fix: add use of the safe version of getComputedStyle #6073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 3 additions & 6 deletions src/js/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import * as Fn from './utils/fn.js';
import * as Guid from './utils/guid.js';
import toTitleCase from './utils/to-title-case.js';
import mergeOptions from './utils/merge-options.js';
import computedStyle from './utils/computed-style';

/**
* Base class for all UI Components.
Expand Down Expand Up @@ -984,19 +985,15 @@ class Component {
throw new Error('currentDimension only accepts width or height value');
}

if (typeof window.getComputedStyle === 'function') {
const computedStyle = window.getComputedStyle(this.el_);

computedWidthOrHeight = computedStyle.getPropertyValue(widthOrHeight) || computedStyle[widthOrHeight];
}
computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);

// remove 'px' from variable and parse as integer
computedWidthOrHeight = parseFloat(computedWidthOrHeight);

// if the computed value is still 0, it's possible that the browser is lying
// and we want to check the offset values.
// This code also runs wherever getComputedStyle doesn't exist.
if (computedWidthOrHeight === 0) {
if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
const rule = `offset${toTitleCase(widthOrHeight)}`;

computedWidthOrHeight = this.el_[rule];
Expand Down
4 changes: 2 additions & 2 deletions src/js/utils/computed-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ function computedStyle(el, prop) {
}

if (typeof window.getComputedStyle === 'function') {
const cs = window.getComputedStyle(el);
const computedStyleValue = window.getComputedStyle(el);
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe this should just be called style? That is what they use on mdn

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Are you referring to this page?
https://developer.mozilla.org/fr/docs/Web/API/Window/getComputedStyle

They also use cs in the examples, but I'm not a fan of very short abbreviations or too much generic term where you have to go back to the declaration to understand exactly the variable.

Do you want me to change my commit to use the name style?

Copy link
Member

Choose a reason for hiding this comment

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

I think this is fine.


return cs ? cs[prop] : '';
return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
}

return '';
Expand Down